/* The room: a top bar, the board filling the rest, and floating controls on top
   of it (tools, call bar, video strip, chat). On a phone the controls move to the
   edges and the people bar takes a second row. */

.room { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--ground); }

/* Top bar */
.top { position: relative; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; }
.top .brand { flex: none; }
.ws-name { min-width: 0; max-width: 34vw; font: 700 19px/1.2 var(--sans); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-row { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.people { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.people::-webkit-scrollbar { display: none; }
.people-count { font: 400 13px var(--mono); color: var(--ink-3); white-space: nowrap; }
.top-actions { position: relative; display: flex; align-items: center; gap: 4px; flex: none; }
.top-actions .btn { margin-right: 8px; }
.top-actions .short { display: none; }

/* People: a colour dot with initials. The ring means they're talking to you now. */
.person { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 4px 2px 2px; border-radius: 20px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; color: #fff; font: 600 13px var(--sans); transition: box-shadow .15s; }
.person.talking .avatar { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.pname { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px var(--sans); color: var(--ink-2); }
.is-me .pname { color: var(--ink); font-weight: 600; }
.agent-tag { display: inline-flex; align-items: center; gap: 4px; font: 500 11px var(--mono); color: var(--agent); }
.agent-tag::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--agent); transform: rotate(45deg); flex: none; }
/* An agent someone asked in the chat: a small muted word on its tile. No animation. */
.thinking-tag { font: 400 12px var(--mono); color: var(--ink-3); white-space: nowrap; }
/* A line heard in a call: a small outlined word before the text. */
.voice-tag { display: inline-block; padding: 0 5px; margin-right: 2px; border: 1px solid currentColor; border-radius: 3px; font: 500 10px/16px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); vertical-align: 1px; }
.badges { display: inline-flex; gap: 2px; }
.badge { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ground); color: var(--ink-3); }
.badge svg { width: 12px; height: 12px; }
.badge.on { color: var(--ink); }
.badge.off { color: var(--bad-ink); }

/* Connection banner, under the top bar while the link is down */
.conn { padding: 8px 16px; background: var(--warn-soft); color: var(--warn-ink); font: 400 14px var(--mono); }

/* The stage holds the board, and everything floats over it */
.stage { position: relative; flex: 1; min-height: 0; overflow: hidden; }
/* Your own pointer: the arrow, the crosshair for drawing and the hand over cards and while the space bar pans. Their
   pictures are in your colour, set by cursors.js on the root (the fallbacks are the browser's own cursors). */
.board { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; background-color: var(--ground); background-image: radial-gradient(circle, var(--line) 1.2px, transparent 1.8px); background-repeat: repeat; cursor: var(--cur-arrow, default); }
.board[data-tool="marker"], .board[data-tool="line"], .board[data-tool="rect"], .board[data-tool="ellipse"], .board[data-tool="arrow"] { cursor: var(--cur-cross, crosshair); }
.board[data-tool="text"] { cursor: text; }
.board[data-tool="eraser"] { cursor: cell; }
.board.panning { cursor: var(--cur-hand, grab); }
.world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.strokes { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.strokes .stroke-text { font-family: var(--sans); font-weight: 600; }
.items { position: absolute; left: 0; top: 0; }

/* Cards: notes are paper, links and the rest are panels */
.item { position: absolute; left: 0; top: 0; cursor: var(--cur-hand, grab); }
.item.editing { cursor: text; }
.item.kind-note { padding: 14px 16px; min-height: 60px; border-radius: 6px; color: #121212; box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .16); }
.item.kind-link, .item.kind-github, .item.kind-wrappit, .item.kind-other { padding: 14px 16px; border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.item.kind-image { border-radius: 10px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.item.kind-screen { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.item.selected { outline: 2px solid var(--ink); outline-offset: 4px; }
.note-text { min-height: 1.4em; font: 500 17px/1.4 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; outline: none; cursor: inherit; }
.item.editing .note-text { cursor: text; }
.card-kicker { display: block; font: 400 12px/1.4 var(--mono); color: var(--ink-3); text-transform: lowercase; overflow-wrap: anywhere; }
.card-title { font: 600 17px/1.3 var(--sans); overflow-wrap: anywhere; }
.card-img { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; pointer-events: none; }
.item-img { display: block; width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.item.kind-image .item-img { height: 100%; object-fit: contain; }
.item-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; background: rgba(0, 0, 0, .62); color: #fff; font: 400 12px/1.4 var(--mono); overflow-wrap: anywhere; }
.screen-tile video { display: block; width: 100%; height: 100%; object-fit: contain; }
.screen-name { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 4px 9px; border-radius: 7px; background: rgba(0, 0, 0, .62); color: #fff; font: 400 13px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; opacity: .5; background: linear-gradient(135deg, transparent 0 48%, var(--ink-3) 48% 56%, transparent 56% 70%, var(--ink-3) 70% 78%, transparent 78%); }
.item:hover .resize, .item.selected .resize { opacity: 1; }
/* The quick delete: a small x in the top-right corner of a card the person added. A picture is clipped at its
   edge, so its x sits just inside. It shows on hover with a mouse, and always on a touch screen. */
.item-x { position: absolute; top: -10px; right: -10px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--panel); font: 400 18px/1 var(--sans); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; }
.item.kind-image > .item-x { top: 6px; right: 6px; }
.item:hover > .item-x, .item-x:focus-visible { opacity: 1; }
@media (pointer: coarse) { .item-x { opacity: 1; } }
/* Marks on a card: a layer over the card's content, clipped to the card (an SVG clips to its own box). Pictures keep their own shape. */
.item-marks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
/* The clear marks button in a card's top-left corner: on hover, always on a touch screen (like the quick delete). */
.item-unmark { position: absolute; top: -10px; left: -10px; z-index: 2; padding: 4px 10px; border: 0; border-radius: 12px; background: var(--ink); color: var(--panel); font: 400 12px/1.4 var(--mono); text-transform: lowercase; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); opacity: 0; }
.item.kind-image > .item-unmark { top: 6px; left: 6px; }
.item:hover > .item-unmark, .item-unmark:focus-visible { opacity: 1; }
@media (pointer: coarse) { .item-unmark { opacity: 1; } }
#board[data-tool="markup"] .item { cursor: crosshair; }
.screen-big { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: auto 1fr; background: rgba(0, 0, 0, .92); }
.screen-big[hidden] { display: none; }
.screen-big-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: #fff; font: 400 15px var(--mono); }
.screen-big-bar button { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.screen-big video { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.item-missing { display: grid; place-items: center; min-height: 120px; padding: 16px; border: 1px dashed var(--ink-3); border-radius: 10px; background: var(--panel); color: var(--ink-3); font: 400 13px/1.4 var(--mono); text-align: center; }
.screen-tile { position: relative; width: 100%; height: 100%; min-height: 120px; background: #000; }
.screen-tile video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; pointer-events: none; }
.screen-tile .card-kicker { position: absolute; left: 10px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; }

/* Everyone else's pointer: a dot in their colour, on the screen (not the board), so it keeps its size. The dots take no
   clicks. A dot glides to where its pointer is (cursors.js sets the colour and the name; a move shows the name for a moment). */
.cursors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cursor { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; transition: transform .15s linear; }
.cursor.is-agent { transition: transform .6s ease; }
.cursors.still .cursor { transition: none; } /* while the view pans or zooms, the dots go with the board at once */
.cursor-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(0, 0, 0, .45); }
.cursor-tag { position: absolute; left: 10px; top: -10px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; font: 500 12px var(--mono); color: #fff; opacity: 0; transition: opacity .35s ease; }
.cursor.show .cursor-tag, .cursor.hover .cursor-tag { opacity: 1; }
.cursor-mark { margin-left: 6px; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; font: 500 10px/14px var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .85; }

/* A live page card (a Wrappit page, or a site that allows it): a title bar (the grip, the name, the screen sizes, "as link"
   and an open link) over the page, which runs inside the card.
   The bar and the frame round their own corners, so the quick delete x (which sits outside the card) is not clipped. */
.item.live-page { display: flex; flex-direction: column; padding: 0; border-radius: 12px; background: var(--panel); color: var(--ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); container-type: inline-size; }
.item-bar { position: relative; display: flex; align-items: center; gap: 10px; flex: none; height: 40px; padding: 0 12px 0 14px; border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--line); cursor: var(--cur-hand, grab); }
.item-bar .card-kicker { margin: 0; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The name keeps at least 60 px (so a narrow card still shows some of it): the kicker shortens first. */
.item-bar .card-title { flex: 1; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px var(--sans); }
.item-open { flex: none; padding: 2px 4px; color: var(--ink-2); font: 400 13px var(--mono); text-decoration: none; box-shadow: inset 0 -2px 0 currentColor; }
.item-open:hover { color: var(--ink); }
.item-frame { position: relative; flex: 1 1 auto; height: 280px; min-height: 120px; border-radius: 0 0 12px 12px; overflow: hidden; background: var(--ground); }
.item-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; } /* size and scale: board.js fitFrame */
/* The page takes presses with the select tool only: a drawing tool draws over it, and the space bar pans over it. */
.board:not([data-tool="select"]) .item-frame iframe, .board.panning .item-frame iframe { pointer-events: none; }
.item-sizes { display: inline-flex; gap: 2px; flex: none; }
.item-vp, .item-toggle { flex: none; padding: 2px 5px; border: 0; border-radius: 4px; background: none; color: var(--ink-3); font: 400 12px var(--mono); cursor: pointer; }
.item-vp:hover, .item-toggle:hover { color: var(--ink); background: var(--ground); }
.item-vp[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 currentColor; }
/* A narrow live card (under 440 px wide; the smallest is 280, board.js CARD_MIN): the size switch folds into a "⋯" menu, so the
   bar's controls fit on one line. The menu hangs under the bar, over the page. */
.item-more-wrap { display: none; flex: none; }
.item-more { flex: none; padding: 2px 5px; border: 0; border-radius: 4px; background: none; color: var(--ink-3); font: 400 12px var(--mono); cursor: pointer; }
.item-more:hover, .item-more[aria-expanded="true"] { color: var(--ink); background: var(--ground); }
.item-more-menu { position: absolute; top: 100%; right: 12px; z-index: 3; display: none; flex-direction: column; gap: 2px; min-width: 120px; margin-top: 4px; padding: 4px; border-radius: 8px; background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.item-more-wrap.open .item-more-menu { display: flex; }
.item-menu-vp { display: block; padding: 5px 8px; border: 0; border-radius: 4px; background: none; color: var(--ink-3); font: 400 12px var(--mono); text-align: left; cursor: pointer; }
.item-menu-vp:hover { color: var(--ink); background: var(--ground); }
.item-menu-vp[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 currentColor; }
@container (max-width: 439px) {
  .item-sizes { display: none; }
  .item-more-wrap { display: inline-block; }
}
.item-note { position: absolute; left: 10px; right: 10px; bottom: 10px; display: none; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .72); color: #fff; font: 400 12px/1.4 var(--mono); pointer-events: none; }
.item.kind-link:hover .item-note { display: block; }
.item-paused { display: grid; place-items: center; height: 100%; padding: 12px; color: var(--ink-3); font: 400 13px/1.4 var(--mono); text-align: center; }
/* A known site's player (board.js, embeds.js): it fills the card under the title bar, at the card's own size (not scaled). */
.item.embed .item-frame { height: auto; min-height: 60px; background: #000; }
.item.embed .item-frame iframe { width: 100%; height: 100%; transform: none; background: #000; }
/* A site that can't be shown inside the board: its picture big, its site and title, then open (and the shared browser). */
.item.kind-link.blocked { display: flex; flex-direction: column; overflow: hidden; }
.item.kind-link.blocked .link-shot { flex: 1 1 auto; min-height: 0; margin-bottom: 10px; }
.item.kind-link.blocked .link-shot .card-img { height: 100%; max-height: none; margin: 0; }
.item.kind-link.blocked .card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item.kind-link.blocked .item-note { top: 10px; bottom: auto; }
.link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: none; margin-top: 8px; }
.item-browse { flex: none; padding: 2px 4px; border: 0; background: none; color: var(--ink-2); font: 400 13px var(--mono); cursor: pointer; box-shadow: inset 0 -2px 0 currentColor; }
.item-browse:hover { color: var(--ink); }

/* The colour picker, opened from your own name in the people bar */
.color-pop { position: fixed; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: min(236px, calc(100vw - 16px)); padding: 10px; border-radius: 12px; background: var(--panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .22), 0 0 0 1px var(--line); }
/* Scoped to the picker: the marker panel's own .swatch comes later in the file. */
.color-pop .swatch { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--ink-3); cursor: pointer; }
.color-pop .swatch.on, .color-pop .swatch.on:hover { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink); }
.swatch-random { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--ground); color: var(--ink-2); font: 400 13px var(--mono); cursor: pointer; }
.person.is-me { cursor: pointer; }

/* The empty-board hint, and the bar for a selected card */
#hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 88vw); text-align: center; color: var(--ink-2); font-size: 17px; pointer-events: none; }
#hint p { margin: 6px 0; }
.sel { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 16px; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: var(--panel); font: 400 15px var(--mono); white-space: nowrap; }
.sel .sel-kind { font-weight: 500; margin-right: 4px; }
.sel .sel-layer { display: flex; gap: 6px; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .3); }
.sel .sel-layer .btn { padding: 4px 9px; }
.card-menu { position: fixed; top: 0; left: 0; right: auto; z-index: 40; min-width: 170px; }
.sel .btn { color: var(--panel); }
.sel .btn:hover { color: var(--panel); border-bottom-color: currentColor; }

/* Zoom buttons, bottom right on a computer */
.zoom { position: absolute; right: 14px; bottom: 92px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
.room.chat-open .zoom { right: 354px; }
.zoom .icon-btn { background: var(--panel); font-size: 20px; }
.zoom #zoom-reset { width: 44px; font: 400 11px var(--mono); text-transform: lowercase; }

/* The toolbar: a column on the left. Each tool is a square you press. */
.tools { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .18); max-height: calc(100% - 120px); overflow-y: auto; scrollbar-width: none; }
.tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; flex: none; border: 0; border-radius: 10px; background: none; color: var(--ink-2); }
.tool svg { width: 21px; height: 21px; }
.tool:hover { background: var(--ground); color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.tool:disabled, .tool:disabled:hover { opacity: .35; cursor: default; background: none; color: var(--ink-2); }
/* The marker's small chevron in its bottom-right corner: a press there opens its settings. */
#tool-marker::after, #tool-markup::after { content: ""; position: absolute; right: 7px; bottom: 7px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 3px solid currentColor; opacity: .6; pointer-events: none; }
.tool .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--dot, var(--ink)); box-shadow: inset 0 0 0 2px var(--panel); }
.sep { display: block; width: 28px; height: 1px; margin: 4px 0; background: var(--line); flex: none; }
.colors { position: static; display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
/* The marker's settings: a small panel beside the marker button (ui.js places it), with a line that shows the stroke. */
.marker-pop { position: absolute; z-index: 7; width: 240px; display: grid; gap: 14px; padding: 14px 16px; border-radius: 14px; background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .2); }
.marker-pop[hidden] { display: none; }
/* The mark up choices: a column of four square buttons beside the mark up button (a row on a phone). */
.markup-pop { position: absolute; z-index: 7; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: var(--panel); box-shadow: 0 6px 24px rgba(0, 0, 0, .2); }
.markup-pop[hidden] { display: none; }
.markup-choice { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-2); }
.markup-choice svg { width: 21px; height: 21px; }
.markup-choice:hover { background: var(--ground); color: var(--ink); }
.markup-choice[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.marker-row { display: grid; gap: 6px; font: 400 13px var(--mono); color: var(--ink-2); text-transform: lowercase; }
.marker-row span { display: flex; justify-content: space-between; align-items: baseline; }
.marker-row output { color: var(--ink); }
.marker-row input[type="range"] { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; accent-color: var(--ink); }
.marker-preview { display: block; width: 100%; height: 56px; }
.marker-preview path { stroke: var(--ink); }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); }
.swatch:hover { box-shadow: 0 0 0 2px var(--ink); }

/* The video strip: our camera and screen, and everyone else's. A column on a computer. */
.strip { position: absolute; top: 12px; right: 12px; z-index: 5; width: 210px; max-height: calc(100% - 150px); display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: none; }
.room.chat-open .strip { right: 364px; }
.tile { position: relative; flex: none; margin: 0; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-screen video { object-fit: contain; }
.tile.talking { box-shadow: 0 0 0 3px var(--ink), 0 6px 18px rgba(0, 0, 0, .25); }
.tile figcaption { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; align-items: center; gap: 6px; }
.tile-name { min-width: 0; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font: 500 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grip { margin-left: auto; flex: none; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; cursor: grab; touch-action: none; }
.grip svg { width: 16px; height: 16px; }
.ghost { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; padding: 6px 12px; border-radius: 10px; background: var(--ink); color: var(--panel); font: 500 14px var(--mono); }

/* The call bar: a row of buttons along the bottom */
.callbar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 28px); padding: 8px 10px; border-radius: 16px; background: var(--panel); box-shadow: 0 8px 26px rgba(0, 0, 0, .2); }
.ctl { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 400 15px var(--mono); text-transform: lowercase; white-space: nowrap; }
.ctl:hover { color: var(--ink); background: var(--ground); }
.ctl[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.ctl.primary { color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 10px 10px 0 0; }
.ctl:disabled { opacity: .45; cursor: default; background: none; }
.ctl .ico { display: grid; place-items: center; }
.ctl .ico svg { width: 20px; height: 20px; }
.call-state { padding: 0 6px; font: 400 13px var(--mono); color: var(--ink-3); white-space: nowrap; }
.unread { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--panel); font: 600 11px var(--mono); }

/* Chat: a column on the right of the computer's screen */
.chat { position: absolute; top: 0; right: 0; bottom: 0; z-index: 9; width: 340px; display: flex; flex-direction: column; background: var(--panel); box-shadow: -8px 0 24px rgba(0, 0, 0, .12); }
.chat-head { padding: 14px 16px 8px; font: 500 15px var(--mono); text-transform: lowercase; }
.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 8px; }
.chat-empty { color: var(--ink-3); font-size: 15px; }
.chat-thinking { margin: 0; font: 400 13px var(--mono); color: var(--ink-3); }
/* A line the room wrote (a finished mark, or what the owner did, such as "the owner muted Sam"): muted, like the line
   under the chat. Every line the room writes has this one look. */
.chat-sys { margin: 0; font: 400 13px var(--mono); color: var(--ink-3); }
.msg p { margin: 2px 0 0; overflow-wrap: anywhere; }
.msg.cont { margin-top: -6px; }
.who { display: flex; align-items: baseline; gap: 8px; font: 400 13px var(--mono); }
.who time { margin-left: auto; color: var(--ink-3); }
.chat-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px 14px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; padding: 10px 12px; font-size: 16px; }

/* Typing a word straight onto the board */
.text-entry { position: absolute; z-index: 10; width: auto; min-width: 4ch; box-sizing: border-box; field-sizing: content; padding: 2px 6px; border: 0; border-radius: 8px; background: var(--panel); color: var(--ink); font: 600 28px var(--sans); box-shadow: 0 0 0 2px var(--ink); transform: translateY(-50%); }

/* Phones: the controls move to the edges, and names and labels shrink */
@media (max-width: 700px) {
  .top { padding: 8px 10px; gap: 6px 10px; }
  .top .brand { font-size: 0; gap: 0; padding: 2px; }
  .ws-name { max-width: 46vw; font-size: 16px; }
  .people-row { order: 3; flex-basis: 100%; }
  .people { gap: 6px; }
  .pname, .people-count { display: none; }
  .top-actions .btn .long { display: none; }
  .top-actions .btn .short { display: inline; }
  .top-actions .btn { margin-right: 2px; font-size: 14px; }
  .top-actions .icon-btn { width: 40px; height: 40px; }
  .zoom { display: none; }
  .tools { top: auto; bottom: 72px; left: 0; right: 0; transform: none; flex-direction: row; justify-content: flex-start; max-height: none; border-radius: 0; padding: 6px 8px; overflow-x: auto; overflow-y: hidden; }
  .tool { width: 42px; height: 42px; }
  .colors { flex-direction: row; padding: 0 4px; }
  .strip { top: 8px; left: 8px; right: 8px; width: auto; max-height: none; flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .tile { width: 150px; flex: none; }
  .room.chat-open .strip { right: 8px; }
  .callbar { bottom: 10px; left: 50%; gap: 0; max-width: calc(100% - 12px); padding: 6px; overflow-x: auto; }
  .ctl { padding: 8px 10px; }
  .ctl .lbl { display: none; }
  .ctl.primary .lbl, .ctl.primary .ico { display: inline-grid; }
  .call-state { display: none; }
  .sel { top: auto; bottom: 128px; gap: 10px; padding: 6px 10px; font-size: 14px; }
  .chat { top: auto; left: 0; right: 0; bottom: 64px; width: auto; height: 58vh; border-radius: 16px 16px 0 0; }
  .join h1 { font-size: 32px; }
}

/* Stills: a camera button in the top-right corner of a live video. Shown on hover with a mouse, always on a touch screen. */
.still-btn { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .55); color: #fff; opacity: 0; }
.still-btn svg { width: 18px; height: 18px; }
.still-btn:focus-visible, .item:hover .still-btn, .tile:hover .still-btn, .screen-big-stage:hover .still-btn { opacity: 1; }
@media (pointer: coarse) { .still-btn { opacity: 1; } }
.screen-big-stage { position: relative; min-height: 0; }
.screen-big-stage .still-btn { top: 12px; right: 12px; }

/* Off-screen arrows: a small plain chevron at the edge of the board for each thing off the view. No motion. */
.off-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.off-layer[hidden] { display: none; }
.off-arrow { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-3); opacity: .6; pointer-events: auto; }
.off-arrow[hidden], .off-count[hidden] { display: none; }
.off-arrow:hover, .off-arrow:focus-visible { opacity: 1; }
.off-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.off-count { position: absolute; font: 500 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.off-arrow.edge-right .off-count { right: 24px; top: 50%; transform: translateY(-50%); }
.off-arrow.edge-left .off-count { left: 24px; top: 50%; transform: translateY(-50%); }
.off-arrow.edge-top .off-count { top: 24px; left: 50%; transform: translateX(-50%); }
.off-arrow.edge-bottom .off-count { bottom: 24px; left: 50%; transform: translateX(-50%); }