/* Theme tokens. Light is the default; dark follows the system or the toggle (html[data-theme]).
   To rebrand, put variable values under "theme" in /config.json; the app sets them on :root. */
:root {
  --bg: #f4f5f7;          /* page */
  --panel: #ffffff;       /* chat, prompts, buttons */
  --panel-2: #e9ebef;     /* hover / secondary surfaces */
  --fg: #1b1d21;          /* primary text */
  --muted: #596170;       /* secondary text */
  --border: #d6d9de;
  --accent: #2f6fed;      /* primary action, focus ring */
  --accent-fg: #ffffff;
  --accent-hover: #255bc4;
  --danger: #d8373c;
  --tile: #000000;        /* video tile background */
  --radius: 999px;        /* buttons */
  --radius-panel: 12px;   /* tiles, inputs */
  --font: 15px system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121417; --panel: #1c1f24; --panel-2: #272b32; --fg: #e8e8e8; --muted: #9aa1ad; --border: #30343b; --accent: #4f8cff; --accent-fg: #0b1020; --accent-hover: #6a9dff; --danger: #ff6b6b; color-scheme: dark; } }
:root[data-theme="dark"] { --bg: #121417; --panel: #1c1f24; --panel-2: #272b32; --fg: #e8e8e8; --muted: #9aa1ad; --border: #30343b; --accent: #4f8cff; --accent-fg: #0b1020; --accent-hover: #6a9dff; --danger: #ff6b6b; color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font: var(--font); }
[hidden] { display: none !important; }
button { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; cursor: pointer; }
button:hover { background: var(--panel-2); }
button:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (forced-colors: active) { button[aria-pressed="true"], button.primary { outline: 2px solid ButtonText; } .tile .label { background: Canvas; color: CanvasText; } }
button[aria-pressed="true"], button.primary { background: var(--primary-bg, var(--accent)); color: var(--accent-fg); border-color: transparent; }
button[aria-pressed="true"]:hover, button.primary:hover { background: var(--primary-bg-hover, var(--accent-hover)); }
button.danger { background: var(--danger); color: var(--accent-fg); border-color: transparent; }
input { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 10px 12px; }
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
small { color: var(--muted); }
code { font-family: ui-monospace, monospace; background: var(--panel-2); padding: 1px 5px; border-radius: 4px; }

#prejoin { margin: auto; display: grid; gap: 12px; width: min(380px, 90vw); padding: 24px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-panel); }
#prejoin header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#prejoin .tools { display: flex; gap: 6px; align-items: center; }
select { font: inherit; color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; }
#prejoin h1 { margin: 0; font-size: 22px; font-weight: var(--h1-weight, 600); }
#advanced { border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 8px 12px; display: grid; gap: 8px; }
#advanced summary { cursor: pointer; color: var(--muted); font-size: 13px; }
#advanced label { display: grid; gap: 4px; font-size: 13px; }
textarea { font: 13px ui-monospace, monospace; color: var(--fg); background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 8px; resize: vertical; }
#modes { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
#modes legend { color: var(--muted); font-size: 13px; padding: 0; }
/* Segmented control: real radios (keyboard arrows, screen readers) drawn as two joined buttons. */
.segmented { display: flex; }
.segmented label { flex: 1; position: relative; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmented span { display: block; text-align: center; padding: 8px 12px; border: 1px solid var(--border); background: var(--panel); cursor: pointer; }
.segmented label:first-child span { border-radius: var(--radius) 0 0 var(--radius); }
.segmented label:last-child span { border-radius: 0 var(--radius) var(--radius) 0; border-inline-start: 0; }
.segmented input:checked + span { background: var(--primary-bg, var(--accent)); color: var(--accent-fg); border-color: transparent; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn { padding: 6px 10px; line-height: 1; }

#call { flex: 1; display: flex; min-height: 0; }
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#stage { flex: 1; position: relative; display: flex; flex-direction: column; min-height: 0; }
#extbar { display: contents; }
#tiles { flex: 1; display: grid; gap: 8px; padding: 8px; overflow: auto; align-content: center;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.tile { position: relative; aspect-ratio: 16 / 9; background: var(--tile); border-radius: var(--radius-panel); overflow: hidden; }
.tile video, .tile canvas { width: 100%; height: 100%; object-fit: cover; }
.tile.screen video, .tile.screen canvas { object-fit: contain; }
.tile video.mirror { transform: scaleX(-1); }
.tile .label { position: absolute; inset-inline-start: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: #000a; color: #fff; font-size: 13px; }

#bar { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 10px; flex-wrap: wrap; border-top: 1px solid var(--border); background: var(--panel); }
#status { font-size: 13px; color: var(--muted); }

#chat { width: min(320px, 100vw); display: flex; flex-direction: column; background: var(--panel); border-inline-start: 1px solid var(--border); }
#messages { flex: 1; overflow: auto; padding: 12px; display: grid; gap: 8px; align-content: start; }
#messages p { margin: 0; overflow-wrap: anywhere; }
#messages b { color: var(--accent); }
#chatform { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border); }
#chatform input { flex: 1; min-width: 0; }
@media (max-width: 700px) { #call { flex-direction: column; } #chat { width: 100%; height: 40%; border-inline-start: 0; border-top: 1px solid var(--border); } }