@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Devanagari";
  src: url("../fonts/noto-sans-devanagari-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --color-background: #fbf7f0;
  --color-surface: #fffdf8;
  --color-surface-alt: #f2eadf;
  --color-text: #302820;
  --color-muted: #706153;
  --color-coffee: #54382b;
  --color-coffee-soft: #eee3d6;
  --color-accent: #2f5d46;
  --color-accent-hover: #244a37;
  --color-accent-soft: #e8efe5;
  --color-on-accent: #fffdf8;
  --color-success: #275c3f;
  --color-success-soft: #e7f1e8;
  --color-warning: #78500f;
  --color-warning-soft: #fff0d0;
  --color-danger: #a12d28;
  --color-danger-hover: #81231f;
  --color-danger-soft: #fbe8e4;
  --color-border: #9b8874;
  --color-border-subtle: #e5d9c9;
  --color-focus: #1b6f51;
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-xs: .25rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.125rem;
  --radius-xl: 1.5rem;
  --radius-full: 999px;
  --shadow-sm: 0 2px 4px #54382b0a;
  --shadow-md: 0 8px 28px #54382b0d;
  --shadow-lg: 0 16px 48px #54382b17;
  --font-sans: "Inter", "Noto Sans Devanagari", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --leading-body: 1.65;
  --leading-heading: 1.25;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --nav-width: 15rem;
  --header-height: 4.5rem;
  --bottom-nav-height: 4.5rem;
}

* { box-sizing: border-box; }
html { scroll-padding-block: var(--space-6); }
body { margin: 0; background: var(--color-background); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); font-synthesis: none; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; }
a { color: var(--color-accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, input, textarea, select, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--color-coffee); line-height: var(--leading-heading); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-2xl); letter-spacing: -.035em; }
h2 { font-size: var(--text-xl); letter-spacing: -.02em; }
h3 { font-size: var(--text-lg); }
img, svg { max-width: 100%; }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
.eyebrow { color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .12em; margin-bottom: var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; inset: var(--space-2) auto auto var(--space-2); z-index: 100; transform: translateY(-200%); padding: var(--space-3); background: var(--color-surface); border: 2px solid var(--color-focus); border-radius: var(--radius-sm); }
.skip-link:focus { transform: none; }

/* Components. Legacy class aliases keep independently rendered HTMX fragments styled. */
.btn, .primary, .quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid transparent;
  border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  line-height: 1.5; text-align: center; text-decoration: none;
}
.btn--primary, .primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn--primary:hover, .primary:hover { background: var(--color-accent-hover); }
.btn--secondary, .quiet { background: var(--color-surface); color: var(--color-coffee); border-color: var(--color-border); }
.btn--secondary:hover, .quiet:hover { background: var(--color-coffee-soft); }
.btn--danger { background: var(--color-danger); color: var(--color-on-accent); }
.btn--danger:hover { background: var(--color-danger-hover); }
button:disabled, .btn:disabled, .primary:disabled, .quiet:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; background: var(--color-surface-alt); color: var(--color-muted); border-color: var(--color-border-subtle); }
.btn[aria-disabled="true"] { pointer-events: none; }
button.htmx-request { cursor: wait; }
.input, .textarea, .select, :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])), textarea, select {
  display: block; width: 100%; min-height: 44px; padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-base); line-height: 1.5;
}
input::placeholder, textarea::placeholder { color: var(--color-muted); opacity: 1; }
.textarea, textarea { resize: vertical; min-height: 6rem; }
input:disabled, textarea:disabled, select:disabled { background: var(--color-surface-alt); color: var(--color-muted); cursor: not-allowed; }
[aria-invalid="true"] { border-color: var(--color-danger); border-width: 2px; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; accent-color: var(--color-accent); flex-shrink: 0; }
.field { display: grid; gap: var(--space-2); }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.field-error { color: var(--color-danger); font-size: var(--text-sm); }
.toggle, .bot-toggle { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 44px; position: relative; font-size: var(--text-sm); color: var(--color-text); cursor: pointer; }
button.toggle, .bot-toggle { border: 0; padding: 0; background: transparent; }
.toggle__input { position: absolute; opacity: 0; inset-inline-start: 0; width: 2.75rem !important; height: 1.5rem !important; margin: 0; }
.toggle__track, .toggle-track { display: inline-flex; align-items: center; flex-shrink: 0; width: 2.75rem; height: 1.5rem; padding: 3px; background: var(--color-muted); border-radius: var(--radius-full); }
.toggle__track::before, .toggle-track span { content: ""; display: block; width: 1.125rem; height: 1.125rem; background: var(--color-on-accent); border-radius: var(--radius-full); }
.toggle__input:checked + .toggle__track, .toggle[aria-pressed="true"] .toggle__track, .bot-toggle[aria-checked="true"] .toggle-track { background: var(--color-accent); }
.toggle__input:checked + .toggle__track::before, .toggle[aria-pressed="true"] .toggle__track::before, .bot-toggle[aria-checked="true"] .toggle-track span { transform: translateX(1.25rem); }
.toggle__input:focus-visible + .toggle__track { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.toggle:has(input:disabled) { cursor: not-allowed; color: var(--color-muted); }
.card { padding: var(--space-6); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.card__title { margin-bottom: var(--space-2); }
.badge { display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; max-width: 100%; padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-coffee-soft); color: var(--color-coffee); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; }
.badge--success, .badge.open { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning, .badge.human { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger, .badge.closed { background: var(--color-danger-soft); color: var(--color-danger); }
.alert, .notice { padding: var(--space-3) var(--space-4); border: 1px solid currentColor; border-radius: var(--radius-sm); background: var(--color-coffee-soft); color: var(--color-coffee); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.alert--success, .notice.success { background: var(--color-success-soft); color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.alert--danger, .notice.error { background: var(--color-danger-soft); color: var(--color-danger); }
.toast { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid currentColor; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); font-size: var(--text-sm); }
.toast--success { background: var(--color-success-soft); color: var(--color-success); }
.toast--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.toast--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.app-notice { position: fixed; inset: calc(var(--header-height) + var(--space-3)) var(--space-4) auto; z-index: 40; max-width: 36rem; margin-inline: auto; }
.empty-state, .empty-conversation { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-8); text-align: center; }
.empty-state__icon, .empty-icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; color: var(--color-accent); background: var(--color-accent-soft); border-radius: var(--radius-lg); font-size: var(--text-3xl); }
.empty-state p, .empty-conversation p { max-width: 30rem; }
.avatar { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex-shrink: 0; background: var(--color-coffee-soft); color: var(--color-coffee); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.avatar--large { width: 3.5rem; height: 3.5rem; font-size: var(--text-lg); }
.progress, progress { display: block; appearance: none; width: 100%; height: .625rem; overflow: hidden; border: 0; border-radius: var(--radius-full); background: var(--color-coffee-soft); accent-color: var(--color-accent); }
progress::-webkit-progress-bar { background: var(--color-coffee-soft); border-radius: var(--radius-full); }
progress::-webkit-progress-value { background: var(--color-accent); border-radius: var(--radius-full); }
progress::-moz-progress-bar { background: var(--color-accent); border-radius: var(--radius-full); }
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.tabs__link { flex-shrink: 0; padding: var(--space-3) var(--space-4); min-height: 44px; border-bottom: 3px solid transparent; color: var(--color-muted); text-decoration: none; font-size: var(--text-sm); }
.tabs__link[aria-current] { border-bottom-color: var(--color-accent); color: var(--color-accent); font-weight: var(--weight-semibold); }
.tabs__link:hover { background: var(--color-accent-soft); }

/* Public and dashboard shells. Mobile navigation reserves its own safe area. */
.brand { display: inline-flex; gap: var(--space-3); align-items: center; color: var(--color-coffee); text-decoration: none; font-weight: var(--weight-semibold); letter-spacing: -.025em; min-width: 0; overflow-wrap: anywhere; }
.brand-mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xl); }
.app-shell { min-height: 100dvh; }
.app-sidebar { display: none; }
.app-main { min-width: 0; padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); }
.app-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--header-height); padding: var(--space-3) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); }
.app-header .brand { font-size: var(--text-sm); }
.account { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.account__email { display: none; color: var(--color-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.app-content { min-width: 0; }
.app-bottom-nav { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: var(--bottom-nav-height); padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--color-surface); border-top: 1px solid var(--color-border-subtle); }
.app-nav__link { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-1); min-height: 48px; padding: var(--space-2); border-radius: var(--radius-sm); color: var(--color-muted); text-decoration: none; font-size: var(--text-xs); font-weight: var(--weight-medium); }
.app-nav__link svg { width: 20px; height: 20px; flex-shrink: 0; }
.app-nav__link[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--weight-semibold); }
.app-nav__link:hover { background: var(--color-coffee-soft); }
.app-sidebar__footer { margin-top: auto; padding-top: var(--space-6); color: var(--color-muted); font-size: var(--text-sm); }
.login-shell { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
.login-card { width: min(100%, 27rem); padding: var(--space-8); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-md); }
.login-card .brand-mark { margin-bottom: var(--space-8); }
.login-card h1 { margin-bottom: var(--space-3); }
.login-form { margin-top: var(--space-6); }
.login-form label, .composer label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.login-form input { margin-bottom: var(--space-5); }
.login-form .btn { width: 100%; }
.login-card .notice { margin-top: var(--space-5); }
.settings-shell { width: min(100% - 2 * var(--space-4), 52rem); margin: var(--space-6) auto; padding: var(--space-5); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.settings-intro { margin-block: var(--space-3) var(--space-6); }
.settings-form label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); margin: var(--space-5) 0 var(--space-2); }
.settings-form .settings-checkbox { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; }
.settings-form .btn { margin-top: var(--space-5); }
.settings-form #knowledge { min-height: 16rem; }
.character-counter { text-align: end; margin-top: var(--space-2); }
.settings-shell > h2 { margin-top: var(--space-6); }
.settings-shell > progress { margin-block: var(--space-5); }
.setup-checklist { display: grid; gap: var(--space-2); padding-inline-start: var(--space-6); margin-block: var(--space-5); }
.setup-checklist li::marker { color: var(--color-muted); }
.setup-checklist [aria-current="step"] { color: var(--color-coffee); font-weight: var(--weight-semibold); }
details { margin-block: var(--space-6); }
summary { cursor: pointer; min-height: 44px; display: list-item; align-content: center; font-weight: var(--weight-semibold); }
.menu-section { margin-top: var(--space-6); }
.menu-card { padding-block: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); overflow-wrap: anywhere; }
.menu-card form { margin-block: var(--space-3); }
.menu-card p { font-size: var(--text-sm); }
.preview-messages { padding: var(--space-4) 0 !important; }
.preview-messages li { padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
.preview-messages .sender-label { margin-top: var(--space-4); }

/* Inbox selectors are also HTMX swap targets; their names and structure stay stable. */
.inbox-layout { display: grid; grid-template-columns: minmax(0, 1fr); height: calc(100dvh - var(--header-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom)); min-height: 28rem; }
.sidebar { display: flex; flex-direction: column; min-height: 0; background: var(--color-surface); }
.sidebar-heading { padding: var(--space-6); border-bottom: 1px solid var(--color-border-subtle); }
.sidebar-heading h1 { font-size: var(--text-xl); }
.sidebar-heading .muted { margin-top: var(--space-2); }
.chat-list { overflow: auto; padding: var(--space-3); }
.chat-card { display: flex; align-items: start; gap: var(--space-3); padding: var(--space-4) var(--space-3); margin-bottom: var(--space-1); border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text); text-decoration: none; }
.chat-card:hover { background: var(--color-background); text-decoration: none; }
.chat-card[aria-current="page"] { background: var(--color-accent-soft); border-color: var(--color-border); }
.chat-summary { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: var(--space-1); }
.chat-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.chat-phone { color: var(--color-muted); font-size: var(--text-xs); }
.chat-meta { display: flex; flex-direction: column; align-items: end; gap: var(--space-3); color: var(--color-muted); font-size: var(--text-xs); }
.unread { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding-inline: var(--space-1); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.conversation { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--color-background); }
.inbox-layout:not(.has-selection) .conversation, .has-selection .sidebar { display: none; }
.conversation-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); }
.conversation-heading h1, .conversation-heading h2 { font-size: var(--text-lg); overflow-wrap: anywhere; }
.back-link { flex-basis: 100%; font-size: var(--text-sm); }
.live-label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.live-label span { width: .5rem; height: .5rem; background: var(--color-success); border-radius: var(--radius-full); }
.chat-updates { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.conversation-state { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.badges { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pause-label { color: var(--color-muted); font-size: var(--text-xs); }
.message-list { display: flex; flex-direction: column; gap: var(--space-5); margin: 0; padding: var(--space-4) var(--space-5) var(--space-6); list-style: none; }
.message-row { display: flex; }
.outbound { justify-content: end; }
.message-bubble { min-width: 8rem; max-width: 90%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xs) var(--radius-md) var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.outbound .message-bubble { background: var(--color-accent-soft); border-radius: var(--radius-md) var(--radius-xs) var(--radius-md) var(--radius-md); }
.sender-label { margin-bottom: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.message-text { font-size: var(--text-sm); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-bubble footer { display: flex; justify-content: end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); color: var(--color-muted); font-size: var(--text-xs); }
.delivery-status { text-transform: capitalize; }
.composer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface); }
.composer textarea { min-height: 5rem; max-height: 12rem; }
.composer-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); }
.composer-actions .muted { font-size: var(--text-xs); }
.composer-actions .btn { flex-shrink: 0; }
.empty-list { padding: var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }
.empty-conversation h2 { margin-block: var(--space-4) var(--space-2); }

/* The debug styleguide uses the same components as the product. */
.styleguide { max-width: 72rem; margin-inline: auto; padding: var(--space-6) var(--space-4); }
.styleguide-header { padding-block: var(--space-8); }
.styleguide-header h1 { margin-block: var(--space-5) var(--space-3); font-size: var(--text-3xl); }
.styleguide-section { scroll-margin-top: var(--space-5); margin-block: var(--space-10); }
.styleguide-section > h2 { margin-bottom: var(--space-5); }
.component-grid { display: grid; gap: var(--space-5); }
.component-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.component-stack { display: grid; align-content: start; gap: var(--space-4); }
.swatch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.swatch--cream { background: var(--color-background); color: var(--color-text); border: 1px solid var(--color-border-subtle); }
.swatch--coffee { background: var(--color-coffee); color: var(--color-on-accent); }
.swatch--green { background: var(--color-accent); color: var(--color-on-accent); }
.swatch--success { background: var(--color-success-soft); color: var(--color-success); }
.swatch--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.swatch--danger { background: var(--color-danger-soft); color: var(--color-danger); }
.type-sample--large { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.token-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.token-table th, .token-table td { padding: var(--space-3); text-align: start; border-bottom: 1px solid var(--color-border-subtle); overflow-wrap: anywhere; }
.token-table code { white-space: normal; }

@media (min-width: 48rem) {
  .settings-shell { padding: var(--space-8); }
  .component-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .app-shell { display: grid; grid-template-columns: var(--nav-width) minmax(0, 1fr); }
  .app-sidebar { display: flex; flex-direction: column; gap: var(--space-8); position: sticky; top: 0; height: 100dvh; padding: var(--space-6) var(--space-4); border-right: 1px solid var(--color-border-subtle); background: var(--color-surface-alt); }
  .app-sidebar nav { display: grid; gap: var(--space-2); }
  .app-sidebar .app-nav__link { flex-direction: row; justify-content: start; gap: var(--space-3); padding: var(--space-3); font-size: var(--text-sm); }
  .app-main { padding-bottom: 0; }
  .app-header { padding-inline: var(--space-8); }
  .app-header .brand { font-size: var(--text-base); }
  .account__email { display: inline; }
  .app-bottom-nav { display: none; }
  .app-notice { inset-inline-start: calc(var(--nav-width) + var(--space-4)); }
  .inbox-layout { height: calc(100dvh - var(--header-height)); grid-template-columns: 19rem minmax(0, 1fr); }
  .inbox-layout .sidebar, .inbox-layout .conversation { display: flex; }
  .sidebar { border-right: 1px solid var(--color-border-subtle); }
  .back-link { display: none; }
  .message-bubble { max-width: 80%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .btn, .badge, .toggle__track, .toggle-track, .card, .app-nav__link[aria-current] { border: 1px solid ButtonText; }
}

/* Workspace pages share the same cards, typography and interaction states. */
.workspace-page { width: min(100% - 2rem, 72rem); margin: 1.5rem auto 3rem; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.page-heading .muted { margin-top: .5rem; max-width: 38rem; }
.workspace-card { padding: 1.25rem; min-width: 0; }
.section-title { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.section-title h2 { font-size: 1.125rem; }
.home-grid { display: grid; gap: 1.25rem; }
.home-grid .progress, .setup-page .progress { margin-block: 1.25rem; }
.home-checklist, .attention-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.home-checklist li + li, .attention-list li + li { border-top: 1px solid var(--color-border-subtle); }
.home-checklist a, .attention-list a { display: flex; gap: .85rem; align-items: center; padding: .9rem 0; color: var(--color-text); text-decoration: none; font-size: .85rem; }
.home-checklist a:hover, .attention-list a:hover { color: var(--color-accent); }
.home-checklist a > span:nth-child(2), .attention-list a > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.home-checklist small, .attention-list small { display: block; color: var(--color-muted); font-size: .75rem; margin-top: .15rem; }
.step-check { display: grid; place-items: center; width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%; background: var(--color-coffee-soft); color: var(--color-coffee); font-size: .75rem; }
.step-check.is-done { background: var(--color-accent); color: var(--color-on-accent); }
.attention-note { margin-top: 1rem; }
.attention-list .badge { max-width: 6rem; white-space: normal; text-align: center; }
.app-bottom-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.app-bottom-nav .app-nav__link { padding-inline: .15rem; font-size: .75rem; }
.workspace-toast { position: fixed; z-index: 60; top: calc(var(--header-height) + 1rem); inset-inline: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 32rem; margin-inline: auto; box-shadow: var(--shadow-md); }
.toast-dismiss { border: 0; background: transparent; color: inherit; min-width: 44px; min-height: 44px; font-size: 1.5rem; }
.chat-search { display: flex; gap: .5rem; margin-top: 1rem; }
.chat-search .input { min-width: 0; }
.chat-search button { font-size: 1.3rem; padding-inline: .75rem; }
.chat-preview { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; color: var(--color-muted); }
.chat-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.chat-badges .badge { font-size: .75rem; padding: .15rem .45rem; }
.chat-meta { min-width: 3.25rem; font-size: .75rem; }
.chat-meta time { white-space: nowrap; }
.chat-empty { padding: 2rem 1rem; }
.chat-empty h2 { font-size: 1rem; }
.loading-label { display: block; font-size: .75rem; color: var(--color-muted); }
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.conversation-heading { gap: .75rem; padding: .85rem 1rem; }
.conversation-heading .back-link { min-height: 28px; }
.conversation-person { flex: 1; min-width: 0; }
.conversation-heading .eyebrow { font-size: .75rem; margin-bottom: .2rem; }
.conversation-heading .live-label { display: none; }
.conversation-state { display: grid; gap: .65rem; padding: .9rem 1rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border-subtle); }
.bot-control { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bot-control .eyebrow { margin: 0; font-size: .75rem; }
.bot-control .muted { font-size: .75rem; }
.bot-toggle { border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: .5rem .75rem; background: var(--color-accent-soft); min-height: 44px; color: var(--color-accent); font-weight: 600; white-space: nowrap; }
.bot-toggle[aria-checked="false"] { background: var(--color-surface-alt); color: var(--color-coffee); }
.takeover-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.takeover-row .btn { padding-block: .4rem; font-size: .75rem; }
.window-banner { display: grid; gap: .2rem; padding: .65rem .8rem; border-radius: var(--radius-sm); font-size: .75rem; }
.window-banner--open { background: var(--color-success-soft); color: var(--color-success); }
.window-banner--closed { background: var(--color-warning-soft); color: var(--color-warning); }
.window-banner span { font-size: .75rem; }
.sender-bot .message-bubble { background: var(--color-accent-soft); border-color: #c6d4c2; }
.sender-owner .message-bubble { background: var(--color-coffee-soft); border-color: #d7c2ad; }
.sender-owner .sender-label { color: var(--color-coffee); }
.sender-customer .message-bubble { background: var(--color-surface); }
.composer { position: sticky; bottom: 0; z-index: 5; flex-shrink: 0; padding: .85rem 1rem; }
.composer textarea { min-height: 3.5rem; }
.composer-actions { gap: .65rem; margin-top: .65rem; }
.composer-actions .muted { max-width: 15rem; font-size: .75rem; }
.composer .notice { font-size: .75rem; margin-bottom: .5rem; }
.menu-layout { display: grid; gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
.menu-section { margin-top: 0; margin-bottom: 1.5rem; }
.menu-card { padding: 1.25rem; margin-bottom: .85rem; }
.menu-item-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.menu-item-heading h3 { margin-top: .5rem; }
.menu-price { white-space: nowrap; color: var(--color-coffee); font-size: .9rem; }
.menu-item-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; }
.menu-card details { border-top: 1px solid var(--color-border-subtle); margin-block: 1rem; padding-top: .5rem; }
.menu-card .delete-item-form { margin-bottom: 0; }
.menu-add-panel { scroll-margin-top: 6rem; }
.preview-chat { overflow: hidden; }
.preview-messages { max-height: 55dvh; min-height: 14rem; overflow: auto; padding: 1.5rem !important; }
.preview-messages li { border: 0; padding: 0; }
.preview-messages .sender-label { margin-top: 0; }
.preview-chat .composer { border-radius: 0; }
.preview-chat .settings-form label { margin-top: 0; }
.settings-page { max-width: 52rem; }
.setup-page { max-width: 60rem; }
.setup-checklist { list-style: none; counter-reset: setup-step; padding: 0; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.setup-checklist li { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: .7rem .85rem; background: var(--color-background); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); font-size: .8rem; }
.setup-checklist li::before { counter-increment: setup-step; content: counter(setup-step, decimal-leading-zero); color: var(--color-muted); font-size: .75rem; }
.setup-checklist li .muted { margin-left: auto; font-size: .75rem; }
.setup-page .settings-form { border-top: 1px solid var(--color-border-subtle); padding-top: 1rem; }
.button-loading { display: none; }
.is-submitting .button-label { display: none; }
.is-submitting .button-loading { display: inline; }
.is-submitting button { pointer-events: none; opacity: .7; }
@media (min-width: 48rem) {
  .workspace-page { width: min(100% - 4rem, 72rem); margin-top: 2rem; }
  .workspace-card { padding: 1.75rem; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .menu-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .setup-checklist { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .inbox-layout { grid-template-columns: 21rem minmax(0, 1fr); }
  .app-header .brand-mark { display: none; }
  .conversation-heading { padding: 1.25rem 1.5rem; }
  .conversation-heading .live-label { display: flex; }
  .conversation-state { padding: 1rem 1.5rem; }
  .workspace-toast { inset-inline-start: calc(var(--nav-width) + 1rem); }
}
/* Keep controls visible while only the message history scrolls. */
.chat-updates { display: flex; flex-direction: column; overflow: hidden; }
.conversation-state { flex-shrink: 0; }
.chat-updates > .message-list { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.conversation-heading .back-link { flex-basis: auto; font-size: .75rem; }
.conversation-heading > .avatar, .conversation-person .eyebrow { display: none; }
@media (min-width: 64rem) {
  .conversation-heading > .avatar { display: inline-grid; }
  .conversation-person .eyebrow { display: block; }
}

/* Accessible hit areas for standalone links and keyboard-scrolled histories. */
.app-sidebar__footer > a, .menu-add-panel > a, .login-card > a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.setup-checklist li { position: relative; padding: 0; }
.setup-checklist li::before { position: absolute; inset-inline-start: .75rem; pointer-events: none; }
.setup-checklist li > a { display: flex; align-items: center; flex: 1; min-height: 44px; padding: .75rem .5rem .75rem 2rem; }
.setup-checklist li > span { padding-inline-end: .75rem; pointer-events: none; }
.message-list:focus-visible { outline-offset: -3px; }

html { scroll-padding-block: calc(var(--header-height) + 1rem) calc(var(--bottom-nav-height) + 1rem); }
.setup-steps { margin-block: 1rem; }
.setup-steps summary { color: var(--color-accent); font-size: var(--text-sm); }
.preview-chat { padding: 0; }
@media (min-width: 64rem) { html { scroll-padding-bottom: 1rem; } }

.conversation-state { justify-content: stretch; align-items: stretch; }
@media (min-width: 64rem) {
  .inbox-layout:not(.has-selection) .conversation { display: flex; }
}

.app-bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.app-bottom-nav .app-nav__link { font-size: .75rem; padding-inline: 0; }
.enquiry-grid { display: grid; gap: 1rem; }
.enquiry-grid dd { margin: 0 0 .75rem; overflow-wrap: anywhere; }
.enquiry-grid dt { font-weight: 600; font-size: var(--text-sm); }
@media (min-width: 48rem) { .enquiry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.app-bottom-nav .app-nav__link--desktop { display: none; }

.signup-shell { min-height: 100dvh; padding: 1.5rem 1rem; display: grid; place-items: center; }
.signup-card { width: min(100%, 36rem); padding: 1.5rem; }
.signup-brand { min-height: 44px; margin-bottom: 1rem; }
.signup-card h1 { margin-bottom: .75rem; }
.signup-card > .alert { margin-top: 1rem; }
.signup-form .password-visibility { margin-top: .65rem; }
.signup-form .field-error { margin-top: .4rem; }
.signup-form > .btn--primary { width: 100%; }
.signup-login { margin-top: 1rem; }
.signup-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.welcome-page { max-width: 46rem; }
.welcome-page .progress { margin-block: 1rem; }
.welcome-page .btn { margin-top: 1rem; }
.onboarding-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: .75rem; }
.signup-form .settings-checkbox a, .home-grid .alert a { display: inline-block; min-height: 24px; }
@media (min-width: 48rem) { .signup-card { padding: 2rem; } }

/* Optional personality setup: generous touch targets and one answer at a time. */
.personality-page { max-width: 58rem; }
.onboarding-progress { display: grid; gap: .75rem; margin-bottom: 1.5rem; color: var(--color-muted); }
.voice-fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.voice-fieldset legend { font-weight: 600; margin-bottom: .75rem; }
.voice-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.voice-choice, .choice-chip { position: relative; cursor: pointer; }
.voice-choice input, .choice-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.voice-card { display: grid; gap: .75rem; height: 100%; padding: 1rem; border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color 180ms, background-color 180ms; }
.voice-choice input:checked + .voice-card, .choice-chip input:checked + span { border-color: var(--color-accent); background: var(--color-accent-soft); }
.voice-choice input:focus-visible + .voice-card, .choice-chip input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.tone-bubble { display: block; padding: 1rem; border-radius: 1rem 1rem 1rem .25rem; background: var(--color-background); line-height: 1.6; }
.selected-label { visibility: hidden; font-weight: 600; }
.voice-choice input:checked + .voice-card .selected-label { visibility: visible; }
.choice-chips, .review-actions, .onboarding-actions, .review-paging { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.choice-chip > span { display: flex; align-items: center; min-height: 44px; padding: .5rem 1rem; border: 2px solid var(--color-border); border-radius: 2rem; background: var(--color-surface); }
.topic-options { display: grid; gap: .5rem; }
.topic-options label { min-height: 44px; }
.review-position { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.sample-card { margin-top: 1rem; transition: opacity 180ms; overflow-wrap: anywhere; touch-action: pan-y; }
.review-answer { margin-block: 1.5rem; padding: 1rem; background: var(--color-background); border-radius: var(--radius-lg); white-space: pre-wrap; }
.review-edit { margin-top: 1rem; }
.review-edit summary { min-height: 44px; }
.review-edit label { display: block; margin-block: 1rem .5rem; }
.review-edit button { margin-top: .75rem; }
.review-paging { justify-content: space-between; margin-block: 1rem; }
.onboarding-actions { margin-block: 1.5rem; }
.sample-skeleton { display: grid; gap: 1rem; margin-block: 2rem; }
.sample-skeleton span { display: block; height: 1.25rem; border-radius: .5rem; background: var(--color-border); animation: sample-pulse 1.5s ease-in-out infinite; }
.sample-skeleton span:last-child { width: 65%; }
@keyframes sample-pulse { 50% { opacity: .45; } }
@media (min-width: 48rem) { .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .voice-card, .sample-card { transition: none; } .sample-skeleton span { animation: none; } }
.settings-form .voice-choice, .settings-form .choice-chip, .settings-form .topic-options label { margin: 0; }
.personality-page .workspace-card > label:first-child { margin-top: 0; }
.personality-page .onboarding-actions .btn { margin-top: 0; }
.choice-chip input:checked + span::before { content: '✓'; margin-inline-end: .4rem; }
.personality-page .workspace-card .voice-fieldset { margin-top: 1.25rem; }

/* Learning stays compact; longer lists and saved-answer details open separately. */
.learning-home-grid { display: grid; gap: 1rem; align-items: start; }
.home-setup { margin-bottom: 1.25rem; }
.home-setup summary { min-height: 44px; }
.home-setup .home-checklist { max-width: 40rem; }
.learning-question { font-size: var(--text-lg); font-weight: 600; margin-top: 1rem; overflow-wrap: anywhere; }
.learning-answer-form { display: grid; gap: .6rem; margin-block: 1rem .5rem; }
.learning-answer-form label, .reply-learning label { font-size: var(--text-sm); font-weight: 600; }
.learning-answer-form button { justify-self: start; }
.ignore-question { display: inline-block; }
.learning-detail-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.needs-answer > .learning-detail-link { float: right; }
.learning-empty { padding: 1rem 0; }
.quick-update-chips { display: flex; flex-wrap: wrap; align-items: start; gap: .6rem; margin-top: 1rem; }
.quick-update-chips > form { margin: 0; }
.update-chip { border: 1px solid var(--color-border); border-radius: 2rem; padding: .5rem 1rem; min-height: 44px; font-size: var(--text-sm); cursor: pointer; font-weight: 600; background: var(--color-surface); }
.update-chip[aria-pressed=true] { background: var(--color-warning-soft); color: var(--color-warning); border-color: var(--color-warning); }
.quick-update-chips details[open] { flex: 1 1 100%; }
.quick-update-form { display: grid; gap: .6rem; margin-top: .75rem; }
.quick-update-form button { justify-self: start; }
.daily-special { margin-top: 1rem; overflow-wrap: anywhere; }
.weekly-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-block: 1.25rem; }
.weekly-numbers strong { display: block; font-size: var(--text-3xl); color: var(--color-coffee); line-height: 1.2; }
.weekly-numbers span { display: block; font-size: var(--text-sm); line-height: 1.45; margin-top: .5rem; }
.weekly-chart { display: grid; gap: .75rem; }
.weekly-chart > div { display: grid; grid-template-columns: 1fr auto; gap: .25rem; font-size: var(--text-sm); }
.weekly-track { height: .5rem; grid-column: 1 / -1; border-radius: 1rem; background: var(--color-coffee-soft); overflow: hidden; }
.weekly-track span { display: block; height: 100%; background: var(--color-accent); border-radius: 1rem; transition: width 180ms ease; }
.weekly-page, .learning-page { max-width: 60rem; }
.weekly-top-questions { margin-top: 2rem; }
.weekly-top-questions ol { padding-left: 1.5rem; }
.weekly-top-questions li { padding: 1rem .5rem; border-bottom: 1px solid var(--color-border-subtle); overflow-wrap: anywhere; }
.weekly-top-questions li .badge { margin-left: .5rem; }
.learning-question-list { display: grid; gap: 1rem; }
.closed-today-banner { margin: 1rem; }
.reply-learning-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: var(--text-sm); border-top: 1px solid var(--color-border-subtle); margin-top: .75rem; padding-top: .75rem; }
.reply-learning-bar > span { flex: 1; min-width: 10rem; }
.reply-learning { background: var(--color-surface); padding: 1rem; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); margin-top: .75rem; }
.reply-learning h2 { font-size: var(--text-lg); }
.reply-learning form { display: grid; gap: .5rem; }
.reply-learning-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
#composer:has(.reply-learning) { position: static; }
@media (min-width: 64rem) { .learning-home-grid { grid-template-columns: 1fr 1fr; } .this-week { grid-column: 1 / -1; } .this-week .weekly-chart { max-width: 42rem; } }
@media (prefers-reduced-motion: reduce) { .weekly-track span { transition: none; } }
.quick-update-chips details { margin: 0; }
.inbox-layout { height: var(--inbox-height, calc(100dvh - var(--header-height) - var(--bottom-nav-height))); }
.inbox-layout:has(.reply-learning) { height: auto; min-height: var(--inbox-height, 28rem); }
.inbox-layout:has(.reply-learning) .chat-updates { flex: 0 0 20rem; }
.inbox-layout:has(.reply-learning) .composer { position: static; }
.owner-channel-page { max-width: 58rem; }
.owner-channel-page > .workspace-card { margin-bottom: 1.25rem; }
.verification-code-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block: 1rem; }
.verification-code-row code { font-size: var(--text-2xl); letter-spacing: .12em; color: var(--color-coffee); }
.verification-panel ol { padding-left: 1.25rem; }
.verification-panel li { margin-block: .75rem; }
.owner-number-list { display: grid; }
.owner-number { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--color-border-subtle); }
.owner-number:last-child { border-bottom: 0; }
.owner-number-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.owner-remove { color: var(--color-danger); }
.owner-channel-help { margin-block: 2rem; }
.owner-channel-help > p { margin-block: 1rem; }
.owner-activity-list { display: grid; gap: 1rem; margin-top: 1rem; }
.owner-change-text { margin-block: 1rem; overflow-wrap: anywhere; }
.owner-timeline { margin-top: 2rem; }
.owner-timeline ol { list-style: none; padding: 0; display: grid; gap: 1rem; }
.owner-timeline dt { font-weight: 600; margin-top: .75rem; font-size: var(--text-sm); }
.owner-timeline dd { margin: .25rem 0 1rem; overflow-wrap: anywhere; }
.owner-empty { border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }

@media (min-width: 64rem) { .owner-activity-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Isolated practice phones use the product palette, without messaging-brand assets. */
.demo-page { max-width: 90rem; }
.demo-toolbar { padding: 1rem; display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: end; }
.demo-choice { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.demo-choice label { flex-basis: 100%; font-weight: 600; }
.demo-choice select { width: auto; max-width: 100%; }
.demo-grid { display: grid; gap: 1rem; align-items: start; margin-top: 1.5rem; }
.demo-phone { padding: 0; overflow: hidden; min-width: 0; border: 2px solid var(--color-border); border-radius: 1.5rem; }
.demo-phone-heading { display: flex; gap: .75rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--color-border); }
.demo-phone h2, .demo-live h2 { font-size: var(--text-xl); }
.demo-phone-heading p { font-size: var(--text-sm); }
.demo-messages { height: 23rem; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; background: var(--color-background); display: flex; flex-direction: column; gap: .75rem; }
.demo-bubble { padding: .75rem; border-radius: 1rem; max-width: 92%; overflow-wrap: anywhere; flex-shrink: 0; }
.demo-bubble p { white-space: pre-wrap; }
.demo-bubble--sent { align-self: end; background: var(--color-coffee-soft); }
.demo-bubble--reply { align-self: start; background: var(--color-surface); border: 1px solid var(--color-border); }
.demo-bubble-label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: .3rem; }
.demo-composer { padding: 1rem; display: grid; gap: .6rem; }
.demo-composer > label { font-weight: 600; font-size: var(--text-sm); }
.demo-media-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.demo-media-actions .btn { font-size: var(--text-sm); padding-inline: .65rem; }
.demo-live { min-width: 0; padding: 1.25rem; overflow-wrap: anywhere; }
.demo-live section { border-top: 1px solid var(--color-border); padding-top: 1rem; margin-top: 1rem; }
.demo-live h3 { font-size: var(--text-lg); }
.demo-live details summary { min-height: 44px; }
.demo-help { margin-top: 1.5rem; }
.demo-help summary { min-height: 44px; }
.demo-help p { margin-top: 1rem; max-width: 65ch; }
#demo-clock { margin-top: 1rem; }
@media (min-width: 48rem) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .demo-live { grid-column: 1 / -1; } }
@media (min-width: 90rem) { .demo-grid { grid-template-columns: 1fr 1fr .85fr; } .demo-live { grid-column: auto; } }

.followup-numbers { display: flex; flex-wrap: wrap; gap: 2rem; margin-block: 1rem; }
.followup-numbers strong { display: block; font-size: var(--text-3xl); color: var(--color-coffee); }
.followup-numbers span { display: block; color: var(--color-muted); }
.followup-reasons { list-style: none; padding: 0; }
.followup-reasons li { display: flex; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.followup-quiet { display: grid; gap: .75rem; margin-block: 1rem; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.followup-chat-control { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: center; margin-block: .75rem; }
@media (min-width: 48rem) { .followup-quiet { grid-template-columns: 1fr 1fr; } }
.followup-quiet { min-inline-size: 0; }
.followup-quiet legend { max-width: 100%; }
@media (min-width: 64rem) { .learning-home-grid .this-week { grid-column: auto; } }
.followup-chat-options { margin: 0; }
.followup-chat-options summary { display: flex; align-items: center; min-height: 44px; font-size: var(--text-sm); color: var(--color-accent); text-decoration: underline; }
.followup-options-body { display: grid; gap: .5rem; padding: .5rem 0; max-width: 18rem; }

.offers-page { max-width: 70rem; }
.offers-page .tabs { margin-bottom: 1.5rem; }
.offer-permission form, .offers-page .alert { margin-top: 1rem; }
.offer-permission button { margin-top: 1rem; }
.offer-rules, .ticket-list { display: grid; gap: 1rem; margin-top: 1.25rem; }
.offer-rule { margin: 0; min-width: 0; }
.offer-rule summary { display: flex; gap: .75rem; justify-content: space-between; align-items: center; min-height: 44px; }
.offer-rule summary .muted { display: block; margin-top: .25rem; }
.offer-rule summary::after { content: '+'; color: var(--color-accent); }
.offer-rule[open] summary::after { content: '−'; }
.offer-private-fields { display: grid; gap: .5rem; min-inline-size: 0; padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-top: 1rem; }
.offer-or { align-self: center; }
.ticket-card { min-width: 0; overflow-wrap: anywhere; }
.ticket-price { font-size: var(--text-2xl); font-weight: 600; margin-block: .75rem; color: var(--color-coffee); }
.ticket-actions, .offer-undo { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.offer-undo { padding-top: .75rem; border-top: 1px solid var(--color-border); }
.offer-undo small { flex-basis: 100%; }
.ticket-conditions { white-space: pre-wrap; }
.offers-intro { max-width: 65ch; }
.app-bottom-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (min-width: 48rem) { .ticket-list { grid-template-columns: repeat(2,minmax(0,1fr)); } .offer-private-fields { grid-template-columns: 1fr auto 1fr; } }

.bot-reply-diagnostic { border-top: 1px solid var(--color-border); padding-top: .75rem; margin-top: .75rem; color: var(--color-text); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
.bot-reply-diagnostic a { display: inline-flex; align-items: center; min-height: 44px; }

.takeover-status, .takeover-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.takeover-banner { background: var(--color-warning-soft); color: var(--color-text); border: 1px solid var(--color-warning); border-radius: var(--radius-md); padding: .85rem; }
.takeover-banner p { margin: .25rem 0; font-size: var(--text-sm); }
.takeover-banner small { display: block; color: var(--color-text); }
.takeover-banner .btn { white-space: normal; text-align: center; }
.pause-sheet { width: min(28rem, calc(100% - 2rem)); padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-lg); }
.pause-sheet::backdrop { background: rgb(30 24 18 / .45); }
.pause-sheet p { margin: 1rem 0 1.25rem; }
.pause-sheet .btn { width: 100%; min-height: 44px; margin-top: .5rem; }
#reply-text[readonly] { background: var(--color-background); cursor: pointer; }
#composer [aria-disabled="true"] { cursor: pointer; }
.paused-chats-card { margin-bottom: 1.25rem; }
.paused-chat-list { padding: 0; list-style: none; }
.paused-chat-list li { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border); padding: 1rem 0; }
.paused-chat-list li > div:first-child { flex: 1 1 14rem; overflow-wrap: anywhere; }
.paused-chat-list a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.pause-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pause-nudge { max-width: 45ch; }
.conversation-state { grid-template-columns: max-content minmax(0, 1fr); }
.conversation-state > .takeover-banner, .conversation-state > .takeover-status { grid-column: 1 / -1; }
.conversation-state .window-banner { min-height: 44px; margin: 0; align-content: center; }
.conversation-state:has(.followup-chat-options[open]) { grid-template-columns: minmax(0, 1fr); }
.conversation-heading .back-link { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 47.99rem) { .conversation-state .window-banner span { display: none; } .takeover-banner { gap: .5rem; } }
@media (prefers-reduced-motion: no-preference) { .pause-sheet[open] { animation: pause-appear 180ms ease-out; } @keyframes pause-appear { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } } }
.handoff-note { grid-column: 1 / -1; padding: .65rem .85rem; border-radius: var(--radius-sm); background: var(--color-warning-soft); color: var(--color-text); }
.handoff-note p { margin-block: .5rem; overflow-wrap: anywhere; }

/* Photo-assisted onboarding stays separate from saved business details. */
.photo-upload { padding: var(--space-5); margin-block: var(--space-5); border: 1px solid var(--color-border); background: var(--color-surface); min-width: 0; }
.photo-upload h2 { font-size: var(--text-lg); max-width: 40rem; line-height: 1.45; }
.photo-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }
.photo-picker { position: relative; overflow: hidden; cursor: pointer; min-height: 44px; }
.photo-picker input { position: absolute; opacity: 0; inset: 0; width: 100%; cursor: pointer; }
.photo-picker:focus-within { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.photo-privacy { font-size: var(--text-sm); margin-block: var(--space-4) 0; }
.photo-divider { text-align: center; color: var(--color-muted); margin-block: var(--space-5); }
.photo-preview { max-width: 100%; max-height: 160px; object-fit: contain; display: block; margin-bottom: var(--space-3); }
.photo-reading { display: none; padding-block: var(--space-4); }
.photo-reading.htmx-request { display: block; }
.photo-filled { background: var(--color-success-soft); border-color: var(--color-success); transition: background 180ms ease; }
.photo-field-tag { display: block; color: var(--color-success); font-size: var(--text-sm); margin-block: .25rem .5rem; }
.photo-field-tag--uncertain { color: var(--color-warning); }
.photo-conflict { padding: var(--space-4); background: var(--color-warning-soft); border-radius: var(--radius-md); margin-block: var(--space-3); overflow-wrap: anywhere; }
.photo-other-steps { margin-block: var(--space-4); }
.photo-other-steps summary, .photo-more-details summary { min-height: 44px; padding-block: var(--space-3); cursor: pointer; }
.photo-item { padding: var(--space-4); margin-block: var(--space-4); }
.photo-catalog { max-width: 100%; min-width: 0; }
.photo-upload [data-photo-state][hidden] { display: none; }
@media (max-width: 600px) { .photo-actions { flex-direction: column; } .photo-actions > * { width: 100%; justify-content: center; } .photo-upload { padding: var(--space-4); } }
@media (prefers-reduced-motion: reduce) { .photo-filled { transition: none; } }
.photo-other-steps { font-size: var(--text-sm); padding-top: var(--space-3); border-top: 1px solid var(--color-border-subtle); }
.photo-other-steps > p { margin-bottom: var(--space-2); }
.photo-other-steps > button { font-size: var(--text-sm); margin-top: var(--space-2); }
.photo-more-details input, .photo-more-details textarea { margin-block: var(--space-2) var(--space-4); }

.business-info-page { max-width: 64rem; }
.business-info-section { margin-block: var(--space-4); scroll-margin-top: 6rem; }
.business-info-section > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5); cursor: pointer; min-height: 72px; list-style: none; }
.business-info-section > summary::-webkit-details-marker { display: none; }
.business-info-section > summary small { display: block; color: var(--color-muted); margin-top: var(--space-2); font-size: var(--text-sm); overflow-wrap: anywhere; }
.business-info-expand { font-size: var(--text-xl); flex-shrink: 0; transition: transform 180ms ease; }
.business-info-section[open] > summary .business-info-expand { transform: rotate(45deg); }
.business-info-fields { padding: 0 var(--space-5) var(--space-5); min-width: 0; }
.business-info-fields .photo-upload { margin-top: 0; }
.business-info-add { padding-block: var(--space-4); }
.business-info-add > summary, .bot-setting > summary { min-height: 44px; padding-block: var(--space-3); cursor: pointer; }
.business-info-entry { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; text-decoration: none; padding: var(--space-5); margin-bottom: var(--space-5); color: var(--color-text); }
.business-info-entry small { display: block; color: var(--color-muted); margin-top: var(--space-2); }
.bot-setting { border-top: 1px solid var(--color-border-subtle); padding-block: var(--space-2); }
.business-info-banner a { display: inline-block; padding-block: var(--space-2); }
@media (max-width: 600px) { .business-info-fields { padding-inline: var(--space-4); } .business-info-entry { align-items: flex-start; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .business-info-expand { transition: none; } }
.app-bottom-nav--complete { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.business-info-section { padding: 0; }
.business-info-section > summary > span:first-child { min-width: 0; }
.business-info-section > summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-normal); }
.bot-setting { margin: 0; }

/* One shared, compact catalog surface, including photo drafts. */
.catalog-editor { min-width: 0; margin-block: var(--space-4, 1rem); }
.catalog-toolbar { position: sticky; top: calc(var(--header-height) + .5rem); z-index: 3; background: var(--color-surface, #fffdf8); padding: 1rem; border: 1px solid #d8cfc1; border-radius: 12px; }
.catalog-heading { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.catalog-heading strong { flex: 1 1 180px; }
.catalog-tools { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; align-items: end; }
.catalog-search { flex: 1 1 200px; font-size: .875rem; }
.catalog-filters summary,.catalog-section > summary,.catalog-section-bottom summary { min-height: 44px; padding: .7rem; cursor: pointer; }
.catalog-filters[open] .component-row { padding-top: .5rem; }
.catalog-filters button[aria-pressed=true] { background: #e5ecde; border: 2px solid #37583d; }
.catalog-section { border-bottom: 1px solid #d8cfc1; margin-block: .75rem; }
.catalog-section > summary { font-weight: 700; background: #f2ede3; border-radius: 8px; }
.catalog-row { display: grid; grid-template-columns: 44px minmax(150px, 2fr) minmax(150px, 2fr) 80px 110px 64px; align-items: start; border-bottom: 1px solid #e4ddd1; padding-block: .4rem; gap: .25rem; }
.catalog-row--head { font-size: .75rem; color: #595348; font-weight: 700; }
.catalog-td { min-width: 0; }
.catalog-cell { padding: .6rem .4rem; background: transparent; border-color: transparent; min-height: 44px; width: 100%; }
.catalog-cell:hover { border-color: #b8ad9b; }
.catalog-cell:focus { border-color: #37583d; background: #fffdf8; }
.catalog-row--issue { background: #fff7e6; }
.catalog-flag { display: block; padding-inline: .4rem; color: #78521b; font-size: .75rem; }
.catalog-size-chips,.catalog-marker,.catalog-size-link { min-height: 44px; border: 0; border-radius: 8px; background: transparent; padding: .5rem; color: #37583d; cursor: pointer; font: inherit; text-align: left; overflow-wrap: anywhere; }
.catalog-size-chips { background: #e8eddf; font-size: .8rem; }
.catalog-size-link { font-size: .75rem; text-decoration: underline; }
.catalog-select { display: flex; justify-content: center; align-items: center; min-height: 44px; }
.catalog-select input { width: 22px; height: 22px; margin: 11px; }
.catalog-bulk { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding-block: .75rem; }
.catalog-bulk[hidden],.catalog-editor [hidden],.photo-upload [hidden] { display: none !important; }
.catalog-row-menu summary { min-height: 44px; padding: .6rem .2rem; cursor: pointer; }
.catalog-row-menu[open] { position: relative; }
.catalog-row-menu > div { position: absolute; right: 0; z-index: 4; background: #fffdf8; padding: .75rem; border: 1px solid #d8cfc1; box-shadow: 0 8px 24px #35291b20; width: min(280px,75vw); display: grid; gap: .5rem; border-radius: 10px; }
.catalog-section-bottom { display: flex; flex-wrap: wrap; gap: .5rem; align-items: start; padding-block: .5rem; }
.catalog-section-bottom > details { flex: 1; min-width: 150px; }
.catalog-section-bottom textarea { width: 100%; }
.catalog-savebar { position: sticky; bottom: 76px; z-index: 5; background: #fffdf8; padding: .75rem; border: 1px solid #d8cfc1; border-radius: 10px; box-shadow: 0 2px 16px #35291b20; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; }
.catalog-savebar > div:first-child { flex: 1 1 200px; font-size: .85rem; }
.catalog-dialog { width: min(540px,94vw); max-height: 85dvh; overflow: auto; border: 1px solid #b8ad9b; border-radius: 16px; padding: 1.25rem; color: #332b23; background: #fffdf8; }
.catalog-dialog::backdrop { background: #241f1970; }
.catalog-size-edit { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; }
.catalog-size-edit label { min-width: 0; }
.catalog-size-edit button { grid-column: 1/-1; justify-self: start; }
.catalog-conflict { display: flex; flex-wrap: wrap; gap: .4rem; padding: .4rem; }
.photo-tray { display: flex; flex-wrap: wrap; gap: .75rem; }
.photo-tray > div { position: relative; width: 100px; height: 110px; }
.photo-tray img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.photo-tray button { position: absolute; right: 0; top: 0; min-width: 44px; min-height: 44px; background: #fffdf8; }
.photo-upload input[type=file][hidden] { display: none; }
.catalog-editor button,.catalog-editor input { transition: border-color 180ms, background-color 180ms; }
.menu-layout { display: block; }
.menu-add-panel { margin-top: 1rem; }
@media (min-width: 900px) { .catalog-savebar { bottom: 12px; } }
@media (max-width: 700px) {
 .catalog-toolbar { padding: .75rem; position: static; }
 .catalog-tools { gap: .5rem; }
 .catalog-search { flex-basis: 150px; }
 .catalog-row--head { display: none; }
 .catalog-row { grid-template-columns: 44px minmax(0,1fr) 80px; gap: 0; padding: .5rem 0; }
 .catalog-select { grid-row: 1/4; grid-column: 1; }
 .catalog-name { grid-column: 2; grid-row: 1; }
 .catalog-prices { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; }
 .catalog-prices > input { width: 100px; }
 .catalog-veg { grid-column: 3; grid-row: 1; }
 .catalog-available { grid-column: 3; grid-row: 2; }
 .catalog-more { grid-column: 2/4; grid-row: 3; }
 .catalog-marker { font-size: .75rem; padding: .4rem; }
 .catalog-row-menu > div { position: static; width: 100%; box-shadow: none; }
 .catalog-savebar { bottom: 76px; }
 .catalog-savebar .component-row { width: 100%; }
 .catalog-savebar [data-publish] { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .catalog-editor button,.catalog-editor input { transition: none; } }
.catalog-editor details { margin-block: 0; }
.catalog-size-link,.catalog-marker,.catalog-row-menu summary { min-width: 44px; }
.catalog-select label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.catalog-select label input { margin: 0; }
.catalog-editor[data-complete=true] > :not(.catalog-savebar) { display: none; }
.catalog-editor[data-complete=true] .catalog-savebar { position: static; box-shadow: none; }
.catalog-editor[data-complete=true] .catalog-savebar > .component-row,.catalog-editor[data-complete=true] [data-catalog-warning] { display: none; }
@media (max-width: 700px) {
 .catalog-select { grid-row: 1; }
 .catalog-more { grid-column: 1; grid-row: 2; }
 .catalog-row-menu summary { padding: .6rem .15rem; font-size: .75rem; }
 .catalog-row:has(.catalog-row-menu[open]) .catalog-more { grid-column: 1/-1; grid-row: 3; }
 .catalog-row-menu[open] > div { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
 .catalog-row-menu[open] > div input { grid-column: 1/-1; }
}
@media (min-width: 701px) { .catalog-filters > summary { display: none; } .catalog-filters { flex: 1 1 400px; } }
.catalog-prices { display: flex; align-items: center; gap: .25rem; }
.catalog-prices > .catalog-cell { flex: 1; width: 0; min-width: 0; }
.catalog-prices > .catalog-size-link { flex: none; }
.photo-tray > div { height: 138px; }
.photo-tray img { height: 110px; }
.photo-tray small { display: block; font-size: .75rem; color: var(--color-text-muted); }
[data-photo-progress] p { margin-block: .25rem; font-size: .875rem; }

/* Legal documents stay readable without scripts or a signed-in session. */
.legal-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.25rem; }
.legal-layout { max-width:76rem; padding-block:1rem 3rem; }
.legal-prose { max-width:72ch; margin-inline:auto; line-height:1.8; overflow-wrap:anywhere; }
.legal-prose h1 { font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.2; margin:1.25rem 0 1.5rem; }
.legal-prose h2 { font-size:1.35rem; margin:2.25rem 0 .75rem; line-height:1.4; }
.legal-prose h3 { font-size:1.125rem; margin-top:1.75rem; }
.legal-prose :is(h1,h2,h3,h4) { scroll-margin-top:1.5rem; }
.legal-prose :is(p,ul,ol) { margin-bottom:1.1rem; }
.legal-prose :is(ul,ol) { padding-left:1.4rem; }
.legal-prose li { padding-left:.25rem; margin-block:.5rem; }
.legal-prose table { width:100%; border-collapse:collapse; font-size:.925rem; }
.legal-prose th,.legal-prose td { border:1px solid var(--color-border, #d7cbbb); padding:.65rem; vertical-align:top; text-align:left; }
.legal-prose th { background:var(--color-surface, #fffdf8); }
.legal-toc { max-width:72ch; margin:0 auto 1.5rem; border:1px solid var(--color-border,#d7cbbb); border-radius:var(--radius-md,.75rem); padding:.75rem 1rem; }
.legal-toc summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; font-weight:600; }
.legal-toc ul { list-style:none; padding-left:0; }
.legal-toc ul ul { padding-left:1rem; }
.legal-toc a { display:inline-flex; align-items:center; min-height:44px; }
.legal-related { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; max-width:72ch; margin:2rem auto 0; border-top:1px solid var(--color-border,#d7cbbb); padding-top:1rem; }
.legal-related a,.legal-footer a { min-height:44px; display:inline-flex; align-items:center; }
.legal-footer { padding:1.5rem max(1rem, calc((100% - 72rem)/2)); border-top:1px solid var(--color-border,#d7cbbb); }
.legal-footer nav { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; }
.legal-footer small { display:block; margin-top:.5rem; }
.app-main > .legal-footer { padding:1rem 1.25rem; }
.legal-draft { max-width:72ch; margin:0 auto 1rem; }
.deletion-page { max-width:48rem; }
.deletion-settings { margin-top:1.5rem; }
@media(max-width:600px) { .legal-prose table { display:block; overflow-x:auto; } .legal-layout.wrap { padding-inline:1rem; } }
.legal-header.wrap { max-width:76rem; margin-inline:auto; padding-inline:1rem; }
.legal-table { overflow-x:auto; }
.legal-table table { min-width:42rem; }
.legal-table :is(th,td) { overflow-wrap:normal; word-break:normal; }
.legal-table:focus-visible { outline:3px solid var(--color-focus); outline-offset:3px; }
.legal-table-hint { display:none; }
@media(max-width:600px) {
  .legal-prose .legal-table table { display:table; overflow:visible; }
  .legal-table-hint { display:block; font-size:var(--text-sm); }
}

/* Shared owner authentication and email verification. */
.auth-shell{max-width:1120px;margin:0 auto;padding:24px 16px;min-height:calc(100vh - 130px);display:grid;align-items:start;gap:32px}
.auth-brand-panel{display:none}.auth-card{padding:24px;min-width:0;width:100%;max-width:620px;justify-self:center}.auth-card h1{font-size:clamp(1.65rem,4vw,2.15rem);line-height:1.2;margin:16px 0}.auth-card p{margin:12px 0}.auth-card .settings-form,.auth-card .login-form{gap:12px}.auth-mobile-brand{margin-bottom:20px}.auth-progress{list-style:none;padding:0;display:flex;gap:12px;justify-content:space-between;font-size:.75rem;margin:0 0 28px}.auth-progress li{display:flex;flex-direction:column;gap:6px;align-items:center;color:var(--color-muted,#66564a)}.auth-progress li span{border:1px solid currentColor;border-radius:50%;width:28px;height:28px;display:grid;place-items:center}.auth-progress [aria-current]{color:var(--color-accent,#2e5948);font-weight:700}.auth-progress [aria-current] span{background:#2e5948;color:#fff}.auth-email{overflow-wrap:anywhere}.otp-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.otp-boxes[hidden]{display:none}.otp-digit{padding:8px 0;text-align:center;font-size:1.35rem;min-width:0;width:100%;height:52px}.auth-resend{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}.survey-form fieldset{border:0;border-bottom:1px solid #dfd4c5;padding:0 0 24px;min-width:0;margin:8px 0 12px}.survey-form legend{font-weight:650;margin-bottom:12px;line-height:1.5}.survey-chips{display:flex;gap:8px;flex-wrap:wrap}.survey-chip{position:relative;display:flex;cursor:pointer;max-width:100%}.survey-chip input{position:absolute;opacity:0;width:1px;height:1px}.survey-chip span{display:flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #8b7968;border-radius:16px;font-weight:400;transition:background .18s,color .18s}.survey-chip input:checked+span{background:#e1eee5;border-color:#2e5948;color:#254b3b;box-shadow:inset 0 0 0 1px #2e5948}.survey-chip input:checked+span::before{content:'✓ ';white-space:pre}.survey-chip input:focus-visible+span{outline:3px solid #86502c;outline-offset:3px}.survey-skip{background:none;border:0;text-decoration:underline;color:#385f4d;padding:12px 0;min-height:44px;cursor:pointer}.survey-form [data-survey-other]{margin-top:14px}.auth-card a:not(.brand){text-underline-offset:3px}.auth-brand-panel h2{font-size:2.5rem;line-height:1.2;max-width:390px}.auth-brand-panel ul{padding-left:20px;line-height:1.8}.auth-brand-panel{color:#453329;background:#f0e8dc;border-radius:24px;padding:36px}.auth-card .password-visibility{justify-self:start}.auth-card [hidden]{display:none!important}
@media(min-width:850px){.auth-shell{grid-template-columns:.9fr 1.1fr;align-items:start;padding:48px 24px}.auth-brand-panel{display:flex;flex-direction:column;justify-content:space-between;min-height:620px;position:sticky;top:24px}.auth-mobile-brand{display:none}.auth-card{padding:32px}.auth-progress{font-size:.875rem}}
@media(prefers-reduced-motion:reduce){.survey-chip span{transition:none}}
@media(max-width:849px){.otp-boxes{gap:4px}}
.auth-card .survey-chip{display:inline-flex;margin:0}.auth-card .btn--primary{width:100%}.auth-card .honeypot{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}

/* Supplied Climbrk logo. Preserve the original artwork and transparency. */
.brand-mark{background:transparent;border-radius:0}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
/* Team ownership filter keeps its label clear on narrow screens. */
.chat-search{flex-wrap:wrap}.chat-search .chat-mine-filter{display:flex;align-items:center;gap:.5rem;flex-basis:100%;min-height:44px;font-size:.85rem}.chat-mine-filter input{width:1.1rem;height:1.1rem;accent-color:var(--color-primary)}

/* Signup preferences: one server-backed form, one visible question at a time. */
.survey-flow-progress{display:grid;gap:10px;margin:14px 0 8px}.survey-flow-progress>span{font-size:.78rem;font-weight:600;color:#58695e}.survey-flow-progress progress{display:block;width:100%;height:5px;appearance:none;border:0;border-radius:6px;overflow:hidden;background:#e7ebe5}.survey-flow-progress progress::-webkit-progress-bar{background:#e7ebe5}.survey-flow-progress progress::-webkit-progress-value{background:#2e5948;border-radius:6px}.survey-flow-progress progress::-moz-progress-bar{background:#2e5948;border-radius:6px}.survey-flow-actions{display:flex;align-items:center;gap:12px;justify-content:space-between}.survey-flow-ready .survey-flow-actions>.btn--primary{width:auto;flex:1}.survey-flow-ready fieldset{border-bottom:0;padding-bottom:4px;margin-bottom:0}.survey-flow-ready legend:focus{outline:none}.survey-flow-ready .survey-skip{font-size:.85rem}.survey-flow-ready [data-survey-feedback]{margin:0;color:#9b3025}.survey-flow-ready .survey-chips{gap:10px}.survey-flow-ready .survey-chip span{line-height:1.6}.survey-flow-ready .survey-flow-actions{margin-top:8px}.survey-flow-ready [data-survey-finish]{min-width:0}@media(max-width:600px){.survey-flow-ready .survey-chip{width:100%}.survey-flow-ready .survey-chip span{width:100%;font-size:.88rem;padding:12px 14px;border-radius:12px}.survey-flow-actions>.btn{font-size:.83rem;padding:12px 14px}.survey-flow-ready legend{font-size:1.03rem;line-height:1.6}.survey-flow-progress{margin-block:18px 8px}}