/* HarcMeet — dark only, angular, tactical.
 * Palette: Okabe–Ito (colour-blind safe). State is never conveyed by colour alone —
 * every state also changes an icon, a label, or a pattern. */
@font-face {
  font-family: 'Departure Mono';
  src: url('/assets/fonts/DepartureMono-Regular.woff2') format('woff2'),
       url('/assets/fonts/DepartureMono-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --s1: #0a0a0a;
  --s2: #111;
  --s3: #181818;
  --s4: #222;
  --line: #1f1f1f;
  --line2: #2e2e2e;
  --line3: #444;
  --text: #ededed;
  --text2: #a3a3a3;
  --text3: #6b6b6b;

  --blue: #56b4e9;      /* sky blue — primary, active speaker, focus */
  --blue-ink: #001a29;
  --verm: #d55e00;      /* vermillion — off / danger */
  --verm-hi: #e86a0a;
  --orange: #e69f00;    /* warnings */
  --green: #009e73;     /* bluish green — secure / ok */
  --yellow: #f0e442;
  --purple: #cc79a7;
  --navy: #0072b2;

  --font: 'Departure Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --mono: 'Departure Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bar-h: 80px;
  --h1: 66px;  /* headline sizes stay on the 11px grid */
  --av: 44px;
  --side-w: 360px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; border-radius: 0 !important; }
/* `hidden` must always win over component display rules (.chip, .field, .cbtn …) */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-synthesis: none; text-rendering: optimizeSpeed; -webkit-font-smoothing: none;
  font: 400 11px/1.6 var(--font); 
  overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .4; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.mono { font-family: var(--mono); }
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--text3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app { height: 100%; }
.view { height: 100%; display: flex; flex-direction: column; }


/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px; border: 1px solid var(--line2); background: var(--s2);
  font: 600 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: var(--s3); border-color: var(--line3); }
.btn.primary { background: var(--text); color: #000; border-color: var(--text); }
.btn.primary:hover:not(:disabled) { background: #fff; }
.btn.blue { background: var(--blue); color: var(--blue-ink); border-color: var(--blue); }
.btn.danger { background: var(--verm); border-color: var(--verm); color: #fff; }
.btn.danger:hover:not(:disabled) { background: var(--verm-hi); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 11px; }
.btn.ghost { background: transparent; }

/* ---------- top bar ---------- */
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; border-bottom: 1px solid var(--line); flex: none; position: relative; z-index: 2; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-icon { height: 30px; width: 30px; }
.brand-meet { height: 18px; }
.brand-div { width: 1px; height: 22px; background: var(--line2); }
.topbar .right { display: flex; align-items: center; gap: 18px; color: var(--text2); font: 11px var(--mono); letter-spacing: 0; }

/* ---------- home ---------- */
.home-main { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 clamp(20px, 8vw, 120px); overflow: auto; }
.home-main > * { position: relative; }
.home h1 { font: 600 var(--h1)/1.02 var(--font); letter-spacing: 0; margin: 22px 0 18px; max-width: 18ch; }
.home h1 em { font-style: normal; color: var(--text3); }
.lede { color: var(--text2); font-size: 22px; max-width: 54ch; margin: 0 0 40px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; max-width: 720px; }
.joinbox { display: flex; flex: 1 1 320px; min-width: 0; border: 1px solid var(--line2); background: var(--s1); transition: border-color .15s; }
.joinbox:focus-within { border-color: var(--blue); }
.joinbox .kbd { display: grid; place-items: center; width: 48px; color: var(--text3); flex: none; }
.joinbox input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; padding: 0 4px; font: 11px var(--mono); letter-spacing: 0; }
.joinbox input::placeholder { color: var(--text3); }
.joinbox button { padding: 0 20px; font: 600 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--blue); border-left: 1px solid var(--line2); }
.joinbox button:disabled { color: var(--text3); opacity: 1; }
.specs { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--text2); border: 1px solid var(--line2); padding: 8px 10px; background: var(--s1); display: inline-flex; align-items: center; gap: 8px; }
.chip svg { width: 14px; height: 14px; }
.chip.ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.chip.warn { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); }
.home-foot { padding: 20px 28px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--text3); font: 11px var(--mono); letter-spacing: 0; flex: none; }
.home-foot img { height: 12px; opacity: .55; }

/* ---------- lobby ---------- */
.lobby-main { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(16px, 4vw, 56px) clamp(16px, 5vw, 80px); position: relative; }
.lobby-main > * { position: relative; }
.preview { position: relative; aspect-ratio: 16/9; background: var(--s1); border: 1px solid var(--line2); overflow: hidden; }
.preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.preview .pv-off { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text2); font: 11px var(--mono); letter-spacing: 0; text-transform: uppercase; background: var(--s1); }
.preview .pv-off[hidden] { display: none; }
.preview .pv-name { position: absolute; left: 14px; top: 12px; font: 11px var(--mono); color: var(--text); text-shadow: 0 1px 2px #000; letter-spacing: 0; }
.pv-controls { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 12px; }
.pv-meter { position: absolute; right: 14px; bottom: 16px; display: flex; gap: 3px; align-items: flex-end; height: 22px; }
.pv-meter i { width: 4px; background: var(--line3); height: 30%; transition: background .08s; }
.pv-meter i:nth-child(2) { height: 50%; } .pv-meter i:nth-child(3) { height: 70%; } .pv-meter i:nth-child(4) { height: 85%; } .pv-meter i:nth-child(5) { height: 100%; }
.pv-meter i.on { background: var(--blue); }
.pv-err { position: absolute; top: 12px; right: 12px; max-width: 70%; font: 11px var(--mono); color: var(--orange); background: #000c; padding: 6px 8px; border: 1px solid var(--orange); }
.devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--text3); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; }
.field > span button { color: var(--blue); font: inherit; letter-spacing: inherit; }
.select, .input { height: 40px; background: var(--s1); border: 1px solid var(--line2); padding: 0 12px; outline: 0; min-width: 0; width: 100%; }
.select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%); background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size: 5px 5px; background-repeat: no-repeat; text-overflow: ellipsis; font-size: 11px; }
.select:focus, .input:focus { border-color: var(--blue); }
.input { height: 48px; font-size: 11px; }
.join-col { display: flex; flex-direction: column; gap: 14px; }
.join-col h2 { font: 600 33px/1.1 var(--font); letter-spacing: 0; margin: 4px 0 0; }
.join-col .code { font: 500 11px var(--mono); letter-spacing: 0; color: var(--blue); display: flex; align-items: center; gap: 10px; }
.join-col .code button { color: var(--text3); display: grid; place-items: center; }
.join-col .code button:hover { color: var(--text); }
.who { color: var(--text2); margin: 0; min-height: 21px; }
.who .faces { display: inline-flex; margin-right: 8px; vertical-align: middle; }
.who .faces span { width: 22px; height: 22px; margin-right: -4px; display: inline-grid; place-items: center; font: 600 11px var(--mono); color: #000; border: 1px solid #000; }
.join-form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.join-form .btn { width: 100%; }
.notice-box { border: 1px solid var(--line2); background: var(--s1); padding: 14px 16px; color: var(--text2); font-size: 11px; }
.notice-box.err { border-color: var(--verm); color: var(--text); }
.notice-box.err b { color: var(--verm-hi); }
.sec-line { display: flex; align-items: center; gap: 8px; color: var(--text3); font: 11px var(--mono); letter-spacing: 0; text-transform: uppercase; }
.sec-line svg { width: 14px; height: 14px; color: var(--green); }

/* round-free control buttons (shared by lobby + call bar) */
.cbtn {
  width: 52px; height: 48px; display: grid; place-items: center; position: relative;
  background: var(--s3); border: 1px solid var(--line2); color: var(--text);
  transition: background .12s, border-color .12s;
}
.cbtn:hover:not(:disabled) { background: var(--s4); border-color: var(--line3); }
.cbtn.off { background: var(--verm); border-color: var(--verm); color: #fff; }
.cbtn.off:hover { background: var(--verm-hi); }
.cbtn.on-accent { background: var(--blue); border-color: var(--blue); color: var(--blue-ink); }
.cbtn.leave { width: 72px; background: var(--verm); border-color: var(--verm); color: #fff; }
.cbtn.leave:hover { background: var(--verm-hi); }
.cbtn .badge { position: absolute; top: -1px; right: -1px; min-width: 18px; height: 16px; padding: 0 4px; background: var(--text); color: #000; font: 700 11px/16px var(--mono); }
.cbtn .wait-dot { position: absolute; bottom: -1px; right: -1px; min-width: 18px; height: 16px; padding: 0 4px; background: var(--orange); color: #000; font: 700 11px/16px var(--mono); }
.cbtn .wait-dot[hidden] { display: none; }
.wait-sec { display: flex; justify-content: space-between; align-items: center; color: var(--orange); }
.link-btn { font: 600 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; color: var(--blue); }
.prow.waiting { background: color-mix(in srgb, var(--orange) 6%, transparent); }
.prow.waiting .pact { gap: 6px; }
.cbtn .dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: var(--blue); transform: rotate(45deg); }
.pv-controls .cbtn { background: #000a; backdrop-filter: blur(8px); border-color: #fff3; }
.pv-controls .cbtn.off { background: var(--verm); border-color: var(--verm); }
.split { display: flex; }
.split .cbtn:first-child { border-right: 0; }
.caret { width: 26px; height: 48px; display: grid; place-items: center; background: var(--s2); border: 1px solid var(--line2); color: var(--text2); }
.caret:hover { background: var(--s4); color: var(--text); }
.caret svg { width: 14px; height: 14px; }
.split .cbtn.off + .caret { border-color: var(--verm); }

/* ---------- room ---------- */
.room { background: var(--bg); }
.room-body { flex: 1; min-height: 0; display: flex; position: relative; }
.stage-wrap { flex: 1; min-width: 0; position: relative; padding: 12px 12px 0; }
.stage { position: relative; width: 100%; height: 100%; }
.side { width: var(--side-w); flex: none; margin: 12px 12px 0 0; background: var(--s1); border: 1px solid var(--line2); display: flex; flex-direction: column; min-height: 0; }
.side[hidden] { display: none; }
.side-head { height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 18px; border-bottom: 1px solid var(--line); }
.side-head .t { font: 600 11px var(--mono); letter-spacing: 0; text-transform: uppercase; }
.side-head .t small { color: var(--text3); font-weight: 400; margin-left: 8px; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text2); }
.icon-btn:hover { color: var(--text); background: var(--s3); }
.side-body { flex: 1; min-height: 0; overflow: auto; }
.side-note { margin: 14px 16px; padding: 10px 12px; border: 1px solid var(--line2); background: var(--s2); color: var(--text2); font-size: 11px; display: flex; gap: 10px; }
.side-note svg { flex: none; color: var(--green); width: 16px; height: 16px; margin-top: 1px; }

/* tiles */
.tile {
  position: absolute; overflow: hidden; background: var(--s2); border: 1px solid var(--line);
  transition: left .28s var(--ease), top .28s var(--ease), width .28s var(--ease), height .28s var(--ease), border-color .15s;
  contain: strict;
}
.tile[hidden] { display: none; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.tile.mirror video { transform: scaleX(-1); }
.tile.screen video, .tile.role-stage video { object-fit: contain; }
.tile .avatar { position: absolute; inset: 0; display: grid; place-items: center; background: var(--s2); }
.tile .avatar span { --c: var(--blue); width: clamp(40px, 26%, 128px); aspect-ratio: 1; display: grid; place-items: center; background: var(--c); color: #000; font: 600 var(--av)/1 var(--font); clip-path: polygon(0 0, calc(100% - 14%) 0, 100% 14%, 100% 100%, 14% 100%, 0 calc(100% - 14%)); }
.tile.vid-on .avatar { display: none; }
.tile .t-label { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 6px; background: #000b; font: 500 11px/1.2 var(--mono); letter-spacing: 0; white-space: nowrap; }
.tile .t-name { overflow: hidden; text-overflow: ellipsis; }
.tile .t-mic { display: none; color: #fff; background: var(--verm); width: 18px; height: 18px; place-items: center; flex: none; }
.tile .t-mic svg { width: 12px; height: 12px; }
.tile.mic-off .t-mic { display: grid; }
.tile .t-state { position: absolute; top: 8px; left: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--orange); background: #000b; padding: 5px 7px; text-transform: uppercase; display: none; }
.tile.st-wait .t-state { display: block; }
.tile .t-pin { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; display: grid; place-items: center; background: #000b; color: var(--text); opacity: 0; transition: opacity .15s; }
.tile:hover .t-pin, .tile.pinned .t-pin, .tile:focus-within .t-pin { opacity: 1; }
.tile.pinned .t-pin { color: var(--blue); }
.tile .eq { position: absolute; right: 10px; bottom: 10px; display: none; gap: 2px; align-items: flex-end; height: 14px; }
.tile .eq i { width: 3px; background: var(--blue); animation: eq .6s ease-in-out infinite alternate; }
.tile .eq i:nth-child(2) { animation-delay: -.2s; } .tile .eq i:nth-child(3) { animation-delay: -.4s; }
@keyframes eq { from { height: 25%; } to { height: 100%; } }
.tile.speaking .eq { display: flex; }
/* tactical corners — become thick + blue when speaking (shape change, not only colour) */
.tile .cnr { position: absolute; width: 14px; height: 14px; pointer-events: none; border-color: var(--line3); border-style: solid; border-width: 0; transition: all .15s; }
.tile .cnr.tl { left: 4px; top: 4px; border-left-width: 1px; border-top-width: 1px; }
.tile .cnr.br { right: 4px; bottom: 4px; border-right-width: 1px; border-bottom-width: 1px; }
.tile.speaking { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.tile.speaking .cnr { border-color: var(--blue); width: 22px; height: 22px; border-width: 0; }
.tile.speaking .cnr.tl { border-left-width: 3px; border-top-width: 3px; }
.tile.speaking .cnr.br { border-right-width: 3px; border-bottom-width: 3px; }
.tile.role-pip { z-index: 3; border-color: var(--line3); box-shadow: 0 8px 30px #000c; }
.tile.role-pip .t-pin { display: none; }
.tile.role-strip .t-label, .tile.small .t-label { font-size: 11px; padding: 3px 6px 3px 4px; left: 4px; bottom: 4px; }
.tile.role-strip .t-pin, .tile.small .t-pin { width: 28px; height: 28px; }
.tile.presenting-self .avatar { flex-direction: column; gap: 14px; text-align: center; padding: 16px; }
.present-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.present-card .eyebrow { color: var(--blue); }
.present-card h3 { margin: 0; font: 600 22px var(--font); }
.more-tile { position: absolute; display: grid; place-items: center; background: var(--s2); border: 1px dashed var(--line3); font: 600 11px var(--mono); color: var(--text2); letter-spacing: 0; }

.page-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 64px; display: grid; place-items: center; background: var(--s3); border: 1px solid var(--line2); z-index: 4; }
.page-btn:hover { background: var(--s4); }
.page-btn.prev { left: 16px; } .page-btn.next { right: 16px; }
.page-btn[hidden] { display: none; }
.page-ind { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); background: #000c; border: 1px solid var(--line2); padding: 5px 10px; font: 11px var(--mono); letter-spacing: 0; z-index: 4; }
.page-ind[hidden] { display: none; }

.ready-card { position: absolute; left: 24px; bottom: 24px; width: min(380px, calc(100% - 48px)); background: var(--s1); border: 1px solid var(--line2); padding: 20px; z-index: 5; box-shadow: 0 10px 40px #000; display: flex; flex-direction: column; gap: 12px; }
.ready-card h3 { margin: 0; font: 600 22px var(--font); }
.ready-card p { margin: 0; color: var(--text2); font-size: 11px; }
.ready-card .linkrow { display: flex; border: 1px solid var(--line2); background: var(--s2); }
.ready-card .linkrow code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 10px 12px; font: 11px var(--mono); color: var(--blue); }
.ready-card .linkrow button { width: 42px; display: grid; place-items: center; border-left: 1px solid var(--line2); color: var(--text2); }
.ready-card .linkrow button:hover { color: var(--text); background: var(--s3); }
.ready-card .x { position: absolute; top: 8px; right: 8px; }

/* bottom bar */
.bar { height: var(--bar-h); flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 20px; gap: 12px; }
.bar-l { display: flex; align-items: center; gap: 12px; color: var(--text); font: 500 11px var(--mono); letter-spacing: 0; min-width: 0; white-space: nowrap; }
.bar-l .sep { color: var(--line3); }
.bar-l .code { overflow: hidden; text-overflow: ellipsis; }
.bar-l .e2ee { margin-left: 4px; }
.bar-l .mt { color: var(--text); overflow: hidden; text-overflow: ellipsis; max-width: 28ch; }
.bar-l .mt + .code { color: var(--text3); }
.chip.rec { color: #fff; background: var(--verm); border-color: var(--verm); }
.chip.rec.paused { background: transparent; color: var(--orange); border-color: var(--orange); }
.chip.rec.paused svg { animation: none; }
.rec-ctl { display: flex; gap: 6px; }
.rec-ctl[hidden] { display: none; }
.chip.rec svg { width: 12px; height: 12px; animation: recblink 1.4s steps(1) infinite; }
@keyframes recblink { 50% { opacity: .35; } }
.mtitle { font: 400 22px/1.2 var(--font); color: var(--text); overflow-wrap: anywhere; }
.field > span em { font-style: normal; color: var(--text3); }
.bar-c { display: flex; align-items: center; gap: 10px; }
.bar-r { display: flex; justify-content: flex-end; gap: 6px; }
.bar-r .cbtn { background: transparent; border-color: transparent; }
.bar-r .cbtn:hover { background: var(--s3); border-color: var(--line2); }
.bar-r .cbtn.off { background: var(--verm); border-color: var(--verm); color: #fff; }
.bar-r .cbtn[hidden] { display: none; }
.bar-r .cbtn.active { color: var(--blue); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }

/* popover menu */
.menu { position: fixed; z-index: 50; min-width: 260px; max-width: min(380px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; background: var(--s1); border: 1px solid var(--line2); box-shadow: 0 12px 48px #000; padding: 6px 0; }
.menu[hidden] { display: none; }
.menu .mh { padding: 10px 14px 6px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--text3); text-transform: uppercase; }
.menu .mi { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-align: left; font-size: 11px; color: var(--text2); }
.menu .mi:hover { background: var(--s3); color: var(--text); }
.menu .mi .ck { width: 18px; flex: none; color: var(--blue); display: grid; place-items: center; }
.menu .mi .ck svg { width: 16px; height: 16px; }
.menu .mi.sel { color: var(--text); }
.menu .mi .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .mi.danger { color: var(--verm-hi); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.menu .info { padding: 8px 14px 12px; display: flex; flex-direction: column; gap: 10px; color: var(--text2); font-size: 11px; }

/* participants */
.p-tools { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.p-tools .btn { flex: 1; }
.p-sec { padding: 14px 16px 6px; font: 500 11px/1 var(--mono); letter-spacing: 0; color: var(--text3); text-transform: uppercase; }
.prow { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; }
.prow:hover { background: var(--s2); }
.pav { --c: var(--blue); width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--c); color: #000; font: 600 11px var(--font); clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); }
.pmeta { flex: 1; min-width: 0; }
.pname { display: flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
.pname .n { overflow: hidden; text-overflow: ellipsis; }
.tag { font: 600 11px/1 var(--mono); letter-spacing: 0; padding: 3px 5px; border: 1px solid var(--line3); color: var(--text2); flex: none; }
.tag.host { border-color: var(--blue); color: var(--blue); }
.psub { font: 11px/1.4 var(--mono); color: var(--text3); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psub .ok { color: var(--green); }
.psub .warn { color: var(--orange); }
.psub .bad { color: var(--verm-hi); }
.tile.st-fail .t-state { color: #fff; background: var(--verm); }
.pact { display: flex; gap: 2px; flex: none; }
.pact .icon-btn { width: 34px; height: 34px; }
.pact .icon-btn svg { width: 17px; height: 17px; }
.pact .icon-btn.is-off { color: var(--verm-hi); }
.pact .icon-btn.static { cursor: default; }
.pact .icon-btn.static:hover { background: none; }
.pact .icon-btn.danger:hover { color: #fff; background: var(--verm); }

/* chat */
.chat { display: flex; flex-direction: column; height: 100%; }
.chat-list { flex: 1; overflow: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.cmsg .ch { display: flex; gap: 8px; align-items: baseline; }
.cmsg .ch b { font-weight: 600; font-size: 11px; }
.cmsg .ch time { font: 11px var(--mono); color: var(--text3); }
.cmsg .cb { margin-top: 2px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.cmsg.self .ch b { color: var(--blue); }
.cmsg .cb a { color: var(--blue); }
.chat-form { flex: none; display: flex; margin: 12px; border: 1px solid var(--line2); background: var(--s2); }
.chat-form:focus-within { border-color: var(--blue); }
.chat-form textarea { flex: 1; resize: none; background: transparent; border: 0; outline: 0; padding: 12px; font: 11px/1.4 var(--font); color: var(--text); max-height: 120px; min-height: 46px; }
.chat-form button { width: 48px; display: grid; place-items: center; color: var(--blue); }
.chat-form button:disabled { color: var(--text3); }
.chat-empty { margin: auto; color: var(--text3); text-align: center; font: 11px var(--mono); letter-spacing: 0; }

/* toasts */
#toasts { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 12px); transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(520px, calc(100vw - 24px)); }
.toast { pointer-events: auto; background: var(--text); color: #000; padding: 12px 16px; font-size: 11px; display: flex; gap: 14px; align-items: center; box-shadow: 0 8px 30px #000; animation: tin .2s var(--ease); max-width: 100%; }
.toast .acts { display: flex; gap: 6px; margin-left: auto; flex: none; }
.toast .acts button { font: 600 11px/1 var(--mono); letter-spacing: 0; text-transform: uppercase; padding: 9px 10px; color: var(--navy); }
.toast .acts button:hover { background: #0001; }
.toast .acts button.pri { background: #000; color: #fff; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ended */
.ended-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 24px; position: relative; }
.ended-main > * { position: relative; }
.ended-main h1 { font: 600 44px/1.1 var(--font); letter-spacing: 0; margin: 6px 0 0; }
.ended-main p { color: var(--text2); margin: 0; max-width: 46ch; }
.ended-main .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }

.spinner { width: 18px; height: 18px; border: 2px solid var(--line3); border-top-color: var(--blue); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading { display: grid; place-items: center; height: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { :root { --side-w: 320px; } }
@media (max-width: 900px) {
  .lobby-main { grid-template-columns: 1fr; align-items: start; }
  .side { position: absolute; inset: 0; margin: 0; z-index: 20; width: auto; border: 0; }
}
@media (max-width: 720px) {
  :root { --bar-h: 72px; --h1: 44px; --av: 33px; }
  .topbar { padding: 0 16px; height: 60px; }
  .brand-meet { height: 15px; }
  .topbar .right .clock { display: none; }
  .home-main { padding: 32px 16px; justify-content: flex-start; }
  .home h1 { margin-top: 18px; }
  .lede { font-size: 11px; margin-bottom: 28px; }
  .home-actions .btn { width: 100%; }
  .specs { margin-top: 36px; }
  .home-foot { padding: 14px 16px; }
  .lobby-main { padding: 16px; }
  .devices { grid-template-columns: 1fr; }
  .bar { grid-template-columns: 1fr auto; padding: 0 10px; gap: 6px; }
  .bar-l { display: none; }
  .bar-c { gap: 6px; }
  .cbtn { width: 44px; height: 44px; }
  .caret { width: 20px; height: 44px; }
  .cbtn.leave { width: 56px; }
  .bar-r { gap: 0; }
  .bar-r .cbtn { width: 40px; }
  #b-info { display: none; }
  .stage-wrap { padding: 8px 8px 0; }
  .page-btn { width: 32px; height: 52px; }
  .page-btn.prev { left: 4px; } .page-btn.next { right: 4px; }
  .ready-card { left: 12px; bottom: 12px; width: calc(100% - 24px); }
}
.bar-c .people-m, .bar-c .chat-m { display: none !important; }
@media (max-width: 420px) {
  .bar { grid-template-columns: 1fr; justify-items: center; }
  .bar-r { display: none; }
  .bar-c .people-m, .bar-c .chat-m { display: grid !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }