/* warroom.css — drop-in stylesheet for the War Room DOM contract.
   Colors ONLY via the --bg/--panel/--accent/--text family below. Those names
   are the legacy styles.css palette, whose default :root theme (Ember) is
   amber; the War Room is dev chrome that opens from the violet ui-v2 top bar,
   so the block on #warroom rebinds every one of them to the ui-v2 --sv-*
   tokens (tokens.css, loaded unconditionally in index.html) and the panel
   stays violet no matter which legacy theme the account has picked. Each
   fallback is that --sv- token's own literal value rather than the old amber
   one, so a missing tokens.css still yields a violet panel — never a violet-
   on-brown mix.
   Fonts assumed already loaded: Cinzel, Cormorant Garamond, JetBrains Mono. */

/* z 60: below the app's drawer (65/70), modals (100+) and toasts (300) so game
   chrome always wins the stack; the composer overlap is handled by the
   bottom-offset media query at the end of this file. */
#warroom{
  /* violet rebind — see the file header. Everything the feature renders is a
     child of #warroom (panel, theater, call pill), so this one block recolors
     the lot without touching the rules underneath. */
  --bg:var(--sv-bg,var(--sv-bg));
  --panel:var(--sv-panel-strong,rgba(var(--sv-plum-rgb),.78));
  --panel-2:var(--sv-panel-soft,rgba(var(--sv-plum-rgb),.5));
  --panel-3:var(--sv-fill-hover,rgba(var(--sv-accent-rgb),.12));
  --border:var(--sv-line,rgba(var(--sv-accent-rgb),.28));
  --border-strong:var(--sv-line-strong,rgba(var(--sv-accent-rgb),.45));
  --text:var(--sv-text,var(--sv-text));
  --text-dim:var(--sv-text-muted,var(--sv-text-muted));
  --text-faint:var(--sv-text-dim,var(--sv-text-dim));
  --accent:var(--sv-violet,var(--sv-violet));
  --accent-hover:var(--sv-violet-bright,var(--sv-violet-bright));
  --danger:var(--sv-danger,#dc5a4e);
  --danger-hover:#e8776c;
  position:fixed;inset:0;pointer-events:none;z-index:60;
  font-family:'Cormorant Garamond',Georgia,serif;color:var(--text);
}
#warroom *{box-sizing:border-box}
/* The `hidden` attribute only hides via the UA stylesheet's [hidden]{display:none},
   which ANY author `display` outranks. Several elements here set display
   unconditionally (.wr-full-wait is display:grid), so `el.hidden = true` from JS
   silently did nothing and the "Connecting to the stream…" overlay never went
   away once the screen share arrived. Re-assert the invariant for the whole
   subtree so `.hidden = bool` keeps working as written, wherever it is used. */
#warroom [hidden]{display:none!important}

/* Entry point is the "War Room" nav item under Drawing Board (index.html,
   styled by the app's own .hv-nav-it/.hv-k) — no floating launcher. */

/* ---------- panel ---------- */
.wr-panel{
  position:fixed;right:16px;bottom:16px;pointer-events:auto;
  width:380px;max-width:calc(100vw - 32px);max-height:72vh;
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:16px;border:1px solid var(--border);
  background:var(--panel);
  /* the violet panel token is translucent (the amber one was opaque) — blur
     behind it, the same treatment ui-v2 gives .m-topbar, or app content
     shows through as muddy noise */
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06);
  transition:width .22s cubic-bezier(.2,.8,.3,1);
}
.wr-panel.has-focus{width:860px}

.wr-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;padding:14px 16px;border-bottom:1px solid var(--border)}
.wr-title{margin:0;flex:1;min-width:0;font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:15px;letter-spacing:.14em;color:var(--accent-hover);text-transform:uppercase}
.wr-count{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:var(--text-faint)}
.wr-close{flex:0 0 auto;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--border);border-radius:7px;background:none;color:var(--text-faint);cursor:pointer;font-size:12px;transition:color .15s ease,border-color .15s ease}
.wr-close:hover{color:var(--text);border-color:var(--border-strong)}

/* ---------- room picker ----------
   Pre-join only: pick where to talk, then Join. While joined the buttons are
   disabled (moving = Leave, then join the other room), so the row stays put
   as a "you are here" readout instead of vanishing and reflowing the panel. */
.wr-rooms{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto;padding:10px 12px;border-bottom:1px solid var(--border)}
.wr-room{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;border:1px solid var(--border-strong);
  background:var(--panel-2);color:var(--text-dim);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.wr-room:hover:not(:disabled){color:var(--text);border-color:var(--accent)}
.wr-room.is-current{color:var(--bg);border-color:var(--accent);background:linear-gradient(180deg,var(--accent-hover),var(--accent))}
/* joined: not a choice any more, just a label — dim the rest, keep yours lit */
.wr-room:disabled{cursor:default}
.wr-room:disabled:not(.is-current){opacity:.45}
.wr-room-n{
  min-width:15px;padding:0 4px;border-radius:999px;text-align:center;line-height:15px;
  background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--text);font-size:9px;letter-spacing:0;
}
.wr-room.is-current .wr-room-n{background:color-mix(in srgb,var(--bg) 28%,transparent);color:var(--bg)}

/* ---------- roster ---------- */
.wr-roster{list-style:none;margin:0;padding:8px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:0 1 auto;max-height:220px}
.wr-roster::-webkit-scrollbar{width:6px}
.wr-roster::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:4px}

.wr-user{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;transition:background .15s ease}
.wr-user:hover{background:var(--panel-2)}
.wr-user.is-me{background:color-mix(in srgb,var(--accent) 6%,transparent)}

.wr-ava{
  position:relative;flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;
  border-radius:9px;border:1px solid var(--border-strong);
  background:var(--panel-3);color:var(--text-dim);
  font-family:'Cinzel',Georgia,serif;font-weight:700;font-size:12.5px;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.wr-user.is-me .wr-ava{background:linear-gradient(180deg,var(--accent-hover),var(--accent));color:var(--bg);border-color:var(--accent)}
.wr-user.is-speaking .wr-ava{
  border-color:var(--accent-hover);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 0 16px -2px var(--accent-hover);
  animation:wr-speak 1.1s ease-in-out infinite;
}
@keyframes wr-speak{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent),0 0 16px -2px var(--accent-hover)}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent),0 0 22px -2px var(--accent-hover)}}

.wr-name{flex:1;min-width:0;font-size:16px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-user.is-me .wr-name::after{content:" (you)";color:var(--text-faint);font-size:12.5px;font-style:italic}

.wr-badges{flex:0 0 auto;display:flex;align-items:center;gap:5px}
.wr-badges svg{width:13px;height:13px;color:var(--text-faint)}
.wr-user.is-muted .wr-badges svg:first-child{color:var(--danger)}
.wr-user.is-sharing .wr-badges svg:last-child{color:var(--accent-hover)}

.wr-empty{padding:22px 10px;text-align:center;font-size:15.5px;font-style:italic;color:var(--text-faint)}

/* ---------- stage (share tiles) ---------- */
.wr-stage{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px 10px;flex:1 1 auto;overflow-y:auto;min-height:0}
.wr-stage:empty{display:none}
.wr-panel.has-focus .wr-stage{grid-template-columns:2fr 1fr}
.wr-stage:has(.wr-tile.is-focused) .wr-tile{grid-column:2;aspect-ratio:16/9}
.wr-stage:has(.wr-tile.is-focused) .wr-tile.is-focused{grid-column:1;grid-row:1 / span 4;aspect-ratio:16/9}
/* sole presenter focused: no side column, tile gets the full width */
.wr-stage:has(.wr-tile.is-focused:only-child){grid-template-columns:1fr}
.wr-stage:has(.wr-tile.is-focused:only-child) .wr-tile.is-focused{grid-column:1;grid-row:auto}
/* focused = "I want to read this screen": letterbox, never crop (with 3 side
   tiles the spanned cell is taller than 16:9 and cover would crop ~1/3) */
.wr-tile.is-focused .wr-video{object-fit:contain}

.wr-tile{
  position:relative;margin:0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  border:1px solid var(--border);background:var(--bg);
}
.wr-tile.is-focused{border-color:var(--accent)}
.wr-video{width:100%;height:100%;object-fit:cover;display:block;background:var(--bg)}
.wr-tile:not(.is-watching) .wr-video{visibility:hidden}

.wr-tile-cover{
  position:absolute;left:0;right:0;top:0;bottom:38px;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:8px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,var(--panel-2),var(--bg) 78%);
  font-size:13px;font-style:italic;color:var(--text-faint);line-height:1.3;
}
.wr-tile.is-watching .wr-tile-cover{display:none}
.wr-tile-cover .wr-name{font-style:normal;color:var(--text-dim);white-space:nowrap}

.wr-tile-cap{
  position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:7px 9px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 60%);
}
/* cap + watch chip sit on a hardcoded dark overlay, so their ink is hardcoded
   light too — var(--text) is dark on the light themes (parchment/sakura-spring).
   These literals are the violet palette's values, not tokens, for that reason:
   var(--sv-text) = --sv-text, var(--sv-violet-bright) = --sv-violet-bright, var(--sv-violet) = --sv-violet. */
.wr-tile-cap .wr-name{flex:1;min-width:0;font-size:14px;color:var(--sv-text);text-shadow:0 1px 4px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-watch{
  flex:0 0 auto;padding:5px 11px;border-radius:7px;border:1px solid rgba(var(--sv-glow-rgb),.4);
  background:rgba(var(--sv-ground-rgb),.6);color:var(--sv-text);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  transition:border-color .15s ease,background .15s ease;
}
.wr-watch:hover{border-color:var(--sv-violet-bright);background:rgba(var(--sv-accent-rgb),.18)}
.wr-tile.is-watching .wr-watch{border-color:var(--sv-violet);color:var(--sv-violet-bright)}

/* ---------- controls ---------- */
.wr-controls{display:flex;gap:8px;flex:0 0 auto;padding:12px 14px;border-top:1px solid var(--border)}
.wr-btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 10px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--panel-2);color:var(--text-dim);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .15s ease,color .15s ease,background .15s ease,box-shadow .15s ease;
}
.wr-btn svg{width:14px;height:14px;flex:0 0 auto}
.wr-btn:hover{color:var(--text);border-color:var(--accent)}
.wr-btn.is-on{
  color:var(--bg);border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-hover),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.wr-btn.wr-join{
  color:var(--bg);border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-hover),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px -10px var(--accent);
  flex:1 1 100%;
}
.wr-btn.wr-danger{color:var(--danger);border-color:var(--border-strong);background:var(--panel-2)}
.wr-btn.wr-danger:hover{color:var(--bg);border-color:var(--danger);background:linear-gradient(180deg,var(--danger-hover),var(--danger))}

/* ---------- status line ---------- */
.wr-status{
  flex:0 0 auto;padding:9px 16px;border-top:1px solid var(--border);
  background:color-mix(in srgb,var(--danger) 8%,transparent);color:var(--danger);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-align:center;
}
.wr-status:empty{display:none}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .wr-panel{left:8px;right:8px;bottom:8px;width:auto;max-width:none}
  .wr-panel.has-focus{width:auto}
  .wr-stage{grid-template-columns:1fr}
  /* must out-rank the (0,3,0) desktop rule .wr-panel.has-focus .wr-stage */
  .wr-panel.has-focus .wr-stage{grid-template-columns:1fr}
  .wr-stage:has(.wr-tile.is-focused) .wr-tile{grid-column:1}
  .wr-stage:has(.wr-tile.is-focused) .wr-tile.is-focused{grid-column:1;grid-row:auto}
}

/* ---------- fullscreen theater ----------
   One stream taking over the whole browser page. #warroom jumps above every
   app screen (board 132 is the highest) only while the theater is open.
   Fixed dark palette — the theater is always black, on every app theme. */
#warroom.wr-fullmode{z-index:200}
.wr-full{position:fixed;inset:0;z-index:10;background:#000;pointer-events:auto}
.wr-full-video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.wr-full-wait{position:absolute;inset:0;display:grid;place-items:center;color:var(--sv-text-dim);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:16px}
.wr-full-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
  opacity:0;transition:opacity .25s ease}
.wr-full:hover .wr-full-bar,.wr-full-bar:focus-within{opacity:1}
@media (hover:none){.wr-full-bar{opacity:1}}
.wr-full-name{font-family:'Cinzel',Georgia,serif;font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--sv-text);white-space:nowrap}
.wr-full-tabs{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.wr-full-tabs::-webkit-scrollbar{height:0;display:none}
.wr-full-tab{flex:0 0 auto;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;border:1px solid rgba(var(--sv-glow-rgb),.35);background:rgba(var(--sv-ground-rgb),.55);color:var(--sv-text);cursor:pointer}
.wr-full-tab.act{border-color:var(--sv-violet-bright);color:var(--sv-violet-bright)}
.wr-full-tab:hover{border-color:var(--sv-violet-bright)}
.wr-full-native,.wr-full-exit{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;
  border:1px solid rgba(var(--sv-glow-rgb),.35);background:rgba(var(--sv-ground-rgb),.55);color:var(--sv-text);cursor:pointer;font-size:13px}
.wr-full-native svg{width:15px;height:15px}
.wr-full-native:hover,.wr-full-exit:hover{border-color:var(--sv-violet-bright);color:var(--sv-violet-bright)}

/* per-tile fullscreen button (in the caption bar, next to Watch) */
.wr-fs{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:5px;
  border:1px solid rgba(var(--sv-glow-rgb),.4);background:rgba(var(--sv-ground-rgb),.6);color:var(--sv-text);cursor:pointer;margin-left:6px}
.wr-fs svg{width:12px;height:12px}
.wr-fs:hover{border-color:var(--sv-violet-bright);color:var(--sv-violet-bright)}

/* ---------- live-call pill ----------
   Visible whenever you're in the call, everywhere in the app (adventures
   included) — click toggles the panel. Bottom-LEFT (the composer's Talk/Roll
   buttons own the bottom-right), lifted above the composer / iOS tab bar on
   narrow screens. */
.wr-live{position:fixed;left:16px;bottom:16px;pointer-events:auto;z-index:5;
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;
  border:1px solid var(--accent);background:var(--panel-2);color:var(--accent-hover);cursor:pointer;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.04em;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.6),0 0 18px -8px var(--accent)}
.wr-live svg{width:14px;height:14px}
.wr-live:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.wr-live.is-muted{color:var(--danger);border-color:var(--danger);box-shadow:0 8px 24px -8px rgba(0,0,0,.6)}
@media (max-width:1200px){.wr-live{bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}}
@media (max-width:640px){.wr-live{left:8px}}