/* 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: 760px; }
.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 ─────────────────── */
.home__alert { margin: 0 0 12px; color: var(--warn); font-size: var(--fs-ui); }
.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(--accent); background: var(--accent-soft); }
.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; }
.signin__form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.signin__form .btn { margin-top: 6px; }

/* Voice picker above the invite prompt */
.voicepick { border: 0; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voicepick__legend { float: left; margin-right: 8px; padding: 0; font-size: var(--fs-meta); color: var(--ink-2); }
.voicepick__opt { cursor: pointer; }
.voicepick__input { position: absolute; opacity: 0; pointer-events: none; }
.voicepick__opt .chip { cursor: pointer; }
.voicepick__input:checked + .chip { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.voicepick__input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 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 */
.lobby { margin-top: 24px; max-width: none; }
.lobby__table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); margin-top: 8px; }
.lobby__table th, .lobby__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.lobby__table thead th { font-size: var(--fs-meta); font-weight: 600; color: var(--ink-2); }
.lobby__table tbody th { font-weight: 500; }
.lobby__when { color: var(--ink-2); white-space: nowrap; }
.lobby__actions { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .lobby__table thead { display: none; }
  .lobby__table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .lobby__table th, .lobby__table td { border: 0; padding: 2px 0; }
  .lobby__table tbody th { grid-column: 1 / -1; }
  .lobby__actions { grid-column: 1 / -1; text-align: left; }
}

.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: a photo filling it, or initials */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; overflow: hidden;
  border-radius: 999px; border: 2px solid var(--line); background: var(--accent-soft); color: var(--accent); font-weight: 600; vertical-align: middle; }
.avatar--sm { width: 24px; height: 24px; font-size: 10px; border-width: 1px; }
.avatar--md { width: 36px; height: 36px; font-size: 13px; }
.avatar--lg { width: 96px; height: 96px; font-size: 30px; }
.avatar--chat { width: 32px; height: 32px; font-size: 11px; border-width: 1px; margin-bottom: 2px; }
.avatar--model { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.avatar--model .modelicon { width: 18px; height: 18px; }
.avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-btn { appearance: none; background: none; border: 0; padding: 0; margin-left: 6px; cursor: pointer; border-radius: 999px; display: inline-flex; }
.avatar-btn .avatar { transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.avatar-btn:hover .avatar { border-color: var(--accent); transform: scale(1.04); }
.avatar-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 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; } }
/* a session's voice in the room list: a pill that opens the picker, dashed while it has none */
.voicechip { font: inherit; font-size: var(--fs-meta); padding: 1px 10px; border: 1px solid var(--line-3); border-radius: 999px; background: var(--bg-2); color: var(--ink); cursor: pointer; transition: border-color 160ms cubic-bezier(0.22, 1, 0.36, 1), background-color 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.voicechip--empty { border-style: dashed; color: var(--accent); border-color: var(--accent); }
.voicechip:hover { border-color: var(--accent); background: var(--accent-soft); }
.voicechip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
span.voicechip { cursor: default; }
.modal--voices { width: min(560px, 92vw); }
.voices { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.voices__row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-1); }
.voices__who { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.voices__note { color: var(--ink-3); font-size: var(--fs-meta); }
.voices__state { color: var(--ink-3); font-size: var(--fs-meta); white-space: nowrap; }
.voices__state--mine { color: var(--ok); font-weight: 600; }
.voices__choose { margin: 0; }
/* 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(--accent-soft); }
.members__slot:hover .members__meta { color: var(--accent); }
.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: 1fr 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; }
.addcard { transition: border-color 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1); }
.addcard:hover, .addcard:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
/* 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 { 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; }
/* 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) { .addcard, .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__rhead { margin: 0 0 4px; font-size: var(--fs-meta); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.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; }
.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(--accent-soft); color: var(--accent); border-color: var(--accent); }
.seatdot--free { border-style: dashed; border-color: var(--line-3); color: var(--ink-3); }
.room__closed { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-2); color: var(--warn); font-size: var(--fs-ui); }
.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); }

/* Persona pills in the room's status strip */
.voicepick__input:disabled + .chip { opacity: .5; cursor: not-allowed; }

/* 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(--accent); background: var(--accent-soft); }
.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 { width: 36px; padding: 0; justify-content: center; }
.soundbar__toggle .icon { width: 18px; height: 18px; }
.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__toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.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; }
.modal--invite { width: min(640px, 92vw); }
.modal--invite .connect-cmd { margin: 8px 0; max-height: 280px; overflow: auto; }
.emptystate {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 24px;
  border: 1px dashed var(--line-2); border-radius: var(--r-2); min-height: 200px; justify-content: center;
}
.emptystate__title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.emptystate__text { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); }
.emptystate__steps { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: var(--fs-ui); }

.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 { height: 44px; flex: none; min-width: 96px; padding: 0 22px; font-size: var(--fs-body); }

/* @ 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(--accent-soft); }
.mentions__meta { font-size: var(--fs-meta); color: var(--ink-2); }
.msg__to { color: var(--accent); }

/* The persona as a pill beside a name */
.tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin: 0 1px; border-radius: 999px; font-family: var(--sans); font-size: 11px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); vertical-align: middle; }
.msg__who { display: flex; align-items: center; gap: 6px; }
.tag--owner { background: transparent; color: var(--ink-2); border-color: var(--line-2); }

/* 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, .pagehead { background: var(--board); }
.hdr { background: var(--bg-2); }
.card, .panel, .lobby, .modal, .drawer { background: var(--bg-2); }
.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; }
.members__remove { color: var(--danger); }

.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 li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.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(--accent-soft); }
.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(--accent-soft); }
.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__remove { color: var(--danger); }
.people__add { align-self: flex-start; }
.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; }
.modal--request { width: min(460px, 92vw); }
.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; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line-2); border-top-color: var(--accent); border-radius: 999px; vertical-align: -2px; animation: spin 0.9s linear infinite; }
@keyframes skeleton-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .skeleton, .spinner { animation: none; } }

.emptystate--inline { min-height: 0; padding: 20px; }
.room:not([data-viewer-host="true"]) .emptystate__actions { 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; }
.chat .emptystate--inline { flex: 1 1 auto; align-items: center; text-align: center; border-style: dashed; margin: 8px 0; }
.chat .emptystate--inline .emptystate__text { max-width: 420px; }
.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, Create a room (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(--accent-soft); 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(--accent-soft); border: 1px solid var(--accent); color: var(--accent); 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__legend { padding: 0; margin-bottom: 4px; color: var(--ink-2); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: .06em; }
.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); transform: translateY(-2px); }
.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(--accent-soft); color: var(--accent); }
.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: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.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); text-transform: uppercase; letter-spacing: .06em; }
.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; } }