/* Auria Portaria — the landing page's design system (auria-ai.com.br,
   auria-lp/styles.css): violet #A100F2 on purple-black grounds, Geist with
   JetBrains Mono for numbers and labels, square-ish 4-6px corners. */
:root {
  /* Native controls/scrollbars (and the UA's own dark/light form-control chrome)
     follow the active theme instead of the browser default. */
  color-scheme: dark;

  /* The landing page's brand purple. The 22px brand mark wears it exactly in both
     themes — a logo does not retune to its ground — so --auria-mark is the one
     accent stated once and inherited. */
  --auria-mark: #a100f2;
  /* The agent's voice orb, in the same purple family. Both accent pairs below are
     theme-dependent: each is a large decorative fill (the orb, the mark's halo),
     so its job is to hold its shape against the ground it sits on, and the ground
     flips. The light theme re-states every one of them — a value that appears only
     here is dark-theme-only by construction. */
  --auria-purple: #a100f2;
  --auria-purple-lit: #c44cff;
  /* The demo page's "you are speaking" green, for the visitor's voice orb: the
     outer stop of the disc (-listen) and its lit centre (-listen-lit). */
  --auria-listen: #34d3a0;
  --auria-listen-lit: #6ee7bd;
  /* Halo under the brand mark, keyed to --auria-mark at the alpha that reads as a
     glow on this theme's ground. */
  --brand-mark-glow: rgba(161, 0, 242, 0.45);

  /* Fills, borders and the selected state wear the landing's #A100F2; text in the
     brand colour takes its lighter #C44CFF (--accent), because #A100F2 measures
     only 3.6:1 on this ground and 5.4:1 is the lighter one's. */
  --brand: #a100f2;
  --brand-strong: #8a00d4;
  --brand-hover: #c44cff;
  --brand-soft: rgba(161, 0, 242, 0.16);
  --brand-softer: rgba(161, 0, 242, 0.07);
  --brand-glow: rgba(161, 0, 242, 0.25);
  --accent: #c44cff;
  /* Text on a flat --brand fill: white clears 5.5:1 on #A100F2 in both themes. */
  --on-brand: #ffffff;
  /* Label on the filled controls (.btn and .btn.danger): white in both themes. */
  --on-gradient: #ffffff;
  /* The filled button is the landing's flat violet: both stops equal at rest, and
     hover lifts to its lighter #C44CFF the way the landing's .btn-primary does. */
  --btn-fill-a: #a100f2;
  --btn-fill-b: #a100f2;
  --btn-fill-hover-a: #b52cff;
  --btn-fill-hover-b: #b52cff;

  /* The landing's purple-black grounds (#0A0612, #0F0A1C), stepped up for cards. */
  --bg-0: #0a0612;
  --bg-1: #0f0a1c;
  --bg-2: #151024;
  --bg-3: #1c162e;
  --bg-4: #251e3a;

  --border-1: rgba(242, 240, 245, 0.08);
  --border-2: rgba(242, 240, 245, 0.12);
  --border-3: rgba(242, 240, 245, 0.18);
  --border-brand: rgba(161, 0, 242, 0.55);

  /* --text-2 is the landing's --muted; --text-3 sits between it and the
     landing's --muted-2, which at 3.6:1 is too faint for the small labels here. */
  --text-0: #f2f0f5;
  --text-1: #e2deea;
  --text-2: #9a93ad;
  --text-3: #7d7692;
  --text-4: #4f4964;

  --success: #34d399;
  --success-bg: rgba(52, 211, 153, 0.12);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --error: #f87171;
  --error-bg: rgba(248, 113, 113, 0.12);
  /* Hang-up button fill. Same three-rung shape as --brand/-strong/-hover: the
     resting gradient is (strong -> hover) and the hover state lightens to
     (danger -> strong), so the ladder runs lightest to darkest in that order. */
  --danger: #f87171;
  --danger-strong: #ef4444;
  --danger-hover: #dc2626;
  --danger-glow: rgba(239, 68, 68, 0.4);

  /* The landing's corners: 4px on controls, 6px on cards. */
  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -18px rgba(0,0,0,.6);
  --shadow-focus: 0 0 0 3px rgba(161,0,242,.28);
  /* End-of-session overlay only — separate from --shadow-card because it sits
     on the backdrop, not the page, and needs a heavier drop. */
  --shadow-overlay: 0 24px 60px -18px rgba(0, 0, 0, 0.7);

  /* Surfaces that aren't in the --bg/--border ramp: the modal scrim and the
     scrollbar thumb, which are painted straight onto the page rather than
     through an element that already carries a token. */
  --surface-backdrop: rgba(10, 6, 18, 0.78);
  --surface-scrollbar: rgba(255, 255, 255, 0.1);
  --surface-scrollbar-hover: rgba(255, 255, 255, 0.18);

  /* Voice stage — the idle wash behind the orb, and the grey ramp the orb takes
     between turns ("processing"). Not part of the brand/listen palette because
     these are deliberately neutral (nobody is "speaking" in that state). */
  --voice-stage-base: rgba(255, 255, 255, 0.015);
  --voice-idle-a: #b9b9c6;
  --voice-idle-b: #6b6b78;

  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* legacy aliases used across the app */
  --bg: var(--bg-0);
  --panel: var(--bg-2);
  --panel2: var(--bg-3);
  --ink: var(--text-1);
  --muted: var(--text-3);
  --green: var(--success);
  --amber: var(--warning);
  --red: var(--error);
  --line: var(--border-1);
}

/* ═══ LIGHT THEME ═══
   Token overrides only — geometry/typography inherit from the dark :root above.
   Every colour token carries a value here, accents included: an accent is tuned
   to the ground it is painted on, so the same hex cannot serve both themes (the
   brand mark's own purple is the documented exception, next to its definition).
   Toggled via `document.documentElement.dataset.theme`; see the inline head script in index.html for how that gets set before first
   paint, and app.js for the click handler. The landing page is dark only, so
   these come from its light sections instead: the #F2F0F5 ground, #0A0612 ink,
   and neutrals keeping the same purple bias as the dark ones. */
:root[data-theme="light"] {
  color-scheme: light;

  --brand: #a100f2;
  --brand-strong: #8a00d4;
  --brand-hover: #7a00bd;
  --brand-soft: rgba(161, 0, 242, 0.11);
  --brand-softer: rgba(161, 0, 242, 0.05);
  --brand-glow: rgba(161, 0, 242, 0.18);
  /* Brand-coloured text: a step deeper than the fill (7:1 on white). */
  --accent: #8a00d4;

  /* Accents for the light ground. The orb and the mark's halo are large
     decorative fills, so they follow the tonal rule mature systems use: a light
     scheme fills with a lighter, lower-chroma tone and reserves the deep tone for
     text. The dark theme's #a100f2 measures 5.5:1 on white — text weight under a
     150px disc, which is what made the orb sit ON the card instead of in it;
     #b56cf7 lands at 3.26:1 on white. The green sits in the same pastel register
     as the purple (a soft disc with a lit centre, held by its rings and glow) —
     a green deep enough for 3:1 on white reads as a heavy ball next to it, and
     the state is also carried by the status line and the caption under the orb. */
  --auria-purple: #b56cf7;
  --auria-purple-lit: #d69bff;
  --auria-listen: #34c896;
  --auria-listen-lit: #8de8c9;
  --brand-mark-glow: rgba(161, 0, 242, 0.28);
  /* White on the violet: 5.5:1 resting, 7:1 on the deeper hover. */
  --btn-fill-a: #a100f2;
  --btn-fill-b: #a100f2;
  --btn-fill-hover-a: #8a00d4;
  --btn-fill-hover-b: #8a00d4;
  --on-brand: #ffffff;

  --bg-0: #ebe8f0;
  --bg-1: #f7f6fa;
  --bg-2: #ffffff;
  --bg-3: #eeebf3;
  --bg-4: #e3dfea;

  --border-1: rgba(10, 6, 18, 0.09);
  --border-2: rgba(10, 6, 18, 0.13);
  --border-3: rgba(10, 6, 18, 0.2);
  --border-brand: rgba(161, 0, 242, 0.4);

  --text-0: #0a0612;
  --text-1: #1e1830;
  --text-2: #4a4360;
  --text-3: #635c78;
  --text-4: #9a93ad;

  --success: #059669;
  --success-bg: rgba(5, 150, 105, 0.10);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.12);
  --error: #dc2626;
  --error-bg: rgba(220, 38, 38, 0.10);
  /* Lighter and less saturated than the dark ladder, and the glow roughly halved:
     on white the shadow is what makes the button read as heavy, not the fill. The
     resting gradient's darker stop holds white at 4.65:1 (AA for the label). */
  --danger: #f58080;
  --danger-strong: #ec5a5a;
  --danger-hover: #d93636;
  --danger-glow: rgba(217, 54, 54, 0.22);

  --shadow-card: 0 1px 2px rgba(10, 6, 18, 0.06), 0 12px 30px -18px rgba(10, 6, 18, 0.22);
  --shadow-focus: 0 0 0 3px rgba(161, 0, 242, 0.2);
  --shadow-overlay: 0 24px 60px -20px rgba(24, 12, 40, 0.18);

  --surface-backdrop: rgba(20, 12, 36, 0.35);
  --surface-scrollbar: rgba(10, 6, 18, 0.18);
  --surface-scrollbar-hover: rgba(10, 6, 18, 0.3);

  /* Both greys darkened well past a literal ramp of --text-2/--text-3: the orb
     is a filled disc on a near-white stage, not text, so it needs much more
     weight than a text colour would to still read as a shape rather than
     fade into the card. */
  --voice-stage-base: rgba(161, 0, 242, 0.03);
  --voice-idle-a: #9a9aa6;
  --voice-idle-b: #55555f;
}
* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
/* The page is an app shell: header on top, the panes fill the rest, and only the
   inner lists scroll. `dvh` follows the phone's collapsing browser bars; `vh` is
   the fallback for browsers without it. */
body {
  margin: 0; font-family: var(--font-sans);
  background: var(--bg-0); color: var(--text-1);
  height: 100vh; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; font-size: 13.5px;
  -webkit-tap-highlight-color: transparent;
}
button, select, input { font: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- lucide icons --- */
.licon { display: inline-block; vertical-align: -0.15em; flex: none; }
.spin { transform-box: fill-box; transform-origin: center; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- header --- */
.topbar {
  position: relative; z-index: 30; flex: none;
  padding: 0 20px; padding-top: env(safe-area-inset-top);
  height: calc(56px + env(safe-area-inset-top)); border-bottom: 1px solid var(--border-1);
  display: flex; align-items: center; gap: 12px; background: var(--bg-1);
}
.header-actions { display: flex; align-items: center; gap: 8px; }
/* Square icon buttons: the theme toggle and, on a phone, the menu and back. Every
   control in the bar is 32px tall, the demo links included. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: transparent; color: var(--text-2);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.icon-btn:hover { border-color: var(--brand); color: var(--text-0); background: var(--brand-soft); }
/* The brand gives way before anything overlaps it: it shrinks and clips, and the
   timer beside it never does. */
.brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.brand h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* The Auria mark. Square, not rounded, and unboxed: the shape IS the logo, so
   wrapping it in a gradient tile would be a second mark around the real one. */
.brand-mark {
  width: 22px; height: 22px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--auria-mark);
  filter: drop-shadow(0 0 10px var(--brand-mark-glow));
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
header h1 { font-family: var(--font-display); font-size: 16px; margin: 0; font-weight: 600; letter-spacing: -.03em; color: var(--text-0); }
/* The landing logo's sub-label: mono caps after a hairline. */
.brand-sub {
  font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border-2);
  vertical-align: 2px;
}

/* Links to Auria's site and to the alarm demo. Same 32px height and border
   recipe as the icon buttons beside them. */
.demo-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.demo-nav__link {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-2);
  font-size: 12.5px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.demo-nav__link:hover { border-color: var(--brand); color: var(--text-0); background: var(--brand-soft); }
/* Between a phone and a wide screen the header's links need the room. */
@media (min-width: 761px) and (max-width: 900px) {
  .brand-sub { display: none; }
}
/* A narrow phone with the timer on has room for the brand or its sub-label. */
@media (max-width: 420px) {
  body.timer-on .brand-sub { display: none; }
}

/* Section labels: the landing's mono kicker. */
h2 { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin: 0 0 12px; font-weight: 500; }

/* --- two-pane layout: side (panel + capsule) | main (intro or conversation) --- */
.two-pane {
  display: grid; grid-template-columns: 360px 1fr; grid-template-rows: 1fr auto;
  grid-template-areas: "side main" "capsule main"; flex: 1; min-height: 0;
}
.pane { padding: 16px; min-height: 0; }
.pane-side { grid-area: side; border-right: 1px solid var(--border-1); overflow-y: auto; background: var(--bg-1); }
.pane-main { grid-area: main; overflow: hidden; display: flex; background: var(--bg-0); }
.pane-main > [hidden] { display: none; }
.side-panel, #settings-panel { display: flex; flex-direction: column; gap: 18px; }
#settings-panel { gap: 26px; }
.side-panel[hidden] { display: none; }

/* The capsule switching the side pane: icon above the name, the active tab
   filled. At the foot of the side column on a wide screen, of the screen on a
   phone. */
.capsule-dock {
  grid-area: capsule; padding: 10px 16px 14px;
  background: var(--bg-1); border-right: 1px solid var(--border-1);
}
/* Same recipe as the theme choice under Configurações (`.segmented`). */
.capsule {
  display: flex; gap: 4px; padding: 3px;
  border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--bg-2);
}
.capsule__tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 500; color: var(--text-2);
  transition: background .15s ease, color .15s ease;
}
.capsule__tab:hover { color: var(--text-0); }
.capsule__tab[aria-selected="true"] { background: var(--brand-soft); color: var(--text-0); }

/* --- intro: the main pane's step-by-step before the first conversation --- */
/* The intro scrolls as a whole pane (scrollbar at the window's edge); only its
   content is held to a readable width. */
.intro { width: 100%; padding: 28px 24px 32px; overflow-y: auto; }
.intro > .picker { max-width: 600px; margin: 0 auto; }
.intro__head { display: flex; flex-direction: column; gap: 6px; }
.intro__title {
  font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.03em;
  text-transform: none; color: var(--text-0); margin: 0; text-wrap: balance;
}
.intro__lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); max-width: 60ch; }
.intro__foot { margin: 0; font-size: 12.5px; color: var(--text-3); }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}

/* --- settings panel --- */
.settings-section { display: flex; flex-direction: column; gap: 8px; }
/* Both side panels are titled like the intro's steps (`.picker__label`),
   without the number. */
.settings-section h2,
.list-title {
  margin: 0 0 2px; font-family: var(--font-display); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text-0);
}
.settings-help { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.settings-label { font-size: 12px; font-weight: 500; color: var(--text-2); margin-top: 4px; }
.segmented { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border-2); border-radius: var(--radius-md); background: var(--bg-2); }
.theme-opt {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
}
.theme-opt.selected { background: var(--brand-soft); color: var(--text-0); }
.settings-links { display: flex; flex-direction: column; gap: 8px; }
.settings-links .demo-nav__link { justify-content: flex-start; gap: 8px; height: 36px; }

/* --- shared active/inactive status --- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex: none; }
.status.active { color: var(--success); }
.status.active::before { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status.inactive { color: var(--text-3); }

/* --- flow picker --- */
.picker { display: flex; flex-direction: column; gap: 16px; }
.picker__step { display: flex; flex-direction: column; gap: 8px; }
.picker__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--text-0);
}
/* The landing's flow-step numbers: mono, brand-coloured, no badge — so the
   setup steps never read like the call's own progress dots in the strip. */
.picker__num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--accent); flex: none; }
.picker__note {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 10px;
  border-radius: var(--radius-md); font-size: 12.5px;
  color: var(--warning); background: var(--warning-bg);
}
/* A dropped socket, shown in the bar itself: on a phone the status badges live
   in the closed menu sheet. */
.conn-alert {
  flex: none; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  color: var(--warning); background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
}
.conn-alert[hidden] { display: none; }
.picker__hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.picker__hint em { font-style: normal; color: var(--text-1); }
.flow-options { display: flex; flex-direction: column; gap: 8px; }
.flow-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 12px; border-radius: var(--radius-lg); cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border-2); color: var(--text-2);
  transition: border-color .15s, background .15s;
}
.flow-opt:hover { border-color: var(--border-3); }
.flow-opt.selected { border-color: var(--brand); background: var(--brand-softer); box-shadow: 0 0 0 1px var(--brand) inset; }
.flow-opt__icon {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--text-2);
}
.flow-opt.selected .flow-opt__icon { background: var(--brand-soft); color: var(--accent); }
.flow-opt__text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.45; }
.flow-opt__text strong { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-0); }
.flow-opt__check {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-3); color: transparent;
}
.flow-opt.selected .flow-opt__check { background: var(--brand); border-color: var(--brand); color: var(--on-gradient); }
/* A style card's example lines, under its description. */
.flow-opt__eg { color: var(--text-3); font-style: italic; }

/* --- conversation list --- */
.list-title { margin: 0 0 6px; }
.acct-convs { display: flex; flex-direction: column; gap: 2px; }
.conv-entry {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; width: 100%; min-height: 52px; text-align: left;
  border-radius: var(--radius-md); cursor: pointer; font-size: 13.5px; border: 1px solid transparent; color: var(--text-2);
  background: transparent; transition: background .12s, border-color .12s;
}
.conv-entry .entry-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.conv-entry .entry-sub { font-size: 11.5px; color: var(--text-3); }
.conv-entry.ringing { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: var(--success-bg); }
.conv-entry.ringing .entry-sub,
.conv-entry.in-call .entry-sub { color: var(--success); font-weight: 600; }
.conv-entry.ringing .entry-icon { color: var(--success); animation: ring-wiggle 1.2s ease-in-out infinite; }
@keyframes ring-wiggle { 0%, 60%, 100% { transform: rotate(0); } 10%, 30%, 50% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
.conv-entry:hover { background: var(--bg-2); color: var(--text-1); }
.conv-entry.selected { background: var(--bg-2); border-color: var(--border-brand); color: var(--text-0); }
.conv-entry .entry-icon { color: var(--text-3); flex: none; display: inline-flex; }
.conv-entry.selected .entry-icon { color: var(--accent); }
.conv-entry .entry-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.conv-entry .unread { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; visibility: hidden; box-shadow: 0 0 6px var(--brand-glow); }
.conv-entry .unread.on { visibility: visible; }

/* --- conversation pane --- */
.conversation { display: flex; flex-direction: column; width: 100%; max-width: 900px; margin: 0 auto; height: 100%; min-height: 0; }
.conv-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--border-1);
}
.back-btn { display: none; }
.conv-title-wrap { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.conv-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text-0); display: flex; align-items: center; gap: 8px; min-width: 0; }
.conv-title__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-title .entry-icon { color: var(--accent); display: inline-flex; }
.conv-sub { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-header > .status { flex: none; }
.conv-stream { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 8px 0; }
/* Children never shrink: a card with `overflow: hidden` would otherwise collapse
   to nothing inside this scrolling column. */
.conv-stream > * { flex-shrink: 0; }
.conv-controls { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.conv-controls:empty { display: none; }

/* --- flow progress strip --- */
#flow-strip:empty { display: none; }
.strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px; border-radius: var(--radius-md);
  background: var(--bg-1); border: 1px solid var(--border-1);
}
.strip__flow { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.strip__steps { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; flex: 1; min-width: 0; }
.strip__step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); min-width: 0; }
.strip__step + .strip__step::before { content: ""; width: 14px; height: 1px; background: var(--border-3); flex: none; }
.strip__dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 600; border: 1px solid var(--border-3); color: var(--text-3);
}
.strip__step.current { color: var(--text-0); font-weight: 600; }
.strip__step.current .strip__dot { border-color: var(--brand); background: var(--brand); color: var(--on-gradient); box-shadow: 0 0 0 3px var(--brand-soft); }
.strip__step.done .strip__dot { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.strip__step.done { color: var(--text-2); }
.strip__end { font-size: 12px; font-weight: 600; color: var(--success); white-space: nowrap; }

/* --- empty-state and dock notes --- */
.empty-hint {
  margin: auto 0; align-self: center; max-width: 440px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px; color: var(--text-2); font-size: 13.5px; line-height: 1.55;
}
.empty-hint > .licon { color: var(--accent); }
.empty-hint p { margin: 0; }
.empty-hint strong { color: var(--text-0); }
.empty-hint__flow { font-size: 12.5px; color: var(--text-3); }
.busy-note { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 4px 2px; }
.dock-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.dock-note strong { color: var(--text-1); }
.call-actions { display: flex; gap: 8px; justify-content: flex-end; }

.msg { padding: 9px 12px; border-radius: var(--radius-md); font-size: 13.5px; max-width: 85%; line-height: 1.45; overflow-wrap: anywhere; }
.msg.agent { background: var(--bg-2); border: 1px solid var(--border-1); align-self: flex-start; }
.msg.human { background: var(--brand-soft); border: 1px solid var(--border-brand); align-self: flex-end; color: var(--text-0); }
.msg .who { font-size: 10px; color: var(--text-3); margin-bottom: 3px; display: flex; align-items: center; letter-spacing: .02em; text-transform: uppercase; font-weight: 600; }
.msg.system { align-self: center; max-width: 90%; text-align: center; color: var(--text-2); font-size: 12px; padding: 5px 12px; border: 1px solid var(--border-1); border-radius: 999px; background: var(--bg-2); display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.msg.decision { align-self: center; max-width: 95%; text-align: center; font-weight: 600; font-size: 13px; border: 1px solid var(--border-brand); background: var(--brand-softer); color: var(--text-0); border-radius: var(--radius-md); padding: 9px 12px; display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.msg .via-voice { margin-left: 5px; color: var(--accent); display: inline-flex; vertical-align: middle; }
.msg .msg-ic { flex: none; display: inline-flex; color: var(--text-3); }
.msg.decision .msg-ic { color: var(--accent); }
/* The record the central receives, in the CENTRAL flow. */
.msg.handoff {
  align-self: stretch; max-width: 520px; margin: 4px auto; width: 100%;
  border: 1px solid var(--border-brand); background: var(--bg-2); border-radius: var(--radius-lg);
  padding: 0; overflow: hidden; box-shadow: var(--shadow-card);
}
.handoff__head {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text-0);
  background: var(--brand-softer); border-bottom: 1px solid var(--border-1);
}
.handoff__head .licon { color: var(--accent); }
.handoff__rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 12px 14px; }
.handoff__rows dt { color: var(--text-3); font-size: 12px; }
.handoff__rows dd { margin: 0; color: var(--text-0); font-weight: 500; }
.handoff__foot { display: flex; align-items: center; gap: 6px; padding: 9px 14px; font-size: 12px; color: var(--text-3); border-top: 1px solid var(--border-1); }

/* --- call card --- */
.call-card { border: 1px solid var(--border-brand); background: var(--brand-soft); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-card); }
.call-card .call-q { font-size: 13.5px; margin-bottom: 12px; color: var(--text-0); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.call-card .call-q .licon { color: var(--success); }
.call-card .call-btns { display: flex; gap: 8px; }

/* --- voice panel --- */
/* Neutral chrome on purpose: green now means "you are speaking" on the orb, so a
   permanently green card would compete with the one thing carrying that signal. */
.voice-panel { border: 1px solid var(--border-2); background: var(--bg-2); border-radius: var(--radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.voice-panel .voice-live { font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-0); }
.voice-panel .mic-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: mic-pulse 1.1s ease-in-out infinite; }
@keyframes mic-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.voice-panel .voice-status { font-size: 13px; font-weight: 600; padding: 1px 0; display: flex; align-items: center; justify-content: center; gap: 7px; }
.voice-panel .voice-status.wait { color: var(--text-2); }
.voice-panel .voice-status.hot { color: var(--error); }
.voice-panel .voice-status.speak { color: var(--accent); }
.voice-panel .voice-status.proc { color: var(--warning); }
/* The card is split in equal halves: what the call IS on the left, what it is
   DOING on the right. ONE orb carries "who is talking" by changing colour — purple
   for Auria, green while it listens to you — the way the alarm demo's does. Two
   orbs made the viewer compare them instead of just looking.

   `--lvl` is written per frame from JS in 0..1 and every level-driven visual
   derives from it, so the per-frame work from JS is a single custom-property write.
   Be aware what that one write costs: besides the compositor-only `transform`, it
   feeds two box-shadows on the core, an outer and an inset shadow on each of the
   three rings, and the stage's own background gradient — all of which repaint. It
   is a ~150px disc inside a half-pane, so the cost is acceptable, but this is paint,
   not composite. The colour drift is separate and deliberately slow (19s), because
   that one repaints on its own schedule rather than per frame. */
/* Registered so they INTERPOLATE. A plain custom property inside a gradient makes
   `transition: background` a no-op — the browser cannot interpolate two gradient
   images, so the colour would snap on every turn change. Declaring the type lets
   the transition run on the values instead, which is also what animates --spin.
   `initial-value` takes a literal — var() is not allowed here — so these two are
   dead fallbacks carrying the dark palette. Nothing paints from them: .voice-stage
   assigns both properties from tokens before the orb is ever drawn. */
@property --orb-a { syntax: "<color>"; inherits: true; initial-value: #c44cff; }
@property --orb-b { syntax: "<color>"; inherits: true; initial-value: #a100f2; }
/* One linear phase drives the drift. CSS has no clock to feed sin(), so an angle
   is animated 0->360deg and every offset is a sine of it at a different
   coefficient — which is what keeps the motion from looking like one loop. */
@property --t     { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Equal halves: the card is a 1fr 1fr grid, so the orb is centred in its own half
   rather than pushed against the right edge by a content-sized column. */
.voice-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; }
/* Centred both ways, to mirror the orb sitting in the middle of its own half. */
.voice-info {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center; align-items: center; text-align: center;
  padding: 14px 16px; min-width: 0;
}
.voice-stage {
  --lvl: 0;
  --orb-a: var(--auria-purple-lit);
  --orb-b: var(--auria-purple);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; min-width: 0; min-height: 236px;
  border-left: 1px solid var(--border-1);
  /* The half itself blooms with the voice. This carries the WIDE part of the glow,
     because a background gradient is painted inside the box and so cannot be cut by
     the card's `overflow: hidden` however loud the caller gets. */
  background:
    radial-gradient(64% 62% at 50% 46%,
      color-mix(in srgb, var(--orb-a) calc(10% + var(--lvl) * 26%), transparent) 0%,
      transparent 74%),
    var(--voice-stage-base);
  transition: --orb-a .5s ease, --orb-b .5s ease;
}
/* Every state's pair comes from tokens, so all three follow the theme: the disc
   has to hold its shape against the stage it is painted on, and that ground flips
   from near-black to near-white. */
.voice-stage.listening  { --orb-a: var(--auria-listen-lit); --orb-b: var(--auria-listen); }
.voice-stage.processing { --orb-a: var(--voice-idle-a); --orb-b: var(--voice-idle-b); }

.voice-orb {
  position: relative; width: min(150px, 100%); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
/* Flat by design: a soft radial wash rather than a glossy sphere — no specular
   highlight, no inset shading. Depth comes only from the outer glow, which tracks
   the level.

   The wash drifts instead of spinning. Its centre and radius are each a sine of
   the same phase at a different coefficient (1, 1.37, 0.61) with offset phases,
   so the three never realign into an obvious cycle — the movement reads as
   breathing rather than as an animation looping. `ellipse` rather than `circle`
   because only ellipse takes percentage radii, and the orb's size is relative. */
.voice-orb__core {
  --cx: calc(50% + sin(var(--t)) * 8%);
  --cy: calc(42% + sin(calc(var(--t) * 1.37 + 55deg)) * 7%);
  --r: calc(64% + sin(calc(var(--t) * 0.61 + 20deg)) * 9%);
  position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(
    ellipse var(--r) var(--r) at var(--cx) var(--cy),
    color-mix(in srgb, var(--orb-a) 82%, white) 0%,
    var(--orb-a) 45%,
    var(--orb-b) 100%
  );
  /* Two tight halos hugging the disc, bright rather than wide. The wide reach is
     the stage's bloom instead, because `transform: scale` scales a box-shadow with
     the element — so a big blur here would grow past the half at high level and the
     card's `overflow: hidden` would cut it into a visible arc. */
  box-shadow:
    0 0 calc(22px + var(--lvl) * 18px) color-mix(in srgb, var(--orb-a) calc(48% + var(--lvl) * 40%), transparent),
    0 0 calc(8px + var(--lvl) * 12px) color-mix(in srgb, var(--orb-a) calc(32% + var(--lvl) * 45%), transparent);
  transform: scale(calc(1 + var(--lvl) * .16));
  animation: orb-drift 19s linear infinite;
  transition: transform .09s ease-out;
  will-change: transform;
}
@keyframes orb-drift { to { --t: 360deg; } }

/* Concentric rings, lit rather than hairline: each carries its own soft halo so it
   reads as light. They ripple outward with the level at slightly different factors
   (the inner one moves most), which gives the level a second, quieter reading
   besides the disc's own scale. No rotation — the radial drift is the motion. */
.voice-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  border: 1.5px solid color-mix(in srgb, var(--orb-a) 62%, transparent);
  box-shadow:
    0 0 calc(7px + var(--lvl) * 18px) color-mix(in srgb, var(--orb-a) calc(24% + var(--lvl) * 40%), transparent),
    inset 0 0 calc(6px + var(--lvl) * 14px) color-mix(in srgb, var(--orb-a) calc(14% + var(--lvl) * 28%), transparent);
  transition: transform .09s ease-out;
  will-change: transform;
}
.voice-ring.r1 { inset: 4%; opacity: calc(.58 + var(--lvl) * .42); transform: scale(calc(1 + var(--lvl) * .07)); }
.voice-ring.r2 { inset: 0;  opacity: calc(.34 + var(--lvl) * .56); transform: scale(calc(1 + var(--lvl) * .04)); }
.voice-ring.r3 { inset: 9%; opacity: calc(.48 + var(--lvl) * .52); transform: scale(calc(1 + var(--lvl) * .10)); }

.voice-stage__who {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  font-weight: 600; color: var(--text-2);
}

/* Between turns the orb breathes, so the panel never looks frozen. */
.voice-stage.processing .voice-orb__core { animation: orb-drift 19s linear infinite, orb-breathe 3.4s ease-in-out infinite; }
@keyframes orb-breathe {
  0%, 100% { opacity: .62; }
  50%      { opacity: .88; }
}

/* Narrow pane: stack, and the divider becomes horizontal. */
@media (max-width: 760px) {
  .voice-panel { grid-template-columns: 1fr; }
  .voice-stage { border-left: 0; border-top: 1px solid var(--border-1); padding: 14px; min-height: 0; }
  .voice-orb { width: min(120px, 60%); }
}
/* A theme change lands in one frame (`setTheme`): hover transitions would
   otherwise fade buttons and cards into it after the rest of the page. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  /* Covers the rings too: they carry level-driven transform and opacity, so leaving
     them out left three of them pulsing with the caller's voice for someone who
     asked for no motion. */
  .voice-orb__core,
  .voice-ring { animation: none !important; transition: none !important; transform: none !important; }
  .voice-stage { transition: none !important; }
}
/* Wraps because the left half is now 50% of the pane, not most of it. */
.voice-panel .voice-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* --- buttons (dashboard style) --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: var(--radius-md); padding: 9px 15px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--on-gradient); white-space: nowrap;
  background: linear-gradient(135deg, var(--btn-fill-a), var(--btn-fill-b));
  box-shadow: none;
  transition: transform .12s, box-shadow .2s, background .12s, border-color .12s;
}
/* The landing's primary hover: a lighter violet and a wide soft glow. */
.btn:hover { background: linear-gradient(135deg, var(--btn-fill-hover-a), var(--btn-fill-hover-b)); box-shadow: 0 0 32px var(--brand-glow); }
.btn:active { transform: translateY(0); }
.btn.secondary { background: var(--bg-3); color: var(--text-1); border: 1px solid var(--border-2); box-shadow: none; }
.btn.secondary:hover { background: var(--bg-4); border-color: var(--border-3); color: var(--text-0); }
.btn.danger { background: linear-gradient(135deg, var(--danger-strong), var(--danger-hover)); }
.btn.danger:hover { background: linear-gradient(135deg, var(--danger), var(--danger-strong)); box-shadow: 0 0 28px var(--danger-glow); }
.call-btns .btn { flex: 1; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-lg { min-height: 48px; padding: 12px 18px; font-size: 14.5px; border-radius: var(--radius-lg); }
.btn-sm { min-height: 36px; padding: 7px 13px; font-size: 13px; }
.btn-block { width: 100%; }

.input-row { display: flex; gap: 8px; margin: 0; }
.input-row input {
  flex: 1; min-width: 0; min-height: 44px; background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text-1);
  border-radius: var(--radius-lg); padding: 10px 14px; font-size: 14px; font-family: var(--font-sans);
}
.send-btn { width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-lg); flex: none; }
.input-row input:focus { outline: none; border-color: var(--border-brand); box-shadow: var(--shadow-focus); }
.input-row input::placeholder { color: var(--text-3); }

/* --- incoming-call banner ---
   In the page's flow, between the header and the panes, so it pushes the
   conversation down instead of covering its header. */
.incoming {
  flex: none; margin: 8px 12px 0; align-self: center; width: min(640px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px;
  border-radius: var(--radius-lg); background: var(--success-bg);
  border: 1px solid color-mix(in srgb, var(--success) 50%, transparent);
  animation: incoming-in .22s ease-out;
}
.incoming[hidden] { display: none; }
.incoming__icon { color: var(--success); display: inline-flex; animation: ring-wiggle 1.2s ease-in-out infinite; }
.incoming__text { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--text-0); line-height: 1.35; }
#incoming-slot:empty { display: none; }
#incoming-slot .incoming { margin: 0 0 10px; width: 100%; }
@keyframes incoming-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- scrollbars --- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--surface-scrollbar); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface-scrollbar-hover); }

/* --- session countdown: plain text in the bar, mono caps label --- */
.timer { margin-left: auto; display: inline-flex; align-items: baseline; gap: 8px; flex: none; white-space: nowrap; }
.timer[hidden] { display: none; }
.timer__label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.timer__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 13px; color: var(--text-1); font-weight: 500;
}
.timer.warn   .timer__value { color: var(--warning); }
.timer.urgent .timer__value { color: var(--error); }

/* --- end-of-session overlay --- */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: var(--surface-backdrop); backdrop-filter: blur(6px); padding: 24px;
}
.overlay[hidden] { display: none; }
.overlay-card {
  max-width: 460px; width: 100%; text-align: center; padding: 32px;
  background: var(--bg-1); border: 1px solid var(--border-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
}
.overlay-card h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 19px; text-transform: none; letter-spacing: -.02em;
  color: var(--text-0); margin-bottom: 10px;
}
.overlay-card p { color: var(--text-2); font-size: 13.5px; line-height: 1.6; margin: 0 0 22px; }
.overlay-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.btn-primary {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 10px 20px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--brand); color: var(--on-brand);
}
.btn-primary:hover { background: var(--btn-fill-hover-a); }
.btn-link { color: var(--text-3); font-size: 12.5px; text-decoration: none; }
.btn-link:hover { color: var(--text-1); text-decoration: underline; }
button.btn-link { background: none; border: 0; padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }

/* ═══ PHONE ═══
   One screen at a time: the main pane (`data-view="main"`: the step-by-step or a
   conversation) or the side pane (`data-view="side"`: the list or the settings),
   with the capsule fixed at the foot except inside a conversation, which has its
   own back button and dock. The header keeps only the brand and, near the end,
   the timer: the links and the theme are under Configurações. Every control is
   at least 44px tall, the input is 16px so iOS does not zoom into it, and the
   bottom dock clears the home indicator. */
@media (max-width: 760px) {
  body { font-size: 14px; }
  .topbar { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); gap: 8px; }
  header h1 { font-size: 16.5px; }
  .header-actions { display: none; }
  .demo-nav__link { height: 44px; font-size: 14px; }
  .theme-opt { min-height: 40px; }

  .two-pane { display: flex; flex-direction: column; }
  .pane { width: 100%; flex: 1; }
  .pane-side { border-right: 0; padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
  body[data-view="main"] .pane-side { display: none; }
  body[data-view="side"] .pane-main { display: none; }
  .pane-main { order: 1; }
  .capsule-dock {
    order: 2; flex: none; border-right: 0; border-top: 1px solid var(--border-1);
    padding: 8px 16px calc(10px + env(safe-area-inset-bottom));
  }
  body[data-view="main"][data-main="chat"] .capsule-dock { display: none; }
  /* On the step-by-step no side panel is open, so no tab reads as current. */
  body[data-view="main"] .capsule__tab[aria-selected="true"] { background: transparent; color: var(--text-3); }
  .capsule__tab { min-height: 48px; font-size: 12px; }
  .intro { padding: 18px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); }

  .pane-main { padding: 0; }
  .conversation { padding: 10px 12px 0; }
  .conv-header { margin: -10px -12px 10px; padding: 8px 12px; background: var(--bg-1); }
  .back-btn { display: inline-flex; width: 44px; height: 44px; border-color: transparent; margin-left: -8px; }
  .strip { padding: 8px 10px; gap: 8px; }
  .strip__flow { width: 100%; }
  .strip__step .strip__label { display: none; }
  .strip__step.current .strip__label { display: inline; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg { max-width: 88%; font-size: 14.5px; }
  .conv-controls {
    margin: 0 -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bg-1); border-top: 1px solid var(--border-1);
  }
  .input-row input { font-size: 16px; }
  .btn-sm { min-height: 44px; }
  .call-actions .btn { flex: 1; }
  /* Orb beside the controls rather than under them, so a live call still leaves
     most of the screen to the transcript. */
  .voice-panel { grid-template-columns: 1fr 112px; }
  .voice-info { padding: 12px; gap: 8px; }
  .voice-panel .voice-btns { flex-direction: column; width: 100%; }
  .voice-panel .voice-btns .btn { width: 100%; }
  .voice-stage { border-top: 0; border-left: 1px solid var(--border-1); padding: 10px 8px; gap: 6px; }
  .voice-orb { width: 84px; }
  .incoming { flex-wrap: wrap; margin: 8px 12px 4px; }
  .incoming .btn { width: 100%; min-height: 44px; }
  .overlay-card { padding: 24px 20px; }
  .btn-primary { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .conv-entry.ringing .entry-icon,
  .incoming__icon,
  .incoming { animation: none !important; }
}