/* Fraction Connect: layout only, tokens only. Every colour is a var() from
   vendor/fraction-ds/css/tokens.css. */

.experts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.experts .card { align-items: flex-start; }
.expert__blurb { margin: 0; color: var(--ink-2); flex: 1; }
.experts form { margin-top: 4px; }

.pairing { width: min(560px, 92vw); }
.pairing__lede { margin: 0 0 16px; color: var(--ink-2); font-size: var(--fs-ui); }

.steps__label { font-size: var(--fs-meta); color: var(--ink-2); font-weight: 500; }

.cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  background: var(--board);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--fs-ui); color: var(--ink); }

.otp { display: flex; align-items: center; gap: 10px; }
.otp__code { font-size: var(--fs-body); font-weight: 600; letter-spacing: .24em; color: var(--ink); }

.pairing__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pairing__hint { color: var(--ink-3); font-size: var(--fs-meta); }

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

@media (max-width: 720px) {
  .main--pad { padding: 16px; }
}

/* ── card: two seats and the conversation ─────────────────────── */
.pairing { width: min(760px, 94vw); }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.seat {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r-2);
}
.seat__title { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.seat .btn { align-self: flex-start; }

.transcript-wrap { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.transcript {
  list-style: none; margin: 0; padding: 8px 10px; min-height: 56px; max-height: 220px; overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--board); border: 1px solid var(--line); border-radius: var(--r-1);
}
.transcript:not(:empty) + .transcript__empty { display: none; }
.transcript__empty { margin: 0; }
.msg { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; max-width: 82%; }
.msg__main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg--human { flex-direction: row-reverse; }
.msg--human .msg__main { align-items: flex-end; }
.msg--system { flex-direction: column; }

/* ── a line landing in the chat eases in; the list glides to it ───── */
.transcript-frame { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --land: 320ms; --scroll-gap: 32px; }
.transcript-frame .transcript { scroll-behavior: auto; overscroll-behavior: contain; }
.transcript-frame .msg { transition: opacity var(--land) var(--ease-out), transform var(--land) var(--ease-out); }
.transcript-frame .msg--entering { opacity: 0; transform: translateY(12px) scale(0.98); }
.transcript-frame .msg--human.msg--entering { transform: translateY(12px) translateX(8px) scale(0.98); }
.transcript-frame .msg--system.msg--entering { transform: none; }
.transcript__jump { align-self: center; margin-top: -44px; position: relative; z-index: 1; transition: opacity var(--land) var(--ease-out), transform var(--land) var(--ease-out); box-shadow: var(--shadow-1, none); }
.transcript__jump[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .transcript-frame .msg { transition: none; } .transcript-frame .msg--entering { opacity: 1; transform: none; } }
.msg--customer, .msg--expert, .msg--seat_3, .msg--seat_4 { align-self: flex-start; }
.msg__who { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); padding: 0 6px; }
.msg__flag { color: var(--ink-3); }
.msg__bubble {
  padding: 8px 12px; font-size: var(--fs-ui); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--line); border-radius: var(--r-2);
}
.msg--customer .msg__bubble, .msg--expert .msg__bubble, .msg--seat_3 .msg__bubble, .msg--seat_4 .msg__bubble { background: var(--bg-2); border-bottom-left-radius: 3px; }

@media (max-width: 720px) {
  .seats { grid-template-columns: 1fr; }
}

.voice { display: flex; flex-direction: column; gap: 4px; }

/* The prompt a person copies: shown in full so they can see what they are sending. */
.connect-cmd {
  margin: 0; padding: 10px; max-height: 240px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: var(--fs-meta); color: var(--ink);
  background: var(--board); border: 1px solid var(--line); border-radius: var(--r-1);
}

/* ── home: create or rejoin ──────────────────────────────────── */
.home { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; max-width: 1000px; }
.home__panel { align-items: flex-start; }
.home__rejoin { display: flex; gap: 8px; width: 100%; }
.home__rejoin .input { flex: 1; min-width: 0; }

/* ── joining: requests, the code, the invite ─────────────────── */
p.home__alert { margin: 0 0 12px; color: var(--warn); font-size: var(--fs-ui); }   /* the pilot funnel's plain line; the lobby's is the DS alert */
.requests { display: flex; flex-direction: column; gap: 8px; }
.request {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--fs-ui);
}
.request--code { border-color: var(--ink-4); }
.invite { border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; }
.invite > summary { cursor: pointer; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.invite[open] > summary { margin-bottom: 8px; }
.invite .connect-cmd { margin: 8px 0; }
.invite__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite-page { max-width: 640px; }
.invite-steps { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 14px; font-size: var(--fs-ui); }
.invite-steps .connect-cmd { margin: 8px 0; }

/* ── the room: its own page, the transcript gets the screen ───── */
.room { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 16px 24px 20px; gap: 12px; }
.room__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.room__id { display: flex; align-items: center; gap: 8px; }
.room__label { color: var(--ink-3); font-size: var(--fs-meta); }
.room__head { justify-content: space-between; }
.room__transcript { flex: 1 1 auto; max-height: none; min-height: 0; background: transparent; border: none; padding: 12px 0 var(--scroll-gap, 32px); gap: 10px; scroll-padding-block: 12px var(--scroll-gap, 32px); }
.room__empty { margin: 0; }
.room__transcript:not(:empty) + .room__empty { display: none; }
@media (max-width: 720px) { .room { padding: 12px; } .pick { grid-template-columns: 1fr auto; } .pick .chip { grid-column: 1; } }

/* Sign in / first account */
.signin { width: 100%; max-width: 380px; margin: 24px auto 0; align-items: stretch; }
.oauth__form { width: 100%; max-width: 440px; margin: 0; } /* the Allow page: the card starts on the title's left edge */
.oauth__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.signin__form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.signin__form .btn { margin-top: 6px; }

/* Breadcrumbs on the room page */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }

/* The lobby: rooms with a free side, on the dashboard (the table is .ldu-table, its menus .menu; ldu/components.css) */
.lobby { margin-top: 24px; max-width: none; }
.lobby__table tbody th { font-weight: 500; }
.lobby__when { color: var(--ink-2); white-space: nowrap; }
.lobby__actions { text-align: right; white-space: nowrap; }

p.home__notice { margin: 0 0 12px; color: var(--ok); font-size: var(--fs-ui); }
.lobby__seats { white-space: nowrap; }
/* the seat dots are a dropdown: click them to see who is in the room */
.lobby__who > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: var(--r-1); }
.lobby__who > summary::-webkit-details-marker { display: none; }
.lobby__who > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lobby__dots { display: inline-flex; }
.lobby__chev { width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.lobby__who[open] .lobby__chev { transform: rotate(225deg) translate(-2px, -2px); }
.lobby__roster { white-space: normal; margin-top: 10px; display: grid; gap: 10px; min-width: 240px; animation: roster-in 240ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes roster-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lobby__chev { transition: none; } .lobby__roster { animation: none; } }
/* what a session is and where it runs: the model's logo, device, country flag */
.modelicon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.clientbadge { display: inline-flex; flex-wrap: wrap; max-width: 100%; align-items: center; gap: 2px 6px; padding: 1px 8px 1px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-meta); color: var(--ink-2); vertical-align: middle; }
.clientbadge__model { display: inline-flex; color: var(--ink); }
.clientbadge__name, .clientbadge__device { white-space: nowrap; }
.clientbadge__name { font-weight: 600; color: var(--ink); }
.clientbadge__device { color: var(--ink-3); }
.clientbadge__flag { font-size: 1.15em; line-height: 1; }
/* the avatar circle is the design system's (.avatar in ldu/components.css); in the chat it sits on the bubble's last line */
.msg > .avatar { margin-bottom: 2px; }
.avatar-btn { margin-left: 6px; }   /* its gap from the bell in the header */

/* the profile panel that slides in from the right */
.drawer-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); opacity: 0; transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1); display: flex; justify-content: flex-end; }
.drawer-scrim[hidden] { display: none; }
.drawer-scrim--open { opacity: 1; }
.drawer { width: min(380px, 100vw); height: 100%; box-sizing: border-box; padding: 16px 20px; background: var(--bg); border-left: 1px solid var(--line); box-shadow: var(--shadow-menu);
  display: flex; flex-direction: column; gap: 16px; overflow-y: auto; transform: translateX(100%); transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.drawer-scrim--open .drawer { transform: none; }
.drawer:focus { outline: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.profile { display: flex; flex-direction: column; gap: 14px; }
.profile__who { display: flex; align-items: center; gap: 16px; }
.profile__names { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profile__email { color: var(--ink-3); font-size: var(--fs-meta); overflow-wrap: anywhere; }
.profile__form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.profile__choose { cursor: pointer; }
.profile__choose:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile__form .pairing__hint, .profile__form .profile__notice { flex-basis: 100%; margin: 0; }
.profile__remove { margin: 0; }
.profile__notice { margin: 0; font-size: var(--fs-meta); color: var(--warn); min-height: 1em; }
.profile__notice--ok { color: var(--ok); }
.profile__notice--bad { color: var(--warn); }
@media (prefers-reduced-motion: reduce) { .drawer-scrim, .drawer, .avatar-btn .avatar { transition: none; } }
/* the voice pill is a .chip (pairings_helper#voice_pill); one not chosen yet has a dashed outline */
.voicechip { font: inherit; font-size: var(--fs-meta); }
.voicechip--empty { border-style: dashed; }
span.voicechip { cursor: default; }
.voices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.voices__tile { position: relative; display: grid; grid-template: "name side" auto "note side" auto / minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 0; padding: 8px 12px 8px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); transition: background-color var(--dur), border-color var(--dur); }
.voices__tile:not(.voices__tile--taken):not(.voices__tile--mine):hover { background: var(--ldu-wash); border-color: var(--ink-4); }
.voices__tile:has(.voices__pick:focus-visible) { outline: var(--ring-w) solid var(--ring); outline-offset: 2px; }
.voices__name { grid-area: name; }
.voices__note { grid-area: note; color: var(--ink-3); font-size: var(--fs-meta); }
.voices__chip { grid-area: side; justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--ldu-wash); color: var(--ink-2); font-size: var(--fs-meta); white-space: nowrap; }
.voices__name { display: flex; align-items: center; gap: 6px; }
.voices__check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.voices__tile--mine { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.voices__tile--taken { background: var(--bg); }
.voices__tile--taken .voices__name, .voices__tile--taken .voices__note { opacity: 0.55; }
.voices__choose { position: absolute; inset: 0; margin: 0; }
.voices__pick { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.voices__preview { grid-area: side; position: relative; z-index: 1; justify-self: end; }
.voices__bars { display: none; align-items: flex-end; gap: 2px; width: 14px; height: 14px; }
.voices__bars i { display: block; width: 3px; height: 4px; border-radius: 1px; background: currentColor; animation: voices-bar 0.8s ease-in-out infinite; }
.voices__bars i:nth-child(2) { animation-delay: 0.15s; }
.voices__bars i:nth-child(3) { animation-delay: 0.3s; }
.voices__preview[data-state="playing"] .voices__icon { display: none; }
.voices__preview[data-state="playing"] .voices__bars { display: inline-flex; }
.voices__preview[data-state="loading"] { opacity: 0.7; }
@keyframes voices-bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { .voices__bars i { animation: none; height: 10px; } }
/* a free slot in the room list is a button: click to add a person or an AI */
.members__slot { appearance: none; background: none; border: 0; padding: 2px 6px; margin: -2px -6px; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; border-radius: var(--r-1); transition: background-color 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.members__slot:hover { background: var(--ldu-wash); }
.members__slot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* the add-to-room dialog: two cards */
.addcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
@media (max-width: 640px) { .addcards { grid-template-columns: 1fr; } }
.addcard { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); }
.addcard__title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.addcard__text { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); flex: 1; }
.addcard__actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* the explainer under the cards: the default, or the one for the card that is hovered or focused */
/* All three texts sit in one grid cell, so the box is always as tall as the longest and never grows or shrinks on hover. */
.addexplain { display: grid; margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--r-1); background: var(--board); color: var(--ink-2); font-size: var(--fs-ui); }
.addexplain__text { grid-area: 1 / 1; margin: 0; visibility: hidden; opacity: 0; transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.addexplain__text--default { visibility: visible; opacity: 1; }
.modal:has(.addcard--guest:is(:hover, :focus)) .addexplain__text--default,
.modal:has(.addcard--agent:is(:hover, :focus)) .addexplain__text--default,
.modal:has(.addcard--hosted:is(:hover, :focus)) .addexplain__text--default { visibility: hidden; opacity: 0; }
.modal:has(.addcard--guest:is(:hover, :focus)) .addexplain__text--guest { visibility: visible; opacity: 1; }
.modal:has(.addcard--agent:is(:hover, :focus)) .addexplain__text--agent { visibility: visible; opacity: 1; }
.modal:has(.addcard--hosted:is(:hover, :focus)) .addexplain__text--hosted { visibility: visible; opacity: 1; }
/* the pointer wins over a card that merely has keyboard focus */
.modal:has(.addcard--guest:hover) .addexplain__text--agent,
.modal:has(.addcard--agent:hover) .addexplain__text--guest { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .addexplain__text { transition: none; } }
.lobby__pw { white-space: nowrap; }
.lobby__pwform { display: inline-block; vertical-align: middle; position: relative; }
.lobby__pwform > summary { list-style: none; cursor: pointer; display: inline-flex; }
.lobby__pwform > summary::-webkit-details-marker { display: none; }
.lobby__pwfields { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; display: flex; gap: 6px; padding: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-menu); }
.lobby__pwfields .input { width: 220px; }
.lobby__name { font-weight: 600; }
.lobby__code { color: var(--ink-3); font-size: var(--fs-meta); margin-left: 6px; }
.room__name { font-weight: 600; font-size: var(--fs-body); }
.room__actions { display: flex; align-items: center; gap: 8px; }
.room__end { margin: 0; }
.lobby__rlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lobby__rlist li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-ui); }
.lobby__rmeta, .lobby__rnone { color: var(--ink-3); font-size: var(--fs-meta); margin: 0; }
.lobby__close { display: inline-block; vertical-align: middle; margin: 0 0 0 4px; }
.lobby__rlist li .lobby__close { margin-left: auto; } /* Remove sits at the right edge of a session's row */
.seatdot {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 6px;
  border-radius: 999px; border: 2px solid var(--line); font-size: var(--fs-meta); font-weight: 600;
}
.seatdot--taken { background: var(--ldu-wash); color: var(--ink); border-color: var(--ink-3); }
.seatdot--free { border-style: dashed; border-color: var(--line-3); color: var(--ink-3); }
.crumbs { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__body { margin: 0; font-size: var(--fs-ui); color: var(--ink-2); }


/* The room: who is here, the library, the chat box */
.room__panels { display: flex; flex-direction: column; gap: 12px; }
.tabbar { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.tabbar__tab { appearance: none; background: none; border: 0; padding: 8px 14px; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-3); cursor: pointer; border-radius: var(--r-1) var(--r-1) 0 0; transition: color 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.tabbar__tab:hover { color: var(--ink); }
.tabbar__tab[aria-selected="true"] { color: var(--ink); }
.tabbar__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabbar__bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), width 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.tabpanel[hidden] { display: none; }
.tabpanel { animation: tab-in 240ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tabbar__bar, .tabbar__tab { transition: none; } .tabpanel { animation: none; } }
.panel { border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.panel__title { margin: 0; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.members__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.members__row { display: flex; align-items: center; gap: 10px; }
.members__row .seatdot { margin-right: 0; }
.members__who { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: var(--fs-ui); }
.members__row .clientbadge { margin-top: 4px; }
.members__meta { font-size: var(--fs-meta); color: var(--ink-2); }
.members__state { font-size: var(--fs-meta); color: var(--ink-2); }
.members__state--listening { color: var(--ok); }
.members__state--quiet { color: var(--warn); }
.dropzone { border: 1px dashed var(--line-2); border-radius: var(--r-2); }
.dropzone--over { border-color: var(--ink-3); background: var(--ldu-wash); }
.dropzone__target { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 12px; cursor: pointer; text-align: center; font-size: var(--fs-ui); }
.library__note { display: flex; flex-direction: column; gap: 6px; }
.library__note .btn { align-self: flex-start; }
.library__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.library__item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-ui); }
.library__kind { font-size: var(--fs-meta); color: var(--ink-2); width: 34px; }
.library__name { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.composer { display: flex; gap: 8px; align-items: flex-end; position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; border-top: 1px solid var(--line); }
/* One line tall, text centred against the Send button (44px = 1px border + 10px + 22px line + 10px + 1px), and it grows with the text. */
.composer__input { flex: 1; resize: none; box-sizing: border-box; height: 44px; min-height: 44px; max-height: 160px; padding: 10px 12px; line-height: 22px; overflow-y: auto; }
/* Agents on the left, the person on the right in the accent colour, system notices in the middle. */
.msg--human { align-self: flex-end; }
.msg--human .msg__bubble { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); border-bottom-right-radius: 3px; }
.msg--system { align-self: center; max-width: 90%; text-align: center; }
.msg--system .msg__bubble { background: transparent; border: none; padding: 2px 8px; font-size: var(--fs-meta); color: var(--ink-3); }

/* The chat area and its empty state; the invite modal */
.chat { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 12px; }
/* the sound control in the room header: a speaker that is the on/off switch, a volume slider, and what it is doing */
.soundbar { display: flex; align-items: center; gap: 8px; }
.soundbar__toggle .speaker--on { display: none; }
.soundbar__toggle[aria-pressed="true"] .speaker--on { display: inline; }
.soundbar__toggle[aria-pressed="true"] .speaker--off { display: none; }
.soundbar__volume { width: 90px; accent-color: var(--accent); }
.soundbar__status { color: var(--ink-3); font-size: var(--fs-meta); min-width: 0; white-space: nowrap; }
@media (max-width: 720px) { .soundbar__volume, .soundbar__status:empty { display: none; } }
.voices__credit { color: var(--ink-3); font-size: var(--fs-meta); margin: 0 0 8px; }
.modal-scrim[hidden] { display: none; }

.home__create { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; width: 100%; }
.home__create .input { width: 100%; }

.agenda { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.agenda__row { display: flex; align-items: center; gap: 10px; }
.dropzone--compact .dropzone__target { padding: 10px 12px; }
.members__agenda p { margin: 2px 0 0; font-size: var(--fs-ui); white-space: pre-wrap; overflow-wrap: anywhere; }
.composer .btn { flex: none; min-width: 96px; }

/* @ mentions in the chat box */
.mentions { position: absolute; bottom: 100%; left: 0; margin: 0 0 6px; padding: 4px; list-style: none; min-width: 280px; max-width: 100%;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-2); z-index: 20; }
.mentions[hidden] { display: none; }
.mentions__item { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: var(--r-1); cursor: pointer; font-size: var(--fs-ui); }
.mentions__item--active, .mentions__item:hover { background: var(--ldu-wash); }
.mentions__meta { font-size: var(--fs-meta); color: var(--ink-2); }
.msg__to { color: var(--accent); }

/* the persona and the owner beside a name are .chip (pairings_helper) */
.msg__who { display: flex; align-items: center; gap: 6px; }

/* The window sits a step darker than the cards on it, so each card reads as its own object. Colours are all tokens. */
.shell, .main { background: var(--board); }
.hdr { background: var(--bg-2); }
.panel, .lobby, .modal, .drawer { background: var(--bg-2); }   /* .card: the DS sets it */
.lobby { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); }
.composer { background: var(--board); }

/* the copy fallback: the text in a box, already selected */
.clipboard__fallback { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; font-size: var(--fs-meta); }

.members__removeform { margin: 0; flex: none; }
.room:not([data-viewer-host="true"]) .members__removeform { display: none; }

.invites { display: flex; flex-direction: column; gap: 6px; }
.invites__form { display: flex; gap: 6px; }
.invites__form .input { flex: 1; min-width: 0; }
.invites__list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-ui); }
.invites__list { display: grid; gap: 8px; }
.invites__list li { display: flex; align-items: center; gap: 10px; }
.invites__who { display: flex; flex-direction: column; min-width: 0; }
.invites__who strong { overflow-wrap: anywhere; }
.invites__list li .icon { color: var(--ok); flex: none; }
.invites__list li .invites__remove { margin-left: auto; }
.invites__remove { margin: 0; }

/* Invitations: the bell, its panel, the search-as-you-type list, the lobby's host column */
.notif { display: inline-flex; }
.notif__bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-2); cursor: pointer; }
.notif__bell:hover { color: var(--ink); background: var(--bg-2); }
.notif__bell .icon { width: 18px; height: 18px; }
.notif__badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent);
  color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.notif__readall { margin: 8px 0; }
.notif__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.notif__item { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--line); font-size: var(--fs-ui); }
.notif__item--new { background: var(--ldu-wash); }
.notif__text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.notif__when { font-size: var(--fs-meta); color: var(--ink-2); }
.typeahead { position: relative; flex: 1; min-width: 0; display: block; }
.typeahead .input { width: 100%; }
.typeahead__list { position: absolute; top: 100%; left: 0; min-width: 240px; z-index: 30; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r-2); }
.typeahead__list[hidden] { display: none; }
.typeahead__item { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 6px 8px; border-radius: var(--r-1); cursor: pointer; font-size: var(--fs-ui); }
.typeahead__item--active, .typeahead__item:hover { background: var(--ldu-wash); }
.typeahead__meta, .typeahead__none { font-size: var(--fs-meta); color: var(--ink-2); }
.typeahead__none { padding: 6px 8px; }
.lobby__host { white-space: nowrap; font-size: var(--fs-ui); }

/* Letting people in: the people column, the host's popup, the waiting room */
.room__layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.room__main { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
@media (max-width: 800px) { .room__layout { grid-template-columns: 1fr; } }
.people { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); }
.people__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.people__row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); }
.people__name { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; overflow-wrap: anywhere; }
.people__removeform { margin: 0; flex: none; }
.people__add { align-self: flex-start; }
.people__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.people__col { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.people__qr { flex: none; width: 272px; max-width: 100%; margin: 0; padding: 10px 10px 10px 14px; display: flex; flex-direction: row; align-items: center; gap: 12px; background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-2); }
.people__qr svg { display: block; flex: none; width: 104px; height: auto; }
.people__qr svg rect { fill: transparent; }
.people__qr svg path { fill: var(--ink); }
.people__qr figcaption { flex: 1; min-width: 0; display: grid; gap: 4px; font-size: var(--fs-small, 12px); line-height: 1.35; text-align: left; color: var(--ink-2); }
.people__qr figcaption strong { font-size: var(--fs-ui, 14px); color: var(--ink); }
.room:not([data-viewer-host="true"]) .people__removeform, .room:not([data-viewer-host="true"]) .people__add { display: none; }
.person-requests__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.person-requests__list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.person-requests__who { flex: 1; min-width: 160px; font-size: var(--fs-ui); }
.person-requests__actions { display: flex; gap: 6px; }
.person-requests__actions form { margin: 0; }
.skeleton { background: var(--line); border-radius: var(--r-2); animation: skeleton-pulse 1.4s ease-in-out infinite; }
.skeleton--crumb { width: 180px; height: 12px; }
.skeleton--head { height: 40px; }
.skeleton--line { height: 36px; }
.skeleton--bubble { height: 44px; width: 60%; }
.skeleton--right { align-self: flex-end; }
.skeleton--box { height: 56px; margin-top: 12px; }
.skeleton-col { display: flex; flex-direction: column; gap: 10px; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.room:not([data-viewer-host="true"]) .room__empty--host .ldu-empty__action { display: none; }

/* One left panel: people, a rule, then the AI sessions; the chat takes most of the screen; the reference sits under it */
.room__people { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); }
.room__people .people, .room__people .members { border: 0; padding: 0; background: transparent; }
.room__people .members__row { flex-wrap: wrap; row-gap: 2px; }
.room__rule { border: 0; border-top: 1px solid var(--line); margin: 0; width: 100%; }
.chat { min-height: 0; }
.reference { border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); }
.reference__summary { cursor: pointer; padding: 10px 14px; font-size: var(--fs-ui); font-weight: 600; }
.reference__body { padding: 0 14px 14px; }
.reference__body .panel { border: 0; padding: 0; }
/* With nothing said yet, the placeholder takes the middle of the chat instead of sitting at the bottom */
.room__transcript:empty { flex: 0 0 0; padding: 0; }
/* agent_sessions/show still draws the old empty state in its chat */
.room__tabpanel { display: flex; flex-direction: column; gap: 12px; }
.room__tabpanel[hidden] { display: none; }
.room__people .library > .panel__title { display: none; }
.room__people .library { border: 0; padding: 0; }
/* The agenda and note boxes are text areas, not one-line inputs: the .input height would squash them to a line */
.agenda textarea.input { height: auto; min-height: 120px; padding-block: 8px; resize: vertical; }
.library__note textarea.input { height: auto; min-height: 110px; padding-block: 8px; resize: vertical; }

/* Header places: My Profile, Expert marketplace, Rooms (the .tabs strip sits in the header's middle cell) */
.hdr__nav { justify-self: center; }
.hdr__nav .tab { text-decoration: none; white-space: nowrap; }
@media (max-width: 720px) { .hdr__nav .tab { padding-inline: 8px; } .brand__name, .brand__product { display: none; } }

/* My Profile (placeholder): the expert profile layout of the marketplace prototype, in our tokens */
.pf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; max-width: 1040px; }
@media (max-width: 900px) { .pf { grid-template-columns: 1fr; } }
.pf__main, .pf__side, .pf__pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pf__pane { margin-top: 12px; }
.pf .pf__hero { padding: 0; align-items: stretch; text-align: left; gap: 0; overflow: hidden; }
.pf__cover { height: 140px; background: var(--ldu-recess); border-bottom: 1px solid var(--line); }
.pf__herobody { padding: 0 20px; }
.pf__herohead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: -48px; position: relative; }
.pf__avatar .avatar { width: 96px; height: 96px; font-size: 30px; border: 3px solid var(--bg-2); box-sizing: content-box; }
.pf__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding-bottom: 4px; }
.pf__name { margin: 12px 0 0; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.pf__headline { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-body); }
.pf__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; color: var(--ink-3); font-size: var(--fs-ui); }
.pf__twin::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--ink-4); }
.pf__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0 0; border-top: 1px solid var(--line); }
.pf__stats div { padding: 12px 16px; border-right: 1px solid var(--line); }
.pf__stats div:last-child { border-right: 0; }
.pf__stats dd { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); }
.pf__stats dt { order: 2; margin-top: 2px; color: var(--ink-3); font-size: var(--fs-meta); }
.pf__stats div { display: flex; flex-direction: column; }
@media (max-width: 600px) { .pf__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf__stats div:nth-child(2) { border-right: 0; } .pf__stats div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.pf__tabbar { margin-top: 4px; }
.pf .pf__sec { padding: 16px 20px; gap: 10px; align-items: stretch; text-align: left; }
.pf__sech { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--ink); }
.pf__sech span { font-family: var(--sans); font-size: var(--fs-meta); font-weight: 500; color: var(--ink-3); }
.pf__empty { margin: 0; color: var(--ink-3); font-size: var(--fs-ui); line-height: 1.5; }
.pf__svcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.pf__svc { display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-2); }
.pf__svc h3 { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--ink); }
.pf__svc p { margin: 0; flex: 1; color: var(--ink-3); font-size: var(--fs-ui); }
.pf__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.pf__price b { color: var(--ink); }
.pf__price span { color: var(--ink-3); font-size: var(--fs-meta); }
.pf__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.pf__row:first-of-type { border-top: 0; padding-top: 0; }
.pf__row div { display: flex; flex-direction: column; min-width: 0; }
.pf__row b { font-size: var(--fs-ui); color: var(--ink); }
.pf__row div span { color: var(--ink-3); font-size: var(--fs-meta); }
.pf__row em { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: var(--fs-meta); white-space: nowrap; }
.pf__mark { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-2); background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: var(--fs-meta); }
.pf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pf__chip { padding: 3px 11px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink-3); font-size: var(--fs-meta); }
.pf__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pf .pf__tile { padding: 14px 16px; gap: 6px; align-items: flex-start; text-align: left; }
.pf__tile b { font-family: var(--display); font-size: 24px; color: var(--ink); }
.pf__tile span { color: var(--ink-3); font-size: var(--fs-ui); }
.pf__rate { margin: 0; color: var(--ink-3); font-size: var(--fs-ui); }
.pf__rate b { margin-right: 4px; font-family: var(--display); font-size: 22px; color: var(--ink); }
.pf .pf__side .btn { align-self: flex-start; }

/* Find a professional (placeholder) */
.mk { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1040px; }
@media (max-width: 720px) { .mk { grid-template-columns: 1fr; } }
.mk__filters { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.mk__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mk__check { display: flex; align-items: center; gap: 6px; font-size: var(--fs-ui); color: var(--ink-2); }
.mk__results { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mk__note { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); }
.mk__expert { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.mk__body { flex: 1; min-width: 0; }
.mk__name { margin: 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.mk__line { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-ui); }
.mk__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--ink); font-size: var(--fs-ui); }
.mk .mk__expert { flex-direction: row; align-items: center; text-align: left; }
.mk__search { display: flex; gap: 8px; }
.mk__search .input { flex: 1; min-width: 0; }
.mk__name a { color: inherit; text-decoration: none; }
.mk__name a:hover { text-decoration: underline; }

/* Onboarding: "I am a ..." and the expert's six steps */
.ob { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 760px; margin: 32px auto 0; }
.ob__ask { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.ob__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; width: 100%; }
.ob__form { display: contents; }
.ob__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 220px; padding: 24px; text-align: left; text-decoration: none; cursor: pointer;
  font: inherit; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-3); transition: border-color 160ms, transform 160ms; }
.ob__card:hover { border-color: var(--accent); }
.ob__card strong { font-family: var(--display); font-size: 20px; color: var(--ink); }
.ob__card > span:not(.ob__icon):not(.tag) { font-size: var(--fs-body); line-height: 1.5; }
.ob__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-2); background: var(--ldu-wash); color: var(--ink-2); }
.ob__skip { margin: 0; font-size: var(--fs-ui); }

.ob2 { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 960px; margin: 0 auto; }
@media (max-width: 800px) { .ob2 { grid-template-columns: 1fr; } }
.ob2__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ob2__step { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; text-align: left; font: inherit; color: var(--ink-3); background: none; border: 1px solid transparent; border-radius: var(--r-2); cursor: pointer; }
.ob2__step:hover { background: var(--bg-2); }
.ob2__step strong { display: block; font-size: var(--fs-ui); color: var(--ink-2); }
.ob2__step small { display: block; font-size: var(--fs-meta); color: var(--ink-3); }
.ob2__n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 999px; border: 1px solid var(--line-2); font-size: var(--fs-meta); font-weight: 700; }
.ob2__step--on { background: var(--bg-2); border-color: var(--line); }
.ob2__step--on strong { color: var(--ink); }
.ob2__step--on .ob2__n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ob2__step--done .ob2__n { background: transparent; border-color: var(--ink); color: var(--ink); }
.ob2 .ob2__panel { padding: 22px 24px; gap: 14px; align-items: stretch; text-align: left; }
.ob2__count { margin: 0; color: var(--ink-3); font-size: var(--fs-meta); }
.ob2__body { display: flex; flex-direction: column; gap: 14px; }
.ob2__body[hidden] { display: none; }
.ob2__body h2 { margin: 0; font-family: var(--display); font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.ob2__lead { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; }
.ob2__fine { margin: 0; color: var(--ink-3); font-size: var(--fs-meta); }
.ob2__box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg); }
.ob2__box--row { flex-direction: row; align-items: center; gap: 12px; }
.ob2__box--row > div { flex: 1; min-width: 0; }
.ob2__box small { display: block; color: var(--ink-3); font-size: var(--fs-meta); }
.ob2__box code { display: block; max-width: 100%; overflow-x: auto; font-family: var(--mono); font-size: var(--fs-ui); color: var(--ink); white-space: nowrap; }
.ob2__field { display: flex; flex-direction: column; gap: 4px; }
.ob2__field > span { color: var(--ink-2); font-size: var(--fs-ui); font-weight: 600; }
.ob2__short { max-width: 200px; }
.ob2__service { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2); }
.ob2__service legend { padding: 0 6px; color: var(--ink); font-weight: 700; }
.ob2__check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.5; }
.ob2__check input { margin-top: 3px; }
.ob2__nav { display: flex; gap: 8px; justify-content: flex-end; padding-top: 6px; border-top: 1px solid var(--line); }
.ob2__nav [hidden] { display: none; }
.ob2__errors { margin: 0; padding: 10px 14px 10px 28px; color: var(--danger); background: var(--danger-soft); border-radius: var(--r-2); font-size: var(--fs-ui); }

/* The Customer / Expert switch on My Profile, and the "no profile yet" card */
.rolesw { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.rolesw__opt { padding: 6px 18px; border-radius: 999px; color: var(--ink-3); font-size: var(--fs-ui); font-weight: 600; text-decoration: none; }
.rolesw__opt:hover { color: var(--ink); }
.rolesw__opt[aria-current="true"] { background: var(--accent); color: var(--accent-ink); }
.pf .pf__none, .main--pad > .pf__none { align-items: center; text-align: center; max-width: 520px; margin: 24px auto 0; padding: 32px 28px; gap: 12px; display: flex; flex-direction: column; }
.pf__none h2 { margin: 0; font-family: var(--display); font-size: 20px; color: var(--ink); }
.pf__none p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.5; }
.pf__noneform { display: contents; }

/* A seat in the narrow left panel: badge, name and state on one line, the voice and owner under the name, Remove under that. */
.room__people .members__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; }
.room__people .members__who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room__people .members__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.room__people .voicechip { white-space: nowrap; }
.room__people .members__removeform { grid-column: 2 / -1; justify-self: start; }

/* The chat fills the height beside the left panel and scrolls inside itself (the composer stays under it); the left panel scrolls on its own.
   On a phone the panel stacks above the chat and the page scrolls, so the chat gets a height of its own. */
.room__people { overflow-y: auto; min-height: 0; }
@media (max-width: 800px) { .room__layout { align-items: start; } .room__people { overflow-y: visible; } .chat { min-height: 70vh; } }

/* My Profile: what is not filled in yet, as slim cards above the profile */
.pf__offers { display: grid; gap: 12px; max-width: 1040px; }
.pf__offer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; }
.pf__offer h2 { margin: 0 0 2px; font-size: var(--fs-body); }
.pf__offer p { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); }

/* ── The landing: sign-in, sign-up and password pages ─────────────────────────────────────────────────────────────
   A brand panel beside the form, no app shell. Tokens only, so light and dark both follow the theme. The faint dot lattice
   behind the panel is the field the dots of the logo sit in. */
/* The dotted tile behind the left panel: the dark theme's dots are --line-2; on the light page that token is too faint to read, so it uses --line-3. */
.landing { --landing-dot: var(--line-2); }
:root[data-theme="light"] .landing { --landing-dot: var(--line-3); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .landing { --landing-dot: var(--line-3); } }
.landing { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 100vh; background: var(--board); color: var(--ink); }
.landing__brand { --landing-bar: 206px; background-attachment: fixed; background-color: var(--bg); background-image: radial-gradient(var(--landing-dot) 1.2px, transparent 1.2px); background-size: 24px 24px; border-right: 1px solid var(--line); }
/* the first screen fills the window; the sections follow it as the page scrolls, and the form on the right stays where it is */
.landing__screen { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 100vh; padding: 44px 48px; }
.landing__logo { align-self: flex-start; }
/* the top bar of the left panel: the logo, and the nav that swaps the panel in place (reactive state, no request) */
.landing__topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.landing__nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.landing__navlink { padding: 6px 2px; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; font-size: var(--fs-ui); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.landing__navlink:hover { color: var(--ink); border-bottom-color: var(--line-3); }
.landing__screen--compact { position: sticky; top: 0; z-index: 3; box-sizing: border-box; height: var(--landing-bar); min-height: 0; justify-content: flex-start; gap: 20px; padding-top: 28px; padding-bottom: 0; background-color: var(--bg); background-image: radial-gradient(var(--landing-dot) 1.2px, transparent 1.2px); background-size: 24px 24px; background-attachment: fixed; }
.landing__panelview { display: flex; flex-direction: column; width: 100%; max-width: 520px; }
.landing__back { align-self: flex-start; margin: 0 0 24px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: var(--fs-meta); color: var(--ink-3); cursor: pointer; }
.landing__back::before { content: "\2190"; margin-right: 6px; }
.landing__back:hover { color: var(--ink); }
.landing__stepper.landing__stepper--static { display: grid; margin-bottom: 28px; }
.landing__panelview .landing__lede { margin-top: 10px; }
.landing__panelview .landing__visual { margin-top: 24px; }
.landing__note { margin: 24px 0 0; font-size: var(--fs-meta); color: var(--ink-3); }
.landing__beats { display: grid; gap: 12px; max-width: 520px; margin: 24px 0 0; padding-left: 20px; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.landing__beats strong { font-weight: 600; color: var(--ink); }
.landing__hero { width: 100%; max-width: 520px; }
/* the messages share one cell, so the block is as tall as the tallest and nothing jumps when one replaces another */
.landing__hero-wrap { width: 100%; }
.landing__banner { display: none; place-items: center; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 24px; border: 1px dashed var(--line-3); border-radius: var(--r-3); font-size: var(--fs-meta); color: var(--ink-4); }
.landing__net { display: block; width: 100%; max-width: clamp(220px, 27vh, 400px); height: auto; margin: 0 auto 14px; overflow: visible; }
.net__blob { fill: var(--line-3); opacity: 0.45; }
.net__edge { stroke: var(--line-2); stroke-width: 1; }
.net__edge--front { stroke: var(--ink-2); stroke-width: 1.2; }
.net__signal { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 14 86; stroke-dashoffset: 14; opacity: 0; animation: net-signal 2.4s ease-in-out infinite; }
.net__dot { fill: var(--line-3); }
.net__dot--front { fill: var(--ink-2); }
.net__disc { fill: var(--accent); }
.net__glyph { fill: var(--accent-ink); }
.net__ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; animation: net-pulse 6s ease-out infinite; }
@keyframes net-signal { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: 1; } 70% { stroke-dashoffset: -100; opacity: 1; } 78%, 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes net-pulse { 0% { opacity: 0; } 3% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .net__signal, .net__ring { animation: none; } .net__signal { opacity: 0; } }
.landing__marquee { width: 100%; margin: 0 0 24px; }
.landing__marquee-label { margin: 0 0 8px; font-size: var(--fs-meta); letter-spacing: 0.04em; color: var(--ink-4); }
.mq__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.mq__track { display: flex; width: max-content; animation: mq-slide 45s linear infinite; }
.mq__viewport:hover .mq__track { animation-play-state: paused; }
.mq__group { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }
.mq__card { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--bg-2); white-space: nowrap; }
.mq__avatar { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ldu-wash); }
.mq__avatar svg { width: 18px; height: 18px; fill: var(--accent); }
.mq__text { display: grid; line-height: 1.25; }
.mq__text strong { font-size: var(--fs-meta); font-weight: 600; color: var(--ink); }
.mq__text small { font-size: 11px; color: var(--ink-3); }
@keyframes mq-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mq__track { animation: none; } .mq__viewport { overflow-x: auto; } }
.landing__slides { display: grid; }
.landing__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 400ms ease, transform 400ms ease, visibility 0s linear 400ms; }
.landing__slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* the timer: one segment per message, the active one fills over the interval, finished ones stay full */
.landing__progress { display: flex; gap: 8px; margin-top: 28px; }
.landing__segment { flex: 1; height: 12px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.landing__fill { position: relative; display: block; width: 100%; height: 3px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.landing__fill::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.landing__segment.is-done .landing__fill::after { transform: scaleX(1); }
.landing__segment.is-active .landing__fill::after { animation: landing-fill var(--landing-interval, 2400ms) linear forwards; }
.landing__hero.is-paused .landing__segment.is-active .landing__fill::after { animation-play-state: paused; }
/* the pause button under the timer: two bars, or a triangle while the messages are stopped (drawn here, in the current text colour) */
.landing__pause { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: 12px; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--bg-2); color: var(--ink-2); cursor: pointer; }
.landing__pause:hover { color: var(--ink); border-color: var(--line-3); }
.landing__pause-icon { width: 10px; height: 12px; background: linear-gradient(to right, currentColor 0 3px, transparent 3px 7px, currentColor 7px 10px); }
.landing__hero.is-stopped .landing__pause-icon { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@keyframes landing-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .landing__pause { display: none; }
  .landing__chevron { animation: none; }
  .landing__story.is-live .landing__panel { transition: none; transform: none; }
  .landing__slide { transition: none; transform: none; }
  .landing__segment.is-active .landing__fill::after { animation: none; transform: scaleX(1); }
}
.landing__title { margin: 0; font-family: var(--display); font-size: clamp(32px, 4vw, 44px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.landing__lede { margin: 16px 0 0; max-width: 44ch; font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.landing__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--fs-meta); color: var(--ink-3); }
.landing__dot { display: inline-flex; align-items: center; gap: 6px; }
.landing__dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ok); }
.landing__foot-end { margin-left: auto; }
/* the quiet nudge to scroll: a word and a chevron that drifts, gone once the page has moved */
.landing__scroll { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 12px; padding: 4px; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: var(--fs-meta); cursor: pointer; transition: opacity 300ms ease; }
.landing__scroll:hover { color: var(--ink); }
.landing__chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); animation: landing-nudge 2s ease-in-out infinite; }
@keyframes landing-nudge { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(4px) rotate(45deg); } }
.landing.is-scrolled .landing__scroll { opacity: 0; pointer-events: none; }
/* placeholder sections under the first screen */
.landing__section { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; padding: 96px 48px; border-top: 1px solid var(--line); }
/* "How it works": the block sticks while the page scrolls through it; the stepper sits on top and fills as you scroll (landing_story_controller.js).
   Until the script runs, and on a phone, the steps are just listed one under another. */
.landing__story { padding: 96px 48px 48px; border-top: 1px solid var(--line); }
.landing__stepper { display: none; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 8px; max-width: 560px; margin-top: 32px; }
.landing__step { align-self: start; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.landing__step-line { position: relative; display: block; height: 3px; margin-bottom: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.landing__step-fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.landing__step-no { display: block; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.landing__step-name { display: block; margin-top: 2px; font-family: var(--display); font-size: var(--fs-ui); font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.landing__step.is-active .landing__step-name { color: var(--accent); }
.landing__step:hover .landing__step-name { color: var(--ink); }
.landing__panels { display: grid; gap: 40px; max-width: 560px; margin-top: 32px; }
.landing__panel-step { margin: 0 0 8px; font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-3); }
.landing__panel-title { margin: 0; font-family: var(--display); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.landing__panel .landing__lede { margin-top: 10px; }
.landing__panel .landing__visual { margin-top: 24px; }
.landing__story.is-live { height: calc(100vh + (var(--steps) - 1) * 70vh); padding: 0; }
.landing__story.is-live .landing__stage { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; padding: 0 48px; }
.landing__story--flush { padding-top: 24px; border-top: 0; }
.landing__story--flush.is-live .landing__stage { top: var(--landing-bar); height: calc(100vh - var(--landing-bar)); justify-content: flex-start; padding-top: 24px; }
.landing__story.is-live .landing__stepper { display: grid; }
.landing__story.is-live .landing__panel-step { display: none; }
.landing__story.is-live .landing__panels { display: grid; gap: 0; }
.landing__story.is-live .landing__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 300ms ease, transform 300ms ease, visibility 0s linear 300ms; }
.landing__story.is-live .landing__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.landing__eyebrow { margin: 0 0 12px; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: 0.08em; color: var(--ink-3); }
.landing__section-title { margin: 0; max-width: 520px; font-family: var(--display); font-size: clamp(26px, 3vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.landing__visual { display: grid; place-items: center; max-width: 520px; height: 220px; margin-top: 32px; border: 1px dashed var(--line-3); border-radius: var(--r-3); font-size: var(--fs-meta); color: var(--ink-4); }
.landing__form { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--bg-2); }
.landing__toolbar { position: absolute; top: 20px; right: 20px; }
/* who the page is for: a big two-way switch at the top of the form column, the same width and left edge as the fields below it */
.landing__card { width: 100%; max-width: 400px; }
.landing__heading { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.landing__hint { margin: 6px 0 20px; font-size: var(--fs-ui); color: var(--ink-3); }
.landing__card .signin__form .btn { width: 100%; margin-top: 10px; }
.landing__links { margin: 14px 0 0; font-size: var(--fs-ui); color: var(--ink-2); }
@media (max-width: 860px) {
  .landing { grid-template-columns: minmax(0, 1fr); }
  /* on a phone the form follows the first screen, and the sections come after it */
  .landing__brand { display: contents; }
  .landing__screen { order: 1; gap: 20px; min-height: 0; padding: 24px; border-bottom: 1px solid var(--line); background-color: var(--bg); background-image: radial-gradient(var(--landing-dot) 1.2px, transparent 1.2px); background-size: 24px 24px; }
  .landing__sections { order: 3; background-color: var(--bg); }
  .landing__section { min-height: 0; padding: 48px 24px; }
  .landing__story, .landing__story.is-live { height: auto; padding: 48px 24px; }
  .landing__story.is-live .landing__stage { position: static; height: auto; padding: 0; }
  .landing__story.is-live .landing__stepper { display: none; }
  .landing__story.is-live .landing__panel-step { display: block; }
  .landing__story.is-live .landing__panels { gap: 40px; }
  .landing__story.is-live .landing__panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
  .landing__title { font-size: 28px; }
  .landing__net { display: none; }
  .landing__banner { display: grid; }
  .landing__foot { display: none; }
  .landing__form { order: 2; position: static; height: auto; align-self: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 24px 20px 48px; }
  .landing__toolbar { position: static; display: flex; justify-content: flex-end; margin: 0 0 16px; }
  .landing__screen--compact { position: static; height: auto; background-attachment: scroll; }
  .landing__card { margin: 0 auto; }
}

.roomstart { gap: var(--s4, 16px); }
.roomstart__tabs { display: flex; gap: var(--s5, 24px); width: 100%; border-bottom: 1px solid var(--line); }
.roomstart__tab { margin-bottom: -1px; padding: var(--s2, 8px) 0 var(--s3, 12px); border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: var(--fs-ui); font-weight: 600; color: var(--ink-3); cursor: pointer; }
.roomstart__tab:hover { color: var(--ink); }
.roomstart__tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.roomstart__panel { flex: 1; display: flex; flex-direction: column; gap: var(--s4, 16px); width: 100%; min-height: 0; }
.roomstart__panel .expert__blurb { margin: 0; }
.roomstart__panel .home__create, .roomstart__panel .home__rejoin { flex: 1; gap: var(--s3, 12px); }
.roomstart__panel .home__create { align-items: stretch; }
.roomstart__panel .home__create .input, .roomstart__panel .home__rejoin .input { height: 44px; }
.roomstart__panel .home__create .btn, .roomstart__panel .home__rejoin .btn { margin-top: auto; align-self: stretch; }
.roomstart__panel .home__rejoin { flex-direction: column; align-items: stretch; }
.roomstart__panel .home__rejoin .input { flex: none; } /* the column would otherwise stretch the code box to fill the card */
.a2acard { position: relative; gap: var(--s3, 12px); }
.a2acard__info { position: absolute; top: var(--s3, 12px); right: var(--s3, 12px); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; }
.a2acard__info:hover, .a2acard__info:focus-visible { color: var(--ink); border-color: var(--accent); }
.a2acard .btn { align-self: flex-start; }
.a2acard__art { width: 100%; height: auto; }
.a2acard__box { fill: none; stroke: var(--ink-3); stroke-width: 1.5; }
.a2acard__lines, .a2acard__pinlines { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-linecap: round; }
.a2acard__ants { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 3 5; }
.a2acard__track { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.a2acard__run { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 12 88; animation: a2a-run 3s linear infinite; }
.a2acard__head { fill: var(--accent); }
.a2acard__ticks { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0.6; }
.a2acard__pin { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.a2acard__cap { fill: var(--ink-3); font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; }
.a2acard__cap--on { fill: var(--accent); }
@keyframes a2a-run { from { stroke-dashoffset: 12; } to { stroke-dashoffset: -88; } }
@media (prefers-reduced-motion: reduce) { .a2acard__run { animation: none; } }
.popup__backdrop { position: absolute; inset: 0; border: 0; background: color-mix(in srgb, var(--bg) 75%, transparent); cursor: default; }
.a2aabout__tldr { margin: 0; }
.a2aabout__list { margin: 0; padding-left: var(--s4, 18px); display: grid; gap: var(--s2, 8px); }

.trust__list { display: grid; gap: var(--s2, 8px); margin: 0 0 var(--s3, 12px); }
.trust__list div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--s3, 12px); }
.trust__list dt { color: var(--muted, inherit); }
.trust__list dd { margin: 0; }
.trust__sub { margin: var(--s3, 12px) 0 var(--s2, 8px); font-size: 14px; }
.trust__offers { margin: 0 0 var(--s3, 12px); padding-left: var(--s4, 16px); display: grid; gap: var(--s2, 8px); }
.trust__price { margin-left: var(--s2, 8px); }

.seatmeter { display: flex; align-items: center; gap: var(--s3, 12px); margin: var(--s2, 8px) 0; }
.seatmeter__faces { display: inline-flex; }
.seatmeter__faces .avatar + .avatar { margin-left: -6px; }
.seatmeter__more { background: var(--bg-2); color: var(--ink); border: 1px solid var(--line); }
.seatmeter__text { display: grid; }

.leads__head { display: flex; align-items: center; gap: var(--s2, 8px); }

.suggest__list { list-style: none; margin: 0 0 var(--s3, 12px); padding: 0; display: grid; gap: var(--s2, 8px); }
.suggest__list li { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s3, 12px); }
.suggest__actions { display: flex; gap: var(--s2, 8px); }

.checklist__list { list-style: none; margin: 0 0 var(--s3, 12px); padding: 0; display: grid; gap: var(--s2, 8px); }
.checklist__list li { display: flex; align-items: center; gap: var(--s2, 8px); flex-wrap: wrap; }
.checklist__mark { display: inline-flex; color: var(--ink-3); }
[data-testid=check-done] .checklist__mark { color: var(--ok, var(--accent)); }
.preview { display: flex; align-items: center; justify-content: space-between; gap: var(--s3, 12px); }
.preview__body { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s3, 12px); }

.trust__samples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2, 8px); }

.modal__subtitle { margin: var(--s2, 8px) 0 0; font-size: var(--fs-ui, 14px); font-weight: 600; }
.btn.people__add { width: auto; max-width: 240px; justify-content: center; margin-top: var(--s2, 8px); }
.joincode { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px var(--s3, 12px); padding: var(--s3, 12px) var(--s4, 16px); margin: var(--s2, 8px) 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-2); }
.joincode__label { grid-column: 1 / -1; font-size: var(--fs-meta, 12px); font-weight: 500; color: var(--ink-2); }
.joincode__code { font-size: 22px; letter-spacing: .02em; }
@media (max-width: 480px) { .joincode__code { font-size: 18px; white-space: nowrap; } }
.joincode__hint { grid-column: 1 / -1; margin: 0; }
.joincode__copy { grid-column: 2; grid-row: 2; }
.invites__note { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-ui); color: var(--ink-2); }
.invites__note--ok { color: var(--ok); }
.invites__label { margin: 12px 0 4px; font-size: var(--fs-meta); font-weight: 500; color: var(--ink-2); }
.filecard__form { display: inline-flex; margin: 0; }
.filecard__form:has([hidden]) { display: none; }
dialog.popup-dialog { padding: 0; border: 0; background: transparent; max-width: calc(100vw - 32px); width: min(480px, calc(100vw - 32px)); }
dialog.popup-dialog::backdrop { background: var(--scrim); }
.addcard--wide { width: 100%; }

/* Plain bubbles: a line with an AI part is one bubble that opens in place. The summary (the plain words and a chevron on the right edge) is the click target; the AI part
   opens inside the same bubble under a thin rule. Hover: the edge firms up and the chevron gets a round darker fill, so it reads as something to open. Plain text only; colours are tokens. */
.room .msg .msg__bubble--toggle { padding: 0; white-space: normal; transition: border-color 150ms ease; }
.msg__summary { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; border-radius: inherit; }
.msg__summary::-webkit-details-marker { display: none; }
.msg__bubble-text { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; }
/* A check's breakdown line (NewWork.breakdown!): its words, then the primary button under them, sized to its label (Milan, 10 Nov). */
.msg .msg__bubble--action { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; white-space: normal; }
.msg__bubble--action .btn { white-space: nowrap; }
.msg__chevron { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; margin: 0 -4px 0 0; border-radius: 999px; color: var(--ink-3);
  transition: transform 200ms var(--ease-out, ease), color 150ms ease, background-color 150ms ease; }
.msg__bubble--toggle:hover { border-color: var(--line-3); }
.msg__summary:hover .msg__chevron { color: var(--ink); background: color-mix(in oklab, var(--bg-2) 88%, black); }  /* a round fill a step darker than the bubble, both themes; no movement */
.msg__bubble--toggle[open] .msg__chevron { transform: rotate(180deg); color: var(--ink-2); }
.msg__summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.msg__ai { margin: 0 14px; padding: 10px 0 12px; border-top: 1px solid var(--line); cursor: auto; white-space: normal; animation: msg-ai-in 200ms var(--ease-out, ease); }
@keyframes msg-ai-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.msg__ai-label { margin: 0 0 6px; font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.02em; color: var(--ink-3); }
.msg__ai-body { font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.55; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.msg__ai-note { margin: 8px 0 0; font-size: var(--fs-meta); color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) { .msg__chevron { transition: none; } .msg__ai { animation: none; } }