@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap');

:root {
  --bg: #07060b;
  --panel: #13111b;
  --line: #2a2536;
  --text: #f2eff8;
  --muted: #9a93aa;
  --mag: #e619c9;
  --vio: #7b2ff7;
  --live: #ff2d55;
  --ok: #2ee59d;
  --grad: linear-gradient(135deg, var(--mag), var(--vio));
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, system-ui, sans-serif; }
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 20px 16px 40px; }
.wrap { width: 100%; max-width: 560px; }
header { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.badge { width: 34px; height: 34px; border-radius: 9px; background: var(--grad); display: grid; place-items: center; font: 700 15px 'Space Grotesk'; font-style: italic; color: #fff; }
.brand { font: 700 italic 18px 'Space Grotesk'; letter-spacing: .02em; }
.brand small { display: block; font: 500 12px Inter; font-style: normal; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
h1 { font: 700 30px/1.15 'Space Grotesk'; margin: 6px 0 10px; }
p.lead { color: var(--muted); margin: 0 0 22px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; }
.card h2 { font: 600 13px Inter; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
button, .btn { font: 600 15px Inter; border: 1px solid var(--line); background: #1d1928; color: var(--text); border-radius: 10px; padding: 10px 14px; cursor: pointer; }
button:hover { border-color: #463d58; }
button.primary { background: var(--grad); border: 0; color: #fff; }
button.danger { color: #ff8aa0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link { flex: 1 1 200px; min-width: 0; font: 13px ui-monospace, Menlo, monospace; background: #0c0a12; border: 1px solid var(--line); border-radius: 8px; padding: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
select, input[type=text] { font: 15px Inter; background: #0c0a12; color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px; width: 100%; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #555; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.dot.warn { background: #ffb020; }
.muted { color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }

/* push to talk */
.ptt { width: 100%; aspect-ratio: 1.6; max-height: 300px; border-radius: 20px; border: 2px solid var(--line); background: #15121e;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; user-select: none; -webkit-user-select: none; touch-action: none;
  font: 700 26px 'Space Grotesk'; color: var(--muted); transition: background .08s, border-color .08s, box-shadow .08s; }
.ptt small { display: block; font: 500 13px Inter; margin-top: 6px; }
.ptt.on { background: var(--live); border-color: #ff6f8a; color: #fff; box-shadow: 0 0 40px rgba(255, 45, 85, .55); }
.meter { height: 6px; background: #0c0a12; border-radius: 3px; overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .05s; }
.listeners { list-style: none; margin: 0; padding: 0; }
.listeners li { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.listeners li:last-child { border: 0; }

/* listener */
.tally { width: 100%; padding: 46px 16px; border-radius: 20px; text-align: center; background: #15121e; border: 2px solid var(--line);
  font: 700 28px 'Space Grotesk'; color: var(--muted); transition: all .08s; }
.tally.on { background: var(--live); color: #fff; border-color: #ff6f8a; box-shadow: 0 0 50px rgba(255, 45, 85, .6); }
.big { width: 100%; padding: 22px; font-size: 20px; border-radius: 16px; }
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
input[type=range] { width: 100%; accent-color: var(--mag); }

/* ---- messages ---- */
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.quick button { padding: 16px 10px; font-size: 16px; }
.quick button.sent { background: var(--ok); color: #07060b; border-color: var(--ok); }
.msgs { list-style: none; margin: 0 0 12px; padding: 0; max-height: 220px; overflow-y: auto; }
.msgs li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
.msgs li:last-child { border-bottom: 0; }
.msgs .who { font-weight: 600; margin-right: 6px; }
.msgs .who.them { color: var(--mag); }
.msgs time { color: var(--muted); font-size: 12px; margin-right: 6px; }
.msgs .empty { color: var(--muted); }
.msgform { display: flex; gap: 8px; }
.msgform input { flex: 1; min-width: 0; }
.card.flash { animation: cardflash 1.2s ease-out; }
@keyframes cardflash { 0%, 40% { border-color: var(--mag); box-shadow: 0 0 22px rgba(230, 25, 201, .6); } 100% { border-color: var(--line); box-shadow: none; } }
.unread { background: var(--mag); color: #fff; border-radius: 999px; font: 700 12px Inter; padding: 2px 8px; margin-left: 10px; }

/* ---------- docked mode (?dock=1): compact panel for the producer dock ---------- */
.dockbar { display: none; }
html.dock body { padding: 8px 8px 12px; align-items: stretch; }
html.dock .wrap { max-width: none; min-width: 0; }
html.dock header { margin-bottom: 8px; }
html.dock header .badge, html.dock header .brand, html.dock header .back, html.dock #sh-auth { display: none; }
html.dock header .status { margin-left: 0 !important; }
html.dock .unread { margin-left: auto; }
html.dock #dCopy { display: none; } /* the dock's top bar has Copy links */
html.dock #dSettings { display: none; } /* mic and Reset link live in the dock's gear menu */
html.dock .dockbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
html.dock .dockbar .dcount { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dock .dockbar #dNames { color: var(--text); }
html.dock .dockbar .dcount b { color: var(--text); }
html.dock .dockbar button { padding: 6px 10px; font-size: 13px; }
html.dock .ptt { aspect-ratio: auto; height: 76px; font-size: 20px; border-radius: 14px; }
html.dock .ptt small, html.dock #hint { display: none; }
html.dock .row[style*="margin:12px 0 16px"] { margin: 8px 0 10px !important; }
html.dock #latch { width: 100%; padding: 8px 12px; font-size: 14px; }
html.dock .card { padding: 10px; margin-bottom: 10px; border-radius: 10px; }
html.dock .card h2 { margin-bottom: 6px; }
html.dock #msgs { max-height: 150px; overflow-y: auto; }
html.dock #listenCard, html.dock #linkCard, html.dock #micCard { display: none; }
html.dock.settings #micCard { display: block; }
html.dock.settings #linkCard { display: block; }
html.dock #linkCard h2, html.dock #linkRow { display: none; }

.timerbox { text-align: center; }
.timerbig { font: 700 52px/1.1 'Space Grotesk'; font-variant-numeric: tabular-nums; color: var(--text); }
.timerbox.run .timerbig { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.timerbox.done .timerbig { color: var(--live); }