/*
 * Rooms — a lesson room.
 *
 * Dark by default because it sits behind a camera feed and a whiteboard
 * for an hour at a time. Three columns on a desktop (rail / stage /
 * people), stacking to one on a phone. Every colour is a token so the
 * charts, which paint on a canvas and cannot inherit CSS, can read the
 * same values back with getComputedStyle.
 */

:root {
    /* Since 2026-09-07 the SDK's tokens (vendor/sdk-ui/design-tokens.css,
       loaded first) are the palette, so Recess and the site are one family.
       --bg, --brand, --brand-hover, --danger, --warning and --success are
       the SDK's own names and are NOT redeclared here — a var() that names
       itself is a cycle and computes to nothing. The app's own names map onto
       the SDK's with the old literal as the fallback for a page that loads
       this file alone. */
    --panel:     var(--surface-1, #161b22);
    --panel-2:   var(--surface-2, #1c2230);
    --line:      var(--border-strong, #2a3140);
    --ink:       var(--text, #e6edf3);
    --ink-dim:   var(--text-muted, #8b949e);
    --brand-ink: #ffffff;
    --good:      var(--success, #3fb950);
    --warn:      var(--warning, #d29922);
    --bar:       #30475e;
    --grid:      rgba(255, 255, 255, .08);
    --rail:      212px;
    --side:      280px;
    --r:         10px;
    --accent-violet: #8b5cf6;
    --accent-cyan: var(--info, #22d3ee);
    --focus-ring: #a78bfa;
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
}
/* A page that loads rooms.css without the tokens still needs these. */
html:not(:has(link[href*="design-tokens"])) {
    --bg: #0d1117; --brand: #58a6ff; --brand-hover: #79b8ff; --danger: #f85149;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is only a default of display:none, so any rule that
   sets display — and .ck-gate sets grid, .ck-app sets grid — beats it. The
   overlay then stays laid out over the lesson, invisible but still eating
   every click. This is the fix, and it has to outrank those rules. */
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.5 var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    overscroll-behavior: none;
}

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

button, input { font: inherit; color: inherit; }

/* ── buttons ─────────────────────────────────────────────────────── */
.ck-btn {
    background: var(--panel-2);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: var(--r);
    padding: 9px 14px;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s;
}
.ck-btn:hover  { background: var(--surface-3, #232b3a); border-color: var(--border-strong, #3a4356); }
.ck-btn:active { transform: translateY(1px); }
.ck-btn:focus-visible,
.ck-tool:focus-visible,
.ck-chan:focus-visible,
.ck-tab:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ck-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.ck-btn--primary:hover { background: var(--brand-hover, #79b8ff); }
.ck-btn--sm   { padding: 6px 10px; font-size: 13px; }
.ck-btn--icon { padding: 8px 10px; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.ck-btn--icon .icon { width: 18px; height: 18px; }
.ck-btn.is-on .icon { color: var(--brand-ink); }
.ck-btn.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ck-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── join gate ───────────────────────────────────────────────────── */
.ck-gate {
    position: fixed; inset: 0; z-index: 40;
    display: grid; place-items: center; padding: 20px;
    background:
      radial-gradient(800px 520px at 12% 0%, rgba(139, 92, 246, .20), transparent 68%),
      radial-gradient(760px 540px at 92% 100%, rgba(34, 211, 238, .11), transparent 68%),
      var(--bg);
}
.ck-gate__card {
    width: min(430px, 100%);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 26px;
    box-shadow: var(--shadow-lg);
}
/* A growing request history must scroll inside the fixed account gate. */
#listGate { overflow-y: auto; align-items: start; }
.ck-upgrade { margin: 1rem 0; border: 1px solid var(--line); border-radius: 12px; padding: 1rem; font-size: 14px; }
.ck-upgrade summary { cursor: pointer; font-weight: 600; }
.ck-upgrade select {
    width: 100%; min-width: 0; min-height: 44px; padding: 8px;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink);
}
.ck-upgrade select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ck-upgrade ul { padding-left: 1rem; overflow-wrap: anywhere; }
.ck-upgrade a { color: var(--brand); }
.ck-gate__brand { font-size: 21px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.ck-gate__mark  { font-size: 26px; }
.ck-gate__pitch { color: var(--ink-dim); margin: 10px 0 20px; }
.ck-field { display: block; margin-bottom: 14px; }
.ck-field > span { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 5px; }
.ck-field small  { display: block; color: var(--ink-dim); font-size: 12px; margin-top: 5px; }
.ck-field input, .ck-input {
    width: 100%; padding: 10px 12px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r); color: var(--ink);
}
.ck-gate__go  { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.ck-gate__go .ck-btn { flex: 1 1 150px; }
.ck-gate__err { color: var(--danger); font-size: 13px; margin: 12px 0 0; }

/* ── shell ───────────────────────────────────────────────────────── */
.ck-app {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr) var(--side);
    height: 100%;
}

.ck-rail {
    background: var(--bg);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    padding: 10px 8px; gap: 4px; overflow-y: auto; min-width: 0;
}
.ck-rail__top { display: flex; gap: 9px; align-items: flex-start; padding: 4px 6px 12px; }
.ck-rail__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: var(--ink); }
.ck-rail__mark .icon { width: 16px; height: 16px; }
.ck-rail__id { min-width: 0; display: grid; gap: 3px; }
.ck-rail__id strong { font-size: 14px; overflow-wrap: anywhere; }
.ck-rail__brand { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; overflow-wrap: anywhere; }
.ck-rail__brand[hidden], .ck-rail__mark[hidden] { display: none; }
.ck-rail__group {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-dim); padding: 12px 6px 4px;
}
.ck-mini {
    background: none; border: 0; color: var(--ink-dim);
    font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 5px;
}
.ck-mini:hover { color: var(--ink); background: var(--panel-2); }
.ck-chans { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* Channel rows, following Harmony's grammar so the two apps read the same:
   fixed icon column, name that ellipsises, hover reveal for destructive
   actions, and an active state marked by an inset bar rather than only a
   background — the bar is what survives a busy list. */
.ck-chan {
    display: flex; align-items: center; gap: 6px;
    width: 100%; text-align: left;
    min-height: 34px; padding: 6px 8px; margin: 1px 0;
    background: none; border: 0; border-radius: 7px;
    color: var(--ink-dim); font-size: 14px; font-weight: 500;
    cursor: pointer; min-width: 0;
}
.ck-chan:hover { background: rgba(255, 255, 255, .06); color: var(--ink); }
.ck-chan.is-on {
    color: var(--ink);
    background: linear-gradient(90deg, rgba(88, 166, 255, .24), rgba(88, 166, 255, .09));
    box-shadow: inset 2px 0 0 var(--brand);
}
/* An unread channel is bold, not just badged — the badge is the count, the
   weight is the signal you catch without reading. */
.ck-chan.has-unread { color: var(--ink); font-weight: 700; }

.ck-chan__ico { width: 18px; text-align: center; opacity: .8; flex: none; }
.ck-chan__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-chan__n {
    background: var(--danger); color: var(--ink); border-radius: 999px;
    font-size: 11px; padding: 1px 6px; font-weight: 700; flex: none;
}
.ck-chan__del {
    color: var(--ink-dim); font-size: 11px; line-height: 1;
    padding: 3px 5px; border-radius: 3px; opacity: 0; flex: none;
}
.ck-chan:hover .ck-chan__del { opacity: 1; }
.ck-chan__del:hover { color: var(--ink); background: rgba(248, 81, 73, .22); }

/* Who is in a voice room, nested under it. This is the detail that makes a
   Discord sidebar readable at a glance: where everybody is, without clicking. */
.ck-chan__in { list-style: none; margin: 0 0 4px; padding: 0 0 0 26px; display: grid; gap: 2px; }
.ck-chan__in li {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--ink-dim); min-width: 0;
    padding: 2px 4px; border-radius: 5px;
}
.ck-chan__in li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Touch has no hover, so a delete that only appears on hover is unreachable. */
@media (hover: none) {
    .ck-chan__del { opacity: .7; padding: 5px 7px; }
}

.ck-rail__end { margin-top: auto; padding-top: 12px; display: grid; gap: 6px; }
.ck-btn--quiet { background: none; border-color: transparent; color: var(--ink-dim); }
.ck-btn--quiet:hover { background: var(--danger-bg); color: var(--ink); }

.ck-main { display: flex; flex-direction: column; min-width: 0; }

.ck-top {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    flex-wrap: wrap;
}
.ck-top__where { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.ck-top__where strong { overflow-wrap: anywhere; }
.ck-top__hash  { color: var(--ink-dim); font-size: 17px; }
.ck-top__topic {
    color: var(--ink-dim); font-size: 13px;
    border-left: 1px solid var(--line); padding-left: 9px; margin-left: 3px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ck-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; color: var(--ink-dim);
    background: var(--bg); border: 1px solid var(--line);
    border-radius: 6px; padding: 2px 7px;
    overflow-wrap: anywhere;
}
.ck-top__state { display: flex; gap: 7px; }
.ck-top__media { margin-left: auto; display: flex; gap: 7px; }
.ck-pill {
    font-size: 12px; padding: 3px 9px; border-radius: 999px;
    background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
}
.ck-pill--live { color: var(--good); border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-bg); }

/* ── the video strip: always present ─────────────────────────────── */
/* This is the whole point of the layout. Opening the board or a quiz must
   never be the reason you stop seeing the people you are talking to, so the
   faces live in their own row above the working surface rather than being one
   of the things you switch between. */
.ck-strip {
    position: relative;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    padding: 8px 40px 8px 10px;
    flex: none; max-height: 34vh; overflow: auto;
    transition: max-height .18s ease, padding .18s ease;
}
.ck-strip.is-folded,
body.has-stage .ck-strip.is-folded {
    max-height: 40px;
    min-height: 40px;
    padding: 4px 8px;
    overflow: hidden;
}
.ck-strip.is-folded .ck-stage,
.ck-strip.is-folded .ck-strip__grid,
.ck-strip.is-folded .ck-strip__empty { display: none; }
.ck-strip.is-folded .ck-strip__fold {
    position: static;
    display: block;
    width: 100%;
    min-height: 30px;
    font-size: 13px;
}
/*
 * A FILMSTRIP, not a stage. Tiles have a ceiling as well as a floor: with
 * `1fr` a single camera stretched to the full width of the room, stood about
 * 500px tall, and pushed the conversation off the bottom of the screen behind
 * a scrollbar. One person joining should not rearrange everything.
 *
 * Making a face big is what clicking it is for — that is the stage.
 */
.ck-strip__grid {
    display: grid; gap: 8px; justify-content: start;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 232px));
}
.ck-strip__empty { color: var(--ink-dim); font-size: 13px; margin: 6px 2px; }
.ck-strip__fold {
    position: absolute; top: 6px; right: 8px;
    background: var(--panel-2); border: 1px solid var(--line); color: var(--ink-dim);
    border-radius: 6px; cursor: pointer; padding: 2px 7px; font-size: 11px;
}
.ck-strip__fold:hover { color: var(--ink); }

/* ── the working surface ─────────────────────────────────────────── */
.ck-surface { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ck-tabs {
    display: flex; gap: 4px; padding: 8px 10px 0;
    border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap;
}
.ck-tab {
    background: none; border: 1px solid transparent; border-bottom: 0;
    color: var(--ink-dim); cursor: pointer; position: relative;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 8px 8px 0 0; font-size: 14px;
}
.ck-tab .icon { width: 16px; height: 16px; }
.ck-tab__dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.ck-tab__dot[hidden] { display: none; }
.ck-tab:hover  { color: var(--ink); background: var(--panel-2); }
.ck-tab.is-on  { color: var(--ink); background: var(--panel); border-color: var(--line); }
.ck-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Icons: the SDK sprite (vendor/sdk-ui/icons.js). Stroke, not fill. */
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ck-btn .icon + .ck-label, .ck-btn .icon + span { margin-left: 6px; }
.ck-menu__item .icon { width: 15px; height: 15px; margin-right: 6px; }
.ck-attach .icon { width: 20px; height: 20px; color: var(--ink-dim); }
.ck-attach:hover .icon { color: var(--ink); }

/* The chat before anybody has spoken. */
.ck-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 20px 24px; text-align: center; color: var(--ink-dim); }
.ck-empty[hidden] { display: none; }
.ck-empty__mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--panel-2); color: var(--brand); margin-bottom: 6px; }
.ck-empty__mark .icon { width: 22px; height: 22px; }
.ck-empty__title { margin: 0; color: var(--ink); font-weight: 600; font-size: 15px; }
.ck-empty__hint { margin: 0; font-size: 13px; max-width: 42ch; }
.ck-coach { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; width: min(440px, 100%); text-align: left; }
.ck-coach[hidden] { display: none; }
.ck-coach li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-dim); }
.ck-coach .ck-btn { justify-content: flex-start; white-space: nowrap; }

.ck-gallery__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--panel-2); color: var(--brand-ink, var(--brand)); margin-right: 8px; vertical-align: middle; }
.ck-gallery__icon .icon { width: 15px; height: 15px; }

/* ── views ───────────────────────────────────────────────────────── */
.ck-view { display: none; flex: 1; min-height: 0; padding: 14px; overflow: auto; }
.ck-view.is-on { display: flex; flex-direction: column; }

.ck-tile {
    position: relative; background: #000;
    border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; aspect-ratio: 4 / 3;
}
.ck-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-tile__tag {
    position: absolute; left: 7px; bottom: 7px;
    background: rgba(0,0,0,.62); border-radius: 6px;
    padding: 2px 7px; font-size: 12px; max-width: calc(100% - 14px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}


/* board */
.ck-board__bar {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding-bottom: 10px;
}
.ck-tools, .ck-swatches { display: flex; gap: 5px; }
.ck-tool {
    width: 36px; height: 36px; border-radius: 9px;
    background: var(--panel-2); border: 1px solid var(--line); cursor: pointer;
}
.ck-tool.is-on { background: var(--brand); border-color: var(--brand); }
.ck-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.ck-swatch.is-on { border-color: var(--ink); }
.ck-board__acts { margin-left: auto; display: flex; gap: 7px; }
.ck-board__zoom { display: inline-flex; gap: 3px; }
.ck-board__zoom-value { min-width: 58px; color: var(--ink-dim); }
.ck-board__wrap {
    flex: 1; min-height: 320px; position: relative; overflow: hidden;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r);
}
#board { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#board.is-hand { cursor: grab; }
#board.is-panning { cursor: grabbing; }
.ck-locked { color: var(--warn); font-size: 13px; text-align: center; }

/* quiz */
.ck-quiz   { display: grid; gap: 14px; align-content: start; max-width: 720px; width: 100%; margin: 0 auto; }
.ck-card   { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
.ck-card h3 { margin: 0 0 12px; font-size: 17px; overflow-wrap: anywhere; }
.ck-opts   { display: grid; gap: 8px; margin: 12px 0; }
.ck-opt    { display: flex; gap: 9px; align-items: center; }
.ck-opt input[type=text] { flex: 1; min-width: 0; }
.ck-quiz__go { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ck-count  { color: var(--ink-dim); font-size: 13px; }
.ck-hint   { color: var(--ink-dim); font-size: 13px; margin: 10px 0 0; }
.ck-choices { display: grid; gap: 9px; }
.ck-choice {
    text-align: left; padding: 13px 15px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r); cursor: pointer; overflow-wrap: anywhere;
}
.ck-choice:hover  { border-color: var(--brand); }
.ck-choice.is-mine { border-color: var(--brand); background: var(--info-bg); }
.ck-choice.is-right { border-color: var(--good); background: var(--success-bg); }
.ck-choice[disabled] { cursor: default; }

/* charts */
.ck-charts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-content: start; }
.ck-canvas { width: 100%; height: 170px; display: block; }
.ck-canvas--tall { height: 230px; }

/* ── people + chat ───────────────────────────────────────────────── */
.ck-side {
    background: var(--panel); border-left: 1px solid var(--line);
    display: flex; flex-direction: column; min-width: 0;
}
.ck-side__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 13px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink-dim); border-bottom: 1px solid var(--line);
}
.ck-badge { background: var(--panel-2); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
.ck-roster { list-style: none; margin: 0; padding: 6px; max-height: 34vh; overflow: auto; }
.ck-person { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.ck-person:hover { background: var(--panel-2); }
.ck-person__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); flex: none; }
.ck-person__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
/* 11px is the floor: below that the label stops being readable on a phone,
   and "HOST" mattering less than a name is not a reason to make it illegible. */
.ck-person__tag { font-size: 11px; color: var(--brand-ink); background: var(--brand); border-radius: 4px; padding: 1px 5px; }
.ck-person__tag--cohost { background: var(--panel-2); color: var(--brand); border: 1px solid var(--line); }
/* The host's grant button: quiet until the row is hovered, like a channel's delete. */
.ck-person__grant { font-size: 15px; opacity: .55; }
.ck-person:hover .ck-person__grant, .ck-person__grant:focus-visible { opacity: 1; }

.ck-log { flex: 1; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 100px; }
.ck-msg { font-size: 14px; overflow-wrap: anywhere; }
.ck-msg__who  { color: var(--brand); font-weight: 600; margin-right: 6px; }
.ck-msg--tutor .ck-msg__who { color: var(--warn); }
.ck-react { display: flex; gap: 4px; padding: 6px 10px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ck-react button { background: none; border: 0; font-size: 18px; cursor: pointer; border-radius: 7px; padding: 3px 5px; }
.ck-react button:hover { background: var(--panel-2); }
.ck-compose { display: flex; gap: 7px; padding: 10px; border-top: 1px solid var(--line); }
.ck-attach { cursor: pointer; font-size: 17px; align-self: center; padding: 0 2px; }
.ck-attach:hover { filter: brightness(1.4); }
.ck-msg__img { max-width: 100%; border-radius: 8px; margin-top: 5px; display: block; }
.ck-msg__old { opacity: .72; }
.ck-msg__dm  { color: var(--warn); font-size: 11px; margin-left: 6px; }
.ck-compose input { flex: 1; min-width: 0; padding: 9px 11px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }

/* floating reactions + toast */
.ck-floats { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.ck-float  { position: absolute; bottom: 78px; font-size: 30px; animation: ck-rise 2.6s ease-out forwards; }
@keyframes ck-rise {
    0%   { opacity: 0; transform: translateY(0) scale(.6); }
    12%  { opacity: 1; transform: translateY(-16px) scale(1.1); }
    100% { opacity: 0; transform: translateY(-190px) scale(1); }
}
.ck-toast {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: var(--r); padding: 10px 16px; z-index: 50;
}

@media (prefers-reduced-motion: reduce) {
    .ck-float { animation-duration: 1ms; }
    * { transition: none !important; }
}

/* ── narrow ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    :root { --rail: 176px; }
    .ck-app { grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: 1fr auto; }
    .ck-side {
        grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line);
        max-height: 46vh;
    }
    .ck-roster { max-height: 18vh; }
    .ck-strip { max-height: 26vh; }
}

/* Wider than a phone there are no drawers, so no buttons to open them and no
   scrim to close them. Declared BEFORE the phone block on purpose: between
   rules of the same specificity the later one wins, media query or not, and
   writing these afterwards left the toggles invisible on the only screens
   that need them. */
.ck-only-narrow { display: none; }
.ck-scrim { display: none; }

/*
 * On a phone the room is ONE COLUMN — the conversation — and the two lists
 * beside it become drawers.
 *
 * The previous answer laid the rail out as a horizontal scroller across the
 * top. It fitted, which is not the same as working: the room's name and code
 * were dropped to save width, and Invite and Leave sat off the right-hand
 * edge behind a sideways scroll nobody would think to make. A drawer keeps
 * the rail exactly as it is on a desktop and simply slides it out of the way.
 */
@media (max-width: 640px) {
    .ck-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }

    .ck-rail, .ck-side {
        position: fixed; top: 0; bottom: 0; z-index: 55;
        width: min(290px, 84vw); max-height: none;
        transition: transform .22s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.5);
    }
    .ck-rail { left: 0; transform: translateX(-100%); }
    .ck-side { right: 0; left: auto; transform: translateX(100%); border-left: 1px solid var(--line); border-top: 0; }
    body.rail-open   .ck-rail { transform: none; }
    body.people-open .ck-side { transform: none; }

    .ck-scrim:not([hidden]) {
        display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5);
    }

    /* The two toggles exist only here; on a desktop both lists are simply
       visible and a button to reveal them would be a button to nowhere. */
    .ck-only-narrow { display: inline-flex; }

    /* One row. The topic goes, the Invite label goes, the media buttons
       shrink; nothing wraps, so the header stays 52px and the room gets the
       screen. The tabs move to the bottom edge where a thumb already is. */
    .ck-top { gap: 6px; flex-wrap: nowrap; min-height: 52px; padding: 6px 8px; }
    .ck-top__topic { display: none; }
    .ck-top__where { min-width: 0; }
    .ck-top__where { flex: 1 1 auto; }
    .ck-top__where strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: none; }
    /* "live" becomes its dot; the word costs 40px the name needs more. */
    .ck-pill--live { width: 10px; height: 10px; padding: 0; border-radius: 50%; overflow: hidden; text-indent: -999px; white-space: nowrap; }
    #btnShareTop .ck-label { display: none; }
    .ck-top__media { width: auto; margin-left: auto; gap: 4px; }
    .ck-top__media .ck-btn--icon { padding: 7px; }
    .ck-btn--icon .icon { width: 17px; height: 17px; }
    .ck-room-tabs {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
        display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
        padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
        background: var(--panel); border-top: 1px solid var(--line); border-bottom: 0;
    }
    .ck-room-tabs .ck-tab { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 2px; border: 0; border-radius: 8px; font-size: 11px; min-height: 48px; }
    .ck-room-tabs .ck-tab .icon { width: 20px; height: 20px; }
    .ck-room-tabs .ck-tab.is-on { background: var(--panel-2); color: var(--brand); border: 0; }
    .ck-room-tabs .ck-tab__dot { top: 4px; right: calc(50% - 16px); }
    .ck-surface { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    .ck-view { padding: 10px; }
    .ck-view--chat { padding: 0; }
    .ck-strip { max-height: 22vh; padding-right: 34px; }
    .ck-roster { max-height: none; }
}

/* ── accounts: sign in, and the list of rooms you own ─────────────── */

.ck-gate__card--wide { width: min(900px, 100%); }
.ck-dashboard-intro { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 25px 0 18px; }
.ck-dashboard-intro h1 { margin: 0; font-size: 28px; }
.ck-dashboard-intro p { margin: 3px 0 0; color: var(--ink-dim); }
.ck-dashboard-label { margin: 21px 0 8px; color: var(--ink-dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.ck-tabs--auth {
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px; padding: 0;
}
.ck-tabs--auth .ck-tab { border-radius: 8px 8px 0 0; }

.ck-gate__note {
    color: var(--ink-dim); font-size: 13px;
    margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}

.ck-who {
    margin-left: auto; font-size: 13px; font-weight: 400; color: var(--ink-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%;
}

.ck-newroom { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.ck-newroom input {
    flex: 1 1 220px; min-width: 0; padding: 10px 12px;
    background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r); color: var(--ink);
}

/* Guest → member: a quiet card under the roster, not a modal. Interrupting
   somebody mid-lesson to sell them an account is how it would be ignored. */
.ck-keep {
    margin: 10px; padding: 12px; border-radius: 12px;
    border: 1px solid var(--line); background: var(--panel-2);
    display: flex; flex-direction: column; gap: 8px; flex: none;
}
.ck-keep__title { font-size: 14px; }
.ck-keep__pitch, .ck-keep__done { color: var(--ink-dim); font-size: 12.5px; margin: 0; }
.ck-keep__done { color: var(--good, #56d364); }
.ck-keep__form { display: flex; flex-direction: column; gap: 2px; }
.ck-keep__form .ck-field { margin-bottom: 8px; }
.ck-keep__go { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-keep__err { color: var(--danger); font-size: 12.5px; margin: 6px 0 0; }

/* Replay: a scrubber, then the log and the board side by side. */
.ck-replay { display: flex; flex-direction: column; gap: 12px; }
.ck-replay__bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ck-replay__bar input[type=range] { flex: 1 1 200px; min-width: 0; accent-color: var(--brand); }
.ck-replay__count, .ck-replay__time { color: var(--ink-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.ck-replay__panes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ck-replay__log { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.ck-replay__row { display: flex; gap: 8px; align-items: baseline; }
.ck-replay__row--quiz { color: var(--accent, #2dd4bf); }
.ck-replay__at { color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums; flex: none; }
.ck-replay__board { width: 100%; height: 260px; display: block; background: var(--bg); border-radius: var(--r); }

/* Scheduling: a start time on the room row, and the form that sets it. */
.ck-room__when { color: var(--accent, #2dd4bf); font-size: 13px; }
.ck-sched { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; width: 100%; margin-top: 8px; }
.ck-sched input[type=datetime-local] {
    padding: 8px 10px; background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r); color: var(--ink); color-scheme: dark; flex: 1 1 200px; min-width: 0;
}
.ck-gate__when { color: var(--ink-dim); font-size: 14px; margin: -10px 0 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ck-gate__when .ck-link { padding: 0; }

/* Templates: a row of radio chips under the create form. */
.ck-templates { border: 0; padding: 0; margin: 0 0 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ck-templates__legend { float: left; font-size: 13px; color: var(--ink-dim); margin-right: 4px; padding: 0; }
.ck-template { position: relative; cursor: pointer; }
.ck-template input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ck-template span {
    display: inline-block; padding: 7px 12px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel-2); font-size: 13.5px; color: var(--ink);
}
.ck-template input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.ck-template input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.ck-templates__blurb { color: var(--ink-dim); font-size: 13px; margin: 0 0 14px; min-height: 1.4em; }

/* The question bank under the composer. */
.ck-bank { margin: 10px 0 4px; }
.ck-bank__label { display: block; font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.ck-bank__list { display: flex; flex-direction: column; gap: 4px; }
.ck-bank__q {
    text-align: left; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
    border-radius: var(--r); padding: 7px 10px; cursor: pointer; font-size: 14px;
}
.ck-bank__q:hover { border-color: var(--brand); }
.ck-bank__q.is-used { opacity: .55; text-decoration: line-through; }

/* Meters. Unlimited is a number with no bar, not a full bar. */
.ck-meters {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 18px;
    margin: 0 0 14px; padding: 10px 12px;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
}
.ck-meter { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline; font-size: 13px; }
.ck-meter__label { color: var(--ink-dim); }
.ck-meter__value { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-meter__bar {
    grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--bar); overflow: hidden;
}
.ck-meter__bar[hidden] { display: none !important; }
.ck-meter__fill { display: block; height: 100%; width: 0; background: var(--brand); transition: width .3s; }
.ck-meter--warn .ck-meter__fill { background: var(--warn); }
.ck-meter--over .ck-meter__fill { background: var(--danger); }
.ck-meter--over .ck-meter__value { color: var(--danger); }
.ck-meter__note { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--warn); }
/* Over the included minutes on a plan that invoices them: a fact, not an alarm. */
.ck-meter--overage .ck-meter__fill { background: var(--warn); }
.ck-meter__note--overage { color: var(--ink-dim); }
/* What the plan includes. One row per advertised feature, state on the right. */
.ck-features { grid-column: 1 / -1; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.ck-features__item { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-dim); }
.ck-features__item.is-on { color: var(--ink); }
.ck-features__state { white-space: nowrap; }
.ck-features__item.is-on .ck-features__state { color: var(--good); }
.ck-check { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; }
.ck-upgrade input[type=color] { width: 64px; height: 34px; padding: 2px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }

.ck-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-rooms__empty { color: var(--ink-dim); font-size: 14px; padding: 14px 2px; }

.ck-room {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--line);
    border-radius: var(--r); background: var(--panel-2);
}
.ck-room__meta { flex: 1 1 180px; min-width: 0; display: grid; gap: 2px; }
.ck-room__meta strong { overflow-wrap: anywhere; }
.ck-room__meta span {
    font-size: 12px; color: var(--ink-dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ck-room__acts { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 520px) {
    .ck-room__acts { width: 100%; }
    .ck-room__acts .ck-btn { flex: 1; }
}

/* ── sign-in extras: forgot link, Google, reset ───────────────────── */

/* Looks like a link, is a button, and is aimed at with a thumb: 6px of
   padding made it 25px tall, which is under the size at which a finger
   reliably lands on it. The text stays 13px; the target grows. */
.ck-btn--link {
    background: none; border: 0; padding: 9px 0;
    color: var(--ink-dim); font-size: 13px; text-decoration: underline;
    cursor: pointer; display: block; margin-top: 4px; min-height: 32px;
}
.ck-btn--link:hover { color: var(--ink); }

.ck-or {
    display: flex; align-items: center; gap: 10px;
    color: var(--ink-dim); font-size: 12px; margin: 16px 0 12px;
}
.ck-or::before, .ck-or::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
}

.ck-btn--google {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600;
}
.ck-btn--google:hover { background: #f5f6f7; }
/* A single letter rather than Google's mark: the real one is a hosted asset
   this page's policy will not load, and a broken image on a sign-in button
   looks like a broken sign-in. */
.ck-g {
    font-weight: 700; font-size: 17px; line-height: 1;
    background: linear-gradient(90deg, #4285f4, #ea4335 40%, #fbbc05 70%, #34a853);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.ck-gate__ok { color: var(--good); font-size: 13px; margin: 12px 0 0; }

/* ── who is here ──────────────────────────────────────────────────── */

/* Initials, coloured deterministically from the name so the same person is
   the same colour for everyone in the room and across reloads. */
.ck-av {
    flex: none; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--bg); letter-spacing: .02em;
}
/* The initials inside a small avatar. Bigger circle rather than smaller text:
   two characters at 9px are a smudge. */
.ck-av--sm { width: 22px; height: 22px; font-size: 11px; margin-right: 6px; vertical-align: -5px; }

/* Arrivals and departures read as events, not as chat. */
.ck-sys {
    font-size: 12.5px; color: var(--ink-dim); font-style: italic;
    padding: 2px 0; overflow-wrap: anywhere;
}

.ck-ptoasts { display: grid; gap: 6px; padding: 0 10px; }
.ck-ptoast {
    display: flex; align-items: center; gap: 8px;
    background: var(--panel-2); border: 1px solid var(--line);
    border-radius: 8px; padding: 6px 10px; font-size: 13px;
    animation: ck-ptoast-in .18s ease-out;
}
.ck-ptoast span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes ck-ptoast-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .ck-ptoast { animation: none; } }

/* ── the stage: one enlarged tile ─────────────────────────────────── */

/* The strip grows to make room rather than the stage overlaying it — the
   point of this layout is that you never lose sight of the room. */
body.has-stage .ck-strip { max-height: 62vh; }

.ck-stage { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; min-height: 0; }
.ck-stage__host { flex: 1; min-height: 220px; display: flex; }
.ck-stage__host .ck-tile.is-stage {
    flex: 1; aspect-ratio: auto; min-height: 220px; max-height: 52vh;
    border-color: var(--brand);
}
/* A shared screen is mostly text and must not be cropped; a face looks wrong
   letterboxed. The peer's own media-state decides which this is. */
.ck-tile.is-stage video { object-fit: cover; }
.ck-tile.is-stage.is-screen video { object-fit: contain; background: #000; }

.ck-stage__bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13px; color: var(--ink-dim);
}
.ck-stage__bar #stageWhat { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.ck-stage__keys { margin-left: auto; font-size: 12px; }

/* Reachable by keyboard, and it has to look reachable. */
.ck-tile { cursor: pointer; }
.ck-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ck-tile__zoom {
    position: absolute; top: 6px; right: 6px;
    background: rgba(0,0,0,.6); border: 1px solid var(--line); color: var(--ink);
    border-radius: 6px; padding: 2px 7px; font-size: 12px; cursor: pointer;
    opacity: 0; transition: opacity .12s;
}
.ck-tile:hover .ck-tile__zoom, .ck-tile:focus-within .ck-tile__zoom { opacity: 1; }
/* No hover on touch, so the control would be unreachable. */
@media (hover: none) { .ck-tile__zoom { opacity: .85; } }

/* In fullscreen the bar would cover the picture. */
body.is-fullscreen .ck-stage__keys { display: none; }
.ck-stage:fullscreen { background: #000; padding: 12px; }
.ck-stage:fullscreen .ck-tile.is-stage { max-height: none; }

@media (max-width: 640px) {
    body.has-stage .ck-strip { max-height: 58vh; }
    .ck-stage__host .ck-tile.is-stage { min-height: 160px; }
    .ck-stage__keys { display: none; }
}

/* ── the invite panel ─────────────────────────────────────────────── */

.ck-modal {
    position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center; padding: 16px;
    overflow-y: auto;
}
.ck-modal[hidden] { display: none; }
.ck-modal__card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 18px; width: min(620px, 100%); max-height: 90vh; overflow-y: auto;
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
}
.ck-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.ck-invite { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
/* The QR is scanned by a phone camera, so it stays white-on-black whatever
   the app's theme is — a dark-mode QR is an unreadable QR on many scanners. */
.ck-invite__qr { background: #fff; padding: 8px; border-radius: 8px; line-height: 0; }
.ck-invite__qr img, .ck-invite__qr canvas { display: block; }
.ck-invite__side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.ck-invite__side input { width: 100%; }
.ck-invite__row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ck-invite__note { font-size: 12px; color: var(--ink-dim); flex: 1; min-width: 160px; }
.ck-invite__err { color: var(--danger); font-size: 13px; margin: 8px 0 0; }

.ck-invite__owner { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.ck-invite__h { font-size: 13px; color: var(--ink-dim); margin: 14px 0 6px; font-weight: 600; }
.ck-invite__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ck-invite__item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 13px; background: var(--panel-2); border-radius: 8px; padding: 7px 10px;
}
.ck-invite__none { font-size: 13px; color: var(--ink-dim); }
.ck-field--inline { flex: 1; min-width: 150px; }

.ck-member__room, .ck-member__intro, .ck-member__status { color: var(--ink-dim); font-size: 13px; }
.ck-member__room { margin-top: 2px; }
.ck-member__intro { margin: 0 0 14px; }
.ck-member__add { display: grid; grid-template-columns: minmax(190px, 1fr) 150px auto; gap: 10px; align-items: end; }
.ck-member__list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ck-member__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; }
.ck-member__identity { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.ck-member__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-member__avatar { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.ck-member__actions { display: flex; gap: 7px; align-items: center; }
.ck-member__actions select { min-height: 34px; }
.ck-member__badge { color: var(--brand); font-size: 12px; font-weight: 700; }

@media (max-width: 600px) {
    .ck-member__add { grid-template-columns: 1fr; }
    .ck-member__item { align-items: flex-start; }
    .ck-member__actions { align-items: stretch; flex-direction: column; }
}

@media (max-width: 560px) {
    .ck-invite { justify-content: center; }
    .ck-invite__row { flex-direction: column; align-items: stretch; }
}

/* Guest access ran out. Deliberately a banner and not a modal: the room is
   still readable, and a dialog over it would take away the conversation the
   person was in the middle of. */
.ck-expired {
    position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 70;
    background: var(--panel); border: 1px solid var(--warn); border-left: 4px solid var(--warn);
    border-radius: 10px; padding: 10px 16px; max-width: min(560px, 92vw);
    display: flex; flex-direction: column; gap: 2px; font-size: 13px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.ck-expired[hidden] { display: none; }
.ck-expired span { color: var(--ink-dim); }

/* The other way into an invited room: an account rather than a session name. */
.ck-gate__alt { margin: 12px 0 0; font-size: 13px; color: var(--ink-dim); text-align: center; }
.ck-link {
    background: none; border: 0; padding: 0; font: inherit;
    color: var(--brand); cursor: pointer; text-decoration: underline;
}
.ck-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Broadcast rooms say what they do with the video. This sits in the flow of
   the room rather than as a toast: it is a standing fact about the room, not
   an event, and a message that disappears is one nobody can go back and read. */
.ck-modenote {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
    margin: 0 0 8px; padding: 8px 12px; font-size: 12.5px;
    background: var(--panel-2); border-left: 3px solid var(--warn); border-radius: 8px;
}
.ck-modenote[hidden] { display: none; }
.ck-modenote span { color: var(--ink-dim); flex: 1; min-width: 220px; }

/* The room cannot be reached. Deliberately in the same place as the "live"
   pill and replacing it, because those two facts are the same question and a
   room should never appear to answer both at once. */
.ck-pill--warn { background: var(--warn); color: var(--brand-ink); font-weight: 600; }
.ck-pill--warn[hidden] { display: none; }
/* Dim what can no longer be trusted: the roster and the board are showing the
   last thing that arrived, not what is true now. */
body.is-offline .ck-people, body.is-offline .ck-stage { opacity: .55; }

/* ── chat lives beside its channel list ───────────────────────────── */

/*
 * The channel list is in the rail on the left; its conversation is now the
 * centre view rather than a panel on the far right. Reading one room used to
 * mean looking at two opposite edges of the screen — the list of channels on
 * one side and the messages of the selected one on the other.
 *
 * The chat view manages its own scrolling: the log scrolls, the composer stays
 * put at the bottom. So it opts out of the padding and overflow every other
 * view wants.
 */
.ck-view--chat { padding: 0; overflow: hidden; }
.ck-view--chat .ck-log { flex: 1; min-height: 0; }
.ck-view--chat .ck-compose { border-top: 1px solid var(--line); }
.ck-view--chat .ck-react { padding: 0 10px; }

/* The right column is the member list alone now, so it gets the height. */
.ck-side .ck-roster { max-height: none; flex: 1; }

/* Nobody on camera: the strip gives its row back to the conversation. It
   collapses rather than being removed, because "faces stay put when you switch
   tabs" is a promise the app makes and there is nothing to keep in place when
   there is nothing in it. */
.ck-strip.is-empty {
    min-height: 0; height: 0; padding: 0; border-bottom: 0; overflow: hidden;
}
.ck-strip.is-empty .ck-strip__fold { display: none; }

/* ── the room menu ────────────────────────────────────────────────── */

/* The room's name is the button. Discord puts a server's menu on the server
   name, and it works because the name is already the thing you look at to
   know where you are. */
.ck-roommenu {
    display: flex; align-items: center; gap: 9px; width: 100%;
    background: none; border: 0; color: inherit; font: inherit;
    padding: 10px 12px; cursor: pointer; text-align: left;
    border-bottom: 1px solid var(--line);
}
.ck-roommenu:hover { background: var(--panel-2); }
.ck-roommenu:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ck-roommenu .ck-rail__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ck-roommenu__caret { color: var(--ink-dim); font-size: 12px; }

/* Below the name, not over it: the room's name and code are how you know
   which room you are in, and a menu that hides them to show itself is a menu
   that took away the thing you clicked. */
.ck-menu {
    position: absolute; top: 100%; z-index: 40; margin: 4px 8px 0; left: 0; right: 0;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
    padding: 5px; box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.ck-menu[hidden] { display: none; }
.ck-menu__item {
    display: block; width: 100%; text-align: left;
    background: none; border: 0; color: var(--ink); font: inherit;
    padding: 9px 11px; border-radius: 7px; cursor: pointer; min-height: 36px;
}
.ck-menu__item:hover { background: var(--panel); }
.ck-menu__item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
/* Leaving is destructive and sits apart from the rest, so it is not the thing
   a thumb finds by accident. */
.ck-menu__item--danger { color: var(--danger); margin-top: 4px; border-top: 1px solid var(--line); }
.ck-rail__top { position: relative; }

/* ---------------------------------------------------------------- add-ons
 * A plugin is somebody else's code. The chrome around it says so, sits
 * OUTSIDE the frame, and cannot be painted over from inside — which is the
 * only reason a participant can trust what a panel claims to be.
 */
.ck-addons { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.ck-addons__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-addons__bar input {
  flex: 1; min-width: 220px; font: inherit; padding: 7px 10px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: inherit;
}
.ck-addon {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden;
}
.ck-addon__head {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.ck-addon__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(224, 169, 78, .16); color: var(--warning);
}
.ck-addon__caps { color: var(--ink-dim); font-size: 12.5px; }

/* ---------------------------------------------------------------- gallery
 * A shelf of reviewed add-ons, in front of the URL box rather than beside
 * it. Cards state the permissions in the plugin host's own words, and a
 * sensitive one (p2p:media) is badged on the card rather than only in the
 * grant dialog nobody reads twice.
 */
.ck-gallery__title {
  margin: 0 0 8px; font-size: 14px; font-weight: 650;
}
.ck-gallery__grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ck-gallery__card {
  display: flex; flex-direction: column; gap: 7px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel);
}
.ck-gallery__name { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ck-gallery__badge {
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 99px;
  background: rgba(224, 169, 78, .16); color: var(--warning);
}
.ck-gallery__badge.is-first { background: rgba(110, 231, 183, .15); color: var(--success); }
.ck-gallery__badge.is-sensitive { background: rgba(248, 113, 113, .16); color: var(--danger); }
.ck-gallery__summary { margin: 0; font-size: 13px; color: var(--ink-dim); }
.ck-gallery__caps { margin: 0; font-size: 12.5px; color: var(--ink); }
.ck-gallery__review { font-size: 12.5px; color: var(--ink-dim); }
.ck-gallery__review summary { cursor: pointer; }
.ck-gallery__review p { margin: 6px 0 0; }
/* The button never shrinks below a thumb: this tab is used on phones and a
   32px target is the reason a tap "does nothing". */
.ck-gallery__add { margin-top: auto; min-height: 44px; }
.ck-addons__custom summary { cursor: pointer; font-size: 13px; padding: 4px 0; }
.ck-addons__custom { border-top: 1px solid var(--line); padding-top: 8px; }
.ck-addon iframe.plugin-frame {
  display: block; width: 100%; height: 360px; border: 0; background: var(--bg);
}
.ck-addon__pop { margin-left: auto; }
.ck-addon--wide { position: fixed; inset: 0 var(--side) 0 var(--rail); z-index: 20; margin: 0; border-radius: 0; display: flex; flex-direction: column; background: var(--panel); }
.ck-addon--wide iframe.plugin-frame { flex: 1; height: auto; min-height: 0; }
@media (max-width: 1000px) { .ck-addon--wide { inset: 0 0 0 var(--rail); } }
@media (max-width: 640px) { .ck-addon--wide { inset: 0 0 calc(64px + env(safe-area-inset-bottom)) 0; } }
@media (max-width: 700px) { .ck-addon iframe.plugin-frame { height: 300px; } }

/* ------------------------------------------------------------- file cards
 * A shared file. The card is durable (it came out of chat history); the
 * bytes are live (peer to peer, while the sender is here). The dead state
 * is styled deliberately rather than hidden — a card that quietly vanished
 * would be worse than one that explains itself.
 */
.ck-drop {
  margin-top: 6px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  max-width: 32rem;
}
.ck-drop__head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ck-drop__name { font-weight: 600; overflow-wrap: anywhere; }
.ck-drop__size { color: var(--ink-dim); font-size: 12.5px; }
.ck-drop__foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 7px; }
.ck-drop__note { color: var(--ink-dim); font-size: 12.5px; }
.ck-drop--vault { border-left: 3px solid var(--accent, #2dd4bf); }
.ck-drop--vault .ck-msg__img { max-height: 320px; width: auto; }
.ck-drop--dead { opacity: .72; border-style: dashed; }
.ck-drop--dead .ck-drop__name { text-decoration: line-through; text-decoration-color: var(--ink-dim); }

/* ------------------------------------------------------------ quiz options
 * A row is a unit: handle, correctness, text, remove. The handle and the ×
 * are quiet until the row is hovered or something inside it has focus —
 * a composer with eight rows and sixteen always-lit buttons is a wall.
 */
.ck-opts-set { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ck-opt { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.ck-opt .ck-input { flex: 1; min-width: 0; }
.ck-opt__handle, .ck-opt__rm {
  flex: none; cursor: pointer; border-radius: 7px; line-height: 1;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-dim); opacity: .45; transition: opacity .12s ease;
}
.ck-opt__handle { padding: 6px 4px; cursor: grab; letter-spacing: -2px; }
.ck-opt__rm { padding: 5px 9px; font-size: 16px; }
.ck-opt:hover .ck-opt__handle, .ck-opt:hover .ck-opt__rm,
.ck-opt:focus-within .ck-opt__handle, .ck-opt:focus-within .ck-opt__rm { opacity: 1; }
.ck-opt__rm:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: rgba(239,130,133,.10); }
.ck-opt__handle:focus-visible, .ck-opt__rm:focus-visible {
  opacity: 1; outline: 2px solid var(--focus-ring); outline-offset: 1px;
}
.ck-opts__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.ck-err { color: var(--danger); font-size: 13px; margin: 6px 0 0; }

/* ------------------------------------------------------- instant room gate
 * The fast path comes first and is the loudest thing on the card. Signing in
 * is for KEEPING rooms; it should not read as the toll gate on starting one.
 */
.ck-gate__instant { margin: 14px 0 4px; }
.ck-btn--wide { width: 100%; justify-content: center; padding-block: 11px; font-size: 15px; }
.ck-gate__or {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px; color: var(--ink-dim); font-size: 12.5px;
}
.ck-gate__or::before, .ck-gate__or::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Room shell: comfortable controls and a viewport that follows mobile chrome. */
.ck-app { height: 100dvh; }
.ck-main { min-height: 0; }
.ck-drawer-close { margin: 10px; flex-shrink: 0; }
.ck-top__media .ck-btn, #btnRail, #btnPeople, #btnShareTop { min-width: 44px; min-height: 44px; }
.ck-gate { overflow-y: auto; }
.ck-gate__card { margin-block: auto; }
@media (max-width: 640px) {
    .ck-top { flex-wrap: wrap; padding-top: max(8px, env(safe-area-inset-top)); }
    .ck-top__media { flex-basis: 100%; justify-content: center; margin-left: 0;
        padding-top: 6px; border-top: 1px solid var(--line); gap: 12px; }
    .ck-top__media .ck-btn { flex: 1; max-width: 88px; }
    .ck-rail, .ck-side { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .ck-room-tabs .ck-tab { min-width: 0; font-size: 11px; }
    .ck-gate { padding: 16px; }
    .ck-gate input, .ck-gate select, .ck-compose input, .ck-compose textarea { font-size: 16px; }
}

.ck-room-tabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ck-room-tabs .ck-tab { min-width: 0; padding-inline: 4px; justify-content: center; }
@media (min-width: 641px) and (max-width: 1150px) { .ck-room-tabs .ck-tab { flex-direction: column; gap: 4px; font-size: 12px; } }

@media (prefers-reduced-motion: reduce) { .ck-rail, .ck-side { transition: none; } }

@media (max-width: 640px) {
    .ck-board__bar { align-items: flex-start; }
    .ck-tools, .ck-swatches { max-width: 100%; overflow-x: auto; padding-bottom: 3px; }
    .ck-tool { flex: 0 0 44px; height: 44px; }
    .ck-swatch { flex: 0 0 36px; width: 36px; height: 36px; }
    .ck-board__acts { width: 100%; margin-left: 0; overflow-x: auto; }
}

/* ------------------------------------------------ professional entry flow */
#authGate .ck-gate__card { width: min(700px, 100%); }
.ck-home-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; margin: 20px 0; }
.ck-home-action {
  min-width: 0; min-height: 118px; display: flex; align-items: center; gap: 13px;
  padding: 17px; border: 1px solid var(--line); border-radius: 16px;
  color: var(--ink); background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  text-align: left;
}
button.ck-home-action { cursor: pointer; }
button.ck-home-action:hover { border-color: var(--accent-violet); transform: translateY(-1px); }
.ck-home-action--primary { background: linear-gradient(135deg, rgba(139,92,246,.30), rgba(34,211,238,.13)); border-color: rgba(167,139,250,.65); }
.ck-home-action__icon {
  flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 13px; background: rgba(139,92,246,.18); color: var(--focus-ring); font-size: 24px; font-weight: 700;
}
.ck-home-action strong { display: block; font-size: 16px; }
.ck-home-action small { display: block; margin-top: 3px; color: var(--ink-dim); font-size: 12px; line-height: 1.35; }
.ck-home-join { display: grid; grid-template-columns: auto 1fr; }
.ck-home-join__row { grid-column: 1 / -1; display: flex; gap: 8px; }
.ck-home-join__row input {
  min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: rgba(5,7,13,.7); text-transform: lowercase; letter-spacing: .06em;
}
.ck-anon-setup {
  margin: -8px 0 18px; padding: 16px; border: 1px solid rgba(167,139,250,.55);
  border-radius: 16px; background: linear-gradient(145deg, rgba(139,92,246,.15), rgba(34,211,238,.06));
}
.ck-anon-setup__head, .ck-device-rooms__head, .ck-anon-setup__go {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ck-anon-setup__head > div, .ck-device-rooms__head > div { display: grid; gap: 3px; }
.ck-anon-setup__head small, .ck-device-rooms small, .ck-anon-setup__go > span {
  color: var(--ink-dim); font-size: 12px; line-height: 1.4;
}
.ck-anon-setup__fields { display: grid; grid-template-columns: 1fr 1.35fr; gap: 12px; margin-top: 14px; }
.ck-anon-setup__fields .ck-field { margin: 0; }
.ck-anon-templates { margin: 14px 0 6px; }
.ck-anon-setup__go { margin-top: 4px; }
.ck-device-rooms { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.ck-device-rooms ul { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.ck-device-rooms li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: rgba(5,7,13,.35); }
.ck-device-rooms li > div:first-child { display: grid; min-width: 0; gap: 3px; }
.ck-device-rooms li strong, .ck-device-rooms li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-device-rooms li > div:last-child { display: flex; gap: 6px; flex: none; }
.ck-home-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 17px; color: var(--ink-dim); font-size: 12px; }
/* A drawn tick, not a font glyph: the same shape on every platform. */
.ck-home-meta span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -1px; background: var(--accent-cyan);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.ck-network-banner { position: fixed; z-index: 100; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 8px 13px; border: 1px solid var(--warning); border-radius: 10px; color: var(--ink); background: rgba(69, 39, 4, .96); box-shadow: 0 8px 28px rgba(0,0,0,.35); font-size: 13px; }

/* Device lobby. Preview media is local and stops before the room connects. */
#joinGate .ck-gate__card { width: min(760px, 100%); }
.ck-prejoin { display: grid; grid-template-columns: minmax(260px, 1.35fr) minmax(210px, .85fr); gap: 14px; margin: 16px 0 20px; }
.ck-prejoin__preview {
  position: relative; grid-row: span 2; min-height: 260px; display: grid; place-items: center;
  overflow: hidden; border: 1px solid var(--line); border-radius: 18px;
  background: radial-gradient(circle at 50% 30%, var(--surface-2), var(--bg) 75%);
}
.ck-prejoin__preview video { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transform: scaleX(-1); }
.ck-prejoin__avatar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 86px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--accent-violet), var(--accent-cyan)); font-size: 34px; font-weight: 800; }
.ck-prejoin__status { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 9px; border-radius: 8px; color: var(--ink); background: rgba(7,8,14,.78); font-size: 12px; }
.ck-prejoin__controls { display: flex; align-items: center; gap: 9px; }
.ck-prejoin__controls .ck-btn { min-width: 46px; min-height: 46px; border-radius: 14px; }
.ck-prejoin__meter { flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); }
.ck-prejoin__meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), var(--info)); transition: width .08s linear; }
.ck-prejoin__devices { align-self: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; }
.ck-prejoin__devices summary { cursor: pointer; color: var(--ink-dim); font-size: 13px; }
.ck-prejoin__devices[open] summary { margin-bottom: 10px; }
.ck-prejoin__devices select { width: 100%; min-height: 42px; padding: 8px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); }

/* Searchable, categorized Activities launcher. */
.ck-gallery__head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 10px; }
.ck-gallery__head .ck-gallery__title { margin-bottom: 2px; font-size: 22px; }
.ck-gallery__head .ck-hint { margin: 0; }
.ck-activity-search input { width: min(270px, 36vw); min-height: 44px; padding: 9px 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; }
.ck-activity-filters { display: flex; gap: 7px; overflow-x: auto; margin: 8px 0 14px; padding-bottom: 2px; }
.ck-chip { flex: none; min-height: 36px; padding: 6px 12px; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 99px; background: transparent; cursor: pointer; }
.ck-chip.is-on { color: var(--ink); border-color: var(--accent-violet); background: rgba(139,92,246,.22); }

.ck-board__wrap { position: relative; }
.ck-board-editor {
  position: absolute; z-index: 8; width: min(290px, calc(100% - 16px)); padding: 9px;
  border: 1px solid var(--accent-violet); border-radius: 13px; background: rgba(17,19,31,.97);
  box-shadow: 0 14px 36px rgba(0,0,0,.42);
}
.ck-board-editor.is-note { border-color: var(--warning); background: rgba(49,38,11,.97); }
.ck-board-editor textarea { width: 100%; resize: vertical; min-height: 74px; padding: 9px; color: var(--ink); background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 8px; }
.ck-board-editor > div { display: flex; align-items: center; justify-content: end; gap: 7px; margin-top: 7px; }
.ck-board-editor > div span { margin-right: auto; color: var(--ink-dim); font-size: 11px; }
.ck-msg__time { color: var(--ink-dim); font-size: 11px; margin-left: 3px; }
.ck-chat-tools { display: flex; justify-content: end; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.08); }
.ck-chat-tools label { flex: 0 1 260px; }
.ck-chat-tools input { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--bg); }
.ck-chat-tools #btnPinned.is-on { color: var(--ink); border-color: var(--accent-violet); background: rgba(139,92,246,.22); }
.ck-msg { position: relative; display: grid; grid-template-columns: auto auto minmax(0,1fr); column-gap: 7px; align-items: baseline; padding: 7px 42px 7px 6px; border-radius: 10px; }
.ck-msg:hover, .ck-msg:focus-within, .ck-msg.is-highlighted { background: rgba(255,255,255,.045); }
.ck-msg.is-mentioned { background: rgba(139,92,246,.11); border-left: 3px solid var(--accent-violet); }
.ck-msg > .ck-av { grid-row: 1 / span 2; align-self: start; }
.ck-msg > .ck-msg__text, .ck-msg > .ck-msg__deleted, .ck-msg > .ck-msg__reply,
.ck-msg > .ck-msg__reactions, .ck-msg > .ck-msg__img, .ck-msg > .ck-drop { grid-column: 2 / -1; }
.ck-msg__reply { display: block; max-width: 100%; margin: 3px 0; padding: 3px 8px; overflow: hidden; border: 0; border-left: 2px solid var(--accent-violet); color: var(--ink-dim); background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ck-msg__edited { color: var(--ink-dim); font-size: 11px; }
.ck-msg__deleted { color: var(--ink-dim); font-style: italic; }
.ck-msg__pinned { padding: 1px 5px; border-radius: 99px; color: var(--warning); background: rgba(161,98,7,.18); font-size: 9px; text-transform: uppercase; }
.ck-msg__actions { position: absolute; top: 4px; right: 5px; display: flex; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .12s, transform .12s; }
.ck-msg:hover .ck-msg__actions, .ck-msg:focus-within .ck-msg__actions { opacity: 1; transform: none; pointer-events: auto; }
.ck-msg__actions button, .ck-msg__reactions button { min-width: 30px; min-height: 28px; padding: 3px 6px; border: 0; border-radius: 7px; color: var(--ink-dim); background: transparent; cursor: pointer; }
.ck-msg__actions button:hover, .ck-msg__reactions button:hover, .ck-msg__reactions button.is-mine { color: var(--ink); background: rgba(139,92,246,.20); }
.ck-msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ck-msg__reactions:empty { display: none; }
.ck-compose-context { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-top: 1px solid var(--line); border-left: 3px solid var(--accent-violet); background: var(--panel-2); }
.ck-compose-context > div { display: grid; min-width: 0; }
.ck-compose-context strong { font-size: 12px; }
.ck-compose-context span { overflow: hidden; color: var(--ink-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ck-compose-context .ck-btn { margin-left: auto; }
.ck-typing { min-height: 24px; padding: 3px 12px; color: var(--ink-dim); background: var(--panel); font-size: 11px; }
.ck-files-workspace { width: min(980px, 100%); margin: 0 auto; }
.ck-files-workspace__head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.ck-files-workspace__head h2 { margin: 0 0 4px; font-size: 24px; }
.ck-files-workspace__head p { margin: 0; color: var(--ink-dim); max-width: 620px; }
.ck-files-workspace__actions { display: flex; gap: 8px; flex: none; }
.ck-files-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; color: var(--ink-dim); font-size: 12px; }
.ck-files-legend span { display: flex; align-items: center; gap: 6px; }
.ck-files-legend i { width: 9px; height: 9px; border-radius: 50%; }
.ck-files-legend .is-vault { background: var(--accent-cyan); }
.ck-files-legend .is-live { background: var(--accent-violet); }
.ck-files-list { display: grid; gap: 10px; }
.ck-file-row { padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ck-file-row__meta { margin-bottom: 5px; color: var(--ink-dim); font-size: 11px; }
.ck-file-row .ck-drop { max-width: none; margin-top: 0; border: 0; background: transparent; padding: 0; }
.ck-command-trigger { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-dim); }
.ck-command-trigger span { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; }
.ck-command-trigger b { font-weight: 500; }
.ck-command { align-items: flex-start; padding-top: min(16vh, 150px); background: rgba(3,5,10,.72); backdrop-filter: blur(8px); }
.ck-command__card { width: min(620px, 100%); padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow-lg); }
.ck-command__input { display: flex; align-items: center; gap: 8px; padding: 4px 10px 10px; border-bottom: 1px solid var(--line); }
.ck-command__input > span { color: var(--ink-dim); font-size: 22px; }
.ck-command__input input { width: 100%; padding: 10px 4px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 17px; }
.ck-command__results { display: grid; gap: 4px; max-height: 52vh; overflow: auto; padding: 8px 0; color: var(--ink-dim); }
.ck-command__result { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.ck-command__result:hover, .ck-command__result:focus-visible { background: var(--panel-2); outline: none; }
.ck-command__result span { color: var(--ink-dim); font-size: 12px; }
.ck-command__help { margin: 0; padding: 7px 10px 3px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: 11px; }

@media (max-width: 640px) {
  .ck-home-actions { grid-template-columns: 1fr; }
  .ck-home-action { min-height: 104px; }
  .ck-anon-setup__fields { grid-template-columns: 1fr; }
  .ck-anon-setup__go { align-items: stretch; flex-direction: column; }
  .ck-device-rooms li { align-items: stretch; flex-direction: column; }
  .ck-device-rooms li > div:last-child { width: 100%; }
  .ck-device-rooms li > div:last-child .ck-btn { flex: 1; }
  .ck-prejoin { grid-template-columns: 1fr; }
  .ck-prejoin__preview { grid-row: auto; min-height: 210px; }
  .ck-prejoin__preview video { min-height: 210px; }
  .ck-gallery__head { display: grid; }
  .ck-activity-search input { width: 100%; }
  .ck-room-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ck-room-tabs [data-view="quiz"], .ck-room-tabs [data-view="charts"], .ck-room-tabs [data-view="replay"] { display: none; }
  .ck-files-workspace__head { display: grid; }
  .ck-files-workspace__actions { width: 100%; }
  .ck-files-workspace__actions .ck-btn { flex: 1; }
  .ck-command-trigger { display: none; }
  .ck-command { padding: max(10px, env(safe-area-inset-top)) 10px 10px; }
  .ck-chat-tools label { flex: 1; }
  .ck-msg { padding-right: 6px; }
  .ck-msg__actions { position: static; grid-column: 2 / -1; opacity: 1; transform: none; pointer-events: auto; border: 0; background: transparent; justify-content: flex-end; }
}

/* ── layouts: Grid, Speaker, Sidebar ─────────────────────────────── */
.ck-layout { display: flex; gap: 6px; margin: 0 0 8px; }
.ck-layout .ck-chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.ck-strip.is-empty .ck-layout { display: none; }

/* Sidebar: the stage takes the width and the room stands in a column beside
   it. Only when something is on the stage, and only where there is room for
   a column; on a phone it falls back to the stacked strip. */
@media (min-width: 721px) {
    body.layout-sidebar.has-stage .ck-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 200px;
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 10px;
        max-height: 70vh;
    }
    body.layout-sidebar.has-stage .ck-layout { grid-column: 1 / -1; }
    body.layout-sidebar.has-stage .ck-stage { grid-column: 1; margin-bottom: 0; }
    body.layout-sidebar.has-stage .ck-strip__grid {
        grid-column: 2;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        overflow-y: auto;
        max-height: 62vh;
    }
    body.layout-sidebar.has-stage .ck-stage__host .ck-tile.is-stage { max-height: 60vh; }
}

/* ── board pages ─────────────────────────────────────────────────── */
.ck-pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ck-pages .ck-chip { min-height: 32px; padding: 4px 12px; font-size: 13px; }