/* Live voice (app/js/22-realtime-voice.js).
   Talk panel: floating, see-through, draggable; shows only the last few lines.
   Workspace (.vx-desk): tables, charts, change cards and the full transcript.
   Both sit above the detail drawer (900), below dialogs (1000). */
.vx-dock{ position:fixed; z-index:950; top:calc(var(--top-h) + 20px); right:20px; width:320px; display:flex; flex-direction:column; gap:10px; padding:12px;
  background:rgba(255,255,255,.62); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid rgba(20,24,31,.10); border-radius:16px; box-shadow:0 12px 32px rgba(20,24,31,.12), 0 1px 2px rgba(20,24,31,.06);
  font-family:var(--font-ui); animation:vxIn .28s cubic-bezier(.16,1,.3,1); transition:background .2s ease; touch-action:none; }
.vx-dock:hover, .vx-dock:focus-within, .vx-dock.dragging{ background:rgba(255,255,255,.84); }
.vx-dock.dragging{ transition:none; user-select:none; box-shadow:0 18px 44px rgba(20,24,31,.18); }
.vx-dock.hidden, .vx-desk.hidden{ display:none; }
@keyframes vxIn{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.vx-head{ display:flex; align-items:center; gap:10px; cursor:grab; }
.vx-dock.dragging .vx-head{ cursor:grabbing; }
.vx-orb{ width:44px; height:44px; flex:none; }
.vx-mid{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.vx-state{ font-family:var(--font-num); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-700); }
.vx-dock[data-state="speaking"] .vx-state{ color:var(--ai); }
.vx-dock[data-state="muted"] .vx-state, .vx-dock[data-state="connecting"] .vx-state{ color:var(--g500); }
.vx-act{ font-size:12px; color:var(--g600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:16px; opacity:0; transition:opacity .2s ease; }
.vx-act.on{ opacity:1; }
.vx-grip{ display:grid; grid-template-columns:repeat(2, 3px); gap:3px; padding:4px; opacity:.45; }
.vx-grip i{ width:3px; height:3px; border-radius:50%; background:var(--g600); }
/* Last few lines only, fading out at the top as the conversation moves. */
.vx-mini{ max-height:132px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 36px); mask-image:linear-gradient(to bottom, transparent 0, #000 36px); }
.vx-mini-empty{ font-size:var(--f13); color:var(--g500); line-height:1.5; }
.vx-mini .vx-line{ font-size:var(--f13); line-height:1.45; color:var(--g900); animation:vxLineIn .25s ease; }
.vx-mini .vx-line b{ font-family:var(--font-num); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; color:var(--g500); margin-right:6px; }
.vx-mini .vx-line.margyn b{ color:var(--ai); }
.vx-mini .vx-line.user{ color:var(--g600); }
@keyframes vxLineIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.vx-type{ display:flex; gap:6px; }
.vx-type input{ flex:1; min-width:0; height:34px; border:1px solid rgba(20,24,31,.12); border-radius:var(--r-ctl); padding:0 10px; font-family:var(--font-ui); font-size:var(--f13); color:var(--g900); background:rgba(255,255,255,.7); }
.vx-type input:focus{ outline:none; border-color:var(--brand); background:#fff; }
.vx-type button{ width:34px; height:34px; border:0; border-radius:var(--r-ctl); background:var(--g900); color:var(--g0); font-size:15px; cursor:pointer; }
.vx-ctrls{ display:flex; align-items:center; gap:8px; }
.vx-btn{ position:relative; width:38px; height:38px; flex:none; display:grid; place-items:center; border:1px solid rgba(20,24,31,.12); background:rgba(255,255,255,.7); color:var(--g600);
  border-radius:50%; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.vx-btn:hover{ background:#fff; color:var(--g900); }
.vx-btn svg{ width:18px; height:18px; }
.vx-btn.on{ background:var(--g900); border-color:var(--g900); color:var(--g0); }
.vx-btn:focus-visible, .vx-end:focus-visible, .vx-idea:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.vx-badge{ position:absolute; top:5px; right:5px; width:8px; height:8px; border-radius:50%; background:var(--ai); border:2px solid var(--g0); }
.vx-badge.hidden{ display:none; }
.vx-end{ margin-left:auto; height:38px; flex:none; padding:0 18px; border:0; border-radius:999px; background:var(--neg); color:#fff; font-family:var(--font-ui); font-weight:700; font-size:var(--f13); cursor:pointer; }
.vx-end:hover{ background:#9A3825; }

.vx-desk{ position:fixed; z-index:949; right:356px; top:calc(var(--top-h) + 20px); width:460px; max-height:min(72vh, calc(100vh - var(--top-h) - 40px));
  display:flex; flex-direction:column; background:rgba(255,255,255,.80); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(20,24,31,.10); border-radius:16px; box-shadow:0 12px 32px rgba(20,24,31,.12), 0 1px 2px rgba(20,24,31,.06);
  font-family:var(--font-ui); animation:vxDeskIn .22s cubic-bezier(.16,1,.3,1); transition:background .2s ease; }
.vx-desk:hover, .vx-desk.dragging{ background:rgba(255,255,255,.94); }
.vx-desk.dragging{ transition:none; user-select:none; box-shadow:0 18px 44px rgba(20,24,31,.18); }
@keyframes vxDeskIn{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
.vx-desk-h{ display:flex; align-items:center; justify-content:space-between; padding:10px 10px 10px 16px; border-bottom:1px solid rgba(20,24,31,.08); flex:none; cursor:grab; }
.vx-desk.dragging .vx-desk-h{ cursor:grabbing; }
.vx-desk-h b{ font-size:var(--f14); color:var(--g900); }
.vx-desk-h span{ font-size:var(--f12); color:var(--g500); margin-left:8px; }
.vx-desk-acts{ display:flex; align-items:center; gap:2px; }
.vx-link{ border:0; background:none; font-family:var(--font-ui); font-size:var(--f12); font-weight:600; color:var(--g600); padding:6px 8px; border-radius:var(--r-ctl); cursor:pointer; }
.vx-link:hover{ background:var(--g50); color:var(--g900); }
.vx-feed{ flex:1; min-height:0; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain; }
.vx-line .who{ font-family:var(--font-num); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--g500); margin-bottom:2px; }
.vx-line.margyn .who{ color:var(--ai); }
.vx-line .txt{ font-size:var(--f13); line-height:1.55; color:var(--g900); }
.vx-line.user .txt{ color:var(--g600); }
.vx-line.pending .txt::before{ content:'…'; color:var(--g400); }
.vx-card{ border:1px solid rgba(20,24,31,.08); border-radius:12px; padding:14px 16px; background:rgba(255,255,255,.78); animation:vxDeskIn .22s cubic-bezier(.16,1,.3,1); }
.vx-card h4{ margin:0 0 6px; font-size:var(--f13); font-weight:700; color:var(--g900); }
.vx-card.vx-change{ border-color:var(--ai); box-shadow:0 0 0 3px var(--ai-50); }
.vx-card.vx-change.vx-done{ border-color:var(--brand); box-shadow:none; }
.vx-card.vx-change.vx-void{ border-color:var(--g200); box-shadow:none; opacity:.7; }
.vx-card .action-card{ margin:8px 0 0; }
.vx-note{ font-size:var(--f12); color:var(--g500); line-height:1.5; margin-top:6px; }
.vx-tablewrap{ overflow-x:auto; }
.vx-card table{ width:100%; border-collapse:collapse; }
.vx-card th{ text-align:left; font-family:var(--font-num); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--g500); font-weight:500; border-bottom:1px solid var(--g200); padding:6px 14px 6px 0; white-space:nowrap; }
.vx-card td{ font-family:var(--font-num); font-size:var(--f12); color:var(--g900); border-bottom:1px solid var(--g100); padding:7px 14px 7px 0; font-variant-numeric:tabular-nums; }
/* Only the last column sits flush right; a right-aligned amount must never touch the column after it. */
.vx-card th:last-child, .vx-card td:last-child{ padding-right:0; }
.vx-card tr:last-child td{ border-bottom:0; }
.vx-chart{ position:relative; height:190px; margin-top:4px; }
.vx-empty{ display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.vx-empty-t{ font-size:var(--f13); color:var(--g600); line-height:1.5; }
.vx-ideas{ display:flex; flex-wrap:wrap; gap:6px; }
.vx-idea{ border:1px solid var(--g200); background:var(--g25); color:var(--g900); border-radius:999px; padding:6px 11px; font-family:var(--font-ui); font-size:var(--f12); cursor:pointer; text-align:left; }
.vx-idea:hover{ border-color:var(--brand); background:var(--brand-50); }
.vx-fine{ font-size:var(--f12); color:var(--g500); }

/* Margyn pointing at something it just did on screen. */
.vx-spot{ animation:vxSpot 2.4s ease-out; }
@keyframes vxSpot{ 0%,30%{ box-shadow:inset 0 0 0 2px var(--ai); background-color:var(--ai-50); } 100%{ box-shadow:inset 0 0 0 2px transparent; } }

/* Top-bar entry point. */
.mg-tb-btn.mg-voice{ color:var(--brand-700); }
body.vx-on .mg-tb-btn.mg-voice{ background:var(--brand-50); }

@media (max-width:1280px){ .vx-desk{ right:auto; left:calc(var(--rail-w) + 20px); width:420px; } }
@media (max-width:900px){
  .vx-dock{ top:auto !important; left:12px !important; right:12px !important; bottom:12px; width:auto; }
  .vx-head{ cursor:default; } .vx-grip{ display:none; }
  .vx-mini{ max-height:84px; }
  body.vx-on .toast-host{ bottom:250px; }
  .vx-desk{ left:12px !important; right:12px !important; width:auto; top:calc(var(--top-h) + 12px) !important; bottom:auto; max-height:45vh; }
  .vx-desk-h{ cursor:default; }
  .vx-kpis{ grid-template-columns:repeat(2, 1fr); }
}
.vx-summary{ font-size:var(--f13); color:var(--g900); line-height:1.5; margin-top:6px; }
.vx-card .action-card-done{ font-size:var(--f12); color:var(--g500); margin-top:4px; }
.vx-card.vx-done h4{ color:var(--brand-700); }
.vx-recap{ margin-top:8px; padding:8px 10px; background:var(--g25); border-radius:var(--r-ctl); font-size:var(--f12); color:var(--g600); line-height:1.5; display:flex; flex-direction:column; gap:4px; }
.vx-recap b{ color:var(--g900); font-weight:600; }
.vx-choice{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.vx-idea.on{ border-color:var(--brand); background:var(--brand-50); color:var(--brand-700); font-weight:600; }
.vx-idea:disabled{ cursor:default; opacity:.6; }
.vx-idea.on:disabled{ opacity:1; }
.vx-mini .vx-line.pending{ display:none; }

/* Views Margyn draws in the workspace (show_view). */
.vx-card .vx-sub{ font-size:var(--f12); color:var(--g500); margin:-2px 0 10px; }
.vx-kpis{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:10px; }
.vx-kpi{ background:rgba(244,243,239,.7); border-radius:var(--r-ctl); padding:8px 10px; min-width:0; }
.vx-kpi span{ display:block; font-size:11px; color:var(--g600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vx-kpi b{ display:block; font-family:var(--font-num); font-size:var(--f16); font-weight:600; color:var(--g900); margin-top:2px; font-variant-numeric:tabular-nums; }
.vx-kpi i{ display:block; font-style:normal; font-family:var(--font-num); font-size:11px; color:var(--g500); margin-top:1px; }
.vx-kpi i.up{ color:var(--brand-700); } .vx-kpi i.down{ color:var(--neg); }
.vx-card td.r, .vx-card th.r{ text-align:right; white-space:nowrap; }
.vx-card td.r:not(:last-child), .vx-card th.r:not(:last-child){ padding-right:24px; }
.vx-card td.neg{ color:var(--neg); }
.vx-card tr.tot td{ font-weight:600; border-top:1px solid var(--g200); }
.vx-card .vx-chart + .vx-tablewrap{ margin-top:10px; }
.vx-more{ margin-top:10px; font-size:var(--f12); }
.vx-more button{ border:0; background:none; padding:0; font-family:var(--font-ui); font-size:var(--f12); font-weight:600; color:var(--link); cursor:pointer; }
.vx-card.vx-old{ padding:10px 16px; cursor:pointer; background:rgba(255,255,255,.55); }
.vx-card.vx-old:hover{ background:rgba(255,255,255,.9); }
.vx-card.vx-old > :not(h4){ display:none; }
.vx-card.vx-old h4{ margin:0; font-weight:600; color:var(--g600); }
.vx-card.vx-old h4::after{ content:'Show'; float:right; font-size:var(--f12); font-weight:600; color:var(--link); }
.vx-card .vx-p{ font-size:var(--f13); line-height:1.6; color:var(--g900); margin:0 0 8px; }
.vx-card .vx-ul{ margin:0 0 8px; padding-left:18px; font-size:var(--f13); line-height:1.6; color:var(--g900); }