/* ── Design tokens ──────────────────────────────────────────────── */
:root {
  --ff-bg:            #07111c;
  --ff-bg-2:          #0d1826;
  --ff-card:          rgba(15,27,42,0.92);
  --ff-card-2:        rgba(22,36,56,0.9);
  --ff-border:        rgba(142,166,196,0.18);
  --ff-border-strong: rgba(142,166,196,0.34);
  --ff-text:          #f3f7fb;
  --ff-text-dim:      #9eb0c5;
  --ff-accent:        #53b4ff;
  --ff-accent-2:      #9f7aea;
  --ff-success:       #4ade80;
  --ff-danger:        #ff7b7b;
  --ff-shadow:        0 24px 50px rgba(0,0,0,0.38);
  --ff-radius:        24px;
  --ff-radius-sm:     16px;
  --mono:             'JetBrains Mono', monospace;
  --sans:             'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --media-btn-size:   42px;
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; padding: 0; min-height: 100%; }
body.cqb-shell {
  font-family: var(--sans);
  color: var(--ff-text);
  background:
    radial-gradient(circle at top right, rgba(159,122,234,0.22), transparent 28%),
    radial-gradient(circle at left top,  rgba(83,180,255,0.18),  transparent 24%),
    linear-gradient(180deg, #07111c 0%, #08131f 38%, #06101a 100%);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button,input,textarea { font: inherit; }
button { cursor: pointer; }
audio#remoteAudio { width:0; height:0; opacity:0; position:absolute; pointer-events:none; }

/* ── C-40: Mobile-first shell ──────────────────────────────────── */
.ff-shell {
  width: min(1440px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 10px 14px 32px;
}

.saap-crumbs {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  color: var(--ff-text-dim); font-size: 13px; margin-bottom: 16px;
}
.saap-crumbs .c {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border-radius: 999px; border: 1px solid var(--ff-border); background: rgba(255,255,255,0.03);
}
.saap-crumbs a { text-decoration: none; }
.saap-crumbs a:hover { color: var(--ff-text); }

/* ── C-40: Hero ─────────────────────────────────────────────────── */
.ff-hero {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 18px; align-items: start;
  padding: 8px 0 14px; margin-bottom: 12px;
  border-bottom: 1px solid var(--ff-border);
}
/* C-39 kicker */
.ff-kicker {
  margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.16em;
  color: #8fd3ff; font-size: 0.68rem; font-weight: 600;
}
/* C-39+C-40 h1 */
.ff-hero h1 { margin: 0; font-size: 1.35rem; line-height: 1.1; font-weight: 700; }
/* C-39 sub */
.ff-sub { margin: 12px 0 0; max-width: 720px; color: var(--ff-text-dim); font-size: 0.92rem; line-height: 1.45; }
.ff-token-stack { display: flex; flex-direction: column; gap: 12px; }
.ff-token-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-radius: 999px; background: rgba(255,255,255,0.05);
  border: 1px solid var(--ff-border); color: var(--ff-text-dim); font-size: 13px;
}
.ff-token-pill strong { color: var(--ff-text); }

/* ── C-40: Tab bar — never wraps ───────────────────────────────── */
.ff-tabs {
  display: flex; gap: 0; flex-wrap: nowrap;
  padding: 10px 0 0; border-bottom: 2px solid var(--ff-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; overscroll-behavior-x: contain;
  align-items: flex-end; margin: 10px 0 0;
}
.ff-tabs::-webkit-scrollbar { display: none; }
/* C-39+C-40 */
.ff-tab {
  background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  color: var(--ff-text-dim); padding: 8px 16px;
  font-size: 0.82rem; font-weight: 500; cursor: pointer;
  font-family: inherit; white-space: nowrap; flex-shrink: 0;
  transition: color .15s;
}
.ff-tab:hover:not(.is-active) { color: var(--ff-text); }
.ff-tab.is-active {
  color: var(--ff-accent); border-bottom-color: var(--ff-accent); font-weight: 600;
}

/* ── Grid ───────────────────────────────────────────────────────── */
.ff-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,0.75fr); gap: 18px; }
.ff-main,.ff-settings-card,.ff-card,.cqb-form-card,.cqb-upload-card,
.cqb-step,.ff-chatlog,.ff-chat-form,.ff-media-bar,.ns-try-saying-panel {
  border: 1px solid var(--ff-border); background: var(--ff-card);
  border-radius: var(--ff-radius); box-shadow: var(--ff-shadow);
}
.ff-main { padding: 18px; min-width: 0; }
.ff-side { display: flex; flex-direction: column; gap: 18px; }
.ff-settings-card,.cqb-form-card,.cqb-upload-card { padding: 18px; }
/* C-39 */
.ff-settings-card h3,.ff-card h3,.cqb-form-card h3,.cqb-upload-card h3,.cqb-question h3 { margin: 0 0 10px; font-size: 1rem; }
.ff-panel-head h2 { margin: 0; font-size: 1.3rem; }
.ff-settings-card p:last-child,.ff-card p:last-child,.cqb-upload-card p:last-child,.ff-help:last-child { margin-bottom: 0; }
.ff-help { color: var(--ff-text-dim); line-height: 1.6; font-size: 0.88rem; }
.ff-panel-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ── C-40: Chatlog mobile-first ─────────────────────────────────── */
.ff-chatlog {
  min-height: 80px; max-height: 280px; padding: 18px;
  overflow: auto; display: flex; flex-direction: column; gap: 12px;
  border-radius: 16px;
}
/* C-39 */
.ff-bubble {
  max-width: min(84%,720px); padding: 14px 16px;
  border-radius: 20px 20px 20px 8px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: var(--ff-text); font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap;
}
.ff-bubble-user {
  align-self: flex-end; border-radius: 20px 20px 8px 20px;
  background: linear-gradient(135deg,rgba(83,180,255,0.24),rgba(83,180,255,0.1));
  border-color: rgba(83,180,255,0.36);
}
/* C-39 */
.ff-bubble-system {
  align-self: center; background: rgba(255,123,123,0.12); border-color: rgba(255,123,123,0.24);
  color: #ffd9d9; font-size: 0.78rem; font-style: italic;
}

.ff-chat-form {
  display: grid; grid-template-columns: minmax(0,1fr) 52px;
  gap: 10px; padding: 12px; margin-top: 14px;
}
/* C-39 */
.ff-input {
  width: 100%; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(6,12,20,0.92);
  color: var(--ff-text); outline: none; min-height: 50px; font-size: 0.9rem;
}
.ff-input:focus,textarea.ff-input:focus {
  border-color: rgba(83,180,255,0.55); box-shadow: 0 0 0 3px rgba(83,180,255,0.14);
}
textarea.ff-input { resize: vertical; min-height: 140px; }

/* C-39 buttons */
.ff-btn,.ff-icon-btn,.ns-chip,.cqb-console-card,.cqb-option-card { transition: 180ms ease; }
.ff-btn,.ff-icon-btn {
  border: 1px solid rgba(83,180,255,0.45);
  background: linear-gradient(180deg,rgba(83,180,255,0.28),rgba(83,180,255,0.14));
  color: #fff; border-radius: 16px; padding: 12px 18px; font-size: 0.9rem; font-weight: 600;
}
.ff-btn:hover,.ff-icon-btn:hover,.cqb-console-card:hover,.cqb-option-card:hover,.ns-chip:hover {
  transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.ff-btn-sm { font-size: 0.82rem; padding: 7px 13px; }
.ff-btn-ghost { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); color: var(--ff-text-dim); }
.ff-icon-btn {
  min-width: var(--media-btn-size); min-height: var(--media-btn-size);
  display: inline-grid; place-items: center; padding: 0;
}

/* ── Media bar — SAD canonical ─────────────────────────────────── */
.ff-media-bar {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 14px;
}
.ff-media-btn {
  width: var(--media-btn-size); height: var(--media-btn-size); min-width: var(--media-btn-size);
  border-radius: 10px; color: var(--ff-text-dim);
  border: 1px solid var(--ff-border); background: rgba(255,255,255,0.03); transition: all .15s;
}
.ff-media-btn:hover { color: var(--ff-accent); border-color: rgba(83,180,255,0.5); background: rgba(83,180,255,0.1); }
.ff-media-btn[aria-pressed="true"],.ff-media-btn.is-active {
  background: linear-gradient(180deg,rgba(159,122,234,0.28),rgba(159,122,234,0.12));
  border-color: rgba(159,122,234,0.48); color: #c4b5fd;
}
.ff-media-btn.is-active-stop { color: var(--ff-danger); border-color: rgba(255,123,123,0.3); background: rgba(255,123,123,0.08); }
.ff-media-btn.is-muted { color: #fbbf24; border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.07); }
.ff-media-divider { display: inline-block; width: 1px; height: 24px; background: rgba(255,255,255,0.14); flex-shrink: 0; }

/* ── C-37: VAD — fill element must NOT carry display:none ────── */
.ff-vad-bar {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-radius: 999px; background: rgba(83,180,255,0.12); border: 1px solid rgba(83,180,255,0.28);
}
.ff-vad-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ff-accent); animation: cqbPulse 1.1s infinite ease-in-out; }
.ff-vad-dot:nth-child(2) { animation-delay: 0.15s; }
.ff-vad-dot:nth-child(3) { animation-delay: 0.3s; }
/* C-39 */
.ff-vad-label { font-size: 0.75rem; font-family: var(--mono); color: var(--ff-text-dim); }
@keyframes cqbPulse { 0%,100%{transform:scale(0.9);opacity:0.45} 50%{transform:scale(1.18);opacity:1} }

/* C-37: always visible (no display:none here) */
.ff-vad-fill {
  min-height: 6px; margin-top: 12px; border-radius: 999px;
  background: linear-gradient(90deg,rgba(83,180,255,0.18),rgba(159,122,234,0.12));
}

/* C-35: display managed by setStatus() — no display:none here */
.ff-console-note { min-height: 22px; margin-top: 12px; color: var(--ff-text-dim); font-size: 0.82rem; }

/* SAD canonical hidden class */
.ff-hidden { display: none !important; }

/* C-39 */
.ff-status-row { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 12px; color: var(--ff-text-dim); font-size: 0.82rem; flex-wrap: wrap; }
.ff-build-footer { font-size: 0.78rem; font-family: var(--mono); color: var(--ff-text-dim); margin-top: 20px; text-align: right; }

/* ── C-41: Try Saying — default COLLAPSED ─────────────────────── */
.ns-try-saying-panel { margin-top: 14px; overflow: hidden; }
.ns-try-saying-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 16px 18px; color: var(--ff-text); background: transparent; border: 0;
}
.ns-try-saying-toggle .ns-chevron { transition: transform 180ms ease; }
.ns-try-saying-toggle[aria-expanded="true"] .ns-chevron { transform: rotate(180deg); }
/* C-41: body padding (hidden by ff-hidden in scaffold) */
.ns-try-saying-body { padding: 0 16px 16px; }
.ns-voice-hints { display: flex; flex-wrap: wrap; gap: 10px; }
.ns-voice-hint,.ns-chip {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1); padding: 10px 14px;
  background: rgba(255,255,255,0.03); color: var(--ff-text-dim); font-size: 0.85rem; cursor: pointer;
}
.ns-voice-hint:hover,.ns-chip.is-active { color: var(--ff-text); border-color: rgba(83,180,255,0.46); background: rgba(83,180,255,0.12); }

/* C-39 label span */
label span { font-size: 0.8rem; font-weight: 500; letter-spacing: .03em; color: var(--ff-text-dim); }
.ff-toggle-row span { font-size: 0.9rem; color: var(--ff-text-dim); flex: 1; }

/* Console cards */
.cqb-console-grid,.cqb-card-grid,.cqb-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.cqb-console-card,.cqb-option-card { text-align: left; padding: 20px; cursor: pointer; }
.cqb-console-card,.cqb-option-card,.ff-card { color: var(--ff-text); }
.cqb-card-icon {
  width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px;
  background: linear-gradient(135deg,rgba(83,180,255,0.18),rgba(159,122,234,0.16));
  border: 1px solid rgba(83,180,255,0.28); font-size: 28px; margin-bottom: 16px;
}
.cqb-option-card.is-selected,.cqb-option-card.is-highlighted,.cqb-console-card.is-highlighted,.ff-card.is-highlighted {
  border-color: rgba(83,180,255,0.64);
  background: linear-gradient(180deg,rgba(83,180,255,0.18),rgba(83,180,255,0.07));
  box-shadow: 0 0 0 2px rgba(83,180,255,0.16) inset, 0 0 0 1px rgba(83,180,255,0.12);
}

.cqb-step-tracker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.cqb-step { padding: 11px 14px; border-radius: 999px; font-size: 12px; color: var(--ff-text-dim); }
.cqb-step.is-active { color: var(--ff-text); border-color: rgba(83,180,255,0.52); background: rgba(83,180,255,0.14); }
.cqb-step.is-complete { color: #d5ffe8; border-color: rgba(74,222,128,0.35); background: rgba(74,222,128,0.12); }

.cqb-field { display: flex; flex-direction: column; gap: 8px; color: var(--ff-text-dim); }
.cqb-check { display: flex; align-items: center; gap: 10px; color: var(--ff-text-dim); min-height: 50px; }
.cqb-check input { width: 18px; height: 18px; }
.cqb-stack { display: flex; flex-direction: column; gap: 16px; }
.cqb-question { padding: 18px; border-radius: 22px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); }
.cqb-chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cqb-upload-card { min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.cqb-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }
.cqb-nav .ff-btn:last-child { margin-left: auto; }
.cqb-summary-list { margin: 0; padding-left: 18px; color: var(--ff-text-dim); line-height: 1.7; }
#summaryInline h4,#statusResult h4,#summaryPanel h4 { margin: 0 0 12px; font-size: 18px; }

/* ── Settings — C-28 canonical toggles ─────────────────────────── */
.ff-settings-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.ff-toggle-list { display: flex; flex-direction: column; }
.ff-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--ff-border); cursor: pointer; gap: 12px; }
.ff-toggle-row:last-child { border-bottom: none; }
.ff-toggle-switch { position: relative; flex-shrink: 0; }
.ff-toggle-check { position: absolute; opacity: 0; width: 0; height: 0; }
.ff-toggle-pill { display: block; width: 42px; height: 24px; background: rgba(255,255,255,0.1); border: 1px solid var(--ff-border); border-radius: 999px; position: relative; transition: all .2s; cursor: pointer; }
.ff-toggle-pill::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.ff-toggle-check:checked + .ff-toggle-pill { background: var(--ff-accent); border-color: var(--ff-accent); }
.ff-toggle-check:checked + .ff-toggle-pill::after { transform: translateX(18px); }

/* C-28: role switch */
.cqb-role-switch { display: flex; gap: 6px; margin-top: 8px; }
.cqb-role-btn { flex: 1; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--ff-border); background: rgba(255,255,255,0.03); color: var(--ff-text-dim); font-size: 0.9rem; font-weight: 600; transition: 180ms ease; }
.cqb-role-btn.is-active { background: rgba(83,180,255,0.18); border-color: rgba(83,180,255,0.52); color: var(--ff-text); }

/* C-28: role-gated visibility */
#cqb-app[data-user-role="customer"] [data-role="business"] { display: none !important; }
#cqb-app[data-user-role="business"] [data-role="customer"] { display: none !important; }

/* ── Breakpoints ────────────────────────────────────────────────── */
/* C-40 desktop restore */
@media (min-width: 900px) {
  .ff-shell   { padding: 16px 36px 40px; }
  .ff-hero    { padding: 12px 0 24px; margin-bottom: 18px; }
  .ff-hero h1 { font-size: 1.75rem; }
  .ff-tab     { font-size: 0.9rem; padding: 10px 18px; }
  .ff-chatlog { max-height: 360px; border-radius: 22px; }
}
@media (max-width: 1080px) {
  .ff-grid { grid-template-columns: 1fr; }
  .ff-side { order: -1; }
}
@media (max-width: 780px) {
  .ff-shell { width: min(100vw - 16px,100%); }
  .ff-hero  { grid-template-columns: 1fr; }
  .ff-main  { padding: 14px; }
  .cqb-console-grid,.cqb-card-grid,.cqb-form-grid { grid-template-columns: 1fr; }
  .ff-chat-form { grid-template-columns: minmax(0,1fr) 48px; }
}
@media (max-width: 560px) {
  .saap-crumbs .c { width: 100%; justify-content: flex-start; }
  .ff-media-bar   { flex-wrap: wrap; }
  .ff-vad-bar     { width: 100%; justify-content: center; }
  .cqb-nav        { flex-direction: column; }
  .cqb-nav .ff-btn,.cqb-nav .ff-btn:last-child { width: 100%; margin-left: 0; }
}