/* Stav — the design system of Aviv's hub (Avishai, 2026-10-31: "I want the same UI design we used for Aviv please").
   Adapted from neo-live-presence apps/hub/public/styles.css (the 2026-10-14 redesign): an airy off-white canvas, white
   rounded cards with soft shadows, one vivid purple, pastel tints, bold headings, line icons, a floating bottom bar on the
   phone and a rail from 860 px. Hebrew, right to left: every side is a logical property. Dark follows the system.
   Stav-only rules (the room session, the silent chat, the Talk orb without a picture) sit at the end. */
:root {
  color-scheme: light dark;
  --bg: #f4f3fb;
  --bg-2: #ffffff;        /* cards */
  --bg-3: #f7f6fd;        /* inset surfaces, chips */
  --ink: #1b1a2f;
  --muted: #7c7a93;
  --line: #e9e7f4;
  --accent: #5a47f5;      /* the one purple */
  --accent-ink: #ffffff;
  --accent-soft: #ece8ff;
  --accent-2: #8f80ff;    /* gradient partner */
  --ok: #22a06b;
  --warn: #e0a020;
  --bad: #e24c4b;
  --peach: #ffe9dd; --peach-ink: #b8542a;
  --mint: #dff6ec;  --mint-ink: #1d7a52;
  --sky: #e2efff;   --sky-ink: #2b63b8;
  --lemon: #fff3cf; --lemon-ink: #9a6b00;
  --lilac: #ece8ff; --lilac-ink: #5a47f5;
  --shadow: 0 10px 30px rgba(43, 35, 110, .08);
  --shadow-2: 0 18px 50px rgba(43, 35, 110, .16);
  --sans: "Plus Jakarta Sans", "Noto Sans Hebrew", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --radius: 22px;
  --radius-s: 16px;
  --gutter: 18px;
  --tap: 56px;
  --tabs-h: 76px;
  --top-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14131d;
    --bg-2: #1e1c2b;
    --bg-3: #262436;
    --ink: #f3f2fa;
    --muted: #a3a1ba;
    --line: #2f2d40;
    --accent: #8c7cff;
    --accent-ink: #14131d;
    --accent-soft: rgba(140, 124, 255, .18);
    --accent-2: #b3a8ff;
    --ok: #4fcf96;
    --warn: #f0b94a;
    --bad: #f07470;
    --peach: rgba(255, 150, 100, .16); --peach-ink: #ffb08a;
    --mint: rgba(60, 200, 140, .16);   --mint-ink: #7fe0b3;
    --sky: rgba(90, 150, 255, .16);    --sky-ink: #9cc2ff;
    --lemon: rgba(255, 200, 60, .16);  --lemon-ink: #ffd877;
    --lilac: rgba(140, 124, 255, .18); --lilac-ink: #b3a8ff;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-2: 0 18px 50px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; font: 17px/1.45 var(--sans); color: var(--ink); background: var(--bg);
  display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "top" "main" "tabs";
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.hidden { display: none !important; }
svg.i { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---- header: the mark, the name, the status pill ---- */
.top { grid-area: top; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--top-h); padding: 8px var(--gutter); padding-top: calc(8px + env(safe-area-inset-top)); background: var(--bg); position: sticky; top: 0; z-index: 20; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; min-height: 48px; }
.brand img { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px var(--accent-soft); }
.top-state { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 999px; background: var(--bg-2); box-shadow: var(--shadow); font-size: .88rem; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.top-state::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.top-state.available { color: var(--mint-ink); } .top-state.available::before { background: var(--ok); }
.top-state.busy { color: var(--bad); } .top-state.busy::before { background: var(--bad); animation: blink 1.2s ease-in-out infinite; }

/* ---- navigation: a floating white bar with line icons; a rail from 860 px ---- */
.side { display: none; }
.tabs { grid-area: tabs; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: sticky; bottom: 0; z-index: 20; background: var(--bg-2); border-radius: 26px 26px 0 0; box-shadow: 0 -8px 30px rgba(43, 35, 110, .08); height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); padding: 8px 6px calc(6px + env(safe-area-inset-bottom)); gap: 2px; }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--muted); font-size: .76rem; font-weight: 700; min-height: 58px; border-radius: 18px; position: relative; }
.tabs a svg.i { width: 26px; height: 26px; }
.tabs a.active { color: var(--accent); }
.tabs a.active::after { content: ""; position: absolute; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.side a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--muted); min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: 1rem; font-weight: 600; }
.side a.active { color: var(--accent); background: var(--accent-soft); }
@media (min-width: 860px) {
  body { grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr; grid-template-areas: "top top" "side main"; }
  .side { grid-area: side; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; background: var(--bg-2); position: sticky; top: var(--top-h); height: calc(100dvh - var(--top-h)); overflow-y: auto; border-start-end-radius: 26px; }
  .tabs { display: none; }
}

/* ---- content ---- */
.main { grid-area: main; padding: 6px var(--gutter) 28px; width: 100%; max-width: 1100px; margin: 0 auto; min-width: 0; }
h1 { font-size: 1.75rem; font-weight: 800; margin: 6px 0 16px; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-size: 1.12rem; font-weight: 800; margin: 0 0 12px; letter-spacing: -.01em; }
h3 { font-size: 1rem; font-weight: 700; margin: 16px 0 8px; }
p { margin: 0 0 10px; }
.muted { color: var(--muted); }
.small-text { font-size: .9rem; }
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--bg-2); border: 0; border-radius: var(--radius); padding: 18px; min-width: 0; box-shadow: var(--shadow); margin: 0 0 14px; }
.grid > .card { margin: 0; }
.card h2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card.tint-peach { background: var(--peach); } .card.tint-mint { background: var(--mint); } .card.tint-sky { background: var(--sky); } .card.tint-lilac { background: var(--lilac); }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--bg-3); color: var(--muted); vertical-align: middle; }
.pill.ok { background: var(--mint); color: var(--mint-ink); }
.pill.warn { background: var(--lemon); color: var(--lemon-ink); }
.pill.bad { background: var(--peach); color: var(--bad); }
.pill.lilac { background: var(--lilac); color: var(--lilac-ink); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); margin-inline-end: 8px; vertical-align: middle; flex: 0 0 auto; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--bg-3); color: var(--muted); }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.peach { background: var(--peach); color: var(--peach-ink); } .tag.mint { background: var(--mint); color: var(--mint-ink); }
.tag.sky { background: var(--sky); color: var(--sky-ink); } .tag.lemon { background: var(--lemon); color: var(--lemon-ink); } .tag.lilac { background: var(--lilac); color: var(--lilac-ink); }

/* ---- controls ---- */
button, input, select, textarea { font: inherit; color: inherit; }
button, a.btn { min-height: var(--tap); padding: 10px 20px; border-radius: var(--radius-s); border: 0; background: var(--bg-3); cursor: pointer; font-size: 1rem; font-weight: 700; transition: transform .08s ease, box-shadow .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--ink); }
button:active, a.btn:active { transform: scale(.985); }
button.primary, a.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px rgba(90, 71, 245, .28); }
button.outline, a.btn.outline { background: transparent; box-shadow: inset 0 0 0 2px var(--line); color: var(--accent); }
button.small, a.btn.small { min-height: 44px; padding: 6px 14px; font-size: .92rem; font-weight: 600; }
button.block, a.btn.block { width: 100%; }
button:disabled { opacity: .5; cursor: default; transform: none; }
input, select, textarea { min-height: var(--tap); padding: 10px 16px; border-radius: var(--radius-s); border: 2px solid transparent; background: var(--bg-3); width: 100%; font-size: 1rem; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--bg-2); }
label { display: grid; gap: 6px; font-size: .9rem; font-weight: 600; color: var(--muted); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row > * { flex: 1 1 160px; }
.row > button { flex: 0 0 auto; }
.actions { display: grid; gap: 10px; margin-top: 12px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: var(--tap); padding: 12px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.list li .what { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.list li .when { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 800; flex: 0 0 auto; }
.empty { color: var(--muted); padding: 12px 0; }
.error { color: var(--bad); }

/* ---- the greeting, the big purple card, rows, items ---- */
.greet { display: flex; align-items: center; gap: 14px; padding: 6px 0 14px; }
/* Stav's portrait, as Aviv's hub shows Aviv's (2026-10-31) */
.greet img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5px var(--accent-soft); }
.greet .txt { display: grid; gap: 2px; min-width: 0; }
.greet .hi { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.greet .sub { color: var(--muted); font-size: .92rem; }
.greet .right { margin-inline-start: auto; }
.hero { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: var(--radius); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 16px 40px rgba(90, 71, 245, .3); margin-bottom: 14px; }
.hero .txt { display: grid; gap: 6px; min-width: 0; flex: 1; }
.hero .headline { font-size: 1.25rem; font-weight: 800; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero .sub { opacity: .9; font-size: .95rem; }
.hero .dot { background: #fff; }
.hero .rec.on { background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .25); }
.hero .hero-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; margin-top: 8px; border-radius: 999px; background: #fff; color: #5a47f5; font-weight: 800; font-size: 1rem; text-decoration: none; width: fit-content; box-shadow: none; }
@media (prefers-color-scheme: dark) { .hero { background: linear-gradient(135deg, #5a47f5, #8a7bff); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); } }
.rows { display: grid; gap: 10px; margin-bottom: 14px; }
.rows a, .rows button.rowbtn { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-2); box-shadow: var(--shadow); text-decoration: none; color: inherit; width: 100%; text-align: start; font-weight: 400; justify-content: flex-start; }
.rows a:active, .rows button.rowbtn:active { background: var(--accent-soft); }
.rows .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 auto; }
.rows .ico svg.i { width: 24px; height: 24px; }
.rows .peach .ico { background: var(--peach); color: var(--peach-ink); } .rows .mint .ico { background: var(--mint); color: var(--mint-ink); }
.rows .sky .ico { background: var(--sky); color: var(--sky-ink); } .rows .lemon .ico { background: var(--lemon); color: var(--lemon-ink); }
.rows .txt { display: grid; gap: 2px; min-width: 0; }
.rows .lbl { font-size: 1.05rem; font-weight: 800; }
.rows .hint { font-size: .88rem; color: var(--muted); overflow-wrap: anywhere; }
.rows .chev { margin-inline-start: auto; color: var(--muted); display: inline-flex; }
.rows .chev svg.i { width: 22px; height: 22px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.section-head h2 { margin: 0; }
.stack-list { display: grid; gap: 10px; }
.item { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-2); box-shadow: var(--shadow); min-width: 0; min-height: var(--tap); }
.item.link { cursor: pointer; }
.item.link:active { background: var(--accent-soft); }
.item .head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: nowrap; }
.item .title { font-weight: 800; font-size: 1.02rem; overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.item .meta { font-size: .86rem; color: var(--muted); }
.item .foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-s); background: var(--lemon); color: var(--lemon-ink); font-weight: 700; margin: 0 0 12px; }
.banner.bad { background: var(--peach); color: var(--bad); }
.banner .txt { flex: 1 1 200px; overflow-wrap: anywhere; }
.banner button { min-height: 44px; padding: 6px 14px; background: var(--bg-2); color: var(--ink); font-size: .9rem; }
.big { font-size: 1.8rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---- the running session: the red dot, the clock, the End button, the live transcript ---- */
.rec { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); margin-inline-end: 8px; vertical-align: middle; flex: 0 0 auto; }
.rec.on { background: var(--bad); box-shadow: 0 0 0 5px rgba(226, 76, 75, .2); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.live-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-head .big { flex: 0 0 auto; }
button.end { min-height: 72px; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; background: var(--bad); color: #fff; border-radius: var(--radius); box-shadow: 0 10px 28px rgba(226, 76, 75, .3); width: 100%; }
.transcript { display: grid; gap: 8px; max-height: 42vh; overflow: auto; padding: 4px 0; }
.transcript div { padding: 10px 12px; border-radius: 14px; background: var(--bg-3); overflow-wrap: anywhere; unicode-bidi: plaintext; font-size: .98rem; }
.transcript .empty { background: transparent; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 6px 16px; border-radius: 999px; font-size: .92rem; font-weight: 700; border: 0; background: var(--bg-3); color: var(--ink); }
.chip.on { background: var(--accent); color: var(--accent-ink); }

/* ---- the chat (silent during a session; Talk's text): bubbles and the compose bar ---- */
.thread { display: grid; gap: 10px; max-height: 46vh; overflow-y: auto; padding: 4px 2px 10px; }
.thread:empty { display: none; }
.bubble { padding: 12px 16px; border-radius: 20px; max-width: 90%; overflow-wrap: anywhere; font-size: 1.02rem; line-height: 1.45; white-space: pre-wrap; unicode-bidi: plaintext; }
.bubble.me { background: var(--accent); color: var(--accent-ink); justify-self: end; border-end-end-radius: 6px; }   /* mirrored for RTL, as in a Hebrew chat */
.bubble.stav { background: var(--bg-3); justify-self: start; border-end-start-radius: 6px; }
.compose { display: flex; gap: 10px; align-items: center; }
.compose input { flex: 1; border-radius: 26px; background: var(--bg-3); }
.compose button.send { width: 52px; min-width: 52px; min-height: 52px; padding: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.compose button.send svg.i { width: 22px; height: 22px; transform: scaleX(-1); }

/* ---- Talk: the orb (Aviv's, with Stav's mark instead of a picture) ---- */
.talk { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.orb-wrap { display: grid; place-items: center; gap: 12px; padding: 14px 0 6px; }
.orb { --size: min(56vw, 230px); width: var(--size); height: var(--size); border-radius: 50%; border: 0; padding: 0; position: relative; background: transparent; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; box-shadow: none; }
.orb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; position: relative; z-index: 2; box-shadow: 0 0 0 6px var(--bg-2), 0 18px 50px rgba(90, 71, 245, .25); }
.orb.listening img { box-shadow: 0 0 0 6px var(--bg-2), 0 0 0 10px rgba(34, 160, 107, .35), 0 18px 50px rgba(90, 71, 245, .25); }
.orb.off img { filter: grayscale(.35); }
.orb .core { position: absolute; inset: 0; border-radius: 50%; z-index: 2; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 0 0 6px var(--bg-2), 0 18px 50px rgba(90, 71, 245, .25); }
.orb .core svg.i { width: 34%; height: 34%; stroke-width: 1.8; }
.orb .halo { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, var(--accent), var(--accent-2), #ff9f7a, var(--accent)); opacity: .55; filter: blur(10px); z-index: 1; animation: orb-breathe 4.5s ease-in-out infinite; }
.orb .halo2 { position: absolute; inset: -28px; border-radius: 50%; background: radial-gradient(circle, rgba(90, 71, 245, .35), transparent 70%); z-index: 0; animation: orb-breathe 4.5s ease-in-out infinite reverse; }
.orb.idle .halo { opacity: .35; animation-duration: 6s; }
.orb.connecting .halo { animation: orb-spin 1.4s linear infinite; opacity: .8; }
.orb.listening .halo { animation: orb-breathe 2.2s ease-in-out infinite; opacity: .75; }
.orb.listening .core { box-shadow: 0 0 0 6px var(--bg-2), 0 0 0 10px rgba(34, 160, 107, .35), 0 18px 50px rgba(90, 71, 245, .25); }
.orb.speaking .halo, .orb.speaking .halo2 { animation: orb-pulse .9s ease-in-out infinite; opacity: .95; }
.orb.thinking .halo { animation: orb-spin 2.4s linear infinite; opacity: .6; }
.orb.off .core { filter: grayscale(.6); opacity: .7; }
.orb.off .halo, .orb.off .halo2 { animation: none; opacity: .15; }
@keyframes orb-breathe { 0%, 100% { transform: scale(.96) rotate(0deg); } 50% { transform: scale(1.06) rotate(25deg); } }
@keyframes orb-pulse { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.14); } }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orb .halo, .orb .halo2, .rec.on, .top-state.busy::before { animation: none !important; } }
.orb-label { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; text-align: center; }
.orb-sub { color: var(--muted); font-size: .92rem; text-align: center; min-height: 1.4em; }
.said { display: grid; gap: 8px; max-height: 30vh; overflow-y: auto; }
.said:empty { display: none; }
.said p { margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--bg-2); box-shadow: var(--shadow); overflow-wrap: anywhere; unicode-bidi: plaintext; }
.said p.me { background: var(--accent-soft); box-shadow: none; }

/* ---- a session's summary, the templates ---- */
.summary { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; line-height: 1.6; }
.steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.radio-list label { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1rem; font-weight: 600; min-height: var(--tap); }
.radio-list input { width: 22px; height: 22px; min-height: 0; flex: 0 0 auto; }