/* ng-voice-lane.css — VOICE LANE strip (AURA skin, 2026-09-05) */
.vlane{
  --vl-cyan:var(--x-cyan, #37e8ff); --vl-violet:var(--x-violet, #8f6dff); --vl-mint:var(--x-mint, #4ff0b7); --vl-amber:var(--x-amber, #ffb454); --vl-red:var(--x-red, #ff5470);
  --vl-fg:var(--t1,#d7e8ff); --vl-dim:var(--t3,#7f93b3);
  position:relative; margin:6px 0 4px; padding:0;
  border:1px solid color-mix(in srgb, var(--vl-violet, #8f6dff) 28%, transparent); border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb, var(--s2, #0c1628) 92%, transparent),color-mix(in srgb, var(--s1, #060c18) 92%, transparent));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--vl-cyan, #37e8ff) 6%, transparent) inset,0 6px 24px rgba(0,0,0,.35);
  color:var(--vl-fg); font:12px/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.vlane.off{border-color:color-mix(in srgb, var(--vl-amber, #ffb454) 35%, transparent); opacity:.85}
.vlane .vl-head{display:flex; align-items:center; gap:8px; padding:5px 9px; user-select:none}
.vlane .vl-title{letter-spacing:.14em; font-size:10.5px; color:var(--vl-cyan)}
.vlane .vl-title b{color:var(--vl-violet); font-weight:600}
.vlane .vl-count{min-width:18px; text-align:center; padding:0 5px; border-radius:9px; font-size:10px;
  background:color-mix(in srgb, var(--vl-violet, #8f6dff) 18%, transparent); color:var(--vl-fg)}
.vlane .vl-model{font-size:10px; color:var(--vl-dim); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px}
.vlane .vl-spacer{flex:1}
.vlane .vl-toggle,.vlane .vl-kill,.vlane .vl-btns button{
  appearance:none; border:1px solid color-mix(in srgb, var(--vl-cyan, #37e8ff) 28%, transparent); background:color-mix(in srgb, var(--vl-cyan, #37e8ff) 6%, transparent); color:var(--vl-cyan);
  border-radius:6px; padding:1px 7px; font:inherit; font-size:10px; letter-spacing:.08em; cursor:pointer; line-height:16px}
.vlane .vl-toggle{padding:0 6px; min-width:20px}
.vlane .vl-kill{border-color:color-mix(in srgb, var(--vl-mint, #4ff0b7) 40%, transparent); color:var(--vl-mint); background:color-mix(in srgb, var(--vl-mint, #4ff0b7) 7%, transparent)}
.vlane.off .vl-kill{border-color:color-mix(in srgb, var(--vl-amber, #ffb454) 50%, transparent); color:var(--vl-amber); background:color-mix(in srgb, var(--vl-amber, #ffb454) 8%, transparent)}
.vlane .vl-toggle:hover,.vlane .vl-kill:hover,.vlane .vl-btns button:hover{filter:brightness(1.25)}
.vlane .vl-rows{max-height:96px; overflow:auto; padding:0 6px 6px; scrollbar-width:thin}
.vlane.open .vl-rows{max-height:320px}
.vlane .vl-empty{padding:2px 4px 4px; color:var(--vl-dim); font-size:11px}
.vlane .vl-row{display:flex; flex-direction:column; gap:2px; padding:5px 6px; margin-top:4px; border-radius:7px;
  background:rgba(255,255,255,.025); border-left:2px solid color-mix(in srgb, var(--vl-violet, #8f6dff) 45%, transparent)}
.vlane .vl-row[data-st=working]{border-left-color:var(--vl-cyan); animation:vl-pulse 1.2s ease-in-out infinite}
.vlane .vl-row[data-st=ok]{border-left-color:var(--vl-mint)}
.vlane .vl-row[data-st=error]{border-left-color:var(--vl-red)}
.vlane .vl-row[data-st=blocked]{border-left-color:var(--vl-amber)}
.vlane .vl-row[data-st=undone]{border-left-color:color-mix(in srgb, var(--x-slate, #7f93b3) 50%, transparent); opacity:.7}
@keyframes vl-pulse{0%,100%{background:color-mix(in srgb, var(--vl-cyan, #37e8ff) 4%, transparent)}50%{background:color-mix(in srgb, var(--vl-cyan, #37e8ff) 11%, transparent)}}
.vlane .vl-l1,.vlane .vl-l2{display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap}
.vlane .vl-time{color:var(--vl-dim); font-size:10px; flex:0 0 auto}
.vlane .vl-heard{flex:1 1 160px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--vl-fg)}
.vlane .vl-chip{flex:0 0 auto; font-size:9.5px; letter-spacing:.12em; padding:1px 6px; border-radius:5px;
  border:1px solid color-mix(in srgb, var(--vl-violet, #8f6dff) 45%, transparent); color:var(--vl-violet); background:color-mix(in srgb, var(--vl-violet, #8f6dff) 10%, transparent)}
.vlane .vl-chip[data-i=note]{border-color:color-mix(in srgb, var(--vl-mint, #4ff0b7) 50%, transparent); color:var(--vl-mint); background:color-mix(in srgb, var(--vl-mint, #4ff0b7) 9%, transparent)}
.vlane .vl-chip[data-i=reminder]{border-color:color-mix(in srgb, var(--vl-amber, #ffb454) 55%, transparent); color:var(--vl-amber); background:color-mix(in srgb, var(--vl-amber, #ffb454) 9%, transparent)}
.vlane .vl-chip[data-i=research]{border-color:color-mix(in srgb, var(--vl-cyan, #37e8ff) 50%, transparent); color:var(--vl-cyan); background:color-mix(in srgb, var(--vl-cyan, #37e8ff) 9%, transparent)}
.vlane .vl-chip[data-i=blocked]{border-color:color-mix(in srgb, var(--vl-red, #ff5470) 55%, transparent); color:var(--vl-red); background:color-mix(in srgb, var(--vl-red, #ff5470) 9%, transparent)}
.vlane .vl-chip[data-i=question]{border-color:color-mix(in srgb, var(--x-slate, #7f93b3) 45%, transparent); color:var(--vl-dim); background:transparent}
.vlane .vl-res{flex:1 1 140px; min-width:0; color:var(--vl-dim); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vlane .vl-row[data-st=error] .vl-res{color:var(--vl-red)}
.vlane .vl-row[data-st=blocked] .vl-res{color:var(--vl-amber)}
.vlane .vl-said{color:var(--vl-violet); font-size:10.5px; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vlane .vl-btns{display:flex; gap:4px; margin-left:auto; flex:0 0 auto}
.vlane .vl-btns button[data-a=undo]{border-color:color-mix(in srgb, var(--vl-red, #ff5470) 45%, transparent); color:var(--vl-red); background:color-mix(in srgb, var(--vl-red, #ff5470) 7%, transparent)}
.vlane .vl-btns button[data-a=open]{border-color:color-mix(in srgb, var(--vl-mint, #4ff0b7) 45%, transparent); color:var(--vl-mint); background:color-mix(in srgb, var(--vl-mint, #4ff0b7) 7%, transparent)}
.vlane .vl-sum{white-space:pre-wrap; font:11px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--vl-fg);
  padding:6px 8px; margin-top:3px; border-radius:6px; background:color-mix(in srgb, var(--vl-cyan, #37e8ff) 5%, transparent); border:1px solid color-mix(in srgb, var(--vl-cyan, #37e8ff) 15%, transparent); max-height:180px; overflow:auto}

/* inside the mobile voice overlay (#nvm-root), above the HOLD TO TALK bar */
.vlane[data-mode=mobile]{margin:0 10px 6px; flex:0 0 auto; border-radius:12px}
.vlane[data-mode=mobile] .vl-rows{max-height:78px}
.vlane[data-mode=mobile].open .vl-rows{max-height:40vh}
.vlane[data-mode=mobile] .vl-model{display:none}

/* nothing to dock to: floating pill above the mobile FAB */
.vlane[data-mode=float]{position:fixed; left:10px; right:10px; bottom:calc(84px + env(safe-area-inset-bottom)); z-index:150; margin:0}
.vlane[data-mode=float] .vl-rows{max-height:64px}

@media (max-width:640px){
  .vlane .vl-said{display:none}
  .vlane .vl-heard{flex-basis:120px}
}

/* ── QUIET MODE (2026-09-06) ───────────────────────────────────────────────
   The panel had no hidden state: the ▸ toggle only swapped max-height
   96px <-> 320px, so collapsed still cost ~122px above the composer forever.
   `quiet` is the real resting state - header only, ~24px. It lifts by itself
   whenever a row changes (new utterance, research ready, reminder fired) and
   settles back after ATTN_MS. Manual ▸ still pins it open. */
.vlane.quiet{margin:4px 0 3px}
.vlane.quiet .vl-head{padding:3px 9px}
.vlane.quiet .vl-rows{display:none}
.vlane.quiet .vl-model{opacity:.55}

/* the count is the only thing that speaks while quiet */
.vlane.quiet .vl-count{background:color-mix(in srgb, var(--vl-violet, #8f6dff) 26%, transparent)}
.vlane.attn .vl-count{
  background:color-mix(in srgb, var(--vl-cyan, #37e8ff) 30%, transparent);
  color:var(--vl-fg); animation:vl-attn 1.4s ease-in-out infinite}
@keyframes vl-attn{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--vl-cyan, #37e8ff) 45%, transparent)}
  50%    {box-shadow:0 0 0 4px color-mix(in srgb, var(--vl-cyan, #37e8ff) 0%, transparent)}}

/* auto-lifted state shows a couple of rows without the full 320px expansion */
.vlane.attn:not(.open) .vl-rows{max-height:112px}

@media (prefers-reduced-motion: reduce){
  .vlane.attn .vl-count{animation:none}
}


/* ── CROWDFIX (2026-09-07) ─────────────────────────────────────────────────
   Voice replies live in the right pane (ng-voice-replies); the lane only
   routes. So the resting state is GONE (0px) and the attention state is a
   one-line pill, not a panel. Manual ▸ still opens the full panel. */
.vlane.quiet{display:none}
.vlane.quiet + *{margin-top:0}
.vlane.attn{margin:4px 12px; border-radius:999px; backdrop-filter:blur(10px)}
.vlane.attn .vl-head{padding:3px 12px}
.vlane.attn:not(.open) .vl-rows{max-height:0; overflow:hidden; border-top:none; padding-top:0; margin-top:0}
.vlane.attn:not(.open)::after{content:''; }