/* The meeting screen, simplified: what the device hears + the time, then ONE cue to read. Everything else lives in the details panel. */
body[data-screen=live] #app { max-width:720px; }
#live .lv-wrap { display:block; }
#live .lv-now { display:flex; flex-direction:column; gap:12px; min-height:calc(100dvh - var(--dock) - 40px); padding-bottom:12px; }
#live .listen { flex:none; }
#live .capinfo { display:block; color:var(--on-sea-soft); font:500 12.5px var(--body); margin-top:2px; }
#live .lv-warn { margin:0; padding:10px 14px; border-radius:12px; background:color-mix(in srgb, var(--brass) 18%, var(--panel)); color:var(--amber-ink); font:600 14px/1.5 var(--body); }
#live .lv-cue { display:flex; flex-direction:column; justify-content:flex-start; min-height:200px; margin-top:8px; }
#live #cues .cue { animation-duration:.18s; } #live #cues .cue::after { display:none; }
#live .lv-cue .wait { text-align:center; color:var(--soft); font:500 17px/1.7 var(--body); padding:28px 12px; border:1.5px dashed var(--rule); border-radius:var(--r-lg); }
#live #cues { margin:0; }
#live #cues .cue { margin:0; font:600 25px/1.6 var(--body); padding:20px 20px 16px; }
#live #cues .cue .say { font:500 20px/1.7 var(--body); margin-top:12px; padding:12px 16px; }
#live #cues .cue .why { font:400 14px/1.6 var(--body); margin-top:10px; }
#live .cmeta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
#live .cmeta .when, #live .cmeta .basis { margin:0; }
#live .cmeta .age { font:500 12px var(--mono); color:var(--soft); margin-inline-start:auto; }
#live #cues .cue.stale { opacity:.6; box-shadow:none; }
#live #cues .cue.stale .age::after { content:" · قديم"; font-family:var(--body); }
#live #risk { align-self:flex-start; margin-top:10px; }
#live #risk.low { display:none; }
#live .live { margin:0; flex:none; }

#live .lv-free { margin:0; font:600 14px var(--mono); color:var(--soft); }
#live .lv-free.low { color:var(--amber-ink); }
/* the details panel */
#live .lv-panel { background:var(--panel); border:1px solid var(--rule); border-radius:var(--r-lg); padding:14px 16px 16px; }
.lvp-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lvp-head h2 { margin:0; font:700 17px var(--display); }
.lvp-x { width:44px; height:44px; border-radius:50%; border:1px solid var(--rule); background:var(--paper); color:var(--ink); font:400 24px/1 var(--body); cursor:pointer; }
#live .lv-panel .rules { margin:10px 0 4px; }
.lvp-tabs { display:flex; gap:4px; margin:12px 0 10px; padding:4px; background:var(--sunk); border-radius:12px; }
.lvp-tabs [role=tab] { flex:1; min-height:44px; border:0; border-radius:9px; background:transparent; color:var(--soft); font:600 14px var(--body); cursor:pointer; padding:6px 8px; }
.lvp-tabs [role=tab][aria-selected=true] { background:var(--panel); color:var(--ink); box-shadow:0 1px 3px rgba(10,26,63,.12); }
.lvp-tabs [role=tab]:focus-visible { outline:3px solid var(--primary); outline-offset:1px; }
.lvp-tabs .cnt { font:500 12px var(--mono); color:var(--soft); }
.lvp-body h3 { font:700 14px var(--body); color:var(--soft); margin:16px 0 8px; }
.lvp-body h3:first-child { margin-top:4px; }
.cue-log .cue.old { margin:0 0 8px; }
.cue-log .cue.old .cmeta { margin-top:4px; } .cue-log .cue.old .cmeta .age { display:none; }
.cue-log .cue.old .say { display:block; font:500 14px/1.6 var(--body); padding:6px 10px; margin-top:6px; }
.est-note { margin:0 0 12px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb, var(--brass) 14%, transparent); color:var(--amber-ink); font:500 13.5px/1.6 var(--body); }
#live #stage { display:block; font:600 14px var(--body); color:var(--soft); margin:6px 0 10px; }
#live #stage.hidden { display:none; }
#live .stagebar span.cur { color:var(--soft); }
#live .stagebar span.cur::after { content:"؟"; }
#live #deal { width:100%; margin-top:14px; }
#live .tr { max-height:none; }
#live #tim { font:400 11px var(--mono); margin-top:10px; direction:ltr; text-align:left; }
.dock .badge { display:inline-block; min-width:22px; padding:0 6px; border-radius:999px; background:var(--primary); color:var(--on-primary); font:700 12px/22px var(--mono); margin-inline-start:4px; }
.dock .badge.hidden { display:none; }
#live .dock .ghost { flex:1; }
#lvMore[aria-expanded=true] { background:var(--sunk); }

/* phones and narrow windows: the panel is a sheet from the bottom */
@media (max-width:1099px) {
  #live .lv-panel { position:fixed; z-index:7; inset-inline:0; bottom:0; max-height:82dvh; overflow:auto; border-radius:20px 20px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom));
    transform:translateY(105%); visibility:hidden; transition:transform .25s ease, visibility 0s .25s; box-shadow:0 -12px 40px rgba(10,26,63,.25); }
  #live.pn-open .lv-panel { transform:none; visibility:visible; transition:transform .25s ease; }
  .lv-scrim { position:fixed; inset:0; z-index:6; background:rgba(7,14,34,.45); }
  .lv-scrim[hidden] { display:none; }
}
@media (max-width:420px) {
  #live #cues .cue { font-size:22px; padding:16px; } #live #cues .cue .say { font-size:18px; }
  #live .lv-cue { min-height:180px; }
}

/* wide screens: the cue gets the room, the panel is a quiet column beside it */
@media (min-width:1100px) {
  body[data-screen=live] #app { max-width:1320px; }
  #live .lv-wrap { display:grid; grid-template-columns:minmax(0,880px); justify-content:center; gap:32px; align-items:start; }
  #live.pn-open .lv-wrap { grid-template-columns:minmax(0,1fr) 420px; }
  #live .lv-panel { display:none; position:sticky; top:16px; max-height:calc(100dvh - var(--dock) - 32px); overflow:auto; }
  #live.pn-open .lv-panel { display:block; height:calc(100dvh - var(--dock) - 32px); }
  #live .lvp-x { display:none; }
  #live .lv-now { min-height:0; padding-top:4px; }
  #live .lv-cue { margin-top:20px; min-height:300px; }
  #live #cues .cue { font-size:32px; line-height:1.55; padding:28px 30px 22px; }
  #live #cues .cue .verb { font-size:18px; }
  #live #cues .cue .say { font-size:26px; padding:16px 20px; }
  #live #cues .cue .why { font-size:16px; }
  #live .listen { padding:16px 22px; } #live .listen .ltxt b { font-size:22px; } #live .listen #tm { font-size:20px; }
  #live .live { font-size:16px; }
  .dock-in { max-width:1320px; }
  #live .dock .dock-in { max-width:720px; }
}
@media (prefers-reduced-motion: reduce) { #live .lv-panel { transition:none !important; } }
/* which deal this meeting is for, and the typed mode (no microphone) */
#live .lv-deal { margin:0; font:700 15px var(--display); color:var(--soft); }
#live .lv-type { display:grid; gap:6px; }
#live .lv-type.hidden { display:none; }
#live .lv-type label { font:600 14px var(--body); color:var(--soft); }
#live .lv-type-row { display:flex; gap:8px; align-items:stretch; }
#live .lv-type textarea { flex:1 1 auto; min-width:0; width:auto; min-height:56px; border:1.5px solid var(--rule); border-radius:12px; padding:10px 12px; background:var(--panel); color:var(--ink); font:500 16px/1.6 var(--body); resize:vertical; }
#live .lv-type .main { flex:0 0 auto; width:auto; min-width:88px; margin:0; padding:0 18px; }
#live.typed #partial, #live.typed #eq, #live.typed .meter { display:none; }