:root { --bg: #f5f7fa; --card: #fff; --ink: #111827; --muted: #6b7280; --line: #e5e7eb; --line-strong: #d1d5db;
        --me: #2f6fde; --me-hover: #2559b8; --me-ink: #fff; --them: #f1f4f8; --accent-soft: #eef3fd;
        --good: #15803d; --good-soft: #e8f6ee; --bad: #b42318; --bad-soft: #fdecea; --warn: #8a5a00; --warn-soft: #fff6dd;
        --radius: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);
        --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* hidden always wins over display rules */
body { margin: 0; font: 14px/1.55 var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--me); }
header { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--card); border-bottom: 1px solid var(--line); }
h1 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin: 0; font-weight: 650; }
h2 { font-size: 16px; line-height: 1.3; margin: 0 0 8px; font-weight: 600; }
h3 { font-size: 12px; margin: 16px 0 4px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input, select, textarea { font: inherit; color: inherit; }
select, textarea { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--me); box-shadow: 0 0 0 3px rgba(47, 111, 222, .18); }
select { min-width: 280px; }
textarea { width: 100%; resize: vertical; }
button { font: inherit; font-weight: 500; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; background: var(--me); color: #fff; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
button:hover:not(:disabled) { filter: brightness(.95); }   /* works for every button style */
button:focus-visible, a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 111, 222, .3); }
button.secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
button.danger, button.secondary.danger { color: var(--bad); }
button#mic { touch-action: none; user-select: none; }
.hint-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--warn-soft); border-radius: 8px; padding: 6px 8px; margin-bottom: 8px; }
.hint-bar select, .hint-bar input { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; }
.hint-bar input { flex: 1; min-width: 160px; }
button#mic.listening { background: var(--bad); border-color: var(--bad); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
.badge { display: inline-flex; align-items: center; background: var(--warn-soft); color: var(--warn); border-radius: 99px; padding: 2px 10px; font-size: 12px; font-weight: 500; }
.error { color: var(--bad); min-height: 1em; }
#call { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
@media (max-width: 800px) { #call { grid-template-columns: 1fr; } }

/* ---------- call view: the speaker large on a stage, the chat (or the brief) at the side ---------- */
.side-tabs { display: flex; gap: 6px; align-items: center; }
.side-tabs .tab { background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 8px; }
.side-tabs .tab.on { background: var(--them); color: var(--ink); font-weight: 600; }
.side-tabs #call-mode { margin-left: auto; }
.mode-switch { display: inline-flex; background: var(--them); border-radius: 10px; padding: 3px; gap: 2px; }
.mode-switch button { background: transparent; color: var(--muted); padding: 8px 14px; border-radius: 8px; }
.mode-switch button.on { background: var(--card, #fff); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.mode-switch.mini button { padding: 4px 10px; font-size: 13px; }
button.mini { padding: 4px 10px; font-size: 13px; }
#call.view-chat { grid-template-columns: 300px 1fr; grid-template-areas: "tabs tabs" "aside chat"; }
#call.view-chat #side-tabs { grid-area: tabs; } #call.view-chat #side-tabs .tab { display: none; }
#call.view-chat aside { grid-area: aside; } #call.view-chat .chat { grid-area: chat; }
#call.view-chat #stage { display: none; }
#call.view-call { grid-template-columns: 1fr 380px; grid-template-rows: auto 1fr; grid-template-areas: "stage tabs" "stage side"; }
#call.view-call #stage { grid-area: stage; } #call.view-call #side-tabs { grid-area: tabs; }
#call.view-call aside, #call.view-call .chat { grid-area: side; }
#call.view-call:not(.tab-brief) aside { display: none; }
#call.view-call.tab-brief .chat { display: none; }
#call.view-call .chat { min-height: 0; }
#call.view-call #log { max-height: 46vh; }
@media (max-width: 800px) {
  #call.view-call { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "stage" "tabs" "side"; }
  #call.view-chat { grid-template-columns: 1fr; grid-template-areas: "tabs" "aside" "chat"; }
  .spot-pic img { width: 96px !important; height: 96px !important; }
  #stage { min-height: 0; }
  .caption { font-size: 16px; min-height: 0; }
  .tile { width: 84px; padding: 6px 4px; }
  .tile img { width: 40px !important; height: 40px !important; }
}
#stage { display: flex; flex-direction: column; gap: 12px; background: #1d2330; color: #f2f4f7; border-color: #1d2330; min-height: 520px; }
#stage .muted { color: #a9b1c2; }
.stage-top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.spot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 12px; }
.spot-pic { border-radius: 50%; padding: 6px; transition: box-shadow .2s, opacity .2s; }
.spot-pic img { border-radius: 50%; display: block; }
.spot-name { font-size: 20px; font-weight: 600; margin-top: 6px; }
.spot-state { min-height: 1.2em; }
#spot-role { max-width: 420px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.caption { max-width: 640px; min-height: 3em; margin: 10px 0 0; font-size: 18px; line-height: 1.45; color: #f2f4f7; }
.spot.idle .spot-pic { opacity: .55; }
.spot.idle .caption { color: #a9b1c2; }
.spot.talking .spot-pic, .spot.writing .spot-pic { box-shadow: 0 0 0 4px #4ade80, 0 0 28px 6px rgba(74, 222, 128, .45); }
.spot.writing .spot-pic { box-shadow: 0 0 0 4px #a9b1c2; }
.bars { display: flex; gap: 4px; align-items: flex-end; height: 22px; visibility: hidden; }
.bars i { width: 5px; height: 6px; background: #4ade80; border-radius: 3px; }
.spot.talking .bars { visibility: visible; }
.spot.talking .bars i { animation: bar 0.9s ease-in-out infinite; }
.spot.talking .bars i:nth-child(2) { animation-delay: .15s; } .spot.talking .bars i:nth-child(3) { animation-delay: .3s; }
.spot.talking .bars i:nth-child(4) { animation-delay: .45s; } .spot.talking .bars i:nth-child(5) { animation-delay: .6s; }
@keyframes bar { 0%, 100% { height: 6px; } 50% { height: 22px; } }
.tiles { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 104px; padding: 8px 6px; border-radius: 10px;
        background: #2a3142; font-size: 12px; text-align: center; transition: box-shadow .2s, opacity .3s; animation: enter .4s ease-out; }
.tile img { border-radius: 50%; }
.tile .tname { font-weight: 600; font-size: 13px; line-height: 1.2; }
.tile .trole { color: #a9b1c2; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.active { box-shadow: 0 0 0 3px #4ade80; }
.tile.me.listening { box-shadow: 0 0 0 3px #f97066; }
.tile.leaving { opacity: 0; }
@keyframes enter { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tile, .spot.talking .bars i { animation: none; } }
aside ul, aside ol { margin: 0; padding-left: 20px; }
.you { color: var(--muted); margin: 0 0 8px; }
.clock { color: var(--muted); font-size: 13px; margin-top: 16px; }
.chat { display: flex; flex-direction: column; min-height: 520px; }
#log { flex: 1; overflow-y: auto; max-height: 60vh; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
.line { display: flex; gap: 8px; align-items: flex-end; max-width: 85%; }
.line.me { align-self: flex-end; flex-direction: row-reverse; }
.pic { border-radius: 50%; flex: none; }
li.person { list-style: none; display: flex; align-items: center; gap: 8px; margin: 4px 0 4px -20px; }
.msg { padding: 8px 12px; border-radius: 12px; background: var(--them); }
.msg .who { font-size: 12px; color: var(--muted); display: block; }
.msg.me { background: var(--me); color: var(--me-ink); }
.msg.me .who { color: #dbe6fb; }
.event { align-self: center; font-size: 13px; color: var(--muted); }
.typing { align-self: flex-start; color: var(--muted); font-style: italic; font-size: 13px; }
#say-form { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 16px; font-size: 14px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f9fafb; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover td, table tr:hover td { background: #fafbfc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 13px; }
a.button { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; padding: 8px 16px; border-radius: 8px; border: 1px solid transparent; background: var(--me); color: #fff; transition: background .15s; }
a.button:hover { filter: brightness(.95); }
a.button.secondary { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
#report .row { margin-top: 14px; }
.pack { background: #f4f7ff; border-radius: 10px; padding: 4px 14px 10px; margin: 12px 0; }
.pack h4 { margin: 10px 0 2px; font-size: 14px; }
blockquote { margin: 6px 0; padding: 8px 12px; border-left: 3px solid var(--line); background: #fff; white-space: pre-wrap; }
.badge-line { background: #fff3cd; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
label.opt { display: block; margin: 4px 0; }
#b-player-name { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; margin-left: 6px; }
header nav.account { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 14px; flex-wrap: wrap; }
header nav.account .who { margin-left: 10px; color: var(--muted); }
header nav.account .org { font-weight: 600; color: var(--ink); }
header nav.account button { padding: 3px 10px; font-size: 13px; }

.acting { background: #fff3cd; border-bottom: 1px solid #f0d78c; padding: 6px 16px; font-size: 14px; text-align: center; }

/* a reply is "sent" only when the call has it */
.line.sending .msg { opacity: .6; }
.line.failed .msg { background: #fdecea; color: var(--bad); border: 1px solid #f3b8b1; }
.line.failed .msg .who { color: var(--bad); }
.msg .status { display: block; font-size: 12px; margin-top: 2px; opacity: .85; }
.line.failed .msg button.mini { margin-top: 4px; }
.call-error:empty { display: none; }
.call-error { background: #fdecea; border: 1px solid #f3b8b1; border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-weight: 600; }
.call-note { background: #fff8e1; border: 1px solid #f0d78c; border-radius: 8px; padding: 6px 12px; margin: 8px 0; font-size: 13px; }
#side-tabs .tab.unread::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--bad); vertical-align: middle; }

/* wide tables scroll inside their card, never the page */
.scroll { overflow-x: auto; max-width: 100%; }
body.shell > main { min-width: 0; }
@media (max-width: 600px) { select { min-width: 0; max-width: 100%; } }

/* a player's daily practice allowance */
.allowance { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.allowance .meter { display: inline-block; width: 140px; height: 6px; border-radius: 3px; background: var(--them); overflow: hidden; }
.allowance .meter i { display: block; height: 100%; background: var(--me); }
.allowance.full .meter i { background: var(--bad); }

/* hands-free speaking on the voice call */
button.hands-free { background: var(--card); color: var(--muted); border: 1px solid var(--line-strong); }
button.hands-free.on { background: var(--accent-soft); color: var(--me); border-color: var(--me); }

/* the live call (beta): you just talk, so the typing controls step aside (Leave stays) */
#say-form.live textarea, #say-form.live #send, #say-form.live #mic, #say-form.live #speech-stop { display: none; }
#say-form.live .row::before { content: "🎙 Live call"; font-weight: 600; color: var(--me); margin-right: auto; }