:root {
  --ink: #302720; --muted: #746759; --accent: #7c4b32; --accent-dark: #593321;
  --soft-accent: #f1e6d8; --line: #e2d7c7; --surface: #fffcf7; --canvas: #eae2d6;
  --amber: #87591e; --soft-amber: #f5e9c9; --red: #a04437; --blue: #526566;
  --walnut: #30251f; --gold: #b89a60; --gold-light: #e4d0a3; --success: #506343;
  --radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink); background: var(--canvas); font-size: 14px; font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
body:not([data-auth="ready"]) > #main-content, body:not([data-auth="ready"]) > .skip-link { display: none; }
body:not([data-area="demo"]) > #main-content, body:not([data-area="demo"]) > .skip-link { display: none; }
[hidden] { display: none !important; }
.account-loading { max-width: 640px; margin: 100px auto; padding: 24px; text-align: center; color: var(--muted); }
.account-loading .button { margin-top: 20px; }
.account-entry { max-width: 1040px; min-height: calc(100dvh - 62px); margin: auto; padding: 64px 32px; display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: center; }
.account-intro h1 { margin: 20px 0; font-size: clamp(32px, 4vw, 48px); line-height: 1.18; letter-spacing: -1.5px; }
.account-intro > p:last-child { max-width: 360px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.account-intro .eyebrow { color: var(--amber); }
.account-card { padding: 30px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: var(--radius); box-shadow: 0 12px 36px #30251f0a; }
.account-card h2 { margin: 28px 0 10px; font-size: 24px; letter-spacing: -.5px; }
.account-card > p { line-height: 1.6; }
.account-card .form-fields { padding: 24px 0 0; }
.account-card .form-fields label { margin-bottom: 18px; }
.account-card .form-fields input { min-height: 44px; }
.account-card .button { width: 100%; min-height: 44px; margin-top: 12px; }
.account-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); }
.account-tabs button { padding: 0 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font-size: 13px; }
.account-tabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--gold); font-weight: 600; }
.account-email { color: #e4cfaa; font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 250px; }
.account-logout.text-button { color: #e4cfaa; }
.concierge-hub { max-width: 1200px; margin: 0 auto; padding: 32px 24px 64px; }
.concierge-hub .page-heading { margin-bottom: 28px; }.concierge-hub .page-heading p { margin-top: 10px; }
.concierge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.concierge-card, .settings-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 24px; }
.concierge-card { display: grid; gap: 16px; border-top: 3px solid var(--gold); }.concierge-card h2 { margin: 0; font-size: 21px; overflow-wrap: anywhere; }.concierge-card p { color: var(--muted); font-size: 12px; line-height: 1.6; }.concierge-card .button { justify-self: start; }
.concierge-empty { grid-column: 1 / -1; padding: 64px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--gold); border-radius: var(--radius); }.concierge-empty h2 { margin-bottom: 12px; }.concierge-empty p { color: var(--muted); line-height: 1.7; }
.settings-columns { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.settings-card.form-fields { padding: 24px; }.settings-card h2 { margin: 0 0 24px; font-size: 18px; }.settings-card label { margin-top: 20px; }.settings-card textarea { resize: vertical; min-height: 100px; line-height: 1.6; }.settings-card .small { line-height: 1.6; }
.settings-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 20px; }.settings-actions p { flex: 1; }
.slug-field { display: flex; align-items: center; gap: 12px; }.slug-field input { flex: 1; min-width: 0; }.slug-field > span { color: var(--muted); font-weight: 400; }
#concierge-create-form { max-width: 740px; }.concierge-domain { display: inline-block; margin-top: 10px; color: var(--amber); font-size: 13px; overflow-wrap: anywhere; }
.concierge-members { margin-top: 20px; }.team-member { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); }.team-member > div { min-width: 0; }.team-member strong, .team-member small { display: block; overflow-wrap: anywhere; }.team-member strong { font-size: 13px; }.team-member small { margin-top: 5px; color: var(--muted); line-height: 1.5; }.team-member .text-button { font-size: 11px; }
#concierge-member-form { padding: 8px 0 0; }#concierge-member-form .button { margin-top: 16px; }.demo-return { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 24px; }
@media (max-width: 780px) { .settings-columns { grid-template-columns: 1fr; }.concierge-hub { padding: 24px 16px; }.concierge-hub .page-heading { align-items: flex-start; flex-direction: column; gap: 18px; }.slug-field { gap: 8px; }.header-right { gap: 12px; } }
@media (max-width: 780px) { .account-entry { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 32px; padding: 36px 20px; }.account-intro h1 { font-size: 32px; }.account-intro > p:last-child { font-size: 14px; }.account-email { max-width: 140px; }.account-card { padding: 24px; } }
button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }
button { color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { transition: background .16s, color .16s, border-color .16s; }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #a17a3d; outline-offset: 3px; }
svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon-library { display: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 21px; line-height: 1.25; letter-spacing: -.5px; font-weight: 650; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.15px; }
h3 { font-size: 12px; font-weight: 550; color: var(--muted); }
.muted { color: var(--muted); }.small { font-size: 12px; }.flip { transform: rotate(180deg); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -50px; left: 20px; z-index: 30; background: var(--surface); padding: 12px; color: var(--accent); }.skip-link:focus { top: 10px; }
.app-header { height: 62px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: var(--walnut); border-bottom: 1px solid var(--gold); }
.brand { display: flex; align-items: center; gap: 12px; color: #f4e9d7; font-size: 21px; font-weight: 650; letter-spacing: -.5px; text-decoration: none; }
.brand-mark { width: 33px; height: 33px; border-radius: 10px; background: #59422e; box-shadow: inset 0 0 0 1px #a78a53; color: var(--gold-light); font-size: 31px; line-height: 26px; text-align: center; position: relative; font-weight: 500; }
.brand-mark span { position: absolute; width: 5px; height: 5px; right: 5px; top: 14px; border-radius: 50%; background: #dbc18a; }
.brand-divider { width: 1px; height: 20px; background: #6b543a; margin: 0 8px; }.club-name { font-size: 13px; font-weight: 450; letter-spacing: 0; color: #c5b59d; }
.header-right { display: flex; align-items: center; gap: 22px; }.demo-badge { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #c5b59d; }.demo-badge span { width: 6px; height: 6px; background: #c7a868; border-radius: 50%; }
.profile { border: 1px solid #806647; background: #49382a; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; color: #e4cfaa; }
main { max-width: 1900px; margin: auto; padding: 16px 24px 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 16px; }.eyebrow { font-size: 10px; letter-spacing: 1.7px; font-weight: 600; color: #8b6c3f; margin-bottom: 9px; }
.heading-actions { display: flex; align-items: center; gap: 26px; }.daily-summary { display: flex; gap: 19px; font-size: 12px; color: var(--muted); }.daily-summary strong { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }.daily-summary > span:first-child { color: var(--amber); }.daily-summary > span:first-child strong { color: inherit; }
.panel-triggers { display: none; gap: 8px; margin-bottom: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 13px; border-radius: 7px; border: 1px solid #d8cbb7; background: var(--surface); font-size: 12px; font-weight: 550; white-space: nowrap; }.button:hover { background: #f0e7d9; }.button.primary { background: var(--accent); color: #fff9ed; border-color: var(--accent); }.button.primary:hover { background: var(--accent-dark); }.button.danger { background: var(--red); color: #fff9ed; border-color: var(--red); }.button.danger:hover { background: #7f3028; }
.text-button { border: 0; background: none; color: var(--accent); font-size: 12px; font-weight: 550; padding: 8px 3px; }.text-button:hover { color: var(--accent-dark); text-decoration: underline; }.text-button.danger { color: var(--red); }
.icon-button { border: 0; border-radius: 7px; background: transparent; display: grid; place-items: center; width: 34px; height: 34px; }.icon-button:hover { background: var(--canvas); }
.workspace { display: grid; grid-template-columns: 288px minmax(340px, 1fr) 322px; height: max(560px, calc(100dvh - 172px)); border: 1px solid #d0bea1; border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 4px 18px #35251b0a; }
.inbox, .conversation, .schedule { min-width: 0; min-height: 0; }.inbox { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.inbox-heading { padding: 24px 19px 18px; display: flex; align-items: center; justify-content: space-between; }.count { font-size: 11px; padding: 2px 6px; border-radius: 5px; background: #ede2cf; color: #746047; margin-left: 5px; font-weight: 500; }
.search { margin: 0 16px; border: 1px solid var(--line); border-radius: 7px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #f7f1e7; color: #8a7963; }.search svg { width: 16px; }.search input { width: 100%; min-width: 0; border: 0; background: transparent; height: 37px; font-size: 12px; color: var(--ink); outline: none; }.search:focus-within { box-shadow: 0 0 0 2px #bd9d62; }.search input::placeholder { color: #877761; }
.inbox-filters { padding: 15px 16px 12px; }.segmented { display: flex; gap: 5px; border-bottom: 1px solid var(--line); }.segmented button { background: none; border: 0; border-bottom: 2px solid transparent; font-size: 12px; padding: 8px 9px 11px; color: var(--muted); }.segmented button.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }.segmented button span { font-size: 10px; background: var(--soft-amber); color: var(--amber); padding: 1px 5px; border-radius: 4px; margin-left: 3px; }
.inbox-filters select { margin-top: 9px; border: 0; background: none; color: var(--muted); font-size: 11px; padding: 3px 0; }
.inbox-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c6b599 transparent; }.inbox-item { width: 100%; border: 0; border-bottom: 1px solid #eee4d5; border-left: 3px solid transparent; background: var(--surface); text-align: left; padding: 17px 16px 16px 13px; }.inbox-item:hover { background: #f6eddf; }.inbox-item.selected { background: #eee0c8; border-left-color: var(--accent); }
.item-preview { display: block; }
.item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }.item-cost { color: var(--ink); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }.item-cost.unavailable { color: var(--muted); font-size: 9px; font-weight: 400; }
.queue-group { display: flex; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; color: var(--muted); background: #f6f0e5; }.queue-group.needs-attention { color: var(--amber); background: #f5e9ca; }
.item-top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }.avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #e9ddc7; color: #765c36; font-size: 11px; font-weight: 550; flex-shrink: 0; }.avatar.sage { background: #e7dfca; color: #715731; }.avatar.blue { background: #e0e5de; color: #596856; }.avatar.rose { background: #eeddd1; color: #885b44; }
.item-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; }.item-time { color: #847361; font-size: 10px; }.item-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 1.7; color: #756450; }.item-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }.channel { display: inline-flex; align-items: center; gap: 4px; color: #7c6b56; font-size: 10px; }.channel svg { width: 12px; height: 12px; }.status { display: inline-flex; align-items: center; gap: 4px; color: var(--success); font-size: 10px; background: #e9eddf; padding: 3px 6px; border-radius: 4px; }.status.attention { color: var(--amber); background: var(--soft-amber); }.status.cancelled { color: #786c5d; background: #ede6db; }.status svg { width: 11px; height: 11px; }
.inbox-footer { border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; padding: 16px; font-size: 10px; color: #8a765b; }.inbox-footer svg { width: 13px; }
.conversation { display: flex; flex-direction: column; }.conversation:focus { outline: none; }.conversation-header { padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }.guest { display: flex; gap: 12px; align-items: center; min-width: 0; }.guest .avatar { width: 42px; height: 42px; font-size: 13px; }.guest h2 { font-size: 16px; }.guest p { margin-top: 5px; font-size: 11px; color: var(--muted); }.owner-control { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }.owner-label { display: flex; align-items: center; gap: 4px; color: var(--success); font-size: 10px; }.owner-label svg { width: 12px; height: 12px; }.owner-control .button { min-height: 30px; font-size: 11px; padding: 5px 9px; }
.booking-context { margin: 0 24px; border: 1px solid #d9c29a; background: #f6eddb; border-radius: 8px; padding: 14px; }.booking-main { display: flex; align-items: flex-start; gap: 11px; }.booking-icon { border: 1px solid #d4b985; background: #ead8b3; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px; color: #89642f; flex-shrink: 0; }.booking-description { flex: 1; min-width: 0; }.booking-description strong { font-size: 13px; font-weight: 600; }.booking-description p { margin-top: 5px; font-size: 11px; color: #7c6847; }.booking-tools { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 7px; }.booking-tools .text-button { font-size: 11px; padding: 3px; }.booking-confirmed { color: #596a43; margin-left: auto; }.booking-context.empty-booking { background: #faf5ed; border-color: var(--line); }
.attention-context { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 24px 12px; padding: 12px 14px; border: 1px solid #dec18e; border-radius: 8px; background: #fcf2d9; color: var(--amber); }.attention-context[hidden] { display: none; }.attention-context strong { font-size: 12px; font-weight: 600; }.attention-context p { margin-top: 5px; font-size: 11px; line-height: 1.5; }.attention-context .text-button { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }.attention-context svg { width: 14px; height: 14px; }
.conversation-header { flex-wrap: wrap; }.cost-trigger { display: flex; align-items: center; gap: 10px; flex-basis: 100%; min-height: 44px; margin-top: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: #f8f1e5; text-align: left; font-size: 11px; }.cost-trigger:hover { background: #f3ead9; border-color: #cbb085; }.cost-trigger small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }.cost-trigger strong { margin-left: auto; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }.cost-trigger > svg { color: var(--muted); width: 14px; }
.history-heading { display: flex; justify-content: space-between; align-items: center; padding: 21px 24px 14px; }.history-heading .small { font-size: 10px; }
.timeline { flex: 1; min-height: 130px; overflow-y: auto; padding: 0 24px 20px; scrollbar-width: thin; scrollbar-color: #c6b599 transparent; }.call-event { display: flex; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px; background: #faf6ef; }.call-icon { display: grid; place-items: center; width: 31px; height: 31px; background: #f0e5d0; border-radius: 50%; color: #84652e; }.call-event h4 { font-size: 11px; font-weight: 550; margin: 0 0 5px; }.call-event p { font-size: 10px; color: var(--muted); }.call-event .call-duration { margin-left: auto; font-size: 12px; color: #765b37; font-variant-numeric: tabular-nums; }
.message { margin: 0 0 17px; max-width: 89%; }.message.agent, .message.human { margin-left: auto; }.message-meta { display: flex; gap: 7px; align-items: center; font-size: 10px; color: #7d6b55; margin: 0 0 6px; }.message-meta time { color: #8c7a62; font-variant-numeric: tabular-nums; }.message.agent .message-meta, .message.human .message-meta { justify-content: flex-end; }.message-meta svg { width: 11px; height: 11px; color: #98763e; }.bubble { background: #f4eee5; border: 1px solid #e9dfd0; border-radius: 2px 9px 9px 9px; padding: 11px 13px; font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }.agent .bubble, .human .bubble { background: #f3ead9; border-color: #e3d1b3; border-radius: 9px 2px 9px 9px; }.human .bubble { background: #edf0e6; border-color: #d9dfcf; }
.timeline-event { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 19px 0; font-size: 10px; color: #80673e; line-height: 1.6; text-align: center; }.timeline-event svg { width: 13px; height: 13px; }.timeline-event time { color: #8b775a; white-space: nowrap; }.note-entry { border-left: 2px solid #bc9754; background: #faf0d9; padding: 10px 12px; margin: 15px 0; font-size: 12px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }.note-entry small { display: block; font-size: 10px; color: #8a6b35; margin-bottom: 4px; }
.composer { border-top: 1px solid var(--line); padding: 15px 24px 17px; }.composer label { display: block; font-size: 10px; color: var(--muted); margin-bottom: 8px; }.composer textarea { width: 100%; resize: vertical; min-height: 54px; max-height: 140px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: #fffaf2; font-size: 12px; color: var(--ink); }.composer textarea::placeholder { color: #8e7e68; }.composer-bottom { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }.composer-bottom .small { font-size: 10px; }.composer-bottom .button { font-size: 10px; min-height: 30px; }.composer-bottom .button svg { width: 13px; height: 13px; }
.schedule { border-left: 1px solid var(--line); background: #f7f1e6; display: flex; flex-direction: column; }.schedule-heading { padding: 24px 20px 20px; display: flex; justify-content: space-between; align-items: center; }.schedule-heading p { font-size: 11px; margin-top: 6px; }.schedule-heading > svg { color: #947a50; width: 18px; }.calendar-navigation { display: flex; justify-content: space-between; align-items: center; padding: 0 13px; }.date-label { font-weight: 600; font-size: 13px; position: relative; padding: 8px; }.date-label input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }.date-label:focus-within { outline: 2px solid #a17a3d; border-radius: 4px; }.calendar-subheading { display: flex; align-items: center; justify-content: space-between; padding: 4px 22px 13px; }.calendar-subheading .small, .calendar-subheading .text-button { font-size: 10px; }.calendar-subheading .text-button { padding: 4px 0; }
.table-labels { display: grid; grid-template-columns: 41px 1fr 1fr; gap: 4px; padding-right: 14px; margin-bottom: 18px; font-size: 11px; }.table-labels > span { display: flex; flex-direction: column; align-items: center; gap: 5px; }.table-labels b { display: flex; align-items: center; gap: 6px; font-weight: 550; }.table-labels small { color: var(--muted); font-size: 10px; }.table-dot { width: 6px; height: 6px; border-radius: 50%; }.table-dot.first { background: #9d773b; }.table-dot.second { background: #718067; }
.calendar-scroll { min-height: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: #c6b599 transparent; }.calendar { position: relative; margin-right: 14px; height: 672px; }.hour { position: absolute; width: 100%; height: 56px; padding-left: 9px; font-size: 9px; color: #8c7a62; font-variant-numeric: tabular-nums; }.hour span { display: inline-block; transform: translateY(-6px); }.hour::after { content: ""; position: absolute; left: 42px; right: 0; top: 0; border-top: 1px solid #e5dbc9; }.hour::before { content: ""; position: absolute; left: 42px; right: 0; top: 28px; border-top: 1px dashed #eee5d7; }.calendar-columns { position: absolute; top: 0; bottom: 0; left: 43px; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }.table-column { position: relative; border-left: 1px solid #f2eade; }.calendar-booking { position: absolute; width: calc(100% - 3px); left: 2px; border: 1px solid #dbc49d; background: #f0e2c9; border-radius: 5px; color: #795c2d; text-align: left; padding: 9px 8px; overflow: hidden; min-height: 29px; }.calendar-booking.table-2 { color: #566344; background: #e9edde; border-color: #d2dac3; }.calendar-booking.is-selected { color: #f8edda; border-color: var(--gold); background: var(--walnut); box-shadow: 0 3px 8px #50362224; }.calendar-booking:hover { filter: brightness(.96); }.calendar-booking strong { display: block; font-size: 10px; line-height: 1.4; font-weight: 550; }.calendar-booking time { display: block; font-size: 9px; margin-top: 4px; font-variant-numeric: tabular-nums; }.calendar-booking .booking-channel { display: flex; align-items: center; gap: 3px; font-size: 9px; margin-top: 9px; opacity: .8; }.calendar-booking svg { width: 10px; height: 10px; }.calendar-booking.is-short { padding: 5px 6px; }.calendar-booking.is-short .booking-channel { display: none; }
.calendar-legend { display: flex; justify-content: center; gap: 15px; padding: 15px 10px; border-top: 1px solid var(--line); font-size: 9px; color: #86714f; }.calendar-legend span { display: inline-flex; align-items: center; gap: 4px; }.legend-square { width: 7px; height: 7px; background: #d7bd88; border-radius: 2px; }.legend-square.selected { background: var(--walnut); }.schedule-footer { display: flex; justify-content: center; gap: 9px; align-items: center; padding: 11px 12px 16px; color: #8b7654; font-size: 10px; line-height: 1.6; }.schedule-footer svg { width: 18px; }
.calendar-now { position: absolute; left: 42px; right: 0; height: 1px; background: #a37832; pointer-events: none; }.calendar-now::before { content: ''; position: absolute; width: 5px; height: 5px; left: -2px; top: -2px; border-radius: 50%; background: #a37832; }.calendar-now time { position: absolute; left: -40px; top: -7px; padding: 2px 3px; font-size: 9px; background: #f5e9c9; color: #805b25; border-radius: 3px; font-variant-numeric: tabular-nums; }
.call-transcript { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; }.call-transcript summary { display: flex; align-items: center; gap: 10px; padding: 13px; cursor: pointer; font-size: 12px; font-weight: 550; list-style: none; }.call-transcript summary::-webkit-details-marker { display: none; }.call-transcript summary > svg:first-child { color: var(--muted); width: 17px; }.call-transcript summary small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; font-weight: 400; }.disclosure-arrow { margin-left: auto; width: 15px; color: var(--muted); }.call-transcript[open] .disclosure-arrow { transform: rotate(90deg); }.transcript-content { padding: 16px 13px 13px; border-top: 1px solid var(--line); }.recording-note { color: var(--muted); font-size: 10px; text-align: center; line-height: 1.5; }
.demo-note { padding: 12px 0; color: #7c6b55; font-size: 10px; text-align: center; }.empty-state { padding: 30px 20px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.8; }
dialog { border: 1px solid var(--line); border-radius: 14px; padding: 0; color: var(--ink); width: min(460px, calc(100% - 32px)); box-shadow: 0 25px 90px #2d1e1855; }dialog::backdrop { background: #241a1366; backdrop-filter: blur(3px); }.dialog-heading { padding: 24px; display: flex; align-items: center; justify-content: space-between; }.dialog-heading h2 { font-size: 21px; font-weight: 600; }.dialog-heading .eyebrow { font-size: 9px; }.form-fields { padding: 0 24px 20px; }.form-fields label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; margin-bottom: 17px; }.form-fields input, .form-fields select { width: 100%; padding: 10px; min-height: 42px; border: 1px solid #d8cbb7; border-radius: 6px; background: #faf6ef; color: var(--ink); }.form-fields input:read-only { background: #f1e9dc; color: #857154; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.dialog-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--line); background: #f8f1e5; }.form-error { font-size: 12px; line-height: 1.5; color: var(--red); margin-bottom: 10px; }.form-error:empty { display: none; }.cancel-description { padding: 0 24px 20px; font-size: 13px; line-height: 1.6; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 10px); opacity: 0; pointer-events: none; padding: 12px 18px; border-radius: 8px; background: #4b3528; color: #fff9ed; font-size: 12px; box-shadow: 0 4px 20px #39271a33; transition: opacity .2s, transform .2s; max-width: calc(100% - 30px); z-index: 20; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }
dialog { background: var(--surface); }
.cost-details { padding: 0 24px 24px; }.cost-lines { margin: 22px 0 16px; }.cost-lines > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; font-size: 13px; }.cost-lines dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }.cost-lines .cost-total { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-weight: 600; }.cost-total dd { font-size: 20px; }.cost-explanation { margin: 16px 0; color: var(--muted); font-size: 12px; line-height: 1.6; }.cost-demo { color: var(--amber); font-size: 11px; }
.responsive-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(380px, calc(100% - 24px)); height: 100dvh; max-height: 100dvh; border-radius: 12px 0 0 12px; overflow: hidden; }
.responsive-panel[open] { display: flex; flex-direction: column; }.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }.panel-heading .text-button { display: inline-flex; align-items: center; gap: 5px; }.panel-heading svg { width: 16px; }.responsive-panel > .inbox, .responsive-panel > .schedule { display: flex; flex: 1; border: 0; }.responsive-panel .schedule-heading, .responsive-panel .inbox-heading { padding-top: 18px; }
.inbox { --ink: #f3e8d7; --muted: #c4b39e; --line: #574639; --surface: #372a22; --accent: #e3c891; --accent-dark: #f0dbae; color: var(--ink); background: var(--surface); }
.inbox .count { background: #5b4933; color: #ecd5a8; }.inbox .search { background: #2e231c; border-color: #68523c; color: #c0a782; }.inbox .search input::placeholder { color: #b8a68d; }.inbox .search:focus-within { box-shadow: 0 0 0 2px var(--gold); }.inbox .inbox-list { scrollbar-color: #7b6346 transparent; }
.inbox .inbox-item { border-bottom-color: #4d3c2e; }.inbox .inbox-item:hover { background: #443326; }.inbox .inbox-item.selected { background: #57412b; border-left-color: var(--gold-light); }.inbox .item-time, .inbox .channel { color: #c0aa8c; }.inbox .item-preview { color: #d0bea3; }
.inbox .queue-group { background: #30251e; color: #baa88e; }.inbox .queue-group.needs-attention { background: #4a3622; color: #ead09b; }.inbox .segmented button span { background: #6a4b28; color: #f7dfad; }.inbox .status.attention { background: #74552d; color: #fff0c7; }.inbox .status { background: #dfe5d2; }.inbox .status.cancelled { background: #675744; color: #e5d7c0; }.inbox .inbox-footer { color: #bda887; }
.page-nav { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; font-weight: 550; }
.page-nav a:hover { color: var(--accent-dark); background: var(--soft-accent); }.page-nav a[aria-current="page"] { color: var(--accent-dark); border-color: var(--accent); }
.today-page { max-width: 1320px; margin: 0 auto; display: grid; gap: 20px; }#today-page[hidden], #workspace-page[hidden] { display: none; }
.today-heading { margin-bottom: 4px; }.today-heading h1 { font-size: 30px; }.today-caption { color: var(--muted); margin-top: 9px; font-size: 12px; line-height: 1.6; }
.today-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.today-metric { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.today-metric > div { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }.today-metric svg { color: var(--accent); width: 17px; }
.today-metric > strong { display: block; margin: 19px 0 10px; font-size: clamp(26px, 2.7vw, 38px); letter-spacing: -1px; font-weight: 600; font-variant-numeric: tabular-nums; }.today-metric p { color: var(--muted); font-size: 11px; line-height: 1.6; }
.today-metric:last-child { background: var(--walnut); color: #fff4df; border-color: var(--walnut); }.today-metric:last-child > div, .today-metric:last-child p { color: #d0bea3; }.today-metric:last-child svg { color: var(--gold-light); }
.today-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.today-card { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.today-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }.today-card-heading h2 { font-size: 16px; }.today-card-caption { color: var(--muted); font-size: 12px; margin: -5px 0 15px; line-height: 1.5; }
.attention-card { border-top: 3px solid var(--gold); padding-top: 22px; }.today-count { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; background: var(--soft-amber); color: var(--amber); border-radius: 8px; font-size: 13px; font-weight: 600; }
.today-record { width: 100%; display: flex; align-items: center; gap: 13px; min-height: 72px; padding: 13px 4px; text-align: left; background: transparent; border: 0; border-top: 1px solid var(--line); }.today-record:hover { background: var(--soft-accent); }.today-record > span { min-width: 0; flex: 1; }.today-record strong { display: block; font-size: 13px; font-weight: 600; }.today-record small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }.today-record > svg { width: 16px; color: var(--accent); }.today-record .avatar { flex: 0 0 36px; }
.today-time { font-size: 17px; font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; }.today-empty { padding: 20px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.today-channels { display: grid; gap: 19px; padding: 8px 0 22px; }.today-channel { display: grid; grid-template-columns: 90px minmax(0, 1fr) 25px; align-items: center; gap: 16px; font-size: 12px; }.today-channel > strong { text-align: right; font-variant-numeric: tabular-nums; }.today-bar { height: 7px; border-radius: 5px; background: var(--soft-accent); overflow: hidden; }.today-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.today-footnote { color: var(--muted); font-size: 11px; line-height: 1.7; }.today-costs { margin: 0 0 14px; }.today-costs > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 13px; }.today-costs dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }.today-costs .today-cost-total { border-top: 1px solid var(--line); margin-top: 7px; padding-top: 16px; font-weight: 600; }.today-cost-total dd { font-size: 18px; }
.today-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }.today-table { min-width: 0; }.today-table-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }.today-table-heading strong { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }.today-table-heading svg { color: var(--accent); }.today-table-heading > span, .today-table > p { font-size: 11px; color: var(--muted); }.today-table > p { margin: 10px 0 15px; }
.today-slots { display: flex; flex-wrap: wrap; gap: 8px; }.today-slot { flex: 1 1 110px; text-align: left; padding: 12px; border: 1px solid #d8bf90; border-radius: 8px; background: #f3e7cf; }.today-slot strong { display: block; font-size: 12px; font-variant-numeric: tabular-nums; }.today-slot span { display: block; font-size: 11px; margin-top: 6px; }.today-slot.elapsed { border-color: var(--line); background: #f4f0e9; color: var(--muted); }.today-slot:hover { border-color: var(--accent); background: var(--soft-accent); }
@media (max-width: 1000px) { .today-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }.today-metric > strong { font-size: 32px; } }
@media (max-width: 720px) { .page-nav { margin-bottom: 20px; }.page-nav a { padding: 0 12px; font-size: 12px; }.today-page { gap: 16px; }.today-heading { flex-wrap: wrap; }.today-heading h1 { font-size: 27px; }.today-metrics { gap: 10px; }.today-metric { padding: 16px; }.today-metric > div { align-items: flex-start; font-size: 11px; gap: 6px; }.today-metric > strong { font-size: 27px; }.today-columns, .today-tables { grid-template-columns: minmax(0, 1fr); gap: 16px; }.today-card { padding: 18px; }.attention-card { padding-top: 16px; }.today-card-heading { flex-wrap: wrap; }.today-table + .today-table { border-top: 1px solid var(--line); padding-top: 18px; }.today-channel { gap: 10px; } }
@media (min-width: 1550px) {
  .workspace { grid-template-columns: 315px minmax(400px, 1fr) 360px; }.bubble { font-size: 13px; }.item-name { font-size: 13px; }.conversation-header { padding: 25px 32px; }.booking-context { margin: 0 32px; }.attention-context { margin-left: 32px; margin-right: 32px; }.timeline, .composer { padding-left: 32px; padding-right: 32px; }.history-heading { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1200px) {
  main { padding: 16px 18px 0; }.app-header { padding: 0 20px; }.workspace { grid-template-columns: 242px minmax(320px, 1fr) 268px; }.conversation-header { padding: 19px 16px; }.booking-context { margin: 0 16px; }.attention-context { margin-left: 16px; margin-right: 16px; flex-wrap: wrap; gap: 6px; }.timeline, .composer { padding-left: 16px; padding-right: 16px; }.history-heading { padding-left: 16px; padding-right: 16px; }.guest h2 { font-size: 14px; }.guest .avatar { display: none; }.daily-summary { display: none; }.calendar-booking { padding: 8px 5px; }.calendar-booking .booking-channel { font-size: 8px; }
}
@media (max-width: 1100px) {
  .workspace { grid-template-columns: 260px minmax(0, 1fr); height: max(560px, calc(100dvh - 222px)); }.workspace > .schedule { display: none; }.panel-triggers { display: flex; justify-content: flex-end; }.inbox-trigger { display: none; }
}
@media (max-width: 720px) {
  .app-header { height: 58px; padding: 0 16px; }.club-name, .brand-divider, .profile { display: none; }.brand { font-size: 19px; }.demo-badge { font-size: 10px; }main { padding: 14px 12px 0; }h1 { font-size: 19px; }.page-heading { gap: 10px; margin-bottom: 12px; }.heading-actions .button { font-size: 11px; padding: 9px; }.heading-actions .button svg { width: 14px; }.panel-triggers { justify-content: space-between; }.panel-triggers .inbox-trigger { display: inline-flex; }.panel-triggers .count { color: var(--amber); background: var(--soft-amber); }.workspace { grid-template-columns: minmax(0, 1fr); height: max(530px, calc(100dvh - 216px)); }.workspace > .inbox { display: none; }.conversation-header { padding: 20px 16px; }.guest .avatar { display: grid; width: 32px; height: 32px; font-size: 10px; }.guest { gap: 8px; }.guest h2 { font-size: 14px; }.guest p { font-size: 10px; }.owner-control .button { font-size: 10px; }.booking-main { gap: 8px; }.booking-icon { width: 28px; height: 28px; }.booking-confirmed { width: 15px; }.bubble { font-size: 13px; }.message { max-width: 93%; }.composer textarea, .form-fields input, .form-fields select { font-size: 16px; }.composer-bottom .small { max-width: 145px; }.button, .icon-button, .text-button { min-height: 40px; }.booking-tools { margin-top: 0; }.calendar-legend { font-size: 10px; }.demo-note { font-size: 9px; }.form-row { gap: 10px; }
}
@media (max-width: 400px) {
  .brand { font-size: 17px; gap: 8px; }.brand-mark { width: 28px; height: 28px; font-size: 27px; line-height: 23px; }.brand-mark span { top: 12px; }.header-right { gap: 0; }.guest .avatar { display: none; }.owner-label { max-width: 105px; text-align: right; font-size: 9px; }.booking-description strong { font-size: 12px; }.booking-description p { font-size: 10px; }.panel-triggers .button { font-size: 11px; padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }