/*
 * Meet — servers, threads and calls (specs/005-meet-servers-calls, contracts/ui-meet.md).
 * Desktop: server rail | server panel | main | members panel (toggled), inside the shell
 * with its sidebar collapsed. Phones: the rail and panel are one screen and a room is its
 * own full-screen page (FR-006); `.meet--panel` and `.meet--main` pick which.
 */

/* Meet fills the space under the header; only its columns scroll. */
.page-meet .shell {
  height: 100dvh;
}

.page-meet .shell__main {
  display: flex;
  min-height: 0;
  padding: 0 0 56px;
  overflow: hidden;
}

/* The friends button would sit on the user strip and on Send; the rail's Direct
   messages button reaches friends here. */
.page-meet .shell__friends-fab {
  display: none;
}

.meet {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "rail"
    "panel";
  min-width: 0;
  min-height: 0;
}

.meet--main {
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "main";
}

.meet--main .meet-rail,
.meet--main .meet-panel,
.meet--panel .meet-main,
.meet-members {
  display: none;
}

/* ---- Server rail ---- */

.meet-rail {
  grid-area: rail;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  background-color: var(--color-deep-night);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ---- Server panel ---- */

.meet-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  background-color: var(--color-deep-night);
}

/* ---- Main ---- */

.meet-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background-color: var(--color-night);
}

/* ---- Desktop: all columns ---- */

@media (min-width: 640px) {
  .page-meet .shell__main {
    padding-bottom: 0;
  }

  .meet,
  .meet--main,
  .meet--panel {
    grid-template-columns: 72px 240px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "rail panel main";
  }

  .meet--main .meet-rail,
  .meet--main .meet-panel,
  .meet--panel .meet-main {
    display: flex;
  }

  .meet-rail {
    flex-direction: column;
    padding: var(--space-3) 0;
    overflow-x: visible;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--color-border-subtle);
  }

  .meet-panel {
    border-right: 1px solid var(--color-border-subtle);
  }
}

/* Below desktop width the members panel is a full-screen sheet over the page. */
.meet--members-shown .meet-members {
  position: fixed;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: var(--color-deep-night);
}

@media (min-width: 1024px) {
  .meet--members-shown.meet--with-members {
    grid-template-columns: 72px 240px minmax(0, 1fr) 240px;
    grid-template-areas: "rail panel main members";
  }

  .meet--members-shown .meet-members {
    position: static;
    z-index: auto;
    grid-area: members;
    min-height: 0;
    border-left: 1px solid var(--color-border-subtle);
  }

  /* Scoped to beat `.btn`, which loads later. */
  .meet-members .meet-members__close {
    display: none;
  }
}

/* ---- Rail items ---- */

.meet-rail__item {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-foreground);
  text-decoration: none;
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
  transition: border-radius 150ms ease, background-color 120ms ease;
}

.meet-rail__item:hover,
.meet-rail__item[aria-current="page"] {
  text-decoration: none;
  background-color: var(--color-purple);
  border-radius: var(--radius-standard);
}

.meet-rail__item:focus-visible {
  outline: none;
  box-shadow: var(--glow-purple);
}

/* The active pill on the rail's edge (desktop). */
.meet-rail__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  width: 4px;
  height: 32px;
  background-color: var(--color-foreground);
  border-radius: 0 4px 4px 0;
  display: none;
}

.meet-rail__create {
  color: var(--color-green);
}

.meet-rail__create:hover {
  color: var(--color-night);
  background-color: var(--color-green);
}

.meet-rail__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 32px;
  background-color: var(--color-border);
}

.meet-rail__server.is-dragging {
  opacity: 0.5;
}

.server-icon {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: inherit;
}

.server-icon--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-night);
  background-color: var(--color-purple);
}

.server-icon--initials[data-tint="2"] { background-color: var(--color-cyan); }
.server-icon--initials[data-tint="3"] { background-color: var(--color-pink); }
.server-icon--initials[data-tint="4"] { background-color: var(--color-green); }

.server-icon--placeholder {
  color: var(--color-comment);
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
}

.meet-rail__badge:empty {
  display: none;
}

/* ---- Panel ---- */

.meet-panel__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.meet-panel__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The server's name is its menu's summary: the whole row opens it. */
.meet-panel__menu {
  flex: 1;
  min-width: 0;
}

.meet-menu > .meet-panel__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  margin-left: calc(var(--space-2) * -1);
  border-radius: var(--radius-standard);
}

.meet-panel__summary:hover,
.meet-panel__menu[open] > .meet-panel__summary {
  background-color: var(--color-card);
}

.meet-panel__summary:focus-visible {
  outline: 2px solid var(--color-purple);
  outline-offset: 1px;
}

.meet-panel__chevron {
  flex: 0 0 auto;
  transition: transform 120ms ease;
}

.meet-panel__menu[open] .meet-panel__chevron {
  transform: rotate(180deg);
}

.meet-menu > summary {
  list-style: none;
  width: auto;
  min-height: 0;
  padding: var(--space-1);
  cursor: pointer;
}

.meet-menu > summary::-webkit-details-marker {
  display: none;
}

.meet-menu__list {
  position: absolute;
  top: calc(100% - var(--space-2));
  right: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background-color: var(--color-card-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-standard);
  box-shadow: var(--shadow-card);
}

.meet-menu__list a,
.meet-menu__button {
  display: block;
  width: 100%;
  padding: var(--space-2);
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-foreground);
  text-align: left;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-subtle);
  cursor: pointer;
}

.meet-menu__list a:hover,
.meet-menu__button:hover {
  text-decoration: none;
  background-color: var(--color-purple);
}

.meet-panel__sections {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
}

.meet-section__header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-2);
}

.meet-section__name {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  color: var(--color-comment);
  text-transform: uppercase;
}

.meet-section__rooms {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meet-room {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
  color: var(--color-comment);
  text-decoration: none;
  border-radius: var(--radius-subtle);
}

.meet-room:hover {
  color: var(--color-foreground);
  text-decoration: none;
  background-color: var(--color-card);
}

.meet-room[aria-current="page"] {
  color: var(--color-foreground);
  background-color: var(--color-selection);
}

.meet-room__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meet-room__badge:empty {
  display: none;
}

.meet-section__edit {
  display: inline-flex;
  padding: var(--space-1);
  color: var(--color-comment);
  border-radius: var(--radius-subtle);
}

.meet-section__edit:hover,
.meet-section__edit:focus-visible {
  color: var(--color-foreground);
  background-color: var(--color-card);
}

/* The viewer's strip at the panel's foot. */
.meet-panel__me {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-deep-night);
  border-top: 1px solid var(--color-border-subtle);
}

.meet-panel__me-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.meet-panel__me-name {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Room ---- */

.meet-room-header {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.meet-room-header__name {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.meet-room-header__name .icon {
  color: var(--color-comment);
}

.meet-room-header__topic {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: var(--text-md);
  color: var(--color-comment);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meet-room-header .btn:not(.btn--icon) {
  width: auto;
}

/* buttons.css lets every .btn shrink to its content from 640px, icon buttons included;
   the header's stay 44px round targets, so the pressed state reads as a circle. */
.meet-room-header .btn--icon {
  width: 44px;
}

.meet-room-header__tools {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-1);
  margin-left: auto;
}

.meet-room-header__tools .btn[aria-pressed="true"] {
  color: var(--color-foreground);
  background-color: var(--color-selection);
}

.meet-messages__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
}

.meet-messages {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meet-messages__older {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meet-messages__loading,
.meet-messages__empty {
  padding: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-comment);
}

.meet-room-footer {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3) var(--space-3);
}

/* A permanent composer outlives a refresh that took the right to post away; the locked
   note that refresh adds hides it (the server refuses the post either way). */
.meet-room-footer:has(.meet-composer__locked) .message-composer {
  display: none;
}

.meet-composer__locked {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-comment);
  background-color: var(--color-deep-night);
  border-radius: var(--radius-comfortable);
}

/* ---- Empty states and forms ---- */

.meet-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
}

/* In the main column: centred in the space under the header. */
.meet-empty--main {
  flex: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.meet-empty__icon {
  color: var(--color-purple);
}

.meet-empty__title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.meet-empty__text {
  margin: 0;
  color: var(--color-comment);
}

.meet-empty__action {
  width: auto;
}

.meet-main__empty {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.meet-page-form {
  max-width: 560px;
  margin: var(--space-4) auto;
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
}

.meet-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.meet-form__actions .btn {
  width: auto;
}

.meet-form__delete {
  margin-right: auto;
}

.meet-form__uploader {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-standard);
}

.meet-form__uploader-preview img,
.meet-form__uploader-preview .server-icon {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--radius-comfortable);
}

.meet-form__uploader-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.meet-form__uploader-body .btn {
  width: auto;
}

.meet-form__uploader-undo {
  align-self: flex-start;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-comment);
  background: none;
  border: 0;
  cursor: pointer;
}

@media (min-width: 640px) {
  /* Phones go back to the panel; desktop shows it alongside. Scoped to beat `.btn`. */
  .meet-room-header .meet-back {
    display: none;
  }

  /* Pages that aren't in the panel (a room's access) keep their way back. */
  .meet-room-header .meet-back--always {
    display: flex;
  }

  .meet-rail__item[aria-current="page"]::before {
    display: block;
  }

  /* The rail is a column here, so its divider lies flat. */
  .meet-rail__divider {
    width: 32px;
    height: 2px;
    margin: 0 auto;
  }
}

/* ---- Panel extras: an ownership offer, the Leave item ---- */

.meet-panel__notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2);
  padding: var(--space-3);
  font-size: var(--text-md);
  background-color: var(--color-card);
  border: 1px solid var(--color-purple);
  border-radius: var(--radius-standard);
}

.meet-panel__notice p {
  margin: 0;
}

.meet-panel__notice-actions {
  display: flex;
  gap: var(--space-2);
}

.meet-panel__notice-actions .btn {
  width: auto;
}

.meet-menu__list a.meet-menu__danger {
  color: var(--color-red);
}

.meet-menu__list a.meet-menu__danger:hover {
  color: var(--color-foreground);
  background-color: var(--color-red);
}

.meet-form__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  color: var(--color-foreground);
  text-decoration: none;
  background-color: var(--color-deep-night);
  border-radius: var(--radius-standard);
}

.meet-form__link:hover {
  text-decoration: none;
  background-color: var(--color-selection);
}

.meet-form__link-action {
  margin-left: auto;
  color: var(--color-cyan);
}

/* ---- Members panel ---- */

.meet-members__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.meet-members__title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.meet-members__close {
  width: auto;
}

.meet-members__group {
  padding: var(--space-3) var(--space-2) 0;
}

.meet-members__group-name {
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  color: var(--color-comment);
  text-transform: uppercase;
}

.meet-members__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.meet-members__person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-subtle);
}

.meet-members__person:hover {
  text-decoration: none;
  background-color: var(--color-card);
}

.meet-members__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.meet-members__name {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--group-color, var(--color-foreground));
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Settings pages (settings, groups, members, a room's access) ---- */

.meet-settings {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.meet-settings__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4) 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border-subtle);
}

.meet-settings__tab {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-comment);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.meet-settings__tab:hover {
  color: var(--color-foreground);
  text-decoration: none;
}

.meet-settings__tab[aria-current="page"] {
  color: var(--color-foreground);
  border-bottom-color: var(--color-purple);
}

.meet-settings__tab--danger[aria-current="page"] {
  border-bottom-color: var(--color-red);
}

.meet-settings__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.meet-settings__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
}

.meet-settings__section--danger {
  border: 1px solid var(--color-red);
}

.meet-settings__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.meet-settings__text {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-comment);
}

.meet-settings__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.meet-settings__inline-form,
.meet-settings__search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

/* Direct children only: inside a .field (a column) a flex-basis would set the height. */
.meet-settings__inline-form > .input,
.meet-settings__search > .input {
  flex: 1 1 200px;
  width: auto;
}

.meet-settings__inline-form .field {
  flex: 1 1 240px;
}

/* Scoped to beat `.btn` (full width), which loads later. */
.meet-settings .meet-settings__inline-form .btn,
.meet-settings .meet-settings__search .btn,
.meet-settings .meet-settings__button {
  width: auto;
}

.meet-settings .meet-settings__button,
.meet-settings form.button_to {
  align-self: flex-start;
}

.meet-settings__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ---- Groups ---- */

.meet-groups {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meet-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.meet-group .btn,
.meet-member-row .btn,
.meet-access__row .btn {
  width: auto;
}

.meet-group__dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--group-color, var(--color-comment));
  border-radius: var(--radius-circle);
}

.meet-group__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.meet-group__name {
  overflow: hidden;
  font-weight: var(--weight-semibold);
  color: var(--group-color, var(--color-foreground));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meet-group__meta {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

/* Doubled class: shared/forms.css (.field, a column) loads after this file. */
.field.meet-swatches {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.meet-swatches legend {
  width: 100%;
  margin-bottom: var(--space-1);
}

.meet-swatch {
  position: relative;
  cursor: pointer;
}

.meet-swatch__input {
  position: absolute;
  opacity: 0;
}

.meet-swatch__dot {
  display: block;
  width: 28px;
  height: 28px;
  background-color: var(--group-color);
  border: 2px solid transparent;
  border-radius: var(--radius-circle);
}

.meet-swatch__input:checked + .meet-swatch__dot {
  border-color: var(--color-foreground);
  box-shadow: 0 0 0 2px var(--color-night) inset;
}

.meet-swatch__input:focus-visible + .meet-swatch__dot {
  box-shadow: var(--glow-purple);
}

.meet-permissions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.meet-permission {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
  cursor: pointer;
}

.meet-permission--locked {
  cursor: not-allowed;
}

.meet-permission__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.meet-permission__label {
  font-weight: var(--weight-semibold);
}

.meet-permission__explanation {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

/* ---- Members (settings) ---- */

.meet-member-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meet-member-rows turbo-frame {
  display: contents;
}

.meet-member-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.meet-member-row__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.meet-member-row__name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-semibold);
  color: var(--group-color, var(--color-foreground));
}

.meet-member-row__owner {
  display: inline-flex;
  color: var(--color-yellow);
}

.meet-member-row__meta {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.meet-member-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.meet-member-row__groups {
  position: relative;
}

.meet-member-row__groups > summary {
  list-style: none;
}

.meet-member-row__form {
  right: 0;
  left: auto;
  top: calc(100% + var(--space-1));
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 200px;
  padding: var(--space-2);
}

.meet-member-row__group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  font-size: var(--text-md);
  color: var(--group-color, var(--color-foreground));
  cursor: pointer;
}

.meet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meet-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-foreground);
  background-color: var(--color-deep-night);
  border-radius: var(--radius-pill);
}

.meet-chip .meet-group__dot {
  width: 8px;
  height: 8px;
}

/* ---- A room's access ---- */

.meet-access {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meet-access__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.meet-access__group {
  display: inline-flex;
  flex: 1 1 140px;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--group-color, var(--color-foreground));
}

.meet-access__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.meet-access__capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.meet-access__capability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-md);
  cursor: pointer;
}

/* ---- The user strip during a call ---- */

.meet-panel__me-call {
  display: flex;
  gap: var(--space-1);
}

.meet-panel__me-call[hidden] {
  display: none;
}

/* ---- Invites (US4) ---- */

.meet-invite-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 380px;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background-color: var(--color-card);
  border-radius: var(--radius-comfortable);
}

.meet-invite-card .server-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-comfortable);
}

.meet-invite-card__lead,
.meet-invite-card__text,
.meet-invite-card__count {
  margin: 0;
  font-size: var(--text-md);
  color: var(--color-comment);
}

.meet-invite-card__count {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.meet-invite-card__name {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.meet-invite-card form,
.meet-invite-card__join {
  width: 100%;
}

.meet-invite-tabs {
  padding-top: 0;
}

.meet-invite-friends {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
}

.meet-invite-friends turbo-frame {
  display: contents;
}

.meet-invite-friend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2);
  border-radius: var(--radius-standard);
}

.meet-invite-friend:hover {
  background-color: var(--color-card-raised);
}

.meet-invite-friend__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.meet-invite-friend__name {
  overflow: hidden;
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meet-invite-friend .btn {
  width: auto;
}

.meet-invite-friend__done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-md);
  color: var(--color-green);
}

.meet-invite-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: var(--space-3);
}

.meet-invite-form .btn {
  width: auto;
  justify-self: start;
}

/* Settings → Invites, at full width: the fields in a row, Create link at the right. */
@media (min-width: 640px) {
  .meet-settings .meet-invite-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .meet-settings .meet-invite-form .field {
    flex: 0 1 220px;
  }

  .meet-settings .meet-invite-form .btn {
    margin-left: auto;
  }
}

.meet-invite-link__box {
  display: flex;
  gap: var(--space-2);
}

.meet-invite-link__box .input {
  flex: 1;
  min-width: 0;
}

.meet-invite-link__box .btn {
  flex: 0 0 auto;
  width: auto;
}

.meet-invites {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meet-invites__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.meet-invites__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.meet-invites__code {
  font-family: var(--font-mono);
}

.meet-invites__meta {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.meet-invites__row .btn {
  width: auto;
}

/* ---- Unread marks and mention counts (US5) ---- */

.meet-room__badge:not(:empty),
.meet-room__badge[data-unread] {
  display: inline-flex;
}

.meet-room__badge[data-unread]:not([data-mentions="0"]),
.meet-room__badge[data-mentions]:not([data-mentions="0"]) {
  margin-left: auto;
}

/* Unread: a dot, and the room name bold. */
.meet-room__badge[data-unread][data-mentions="0"]::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  background-color: var(--color-foreground);
  border-radius: var(--radius-circle);
}

.meet-room:has(.meet-room__badge[data-unread]) .meet-room__name {
  font-weight: var(--weight-bold);
  color: var(--color-foreground);
}

.meet-badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-night);
  background-color: var(--color-pink);
  border-radius: var(--radius-pill);
}

/* The rail: a dot on the left edge when unread, the pink count at the bottom right. */
.meet-rail__badge[data-unread],
.meet-rail__badge:not([data-mentions="0"]) {
  display: block;
}

.meet-rail__badge[data-unread][data-mentions="0"] {
  position: absolute;
  left: -10px;
  width: 6px;
  height: 8px;
  background-color: var(--color-foreground);
  border-radius: 0 4px 4px 0;
}

.meet-rail__badge:not([data-mentions="0"]) {
  position: absolute;
  right: -4px;
  bottom: -4px;
}

/* ---- A thread with its branch beside it (US5) ---- */

.meet-thread {
  display: flex;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.meet-thread__main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.branch-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background-color: var(--color-night);
}

.branch-panel:empty {
  display: none;
}

/* Phones: the branch takes the whole screen. */
.meet-thread .branch-panel:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 34;
}

@media (min-width: 1024px) {
  .meet-thread .branch-panel:not(:empty) {
    position: static;
    flex: 0 0 400px;
    border-left: 1px solid var(--color-border-subtle);
  }
}

.branch-panel__content,
.branch-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.branch-page turbo-frame {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.branch-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.branch-panel__header .btn {
  width: auto;
}

.branch-panel__icon {
  color: var(--color-cyan);
}

.branch-panel__titles {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.branch-panel__title {
  margin: 0;
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.branch-panel__parent {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.branch-panel__origin {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ---- Calls (specs/005 US7, FR-049): the list in the panel, call records ---- */

/* Scoped: the shared `.btn` (loaded later) makes buttons full width. */
.meet-panel__header .meet-calls__new {
  flex: 0 0 auto;
  width: auto;
}

.meet-calls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
}

.meet-calls__empty,
.call-records__empty {
  margin: 0;
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.meet-call-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2);
  color: var(--color-comment);
  text-decoration: none;
  border-radius: var(--radius-standard);
}

.meet-call-row:hover {
  color: var(--color-foreground);
  background-color: var(--color-card);
}

.meet-call-row[aria-current="page"] {
  color: var(--color-foreground);
  background-color: var(--color-card-raised);
}

.meet-call-row__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.meet-call-row__icon--live {
  color: var(--color-green);
}

.meet-call-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.meet-call-row__name {
  overflow: hidden;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meet-call-row__meta {
  font-size: var(--text-xs);
}

.meet-call-row__live {
  font-weight: var(--weight-semibold);
  color: var(--color-green);
}

.call-records,
.call-record {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  padding: var(--space-4);
}

.call-records__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.call-records__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  color: var(--color-foreground);
  text-decoration: none;
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.call-records__row:hover {
  background-color: var(--color-card-raised);
}

.call-records__when {
  font-weight: var(--weight-semibold);
}

.call-records__meta {
  font-size: var(--text-sm);
  color: var(--color-comment);
}

.call-record__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.call-record__facts div {
  padding: var(--space-3);
  background-color: var(--color-card);
  border-radius: var(--radius-standard);
}

.call-record__facts dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  color: var(--color-comment);
  text-transform: uppercase;
}

.call-record__facts dd {
  margin: var(--space-1) 0 0;
  font-weight: var(--weight-semibold);
}

.call-record__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.call-record__heading {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-badge);
  color: var(--color-comment);
  text-transform: uppercase;
}

.call-record__people {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.call-record__person {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.call-record__name {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.call-record__times {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-comment);
}

/* A record is read only: no replying or reacting from it. */
.call-record__chat .message .message__actions,
.call-record__chat .message:is(:hover, :focus-within) .message__actions {
  display: none;
}

/* ---- Direct messages in Meet (specs/005 US8) ---- */

.meet-dm-row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  color: var(--color-comment);
  text-decoration: none;
  border-radius: var(--radius-standard);
}

/* The other person's nameplate behind the row, art on the right (shared/nameplate.css);
   the picture, name and count stay above it (specs/006 US6, contracts/ui-profile-themes.md §3).
   The slot is always there, empty without a nameplate, for live updates. */
.meet-dm-row__nameplate {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.meet-dm-row > :not(.meet-dm-row__nameplate) {
  position: relative;
  z-index: 1;
}

/* Over art the open row's background is hidden, so it's marked with a ring drawn above. */
.meet-dm-row[aria-current="page"]:has(.meet-dm-row__nameplate .nameplate)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--color-purple);
  pointer-events: none;
}

.meet-dm-row:has(.meet-dm-row__nameplate .nameplate) .meet-dm-row__name {
  color: var(--color-foreground);
  text-shadow: 0 1px 2px var(--color-deep-night);
}

.meet-dm-row:hover {
  color: var(--color-foreground);
  background-color: var(--color-card);
}

.meet-dm-row[aria-current="page"] {
  color: var(--color-foreground);
  background-color: var(--color-card-raised);
}

.meet-dm-row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--text-md);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meet-dm-row--unread .meet-dm-row__name {
  font-weight: var(--weight-bold);
  color: var(--color-foreground);
}

.meet-dm-row__count {
  min-width: 20px;
  padding: 0 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 20px;
  color: var(--color-deep-night);
  text-align: center;
  background-color: var(--color-pink);
  border-radius: var(--radius-pill);
}

/* Room between conversations, in later pages (lazy frames) too. */
.meet-calls.meet-dm-list,
.meet-dm-list turbo-frame {
  gap: var(--space-2);
}

.meet-dm-list turbo-frame {
  display: flex;
  flex-direction: column;
}

.meet-dm-list .meet-dm-row {
  min-height: 48px;
}

/* New message: a friend picker with search (shared/dialog.css sheet). */
.meet-dm-new__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.meet-dm-new__friends {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.meet-dm-new__friends li[hidden] {
  display: none;
}

.meet-dm-new__friend {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: var(--space-2);
  color: var(--color-foreground);
  text-decoration: none;
  border-radius: var(--radius-standard);
}

.meet-dm-new__friend:hover,
.meet-dm-new__friend:focus-visible {
  background-color: var(--color-card-raised);
  text-decoration: none;
}

.meet-dm-new__name {
  overflow: hidden;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name opens the profile drawer too, like the picture. */
.meet-dm-header__name {
  color: inherit;
  text-decoration: none;
}

.meet-dm-header__name:hover {
  text-decoration: underline;
}

.meet-room-header .meet-dm-header__avatar {
  display: inline-flex;
  flex: 0 0 auto;
}

.conversation--meet {
  flex: 1;
  min-height: 0;
}

.meet-dm-welcome {
  border-bottom: 1px solid var(--color-border-subtle);
}

/* ---- A thread or branch in its own window (layouts/popout) ---- */

.page-popout {
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  color: var(--color-foreground);
  background-color: var(--color-night);
}

.popout {
  display: flex;
  height: 100dvh;
  min-height: 0;
}

/* The window is narrow: an opened branch covers the thread, with its own close. */
.popout .meet-thread .branch-panel:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 34;
}

@media (min-width: 900px) {
  .popout .meet-thread .branch-panel:not(:empty) {
    position: static;
    flex: 0 0 400px;
    border-left: 1px solid var(--color-border-subtle);
  }
}