/* Shared frosted surfaces. Solid defaults work without backdrop-filter support. */
:root {
  --glass-fill: rgb(246 248 250); --glass-raised: rgb(253 253 254);
  --glass-control: rgb(235 238 242); --glass-hover: rgb(223 228 234);
  --glass-edge: rgb(90 100 115 / .25); --glass-shine: rgb(255 255 255 / .7);
  --glass-blur: 0px; --glass-primary: rgb(48 51 57); --glass-primary-ink: #fff;
}
:root[data-theme='dark'], .frontpage {
  --glass-fill: rgb(27 29 33); --glass-raised: rgb(31 33 38);
  --glass-control: rgb(38 41 46); --glass-hover: rgb(48 51 57);
  --glass-edge: rgb(218 226 240 / .19); --glass-shine: rgb(255 255 255 / .08);
  --glass-primary: rgb(232 230 223); --glass-primary-ink: #181a1d;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-fill: rgb(246 248 250 / .7); --glass-raised: rgb(253 253 254 / .86);
    --glass-control: rgb(227 233 240 / .5); --glass-hover: rgb(216 224 235 / .7);
    --glass-primary: rgb(48 51 57 / .91); --glass-blur: 6px;
  }
  :root[data-theme='dark'], .frontpage {
    --glass-fill: rgb(23 26 31 / .44); --glass-raised: rgb(26 29 34 / .84);
    --glass-control: rgb(107 117 135 / .13); --glass-hover: rgb(145 157 177 / .2);
    --glass-primary: rgb(232 230 223 / .88);
  }
}

/* Blur the outer work surfaces once; their content stays sharp. */
body :is(.login-panel, .setup-content, .booking-surface, .booking-aside,
  .manage-card, .identity-bar, .settings-surface, .billing-surface, .team-surface,
  .danger-zone, .account-aside, .access-panel, .queue-panel, .detail-panel,
  .summary-strip, .plain-summary, .deleted-state),
body.dashboard :is(.sidebar, .mobile-bar, .mobile-nav, .workspace-mobile-tabs,
  .home-pulse, .manage-account, .agenda-toolbar, .date-switcher, .schedule-panel,
  .inbox-workspace, .list-surface, .editor-panel, .settings-section, .inline-form,
  .channels-list, .privacy-note, .bot-preview-panel, .publish-panel,
  .support-request, .support-context, .results-metrics, .results-panel, .activity-surface),
body.frontpage :is(header, .experience, .conversation) {
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: inset 0 1px var(--glass-shine), 0 12px 32px rgb(0 0 0 / .07);
}
body :is(.topbar, .login-header, .booking-header) {
  background: var(--glass-fill);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
/* Overlays remain denser because other interface text sits behind them. */
body.dashboard :is(.agenda-calendar, .account-menu, .workspace-menu),
body :is(.toast, .confirmation-panel) {
  background: var(--glass-raised);
  border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Tinted controls provide the same material without hundreds of blur layers. */
body .button.secondary, body.dashboard .button.secondary,
body :is(input:not([type='checkbox']):not([type='radio']), textarea, select),
body.dashboard :is(input:not([type='checkbox']):not([type='radio']), textarea, select),
body :is(.service-option, .professional-option, .day-option, .slot),
body.frontpage :is(.frontpage-login, .nav-cta) {
  background: var(--glass-control);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px var(--glass-shine);
  color: var(--ink);
}
body select option { background: var(--surface); color: var(--ink); }
body .button.primary:not(.danger), body.dashboard .button.primary:not(.danger),
body.frontpage :is(.pill.light, .pill.dark) {
  background: linear-gradient(rgb(255 255 255 / .09), transparent), var(--glass-primary);
  color: var(--glass-primary-ink);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px rgb(255 255 255 / .4), 0 4px 14px rgb(0 0 0 / .1);
}
body.dashboard :is(.header-actions, .home-welcome) > .button,
body.frontpage :is(.pill, .frontpage-login) {
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
body .button.secondary:hover:not(:disabled),
body.dashboard .button.secondary:hover:not(:disabled),
body.dashboard :is(.date-tab.active, .date-tab:hover:not(:disabled),
  .side-nav .nav-item.active, .side-nav .nav-item:hover, .workspace-mobile-tabs button.active),
body .service-option:hover, body.frontpage .frontpage-login:hover {
  background: var(--glass-hover);
}
body.dashboard :is(.nav-count, .workspace-mark, .account-row .avatar, .inbox-avatar) {
  background: var(--glass-control);
}
body.dashboard .date-tab { background: transparent; }
body.dashboard .date-tab.active { background: var(--glass-hover); }

/* The timeline shares its enclosing pane, with no second opaque background. */
body.dashboard :is(.inbox-list-panel, .inbox-detail-panel, .conversation-timeline,
  .conversation-composer, .person-editor, .agenda-professional-filter),
body.frontpage :is(.scenario-copy, .conversation-stage),
body .access-copy { background: transparent; }
body.dashboard .conversation-message { background: var(--glass-control); }
body.dashboard .conversation-message.outbound { background: color-mix(in srgb, var(--accent) 14%, transparent); }
body.dashboard :is(.inbox-list-item[aria-current='true'], .appointment:hover) { background: var(--glass-hover); }

/* Keep the homepage's wave intact; reveal the shared scene between sections. */
body.frontpage .space-canvas { z-index: -1; opacity: .65; }
body.frontpage :is(.intro, .possibilities, .process, .faq, .closing, .control, footer) { background: transparent; }
body.frontpage .experience .conversation {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: var(--glass-raised);
}

@media (max-width: 780px) {
  :root { --glass-blur: 4px; }
  body.dashboard :is(.mobile-bar, .mobile-nav, .workspace-mobile-tabs) { background: var(--glass-raised); }
}
@media (forced-colors: active) {
  :root, :root[data-theme='dark'], .frontpage {
    --glass-fill: var(--surface); --glass-raised: var(--surface);
    --glass-control: var(--surface-muted); --glass-hover: var(--surface-muted);
    --glass-primary: var(--accent-strong); --glass-blur: 0px;
  }
}