/* Nara, by Nutch. Ported from nutch-platform-5.0/demo-ui (the workbench chrome): a rounded,
   dotted stage that fills the phone, the molten-glass orb, paper cards with glass tells. One brand colour drives the orb, the accent and the glow;
   every tint derives from it (company-brand.ts style) so the scheme can be swapped in one place.
   See DESIGN.md. */
:root {
  /* brand colour: html[data-theme] switches it (orange = Nutch, green and blue = Nara candidates) */
  --brand: #e0703a;
  --brand-hi: color-mix(in srgb, var(--brand) 18%, #ffffff);
  --brand-mid: color-mix(in srgb, var(--brand) 58%, #ffffff);
  --brand-deep: color-mix(in srgb, var(--brand) 62%, #201409);
  --brand-ink: color-mix(in srgb, var(--brand) 78%, #201409);
  --brand-bg: color-mix(in srgb, var(--brand) 12%, #fffdfa);
  --brand-fg: #ffffff;
  /* the orb's body (demo-ui cv-orb-glass, orange verbatim; other themes derive from --brand) */
  --orb-0: #e67438; --orb-42: #d66028; --orb-76: rgba(178, 70, 22, .62); --orb-92: rgba(255, 206, 160, .3);
  --orb-glow: rgba(240, 130, 55, .4); --orb-shade: rgba(112, 38, 8, .4); --orb-light: rgba(255, 222, 190, .42);
  --orb-core-a: rgba(255, 215, 154, .8); --orb-core-a2: rgba(247, 166, 102, .5); --orb-core-b: #ea6a2c; --orb-core-b2: rgba(192, 72, 20, .62);
  --orb-sheen: rgba(255, 236, 206, .5); --orb-sheen2: rgba(255, 186, 126, .3);

  /* Apple-style neutrals (2026-09-25): grey ground, white cards, hairlines; the orb and the dots stay */
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --ink-faint: #98989d;
  --danger: #b3261e;
  --danger-bg: #fdecec;
  --success: #34a853;
  --info: #1a5fd0;
  --info-bg: #e8f0fe;
  --paper: #f5f5f7;
  --card: #ffffff;
  --fill: #e9e9eb;
  --dots: rgba(0, 0, 0, .09);
  --hair: rgba(0, 0, 0, .08);
  --wash: rgba(0, 0, 0, .045);
  --soft: 0 1px 2px rgba(0, 0, 0, .03);
  --inh: inset 0 1px 1px rgba(255, 255, 255, .9);
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --spring: cubic-bezier(.32, .72, 0, 1);
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* transitions.dev motion tokens (transitions-polish/_root.css): match on usage, not on number */
  --duration-stagger: 40ms; --duration-micro: 80ms; --duration-quick: 150ms; --duration-fast: 250ms;
  --duration-medium: 350ms; --duration-slow: 400ms; --duration-very-slow: 500ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: ease-in-out; --ease-out: ease-out; --ease-linear: linear;
  --ease-bounce: cubic-bezier(0.34, 1.36, 0.64, 1); --ease-bounce-strong: cubic-bezier(0.34, 3.85, 0.64, 1);
  --distance-micro: 4px; --distance-small: 6px; --distance-base: 8px; --distance-medium: 12px; --distance-large: 30px;
  --scale-large: 0.96; --scale-medium: 0.97; --scale-small: 0.98; --scale-tiny: 0.99;
  --blur-small: 2px; --blur-medium: 3px; --blur-large: 8px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --inset: 10px;
  --composer-h: 72px;
  color-scheme: light;
}
html[data-theme="green"], html[data-theme="blue"] {
  --orb-0: color-mix(in srgb, var(--brand) 92%, #fff); --orb-42: color-mix(in srgb, var(--brand) 92%, #000); --orb-76: color-mix(in srgb, var(--brand-deep) 62%, transparent); --orb-92: color-mix(in srgb, var(--brand-mid) 30%, transparent);
  --orb-glow: color-mix(in srgb, var(--brand) 40%, transparent); --orb-shade: color-mix(in srgb, var(--brand-deep) 40%, transparent); --orb-light: color-mix(in srgb, var(--brand-hi) 42%, transparent);
  --orb-core-a: var(--brand-hi); --orb-core-a2: color-mix(in srgb, var(--brand-mid) 58%, transparent); --orb-core-b: var(--brand); --orb-core-b2: color-mix(in srgb, var(--brand-deep) 62%, transparent);
  --orb-sheen: color-mix(in srgb, var(--brand-hi) 72%, transparent); --orb-sheen2: color-mix(in srgb, var(--brand-mid) 34%, transparent);
}
html[data-theme="green"] { --brand: #2a7a63; --brand-deep: color-mix(in srgb, var(--brand) 62%, #071a14); --brand-ink: color-mix(in srgb, var(--brand) 84%, #071a14); }
html[data-theme="blue"] { --brand: #2f6fe0; --brand-deep: color-mix(in srgb, var(--brand) 62%, #0a1530); --brand-ink: color-mix(in srgb, var(--brand) 82%, #0a1530); }

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f5f7; --ink-soft: #a1a1a6; --ink-faint: #6e6e73;
    --brand-fg: #12100d; --brand-bg: color-mix(in srgb, var(--brand) 22%, #1f1f22);
    --danger: #ff8a70; --danger-bg: rgba(255, 122, 104, .16); --info: #8ab4ff; --info-bg: rgba(64, 120, 255, .18);
    --paper: #161618; --card: #1f1f22; --fill: #2c2c2f; --dots: rgba(255, 255, 255, .09);
    --hair: rgba(255, 255, 255, .1); --wash: rgba(255, 255, 255, .06);
    --soft: 0 1px 2px rgba(0, 0, 0, .3);
    --inh: inset 0 1px 1px rgba(255, 255, 255, .06);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); font-size: 15px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
  background: var(--paper);
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand-ink); }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
.serif { font-weight: 500; letter-spacing: -.03em; }
.serif-line { font-size: 16.5px; color: var(--ink-soft); font-weight: 400; }
p { margin: 0; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the workbench: rounded dotted stage inset from the viewport ---------- */
.stage {
  position: fixed; inset: 0;
  border-radius: 0; overflow: hidden;
  background:
    radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--paper);
  border: 0;
  box-shadow: 0 0 0 1px var(--hair), 0 30px 60px -30px rgba(0, 0, 0, .35);
}
@media (max-width: 719px) {
  .stage { border: 0; box-shadow: none; }
}
@media (min-width: 720px) {
  /* centred with margins, not a translate: a translated fixed layer left a ghost copy behind when the
     viewport changed size (the desktop app's phone emulation) */
  .stage { inset: 24px 0; margin: 0 auto; width: min(100% - 48px, 560px); border-radius: 26px; }
}
/* the living sky (demo-ui SkyLayer, still): a pale morning gradient at the top of the stage,
   a sun tinted by the brand, three soft clouds. Everything else sits on top of it. */
.sky { display: none; }
.sky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 46% at 50% -6%, color-mix(in srgb, var(--brand-hi) 55%, #fff) 0%, color-mix(in srgb, var(--card) 40%, transparent) 55%, transparent 80%); }
.sky .sun { position: absolute; left: 50%; top: calc(var(--sat) + 92px); width: 190px; height: 190px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, color-mix(in srgb, var(--brand-hi) 80%, #fff) 0%, color-mix(in srgb, var(--brand-mid) 45%, #fff) 45%, color-mix(in srgb, var(--brand) 30%, transparent) 78%, transparent 100%);
  filter: blur(18px); opacity: .9; }
.sky .cloud { position: absolute; height: 20px; border-radius: 999px; background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--card) 70%, var(--paper))); filter: blur(1.6px) drop-shadow(0 10px 16px rgba(110, 100, 80, .07)); opacity: .62; }
.sky .cloud::before, .sky .cloud::after { content: ""; position: absolute; bottom: 4px; border-radius: 50%; background: inherit; }
.sky .cloud::before { left: 18%; width: 34px; height: 34px; } .sky .cloud::after { left: 48%; width: 26px; height: 26px; }
.sky .c1 { left: -10px; top: calc(var(--sat) + 46px); width: 110px; } .sky .c2 { right: -16px; top: calc(var(--sat) + 82px); width: 88px; opacity: .5; } .sky .c3 { left: 58%; top: calc(var(--sat) + 22px); width: 62px; opacity: .4; height: 14px; }
.sky .c3::before { width: 22px; height: 22px; } .sky .c3::after { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) { .sky::before { opacity: .25; } .sky .cloud { opacity: .12; } .sky .sun { opacity: .5; } }
.screen, .welcome { z-index: 1; }
/* screens enter with one quiet rise */
@media (prefers-reduced-motion: no-preference) {
  .screen.enter { animation: page-in var(--duration-fast) var(--ease-smooth-out); }
  .stage[data-dir="back"] .screen.enter { animation-name: page-back; }
}
/* fade only: animating translate on the scrolling screen left a stale compositor copy (the double stacked Chats screen) */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes page-back { from { opacity: 0; } to { opacity: 1; } }

/* every screen scrolls inside the stage; the composer floats over it */
.screen { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(var(--sat) + 14px) 18px calc(var(--sab) + 104px); }
#screen-home { display: flex; flex-direction: column; gap: 12px; }
#screen-home > * { flex: none; }
#screen-home[hidden] { display: none; }
#screen-home > .sec { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 4px 0; }
.stage.in-chat .screen { padding-bottom: calc(var(--composer-h) + var(--sab) + 30px); }

/* ---------- the molten glass orb (demo-ui .cv-orb-glass, colour from --brand) ---------- */
.orb { position: relative; display: block; flex: none; border-radius: 50%; user-select: none; }
.orb .glass {
  position: absolute; inset: 0; border-radius: 50%; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 50% 58%, var(--orb-0) 0%, var(--orb-42) 42%, var(--orb-76) 76%, var(--orb-92) 92%, rgba(255, 255, 255, .42) 100%);
  filter: saturate(1.3) contrast(1.06);
  -webkit-backdrop-filter: blur(7px) saturate(1.35) brightness(1.04); backdrop-filter: blur(7px) saturate(1.35) brightness(1.04);
  box-shadow:
    0 26px 54px -18px rgba(150, 62, 20, .5),
    0 6px 16px -6px rgba(150, 62, 20, .34),
    0 0 26px 5px var(--orb-glow),
    inset 0 0 0 1px rgba(255, 255, 255, .42),
    inset -7px -12px 26px var(--orb-light),
    inset 9px 13px 32px var(--orb-shade);
  transition: box-shadow .35s var(--ease), filter .35s var(--ease);
}
.orb .core { position: absolute; inset: 5%; border-radius: 50%; overflow: hidden; opacity: .8; }
.orb .core::before, .orb .core::after { content: ""; position: absolute; border-radius: 50%; filter: blur(7px); }
.orb .core::before { inset: 4% 20% 34% 2%; background: radial-gradient(circle, var(--orb-core-a) 0%, var(--orb-core-a2) 45%, transparent 72%); }
.orb .core::after { inset: 32% 4% 2% 26%; background: radial-gradient(circle, var(--orb-core-b) 0%, var(--orb-core-b2) 48%, transparent 74%); }
.orb .sheen {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 90%, var(--orb-sheen) 0%, transparent 34%),
    radial-gradient(circle at 78% 76%, var(--orb-sheen2) 0%, transparent 38%),
    linear-gradient(200deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%);
  box-shadow: inset 0 -3px 11px var(--orb-sheen), inset 0 7px 18px var(--orb-shade), inset 0 0 14px rgba(255, 255, 255, .26);
}
.orb .spec { position: absolute; left: 21%; top: 14%; width: 25%; height: 17%; border-radius: 50%; pointer-events: none; rotate: -26deg; filter: blur(.6px);
  background: radial-gradient(ellipse at 44% 40%, #fff 0%, rgba(255, 255, 255, .86) 30%, rgba(255, 255, 255, .28) 58%, rgba(255, 255, 255, 0) 76%); }
.orb .spec2 { position: absolute; right: 16%; bottom: 19%; width: 16%; height: 11%; border-radius: 50%; pointer-events: none; filter: blur(1.2px);
  background: radial-gradient(circle, rgba(255, 244, 228, .8), rgba(255, 244, 228, 0) 70%); }
.orb::before { content: ""; position: absolute; inset: -34%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%);
  transition: opacity .35s var(--ease), scale .35s var(--spring); }
/* Interactive orbs (demo-ui cv-neo-orb): lift on hover, sink on press, the halo swells and the glass
   brightens. A tap also sends one ring out from the rim. */
.orbbtn:hover .orb::before, .fab:hover .orb::before { scale: 1.12; }
.orbbtn:hover .orb .glass, .fab:hover .orb .glass { filter: saturate(1.4) contrast(1.06) brightness(1.04); box-shadow:
    0 30px 60px -18px color-mix(in srgb, var(--brand-deep) 56%, transparent),
    0 6px 16px -6px color-mix(in srgb, var(--brand-deep) 34%, transparent),
    0 0 34px 8px var(--orb-glow),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset -7px -12px 26px color-mix(in srgb, var(--brand-hi) 52%, transparent),
    inset 9px 13px 32px color-mix(in srgb, var(--brand-deep) 46%, transparent); }
.orb .ring { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; border: 2px solid color-mix(in srgb, var(--brand) 70%, white); opacity: 0; }
.orb.tapped .ring { animation: ring .7s var(--ease) both; }
@keyframes ring { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.55; } }
.orb::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -13%; height: 13%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--brand-deep) 35%, transparent), transparent 72%); }
.orb .name { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 500; letter-spacing: .01em; text-shadow: 0 1px 6px color-mix(in srgb, var(--brand-deep) 60%, transparent); }
.orb.xs { width: 22px; height: 22px; } .orb.xs::before, .orb.xs::after { display: none; }
.orb.xs .glass, .orb.sm .glass { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 4px 10px -4px rgba(150, 62, 20, .5), 0 0 8px 1px var(--orb-glow), inset 0 0 0 1px rgba(255, 255, 255, .4), inset -2px -3px 6px var(--orb-light), inset 2px 3px 8px var(--orb-shade); }
.orb.xs .core::before, .orb.xs .core::after, .orb.sm .core::before, .orb.sm .core::after { filter: blur(2.5px); }
.orb.sm { width: 40px; height: 40px; }
.orb.md { width: 48px; height: 48px; }
.orb.lg { width: 88px; height: 88px; }
/* ---------- the orb is alive (bot-avatars behaviours on the Nutch orb, no face) ----------
   idle: breathes and floats, looks from corner to corner (the highlight glides), and now and then
   hops with a full turn. working: hops in rhythm, spins every third hop, glows brighter, the cores
   race. listening: leans in, breathes faster. waiting: nudges you every few seconds. done: one
   cheer (two quick bounces and a flash). error: a shake. Only the big orb, the floating orb and a
   busy orb move; reduced motion turns it all off. */
@media (prefers-reduced-motion: no-preference) {
  .orb.lg .glass, .fab .orb .glass { animation: breathe 4.6s ease-in-out infinite alternate, float 5.5s ease-in-out .5s infinite alternate; }
  .orb.lg .name { animation: float 5.5s ease-in-out .5s infinite alternate; }
  .orb.lg .spec, .fab .orb .spec { animation: look 9s ease-in-out infinite; }
  .orb.lg .core, .fab .orb .core { animation: hop-turn 11s cubic-bezier(.34, 1.4, .4, 1) infinite; }
  .orb.lg .sheen, .orb.working .sheen { animation: shine 3.4s ease-in-out infinite alternate; }
  .orb.lg .core::before, .orb.working .core::before { animation: core-a 11s ease-in-out infinite alternate; }
  .orb.lg .core::after, .orb.working .core::after { animation: core-b 14s ease-in-out infinite alternate; }
  /* busy */
  .orb.working .glass { animation: hop 1.1s cubic-bezier(.36, 0, .2, 1) infinite, spin 3.3s cubic-bezier(.6, 0, .3, 1) infinite; filter: saturate(1.45) contrast(1.06) brightness(1.04); }
  .orb.working .core { animation: spin 3.3s cubic-bezier(.6, 0, .3, 1) infinite; }
  .orb.working .core::before { animation-duration: 4s; } .orb.working .core::after { animation-duration: 5s; }
  .orb.working .sheen { animation-duration: 1.1s; }
  .orb.working::after { animation: hop-shadow 1.1s cubic-bezier(.36, 0, .2, 1) infinite; }
  .orb.working::before { opacity: 1; scale: 1.15; }
  /* listening (the input has focus): lean in, breathe faster */
  .stage.listening .orb.lg .glass, .stage.listening .fab .orb .glass { animation: lean 2.2s ease-in-out infinite alternate, breathe 2.2s ease-in-out infinite alternate; }
  /* waiting on you: a nudge every few seconds */
  .orb.waiting .glass { animation: nudge 5s ease-in-out infinite; }
  /* one-shot states */
  .orb.done .glass { animation: cheer .9s cubic-bezier(.34, 1.56, .64, 1) 1; }
  .orb.done .core { animation: spin .9s cubic-bezier(.6, 0, .3, 1) 1; }
  .orb.error .glass { animation: shake .55s ease-in-out 1; }
}
@keyframes breathe { from { scale: .985; } to { scale: 1.025; } }
@keyframes shine { from { opacity: .75; } to { opacity: 1; } }
@keyframes float { from { translate: 0 -5px; } to { translate: 0 6px; } }
@keyframes look { 0%, 18% { translate: 0 0; } 24%, 46% { translate: 34% 4%; } 52%, 72% { translate: 30% 46%; } 78%, 94% { translate: -6% 40%; } 100% { translate: 0 0; } }
@keyframes hop-turn { 0%, 86% { translate: 0 0; rotate: 0deg; } 89% { translate: 0 -9%; } 96% { translate: 0 2%; rotate: 360deg; } 100% { translate: 0 0; rotate: 360deg; } }
@keyframes hop { 0%, 100% { translate: 0 0; scale: 1.05 .95; } 35% { translate: 0 -13%; scale: .96 1.05; } 70% { translate: 0 -3%; scale: 1 1; } }
@keyframes hop-shadow { 0%, 100% { scale: 1.05 1; opacity: 1; } 35% { scale: .82 .9; opacity: .55; } }
@keyframes spin { 0%, 62% { rotate: 0deg; } 100% { rotate: 360deg; } }
@keyframes lean { from { rotate: -5deg; translate: -2px 0; } to { rotate: 4deg; translate: 2px 0; } }
@keyframes nudge { 0%, 84%, 100% { rotate: 0deg; } 88% { rotate: -7deg; } 92% { rotate: 6deg; } 96% { rotate: -3deg; } }
@keyframes cheer { 0% { translate: 0 0; } 25% { translate: 0 -12%; scale: .96 1.06; filter: brightness(1.18); } 45% { translate: 0 0; scale: 1.05 .95; } 65% { translate: 0 -7%; scale: 1 1; filter: brightness(1.1); } 100% { translate: 0 0; scale: 1; filter: brightness(1); } }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
/* what she is doing, under the greeting on Home */
.orb-status { min-height: 20px; font-size: 14px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; }
.orb-status:empty { display: none; }
@keyframes core-b { 0% { translate: 0 0; scale: 1; } 50% { translate: -7% -8%; scale: 1.12; } 100% { translate: 6% -4%; scale: .96; } }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  padding: 8px 18px; border-radius: 999px; border: 0; background: var(--ink); color: var(--card);
  font-weight: 500; font-size: 14px; text-decoration: none; transition: transform var(--duration-medium) var(--ease-bounce-strong), opacity .2s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.accent { background: var(--brand); color: var(--brand-fg); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 60%, transparent); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair), var(--inh); }
.btn.small { min-height: 32px; padding: 5px 14px; font-size: 13.5px; }
.btn.wide { width: 100%; }
.link { border: 0; background: none; padding: 6px 2px; color: var(--ink-soft); font-size: 14px; border-radius: 8px; }
.link:hover { color: var(--ink); text-decoration: underline; }
.link.danger { color: var(--danger); }
.field { width: 100%; border: 0; background: rgba(0, 0, 0, .05); border-radius: 999px; padding: 13px 18px; font-size: 16px; outline: none; transition: box-shadow .35s var(--spring); }
.field:focus { background: rgba(0, 0, 0, .07); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 45%, transparent); }
@media (prefers-color-scheme: dark) { .field { background: rgba(255, 255, 255, .08); } .field:focus { background: rgba(255, 255, 255, .11); } }
.field::placeholder { color: var(--ink-faint); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 3px 8px; border-radius: 6px; background: var(--wash); color: var(--ink-soft); white-space: nowrap; }
.chip.on { background: color-mix(in srgb, var(--brand) 10%, transparent); color: var(--brand-ink); }
.chip.good { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.chip.bad { background: var(--danger-bg); color: var(--danger); }
.iconbtn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); display: grid; place-items: center; flex: none; box-shadow: var(--soft); }
.iconbtn svg { width: 20px; height: 20px; }

/* paper cards with the glass tell (demo-ui .cv-card) */
.paper, .panel {
  background: var(--card); border-radius: 22px;
  border: 1px solid var(--hair);
  box-shadow: var(--soft);
}
.panel { padding: 18px 18px 16px; }
/* grouped lists: one paper card, hairline rows, chevrons (settings-shaped content) */
.group-head { display: flex; align-items: center; justify-content: space-between; margin: 28px 8px 10px; font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.group-head .link { padding: 0; font-size: 13px; letter-spacing: 0; text-transform: none; }
.group { display: flex; flex-direction: column; padding: 4px; }
.row-item { display: flex; align-items: center; gap: 12px; border: 0; background: transparent; text-align: left; padding: 14px 12px 14px 16px; border-radius: 16px; color: var(--ink); width: 100%; min-height: 54px; transition: background .2s; }
.row-item + .row-item { position: relative; }
.row-item + .row-item::before { content: ""; position: absolute; left: 16px; right: 12px; top: 0; height: 1px; background: var(--hair); }
.row-item:hover { background: var(--wash); }
.row-item:active { background: var(--brand-bg); }
.row-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.row-item .when { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.row-item .ico { width: 34px; height: 34px; border-radius: 999px; background: var(--brand-bg); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.row-item .ico svg { width: 18px; height: 18px; }
.row-item .chev { color: var(--ink-soft); display: grid; place-items: center; }
.row-item .chev svg { width: 16px; height: 16px; }
.row-item .orb { margin: 0 6px; }
.panel + .panel { margin-top: 12px; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }

/* ---------- the floating orb: talk to Nara from any screen ---------- */
.fab { position: absolute; right: 18px; bottom: calc(var(--sab) + 20px); z-index: 9; width: 66px; height: 66px; border: 0; background: transparent; padding: 0; border-radius: 50%; transition: scale var(--duration-medium) var(--ease-bounce-strong); }
.fab:hover { transition-duration: var(--duration-quick); transition-timing-function: var(--ease-smooth-out); }
.fab:hover { scale: 1.07; } .fab:active { scale: .94; transition-duration: .1s; }
.fab .orb { width: 66px; height: 66px; }
.fab .orb .name { font-size: 12.5px; }

/* ---------- composer: multi-line paper field over the stage ---------- */
.composer {
  position: absolute; left: 50%; translate: -50% 0; bottom: calc(var(--sab) + 12px); z-index: 7;
  width: calc(100% - 24px); max-width: 520px; display: flex; flex-direction: column; gap: 2px; padding: 12px 8px 8px 16px; border-radius: 24px;
  background: var(--card); border: 1px solid var(--hair);
  box-shadow: var(--soft), 0 18px 40px -28px rgba(0, 0, 0, .25);
}
/* the mono pulse (border-beam "pulse-inner"): a soft grey glow breathes inside the field's own edge,
   only while Nara works. The field keeps overflow hidden so the glow never spills onto the stage. */
.composer { overflow: hidden; }
.composer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 26px 4px rgba(0, 0, 0, .09); transition: opacity .5s var(--ease); }
.composer.working::after { opacity: 1; animation: pulse-in 2.4s ease-in-out infinite; }
@media (prefers-color-scheme: dark) { .composer::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 26px 4px rgba(255, 255, 255, .1); } }
@media (prefers-reduced-motion: reduce) { .composer.working::after { animation: none; opacity: .7; } }
.composer textarea { width: 100%; border: 0; background: transparent; resize: none; padding: 4px 8px 2px 0; font-size: 16px; line-height: 1.45; min-height: 30px; max-height: 168px; outline: none; }
.composer-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.composer-row .hint { font-size: 11.5px; color: var(--ink-faint); margin-right: auto; padding-left: 2px; }
.composer:focus-within { border-color: rgba(0, 0, 0, .18); box-shadow: var(--soft), 0 18px 40px -28px rgba(0, 0, 0, .3); }
.composer textarea::placeholder { color: var(--ink-faint); }
.round { width: 36px; height: 36px; border-radius: 999px; border: 0; display: grid; place-items: center; flex: none; transition: transform var(--duration-medium) var(--ease-bounce-strong); }
@media (prefers-reduced-motion: no-preference) { .round.swap-in { animation: icon-in var(--duration-fast) var(--ease-in-out); } }
@keyframes icon-in { from { opacity: 0; scale: .7; filter: blur(var(--blur-small)); } to { opacity: 1; scale: 1; filter: blur(0); } }
.round svg { width: 18px; height: 18px; }
.round.send { background: var(--ink); color: var(--card); }
.round.send:disabled { background: var(--fill); color: var(--ink-faint); }
.round.stop { background: #2b2823; color: #fff; }
.round:not(:disabled):hover { transform: translate(1px, -1px) scale(1.06); transition-duration: var(--duration-quick); transition-timing-function: var(--ease-smooth-out); }

/* ---------- welcome ---------- */
.welcome { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(var(--sat) + 24px) 20px calc(var(--sab) + 56px); overflow-y: auto; }
.lead.slogan { font-size: 19px; color: var(--ink); font-weight: 500; letter-spacing: -.015em; }
.lead.slogan sup { font-size: 11px; color: var(--ink-faint); margin-left: 1px; }
.footnote { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 18px); text-align: center; font-size: 12.5px; color: var(--ink-faint); z-index: 2; }
.footnote sup { font-size: 9px; }
.footnote .eu { width: 18px; height: 12px; vertical-align: -2px; margin-left: 2px; border-radius: 2px; }
.footnote .wink { font-size: 13px; }
.welcome-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; align-items: center; text-align: center; padding: 34px 22px 24px; border-radius: 26px; background: transparent; border: 0; box-shadow: none; }
.welcome-card form { width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.wordmark { font-weight: 500; letter-spacing: -.045em; font-size: 44px; line-height: 1; }
.byline { color: var(--ink-faint); font-size: 13px; margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; }
.byline img { width: 14px; height: 14px; opacity: .8; }
.welcome .lead { font-size: 15.5px; color: var(--ink-soft); max-width: 30ch; line-height: 1.55; }
.error { color: var(--danger); font-size: 14px; }

/* ---------- home ---------- */
/* the ask box: a real, roomy text field; example asks rotate as its placeholder */
.askbox { display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 8px 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--hair); box-shadow: var(--soft); transition: border-color .3s; position: relative; isolation: isolate; }
/* the border beam (Libraries.dev border-beam, type md, colorVariant sunset), ported to CSS with the
   Studio settings: strength 42%, duration 3.8 s, glow 1.2, stroke / inner / bloom opacity 1,
   brightness 1.1, saturation 1.1, hue range 14, hue shift 15, colours drifting (staticColors false).
   The radius follows the element's own corners. One light sweeps the border; a blurred bloom rides
   outside it. */
@property --beam-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --beam-h { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.beam { --beam-strength: .42; --beam-dur: 3.8s; --beam-glow: 1.2; overflow: hidden; }
.beam::before, .beam::after { content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  filter: hue-rotate(calc(15deg + var(--beam-h))) brightness(1.1) saturate(1.1); opacity: var(--beam-strength); }
/* the stroke: a sunset sweep (reds to oranges) with a soft head and tail */
.beam::before { inset: 0; padding: 1.5px; z-index: 3;
  background: conic-gradient(from var(--beam-a), transparent 0 58%, rgba(255, 82, 82, .35) 68%, #ff6a3d 76%, #ffb347 82%, #ff5a5f 88%, rgba(255, 90, 95, .25) 94%, transparent 100%); }
/* the bloom outside the edge */
.beam::after { inset: 0; padding: calc(10px * var(--beam-glow)); z-index: 0; filter: blur(calc(7px * var(--beam-glow))) hue-rotate(calc(15deg + var(--beam-h))) brightness(1.1) saturate(1.1);
  background: conic-gradient(from var(--beam-a), transparent 0 64%, rgba(255, 106, 61, .35) 78%, rgba(255, 179, 71, .55) 84%, rgba(255, 90, 95, .3) 90%, transparent 97%); }
@media (prefers-reduced-motion: no-preference) {
  .beam::before, .beam::after { animation: beam var(--beam-dur) linear infinite, beam-hue 9s ease-in-out infinite alternate; }
}
@keyframes beam { to { --beam-a: 360deg; } }
/* colours drift within the hue range (14 degrees either way) */
@keyframes beam-hue { from { --beam-h: -14deg; } to { --beam-h: 14deg; } }
.askbox:focus-within { border-color: rgba(0, 0, 0, .18); }
.askbox textarea { width: 100%; border: 0; background: transparent; resize: none; padding: 2px 8px 0 0; font-size: 17px; line-height: 1.45; min-height: 78px; max-height: 200px; outline: none; }
.askbox textarea::placeholder { color: var(--ink-faint); }
.askbox-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.starters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding: 2px 0; }
.starters::-webkit-scrollbar { display: none; }
.starter { flex: none; border: 0; background: var(--fill); color: var(--ink); font-weight: 500; border-radius: 999px; padding: 8px 13px; font-size: 13.5px; line-height: 1.2; transition: background .2s, color .2s; }
.starter:hover { background: var(--wash); }
.starter:active { background: var(--brand-bg); color: var(--brand-ink); }
.homebar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.orbbtn { border: 0; background: transparent; padding: 0; border-radius: 50%; transition: scale var(--duration-medium) var(--ease-bounce-strong); }
.orbbtn:hover { transition-duration: var(--duration-quick); transition-timing-function: var(--ease-smooth-out); }
.orbbtn:hover { scale: 1.07; } .orbbtn:active { scale: .94; transition-duration: .1s; }
/* the one thing on Home: a big ask field that opens a chat with the keyboard up */
.ask { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 8px 8px 22px; border: 1px solid var(--hair); background: var(--card); border-radius: 999px; color: var(--ink-faint); font-size: 17px; text-align: left; box-shadow: var(--soft); transition: transform .45s var(--spring); }
.ask:active { transform: scale(.985); }
.ask .round { width: 42px; height: 42px; }
.iconbtn { position: relative; }
.iconbtn .badge { transform-origin: 30% 70%; position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand-ink); color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card); }
@media (prefers-reduced-motion: no-preference) { .badge.pop { animation: badge-in var(--duration-very-slow) var(--ease-bounce); } }
@keyframes badge-in { from { opacity: 0; scale: .2; translate: calc(-1 * var(--distance-base)) var(--distance-base); } to { opacity: 1; scale: 1; translate: 0 0; } }
.day { padding: 0; margin: 0; overflow: hidden; }
.day .agenda-head { padding: 12px 16px 4px; }
.day #agenda-days { padding: 0 16px 8px; }
.day .agenda-empty, .day .agenda-connect { padding: 2px 0 8px; }
/* the partner footer: one offer, phrased against the day, a tap is an ask */
.day-foot { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px 10px 12px; border: 0; border-top: 1px solid var(--hair); background: var(--wash); font: inherit; font-size: 13px; color: var(--ink-soft); text-align: left; }
.day-foot .logo { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, var(--brand-mid), var(--brand)); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; flex: none; }
.day-foot .t { flex: 1; min-width: 0; } .day-foot .t b { color: var(--ink); font-weight: 500; }
.day-foot .p { font-size: 11px; color: var(--brand-ink); white-space: nowrap; }
.day-foot:active { background: var(--fill); }
/* notes under the day: setup nudges and other messages, hairline rows */
.notes { display: flex; flex-direction: column; padding: 2px 4px; }
.note { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; font-size: 13.5px; color: var(--ink-soft); }
.note + .note { border-top: 1px solid var(--hair); }
.note p { flex: 1; min-width: 0; }
.note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.note .go { border: 0; background: transparent; padding: 4px 2px; font: inherit; font-size: 13px; font-weight: 500; color: var(--info); white-space: nowrap; }
/* the ask box foot */
.what { border: 0; background: transparent; padding: 6px 2px; font: inherit; font-size: 13px; color: var(--ink-soft); }
.what:active { color: var(--ink); }
/* the "what can I ask" sheet */
.sheet-dim { position: absolute; inset: 0; z-index: 30; background: rgba(0, 0, 0, .25); display: flex; align-items: flex-end; }
.sheet { width: 100%; max-height: 78%; overflow-y: auto; background: var(--card); border-radius: 26px 26px 0 0; padding: 10px 18px calc(var(--sab) + 24px); box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); display: flex; flex-direction: column; }
.sheet .grab { width: 36px; height: 4px; border-radius: 2px; background: var(--fill); margin: 0 auto 8px; }
.sheet h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; margin: 4px 0 6px; }
.sheet .g { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 0 2px; }
.sheet .li { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--hair); background: transparent; padding: 9px 0; font: inherit; color: var(--ink); }
.sheet .li span { font-size: 14.5px; font-weight: 500; } .sheet .li small { font-size: 12.5px; color: var(--ink-soft); }
@media (prefers-reduced-motion: no-preference) { .sheet { animation: sheet-in var(--duration-slow) var(--ease-smooth-out); } }
@keyframes sheet-in { from { translate: 0 24px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.agenda-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.agenda-head b { font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.agenda-head .muted { font-size: 12.5px; color: var(--ink-soft); }
.agenda-day { font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 12px 0 4px; }
.event { display: flex; gap: 12px; align-items: flex-start; padding: 7px 0; }
.event + .event { border-top: 1px solid var(--hair); }
.event .time { width: 48px; flex: none; font-variant-numeric: tabular-nums; font-size: 13.5px; color: var(--ink); display: flex; flex-direction: column; line-height: 1.25; }
.event .time small { font-size: 11px; color: var(--ink-soft); }
.event .what { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.event .what b { font-weight: 500; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event .what span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-empty { font-size: 14px; color: var(--ink-soft); padding: 4px 0 6px; }
.agenda-connect { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 4px; }
.agenda-connect p { padding: 0; }
.hero { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0 2px; text-align: center; }
.hero-text { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.hero h1 { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.needs { display: flex; flex-direction: column; }
.need { display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 14px; text-align: left; border: 0; width: 100%; color: var(--ink); background: color-mix(in srgb, var(--brand) 8%, var(--card)); }
.need + .need { border-top: 1px solid color-mix(in srgb, var(--brand) 14%, transparent); }
.need:active { background: color-mix(in srgb, var(--brand) 14%, var(--card)); }
.need .k { font-size: 11.5px; font-weight: 600; color: var(--brand-ink); width: 30px; flex: none; }
.need .what { flex: 1; min-width: 0; }
.need .what b { display: block; font-weight: 500; font-size: 14px; }
.need .what span { color: var(--ink-soft); font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need .go { font-size: 12.5px; color: var(--brand-ink); font-weight: 500; white-space: nowrap; }
.section-title { font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: .14em; text-transform: uppercase; margin: 18px 4px 10px; }
.suggest { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggest button { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left; border: 0; border-radius: 18px; padding: 14px; color: var(--ink); font-size: 14.5px; font-weight: 400; transition: transform .45s var(--spring); }
.suggest button:active { transform: scale(.98); }
.suggest .ico { width: 34px; height: 34px; border-radius: 999px; background: var(--brand-bg); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.suggest .ico svg { width: 18px; height: 18px; }
.recent { display: flex; flex-direction: column; gap: 6px; }
.recent-item, .chat-item { display: flex; align-items: center; gap: 10px; border: 0; text-align: left; padding: 12px 14px; border-radius: 16px; color: var(--ink); width: 100%; }
.recent-item .t, .chat-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-item .when, .chat-item .when { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.row-item .torb { width: 20px; height: 20px; }
.setup { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--brand-bg); color: var(--brand-ink); margin-bottom: 10px; }
.setup p { flex: 1; font-size: 14px; }
.chat-item[aria-current="true"] { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 40%, transparent); }
.topbar { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 8px; }
.topbar .title { flex: 1; min-width: 0; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- chat ---------- */
.messages { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8px; }
.msg { display: flex; flex-direction: column; gap: 8px; animation: msgin var(--duration-very-slow) var(--ease-in-out); }
@keyframes msgin { from { opacity: 0; translate: 0 var(--distance-medium); filter: blur(var(--blur-medium)); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.msg.user { align-items: flex-end; }
.bubble { max-width: 88%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble strong { font-weight: 600; }
.user .bubble { background: var(--fill); color: var(--ink); border-radius: 18px 18px 6px 18px; white-space: pre-wrap; }
.assistant .bubble { padding: 0; max-width: 100%; }
.msg.user { padding-left: 12%; }
.assistant .bubble:empty { display: none; }
.bubble p { margin: 0 0 .6em; } .bubble p:last-child { margin: 0; }
.bubble ul, .bubble ol { margin: .3em 0 .6em; padding-left: 1.3em; }
.bubble pre { background: var(--wash); border-radius: 12px; padding: 10px 12px; overflow-x: auto; font-size: 13px; }
.bubble code { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
.meta { font-size: 12.5px; color: var(--ink-faint); padding-left: 4px; }
.meta.error { color: var(--danger); }
@media (prefers-reduced-motion: no-preference) {
  .meta.error, .banner { animation: t-shake calc(var(--duration-micro) * 5) var(--ease-in-out); }
  .chip.good { animation: success-pop var(--duration-very-slow) var(--ease-bounce); transform-origin: center; }
}
@keyframes t-shake { 0%, 100% { translate: 0 0; } 20% { translate: calc(-1 * var(--distance-base)) 0; } 40% { translate: var(--distance-base) 0; } 60% { translate: calc(-1 * var(--distance-small)) 0; } 80% { translate: var(--distance-small) 0; } }
@keyframes success-pop { from { scale: .6; opacity: 0; } 60% { scale: 1.08; } to { scale: 1; opacity: 1; } }
.empty { margin: 16vh auto 0; text-align: center; max-width: 30ch; display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* Nara's turn on a rail (B + C, 2026-09-25 late): orb on the left, name line with the status,
   the step rail while she works (folds into "N steps" when done, tap to unfold), then the text */
.rail { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
.rail .line { position: relative; padding-top: 1px; }
.rail .line::before { content: ""; position: absolute; left: 10px; top: 28px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--hair); opacity: 0; transition: opacity var(--duration-fast) var(--ease-smooth-out); }
.msg.running .rail .line::before, .msg.unfolded .rail .line::before { opacity: 1; }
.rail .body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.who { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; margin: 0; text-align: left; font: inherit; font-size: 13px; color: var(--ink-soft); min-height: 22px; cursor: default; }
.who .name { color: var(--ink); font-weight: 500; }
.who .sep { color: var(--ink-faint); }
.who .status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .status:empty, .who .status:empty + svg, .who .sep:has(+ .status:empty) { display: none; }
.who svg { width: 12px; height: 12px; color: var(--ink-faint); display: none; transition: rotate var(--duration-fast) var(--ease-smooth-out); }
.msg[data-done="1"] .who { cursor: pointer; }
.msg[data-done="1"] .who svg { display: block; }
.msg.unfolded .who svg { rotate: 180deg; }
.msg.running .who .status { color: transparent; background: linear-gradient(90deg, var(--ink-soft) 0%, var(--ink-soft) 35%, var(--ink) 50%, var(--ink-soft) 65%, var(--ink-soft) 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; animation: think-shimmer 2s var(--ease-linear) infinite; }
@keyframes think-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }
@media (prefers-reduced-motion: no-preference) { .who .status.swap-in { animation: text-in var(--duration-quick) var(--ease-in-out); } .msg.running .who .status.swap-in { animation: text-in var(--duration-quick) var(--ease-in-out), think-shimmer 2s var(--ease-linear) infinite; } }
@keyframes text-in { from { opacity: 0; translate: 0 var(--distance-base); filter: blur(var(--blur-small)); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.steps { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; gap: 2px; }
.msg.running .steps, .msg.unfolded .steps { display: flex; }
.step { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: 13px; color: var(--ink-faint); }
.step .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step .label.shimmer { color: transparent; background: linear-gradient(90deg, var(--ink-soft) 0%, var(--ink-soft) 35%, var(--ink) 50%, var(--ink-soft) 65%, var(--ink-soft) 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; animation: think-shimmer 2s var(--ease-linear) infinite; }
.step svg { width: 14px; height: 14px; flex: none; margin: 0 3px; color: var(--ink-faint); }
.step.failed svg { color: var(--danger); }
.step .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--hair); flex: none; margin: 0 7px; }
.step .torb { width: 20px; height: 20px; }
.torb { width: 18px; height: 18px; flex: none; display: block; }
.step.thinking .label { font-style: italic; }
@media (prefers-reduced-motion: no-preference) { .step { animation: text-in var(--duration-quick) var(--ease-in-out); } }

/* live browser card */
.live { width: 100%; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: no-preference) { .live { animation: cardin .5s var(--ease); } }
@keyframes cardin { from { opacity: 0; scale: .97; } to { opacity: 1; scale: 1; } }
.live-head { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.live-head .t { flex: 1; font-weight: 500; font-size: 14px; }
.live-frame { position: relative; aspect-ratio: 16 / 11; border-radius: 14px; overflow: hidden; background: var(--paper); border: 1px solid var(--hair); display: flex; flex-direction: column; }
.browser-bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--paper); border-bottom: 1px solid var(--hair); flex: none; }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--fill); border: 1px solid var(--hair); }
.browser-bar .url { margin-left: 8px; flex: 1; height: 20px; border-radius: 999px; background: var(--card); border: 1px solid var(--hair); font-size: 10.5px; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; padding: 0 10px; }
.live-frame iframe { flex: 1; width: 100%; border: 0; background: #fff; opacity: 0; filter: blur(10px); transition: opacity .5s var(--ease), filter 1.1s steps(6, end); }
.live-frame.loaded iframe { opacity: 1; filter: blur(0); }
.live { position: relative; }
.pixels { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 5; image-rendering: pixelated; }
.paper, .panel, .chat-item, .need, .approval, .proposal { position: relative; }
.live-frame .placeholder { position: absolute; inset: 33px 0 0; display: grid; place-items: center; color: var(--ink-faint); font-size: 13px; background: repeating-linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.5) 50%, transparent 60% 100%) 0 0 / 200% 100%; animation: shimmer 2.2s linear infinite; }
.live-frame.loaded .placeholder { display: none; }
@keyframes shimmer { to { background-position: -200% 0; } }
.live.closed .live-frame { display: none; }
.live .ended { font-size: 13px; color: var(--ink-faint); padding: 0 4px; }
/* action rows (WhatsApp / Telegram): a card's buttons are full-width hairline rows at its foot,
   coloured text, no pill. The row is the button. Primary in blue, the one payment action in ink. */
.rows { display: flex; margin: 4px calc(-1 * var(--card-px, 16px)) calc(-1 * var(--card-pb, 14px)); border-top: 1px solid var(--hair); }
.rows > * { flex: 1; border: 0; background: transparent; padding: 12px 8px; min-height: 44px; font: inherit; font-size: 14px; font-weight: 500; color: var(--info); text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--duration-quick) var(--ease-smooth-out); }
.rows > * + * { border-left: 1px solid var(--hair); }
.rows > .quiet { color: var(--ink-soft); font-weight: 400; }
.rows > .ink { color: var(--ink); }
.rows > *:active { background: var(--wash); }
.rows > .pulse-inner::after { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), inset 0 0 26px 2px rgba(0, 0, 0, .06); border-radius: 0; }
.rows > [hidden] { display: none; }
.proposal, .approval { --card-px: 16px; --card-pb: 14px; }
.proposal.beam, .approval.beam { isolation: isolate; }
.live { --card-px: 10px; --card-pb: 10px; }
.live .rows { margin-top: 0; }
/* take over: the same card grows to the whole stage; the iframe never remounts */
.live.takeover { position: fixed; inset: 0; z-index: 40; border-radius: 0; padding: calc(var(--sat) + 10px) 10px calc(var(--sab) + 10px); }
@media (min-width: 720px) { .live.takeover { inset: 24px 0; margin: 0 auto; width: min(100% - 48px, 560px); border-radius: 26px; } }
.live.takeover .live-frame { flex: 1; aspect-ratio: auto; }
/* while you have the browser, the composer and the floating orb step aside (they sit above the screen's stacking context) */
.stage.takeover .composer, .stage.takeover .fab { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .live.takeover { animation: modal-in var(--duration-fast) var(--ease-smooth-out); transform-origin: center; }
  .live.is-closing { animation: modal-out var(--duration-quick) var(--ease-smooth-out) both; }
}
@keyframes modal-in { from { scale: var(--scale-large); opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes modal-out { from { scale: 1; opacity: 1; } to { scale: var(--scale-large); opacity: 0; } }
.live.takeover .live-frame iframe { opacity: 1; }
.live.takeover .live-actions .take { display: none; }
.live:not(.takeover) .live-actions .give { display: none; }
.live.takeover .rows { margin: 0; border-radius: 14px; overflow: hidden; background: var(--card); border: 1px solid var(--hair); }

/* approval card */
.approval { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.approval .amount { font-weight: 600; font-size: 28px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.approval .merchant { color: var(--ink-soft); font-size: 13.5px; }
.approval .hint { font-size: 12px; color: var(--ink-faint); display: flex; gap: 6px; align-items: flex-start; }
.approval .hint svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.approval .merchant { margin-top: -4px; }

/* ---------- you ---------- */
.you-head { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
/* You, wallet first */
#screen-you { display: flex; flex-direction: column; gap: 12px; }
#screen-you[hidden] { display: none; }
#screen-you > * { flex: none; }
.prof { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.who-prof b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.who-prof span { display: block; font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet { display: flex; flex-direction: column; gap: 8px; }
.pay { width: 100%; aspect-ratio: 1.586; border-radius: 16px; padding: 16px; border: 0; color: #fff; position: relative; overflow: hidden; text-align: left; font: inherit;
  background: linear-gradient(135deg, var(--brand-mid) 0%, var(--brand) 55%, var(--brand-ink) 100%);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand-ink) 60%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .25);
  display: flex; flex-direction: column; justify-content: space-between; transition: transform var(--duration-medium) var(--ease-bounce-strong); }
.pay::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 70%); pointer-events: none; }
.pay:active { transform: scale(.985); }
.pay .top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; opacity: .9; }
.pay .brand { font-weight: 600; letter-spacing: .02em; }
.pay .chipv { width: 30px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #ffe0b8, #f7b26f); display: block; }
.pay .num { font-size: 18px; letter-spacing: .12em; font-variant-numeric: tabular-nums; font-weight: 500; }
.pay .bot { display: flex; justify-content: space-between; font-size: 12px; opacity: .9; gap: 8px; }
.pay.empty { background: var(--card); color: var(--ink-soft); box-shadow: none; border: 1px dashed rgba(0, 0, 0, .2); align-items: center; justify-content: center; }
.pay.empty::before { display: none; }
.pay.empty .add { font-size: 15px; font-weight: 500; color: var(--info); }
.wallet .hint { font-size: 12.5px; color: var(--ink-faint); padding: 0 4px; line-height: 1.45; }
.wallet-links { display: flex; gap: 16px; padding: 0 4px; }
.wallet-links .link { padding: 2px 0; font-size: 13px; color: var(--info); }
.you-rows { display: flex; flex-direction: column; }
.yr { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.yr + .yr { border-top: 1px solid var(--hair); }
.yico { width: 34px; height: 34px; border-radius: 10px; background: var(--fill); display: grid; place-items: center; color: var(--ink-soft); flex: none; font-size: 13px; font-weight: 700; }
.yico.g { background: var(--card); border: 1px solid var(--hair); color: #4285f4; }
.yr .t { flex: 1; min-width: 0; } .yr .t b { display: block; font-weight: 500; font-size: 14.5px; }
.yr .t span { display: block; color: var(--ink-soft); font-size: 12.5px; }
.yr .t .note { font-size: 12px; color: var(--ink-faint); }
.yr .t .note:empty { display: none; }
.yr .state { font-size: 12px; color: var(--success); font-weight: 500; white-space: nowrap; }
.yr .state.bad { color: var(--danger); }
.yr .state:not(.good):not(.bad) { display: none; }
.yr .go { border: 0; background: transparent; padding: 4px 2px; font: inherit; font-size: 13px; font-weight: 500; color: var(--info); white-space: nowrap; }
.yr .go.quiet { color: var(--ink-faint); font-weight: 400; }
.yr .timefield { border: 0; background: var(--wash); border-radius: 6px; padding: 1px 6px; font: inherit; font-size: 12.5px; color: var(--ink); }
.mem { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; }
.mem-h { display: flex; justify-content: space-between; align-items: baseline; } .mem-h b { font-size: 14.5px; font-weight: 600; } .mem-h .muted { font-size: 12px; color: var(--ink-faint); }
.mem .note { font-size: 13px; color: var(--ink-soft); } .mem .note:empty { display: none; }
.mem .memories li { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 7px 0; border-top: 1px solid var(--hair); }
.mem .memories li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }
.mem .memories li span { flex: 1; }
.mem .memories li .link { color: var(--ink-faint); font-size: 12px; padding: 0; }
.tell { display: flex; align-items: center; gap: 8px; border: 1px solid var(--hair); border-radius: 12px; padding: 6px 6px 6px 12px; background: var(--card); }
.tell input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; outline: none; color: var(--ink); }
.tell input::placeholder { color: var(--ink-faint); }
.round.small { width: 28px; height: 28px; } .round.small svg { width: 13px; height: 13px; }
.you-foot { font-size: 12.5px; color: var(--ink-faint); text-align: center; padding: 8px 12px 0; line-height: 1.45; }
.signout { align-self: center; font-size: 13px; color: var(--ink-faint); }
.you-head .who { min-width: 0; }
.you-head .who b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.you-head .who span { color: var(--ink-soft); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.setting { display: flex; flex-direction: column; gap: 10px; }
.setting .row b { font-weight: 500; }
.setting .note { color: var(--ink-soft); font-size: 13.5px; }
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cards li { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.memories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.memories li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.memories li span { flex: 1; }
.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: var(--hair); transition: background .3s; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform var(--duration-medium) var(--ease-bounce); }
.switch input:checked + .knob { background: var(--brand); }
.switch input:checked + .knob::after { transform: translateX(20px); }
.switch input:disabled + .knob { opacity: .5; }
.timefield { border: 0; background: var(--wash); border-radius: 999px; padding: 8px 12px; font-size: 15px; }
.inline-form { display: flex; gap: 8px; }
.inline-form .field { flex: 1; min-width: 0; padding: 10px 14px; font-size: 15px; }
.swatches { display: flex; gap: 10px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 0; box-shadow: var(--inh), 0 6px 14px -8px rgba(0, 0, 0, .4); }
.swatch.sw-orange { background: #e0703a; } .swatch.sw-green { background: #1f8f6e; } .swatch.sw-blue { background: #2f6fe0; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- banner ---------- */
.banner { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 14px); z-index: 50; width: min(100% - 48px, 480px); padding: 12px 16px; border-radius: 18px; background: var(--danger-bg); color: var(--danger); font-size: 14px; box-shadow: var(--soft); }

@media (prefers-reduced-motion: reduce) {
  .orb * { animation: none !important; }
  .step.running .pip, .msg { animation: none; }
  * { transition: none !important; }
}

/* ---------- proposal card (batch approval) ---------- */
.proposal { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.proposal b { font-weight: 600; letter-spacing: -.01em; }
.proposal .small { font-size: 12.5px; margin-top: -4px; }
.proposal .go { font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.plan li { display: flex; padding: 9px 0; }
.plan li + li { border-top: 1px solid var(--hair); }
.plan .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan .body b { font-size: 14px; font-weight: 500; }
.plan .verb { font-weight: 600; color: var(--ink-soft); }
.plan .act-move .verb, .plan .act-create .verb, .plan .act-book .verb, .plan .act-send .verb { color: var(--info); }
.plan .act-cancel .verb, .plan .act-decline .verb { color: var(--danger); }
.plan .act-keep .verb { color: var(--ink-faint); }
.plan .body .when { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.plan-message summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); }
.plan-message p { margin-top: 6px; font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; }
.undo-note { margin-top: 6px; }
.proposal .row { display: flex; align-items: center; gap: 14px; padding-top: 2px; }
.proposal .row .link { font-size: 13px; }
.proposal .row.between { justify-content: space-between; }
/* structured reply blocks (choices, list, facts): text-first, same paper as the proposal */
.block > * { align-self: stretch; }
.block .plan li { padding: 0; }
.block.list .plan li, .block .plan li:has(> .body) { padding: 9px 0; }
.block .pick { all: unset; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 0; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.block .pick .body { flex: 1; }
.block .pick .chev { color: var(--ink-faint); font-size: 20px; line-height: 1; padding-right: 2px; }
.block .pick:active { background: var(--wash); margin: 0 calc(-1 * var(--card-px)); padding-inline: var(--card-px); width: auto; }
.block.picked .pick { opacity: .55; pointer-events: none; }
.block .group { margin: 6px 0 -4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.block .rows + .group, .block .plan + .group { margin-top: 12px; }
.facts-rows { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.facts-rows dt { color: var(--ink-soft); font-weight: 400; }
.facts-rows dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.facts-rows.tight { font-size: 13px; gap: 4px 10px; grid-template-columns: max-content 1fr; }
.facts-rows.lines dd.num { text-align: right; font-variant-numeric: tabular-nums; }
.facts-rows .total { font-weight: 600; color: var(--ink); border-top: 1px solid var(--hair); padding-top: 6px; }
.slot-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.slot { all: unset; box-sizing: border-box; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--fill); color: var(--ink); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; cursor: pointer; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; }
.slot:active, .slot.on { background: color-mix(in srgb, var(--brand) 14%, var(--fill)); color: var(--brand-ink); }
.block.picked .slot:not(.on), .block.picked .pick-btn { opacity: .5; pointer-events: none; }
.compare-strip { display: flex; gap: 10px; overflow-x: auto; margin: 0 calc(-1 * var(--card-px)); padding: 2px var(--card-px) 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.compare-strip::-webkit-scrollbar { display: none; }
.compare-strip .option { flex: 0 0 72%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 14px; background: var(--wash); }
.compare-strip .option b { font-size: 14px; }
.compare-strip .option .when { font-size: 12.5px; color: var(--ink-soft); }
.pick-btn { all: unset; margin-top: 4px; text-align: center; padding: 9px 0; border-radius: 10px; background: var(--card); color: var(--info); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 0 0 1px var(--hair); }
.block.email .subject { font-weight: 500; font-size: 14.5px; margin: 0; }
.block.email .snippet { font-size: 13.5px; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.block-form { display: flex; flex-direction: column; gap: 10px; }
.block-form label { display: flex; flex-direction: column; gap: 4px; }
.block-form .lbl { font-size: 12.5px; color: var(--ink-soft); }
.block-form input, .block-form textarea { font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 0; background: var(--fill); color: var(--ink); }
.block-form textarea { min-height: 64px; resize: vertical; }
.block.status .steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.block.status .step { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.block.status .step.todo .label { color: var(--ink-faint); }
.block.status .step.waiting .label { color: var(--brand-ink); }
.block.status .mark { width: 20px; height: 20px; display: grid; place-items: center; color: var(--success, #2f9e5f); font-size: 14px; }
.block.status .mark .ico { width: 16px; height: 16px; }
.block.status .mark canvas { width: 18px; height: 18px; }
.block.payment .amount { display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px solid var(--hair); }
.block.payment .amount .lbl { font-size: 13px; color: var(--ink-soft); }
.block.payment .amount .num { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- loading (img-fx "sweep-gradient", quiet): a diagonal band sweeps skeleton rows ---------- */
@media (prefers-reduced-motion: no-preference) { .reveal-in { animation: skel-reveal var(--duration-slow) var(--ease-in-out); } }
@keyframes skel-reveal { from { opacity: 0; filter: blur(var(--blur-small)); } to { opacity: 1; filter: blur(0); } }
.skel { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.skel + .skel { border-top: 1px solid var(--hair); }
.skel-t, .skel-b { display: block; height: 12px; border-radius: 6px; background: var(--fill); position: relative; overflow: hidden; }
.skel-t { width: 46px; } .skel-b { flex: 1; max-width: 62%; }
.skel-t::after, .skel-b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) 0 0 / 220% 100%; animation: sweep 1.8s linear infinite; }
@media (prefers-color-scheme: dark) { .skel-t::after, .skel-b::after { background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .1) 50%, transparent 70%); } }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .skel-t::after, .skel-b::after { animation: none; } }
/* the one thing waiting on you breathes (border-beam "pulse-inner", mono): a soft white glow inside
   the button's own edge. Used on the approve buttons (payment, proposal) only, never on idle buttons. */
.pulse-inner { position: relative; overflow: hidden; }
.pulse-inner::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 22px 2px rgba(255, 255, 255, .28);
  animation: pulse-in 2.4s ease-in-out infinite; }
@keyframes pulse-in { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pulse-inner::after { animation: none; opacity: .5; } }

/* Friends row on You: one line per friend with what they may see. */
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--hair); font-size: 13px; color: var(--ink); }
.friend-row:first-child { border-top: 0; }
.friend-row .tier { font: inherit; font-size: 12px; color: var(--ink-soft); background: var(--card); border: 1px solid var(--hair); border-radius: 8px; padding: 4px 6px; }
.sheet.confirm form.tell { margin-top: 10px; }