/* Koda Meet — visual language.
   Warm, soft, generously rounded. Light is home; dark is the same room after
   sunset, re-tuned rather than inverted. Every colour is a token so a theme
   change is one block, never a hunt through components. */

/* Outfit for the interface: geometric, a little wide, with more personality
   than a neutral grotesque - it is what makes the chrome look designed rather
   than defaulted. Instrument Sans for anything anybody reads at length, since
   a geometric face is tiring in a paragraph. JetBrains Mono for codes, where
   telling 0 from O matters. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* warm porcelain, a touch of blush in the neutrals */
  --ground:#F7F2EE;
  --surface:#FFFDFB;
  --tone:#FBF6F2;
  --well:#F2EBE5;
  --line:#EDE3DB;
  --line-firm:#E3D6CC;
  --ink:#2E2731;
  --muted:#726879;
  --faint:#A99EAC;

  --plum:#8468CE;  --plum-soft:#F1EBFC;  --plum-ink:#513A97;
  --live:#5DAF8B;  --live-soft:#E6F5ED;
  --warn:#C98A3E;  --warn-soft:#FBF0E1;
  --danger:#D97068; --danger-soft:#FCEAE7;

  --a-plum:#8468CE;    --a-plum-soft:#F1EBFC;
  --a-apricot:#E39A5D; --a-apricot-soft:#FDEFE2;
  --a-sky:#5AA5D8;     --a-sky-soft:#E6F2FB;
  --a-rose:#DE7C9E;    --a-rose-soft:#FCE8EF;
  --a-moss:#71A97F;    --a-moss-soft:#E8F4EA;
  --a-clay:#C58267;    --a-clay-soft:#FAEBE3;

  /* Calendar events: six pastels, chosen to sit on the porcelain ground
     without any one of them shouting. Each is a fill, a border and an ink,
     so text on them stays readable rather than washing out. */
  --e1:#EAE4FB; --e1-line:#CFC2F2; --e1-ink:#4B3A85;
  --e2:#FBE8DC; --e2-line:#F2CFB2; --e2-ink:#8A5124;
  --e3:#DDEEF7; --e3-line:#BBDAEC; --e3-ink:#215A7C;
  --e4:#FBE2EA; --e4-line:#F1C0D2; --e4-ink:#8A3155;
  --e5:#E2F1E4; --e5-line:#BFDFC5; --e5-ink:#2E6438;
  --e6:#FAF0D9; --e6-line:#EEDCA9; --e6-ink:#7A5C13;

  --shadow-1:0 1px 2px rgba(46,39,49,.045), 0 8px 20px -10px rgba(46,39,49,.12);
  --shadow-2:0 2px 8px rgba(46,39,49,.06), 0 28px 56px -24px rgba(46,39,49,.20);

  /* rounder than round two: containers are pebbles, controls are pills */
  --r-2xl:30px; --r-xl:26px; --r-lg:22px; --r-md:18px; --r-sm:13px;
  --spring:cubic-bezier(.34,1.42,.44,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
  :root:not([data-theme="light"]) {
    --ground:#151119; --surface:#1E1924; --tone:#241E2C; --well:#151119;
    --line:#302838; --line-firm:#3B3145;
    --ink:#F3EDF5; --muted:#ABA1B4; --faint:#756B7E;
    --plum:#B49AF5; --plum-soft:#2C2340; --plum-ink:#DACDFF;
    --live:#74C9A0; --live-soft:#1C3029;
    --warn:#E0A461; --warn-soft:#332615;
    --danger:#E8908A; --danger-soft:#3B2326;
    --a-plum:#B49AF5;    --a-plum-soft:#2C2340;
    --a-apricot:#F0AE79; --a-apricot-soft:#3A2B1D;
    --a-sky:#83C2E9;     --a-sky-soft:#1C2D3A;
    --a-rose:#EE9BBA;    --a-rose-soft:#3A222D;
    --a-moss:#8CC79A;    --a-moss-soft:#1F3324;
    --a-clay:#DFA083;    --a-clay-soft:#3A2820;
    /* After sunset the pastels go deep and muted and the ink goes pale. Same
       six hues, so a meeting keeps its colour when the theme changes. */
    --e1:#2E2748; --e1-line:#443A69; --e1-ink:#D3C6FA;
    --e2:#3A2A1C; --e2-line:#5C4429; --e2-ink:#F3C99F;
    --e3:#1C2E3A; --e3-line:#2B4A5E; --e3-ink:#A8D4EC;
    --e4:#3A2028; --e4-line:#5C333F; --e4-ink:#F0B3C8;
    --e5:#1E3323; --e5-line:#305038; --e5-ink:#AEDCB8;
    --e6:#332B14; --e6-line:#544721; --e6-ink:#E8D49A;
    --shadow-1:0 1px 2px rgba(0,0,0,.32), 0 8px 20px -10px rgba(0,0,0,.5);
    --shadow-2:0 2px 8px rgba(0,0,0,.4), 0 28px 56px -24px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground:#151119; --surface:#1E1924; --tone:#241E2C; --well:#151119;
  --line:#302838; --line-firm:#3B3145;
  --ink:#F3EDF5; --muted:#ABA1B4; --faint:#756B7E;
  --plum:#B49AF5; --plum-soft:#2C2340; --plum-ink:#DACDFF;
  --live:#74C9A0; --live-soft:#1C3029;
  --warn:#E0A461; --warn-soft:#332615;
  --danger:#E8908A; --danger-soft:#3B2326;
  --a-plum:#B49AF5;    --a-plum-soft:#2C2340;
  --a-apricot:#F0AE79; --a-apricot-soft:#3A2B1D;
  --a-sky:#83C2E9;     --a-sky-soft:#1C2D3A;
  --a-rose:#EE9BBA;    --a-rose-soft:#3A222D;
  --a-moss:#8CC79A;    --a-moss-soft:#1F3324;
  --a-clay:#DFA083;    --a-clay-soft:#3A2820;
  --e1:#2E2748; --e1-line:#443A69; --e1-ink:#D3C6FA;
  --e2:#3A2A1C; --e2-line:#5C4429; --e2-ink:#F3C99F;
  --e3:#1C2E3A; --e3-line:#2B4A5E; --e3-ink:#A8D4EC;
  --e4:#3A2028; --e4-line:#5C333F; --e4-ink:#F0B3C8;
  --e5:#1E3323; --e5-line:#305038; --e5-ink:#AEDCB8;
  --e6:#332B14; --e6-line:#544721; --e6-ink:#E8D49A;
  --shadow-1:0 1px 2px rgba(0,0,0,.32), 0 8px 20px -10px rgba(0,0,0,.5);
  --shadow-2:0 2px 8px rgba(0,0,0,.4), 0 28px 56px -24px rgba(0,0,0,.65);
}

/* accent helper: any element carrying data-accent gets that voice's colours.
   --voice-on is what can be read *on* that voice - black or white, worked
   out per palette. Without it an avatar is white initials on whatever the
   accent happens to be, which on a dark palette is a pale circle. */
[data-accent="plum"]   { --voice:var(--a-plum);    --voice-soft:var(--a-plum-soft);    --voice-on:var(--on-a-plum); }
[data-accent="apricot"]{ --voice:var(--a-apricot); --voice-soft:var(--a-apricot-soft); --voice-on:var(--on-a-apricot); }
[data-accent="sky"]    { --voice:var(--a-sky);     --voice-soft:var(--a-sky-soft);     --voice-on:var(--on-a-sky); }
[data-accent="rose"]   { --voice:var(--a-rose);    --voice-soft:var(--a-rose-soft);    --voice-on:var(--on-a-rose); }
[data-accent="moss"]   { --voice:var(--a-moss);    --voice-soft:var(--a-moss-soft);    --voice-on:var(--on-a-moss); }
[data-accent="clay"]   { --voice:var(--a-clay);    --voice-soft:var(--a-clay-soft);    --voice-on:var(--on-a-clay); }

* { box-sizing:border-box; }
html, body { height:100%; }
body {
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Outfit", system-ui, -apple-system, sans-serif;
  font-size:15px; -webkit-font-smoothing:antialiased;
  /* Outfit is geometric and reads wide, so it wants slightly tighter
     tracking and a little more line height than the old face did. */
  letter-spacing:-.005em; line-height:1.5;
  /* A column that is exactly the window tall, so the app never scrolls as a
     page - only the regions inside it do. This used to be a fixed height on
     .app of calc(100vh - 3.4rem), a guess at the topbar, and any change to
     the topbar pushed the call controls off the bottom of the screen. */
  display:flex; flex-direction:column; height:100vh; overflow:hidden;
}
button, input, textarea, select { font-family:inherit; }
::selection { background:var(--plum-soft); color:var(--plum-ink); }

/* ══ shell ═══════════════════════════════════════════════════════════ */
.topbar { display:flex; align-items:center; gap:1rem; padding:.55rem .8rem .55rem 1rem;
  height:3.4rem; }
.topbar-search { flex:1; max-width:34rem; margin:0 auto; display:flex; align-items:center;
  gap:.55rem; background:var(--surface); border-radius:999px; padding:.5rem 1rem;
  box-shadow:var(--shadow-1); transition:box-shadow .2s; }
.topbar-search:focus-within { box-shadow:0 0 0 2.5px color-mix(in srgb, var(--plum) 35%, transparent), var(--shadow-1); }
.topbar-search svg { width:16px; height:16px; color:var(--faint); flex:none; }
.topbar-search input { flex:1; background:none; border:0; font-size:.86rem; color:var(--ink); }
.topbar-search input:focus { outline:none; }
.topbar-search input::placeholder { color:var(--faint); }
.topbar-right { display:flex; align-items:center; gap:.5rem; }
.me-chip { display:flex; align-items:center; gap:.55rem; background:var(--surface);
  border-radius:999px; padding:.3rem .45rem .3rem .4rem; box-shadow:var(--shadow-1); }
.me-text { display:flex; flex-direction:column; line-height:1.15; padding-right:.2rem; }
.me-text b { font-size:.79rem; font-weight:700; }
.me-text span { font-size:.66rem; color:var(--faint); }
.signout { width:1.9rem; height:1.9rem; border-radius:999px; border:0; background:none;
  color:var(--faint); cursor:pointer; display:grid; place-items:center;
  transition:background .2s, color .2s; }
.signout:hover { background:var(--danger-soft); color:var(--danger); }
.signout:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.signout svg { width:15px; height:15px; }

.topbar { flex:0 0 auto; }
.app { display:grid; grid-template-columns:5rem minmax(0, 1fr);
  /* The single row is capped, not auto. Left as auto it grows to whatever
     its tallest child wants - and a call control bar that wraps to two rows
     then pushes the whole app past the bottom of the window. */
  grid-template-rows:minmax(0, 1fr);
  flex:1 1 auto; min-height:0; padding:0 .7rem .7rem 0; gap:.7rem; }
/* Grid and flex children default to min-content size in both directions,
   which is what let a row of eight call buttons push the app wider than the
   window and a wrapped control bar push it taller. Every container in the
   chain has to be allowed to shrink. */
.app > *, .view, .card, .call-body > *, .stage > * { min-width:0; min-height:0; }

.rail { display:flex; flex-direction:column; align-items:center; padding:.9rem 0 .7rem; gap:.3rem; }
.mark { width:38px; height:38px; border-radius:14px; background:var(--plum); color:var(--on-plum);
  display:grid; place-items:center; font-weight:700; font-size:1rem; margin-bottom:.85rem;
  box-shadow:0 8px 18px -8px color-mix(in srgb, var(--plum) 70%, transparent);
  transition:transform .3s var(--spring); }
.mark:hover { transform:rotate(-6deg) scale(1.06); }
.rail button { position:relative; width:3.5rem; height:3.5rem; border-radius:var(--r-md);
  background:none; border:0; cursor:pointer; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.24rem;
  font-weight:600; font-size:.63rem; letter-spacing:.01em;
  transition:background .25s var(--spring), color .2s, transform .25s var(--spring); }
.rail button svg { width:21px; height:21px; }
.rail button:hover { background:var(--tone); color:var(--muted); transform:translateY(-2px); }
.rail button[aria-current="true"] { background:var(--surface); color:var(--plum); box-shadow:var(--shadow-1); }
.rail button:focus-visible { outline:2px solid var(--plum); outline-offset:3px; }
.rail .grow { flex:1; }
.pip { position:absolute; top:.6rem; right:.85rem; width:9px; height:9px; border-radius:50%;
  background:var(--plum); border:2.5px solid var(--ground); }

.view { display:none; min-height:0; min-width:0; }
.view.on { display:grid; }
.card { background:var(--surface); border-radius:var(--r-2xl); box-shadow:var(--shadow-1);
  display:grid; min-height:0; overflow:hidden; }

.bar { display:flex; align-items:center; gap:.85rem; padding:1rem 1.35rem .9rem; border-bottom:1px solid var(--line); }
.bar h2 { font-size:1.06rem; font-weight:700; margin:0; letter-spacing:-.015em; }
.bar .sub { font-size:.79rem; color:var(--faint); }
.bar .right { margin-left:auto; display:flex; align-items:center; gap:.6rem; }

.chip { display:inline-flex; align-items:center; gap:.42rem; font-size:.745rem; font-weight:600;
  padding:.36rem .8rem .36rem .62rem; border-radius:999px; white-space:nowrap; }
.chip.live { background:var(--live-soft); color:var(--live); }
.chip.live i { width:7px; height:7px; border-radius:50%; background:currentColor;
  animation:pulse 2.4s ease-in-out infinite; }
.chip.plum { background:var(--plum-soft); color:var(--plum-ink); }
.chip.warn { background:var(--warn-soft); color:var(--warn); }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(.75);opacity:.5} }
.tc { font-family:"DM Mono",monospace; font-size:.79rem; color:var(--muted); font-variant-numeric:tabular-nums; }

/* ══ avatars ═════════════════════════════════════════════════════════ */
.av { border-radius:50%; background:var(--voice, var(--plum));
  color:var(--voice-on, var(--on-plum)); display:grid;
  place-items:center; font-weight:700; flex:none; letter-spacing:.01em; }
.av.sm { width:1.9rem; height:1.9rem; font-size:.63rem; }
.av.md { width:2.3rem; height:2.3rem; font-size:.74rem; }
.av.lg { width:2.9rem; height:2.9rem; font-size:.88rem; }
.av.soft { background:var(--voice-soft, var(--plum-soft)); color:var(--voice, var(--plum)); }

.cluster { position:relative; width:2.5rem; height:2.5rem; flex:none; }
.cluster .av { position:absolute; width:1.6rem; height:1.6rem; font-size:.55rem;
  border:2.5px solid var(--surface); }
.cluster .av:nth-child(1){ left:0; top:0; }
.cluster .av:nth-child(2){ right:0; top:.15rem; }
.cluster .av:nth-child(3){ left:.45rem; bottom:0; }
[aria-current="true"] .cluster .av { border-color:var(--plum-soft); }

/* ══ CALL ════════════════════════════════════════════════════════════ */
#view-call { grid-template-rows:1fr; }
#view-call .card { grid-template-rows:auto 1fr auto; }
.call-body { display:grid; grid-template-columns:minmax(0, 1fr) 23rem;
  min-height:0; min-width:0; }
.stage { display:flex; flex-direction:column; min-height:0; min-width:0; }
.stage-head { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.35rem .5rem; }
.stage-head .t { font-size:.76rem; font-weight:600; color:var(--faint); }
.seg { margin-left:auto; display:flex; background:var(--well); border-radius:999px; padding:3px; }
.seg button { font-weight:600; font-size:.75rem; color:var(--muted); background:none; border:0;
  padding:.4rem .9rem; border-radius:999px; cursor:pointer;
  transition:background .25s var(--spring), color .2s, box-shadow .2s; }
.seg button[aria-pressed="true"] { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }
.seg button:focus-visible { outline:2px solid var(--plum); outline-offset:1px; }

.stream { flex:1; min-height:0; overflow-y:auto; padding:.35rem 1.35rem 1.3rem;
  display:flex; flex-direction:column; gap:.65rem; scroll-behavior:smooth; }
.stream::-webkit-scrollbar, .msgs::-webkit-scrollbar, .roster::-webkit-scrollbar,
.threadlist::-webkit-scrollbar, .filelist::-webkit-scrollbar, .acts::-webkit-scrollbar { width:9px; }
.stream::-webkit-scrollbar-thumb, .msgs::-webkit-scrollbar-thumb, .roster::-webkit-scrollbar-thumb,
.threadlist::-webkit-scrollbar-thumb, .filelist::-webkit-scrollbar-thumb,
.acts::-webkit-scrollbar-thumb { background:var(--line-firm); border-radius:9px; }

.turn { display:grid; grid-template-columns:2.3rem 1fr; gap:.12rem .8rem; align-items:start;
  padding:.75rem .95rem .8rem .75rem; border-radius:var(--r-lg); background:var(--tone);
  animation:bloom .4s var(--spring) both; }
@keyframes bloom { from{opacity:0;transform:translateY(9px) scale(.985)} to{opacity:1;transform:none} }
.turn .av { grid-column:1; grid-row:1/span 3; margin-top:.12rem; }
.turn .id { grid-column:2; grid-row:1; display:flex; align-items:baseline; gap:.55rem; }
.turn .nm { font-size:.79rem; font-weight:700; color:var(--voice); }
.turn .at { font-family:"DM Mono",monospace; font-size:.67rem; color:var(--faint); margin-left:auto; }
.turn .en { grid-column:2; grid-row:2; font-family:"Instrument Sans",sans-serif; font-size:1.03rem; line-height:1.52; color:var(--ink); text-wrap:pretty; }
.turn .src { grid-column:2; grid-row:3; font-family:"Instrument Sans",sans-serif; font-style:italic; font-size:.84rem;
  line-height:1.45; color:var(--faint); margin-top:.18rem; }
.turn.interim .en { color:var(--muted); }
.turn.interim .en::after { content:""; display:inline-block; width:.42em; height:.9em;
  margin-left:.14em; vertical-align:-.1em; border-radius:3px; background:var(--voice);
  animation:caret .85s steps(2,jump-none) infinite; }
@keyframes caret { 0%,100%{opacity:.8} 50%{opacity:.14} }

.hollow { margin:auto; text-align:center; color:var(--faint); padding:3rem 1rem;
  display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.hollow .ring { width:52px; height:52px; border-radius:50%; background:var(--plum-soft);
  display:grid; place-items:center; color:var(--plum); }
.hollow .ring svg { width:23px; height:23px; }
.hollow b { font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:1rem; color:var(--muted); }
.hollow span { font-size:.84rem; max-width:30ch; line-height:1.5; }

.dock { display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line); }
.tabs { display:flex; gap:.28rem; padding:.85rem .9rem .55rem; }
.tabs button { flex:1; background:none; border:0; cursor:pointer; padding:.48rem .3rem;
  font-weight:600; font-size:.775rem; color:var(--faint); border-radius:999px;
  transition:background .25s var(--spring), color .2s; }
.tabs button:hover { color:var(--muted); background:var(--tone); }
.tabs button[aria-selected="true"] { color:var(--plum-ink); background:var(--plum-soft); }
.tabs button:focus-visible { outline:2px solid var(--plum); outline-offset:1px; }
.pane { display:none; flex:1; min-height:0; flex-direction:column; }
.pane.on { display:flex; }

.roster { overflow-y:auto; padding:.2rem .65rem .7rem; display:flex; flex-direction:column; gap:.3rem; }
.person { display:grid; grid-template-columns:auto 1fr auto; gap:.1rem .7rem; align-items:center;
  padding:.6rem .75rem; border-radius:var(--r-md); transition:background .25s; }
.person:hover { background:var(--tone); }
.person.talking { background:var(--voice-soft); }
.person .av { grid-column:1; grid-row:1/span 2; position:relative; }
.person .av::after { content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2.5px solid var(--voice); opacity:0; }
.person.talking .av::after { animation:ring 1.5s ease-out infinite; }
@keyframes ring { 0%{opacity:.85;transform:scale(.9)} 100%{opacity:0;transform:scale(1.35)} }
.person .nm { grid-column:2; grid-row:1; font-size:.87rem; font-weight:600;
  display:flex; align-items:center; gap:.4rem; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tag { font-size:.62rem; font-weight:700; letter-spacing:.03em; color:var(--plum-ink);
  background:var(--plum-soft); border-radius:999px; padding:.12rem .48rem; flex:none; }
.person .meta { grid-column:2; grid-row:2; display:flex; align-items:center; gap:.55rem; }
.person .lg { font-family:"DM Mono",monospace; font-size:.665rem; color:var(--faint); }
.vu { display:flex; align-items:flex-end; gap:2px; height:11px; }
.vu i { width:3px; height:2px; border-radius:2px; background:var(--line-firm); transition:height .1s linear; }
.person.talking .vu i { background:var(--voice); }
.person .st { grid-column:3; grid-row:1/span 2; font-size:.68rem; color:var(--faint); }

/* ══ messages ════════════════════════════════════════════════════════ */
.msgs { flex:1; min-height:0; overflow-y:auto; padding:.7rem 1rem 1rem;
  display:flex; flex-direction:column; gap:.6rem; }
.msg { display:grid; grid-template-columns:1.9rem minmax(0,1fr); gap:.16rem .6rem; max-width:90%;
  animation:bloom .34s var(--spring) both; }
.msg .av { grid-column:1; grid-row:1/span 3; align-self:end; }
.msg .nm { grid-column:2; grid-row:1; font-size:.725rem; font-weight:700; color:var(--voice); padding-left:.25rem; }
.msg .bubble { grid-column:2; grid-row:2; background:var(--tone); border-radius:var(--r-md); border-bottom-left-radius:8px;
  padding:.62rem .85rem .68rem; font-family:"Instrument Sans",sans-serif; min-width:0; }
.msg .tx { font-size:.92rem; line-height:1.47; color:var(--ink); overflow-wrap:anywhere; }
.msg .orig { font-style:italic; font-size:.785rem; color:var(--faint); margin-top:.22rem; overflow-wrap:anywhere; }
.msg .at { grid-column:2; grid-row:3; font-family:"DM Mono",monospace; font-size:.63rem; color:var(--faint); padding-left:.35rem; }
.msg.mine { grid-template-columns:minmax(0,1fr); margin-left:auto; text-align:right; }
.msg.mine .bubble, .msg.mine .at { grid-column:1; }
.msg.mine .av, .msg.mine .nm { display:none; }
.msg.mine .bubble { background:var(--plum-soft); border-radius:var(--r-md);
  border-bottom-right-radius:8px; text-align:left; }
.msg.mine .tx { color:var(--plum-ink); }
.msg.mine .orig { color:color-mix(in srgb, var(--plum-ink) 60%, transparent); }
.msg.mine .at { padding:0 .35rem 0 0; }

.attach { display:flex; align-items:center; gap:.6rem; margin-top:.5rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.55rem .65rem;
  text-decoration:none; color:inherit; transition:border-color .2s, transform .2s var(--spring); }
.attach:hover { border-color:var(--plum); transform:translateY(-1px); }
.attach .ic { width:33px; height:33px; border-radius:11px; background:var(--plum-soft);
  color:var(--plum); display:grid; place-items:center; flex:none; }
.attach .ic svg { width:16px; height:16px; }
.attach .fn { font-family:"Plus Jakarta Sans"; font-size:.8rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attach .fs { font-family:"Plus Jakarta Sans"; font-size:.67rem; color:var(--faint); }

.composer { padding:.6rem .9rem .9rem; }
.composer .hint { font-size:.71rem; font-weight:600; color:var(--faint); margin:0 .4rem .45rem;
  display:flex; align-items:center; gap:.3rem; }
.composer .hint em { font-style:normal; color:var(--plum); }
.crow { display:flex; gap:.4rem; align-items:flex-end; background:var(--well);
  border-radius:var(--r-lg); padding:.35rem .35rem .35rem .55rem;
  transition:box-shadow .2s; }
.crow:focus-within { box-shadow:0 0 0 2.5px color-mix(in srgb, var(--plum) 40%, transparent); }
.crow textarea { flex:1; resize:none; background:none; border:0; color:var(--ink);
  font:400 .92rem/1.45 "Nunito Sans",sans-serif; padding:.55rem .3rem; min-height:2.4rem; max-height:7rem; }
.crow textarea:focus { outline:none; }
.crow textarea::placeholder { color:var(--faint); }
.iconbtn { width:2.4rem; height:2.4rem; border-radius:999px; border:0; cursor:pointer;
  background:none; color:var(--faint); display:grid; place-items:center; flex:none;
  transition:background .25s var(--spring), color .2s, transform .25s var(--spring); }
.iconbtn:hover { background:var(--surface); color:var(--muted); transform:scale(1.07); }
.iconbtn:focus-visible { outline:2px solid var(--plum); outline-offset:1px; }
.iconbtn svg { width:17px; height:17px; }
.iconbtn.send { background:var(--plum); color:var(--on-plum); }
.iconbtn.send:hover { background:var(--plum-ink); color:var(--on-plum-ink); }

/* ══ files ═══════════════════════════════════════════════════════════ */
.drop { margin:.7rem 1rem; border:2px dashed var(--line-firm); background:var(--well);
  border-radius:var(--r-xl); padding:1.35rem 1rem; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  transition:border-color .25s, background .25s, transform .25s var(--spring); }
.drop:hover, .drop.over { border-color:var(--plum); background:var(--plum-soft); transform:translateY(-2px); }
.drop:focus-visible { outline:2px solid var(--plum); outline-offset:3px; }
.drop .ring { width:46px; height:46px; border-radius:50%; background:var(--surface);
  color:var(--plum); display:grid; place-items:center; box-shadow:var(--shadow-1); }
.drop .ring svg { width:20px; height:20px; }
.drop b { font-family:"Instrument Sans",sans-serif; font-weight:600; font-size:.9rem; color:var(--muted); }
.drop span { font-size:.735rem; color:var(--faint); }
.filelist { flex:1; overflow-y:auto; padding:.2rem .65rem .7rem; display:flex; flex-direction:column; gap:.28rem; }
.file { display:grid; grid-template-columns:auto 1fr auto; gap:.06rem .75rem; align-items:center;
  padding:.55rem .7rem; border-radius:var(--r-md); transition:background .25s; }
.file:hover { background:var(--tone); }
.file .ic { grid-column:1; grid-row:1/span 2; width:37px; height:37px; border-radius:13px; background:var(--plum-soft);
  color:var(--plum); display:grid; place-items:center; }
.file .ic svg { width:17px; height:17px; }
.file .fn { grid-column:2; grid-row:1; font-size:.865rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file .fm { grid-column:2; grid-row:2; font-size:.715rem; color:var(--faint); }
.file .dl { grid-column:3; grid-row:1/span 2; width:2.2rem; height:2.2rem; border-radius:999px; border:0;
  background:none; color:var(--faint); cursor:pointer; display:grid; place-items:center;
  text-decoration:none; transition:background .2s, color .2s; }
.file .dl:hover { color:var(--plum); background:var(--plum-soft); }
.file .dl svg { width:16px; height:16px; }
.prog { grid-column:2; height:5px; border-radius:5px; background:var(--line); margin-top:.4rem; overflow:hidden; }
.prog i { display:block; height:100%; border-radius:5px; background:var(--plum); width:0; transition:width .2s; }

/* ══ controls ════════════════════════════════════════════════════════ */
.controls { display:flex; align-items:center; gap:.45rem; padding:.85rem 1.1rem;
  border-top:1px solid var(--line); flex-wrap:wrap; }
.ctl { display:inline-flex; align-items:center; gap:.48rem; font-weight:600; font-size:.815rem;
  color:var(--ink); background:var(--tone); border:0; border-radius:999px; padding:.66rem 1rem;
  cursor:pointer; transition:background .25s var(--spring), transform .2s var(--spring), color .2s; }
.ctl:hover { background:var(--well); transform:translateY(-2px); }
.ctl:active { transform:translateY(0) scale(.97); }
.ctl:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.ctl svg { width:16px; height:16px; }
.ctl .slash { display:none; }
.ctl[aria-pressed="true"] { background:var(--danger-soft); color:var(--danger); }
.ctl[aria-pressed="true"] .slash { display:block; }
.ctl.go { background:var(--plum); color:var(--on-plum); }
.ctl.go:hover { background:var(--plum-ink); }
.ctl.leave { background:var(--danger-soft); color:var(--danger); }
.ctl.leave:hover { background:var(--danger); color:var(--on-danger); }
.ctl[disabled] { opacity:.45; pointer-events:none; }
.grow { flex:1; }
select.pick { font-weight:600; font-size:.79rem; color:var(--ink); background:var(--tone);
  border:0; border-radius:999px; padding:.66rem .85rem; cursor:pointer; }
select.pick:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }

/* ══ chats ═══════════════════════════════════════════════════════════ */
#view-chat .card { grid-template-columns:18.5rem 1fr; }
.threads { border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; }
.threads-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem .55rem; }
.threads-head h2 { font-size:1.06rem; font-weight:700; margin:0; letter-spacing:-.015em; }
.newchat { display:inline-flex; align-items:center; gap:.32rem; font-weight:600; font-size:.755rem;
  color:var(--plum-ink); background:var(--plum-soft); border:0; border-radius:999px;
  padding:.44rem .8rem .44rem .6rem; cursor:pointer; transition:transform .25s var(--spring); }
.newchat:hover { transform:translateY(-2px); }
.newchat:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.newchat svg { width:14px; height:14px; }
.search { margin:0 .9rem .6rem; background:var(--well); border-radius:999px; padding:.5rem .9rem;
  display:flex; align-items:center; gap:.5rem; }
.search svg { width:15px; height:15px; color:var(--faint); flex:none; }
.search input { flex:1; background:none; border:0; font-size:.815rem; color:var(--ink); }
.search input:focus { outline:none; }
.search input::placeholder { color:var(--faint); }
.threadlist { overflow-y:auto; padding:0 .6rem .7rem; display:flex; flex-direction:column; gap:.22rem;
  /* Shrinks so the teams block below it keeps its own space. */
  flex:1 1 auto; min-height:4rem; }
.tsec { font-size:.665rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); padding:.6rem .55rem .28rem; }
.thread { display:grid; grid-template-columns:auto minmax(0,1fr); gap:.06rem .7rem; align-items:center;
  padding:.6rem .65rem; border-radius:var(--r-md); cursor:pointer; border:0; background:none;
  text-align:left; width:100%; color:inherit; transition:background .25s, transform .2s var(--spring); }
.thread:hover { background:var(--tone); }
.thread:focus-visible { outline:2px solid var(--plum); outline-offset:-2px; }
.thread[aria-current="true"] { background:var(--plum-soft); }
.thread .av, .thread .cluster { grid-column:1; grid-row:1/span 2; }
.thread .nm { grid-column:2; grid-row:1; font-size:.86rem; font-weight:600; display:flex; align-items:center; gap:.38rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thread .cnt { font-size:.645rem; font-weight:600; color:var(--faint); }
.thread .pv { grid-column:2; grid-row:2; font-size:.775rem; color:var(--muted); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-family:"Instrument Sans",sans-serif; }
.thread .pv b { font-weight:600; color:var(--faint); }
.lg-pill { display:inline-block; font-size:.6rem; font-weight:700; color:var(--plum);
  margin-left:.3rem; text-transform:uppercase; }
.chat-main { display:flex; flex-direction:column; min-height:0; }
.members { display:flex; align-items:center; }
.members .av { border:2.5px solid var(--surface); margin-left:-.5rem; }
.members .av:first-child { margin-left:0; }

/* ══ files + feed views ══════════════════════════════════════════════ */
#view-files .card, #view-feed .card { grid-template-rows:auto 1fr; }
/* On a wide window the Files card fills the whole pane; cap and centre its
   body so the drop zone and list read as a column rather than one thin band
   stretched across the screen. The header bar stays full width. */
.files-body { display:flex; flex-direction:column; min-height:0;
  width:100%; max-width:52rem; margin-inline:auto; }
/* With tabs present, the item count belongs at the far right of the bar. */
.bar:has(.files-tabs) .sub { margin-left:auto; }
.acts { overflow-y:auto; padding:.6rem .8rem .8rem; display:flex; flex-direction:column; gap:.28rem; }
.act { display:grid; grid-template-columns:auto 1fr auto; gap:.06rem .75rem; align-items:center;
  padding:.65rem .8rem; border-radius:var(--r-md); transition:background .25s; }
.act:hover { background:var(--tone); }
.act .av { grid-column:1; grid-row:1/span 2; }
.act .t { grid-column:2; grid-row:1; font-size:.875rem; font-weight:600; }
.act .s { grid-column:2; grid-row:2; font-size:.775rem; color:var(--faint); font-family:"Instrument Sans",sans-serif; }
.act .w { grid-column:3; grid-row:1/span 2; font-family:"DM Mono",monospace; font-size:.67rem; color:var(--faint); }

/* ══ toast ═══════════════════════════════════════════════════════════ */
.toast { position:fixed; left:50%; bottom:1.6rem; transform:translate(-50%, 1.5rem);
  background:var(--ink); color:var(--surface); font-size:.83rem; font-weight:600;
  padding:.7rem 1.1rem; border-radius:999px; box-shadow:var(--shadow-2);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--spring); z-index:50; }
.toast.on { opacity:1; transform:translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation:none !important; transition:none !important; }
  .stream, .msgs { scroll-behavior:auto; }
}
/* This block used to let the page scroll below 70rem - body{overflow:auto},
   .app{height:auto; min-height:100vh} and fixed pixel caps on the panels.
   That put the app a whole viewport tall *underneath* a 54px topbar, so on
   any window narrower than 1120px the call controls sat below the fold and
   the video had to be scrolled to. The layout is now a column that is
   exactly the window tall at every size, with only the inner regions
   scrolling - see the responsive block in org.css, which does the rest. */
@media (max-width:70rem) {
  #view-chat .card { grid-template-columns:minmax(0, 1fr); }
  .threads { border-right:0; border-bottom:1px solid var(--line);
             max-height:min(30vh, 15rem); }
  /* No max-height on .stream or .msgs: they are flex children that already
     take exactly the space left over, and a fixed cap fights that. */
}

/* ══ video ═══════════════════════════════════════════════════════════ */
/* The stage carries either the transcript or a grid of faces. Video is off
   until somebody turns a camera on, because an empty grid of grey rectangles
   is worse than no grid. */
/* The faces share whatever height is going, rather than each insisting on
   16:10 and making the area scroll. A video call you have to scroll is not a
   video call. */
.tiles { display:none; gap:.6rem; padding:.35rem 1.35rem .6rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  grid-auto-rows:minmax(0, 1fr); align-content:stretch;
  flex:1 1 auto; min-height:0; overflow:hidden; }
.tiles.on { display:grid; }
.tile { position:relative; min-height:0; border-radius:var(--r-lg);
  overflow:hidden; background:var(--well); display:grid; place-items:center;
  animation:bloom .4s var(--spring) both; }
.tile video { width:100%; height:100%; object-fit:cover; display:block;
  transform:scaleX(-1); }          /* mirrored, as everyone expects of themselves */
.tile.remote video { transform:none; }
.tile .placeholder { display:grid; place-items:center; gap:.5rem; }
.tile .placeholder .av { width:3.4rem; height:3.4rem; font-size:1.05rem; }
.tile .nameplate { position:absolute; left:.55rem; bottom:.55rem; display:flex;
  align-items:center; gap:.4rem; background:color-mix(in srgb, var(--ink) 72%, transparent);
  color:var(--on-ink); border-radius:999px; padding:.26rem .6rem .26rem .45rem;
  font-size:.735rem; font-weight:600; backdrop-filter:blur(6px); }
.tile .nameplate .dot { width:6px; height:6px; border-radius:50%; background:var(--voice); }
.tile.talking { outline:2.5px solid var(--voice); outline-offset:-2.5px; }
.tile .muted-badge { position:absolute; right:.55rem; bottom:.55rem; width:1.6rem;
  height:1.6rem; border-radius:999px; display:grid; place-items:center;
  color:var(--on-danger);
  background:color-mix(in srgb, var(--danger) 88%, transparent); }
.tile .muted-badge svg { width:12px; height:12px; }

.stage-toggle { display:flex; background:var(--well); border-radius:999px; padding:3px; }
.stage-toggle button { border:0; background:none; cursor:pointer; padding:.36rem .8rem;
  border-radius:999px; font-weight:600; font-size:.75rem; color:var(--muted);
  transition:background .25s var(--spring), color .2s, box-shadow .2s; }
.stage-toggle button[aria-pressed="true"] { background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-1); }
.stage-toggle button:focus-visible { outline:2px solid var(--plum); outline-offset:1px; }

/* ══ recording ═══════════════════════════════════════════════════════ */
.chip.rec { background:var(--danger-soft); color:var(--danger); }
.chip.rec i { width:8px; height:8px; border-radius:50%; background:currentColor;
  animation:pulse 1.4s ease-in-out infinite; }
.rec-notice { position:fixed; top:1.1rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem; background:var(--danger);
  color:var(--on-danger); border-radius:999px; padding:.6rem 1.1rem .6rem .85rem;
  box-shadow:var(--shadow-2); z-index:55; font-size:.85rem; font-weight:600;
  animation:drop .4s var(--spring) both; }
.rec-notice[hidden] { display:none !important; }
.rec-notice i { width:9px; height:9px; border-radius:50%; background:#fff;
  animation:pulse 1.4s ease-in-out infinite; }
.ctl.recording { background:var(--danger); color:var(--on-danger); }
.ctl.recording:hover { background:var(--danger); }

/* ══ calendar ════════════════════════════════════════════════════════ */
.agenda { overflow-y:auto; padding:.7rem .9rem 1rem; display:flex; flex-direction:column; gap:.2rem; }
.agenda::-webkit-scrollbar { width:9px; }
.agenda::-webkit-scrollbar-thumb { background:var(--line-firm); border-radius:9px; }
.daymark { display:flex; align-items:baseline; gap:.6rem; padding:.9rem .55rem .35rem; }
.daymark b { font-size:.82rem; font-weight:700; }
.daymark span { font-size:.735rem; color:var(--faint); }
.daymark.today b { color:var(--plum); }

.meeting { display:grid; grid-template-columns:4.4rem 1fr auto; gap:.1rem .85rem;
  align-items:center; padding:.7rem .8rem; border-radius:var(--r-md);
  transition:background .25s; }
.meeting:hover { background:var(--tone); }
.meeting.now { background:var(--plum-soft); }
.meeting .when { grid-column:1; grid-row:1/span 2; text-align:right;
  font-family:"DM Mono",monospace; font-variant-numeric:tabular-nums; }
.meeting .when b { display:block; font-size:.9rem; font-weight:500; color:var(--ink); }
.meeting .when span { font-size:.66rem; color:var(--faint); }
.meeting.now .when b { color:var(--plum-ink); }
.meeting .ttl { grid-column:2; grid-row:1; font-size:.9rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meeting .who { grid-column:2; grid-row:2; display:flex; align-items:center; gap:.45rem;
  margin-top:.18rem; }
.meeting .who .members .av { border:2.5px solid var(--surface); margin-left:-.45rem; }
.meeting .who .members .av:first-child { margin-left:0; }
.meeting.now .who .members .av { border-color:var(--plum-soft); }
.meeting .who small { font-size:.715rem; color:var(--faint); }
.meeting .act { grid-column:3; grid-row:1/span 2; display:flex; align-items:center; gap:.35rem; }
.meeting.past { opacity:.55; }
.meeting .drop-mt { width:2.1rem; height:2.1rem; border-radius:999px; border:0; background:none;
  color:var(--faint); cursor:pointer; display:grid; place-items:center; }
.meeting .drop-mt:hover { color:var(--danger); background:var(--danger-soft); }
.meeting .drop-mt svg { width:15px; height:15px; }

/* ══ incoming call ═══════════════════════════════════════════════════ */
/* An author `display` rule beats the [hidden] attribute, so without this the
   banner is permanently on screen - and being position:fixed across the top,
   it swallows every click aimed at the bar beneath it. That was the bug. */
.ring-banner[hidden] { display:none !important; }
.ring-banner { position:fixed; top:1.1rem; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:.85rem; background:var(--surface);
  border-radius:var(--r-xl); box-shadow:var(--shadow-2); padding:.8rem 1rem .8rem .9rem;
  z-index:60; animation:drop .45s var(--spring) both; max-width:min(92vw, 30rem); }
@keyframes drop { from{opacity:0;transform:translate(-50%,-1.2rem)} to{opacity:1;transform:translate(-50%,0)} }
.ring-banner .av { animation:pulse 1.6s ease-in-out infinite; }
.ring-text { display:flex; flex-direction:column; min-width:0; }
.ring-text strong { font-size:.9rem; font-weight:700; }
.ring-text span { font-size:.775rem; color:var(--faint); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }

/* ══ sheets ══════════════════════════════════════════════════════════ */
.sheet { border:0; border-radius:var(--r-xl); background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-2); padding:0; max-width:26rem; width:calc(100vw - 2rem); }
.sheet::backdrop { background:rgba(46,39,49,.42); backdrop-filter:blur(3px); }
.sheet form { padding:1.3rem 1.4rem 1.2rem; display:flex; flex-direction:column; gap:.85rem; }
.sheet h3 { margin:0; font-size:1.05rem; font-weight:700; letter-spacing:-.015em; }
.sheet-note { margin:0; font-size:.815rem; color:var(--faint); font-family:"Instrument Sans",sans-serif; }
.sheet label { display:flex; flex-direction:column; gap:.3rem; font-size:.775rem;
  font-weight:600; color:var(--muted); }
.sheet input { font-size:.9rem; color:var(--ink); background:var(--well); border:0;
  border-radius:var(--r-sm); padding:.6rem .7rem; font-weight:400; }
.sheet input:focus { outline:2px solid var(--plum); outline-offset:0; }
.sheet .pair { display:grid; grid-template-columns:1fr 7rem; gap:.7rem; }
.sheet fieldset { border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.4rem; }
.sheet legend { padding:0; font-size:.775rem; font-weight:600; color:var(--muted); }
.picker { display:flex; flex-wrap:wrap; gap:.4rem; }
.pick-person { display:inline-flex; align-items:center; gap:.45rem; border:0; cursor:pointer;
  background:var(--tone); color:var(--ink); border-radius:999px; padding:.35rem .75rem .35rem .4rem;
  font-size:.8rem; font-weight:600; transition:background .2s, transform .2s var(--spring); }
.pick-person:hover { transform:translateY(-1px); }
.pick-person[aria-pressed="true"] { background:var(--plum-soft); color:var(--plum-ink); }
.pick-person .av { width:1.55rem; height:1.55rem; font-size:.55rem; }
.pick-person:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.sheet-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.3rem; }

/* ══ spelling help ═══════════════════════════════════════════════════ */
/* Sits above the composer and only appears when there is something to say.
   Corrections are offered, never applied behind the writer's back. */
.spellbar { display:none; flex-wrap:wrap; gap:.35rem; margin:0 .35rem .45rem; }
.spellbar.on { display:flex; }
.fix { display:inline-flex; align-items:center; gap:.3rem; border:0; cursor:pointer;
  background:var(--plum-soft); color:var(--plum-ink); border-radius:999px;
  padding:.3rem .7rem; font:600 .755rem/1 "Plus Jakarta Sans";
  transition:transform .2s var(--spring), background .2s; }
.fix:hover { transform:translateY(-1px); background:var(--plum); color:var(--on-plum); }
.fix:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }
.fix s { opacity:.55; text-decoration-thickness:1px; }
/* "maybe" means we would not choose for you - two candidates were too close. */
.fix.maybe { background:var(--well); color:var(--muted); }
.fix.maybe:hover { background:var(--tone); color:var(--ink); }