/* ldu/pages-rooms.css: the rooms lobby, the room page, its framed tabs and the Cube in the LDU look (slice 6).

   main's own markup, restyled. Every rule keys on the room's own classes (.room, .lobby, .hcube) so nothing leaks to
   other pages; nothing is removed or renamed and the visual order is the DOM order. The lobby page carries the
   `ldu-page` token on its .main--pad, so the page frame, buttons and cards of ldu/pages-experts.css
   apply there. Source: ui-cleanup/milan's ldu/rooms.css, ldu/cube.css and ldu/frames.css, re-expressed on main's
   classes. Colours are all var() of fraction-ds tokens; hover moves colour, a border step or a wash in 150ms and never
   lifts or casts a shadow. Spotlight/DeckCraft/WordCraft iframes are untouched. */

/* ── the room page: a title block, a left column (people, AI sessions, reference) and the chat card ───────────── */
.room { padding: 24px var(--pad-main, 32px); gap: 24px; }
.room .crumbs { margin: 0 0 -8px; }
.room .crumbs ol { font-size: var(--fs-ui); }
.room .crumbs .room__name { font-size: var(--fs-ui); font-weight: 500; }
.room__head { align-items: flex-end; gap: 12px 16px; padding-bottom: 0; border-bottom: 0; }
.room__id { flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.room__id .room__label:first-child { display: none; }          /* the "Room" word: the name is the title */
.room__id .room__name {
  font-family: var(--display); font-size: var(--fs-h1); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink);
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.room__id code { padding: 2px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--ldu-recess); font-size: var(--fs-meta); color: var(--ink-2); }
.room__id .room__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); color: var(--ink-2); }
.room__actions { flex-wrap: wrap; gap: 8px; }
.soundbar { display: inline-flex; align-items: center; gap: 8px; }
.room textarea.input { height: auto; padding-block: 8px; }

.room__layout { gap: 16px; }
/* the left column: one card, its own scroll */
.room__people { gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: var(--ldu-r-xl); background: var(--bg-2); }
.room__tabpanel { gap: 16px; }
.room__people .panel__title { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }

/* tabs: the LDU strip (accent label over an accent underline) */
.room .tabbar { gap: 4px; border-bottom: 1px solid var(--line); }
.room .tabbar__tab {
  min-height: 40px; margin-bottom: -1px; padding: 0 12px; border-radius: 0;
  font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2);
  background: linear-gradient(transparent, transparent) bottom / 100% 2px no-repeat;
  transition: color var(--dur), background-color var(--dur);
}
.room .tabbar__tab:hover { color: var(--accent); background-image: linear-gradient(var(--accent-soft), var(--accent-soft)); }
.room .tabbar__tab[aria-selected="true"] { color: var(--accent); background-image: linear-gradient(var(--accent), var(--accent)); }
.room .tabbar__bar { display: none; }

/* people and AI sessions */
.room .people, .room .members { gap: 12px; }
.room__people .members__row {
  position: relative; padding: 8px 12px; min-height: 52px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg);
  transition: background-color var(--dur), border-color var(--dur);
}
.room__people .members__row:has(.members__slot) { border-style: dashed; background: transparent; }
.room__people .members__row:has(.members__slot:hover) { border-color: var(--ink-4); background: var(--ldu-wash); }
.room .members__slot { position: static; margin: 0; padding: 0; }
.room .members__slot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.room .members__slot:hover { background: none; }
.room .members__slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.room .clientbadge { padding: 0; border: 0; border-radius: 0; background: none; }
.room .seatdot { border-width: 1px; }
.room .voicechip { transition: background-color var(--dur), border-color var(--dur), color var(--dur); }

/* reference: agenda, files, notes */
.room .library { gap: 16px; }
.room .dropzone { border: 1px dashed var(--line-3); border-radius: var(--r-2); transition: background-color var(--dur), border-color var(--dur); }
.room .dropzone:hover { border-color: var(--ink-4); background: var(--ldu-wash); }
.room .library__name a { color: var(--ink); text-decoration: none; transition: color var(--dur); }
.room .library__name a:hover { color: var(--accent); text-decoration: underline; }

/* joining: a session asking for its code, and the code once shown */
.room .request { gap: 12px; padding: 12px 16px; border-radius: var(--r-2); background: var(--bg-2); }

/* the chat: one card with its tabs, the transcript and the composer */
.room__stage { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--ldu-r-xl); background: var(--bg-2); }
.room__stage > .tabbar { padding: 0 12px; }
.room__main > .chat { border: 1px solid var(--line); border-radius: var(--ldu-r-xl); background: var(--bg-2); overflow: hidden; }
/* The request strips above the tabs hold nothing most of the time; empty, they must not add the column gap and push the tabs below the People panel. */
.room__main > .requests:not(:has(*)), .room__main > [data-testid=person-requests]:not(:has(*)) { display: none; }
.room .chat { gap: 0; }
.room .room__transcript { padding: 24px 24px var(--scroll-gap, 32px); gap: 16px; }
.room .room__transcript:empty { padding: 0; }
/* the room chat's and the AI chat's empty state (the DS .ldu-empty, bare): one block in the middle of the chat. :where keeps it below
   comms/app.css's rule that hides it once the transcript has a line. */
.room .chat :where(.room__empty) { flex: 1 1 auto; display: grid; align-content: center; }
.room .msg__who { font-family: var(--sans); font-weight: 500; color: var(--ink-2); }
.room .msg__bubble { padding: 10px 14px; font-size: var(--fs-ui); line-height: 1.55; border-radius: var(--r-2); }
.room .msg--customer .msg__bubble, .room .msg--expert .msg__bubble, .room .msg--seat_3 .msg__bubble, .room .msg--seat_4 .msg__bubble { background: var(--bg); border-color: var(--line); border-bottom-left-radius: 3px; }
.room .msg--system .msg__bubble { padding: 2px 8px; font-size: var(--fs-meta); color: var(--ink-3); }
/* the composer: a 44px box and the page's one solid button */
.room .composer { padding: 12px; background: var(--bg-2); }
.room .composer__input { border-radius: var(--r-2); background: var(--bg); }   /* the design system's input fill (ds.css .input), both themes */
.room .composer__input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* one line at rest: a long placeholder never wraps the box taller */
.room .composer .btn { min-width: 88px; }
.room .mentions { padding: 4px; border-color: var(--line); border-radius: var(--r-2); background: var(--bg-2); }

/* modals in the room: the add dialog, the voice picker, someone asking to come in, the waiting popup */
.modal { border: 1px solid var(--line); border-radius: var(--ldu-r-xl); background: var(--bg-2); }
.modal__title { font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.room .addcards { gap: 12px; margin: 16px 0; }
.room .addcard { gap: 8px; padding: 16px; border-radius: var(--r-2); background: var(--bg); }
.room .addexplain { padding: 12px 16px; border-radius: var(--r-2); background: var(--ldu-recess); }
.room .invites__form { flex-wrap: wrap; gap: 8px; }
.room .invites__form .typeahead { flex: 1 1 100%; }

@media (max-width: 860px) {
  .room { padding: 16px var(--pad-main, 24px); gap: 16px; }
  .room__id .room__name { font-size: var(--fs-h2); line-height: 1.3; }
  /* stacked: the people card, then a chat card that has a height of its own (the page scrolls) */
  .room__layout { flex: none; align-items: start; }
  .room__people { overflow-y: visible; }
  .room__main { min-height: 70vh; }
  .room__stage, .room__main > .chat { flex: 1 1 auto; min-height: 70vh; }
  .room .room__transcript { padding: 16px 12px var(--scroll-gap, 32px); }
  .room .msg { max-width: 90%; }
  .room .transcript-frame .transcript { overscroll-behavior: auto; }     /* stacked, the page scrolls: let the wheel reach it (the chat has no scroll of its own here) */
  .room .composer { padding: 8px; }
}
@media (max-width: 640px) { .room .addexplain { display: none; } }

/* ── the rooms lobby (home) ─────────────────────────────────────────────────────────────────────────────────── */
.main--pad.ldu-page .home { max-width: none; gap: 16px; align-items: stretch; }
.main--pad.ldu-page .roomstart { gap: 0; }
.main--pad.ldu-page .roomstart__tabs { gap: 24px; margin: 0 0 16px; }
.main--pad.ldu-page .roomstart__tab { margin-bottom: -1px; padding: 12px 0; font-weight: 500; color: var(--ink-2); }
.main--pad.ldu-page .roomstart__tab:hover { color: var(--accent); }
.main--pad.ldu-page .roomstart__tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.main--pad.ldu-page .roomstart__panel { gap: 16px; }
.main--pad.ldu-page .home__notice, .main--pad.ldu-page .home__alert { margin: 0 0 16px; }   /* the DS alert */

.main--pad.ldu-page .lobby { margin: 24px 0 0; padding: 16px; border-radius: var(--ldu-r-xl); }
@media (min-width: 640px) { .main--pad.ldu-page .lobby { padding: 24px; } }
.main--pad.ldu-page .lobby > h2 { margin: 0 0 16px; font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
.lobby__name { color: var(--ink); text-decoration: none; transition: color var(--dur); }
.lobby__name:hover { color: var(--accent); text-decoration: underline; }
.lobby__host { color: var(--ink-2); }
.lobby__who > summary:hover .lobby__dots .seatdot { border-color: var(--ink-4); }
.lobby__pwfields { border-radius: var(--r-2); box-shadow: none; }

/* ── the Spotlight and Horadric Cube tabs, framed in the room ─────────────────────────────────────────────── */
.spot__frame { border-color: var(--line); border-radius: var(--ldu-r-xl); }
.spot__say { border-color: var(--line); border-radius: var(--r-2); font-size: var(--fs-ui); }

/* the frame paints the tab panel's own colour, so its text has a known background when opened on its own */
html:has(.hcube), .spot-body:has(.hcube) { background: var(--bg-2); }
.hcube__empty { max-width: 520px; }   /* the DS .ldu-empty (page, bare) */
.hcube__card { gap: 8px; max-width: 480px; }   /* the DS .card */
.hcube__card .expert__blurb { margin: 0; color: var(--ink-2); }
@media (max-width: 639.98px) { .hcube { padding: 16px; } }

/* ── the Rooms page (Milan, round 4): the lobby on the left and wide; New room / Join a room in a right column; the optional A2A
   suggestion is a slim bar across the top. The room_start component's .home is display: contents, so its cards are grid items here. ── */
.main--pad.ldu-page.roomspage {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 24px;
  grid-template-areas: "notice notice" "a2a a2a" "lobby start";
}
.roomspage > .home__notice, .roomspage > .home__alert { grid-column: 1 / -1; margin: 0; }
.main--pad.ldu-page.roomspage .home { display: contents; }
.roomspage .roomstart { grid-area: start; }
.roomspage .a2abar { grid-area: a2a; }
.roomspage > .lobby { grid-area: lobby; margin: 0; }
.main--pad.ldu-page.roomspage .home__panel.roomstart { padding: 20px; gap: 0; }
.main--pad.ldu-page .roomstart__tabs { gap: 24px; margin: 0 0 20px; }
.main--pad.ldu-page .roomstart__tab { padding: 4px 0 12px; font-size: var(--fs-body); }
.main--pad.ldu-page .roomstart__panel { flex: none; gap: 16px; }
.main--pad.ldu-page .roomstart__panel .expert__blurb { color: var(--ink-2); line-height: 1.5; }
.main--pad.ldu-page .roomstart__panel .home__create, .main--pad.ldu-page .roomstart__panel .home__rejoin { flex: none; gap: 12px; }
.main--pad.ldu-page .roomstart__panel .home__create .btn, .main--pad.ldu-page .roomstart__panel .home__rejoin .btn { margin-top: 4px; }

/* the A2A suggestion: one quiet line, an info mark, two small buttons */
.a2abar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); }   /* the DS alert's neutral surface */
.a2abar__icon { display: inline-flex; flex: none; color: var(--accent); }
.a2abar__text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.a2abar__title { margin: 0; font-family: var(--sans); font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.a2abar__sub { margin: 0; font-size: var(--fs-meta); color: var(--ink-2); }
.a2abar .btn { flex: none; }
/* the table: Room | People (host + seats) | Started | lock | copy + menu; every row one fixed 56px line */
.main--pad.ldu-page .lobby > h2 { margin: 0 0 16px; }
.lobby__table { width: 100%; table-layout: auto; }
.lobby__table thead th { white-space: nowrap; }
.lobby__table tbody td, .lobby__table tbody th { padding-block: 10px; vertical-align: middle; }
.lobby__table tbody tr { height: 56px; }
.lobby__table tbody th[scope="row"] { width: 100%; max-width: 0; }
.lobby__nameline { display: flex; align-items: center; min-width: 0; }
.lobby__nameline .lobby__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby__table :is(td, th):not([scope="row"]) { white-space: nowrap; }
.lobby__when { color: var(--ink-3); font-size: var(--fs-meta); }
.lobby__pw { width: 1%; text-align: center; }
.lobby__lock { display: inline-flex; color: var(--ink-3); }
.lobby__lock .icon { width: 16px; height: 16px; }
.lobby__actions { width: 1%; text-align: right; }
.lobby__actions > * { vertical-align: middle; }

/* the whole row opens the room: the name link is stretched over the row; controls sit above it */
.lobby__row { position: relative; cursor: pointer; }
.lobby__name::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.lobby__name:focus-visible { outline: none; }
.lobby__row:has(.lobby__name:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-2); }
.lobby__row :is(.lobby__hostav, .lobby__who, .lobby__lock, .lobby__copy, .lobby__more) { position: relative; z-index: 1; }
.lobby__row :is(.lobby__who, .lobby__more)[open] { z-index: 30; }
.lobby__row:hover .lobby__name { color: var(--accent); text-decoration: underline; }

/* People: the host's circle with a small host mark (tooltip names them), then the seat dots */
.lobby__people { display: table-cell; }
.lobby__people > * { vertical-align: middle; }
.lobby__hostav { display: inline-flex; margin-right: 8px; cursor: default; }
.lobby__crown { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border: 2px solid var(--bg-2); border-radius: 999px; background: var(--accent); }
.lobby__crown::after { content: ""; position: absolute; inset: 2px; border-radius: 999px; background: var(--bg-2); transform: scale(0.45); }
.lobby__who { display: inline-block; position: relative; }
.lobby__who > summary { height: 32px; padding: 0 6px; border-radius: var(--r-2); gap: 6px; }
.lobby__who > summary:hover { background: var(--ldu-wash); }
.lobby__dots .seatdot { width: 22px; height: 22px; margin-right: 3px; font-size: 11px; }

/* floating panels (who is in the room, the row menu): over the table, flipped by flip_controller when they would leave the viewport */
.lobby__who .lobby__roster, .lobby__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; margin: 0; animation: none; white-space: normal; }   /* the look is .menu */
.lobby__who .lobby__roster { width: max-content; min-width: 260px; max-width: min(420px, calc(100vw - 32px)); padding: 4px 4px 8px; gap: 4px; }
.lobby__roster .lobby__rlist, .lobby__roster .lobby__rnone { padding: 0 12px; }
.lobby__menu { left: auto; right: 0; display: grid; text-align: left; }
:is(.lobby__who, .lobby__more).is-up > :not(summary) { top: auto; bottom: calc(100% + 4px); }
.lobby__who.is-end .lobby__roster { left: auto; right: 0; }
.lobby__more { display: inline-block; position: relative; }
.lobby__more > summary { list-style: none; cursor: pointer; }
.lobby__more > summary::-webkit-details-marker { display: none; }
.lobby__menu .lobby__pwform > summary { list-style: none; }
.lobby__menu .lobby__close { display: block; margin: 0; }
.lobby__menu .lobby__pwform { display: block; }
.lobby__menu .lobby__pwfields { position: static; margin: 4px; padding: 8px; box-shadow: none; flex-wrap: wrap; }
.lobby__menu .lobby__pwfields .input { width: 100%; }


/* ── the People drawer (S11): on a phone the people panel is a sheet from the left behind a People button, so the chat has the screen; wide screens keep the column ── */
.room__peoplebtn, .room__scrim { display: none; }
@media (max-width: 860px) {
  .room__peoplebtn { display: inline-flex; align-self: flex-start; }
  .room__layout { display: block; }
  .room__people {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(340px, 92vw); max-height: none; margin: 0; overflow-y: auto; border-radius: 0 var(--ldu-r-xl) var(--ldu-r-xl) 0;
    transform: translateX(-102%); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); box-shadow: var(--shadow-menu); outline: none; visibility: hidden;
  }
  .room--people-open .room__people { transform: none; visibility: visible; }
  .room__scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
  .room__scrim[hidden] { display: none; }
  .room--people-open .room__scrim { display: block; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .room__people { transition: none; } }

/* ── the chat's sandbox storage (S-sandbox): a dropzone over the chat, the host's popup, the setup animation and the success check. Tokens only; motion off under reduced-motion. ── */
.room__chatpanel { position: relative; }
.composer__attach { flex: none; }
/* The paperclip sits inside the message box, at its bottom right; the box leaves room for it. */
.composer__field { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.composer__field .composer__input { width: 100%; }
.composer__field:has(.composer__attach) .composer__input { padding-right: 48px; }
/* the hint stays on one line and ends in an ellipsis in a narrow pane, instead of breaking across the box */
.composer__input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer .composer__field .composer__attach { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; min-width: 0; padding: 0; justify-content: center; border-radius: var(--r-1); color: var(--ink-3); transition: color 150ms ease, background-color 150ms ease; }
.composer .composer__field .composer__attach:hover { color: var(--ink); background: var(--board); }   /* a step darker than the field (--bg), never the accent */
.composer .composer__field .composer__attach:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sandbox__veil { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 2px dashed var(--accent); border-radius: var(--ldu-r-xl); }
.sandbox__veil[hidden] { display: none; }
.sandbox__veilbox { display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--ink); pointer-events: none; }
.sandbox__veilbox span { color: var(--ink-3); font-size: var(--fs-meta); }
.sandbox__toast { margin: 0; max-width: calc(100vw - 32px); }   /* the DS .toast; a <p>, so no margin */
.sandbox__toast[hidden] { display: none; }
.sandbox[hidden] { display: none; }
.sandbox__box > section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sandbox__box > section[hidden] { display: none; }
.sandbox__who { margin: 0; padding: 0; border: 0; min-width: 0; }
.sandbox__who legend { padding: 0; margin: 0 0 8px; font-weight: 600; font-size: var(--fs-body); color: var(--ink); }
.sandbox__people { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 200px; overflow: auto; }
.sandbox__people label { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0; cursor: pointer; }
.sandbox__people label:has(input:disabled) { cursor: default; }
.sandbox__people .chip { margin-left: auto; }
.sandbox__pending { margin: 12px 0 0; color: var(--ink-2); }

/* the setup animation: files travel a dashed line into a box, the box locks */
.sandbox__art { display: block; width: 100%; max-width: 400px; margin: 8px auto 4px; fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.sandbox__art .sbx-line { stroke: var(--line-3); }
.sandbox__art .sbx-ants { stroke: var(--accent); stroke-dasharray: 3 7; animation: sbx-ants 0.9s linear infinite; }
.sandbox__art .sbx-tick { stroke: var(--accent); opacity: 0.6; }
.sandbox__art .sbx-box rect, .sandbox__art .sbx-box path { stroke: var(--ink); }
.sandbox__art .sbx-lock rect, .sandbox__art .sbx-lock path { stroke: var(--accent); }
.sandbox__art .sbx-lock { opacity: 0; animation: sbx-lock 2.6s ease-in-out infinite; }
.sandbox__art .sbx-label { fill: var(--ink-3); stroke: none; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; }
.sandbox__art .sbx-file { animation: sbx-travel 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.sandbox__art .sbx-file--2 { animation-delay: 0.35s; }
.sandbox__art .sbx-file--3 { animation-delay: 0.7s; }
@keyframes sbx-ants { to { stroke-dashoffset: -20; } }
@keyframes sbx-travel { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 70% { transform: translateX(250px) scale(0.55); opacity: 1; } 82%, 100% { transform: translateX(262px) scale(0.3); opacity: 0; } }
@keyframes sbx-lock { 0%, 62% { opacity: 0; transform: translateY(6px); } 78%, 100% { opacity: 1; transform: translateY(0); } }
.sandbox__steps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; color: var(--ink-3); font-size: var(--fs-ui); }
.sandbox__steps li { display: flex; align-items: center; gap: 8px; transition: color 200ms; }
.sandbox__steps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-3); flex: none; transition: background 200ms, border-color 200ms; }
.sandbox__steps li[data-state="now"] { color: var(--ink); }
.sandbox__steps li[data-state="now"]::before { border-color: var(--accent); animation: sbx-pulse 1s ease-in-out infinite; }
.sandbox__steps li[data-state="done"] { color: var(--ink-2); }
.sandbox__steps li[data-state="done"]::before { background: var(--ok); border-color: var(--ok); }
@keyframes sbx-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } }

/* the success check draws itself */
.sandbox__check { display: block; width: 64px; height: 64px; margin: 8px auto 12px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sandbox__check circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: sbx-draw 0.6s ease-out forwards; }
.sandbox__check path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: sbx-draw 0.4s 0.5s ease-out forwards; }
@keyframes sbx-draw { to { stroke-dashoffset: 0; } }
[data-sandbox-panel="done"] { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .sandbox__art .sbx-ants, .sandbox__art .sbx-file, .sandbox__art .sbx-lock, .sandbox__steps li[data-state="now"]::before { animation: none; }
  .sandbox__art .sbx-file--1 { opacity: 1; } .sandbox__art .sbx-file--2, .sandbox__art .sbx-file--3 { opacity: 0; }
  .sandbox__art .sbx-lock { opacity: 1; }
  .sandbox__check circle, .sandbox__check path { animation: none; stroke-dashoffset: 0; }
}
.msg__link { margin-left: 4px; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.msg--sandbox { align-self: center; width: min(440px, 100%); max-width: 100%; }
/* Files shared in the chat: a bubble from whoever shared them (msg--human or an AI's role sets the side), plain surface, one compact row per file.
   The row (icon, name, size and type) opens the file; Download and the signature tick sit at its right edge; the versions open under the row. */
.msg--files { width: 100%; }
.msg--files .msg__main { width: min(600px, 100%); container: filecards / inline-size; }  /* the cards stack by the bubble's width, not the screen's: the chat pane can be narrow on a desktop */
.room .msg--files .msg__bubble--files { padding: 4px; background: var(--bg); color: var(--ink); border-color: var(--line); white-space: normal; }
.filecards { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filecard { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2px; text-align: left; border-radius: var(--r-1); transition: background-color 150ms ease; }
.filecard:has(.filecard__open:hover) { background: var(--ldu-wash); }  /* the row washes when the file itself is pointed at; its buttons have their own hover */
.filecard__open { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border-radius: var(--r-1); color: inherit; text-decoration: none; }
.filecard__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.filecard__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-1); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); }
.filecard__body { min-width: 0; display: grid; }
.filecard__name { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-weight: 500; font-size: var(--fs-ui); }
.filecard__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* the full name is its tooltip */
.filecard__name .chip { flex: none; }
.filecard__meta { color: var(--ink-3); font-size: var(--fs-meta); }
.filecard__actions { display: flex; align-items: center; gap: 2px; padding-right: 6px; }
.filecard__spotlight { gap: 6px; margin-right: 4px; white-space: nowrap; }
.filecard__actions [hidden] { display: none; }
.filecard__actions > * { flex: none; }
.filecard__spotlight .icon { flex: none; width: 14px; height: 14px; }
.room .msg--files { max-width: 100%; }  /* file names need the room more than a bubble needs its margin; the bubble itself stops at 600px */
@container filecards (max-width: 480px) {
  /* a narrow bubble (a phone, or the chat pane dragged narrow): the name gets the row, the actions sit under it, lined up with the name */
  .filecard { grid-template-columns: minmax(0, 1fr); }
  .filecard__open { gap: 8px; padding: 6px 6px 2px; }
  .filecard__title { white-space: normal; overflow-wrap: anywhere; }
  .filecard__actions { padding: 0 6px 6px 50px; }
  .filecard__spotlight { margin-right: auto; }
  .filecard__verb { display: none; }  /* "Spotlight" alone; the tooltip says the rest */
}

.sandbox__soon { margin-top: 4px; opacity: 0.6; }
.sandbox__soon label { cursor: not-allowed; }

/* narrower: the right column moves above the lobby */
@media (max-width: 1099px) {
  .main--pad.ldu-page.roomspage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "notice" "a2a" "start" "lobby"; }
}
@media (max-width: 1099px) and (min-width: 700px) {
  .main--pad.ldu-page.roomspage .home__panel.roomstart .home__create { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; }
  .main--pad.ldu-page.roomspage .home__panel.roomstart .home__create .btn { margin-top: 0; }
}
/* phone: a room is a two-line card: its name, then people + age + lock + controls */
@media (max-width: 640px) {
  .a2abar { flex-wrap: wrap; }
  .a2abar__text { flex-basis: calc(100% - 32px); }
}
/* the lobby is a size container: when IT is narrow (a phone, or its column beside New room on a mid-size window), a room is a
   two-line card, so the table never runs out of its frame */
.lobby { container: lobby / inline-size; }
@container lobby (max-width: 640px) {
  .lobby__table, .lobby__table tbody { display: block; width: 100%; }
  .lobby__table thead { display: none; }
  .lobby__table .lobby__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; height: auto; margin: 0; padding: 12px 16px; }
  .lobby__table .lobby__row + .lobby__row { border-top: 1px solid var(--line); }
  .lobby__table .lobby__row > * { display: flex; align-items: center; border: 0; padding: 0; width: auto; min-width: 0; }
  .lobby__table .lobby__row > th { flex: 0 0 100%; max-width: none; }
  .lobby__row .lobby__people { flex: 0 1 auto; }
  .lobby__row .lobby__actions { margin-left: auto; gap: 4px; }
  .lobby__who .lobby__roster { min-width: 0; }
}

/* ── the room page, round 3: one minimal header row, matching tab bars, a two-cell Spotlight switch ── */
.room { gap: 16px; }
.room__head { align-items: center; flex-wrap: nowrap; gap: 12px 16px; padding: 0; }
.room .crumbs { margin: 0; min-width: 0; flex: 0 1 auto; }
.room .crumbs ol { min-width: 0; }
.room .crumbs li { min-width: 0; }
.room .crumbs .room__name, .room .crumbs .mono { display: block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.room__id { flex: 1 1 auto; justify-content: flex-start; gap: 8px; }
.room__code { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; transition: color var(--dur), background-color var(--dur); }
.room__code:hover, .room__code:focus-visible { background: var(--ldu-wash); color: var(--ink); }
.room__code code { padding: 0; border: 0; background: none; font-size: var(--fs-meta); color: inherit; }
.room__code .icon { width: 14px; height: 14px; }
.room__actions { flex: none; flex-wrap: nowrap; align-items: center; gap: 8px; }
/* the speaker (a DS icon button), and the slider that opens beside it on hover or focus */
.soundbar { gap: 0; }
.soundbar__volume { width: 0; opacity: 0; margin: 0; transition: width var(--dur), opacity var(--dur), margin var(--dur); }
.soundbar:hover .soundbar__volume, .soundbar:focus-within .soundbar__volume { width: 90px; opacity: 1; margin: 0 12px 0 4px; }
@media (max-width: 720px) { .soundbar__volume { display: block; } }
.room .people__add { align-self: flex-start; }
.room__tabpanel > .people__add { margin-top: 0; }

/* both tab bars: the same padding and tab size, lined up with the card edge */
.room__people { padding: 0; gap: 0; }
.room .tabbar { gap: 8px; padding: 12px 16px 0; }
.room .tabbar__tab { min-height: 44px; padding: 0 4px; }
.room__people > .tabpanel, .room__people > .people { padding: 16px; }
.room__stage > .tabbar { padding: 12px 16px 0; }

/* Spotlight: Word Document | Deck as two equal cells, centred, capped width */
.spot__switch { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto 16px; }
.spot__switch .spot__tab { width: 100%; height: 44px; justify-content: center; }
.room .crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
.room .crumbs li + li::before { flex: none; }
.room .crumbs li:last-child { display: flex; align-items: center; min-width: 0; }
@media (max-width: 640px) {
  .room__head { flex-wrap: wrap; gap: 8px 12px; }
  .room .crumbs { flex: 1 1 100%; }
  .room .crumbs .room__name, .room .crumbs .mono { max-width: 100%; }
  .room__id { flex: 1 1 0; min-width: 0; }
  .room__actions { margin-left: auto; }
}
.lobby .lobby__copy > *, .lobby .lobby__more > summary > *, .a2abar__info > * { flex: none; }
.lobby :is(.lobby__copy, .lobby__more > summary, .lobby__lock) svg, .a2abar__info svg { max-width: none; min-width: 16px; }
@container lobby (max-width: 640px) {
  .lobby__table tbody .lobby__row > :is(th, td) { padding: 0; }   /* beats the DS cell padding: the card lays its own out */
  .lobby__table tbody .lobby__row > th[scope="row"] { flex: 0 0 100%; width: 100%; max-width: none; }
  .lobby__row .lobby__chev { display: none; }
  .lobby__row .lobby__who > summary { padding: 0 2px; }
  .lobby__table .lobby__row { gap: 8px; }
}
@container lobby (max-width: 640px) {
  .lobby__row .lobby__dots .seatdot { width: 20px; height: 20px; margin-right: 2px; }
  .lobby__row .lobby__hostav { margin-right: 4px; }
}

/* ── the Rooms page, round 5 (Milan, 15 Oct) ── */
/* the empty notice row no longer adds a grid gap: the A2A bar sits 32px under the description, as on other pages */
.main--pad.ldu-page.roomspage:not(:has(> .home__notice, > .home__alert)) { grid-template-areas: "a2a a2a" "lobby start"; }
@media (max-width: 1099px) {
  .main--pad.ldu-page.roomspage:not(:has(> .home__notice, > .home__alert)) { grid-template-areas: "a2a" "start" "lobby"; }
}
/* the lobby and the New room card start on the same line */
.main--pad.ldu-page.roomspage > .lobby { margin: 0; }

/* A2A: Connect is the solid call to action, "What is A2A?" the DS outlined button beside it */

/* New room / Join a room: the same 24px padding as the lobby card; blurb, fields, then the button as its own step (40px controls, as on every LDU page) */
.main--pad.ldu-page.roomspage .home__panel.roomstart { padding: 24px; }
.main--pad.ldu-page.roomspage .roomstart__tabs { margin: 0 0 20px; }
.main--pad.ldu-page.roomspage .roomstart__tab { padding: 0 0 12px; }
.main--pad.ldu-page.roomspage .roomstart__panel { gap: 20px; }
.main--pad.ldu-page.roomspage .roomstart__panel .expert__blurb { margin: 0; font-size: var(--fs-ui); }
.main--pad.ldu-page.roomspage .roomstart__panel :is(.home__create, .home__rejoin) { gap: 12px; }
.main--pad.ldu-page.roomspage .roomstart__panel :is(.home__create, .home__rejoin) .btn { margin-top: 8px; }
@media (max-width: 1099px) and (min-width: 700px) {
  .main--pad.ldu-page.roomspage .roomstart__panel :is(.home__create, .home__rejoin) .btn { margin-top: 0; }
}

/* the room name never underlines; the row hover colours it */
.lobby__name:hover, .lobby__row:hover .lobby__name { text-decoration: none; }

/* copy: a small DS ghost button with an icon and a short label, so it says what it copies ("Copied" replaces the label for a moment) */
/* a guest's one action, Leave, sits beside it as an icon button */
.lobby__actions > .lobby__close { display: inline-block; position: relative; z-index: 1; margin: 0 0 0 4px; vertical-align: middle; }
.lobby .lobby__leave > *, .lobby .lobby__leave svg { flex: none; max-width: none; min-width: 16px; }

/* no rooms: no lobby; New room and Join a room are two equal cards side by side under the A2A bar */
.main--pad.ldu-page.roomspage.roomspage--empty { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "notice notice" "a2a a2a" "new join"; }
.main--pad.ldu-page.roomspage.roomspage--empty:not(:has(> .home__notice, > .home__alert)) { grid-template-areas: "a2a a2a" "new join"; }
.roomspage .roomstart--new { grid-area: new; }
.roomspage .roomstart--join { grid-area: join; }
.main--pad.ldu-page.roomspage .roomstart--split { align-self: stretch; }
.main--pad.ldu-page.roomspage .roomstart--split > h2 { margin: 0 0 8px; font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
.main--pad.ldu-page.roomspage .roomstart--split .roomstart__panel { gap: 20px; width: 100%; }
.main--pad.ldu-page.roomspage .home__panel.roomstart.roomstart--split :is(.home__create, .home__rejoin) { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
.main--pad.ldu-page.roomspage .home__panel.roomstart.roomstart--split :is(.home__create, .home__rejoin) :is(.input, .btn) { flex: none; width: 100%; }
.main--pad.ldu-page.roomspage .home__panel.roomstart.roomstart--split :is(.home__create, .home__rejoin) .btn { margin-top: 8px; }
@media (max-width: 760px) {
  .main--pad.ldu-page.roomspage.roomspage--empty { grid-template-columns: minmax(0, 1fr); grid-template-areas: "notice" "a2a" "new" "join"; }
  .main--pad.ldu-page.roomspage.roomspage--empty:not(:has(> .home__notice, > .home__alert)) { grid-template-areas: "a2a" "new" "join"; }
}
/* every New room / Join a room field keeps its 40px height (a column flex parent with flex: 1 1 0 squeezed it to 20px) */
.main--pad.ldu-page.roomspage .roomstart__panel :is(.home__create, .home__rejoin) .input { flex: none; height: 40px; }

/* ── the room page, round 5 (Milan, 15 Oct) ── */
/* the join-requests strip takes no row (and no gap) while nobody is asking, so the chat card lines up with the people card */
.room__main > .requests:not(:has(*)) { display: none; }
/* End session: a ghost button with its label, in place of a one-item menu */
.room__end { margin: 0; }
.room .room__endbtn { gap: 6px; }
/* the left card's two tabs (In this room | Reference) share its width evenly */
.room__people > .tabbar { gap: 0; }
.room__people > .tabbar > .tabbar__tab { flex: 1 1 50%; justify-content: center; text-align: center; }

/* ── the room page, round 6 (Milan, 15 Oct) ── */
/* an AI session's circle: its owner's photo or initials, with the model's logo on the corner */
.agentav { position: relative; display: inline-flex; flex: none; }
.agentav .avatar { margin: 0; }
.agentav__badge {
  position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink);
}
.agentav__badge .modelicon { width: 10px; height: 10px; }

/* the AI session rows: circle | name over model, voice and waiting | remove */
.room__people .members__list { gap: 8px; }
.room__people .members__row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 8px 10px 12px; min-height: 56px; }
.room__people .members__who { gap: 4px; }
.members__name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.room__people .members__name strong { min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the state is a dot by the name (its word is for screen readers): green listening, amber not listening, which also says so under the name */
.room__people .members__state { display: inline-flex; align-items: center; gap: 4px; flex: none; order: 2; font-size: var(--fs-meta); }
.room__people .members__state::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--ink-4); }
.room__people .members__state--listening::before { background: var(--ok); }
.room__people .members__state--quiet::before { background: var(--warn); }
.room__people .members__state .members__statetext { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.room__people .members__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ink-2); }
.members__model { font-weight: 500; color: var(--ink-2); white-space: nowrap; cursor: default; }
.members__quiet { white-space: nowrap; color: var(--warn); font-weight: 500; }
.members__waiting { white-space: nowrap; color: var(--accent); font-weight: 500; }
.room__people .members__removeform { grid-column: auto; justify-self: end; align-self: center; }


/* "Add a session": one dashed row while a seat is free, in place of a row per empty seat and an "Invite an AI" button */
.room__people .members__row--add { display: block; padding: 0; }
.room .members__row--add .members__slot { display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 10px 12px; }
.members__plus {
  width: 32px; height: 32px; flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line-3); border-radius: 999px; color: var(--ink-3);
}
.members__row--add .members__slot strong { font-weight: 600; }
.members__row--add .members__slot:hover .members__plus { border-color: var(--accent); color: var(--accent); }
.members__row--add .members__slot:hover strong { color: var(--accent); }


/* a session asking to join: an LDU modal (ldu/components.css) with Deny and Allow; only the host sees it */
.room:not([data-viewer-host="true"]) .session-requests { display: none; }
.room__main > .requests { display: contents; }
.session-requests__who { display: flex; align-items: center; gap: 12px; }
.session-requests__icon {
  width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink-2);
}
.session-requests__icon .modelicon { width: 20px; height: 20px; }
.session-requests__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--fs-body); }
.session-requests__meta { font-size: var(--fs-meta); color: var(--ink-3); }
/* after Allow: the code, big enough to read out, on the plain modal (no tinted box) */
.ldu-modal__body > .session-requests__code { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.2; color: var(--ink); }

/* a chat line's header: name · model, the persona, then an arrow to whoever it was addressed to */
.room .msg__who { flex-wrap: wrap; gap: 2px 6px; }
.room .msg__name { font-weight: 600; color: var(--ink); }
.room .msg__model { color: var(--ink-3); }
.room .msg__model::before { content: "·"; margin-right: 6px; color: var(--ink-4); }
.room .msg__to { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--accent); }
.room .msg__to .icon { flex: none; }
.room .msg__time { color: var(--ink-3); font-weight: 400; font-variant-numeric: tabular-nums; } /* when it was sent: quiet, after the name */
.room .msg .agentav { margin-bottom: 2px; }

/* Reference: the agenda to read, then files and notes, then the ways to add (each group 24px apart, 8px inside) */
.room .library { gap: 24px; }
.refsec { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.refsec__head { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.refsec__title { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.refsec__saved { font-size: var(--fs-meta); color: var(--ok); }
.refsec__empty { margin: 0; font-size: var(--fs-ui); color: var(--ink-3); }
.agenda__text { margin: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
/* Edit agenda opens the box in place of the text; its summary becomes Cancel */
.agenda__edit > summary { list-style: none; align-self: flex-start; width: fit-content; gap: 6px; }
.agenda__edit > summary::-webkit-details-marker { display: none; }
.agenda__edit .agenda__open { display: inline-flex; align-items: center; gap: 6px; }
.agenda__edit .agenda__cancel, .agenda__edit[open] .agenda__open { display: none; }
.agenda__edit[open] .agenda__cancel { display: inline; }
.refsec--agenda:has(.agenda__edit[open]) :is(.agenda__text, .refsec__empty) { display: none; }
.agenda__edit[open] { display: flex; flex-direction: column-reverse; gap: 8px; }
.agenda__edit[open] > summary { align-self: flex-end; margin-top: -40px; margin-right: 0; }
.room .agenda { margin: 0; gap: 8px; }
.room .agenda .btn { align-self: flex-start; }
.room:not([data-viewer-host="true"]) .agenda__edit { display: none; }

/* the list: a file or note icon, its name, one muted line; Remove is the red trash, as in the people and session lists */
.room .library__list { gap: 0; }
.room .library__item { gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.room .library__item:first-child { border-top: 0; padding-top: 0; }
.library__icon { width: 32px; height: 32px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-2); background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); }
.room .library__name { gap: 2px; }
.room .library__name a { font-weight: 500; }
.library__meta { font-size: var(--fs-meta); color: var(--ink-3); }
.library__removeform { margin: 0; flex: none; }

/* adding: one compact drop row for files, and Write a note that opens its form */
.library__add { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.room .dropzone--compact .dropzone__target { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding: 10px 12px; }
.room .dropzone__text { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); }
.dropzone__hint { font-size: var(--fs-meta); color: var(--ink-3); }
.library__notebox > summary { list-style: none; width: 100%; justify-content: center; gap: 6px; }
.library__notebox > summary::-webkit-details-marker { display: none; }
.library__notebox[open] > summary { margin-bottom: 8px; }
.room .library__note .btn { align-self: flex-start; }
.room .share { display: grid; gap: 6px; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-2); min-width: 0; }
.room .share__confirm, .room .share__opt { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); }
.room .share__options { display: grid; gap: 4px; }
.room .share__options summary { cursor: pointer; }
.room .library__note textarea.input { min-height: 96px; }

/* the voice pill opens its volume slider to the LEFT of the speaker, so the speaker stays under the cursor and one click still mutes */
.room .soundbar { flex-direction: row-reverse; }
.soundbar:hover .soundbar__volume, .soundbar:focus-within .soundbar__volume { margin: 0 4px 0 12px; }
/* it opens over the space to its left (a negative margin as wide as the slider), so the header never reflows on hover */
.room .soundbar { position: relative; z-index: 2; background: transparent; transition: margin-left var(--dur); }
.room .soundbar:hover, .room .soundbar:focus-within { margin-left: -106px; }

/* the transcript holds its own absolutely placed bits (.sr-only labels in a line): without this they escape the scroll box and make the page thousands of px tall */
.room .room__transcript { position: relative; }

/* ── AI chat (a tab beside the room chat): you and your own AI, privately. It is the room chat's markup (.chat, .room__transcript, .msg, .composer),
   so it takes every rule above; here only the panel edge to edge, and an AI's ask as a line from that AI whose bubble holds the buttons. ── */
.room__people > .room__aichat:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.room__people:has(> .room__aichat:not([hidden])) { overflow: hidden; }
.room .aichat .room__empty { margin: 16px; }

.room .msg--ask { width: min(100%, 520px); max-width: 100%; }
.room .msg--ask .msg__main { flex: 1 1 auto; }
.askcard__asks { color: var(--ink-3); font-weight: 400; }
.room .askcard__bubble { display: grid; gap: 8px; white-space: normal; }   /* a bubble keeps a message's line breaks; the card's markup has none to keep */
.askcard__title { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.askcard__title strong { font-weight: 600; }
.askcard__icon { display: inline-flex; flex: none; margin-top: 4px; color: var(--ink-3); }
.askcard--permission.askcard--open .askcard__icon { color: var(--warn); }
.askcard__detail { margin: 0; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.askcard__input { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: var(--fs-meta); }
.askcard__input dt { color: var(--ink-3); }
.askcard__input dd { margin: 0; min-width: 0; }
.askcard__input code { display: block; overflow-wrap: anywhere; white-space: pre-wrap; max-height: 8em; overflow: auto; }
.askcard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.askcard__note { flex: 1 1 100%; }
.askcard__actions .btn:first-of-type { margin-left: auto; }
.askcard__questions { display: grid; gap: 10px; }
.askcard__q { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.askcard__q legend { margin-bottom: 4px; padding: 0; color: var(--ink); font-weight: 500; }
.askcard__option { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: var(--r-1); cursor: pointer; transition: background-color var(--dur); }
.askcard__option:hover { background: var(--board); }
.askcard__option input { margin-top: 1px; }   /* the DS .check / .radio */
.askcard__questions .btn { justify-self: end; }
.askcard__outcome, .askcard__hint { margin: 0; color: var(--ink-3); font-size: var(--fs-meta); }
.askcard__problem { margin: 0; color: var(--danger); font-size: var(--fs-meta); }

/* ── the room header, round 7 (Milan, 16 Oct): one row at every width, nothing overlaps, the content card gets the height ──
   The row is: the crumbs (Rooms / name), the code, then People (tablet and phone) and the actions on the right. Only the
   room name gives way (it ends in an ellipsis); "Rooms", the code and the buttons keep their size, so nothing is squeezed
   under its neighbour. Below 1024px the code is left to the Room details dialog, which shows it with a copy button. On a
   phone the crumb's "Rooms" goes (the Menu bar has Rooms) and the buttons become 44px icons whose label stays for screen
   readers and in the title. */
.room { padding-top: 16px; gap: 12px; }
.room__head { flex-wrap: nowrap; gap: 8px; min-height: 34px; }
.room .crumbs { flex: 0 1 auto; }
.room .crumbs li:first-child { flex: none; }
.room .crumbs .room__name, .room .crumbs .mono { max-width: none; }
.room__id { flex: none; }
.room__code code { white-space: nowrap; }
.room__actions { gap: 4px; margin-left: auto; }
.room__head .btn { white-space: nowrap; }
.room__head .room__peoplebtn { align-self: center; }

/* the card's tab strip: a slim bar, one line per tab; a strip too wide for the card scrolls sideways instead of wrapping */
.room__stage > .tabbar { padding: 4px 16px 0; overflow-x: auto; scrollbar-width: none; }
.room__stage > .tabbar::-webkit-scrollbar { display: none; }
.room__stage > .tabbar > .tabbar__tab { flex: none; min-height: 40px; white-space: nowrap; }

@media (max-width: 1023px) {
  .room__id .room__code { display: none; }
}
@media (max-width: 860px) {
  .room { padding-top: 12px; gap: 8px; }
  .room__head .room__peoplebtn { margin-left: auto; }
  .room__head .room__peoplebtn + .room__actions { margin-left: 0; }
}
@media (max-width: 640px) {
  .room { padding-inline: 16px; }
  .room__head { min-height: 44px; gap: 4px; }
  .room .crumbs li:first-child { display: none; }
  .room .crumbs li + li::before { content: none; }
  .room__id { display: none; }
  .room__btnlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }   /* .sr-only, on a phone only */
  .room__stage > .tabbar { padding: 0 8px; gap: 4px; }
  .room__stage > .tabbar > .tabbar__tab { min-height: 44px; }
}

/* Add your AI: three sections of one shape (title, one line, its control), divided by a rule (Milan, 16 Oct) */
.addsteps { gap: 0; }
.addsteps > .addsteps__owner { margin: 0 0 var(--s4); color: var(--ink-2); font-size: var(--fs-ui); }
.addstep { display: grid; justify-items: start; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--line); }
.addstep:last-child { padding-bottom: 0; }
.addstep__title { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.addstep__text { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5; }
.addstep__btn { margin-top: var(--s1); gap: var(--s2); }
.addstep__field { position: relative; width: 100%; margin-top: var(--s1); }
.addstep__field .addstep__code { width: 100%; padding-right: 120px; letter-spacing: .02em; }
.addstep__field .addstep__copy { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); gap: 6px; }

/* Open on your phone: the room's address as a QR (QrHelper). Always dark modules on a light tile so any camera reads it: light-dark() picks the theme's light
   colour (--bg in light, --ink in dark) for the tile and its dark one for the modules, with no colour literal. */
.roomqr { display: grid; gap: 14px; justify-items: center; text-align: left; }
.roomqr__code { width: min(240px, 70vw); padding: 12px; border-radius: 12px; background: light-dark(var(--bg), var(--ink)); }
.roomqr__code svg rect { fill: transparent; }
.roomqr__code svg path { fill: light-dark(var(--ink), var(--bg)); }
.roomqr__code svg { display: block; width: 100%; height: auto; }
.roomqr__steps { margin: 0; padding-left: 1.2rem; display: grid; gap: 6px; justify-self: stretch; }
.roomqr__url { font-family: var(--mono); overflow-wrap: anywhere; }

/* The AI chat's voice (ai_chat_voice.js): a compact dot grid over the transcript, then who you talk to, what it is doing, mic and speaker */
.aichat__voice { display: grid; gap: 6px; padding: 10px 12px 8px; border-bottom: 1px solid var(--line); }
.aichat__stage { display: grid; place-items: center; width: 100%; overflow: hidden; }
.aichat__stage .gridviz { gap: 5px; }
.aichat__stage .gridviz__cell { width: 5px; height: 5px; }
.aichat__bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aichat__who select { max-width: 11rem; }
.aichat__status { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* agent_sessions/show binds only these; the room's AI chat binds the DS .btn--on */
.aichat__sound .speaker--off { display: block; } .aichat__sound .speaker--on { display: none; }
.aichat__sound[aria-pressed="true"] .speaker--off { display: none; } .aichat__sound[aria-pressed="true"] .speaker--on { display: block; }
.aichat__note { margin: 0; }

/* Locked until there is a Soniox key: a dark overlay over the AI chat panel, the key form in a card on top (Sam). The panel stays visible underneath. */
.aichat { position: relative; }
.aichat__lock { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 35%, transparent);
                backdrop-filter: brightness(0.45) blur(2px); -webkit-backdrop-filter: brightness(0.45) blur(2px); overflow-y: auto; }
.aichat__lockbox { width: min(100%, 420px); display: grid; gap: 10px; padding: 20px 22px; box-shadow: 0 18px 50px color-mix(in srgb, var(--ink) 30%, transparent); }
.aichat__locktitle { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-h3); }
.aichat__lockbox p { margin: 0; }