/* CueFriend brand and application stylesheet.
   Self contained and premium. It owns the full dashboard layout so the product
   does not depend on the Mofi admin template layout assets, which require
   template JavaScript this project does not ship. Bootstrap is still loaded for
   its grid, forms, tables, cards, and utility classes; everything here recolors
   and refines those into the CueFriend editorial design system: a warm cream
   canvas, white flat cards with hairline borders, pill controls, near black for
   dark inversions, and Replicate orange as the single accent. One design system
   across the public pages and the app after login. Faithful to app_design.md.
   ASCII punctuation only throughout. */

/* ============================================================ TOKENS */
:root {
  /* Brand accent (Replicate Orange). Kept as --cf-primary because inline
     styles and app.js reference it. */
  --cf-primary: #ea2804;
  --cf-primary-hover: #d8260a;
  --cf-primary-deep: #c01f00;
  --cf-primary-050: rgba(234, 40, 4, 0.06);
  --cf-primary-100: rgba(234, 40, 4, 0.10);
  --cf-primary-160: rgba(234, 40, 4, 0.16);
  --cf-glow: #ff6a3d;
  --cf-pink: #f4a8a0;

  /* Surfaces. Warm cream canvas, bone for inset groups, pure white cards. */
  --cf-canvas: #f9f7f3;
  --cf-bone: #f3f0e8;
  --cf-soft: #f3f0e8;     /* alias used by inline section backgrounds */
  --cf-card: #ffffff;
  --cf-dark: #202020;     /* dark inversions: sidebar, featured tier */
  --cf-dark-2: #181818;
  --cf-deep: #000000;     /* footer, deepest band */

  /* Text. Warmer than black, in the editorial neutral ramp. */
  --cf-ink: #202020;
  --cf-body: #3a3a3a;
  --cf-charcoal: #575757;
  --cf-mute: #646464;
  --cf-ash: #8d8d8d;
  --cf-stone: #bbbbbb;
  --cf-on-dark: #fcfcfc;
  --cf-on-dark-mute: rgba(252, 252, 252, 0.72);

  /* Hairlines. */
  --cf-hairline: rgba(32, 32, 32, 0.12);
  --cf-hairline-2: rgba(32, 32, 32, 0.22);
  --cf-hairline-strong: #202020;

  /* Semantic. Danger is a true red so it never reads as the brand orange. */
  --cf-success: #2b9a66;  --cf-success-bg: rgba(43, 154, 102, 0.12);
  --cf-warning: #b5780b;  --cf-warning-bg: rgba(181, 120, 11, 0.14);
  --cf-danger:  #d92d20;  --cf-danger-bg:  rgba(217, 45, 32, 0.10);
  --cf-info:    #0e7490;  --cf-info-bg:    rgba(14, 116, 144, 0.12);

  /* Shape. Pills for controls; flat editorial cards. A shadow is used only
     where an element genuinely floats (auth card, chat bubbles stay flat). */
  --cf-radius: 16px;
  --cf-radius-md: 10px;
  --cf-radius-sm: 6px;
  --cf-pill: 9999px;
  --cf-shadow: 0 8px 24px rgba(32, 32, 32, 0.08);
  --cf-shadow-lg: 0 18px 48px rgba(32, 32, 32, 0.14);

  /* Layout. */
  --cf-sb-w: 264px;
  --cf-hd-h: 68px;

  /* Type families, matching the design tokens. */
  --cf-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cf-font-display: "Bricolage Grotesque", "Inter", Georgia, serif;

  /* Bootstrap variable overrides so native components inherit the brand. */
  --bs-primary: #ea2804;
  --bs-primary-rgb: 234, 40, 4;
  --bs-link-color: #ea2804;
  --bs-link-hover-color: #c01f00;
  --bs-body-font-family: var(--cf-font-ui);
  --bs-body-color: #3a3a3a;
  --bs-body-bg: #f9f7f3;
}

/* ============================================================ BASE */
body {
  font-family: var(--cf-font-ui);
  color: var(--cf-body);
  background: var(--cf-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--cf-primary); }
a:hover { color: var(--cf-primary-deep); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cf-font-display);
  color: var(--cf-ink);
  letter-spacing: -0.02em;
  font-weight: 700;
}

::selection { background: var(--cf-primary-160); color: var(--cf-ink); }

/* ============================================================ MOFI COMPAT
   Utility classes the markup and app.js use that are not in Bootstrap. */
.f-w-300 { font-weight: 300; }
.f-w-400 { font-weight: 400; }
.f-w-500 { font-weight: 500; }
.f-w-600 { font-weight: 600; }
.f-w-700 { font-weight: 700; }
.f-w-800 { font-weight: 800; }
.f-light { color: var(--cf-mute); font-weight: 400; }
.font-primary { color: var(--cf-primary) !important; }
.font-success { color: var(--cf-success) !important; }
.txt-danger { color: var(--cf-danger) !important; }
.cf-muted { color: var(--cf-mute); }

.theme-scrollbar { scrollbar-width: thin; scrollbar-color: var(--cf-hairline-2) transparent; }
.theme-scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
.theme-scrollbar::-webkit-scrollbar-thumb { background: var(--cf-hairline-2); border-radius: var(--cf-pill); }

/* ============================================================ BUTTONS
   Pill shaped across the board, matching the design system. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--cf-font-ui); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--cf-pill);
  padding: 0.66rem 1.4rem; line-height: 1.1; letter-spacing: 0;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-sm { padding: 0.42rem 0.95rem; font-size: 0.85rem; }
.btn-lg { padding: 0.85rem 1.7rem; font-size: 1.02rem; }
.btn-pill { border-radius: var(--cf-pill); }

.btn-primary { background-color: var(--cf-primary); border-color: var(--cf-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--cf-primary-hover); border-color: var(--cf-primary-hover); color: #fff; }
.btn-primary:active { background-color: var(--cf-primary-deep) !important; border-color: var(--cf-primary-deep) !important; }

.btn-dark { background-color: var(--cf-dark); border-color: var(--cf-dark); color: var(--cf-on-dark); }
.btn-dark:hover { background-color: #2e2e2e; border-color: #2e2e2e; color: #fff; }

.btn-outline-primary { color: var(--cf-primary); border-color: var(--cf-primary); background: #fff; }
.btn-outline-primary:hover { background-color: var(--cf-primary); border-color: var(--cf-primary); color: #fff; }

.btn-success { background-color: var(--cf-success); border-color: var(--cf-success); color: #fff; }
.btn-success:hover { background-color: #248a59; border-color: #248a59; color: #fff; }

.btn-outline-secondary { color: var(--cf-ink); border-color: var(--cf-hairline-strong); background: #fff; }
.btn-outline-secondary:hover { background: var(--cf-bone); border-color: var(--cf-hairline-strong); color: var(--cf-ink); }

.btn-outline-danger { color: var(--cf-danger); border-color: rgba(217, 45, 32, 0.55); background: #fff; }
.btn-outline-danger:hover { background: var(--cf-danger); border-color: var(--cf-danger); color: #fff; }

.btn:focus-visible { outline: 3px solid rgba(59, 130, 246, 0.5); outline-offset: 2px; }

/* ============================================================ FORMS
   Pill inputs on white with a strong focus border, per the design system. */
.form-control, .form-select {
  font-family: var(--cf-font-ui); color: var(--cf-ink);
  background-color: #fff; border: 1px solid var(--cf-hairline);
  border-radius: var(--cf-pill); padding: 0.62rem 1.1rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: var(--cf-ash); }
.form-control:focus, .form-select:focus {
  border-color: var(--cf-hairline-strong);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
textarea.form-control { border-radius: var(--cf-radius); }
.form-control-sm, .form-select-sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.col-form-label { color: var(--cf-charcoal); font-weight: 600; padding-bottom: 0.3rem; }
.form-check-input:checked { background-color: var(--cf-primary); border-color: var(--cf-primary); }
.form-check-input:focus { border-color: var(--cf-primary); box-shadow: 0 0 0 3px var(--cf-primary-160); }
.form-range::-webkit-slider-thumb { background: var(--cf-primary); }
.form-range::-moz-range-thumb { background: var(--cf-primary); }

/* ============================================================ CARDS
   White, hairline, flat. Editorial restraint, no resting shadow. */
.card {
  background: var(--cf-card);
  border: 1px solid var(--cf-hairline);
  border-radius: var(--cf-radius);
  box-shadow: none;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--cf-hairline);
  padding: 1.05rem 1.4rem;
}
.card-header h4 {
  font-family: var(--cf-font-display); font-size: 1.12rem; font-weight: 600;
  letter-spacing: -0.01em; margin: 0; color: var(--cf-ink);
}
.card-body { padding: 1.4rem; }

/* ============================================================ TABLES */
.table { color: var(--cf-body); margin-bottom: 0; }
.table > thead th, .table thead tr th {
  font-family: var(--cf-font-ui); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--cf-mute);
  border-bottom: 1px solid var(--cf-hairline-2);
  padding: 0.6rem 0.75rem; white-space: nowrap;
}
.table > tbody td { padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--cf-hairline); vertical-align: middle; }
.table > tbody tr:last-child td { border-bottom: 0; }
.table > tbody tr { transition: background-color .12s ease; }
.table > tbody tr:hover { background: var(--cf-bone); }
.border-bottom-primary th { border-bottom: 1px solid var(--cf-hairline-2) !important; }

/* ============================================================ LISTS */
.list-group-flush { border-radius: 0; }
.list-group-item {
  border: 0; border-bottom: 1px solid var(--cf-hairline);
  padding: 0.85rem 0; color: var(--cf-body); background: transparent;
}
.list-group-item:last-child { border-bottom: 0; }

/* ============================================================ BADGES
   Soft tinted pills. Bootstrap 5 lacks Mofi's badge-light-* variants. */
.badge { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.01em; padding: 0.4em 0.75em; border-radius: var(--cf-pill); }
.badge-primary { background: var(--cf-primary); color: #fff; }
.badge-light-primary { background: var(--cf-primary-100); color: var(--cf-primary-deep); }
.badge-light-success { background: var(--cf-success-bg); color: var(--cf-success); }
.badge-light-danger  { background: var(--cf-danger-bg);  color: var(--cf-danger); }
.badge-light-warning { background: var(--cf-warning-bg); color: var(--cf-warning); }
.badge-light-info    { background: var(--cf-info-bg);    color: var(--cf-info); }

/* ============================================================ ALERTS */
.alert { border-radius: var(--cf-radius-md); border: 1px solid transparent; padding: 0.8rem 1rem; }
.alert-danger  { background: var(--cf-danger-bg);  color: #97170d; border-color: rgba(217, 45, 32, 0.25); }
.alert-success { background: var(--cf-success-bg); color: #176b41; border-color: rgba(43, 154, 102, 0.28); }

/* ============================================================ ICON CHIP */
.cf-ico {
  width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cf-primary-100); color: var(--cf-primary);
}
.cf-ico svg { width: 22px; height: 22px; }
.cf-ico--lg { width: 56px; height: 56px; border-radius: 16px; }
.cf-ico--lg svg { width: 26px; height: 26px; }

/* ============================================================ PUBLIC SITE */
.cf-public { color: var(--cf-body); background: var(--cf-canvas); }

.cf-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(249, 247, 243, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cf-hairline);
}
.cf-navlink { color: var(--cf-charcoal); text-decoration: none; font-weight: 600; }
.cf-navlink:hover { color: var(--cf-ink); }

.cf-eyebrow { color: var(--cf-primary); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.76rem; }

.cf-hero {
  background:
    radial-gradient(900px 420px at 86% -12%, rgba(234, 40, 4, 0.12), transparent 60%),
    radial-gradient(700px 360px at 10% 8%, rgba(255, 106, 61, 0.10), transparent 55%),
    var(--cf-canvas);
  padding: 92px 0 80px;
}
.cf-hero h1 {
  font-family: var(--cf-font-display); font-weight: 800;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.02;
  letter-spacing: -0.035em; color: var(--cf-ink);
}
.cf-hero .lead { font-size: 1.2rem; color: var(--cf-charcoal); line-height: 1.55; }

.cf-section { padding: 84px 0; }

.cf-feature {
  height: 100%; background: #fff; border: 1px solid var(--cf-hairline);
  border-radius: var(--cf-radius); padding: 28px;
  transition: border-color .18s ease, transform .18s ease;
}
.cf-feature:hover { border-color: var(--cf-hairline-2); transform: translateY(-3px); }
.cf-feature .cf-ico { margin-bottom: 16px; }
.cf-feature h5, .cf-feature h6 { color: var(--cf-ink); }

.cf-step { display: flex; gap: 16px; align-items: flex-start; }
.cf-step .num {
  flex: 0 0 42px; height: 42px; width: 42px; border-radius: 50%;
  background: var(--cf-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--cf-font-display);
}

.cf-price-card {
  background: #fff; border: 1px solid var(--cf-hairline);
  border-radius: var(--cf-radius); padding: 32px; height: 100%;
  transition: border-color .18s ease, transform .18s ease;
}
.cf-price-card:hover { transform: translateY(-2px); }
/* Featured tier inverts to the dark surface, the design system signature. */
.cf-price-card.featured { background: var(--cf-dark); border-color: var(--cf-dark); color: var(--cf-on-dark); }
.cf-price-card.featured h4, .cf-price-card.featured h5 { color: #fff; }
.cf-price-card.featured .f-light { color: var(--cf-on-dark-mute); }
.cf-price-card.featured .cf-price-amount { color: #fff !important; }
.cf-price-card.featured .badge-primary { background: var(--cf-primary); }
.cf-price-amount { font-family: var(--cf-font-display); font-size: 2.6rem; font-weight: 800; color: var(--cf-ink); letter-spacing: -0.02em; }

/* Signature orange band, used for the closing call to action. */
.cf-cta {
  position: relative; color: var(--cf-on-dark);
  background-color: var(--cf-primary);
  background-image:
    radial-gradient(60% 80% at 50% 12%, var(--cf-glow) 0%, rgba(255, 106, 61, 0) 60%),
    radial-gradient(90% 70% at 50% 120%, var(--cf-pink) 0%, rgba(244, 168, 160, 0) 55%),
    radial-gradient(120% 120% at 50% 0%, var(--cf-primary) 0%, var(--cf-primary-deep) 100%);
}
.cf-cta h2 { color: #fff; }
.cf-cta .f-light, .cf-cta p { color: rgba(255, 255, 255, 0.86); }
.cf-cta .btn-primary { background: #fff; border-color: #fff; color: var(--cf-primary-deep); }
.cf-cta .btn-primary:hover { background: var(--cf-bone); border-color: var(--cf-bone); color: var(--cf-primary-deep); }

.cf-footer { background: var(--cf-deep); color: var(--cf-on-dark-mute); }
.cf-footer h6 { color: #fff; }
.cf-footer p { color: var(--cf-on-dark-mute); }
.cf-footlinks a { color: var(--cf-on-dark-mute); text-decoration: none; display: block; padding: 5px 0; }
.cf-footlinks a:hover { color: #fff; }
.cf-footer .border-top { border-color: rgba(252, 252, 252, 0.14) !important; }

/* Auth screens float a card on a warm wash. */
.cf-auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(820px 380px at 50% -12%, rgba(234, 40, 4, 0.14), transparent 60%),
    var(--cf-canvas);
}
.cf-auth-card {
  width: 100%; max-width: 440px; background: #fff;
  border: 1px solid var(--cf-hairline); border-radius: 22px;
  padding: 40px; box-shadow: var(--cf-shadow);
}
.cf-auth-card h4 { color: var(--cf-ink); }

/* ============================================================ APP SHELL */
body.cf-dash { background: var(--cf-canvas); }
.cf-dash .page-wrapper { min-height: 100vh; }

/* Sidebar: near black with the light wordmark and an orange active accent. */
.cf-dash .sidebar-wrapper {
  background: linear-gradient(180deg, var(--cf-dark) 0%, var(--cf-dark-2) 100%);
  color: var(--cf-on-dark);
}
.cf-dash .sidebar-main { display: flex; flex-direction: column; height: 100%; }
.cf-dash .sidebar-header {
  display: none; align-items: center; height: var(--cf-hd-h); padding: 0 22px;
  border-bottom: 1px solid rgba(252, 252, 252, 0.10);
}
.cf-dash .sidebar-header img { height: 30px; width: auto; }
.cf-dash .sidebar-body { padding: 10px; }
.cf-dash #cf-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.cf-dash #cf-nav > li { list-style: none; }
.cf-dash .sidebar-link {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: 11px; color: var(--cf-on-dark-mute); text-decoration: none;
  font-weight: 500; font-size: 0.95rem; white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.cf-dash .sidebar-link svg { width: 19px; height: 19px; stroke-width: 2; }
.cf-dash .sidebar-link:hover { background: rgba(252, 252, 252, 0.08); color: #fff; }
.cf-dash .sidebar-link.active { background: var(--cf-primary-160); color: #fff; }
.cf-dash .sidebar-link.active svg { color: var(--cf-glow); }

/* Top header. */
.cf-dash .page-header { background: #fff; border-bottom: 1px solid var(--cf-hairline); }
.cf-dash .header-wrapper { display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 8px 18px; margin: 0; }
.cf-dash .header-logo-wrapper img { height: 30px; width: auto; }
.cf-dash .nav-right .nav-menus { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.cf-dash .nav-right .nav-menus li { list-style: none; }
.cf-dash #cf-user-name { color: var(--cf-ink); font-weight: 600; }
.cf-dash #cf-signout { color: var(--cf-primary); text-decoration: none; font-weight: 600; }
.cf-dash #cf-signout:hover { color: var(--cf-primary-deep); text-decoration: underline; }
.cf-dash .badge-light-primary { background: var(--cf-primary-100); color: var(--cf-primary-deep); }

/* Content area. */
.cf-dash .page-body { background: var(--cf-canvas); padding: 22px 16px 56px; }
.cf-dash .page-title { margin-bottom: 20px; }
.cf-dash .page-title h3 { font-family: var(--cf-font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; color: var(--cf-ink); margin: 0; }
.cf-dash .container-fluid { padding-left: 0; padding-right: 0; }

/* Stat cards (a .card.cf-stat with no card-body). */
.cf-dash .cf-stat { padding: 22px 24px; }
.cf-dash .cf-stat h3 { font-family: var(--cf-font-display); font-size: 1.9rem; color: var(--cf-ink); letter-spacing: -0.02em; }
.cf-dash .cf-stat .cf-muted { font-size: 0.85rem; }

/* The Talk call to action on the home view. */
.cf-talk-cta { padding: 20px 24px; }
.cf-talk-cta h4 { font-size: 1.15rem; }

/* ============================================================ CONVERSATION
   The web talk panel. Speaks and listens like the app, same voice API. */
.cf-chat-card { display: flex; flex-direction: column; overflow: hidden; }
.cf-chat-log {
  display: flex; flex-direction: column; gap: 12px;
  padding: 22px; height: 52vh; min-height: 320px; overflow-y: auto;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--cf-primary-050), transparent 70%),
    var(--cf-card);
}
.cf-msg {
  max-width: 78%; padding: 11px 16px; font-size: 0.96rem; line-height: 1.5;
  border-radius: 16px; white-space: pre-wrap; word-wrap: break-word;
}
.cf-msg--bot { align-self: flex-start; background: var(--cf-bone); color: var(--cf-ink); border-bottom-left-radius: 5px; }
.cf-msg--user { align-self: flex-end; background: var(--cf-dark); color: var(--cf-on-dark); border-bottom-right-radius: 5px; }
.cf-msg--pending { color: var(--cf-ash); letter-spacing: 2px; }

.cf-chat-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--cf-hairline); background: #fff; }
.cf-chat-input { flex: 1; }
.cf-mic, .cf-send {
  flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: var(--cf-pill);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent;
}
.cf-mic { background: #fff; color: var(--cf-ink); border-color: var(--cf-hairline-strong); }
.cf-mic:hover { background: var(--cf-bone); }
.cf-mic svg, .cf-send svg { width: 19px; height: 19px; }
.cf-mic--live { background: var(--cf-primary); border-color: var(--cf-primary); color: #fff; animation: cf-pulse 1.2s ease-in-out infinite; }
.cf-mic--off { opacity: 0.45; cursor: not-allowed; }
.cf-send { background: var(--cf-primary); border-color: var(--cf-primary); color: #fff; }
.cf-send:hover { background: var(--cf-primary-hover); border-color: var(--cf-primary-hover); }
.cf-chat-foot { display: flex; align-items: center; justify-content: flex-start; gap: 18px; flex-wrap: wrap; padding: 4px 16px 14px; font-size: 0.82rem; }
.cf-speak-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--cf-charcoal); cursor: pointer; margin: 0; }
@keyframes cf-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--cf-primary-160); } 50% { box-shadow: 0 0 0 14px rgba(234, 40, 4, 0); } }
@keyframes cf-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Siri style voice stage: a large mic that changes with the state. */
.cf-voice-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 16px 6px; border-top: 1px solid var(--cf-hairline); }
.cf-mic-big {
  width: 78px; height: 78px; border-radius: var(--cf-pill);
  border: 1px solid var(--cf-hairline-strong); background: #fff; color: var(--cf-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.cf-mic-big:hover { background: var(--cf-bone); }
.cf-mic-big:active { transform: scale(0.96); }
.cf-mic-big svg { width: 30px; height: 30px; }
.cf-mic-big--listening { background: var(--cf-primary); border-color: var(--cf-primary); color: #fff; animation: cf-pulse 1.2s ease-in-out infinite; }
.cf-mic-big--thinking { background: var(--cf-bone); border-color: var(--cf-hairline-2); color: var(--cf-mute); animation: cf-breathe 1.1s ease-in-out infinite; }
.cf-mic-big--speaking { background: var(--cf-dark); border-color: var(--cf-dark); color: #fff; animation: cf-breathe 1.6s ease-in-out infinite; }
.cf-voice-status { font-size: 0.92rem; color: var(--cf-charcoal); min-height: 1.2em; text-align: center; max-width: 560px; }
.cf-voice-status--warn { color: var(--cf-danger); font-weight: 600; }

/* ============================================================ RESPONSIVE */
@media (min-width: 992px) {
  .cf-dash .sidebar-wrapper { position: fixed; top: 0; left: 0; bottom: 0; width: var(--cf-sb-w); overflow-y: auto; z-index: 1030; }
  .cf-dash .sidebar-header { display: flex; }
  .cf-dash .sidebar-body { padding: 14px 14px 24px; flex: 1; }
  .cf-dash #cf-nav { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .cf-dash #cf-nav > li { width: 100%; }
  .cf-dash .sidebar-link { width: 100%; }

  .cf-dash .page-header { position: fixed; top: 0; left: var(--cf-sb-w); right: 0; z-index: 1020; height: var(--cf-hd-h); }
  .cf-dash .header-wrapper { justify-content: flex-end; height: 100%; padding: 0 30px; }
  .cf-dash .header-logo-wrapper { display: none; }

  .cf-dash .page-body { margin-left: var(--cf-sb-w); padding: calc(var(--cf-hd-h) + 30px) 34px 64px; }
  .cf-dash .page-title h3 { font-size: 2.05rem; }
}

@media (min-width: 1600px) {
  .cf-dash .page-body { padding-left: 56px; padding-right: 56px; }
}