/* ─── Chat surface · three tiers · one rail ──────────────────────────
   Keep this stylesheet digest fresh when chat shell fallbacks change, so stale
   edge/browser caches cannot leave the page in its critical-only state. */

.chat-shell {
  max-width: 1320px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}

.chat-intro { margin-bottom: 1.5rem; }
.chat-intro__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-brand-primary);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.chat-intro__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.625rem;
  max-width: 60ch;
}
.chat-intro__title em { color: var(--color-brand-primary); font-style: italic; }
.chat-intro__title .accent { color: var(--color-brand-accent); }
.chat-intro__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--color-neutral-slate);
  line-height: 1.5;
  margin: 0;
  max-width: 70ch;
}
.chat-intro__sub b { font-style: normal; font-weight: 600; }
.chat-intro__sub .gen { color: var(--color-neutral-graphite); }
.chat-intro__sub .grp { color: var(--color-brand-gold); }
.chat-intro__sub .dm  { color: var(--color-brand-primary); }

/* ── Frame header (small caps + serif italic blurb) ───────────────── */
.chat-frame-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
}
.chat-frame-header__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-brand-primary);
  text-transform: uppercase;
}
.chat-frame-header__blurb {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-neutral-slate);
}

/* ── Main 3-col grid (left rail / thread / right rail) ────────────── */
.chat-frame {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  min-height: 720px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 3.5rem;
}

/* Trip chat has one shared group conversation. DMs live in the global Chats
   surface, so this frame needs no second channel-navigation rail. */
.chat-frame.chat-frame--group-only {
  grid-template-columns: minmax(0, 1fr) 280px;
}

@media (max-width: 1100px) {
  .chat-frame {
    grid-template-columns: 260px 1fr;
  }
  .chat-frame__rail-right { display: none; }
  .chat-frame.chat-frame--group-only { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .chat-frame {
    grid-template-columns: 1fr;
    min-height: 0;
    position: relative;
  }
  /* Single-pane on phones: the thread stays visible and the channel list opens
     as a drawer. */
  .chat-frame .chat-frame__rail-left {
    display: flex;
    position: fixed;
    top: calc(64px + env(safe-area-inset-top));
    bottom: calc(68px + env(safe-area-inset-bottom));
    left: 0;
    z-index: 70;
    width: min(84vw, 340px);
    max-width: 340px;
    border-right: 1px solid var(--color-neutral-fog);
    box-shadow: 12px 0 28px rgba(21,20,19,0.16);
    transform: translateX(-105%);
    transition: transform 0.18s ease;
  }
  .chat-frame.is-show-channels .chat-frame__rail-left {
    transform: translateX(0);
  }
  .chat-frame .chat-channel-backdrop {
    border: 0;
    padding: 0;
    display: block;
    position: fixed;
    inset: calc(64px + env(safe-area-inset-top)) 0 calc(68px + env(safe-area-inset-bottom));
    z-index: 60;
    background: rgba(21, 20, 19, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  .chat-frame.is-show-channels .chat-channel-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Left rail ────────────────────────────────────────────────────── */
.chat-frame__rail-left {
  background: var(--color-neutral-cream);
  border-right: 1px solid var(--color-neutral-fog);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.chat-channel-backdrop { display: none; }

/* ── Chat as the app's main pane ──────────────────────────────────────
   Scoped to `<main class="chat-page">`. The chat fills the viewport and the
   composer (last flex child of the thread) anchors to the bottom, Slack-style
   — no card chrome, no outer margins, no marketing footer beneath it. Works
   on every breakpoint: in-flow chrome above (header, section nav) takes its
   natural height and the chat flexes to fill the rest; on mobile the existing
   `main` padding-bottom keeps the composer clear of the fixed tab bar. */
.chat-page {
  height: 100dvh;
  display: flex !important; /* beat the inline display:block on <main> */
  flex-direction: column;
  box-sizing: border-box;
  /* main carries a dormant gap that only activates once it becomes a flex
     container — it would otherwise insert ~1rem between every (often zero-
     height) child and push the chat down. Zero it out and drop the top pad. */
  gap: 0 !important;
}
main#main.chat-page { padding-top: 0; }
.chat-page .chat-shell {
  flex: 1;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.chat-page .chat-frame {
  flex: 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.chat-page .chat-frame__rail-left,
.chat-page .chat-frame__rail-right { overflow-y: auto; }

.chat-trip-switcher {
  position: relative;
  display: inline-block;
  max-width: min(66vw, 260px);
  text-align: left;
}
.chat-trip-switcher__summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 12px;
  background: var(--color-neutral-cream);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  color: var(--color-neutral-ink);
  cursor: pointer;
  list-style: none;
  text-decoration: none;
}
.chat-trip-switcher__summary::-webkit-details-marker { display: none; }
.chat-trip-switcher__summary svg {
  flex-shrink: 0;
  color: var(--color-neutral-slate);
  transition: transform 0.16s ease;
}
.chat-trip-switcher[open] .chat-trip-switcher__summary svg {
  transform: rotate(180deg);
}
.chat-trip-switcher__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
.chat-trip-switcher__menu {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 1200;
  width: min(92vw, 340px);
  max-height: min(58vh, 420px);
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 16px;
  background: var(--color-neutral-paper);
  box-shadow: 0 18px 45px rgba(21, 20, 19, 0.22);
}
.chat-trip-switcher__label {
  padding: 4px 8px 8px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-stone);
}
.chat-trip-switcher__item,
.chat-trip-switcher__all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.chat-trip-switcher__item.is-current {
  background: var(--color-brand-primary-light);
  box-shadow: inset 3px 0 0 var(--color-brand-primary);
}
.chat-trip-switcher__avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--color-brand-gold), #8A6B30);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
}
.chat-trip-switcher__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.chat-trip-switcher__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-neutral-ink);
}
.chat-trip-switcher__meta {
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--color-neutral-stone);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.chat-trip-switcher__all {
  justify-content: center;
  margin-top: 6px;
  border-top: 1px solid var(--color-neutral-fog);
  border-radius: 0 0 12px 12px;
  color: var(--color-brand-primary);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* When the global sidebar is present it is the primary app nav (Home / Inbox /
   identity / trips), so the classic marketing top bar is redundant — hide it.
   But the merged App Shell header (.header--shell) IS the trip context row +
   hub tabs, so it must stay: Chat needs the same trip header as every other
   tab, otherwise the channel UI feels detached from the rest of the board. */
.has-global-sidebar.chat-page .header:not(.header--shell) {
  display: none;
}
.has-global-sidebar.chat-page .trip-chrome {
  padding-top: 0.625rem;
}

.chat-trip-header {
  padding: 1rem 0.875rem;
  border-bottom: 1px solid var(--color-neutral-fog);
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.chat-trip-header__icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--color-brand-gold), #8A6B30);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.chat-trip-header__body { flex: 1; min-width: 0; }
.chat-trip-header__name {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-trip-header__meta {
  font-family: var(--font-mono);
  font-size: 0.59rem;
  color: var(--color-neutral-stone);
  letter-spacing: 0.1em;
  margin-top: 1px;
  text-transform: uppercase;
}

.chat-new-message-btn {
  width: 100%;
  border: 1px dashed var(--color-neutral-mist);
  background: #fff;
  color: var(--color-neutral-graphite);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.625rem 0.75rem 0.25rem;
  text-align: left;
}
.chat-new-message-btn:hover { background: var(--color-neutral-paper); }
.chat-new-message-btn__shortcut {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  color: var(--color-neutral-stone);
  letter-spacing: 0.08em;
}

.chat-section {
  padding: 0.375rem 0.5rem;
}
.chat-section__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-neutral-stone);
  padding: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.chat-section__title--gen { color: var(--color-neutral-stone); }
.chat-section__title--grp { color: var(--color-brand-gold); }
.chat-section__title--dm  { color: var(--color-brand-primary); }
.chat-section__title-divider {
  flex: 1;
  height: 1px;
  background: var(--color-neutral-fog);
}
.chat-section__add {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  display: inline-flex;
  color: currentColor;
}
.chat-section__empty {
  display: block;
  padding: 0.5rem 0.625rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--color-neutral-stone);
  text-decoration: none;
  border-radius: 8px;
}
.chat-section__empty:hover {
  background: var(--color-neutral-paper);
  color: var(--color-neutral-slate);
}

.chat-ch {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.chat-ch:hover { background: var(--color-neutral-paper); }
.chat-ch.is-active {
  background: var(--color-neutral-paper);
  box-shadow: inset 3px 0 0 var(--color-brand-primary);
}
.chat-ch__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-mono);
}
.chat-ch__icon--gen  { background: var(--color-neutral-ink); color: #fff; }
.chat-ch__icon--gen-soft { background: var(--color-neutral-linen); color: var(--color-neutral-graphite); }
.chat-ch__icon--grp  { background: var(--color-brand-gold-light); color: var(--color-brand-gold); }
.chat-ch__name {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-neutral-graphite);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-ch.is-unread .chat-ch__name {
  font-weight: 700;
  color: var(--color-neutral-ink);
}
.chat-ch__badge {
  font-family: var(--font-mono);
  font-size: 0.594rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-brand-primary);
  padding: 1px 6px;
  border-radius: 99px;
}
.chat-ch__badge--gold { background: var(--color-brand-gold); }
.chat-ch__time {
  font-family: var(--font-mono);
  font-size: 0.594rem;
  color: var(--color-neutral-stone);
}

/* ── Center thread ────────────────────────────────────────────────── */
.chat-frame__thread {
  display: flex;
  flex-direction: column;
  background: #fff;
  min-width: 0;
  min-height: 0;
}
.chat-landing {
  display: none;
}
.chat-landing__top,
.chat-landing__row,
.chat-landing__actions {
  min-width: 0;
}
.chat-frame.has-chat-landing {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}
.chat-frame.has-chat-landing .chat-frame__thread,
.chat-frame.has-chat-landing .chat-frame__rail-right {
  display: none;
}
.chat-frame.has-chat-landing .chat-landing {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-neutral-paper);
  overflow-y: auto;
}
.chat-landing__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--color-neutral-fog);
}
.chat-landing__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.35rem;
  line-height: 1.1;
  font-weight: 750;
  color: var(--color-neutral-ink);
  letter-spacing: 0;
}
.chat-landing__meta {
  margin-top: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-stone);
}
.chat-landing__compose {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-brand-primary);
  color: #fff;
  text-decoration: none;
}
.chat-landing__actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-bottom: 1px solid var(--color-neutral-fog);
}
.chat-landing__action {
  min-height: 36px;
  padding: 0 0.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-neutral-graphite);
  background: var(--color-neutral-linen);
}
.chat-landing__action span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.75rem;
}
.chat-landing__action--general span { background: var(--color-neutral-ink); }
.chat-landing__action--group span { background: var(--color-brand-gold); }
.chat-landing__list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
}
.chat-landing__row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.5rem;
  color: var(--color-neutral-ink);
  text-decoration: none;
  background: #fff;
  border-bottom: 1px solid var(--color-neutral-fog);
}
.chat-landing__row:hover {
  background: var(--color-neutral-paper);
}
.chat-landing__avatar {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 800;
}
.chat-landing__avatar--general {
  background: var(--color-neutral-ink);
  border-radius: 12px;
  font-size: 1.05rem;
}
.chat-landing__avatar--group {
  background: var(--color-brand-gold);
}
.chat-landing__avatar--direct {
  border-radius: 999px;
}
.chat-landing__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.chat-landing__row-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.625rem;
}
.chat-landing__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 750;
}
.chat-landing__time {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--color-neutral-stone);
  letter-spacing: 0.04em;
}
.chat-landing__sub,
.chat-landing__preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-landing__sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--color-neutral-stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-landing__preview {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--color-neutral-slate);
}
.chat-landing__preview b {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 700;
  color: var(--color-neutral-graphite);
}
.chat-landing__badge {
  min-width: 22px;
  height: 22px;
  padding: 0 0.4rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-brand-accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
}
.chat-thread-header {
  padding: 0.875rem 1.375rem;
  border-bottom: 1px solid var(--color-neutral-fog);
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

/* ── Per-tier theming ─────────────────────────────────────────────────
   Each channel wears its visibility colour — General reads neutral, Group is
   gold, Direct is blue — across the thread header and composer. This is the
   design's signature tier language; it previously only applied on mobile. */
.chat-frame__thread.chat-thread--general .chat-thread-header { background: var(--color-neutral-linen); }
.chat-frame__thread.chat-thread--group   .chat-thread-header { background: var(--color-brand-gold-light); }
.chat-frame__thread.chat-thread--dm      .chat-thread-header { background: var(--color-brand-primary-light); }
/* Composer input picks up the tier accent on its border + send button. */
.chat-thread--group .chat-composer__input-row,
.chat-thread--group .chat-composer__box { border-color: var(--color-brand-gold); }
.chat-thread--dm    .chat-composer__input-row,
.chat-thread--dm    .chat-composer__box { border-color: var(--color-brand-primary); }
.chat-thread--dm .chat-composer .chat-btn-primary { background: var(--color-brand-primary); }
.chat-thread-header__title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.chat-thread-header__body {
  flex: 1;
  min-width: 0;
}
.chat-thread-header__title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.chat-thread-header__sub {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-neutral-stone);
  margin-top: 2px;
}
.chat-thread-header__icon-btn {
  border: 0;
  background: transparent;
  padding: 6px;
  cursor: pointer;
  color: var(--color-neutral-slate);
  display: inline-flex;
}
.chat-thread-mobile-back {
  display: none;
  border: 0;
  background: transparent;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: var(--color-neutral-slate);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .chat-thread-header {
    min-height: 78px;
    padding: 0.875rem 1.25rem;
    gap: 0.75rem;
  }
  .chat-thread-mobile-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 42px !important;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid var(--color-neutral-fog);
    border-radius: 999px;
    background: #fff;
    color: var(--color-neutral-ink);
    box-shadow: 0 1px 2px rgba(21, 20, 19, 0.06);
  }
  .chat-thread-header .chat-ch__icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
  }
  .chat-thread-header__title-row {
    align-items: center;
    gap: 0.5rem;
  }
  .chat-thread-header__title {
    max-width: 11ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.2rem;
  }
  .chat-pill {
    min-height: 28px;
    max-width: 100%;
    padding: 4px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.chat-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chat-pill--gen { background: var(--color-neutral-linen); color: var(--color-neutral-graphite); border: 1px solid var(--color-neutral-fog); }
.chat-pill--grp { background: var(--color-brand-gold-light); color: var(--color-brand-gold); border: 1px solid var(--color-brand-gold); }
.chat-pill--dm  { background: var(--color-brand-primary-light); color: var(--color-brand-primary); border: 1px solid var(--color-brand-primary); }
.chat-pill--inverse { background: var(--color-neutral-ink); color: #fff; border: 0; }
.chat-pill--host { background: var(--color-neutral-linen); color: var(--color-neutral-slate); border: 0; padding: 1px 6px; font-size: 0.54rem; }
.chat-pill--agent { background: var(--color-brand-primary-light); color: var(--color-brand-primary); border: 0; padding: 1px 6px; font-size: 0.54rem; }
.chat-pill--new { background: var(--color-brand-primary); color: #fff; border: 0; padding: 1px 6px; font-size: 0.54rem; }
.chat-pill--pinned { background: var(--color-brand-gold-light); color: var(--color-brand-gold); border: 1px solid var(--color-brand-gold); padding: 1px 6px; font-size: 0.54rem; }

/* Pin / unpin affordance on a message — visible to trip admins only. */
.chat-msg__pin-btn {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--color-neutral-stone);
  font-family: var(--font-mono);
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 99px;
}
.chat-msg__pin-btn:hover {
  background: var(--color-brand-gold-light);
  color: var(--color-brand-gold);
}
.chat-msg__action {
  border: 0;
  background: transparent;
  color: var(--color-neutral-stone);
  font-family: var(--font-mono);
  font-size: 0.594rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 99px;
}
.chat-msg__action:hover {
  background: var(--color-neutral-linen);
  color: var(--color-neutral-ink);
}
.chat-msg__action--danger:hover {
  background: #fee2e2;
  color: #991b1b;
}
.chat-msg__actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.chat-msg__edit { display: inline; }
.chat-msg__edit > summary {
  list-style: none;
}
.chat-msg__edit > summary::-webkit-details-marker {
  display: none;
}
.chat-msg__body {
  position: relative;
}
.chat-msg__edit-form {
  position: absolute;
  z-index: 20;
  top: 1.55rem;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  width: min(32rem, 100%);
  padding: 0.5rem;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(29, 28, 26, 0.14);
}
.chat-msg__edit-form input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 6px;
  padding: 0.5rem 0.625rem;
  font-family: var(--font-sans);
  font-size: 0.84rem;
}
.chat-msg__save-btn {
  border: 0;
  border-radius: 6px;
  background: var(--color-brand-primary);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.52rem 0.7rem;
  cursor: pointer;
}
/* Keep the inline pin affordance tiny on mobile. css-zero ships a global
   mobile rule that forces every <button> to a 38px / 1.05rem touch target
   (!important) — which blows this little "PIN" text out of the meta row. */
@media (max-width: 720px) {
  .chat-msg__pin-btn,
  .chat-msg__action,
  .chat-msg__save-btn {
    font-size: 0.594rem !important;
    padding: 2px 6px !important;
    min-height: 0 !important;
  }
  .chat-msg__pin-btn,
  .chat-msg__action {
    border-radius: 99px !important;
  }
  .chat-msg__edit-form {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 4rem));
  }
}

/* Subtle gold tint behind pinned messages in the thread. */
.chat-msg--pinned {
  background: linear-gradient(90deg, var(--color-brand-gold-light), transparent 80%);
  border-radius: 8px;
  padding: 4px 6px 4px 8px;
  margin-left: -8px;
}

/* Messages */
.chat-thread-body {
  flex: 1;
  padding: 1.125rem 1.375rem;
  overflow-y: auto;
}
.chat-empty-state {
  padding: 2.5rem 1rem;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-neutral-stone);
}
.chat-day {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 1.125rem 0 0.875rem;
}
.chat-day__line {
  height: 1px;
  background: var(--color-neutral-fog);
  flex: 1;
}
.chat-day__label {
  font-family: var(--font-mono);
  font-size: 0.594rem;
  font-weight: 700;
  color: var(--color-neutral-stone);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.chat-msg {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.875rem;
  position: relative;
}
.chat-msg:has(.chat-reaction-picker[open]) {
  z-index: 100;
}
.chat-msg:has(.chat-reaction__attribution[open]) {
  z-index: 10000;
}
.chat-msg__body { flex: 1; min-width: 0; }
.chat-msg__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 2px;
  flex-wrap: wrap;
}
.chat-msg__name {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-neutral-ink);
}
/* Matches the reply/reaction icons' weight (chat-msg__reply-summary) rather
   than standing out as its own badge — a flat icon that only picks up a
   background on hover/focus, not a permanently bordered circle. */
.chat-msg__contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 6px;
  color: var(--color-neutral-stone);
  cursor: pointer;
}
.chat-msg__contact svg { width: 13px; height: 13px; display: block; }
.chat-msg__contact:hover,
.chat-msg__contact:focus-visible {
  background: var(--color-neutral-linen);
  color: var(--color-brand-primary);
}
.chat-msg__contact:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}
.chat-thread-header__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #bfe9ce;
  border-radius: 99px;
  background: #effaf3;
  color: #16783c;
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.chat-thread-header__whatsapp svg { width: 14px; height: 14px; }
.chat-phone-link {
  color: var(--color-brand-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.chat-msg__time {
  font-family: var(--font-mono);
  font-size: 0.594rem;
  color: var(--color-neutral-stone);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.chat-msg__text {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--color-neutral-graphite);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-inline-emoji {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
  vertical-align: -0.06em;
}
.link-preview-card {
  display: flex;
  width: min(100%, 420px);
  min-height: 86px;
  margin-top: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 8px;
  background: var(--color-neutral-paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: inherit;
  text-decoration: none;
}
.link-preview-card__media {
  width: 100px;
  flex: 0 0 100px;
  border-right: 1px solid var(--color-neutral-fog);
  background-position: center;
  background-size: cover;
}
.link-preview-card__media--fallback {
  display: grid;
  place-items: center;
  background: var(--color-neutral-linen);
  color: var(--color-neutral-slate);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 800;
}
.link-preview-card__content {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.75rem;
}
.link-preview-card__domain {
  overflow: hidden;
  color: var(--color-neutral-slate);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.link-preview-card__title {
  overflow: hidden;
  color: var(--color-neutral-ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.link-preview-card__description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-neutral-stone);
  font-size: 0.75rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Matches Live's own green everywhere else in the app (the nearby-rides page,
   the native tab icon/dot) — not the generic gray fallback card. */
/* Smaller than a generic link preview — it's a one-line nudge ("go live"),
   not a page worth a big thumbnail and a two-line description. */
.link-preview-card--live {
  width: min(100%, 300px);
  min-height: 0;
  border-color: #cde2d2;
  background: #f2f8f3;
}
.link-preview-card--live .link-preview-card__media--live {
  display: grid;
  width: 56px;
  flex: 0 0 56px;
  place-items: center;
  border-right-color: #cde2d2;
  background: #dceee1;
  color: #2f8751;
}
.link-preview-card--live .link-preview-card__media--live svg { width: 18px; height: 18px; }
.link-preview-card--live .link-preview-card__content { padding: 0.5rem 0.65rem; gap: 0.15rem; }
.link-preview-card--live .link-preview-card__domain { color: #2f8751; }
.link-preview-card--live .link-preview-card__title { color: #173c23; font-size: 0.8rem; }
.link-preview-card--live .link-preview-card__description {
  color: #1d5a40;
  font-size: 0.7rem;
  -webkit-line-clamp: 1;
}
.chat-msg__reply {
  min-width: 0;
  position: relative;
}
.chat-msg__thread-actions,
.chat-msg__footer-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}
.chat-msg__thread-actions:has(details[open]),
.chat-msg__footer-actions:has(details[open]) {
  position: relative;
  z-index: 50;
}
.chat-msg:hover > .chat-msg__body > .chat-msg__meta > .chat-msg__thread-actions,
.chat-msg:focus-within > .chat-msg__body > .chat-msg__meta > .chat-msg__thread-actions,
.chat-msg:hover > .chat-msg__body > .chat-msg__meta > .chat-msg__footer-actions,
.chat-msg:focus-within > .chat-msg__body > .chat-msg__meta > .chat-msg__footer-actions {
  opacity: 1;
  pointer-events: auto;
}
.chat-msg__thread-actions .chat-reaction-action,
.chat-msg__footer-actions .chat-reaction-action {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

/* ── Hover actions live in the message header ──────────────────────────
   These rows were `display: flex` with `opacity: 0`, which hides the pixels
   but keeps the box: every message carried a permanently blank action row,
   and a thread of three short replies lost ~90px to nothing.

   They now sit inside `.chat-msg__meta`, alongside the Edit/Pin actions that
   were always there — right after the timestamp, so they hug the message no
   matter how short it is or how wide the window. The header row's height is
   set by the name and time, so revealing them costs nothing and shifts
   nothing. Floating them over the body instead meant anchoring to the row's
   right edge, which on a 2000px window threw them most of a screen away from
   the message they belong to. */
.chat-msg {
  position: relative;
  /* A chat column should not run the full width of a very wide window; long
     measures are hard to read. */
  max-width: 56rem;
}
.chat-msg__meta > .chat-msg__thread-actions,
.chat-msg__meta > .chat-msg__footer-actions {
  padding: 1px 4px;
  border: 1px solid var(--color-neutral-fog, #e5e7eb);
  border-radius: 8px;
  background: var(--color-neutral-paper, #fff);
}

/* A reply count is information, not an affordance. A thread that already has
   replies keeps its actions visible without hovering, so you can see the
   thread exists at a glance — and unstyled, so the count reads as a label
   rather than a button. */
.chat-msg__thread-actions--has-replies {
  opacity: 1;
  pointer-events: auto;
}
.chat-msg__meta > .chat-msg__thread-actions--has-replies {
  padding: 0;
  border: 0;
  background: none;
}
.chat-msg__footer-actions {
  justify-content: flex-start;
}
.chat-msg__reply-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 24px;
  height: 24px;
  padding: 0 0.25rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-neutral-slate);
}
.chat-msg__reply-summary:hover,
.chat-msg__reply[open] .chat-msg__reply-summary {
  background: var(--color-neutral-linen);
  color: var(--color-neutral-ink);
}
.chat-msg__reply-summary svg {
  display: block;
}
.chat-msg__reply-count {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1;
}
.chat-msg__reply-summary::-webkit-details-marker {
  display: none;
}
/* The reply form used to open in flow, under the message. Now that the reply
   control sits in the header row, an in-flow form would open *above* the
   message it replies to and stretch the header open. Drop it as a panel
   instead, the way the reaction picker menu beside it already does. */
.chat-msg__meta .chat-msg__reply[open] > .chat-msg__reply-form {
  position: absolute;
  z-index: 40;
  left: 0;
  top: calc(100% + 0.3rem);
  width: min(34rem, calc(100vw - 2rem));
  max-width: none;
  margin-top: 0;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 12px;
  background: var(--color-neutral-paper, #fff);
  box-shadow: 0 6px 20px rgba(21, 20, 19, 0.12);
}
.chat-msg__reply-form {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  max-width: 34rem;
}
.chat-msg__reply-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font: inherit;
}
.chat-msg__reply-form button {
  border: 0;
  border-radius: 999px;
  background: var(--color-neutral-ink);
  color: #fff;
  cursor: pointer;
  font-weight: 850;
  padding: 0.48rem 0.8rem;
}
.chat-msg__thread {
  margin-top: 0.3rem;
}
.chat-msg__replies {
  position: relative;
  z-index: 1;
  background: transparent;
  border-left: 1px solid var(--color-neutral-fog);
  border-radius: 0;
  padding: 0.4rem 0 0.05rem 0.6rem;
}
.chat-msg__thread--empty .chat-msg__replies {
  display: none;
}
.chat-msg__thread--empty .chat-msg__reply {
  margin-top: 0;
}
.chat-msg__thread-composer {
  margin-top: 0.35rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--color-neutral-fog);
}
.chat-msg__thread-composer .chat-msg__reply-form {
  margin-top: 0;
  max-width: 32rem;
}
.chat-msg__thread-composer .chat-msg__reply-form input {
  font-size: 0.8125rem;
  padding: 0.38rem 0.75rem;
  background: var(--color-neutral-white, #fff);
}
.chat-msg__thread-composer .chat-msg__reply-form button {
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  background: var(--color-brand-primary, #4a6fa5);
}
.chat-msg--reply {
  margin-bottom: 0.6rem;
  gap: 0.5rem;
}
.chat-msg--reply .chat-av {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.58rem !important;
}
.chat-msg--reply .chat-msg__name,
.chat-msg--reply .chat-msg__text {
  font-size: 0.8rem;
}
.chat-reactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.375rem;
}
.chat-reaction-form {
  display: inline;
}
.chat-reaction,
.chat-reaction-picker__summary,
.chat-reaction-picker__option {
  border: 1px solid var(--color-neutral-fog);
  background: #fff;
  color: var(--color-neutral-graphite);
  cursor: pointer;
}
.chat-reaction {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: 24px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
}
.chat-reaction:has(.chat-reaction__attribution[open]) {
  z-index: 70;
}
.chat-reaction-form {
  display: inline-flex;
}
.chat-reaction__quick-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 24px;
  min-height: 0 !important;
  padding: 1px 7px 1px 5px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.chat-reaction__attribution {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.chat-reaction__summary {
  display: none;
}
.chat-reaction__summary::-webkit-details-marker {
  display: none;
}
.chat-reaction:hover,
.chat-reaction.is-active {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
}
.chat-reaction.is-active {
  box-shadow: none;
}
.chat-reaction__count {
  min-width: 0.55rem;
  color: var(--color-neutral-slate);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.chat-reaction__emoji {
  display: inline-grid;
  width: auto;
  min-width: 1em;
  height: auto;
  place-items: center;
  font-size: 0.78rem;
  line-height: 1;
}
.chat-reaction__people {
  position: absolute;
  z-index: 60;
  top: calc(100% + 0.3rem);
  left: 0;
  display: flex;
  width: max-content;
  max-width: min(15rem, calc(100vw - 3rem));
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(29, 28, 26, 0.14);
  color: var(--color-neutral-graphite);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.25;
}
.chat-reaction__people strong {
  color: var(--color-neutral-ink);
}
.chat-reaction-action {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-1px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.chat-msg:hover .chat-reaction-action,
.chat-msg:focus-within .chat-reaction-action {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.chat-reaction-picker {
  position: relative;
  display: inline-flex;
  z-index: 12;
}
.chat-reaction-picker__summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  list-style: none;
  color: var(--color-neutral-stone);
}
.chat-reaction-picker__summary svg {
  display: block;
}
.chat-reaction-picker__summary::-webkit-details-marker {
  display: none;
}
.chat-reaction-picker__summary:hover {
  background: var(--color-neutral-linen);
  color: var(--color-neutral-ink);
}
.chat-reaction-picker[open] .chat-reaction-picker__summary {
  border-color: var(--color-neutral-fog);
  background: #fff;
  color: var(--color-neutral-graphite);
}
.chat-reaction-picker__menu {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 0.25rem);
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 0.125rem;
  max-width: calc(100vw - 2rem);
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  background: #fff;
  opacity: 1;
  box-shadow: 0 14px 30px rgba(29, 28, 26, 0.14);
}
.chat-reaction-picker__option {
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  border-color: transparent;
  border-radius: 6px;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
}
.chat-reaction-picker__option:hover {
  background: var(--color-neutral-linen);
}
.chat-msg--new {
  background: var(--color-brand-primary-light);
  border-radius: 10px;
  padding: 0.625rem 0.75rem;
  margin: 0.5rem -0.625rem 0.875rem;
  position: relative;
}
.chat-msg--new::after {
  content: "UNREAD";
  position: absolute;
  right: 10px;
  top: 10px;
  font-family: var(--font-mono);
  font-size: 0.594rem;
  color: var(--color-brand-primary);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.chat-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  flex-shrink: 0;
  border-radius: 99px;
  font-size: 0.7rem;
}
.chat-profile-trigger[data-profile-url] {
  cursor: pointer;
}
.chat-msg__name.chat-profile-trigger[data-profile-url]:hover,
.chat-rail-people__row.chat-profile-trigger[data-profile-url]:hover .chat-rail-people__name {
  color: var(--color-brand-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.chat-av.chat-profile-trigger[data-profile-url]:hover,
.chat-rail-people__row.chat-profile-trigger[data-profile-url]:hover .chat-av {
  box-shadow: 0 0 0 2px var(--color-neutral-paper), 0 0 0 4px var(--color-brand-primary-light);
}
.chat-rail-people__row.chat-profile-trigger[data-profile-url] {
  border-radius: 8px;
  padding: 3px 4px;
  margin: -3px -4px;
}
.chat-rail-people__row.chat-profile-trigger[data-profile-url]:hover {
  background: rgba(255, 255, 255, 0.64);
}

/* Announcement / pinned banner inside thread */
.chat-announce {
  display: flex;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-brand-gold-light);
  border-left: 3px solid var(--color-brand-gold);
  border-radius: 0 8px 8px 0;
  margin-bottom: 0.875rem;
}
.chat-announce__title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-brand-gold);
}
.chat-announce__body {
  font-family: var(--font-serif);
  font-size: 0.84rem;
  font-style: italic;
  color: var(--color-neutral-graphite);
  margin-top: 2px;
  line-height: 1.45;
}

.chat-thread-link {
  border: 0;
  background: transparent;
  padding: 2px 6px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  color: var(--color-brand-gold);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Inline trip-item card */
.chat-item-card {
  background: var(--color-neutral-cream);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  padding: 0.625rem 0.75rem;
  display: flex;
  gap: 0.625rem;
  align-items: center;
  margin-top: 0.375rem;
  flex-wrap: wrap;
}
.chat-item-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-item-card__body { flex: 1; min-width: 120px; }
.chat-item-card__title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
}
.chat-item-card__meta {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-neutral-stone);
  margin-top: 1px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chat-btn-ghost {
  border: 1px solid var(--color-neutral-fog);
  background: #fff;
  color: var(--color-neutral-graphite);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.375rem 0.6875rem;
  border-radius: 99px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.chat-btn-ghost:hover { background: var(--color-neutral-paper); }
.chat-btn-primary {
  border: 0;
  background: var(--color-neutral-ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.chat-btn-secondary {
  border: 1.5px solid var(--color-neutral-fog);
  background: var(--color-neutral-paper);
  color: var(--color-neutral-slate);
  padding: 0.5rem;
  border-radius: 99px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-btn-secondary:hover { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.chat-btn-secondary:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}
/* Composer */
.chat-composer {
  padding: 0.875rem 1.375rem 1.125rem;
  border-top: 1px solid var(--color-neutral-fog);
}
.chat-composer__box {
  background: var(--color-neutral-paper);
  border: 1.5px solid var(--color-neutral-fog);
  border-radius: 14px;
  padding: 0.75rem 0.875rem;
}
.chat-composer__strip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--color-neutral-fog);
  flex-wrap: wrap;
}
.chat-composer__strip-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-neutral-stone);
  text-transform: uppercase;
}
.chat-composer__hint {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-neutral-stone);
  margin-left: auto;
}
.chat-composer__hint a {
  color: var(--color-brand-gold);
  text-decoration: underline;
  text-decoration-color: rgba(74,111,165,0.3);
}
.chat-composer__input-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.chat-composer__input-row input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--color-neutral-ink);
  outline: none;
}
/* Composer sizing at mobile widths lives in the later, active composer block
   below (search "pill-shape with a circular send") — a duplicate
   @media (max-width: 720px) block used to live here with conflicting values,
   including min-width/min-height !important rules that forced the send
   button to 44px no matter what the newer 36px design further down asked
   for, which is what made the input row's effective size unpredictable
   across browsers. .chat-thread-body's padding is likewise superseded later. */
/* ── Right rail ─────────────────────────────────────────────────── */
.chat-frame__rail-right {
  background: var(--color-neutral-cream);
  border-left: 1px solid var(--color-neutral-fog);
  padding: 1.125rem 1rem;
  overflow-y: auto;
}
.chat-rail-section { margin-bottom: 1.125rem; }
.chat-rail-section__heading {
  font-family: var(--font-mono);
  font-size: 0.594rem;
  font-weight: 700;
  color: var(--color-neutral-stone);
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.chat-rail-section__heading a,
.chat-rail-section__heading-link {
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 600;
  color: var(--color-brand-primary);
  text-decoration: none;
  letter-spacing: 0.1em;
}
/* "See all" toggle — button reset so it reads like the old anchor. */
.chat-rail-section__heading-link {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-transform: uppercase;
}
.chat-rail-section__heading-link:hover { text-decoration: underline; }
.chat-rail-people {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.chat-rail-people__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chat-rail-people__name {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-rail-people__contact {
  color: var(--color-brand-primary);
  font-family: var(--font-sans);
  font-size: .6rem;
  font-weight: 750;
}

@media (max-width: 420px) {
  .chat-thread-header__whatsapp { width: 34px; padding: 0; justify-content: center; }
  .chat-thread-header__whatsapp span { display: none; }
  .chat-thread-header__whatsapp svg { width: 17px; height: 17px; }
}
.chat-rail-people__online {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--color-semantic-positive);
  flex-shrink: 0;
}
.chat-rail-pinned {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.375rem;
}
.chat-rail-pinned__head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 3px;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--color-brand-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chat-rail-pinned__body {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-neutral-graphite);
  line-height: 1.4;
}

/* ── Frame 2 · Three tiers side-by-side ─────────────────────────── */
.chat-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.125rem;
  margin-bottom: 3.5rem;
}
@media (max-width: 960px) { .chat-tiers { grid-template-columns: 1fr; } }

.chat-tier {
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 14px;
  overflow: hidden;
}
.chat-tier--grp { border-color: var(--color-brand-gold); }
.chat-tier--dm  { border-color: var(--color-brand-primary); }

.chat-tier__header {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--color-neutral-fog);
}
.chat-tier__header--gen { background: var(--color-neutral-linen); }
.chat-tier__header--grp { background: var(--color-brand-gold-light); }
.chat-tier__header--dm  { background: var(--color-brand-primary-light); }

.chat-tier__top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 4px;
}
.chat-tier__name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chat-tier__sub {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.4;
}
.chat-tier__messages { padding: 0.875rem 1rem; }

.chat-tier__composer {
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--color-neutral-fog);
  background: var(--color-neutral-cream);
}
.chat-tier__composer-box {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.625rem;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 8px;
}
.chat-tier__composer-placeholder {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-neutral-stone);
  flex: 1;
}

.chat-tier__footnote {
  padding: 0.625rem 0.875rem;
  background: var(--color-neutral-paper);
  border-top: 1px dashed var(--color-neutral-fog);
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.4;
}
.chat-tier__footnote b { font-style: normal; font-weight: 600; }

/* DM bubble (right-aligned) */
.chat-msg--self { flex-direction: row-reverse; }
.chat-msg--self .chat-msg__meta { justify-content: flex-end; }
.chat-msg__bubble {
  display: inline-block;
  background: var(--color-brand-primary);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 14px 14px 4px 14px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.45;
  max-width: 80%;
}

/* Stacked avatars in DM */
.chat-av-stack {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.chat-av-stack__a, .chat-av-stack__b {
  position: absolute;
  font-size: 0.4375rem;
}
.chat-av-stack__a { top: 0; left: 0; }
.chat-av-stack__b { bottom: 0; right: 0; }

/* ── Frame 3 · How chats are born ──────────────────────────────── */
.chat-origins {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.375rem;
  margin-bottom: 4rem;
}
@media (max-width: 880px) { .chat-origins { grid-template-columns: 1fr; } }

.chat-origin-card {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
}
.chat-origin-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-brand-gold);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.chat-origin-card__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.chat-origin-card__title em { color: var(--color-brand-gold); font-style: italic; }
.chat-origin-card__footnote {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.5;
  margin-top: 0.875rem;
}
.chat-origin-card__footnote b { font-style: normal; font-weight: 600; color: var(--color-neutral-graphite); }

.chat-reply-options {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.chat-reply-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.chat-reply-option.is-recommended { border: 1.5px solid var(--color-brand-primary); }
.chat-reply-option__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-reply-option__icon--dm  { background: var(--color-brand-primary-light); color: var(--color-brand-primary); }
.chat-reply-option__icon--grp { background: var(--color-brand-gold-light); color: var(--color-brand-gold); }
.chat-reply-option__icon--gen { background: var(--color-neutral-linen); color: var(--color-neutral-graphite); }
.chat-reply-option__body { flex: 1; min-width: 0; }
.chat-reply-option__title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
}
.chat-reply-option__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--color-neutral-slate);
  font-size: 0.6875rem;
}
.chat-reply-option__sub {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.4;
}

.chat-peel-card {
  background: #fff;
  border: 1.5px solid var(--color-brand-gold);
  border-radius: 12px;
  padding: 0.875rem;
  position: relative;
}
.chat-peel-card__pin {
  position: absolute;
  top: -10px;
  left: 14px;
}
.chat-peel-card__label {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}
.chat-peel-card__input {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  background: var(--color-neutral-cream);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--color-neutral-ink);
  outline: none;
}
.chat-peel-card__heading {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-neutral-slate);
  margin: 0.75rem 0 0.375rem;
}
.chat-people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-bottom: 0.75rem;
}
.chat-person-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 3px 9px 3px 3px;
  background: var(--color-brand-gold-light);
  color: var(--color-brand-gold);
  border: 1px solid var(--color-brand-gold);
  border-radius: 99px;
  font-size: 0.72rem;
  font-weight: 500;
}
.chat-person-chip--add {
  background: #fff;
  color: var(--color-neutral-graphite);
  border: 1px dashed var(--color-neutral-mist);
  padding: 3px 9px;
}
.chat-toggle-row {
  padding: 0.625rem 0.75rem;
  background: var(--color-neutral-cream);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.chat-toggle-row__title {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
}
.chat-toggle-row__sub {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-neutral-stone);
  line-height: 1.4;
}
.chat-toggle {
  width: 30px;
  height: 18px;
  background: var(--color-brand-primary);
  border-radius: 99px;
  position: relative;
  flex-shrink: 0;
}
.chat-toggle::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 99px;
}

.chat-create-group-btn {
  width: 100%;
  border: 0;
  background: var(--color-brand-gold);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6875rem;
  border-radius: 99px;
  cursor: pointer;
}

.chat-peel-trigger {
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 12px;
  padding: 0.875rem;
  margin-bottom: 0.875rem;
  position: relative;
}
.chat-peel-actions {
  position: absolute;
  top: 8px;
  right: 10px;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 99px;
  padding: 3px;
  display: flex;
  gap: 2px;
  box-shadow: var(--shadow-md);
}
.chat-peel-actions__btn {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  cursor: pointer;
}
.chat-peel-actions__primary {
  border: 0;
  background: var(--color-brand-primary);
  color: #fff;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ── @-mention chip in rendered messages ───────────────────────── */
.chat-mention {
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.chat-mention--button {
  cursor: pointer;
}

.chat-mention--button:focus {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

/* ── Frame 4 · @-mention autocomplete + prompt dialog ──────────── */
.chat-mention-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.375rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
@media (max-width: 880px) { .chat-mention-grid { grid-template-columns: 1fr; } }

.chat-mention-card {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
}
.chat-mention-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-brand-gold);
  margin-bottom: 0.625rem;
  text-transform: uppercase;
}
.chat-mention-card__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.875rem;
  line-height: 1.25;
}
.chat-mention-card__title em { color: var(--color-brand-gold); font-style: italic; }

/* Mini thread header for context */
.chat-mention-thread-head {
  background: var(--color-brand-gold-light);
  border-radius: 10px 10px 0 0;
  padding: 0.625rem 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chat-mention-thread-head__name {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  flex: 1;
}

/* The composer surface that holds the popover */
.chat-mention-composer {
  background: #fff;
  border: 1px solid var(--color-brand-gold);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 0.875rem;
  position: relative;
}

/* Autocomplete popover */
.chat-mention-popover {
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(21,20,19,0.12);
  padding: 6px;
  margin-bottom: 10px;
  position: relative;
  max-height: 320px;
  overflow-y: auto;
}
.chat-mention-popover[hidden] { display: none; }
.chat-mention-popover__tail {
  position: absolute;
  left: 32px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 1px solid var(--color-neutral-fog);
  border-bottom: 1px solid var(--color-neutral-fog);
  transform: rotate(45deg);
}
.chat-mention-popover__section {
  padding: 6px 10px 4px;
}
.chat-mention-popover__section-title {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chat-mention-popover__section-title--grp { color: var(--color-brand-gold); }
.chat-mention-popover__section-title--trp { color: var(--color-brand-primary); }
.chat-mention-popover__section-title--ch  { color: var(--color-neutral-stone); }
.chat-mention-popover__divider {
  height: 1px;
  background: var(--color-neutral-fog);
  margin: 6px 0;
}
.chat-mention-popover__row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: #fff;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.chat-mention-popover__row:hover { background: var(--color-neutral-cream); }
.chat-mention-popover__row.is-zero {
  background: var(--color-brand-gold-light);
}
.chat-mention-popover__row.is-highlighted {
  background: var(--color-brand-primary-light);
  border: 1.5px solid var(--color-brand-primary);
  padding: 5.5px 8.5px; /* visually nudge to compensate for border */
}
.chat-mention-popover__name {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-mention-popover__sub {
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-neutral-slate);
}
.chat-mention-popover__enter {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  color: var(--color-brand-primary);
  font-weight: 700;
}

/* Static demo input row */
.chat-mention-input {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--color-neutral-cream);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  color: var(--color-neutral-graphite);
}
.chat-mention-input__caret {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--color-brand-primary);
  margin-left: 1px;
  vertical-align: -3px;
  animation: chat-caret 1s steps(2) infinite;
}
@keyframes chat-caret { 50% { opacity: 0; } }

.chat-mention-card__hint {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-neutral-fog);
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.45;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.chat-mention-card__hint b { font-style: normal; font-weight: 600; color: var(--color-neutral-graphite); }

/* Confirm-dialog on the right side of Frame 4 */
.chat-mention-dialog {
  background: #fff;
  border: 1.5px solid var(--color-brand-primary);
  border-radius: 14px;
  padding: 1.125rem;
  box-shadow: 0 8px 32px rgba(74, 111, 165,0.12), 0 1px 3px rgba(21,20,19,0.05);
}
.chat-mention-dialog__head {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px dashed var(--color-neutral-fog);
}
.chat-mention-dialog__name {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
}
.chat-mention-dialog__sub {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-neutral-slate);
}
.chat-mention-dialog__sub b { font-style: normal; font-weight: 600; color: var(--color-brand-gold); }
.chat-mention-dialog__preview {
  background: var(--color-neutral-cream);
  border-radius: 8px;
  padding: 0.5625rem 0.75rem;
  margin-bottom: 0.875rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-neutral-graphite);
  border-left: 3px solid var(--color-neutral-mist);
}
.chat-mention-dialog__options {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.chat-mention-dialog__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-sans);
}
.chat-mention-dialog__option.is-primary {
  border: 1.5px solid var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(74, 111, 165,0.10);
}
.chat-mention-dialog__option-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-mention-dialog__option-icon--primary { background: var(--color-brand-primary); color: #fff; }
.chat-mention-dialog__option-icon--ghost { background: var(--color-neutral-linen); color: var(--color-neutral-graphite); }
.chat-mention-dialog__option-icon--mute  { background: var(--color-neutral-linen); color: var(--color-neutral-stone); }
.chat-mention-dialog__option-title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
}
.chat-mention-dialog__option-sub {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.4;
}
.chat-mention-dialog__option-sub b { font-style: normal; font-weight: 600; }
.chat-mention-dialog__option-key {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-brand-primary);
  letter-spacing: 0.08em;
}
.chat-mention-dialog__footer {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-neutral-fog);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chat-mention-dialog__remember {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--color-neutral-slate);
}
.chat-mention-dialog__remember-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-neutral-mist);
  border-radius: 3px;
  display: inline-block;
}

/* ── Rules strip ──────────────────────────────────────────────── */
.chat-rules-strip {
  margin-top: 1.5rem;
  padding: 1.125rem 1.375rem;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 3rem;
}
@media (max-width: 720px) { .chat-rules-strip { grid-template-columns: 1fr; } }
.chat-rule__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
}
.chat-rule__eyebrow--gen { color: var(--color-semantic-positive); }
.chat-rule__eyebrow--grp { color: var(--color-brand-gold); }
.chat-rule__eyebrow--dm  { color: var(--color-brand-primary); }
.chat-rule__title {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.chat-rule__body {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--color-neutral-slate);
  line-height: 1.45;
}
.chat-rule__body i { font-style: italic; }

.chat-pill--positive {
  background: var(--color-semantic-positive-light);
  color: var(--color-semantic-positive);
  border: 0;
  font-size: 0.54rem;
  padding: 1px 6px;
}
.chat-pill--will-prompt {
  background: #fff;
  color: var(--color-brand-primary);
  border: 1px solid var(--color-brand-primary);
  font-size: 0.54rem;
  padding: 1px 6px;
}
.chat-pill--will-prompt-muted {
  background: var(--color-neutral-linen);
  color: var(--color-neutral-slate);
  border: 0;
  font-size: 0.54rem;
  padding: 1px 6px;
}

/* ── Functional add-and-send backdrop ──────────────────────────── */
.chat-mention-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(21,20,19,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.chat-mention-backdrop[hidden] { display: none; }
.chat-mention-dialog__option[disabled],
.chat-mention-dialog__option.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

/* ─── NEW · unread divider — accent line + tiny label ────────────── */
.chat-new-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.chat-new-divider__line {
  flex: 1;
  height: 1px;
  background: var(--color-brand-accent);
  opacity: 0.4;
}
.chat-new-divider__label {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--color-brand-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* System row — "Anika added Theo · he sees this thread from here ↓"
   Rendered inline when a ChatChannelMembership is created against a
   non-general channel, so a thread's membership history is auditable. */
.chat-system-row {
  text-align: center;
  margin: 0.625rem 0;
  font-family: var(--font-serif);
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--color-neutral-stone);
}
.chat-system-row__pill {
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
  padding: 3px 10px;
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  font-style: normal;
}

/* ─── MOBILE CHAT REFINEMENTS · sub-720px ───────────────────────── */
/* The desktop CSS earlier in this file already stacks the rails on small
   screens; this block reshapes thread chrome, the composer, the autocomplete,
   and the mention prompt into mobile-native patterns: tier-tinted headers,
   ringed composer with a circular send, a bottom-anchored autocomplete, and a
   bottom-sheet add-to-group prompt. */
@media (max-width: 720px) {
  main#main.chat-page {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    width: 100vw !important;
    max-width: 100vw;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important;
  }

  .chat-page .trip-chrome {
    display: none;
  }

  .chat-shell { padding: 0 0.5rem; }
  .chat-page .chat-shell {
    width: 100vw;
    max-width: 100vw;
    padding: 0;
  }

  /* Tighter intro on mobile — the showcase Frames 2-4 are still useful but
     they take a back seat to the actual live thread. */
  .chat-intro { padding: 0.5rem 0.75rem 0; margin-bottom: 1rem; }
  .chat-intro__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .chat-intro__sub { font-size: 0.95rem; }

  /* Live frame fills the viewport-ish so the thread feels native. */
  .chat-frame { box-shadow: none; border: 0; border-radius: 0; margin: 0 -0.5rem 1.5rem; }
  .chat-page .chat-frame {
    height: 100%;
    width: 100%;
    margin: 0 !important;
  }
  .chat-page .chat-frame.has-chat-landing {
    display: block;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .chat-frame.has-chat-landing .chat-frame__rail-left {
    display: none;
  }
  .chat-frame__thread {
    min-height: 0;
  }

  .chat-frame.has-chat-landing .chat-frame__thread {
    display: none;
  }

  .chat-frame.has-chat-landing .chat-channel-backdrop {
    display: none;
  }

  .chat-landing {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: 100vw;
    background: var(--color-neutral-paper);
    overflow-y: auto;
  }

  .chat-landing__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    padding: 1rem 1rem 0.75rem;
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-fog);
  }

  .chat-landing__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.35rem;
    line-height: 1.1;
    font-weight: 750;
    color: var(--color-neutral-ink);
  }

  .chat-landing__meta {
    margin-top: 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-neutral-stone);
  }

  .chat-landing__compose {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-brand-primary);
    color: #fff;
    text-decoration: none;
  }

  .chat-landing__actions {
    display: none;
  }

  .chat-landing__action {
    min-height: 36px;
    padding: 0 0.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-neutral-graphite);
    background: var(--color-neutral-linen);
  }

  .chat-landing__action span {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
  }

  .chat-landing__action--general span { background: var(--color-semantic-positive); }
  .chat-landing__action--group span { background: var(--color-brand-gold); }

  .chat-landing__list {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
  }

  .chat-landing__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--color-neutral-ink);
    text-decoration: none;
    background: #fff;
    border-bottom: 1px solid var(--color-neutral-fog);
  }

  .chat-landing__avatar {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 800;
  }

  .chat-landing__avatar--general {
    background: var(--color-semantic-positive);
    border-radius: 12px;
    font-size: 1.05rem;
  }

  .chat-landing__avatar--group {
    background: var(--color-brand-gold);
  }

  .chat-landing__avatar--direct {
    border-radius: 999px;
  }

  .chat-landing__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
  }

  .chat-landing__row-head {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.625rem;
  }

  .chat-landing__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    font-weight: 750;
  }

  .chat-landing__time {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--color-neutral-stone);
    letter-spacing: 0.04em;
  }

  .chat-landing__sub,
  .chat-landing__preview {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chat-landing__sub {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--color-neutral-stone);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .chat-landing__preview {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    color: var(--color-neutral-slate);
  }

  .chat-landing__preview b {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 700;
    color: var(--color-neutral-graphite);
  }

  .chat-landing__badge {
    min-width: 22px;
    height: 22px;
    padding: 0 0.4rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-brand-accent);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .chat-reaction-action {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .chat-msg__thread-actions,
  .chat-msg__footer-actions {
    opacity: 1;
    pointer-events: auto;
  }

  .chat-reaction-picker__menu {
    right: auto;
    left: 0;
  }

  .chat-reaction__attribution[open]::before {
    content: "";
    position: fixed;
    z-index: 10000;
    inset: 0;
    background: rgba(21, 20, 19, 0.32);
  }

  .chat-reaction__people {
    position: fixed;
    z-index: 10001;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    gap: 0.55rem;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 14px 14px 0 0;
    font-size: 0.9rem;
  }

  .chat-reaction__people::before {
    content: "";
    width: 40px;
    height: 4px;
    margin: -0.65rem auto 0.35rem;
    border-radius: 99px;
    background: var(--color-neutral-fog);
  }

  /* Bigger touch targets on every channel row */
  .chat-ch { padding: 0.625rem 0.75rem; }
  .chat-ch__icon { width: 34px; height: 34px; font-size: 0.875rem; border-radius: 9px; }
  .chat-ch__name { font-size: 0.9375rem; }

  .chat-trip-header { padding: 0.875rem 0.875rem 0.75rem; }
  .chat-trip-header__icon { width: 32px; height: 32px; border-radius: 9px; }

  /* Thread header: tier-tinted backgrounds on mobile so each channel feels
     visually different the moment you open it. */
  .chat-thread-header { padding: 0.5rem 0.75rem; gap: 0.5rem; background: var(--color-neutral-linen); }
  .chat-thread-header__title { font-size: 1rem; line-height: 1; }
  .chat-thread-header__sub { font-size: 0.72rem; }
  .chat-thread-header .chat-ch__icon { width: 28px; height: 28px; font-size: 0.8125rem; border-radius: 7px; }
  .chat-thread-mobile-back {
    padding: 0.3125rem 0.5625rem;
    border: 1px solid var(--color-neutral-fog);
    border-radius: 99px;
    background: #fff;
    color: var(--color-neutral-graphite);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    gap: 0.25rem;
  }
  .chat-thread-mobile-back svg {
    width: 18px;
    height: 18px;
  }
  .chat-thread-header .chat-pill {
    max-width: 54vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 2px 7px;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
  }
  .chat-frame__thread.chat-thread--group   .chat-thread-header { background: var(--color-brand-gold-light); }
  .chat-frame__thread.chat-thread--dm      .chat-thread-header { background: var(--color-brand-primary-light); }

  .chat-page .chat-thread-header {
    min-height: 52px;
    padding: 0.4rem 0.6rem;
    gap: 0.55rem;
  }
  .chat-page .chat-thread-mobile-back {
    min-height: 34px !important;
    padding: 0.35rem 0.55rem !important;
    border-radius: 8px;
    box-shadow: none;
    font-size: 0.65rem;
  }
  .chat-page .chat-thread-header > .chat-ch__icon {
    display: none;
  }
  .chat-page .chat-thread-header__title-row {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }
  .chat-page .chat-thread-header__title {
    max-width: 10rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 750;
  }
  .chat-page .chat-thread-header .chat-pill {
    min-height: 22px;
    padding: 2px 7px;
    font-size: 0.56rem;
  }

  /* Messages — tighter, slightly larger text for thumb-readability */
  .chat-thread-body { padding: 0.625rem 0.875rem 4.5rem; }
  /* Native chat apps read from the bottom up. Keep a short conversation next
     to the composer instead of leaving a large empty block below it; once the
     thread is taller than the viewport the auto margin collapses to zero and
     normal scrolling is preserved. */
  html.is-native .chat-thread-body:not(.chat-thread-body--empty) {
    display: flex;
    flex-direction: column;
  }
  html.is-native .chat-thread-body:not(.chat-thread-body--empty) > :first-child {
    margin-top: auto;
  }
  .chat-day { margin: 0.5rem 0 0.625rem; }
  .chat-thread-body--empty {
    padding-top: 0.75rem;
  }
  .chat-thread-body--empty .chat-day {
    display: none;
  }
  .chat-empty-state {
    padding: 1.25rem 0.75rem;
  }
  .chat-msg {
    gap: 0.4rem;
    margin-bottom: 0.75rem;
  }
  .chat-msg--reply {
    gap: 0.4rem;
    margin-bottom: 0.3rem;
  }
  .chat-msg--reply .chat-msg__meta {
    margin-bottom: 0;
  }
  .chat-msg__name { font-size: 0.9rem; }
  .chat-msg__text {
    font-size: 0.96rem;
    line-height: 1.42;
    color: var(--color-neutral-ink);
  }
  .chat-msg--reply .chat-msg__name,
  .chat-msg--reply .chat-msg__text {
    font-size: 0.88rem;
  }
  .chat-msg .chat-av { width: 27px !important; height: 27px !important; font-size: 0.625rem !important; }
  .chat-msg.chat-msg--reply .chat-av { width: 24px !important; height: 24px !important; font-size: 0.54rem !important; }

  /* Reactions support the message; they should not become the message. Keep
     the pill compact and quiet while retaining enough area to tap. */
  .chat-reactions {
    gap: 0.2rem;
    margin-top: 0.25rem;
  }
  .chat-reaction {
    min-height: 21px;
    border-radius: 8px;
    border-width: 1px;
  }
  .chat-reaction__quick-toggle {
    height: 21px;
    gap: 0.22rem;
    padding: 1px 5px 1px 4px;
  }
  .chat-reaction__emoji {
    font-size: 0.68rem;
  }
  .chat-reaction__count {
    font-size: 0.62rem;
    font-weight: 650;
  }
  .chat-reaction:hover,
  .chat-reaction.is-active {
    border-color: color-mix(in srgb, var(--color-brand-primary) 34%, white);
    background: color-mix(in srgb, var(--color-brand-primary-light) 58%, white);
  }

  /* (NEW divider + system row defined outside this media query — used on all sizes) */

  /* Composer — pill-shape with a circular send. Ring color = tier color. */
  .chat-composer {
    position: sticky;
    bottom: 0;
    padding: 0.625rem 0.75rem 0.875rem;
    background: var(--color-neutral-paper);
    box-shadow: 0 -8px 16px rgba(21,20,19,0.04);
  }
  .chat-composer__box {
    padding: 0;
    background: transparent;
    border: 0;
  }
  .chat-composer__strip {
    margin-bottom: 0.375rem;
    padding-bottom: 0.375rem;
    gap: 0.375rem;
    border-bottom: 0;
  }
  .chat-composer__strip-label { display: none; }
  .chat-composer__hint {
    font-size: 0.6875rem;
    margin-left: 0.375rem;
  }
  .chat-composer__input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1.5px solid var(--color-neutral-fog);
    border-radius: 22px;
    padding: 0.4375rem 0.5rem 0.4375rem 0.875rem;
  }
  /* Tier rings — applied via .chat-thread--{tier} on the container */
  .chat-thread--group .chat-composer__input-row { border-color: var(--color-brand-gold); }
  .chat-thread--dm    .chat-composer__input-row { border-color: var(--color-brand-primary); }

  .chat-composer__input-row input {
    font-size: 0.875rem;
    padding: 0.25rem 0;
  }
  .chat-composer .chat-btn-primary {
    border-radius: 99px;
    width: 36px;
    height: 36px;
    min-height: 36px; /* override css-zero's 38px button min so it's a clean circle */
    padding: 0;
    justify-content: center;
    gap: 0;
    flex-shrink: 0;
  }
  .chat-composer .chat-btn-primary svg { width: 15px; height: 15px; }
  .chat-composer .chat-btn-primary > span,
  .chat-composer .chat-btn-primary { font-size: 0; }
  .chat-thread--dm .chat-composer .chat-btn-primary { background: var(--color-brand-primary); }
  .chat-composer .chat-btn-secondary {
    border-radius: 99px;
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    flex-shrink: 0;
  }
  .chat-composer .chat-btn-secondary svg { width: 15px; height: 15px; }

  html.is-native main#main.chat-page {
    width: 100vw;
    height: 100dvh;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  html.is-native .chat-page .group-subnav-wrap {
    display: none;
  }

  html.is-native .chat-page .chat-shell,
  html.is-native .chat-page .chat-frame {
    width: 100%;
    max-width: none;
  }

  html.is-native .chat-frame .chat-frame__rail-left {
    top: 0;
  }

  html.is-native .chat-frame .chat-channel-backdrop {
    inset: 0 0 calc(68px + env(safe-area-inset-bottom));
  }

  /* Bottom-anchored autocomplete on mobile — anchor to the composer rather
     than floating inline. This matches Screen 3 in the design. */
  .chat-mention-popover {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 28px rgba(21,20,19,0.12);
    border: 0;
    padding: 0.5rem 0 0;
    max-height: 50vh;
    z-index: 60;
  }
  .chat-mention-popover__tail { display: none; }
  .chat-mention-popover__section { padding: 0.5rem 0.875rem 0.25rem; }
  .chat-mention-popover__row { padding: 0.625rem 0.875rem; border-radius: 0; }
  .chat-mention-popover__row.is-highlighted { margin: 0 0.5rem; border-radius: 10px; }

  /* Bottom-sheet add-to-group prompt. The functional dialog goes from a
     centered modal to a bottom-anchored sheet with a grabber. */
  .chat-mention-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .chat-mention-backdrop .chat-mention-dialog {
    width: 100%;
    max-width: 100%;
    border-radius: 22px 22px 0 0;
    padding: 0.625rem 1.125rem 1.375rem;
    box-shadow: 0 -12px 36px rgba(21,20,19,0.18);
    border: 0;
  }
  .chat-mention-backdrop .chat-mention-dialog::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--color-neutral-mist);
    border-radius: 99px;
    margin: 0 auto 0.875rem;
  }
  .chat-mention-dialog__head {
    padding-bottom: 0.875rem;
    margin-bottom: 0.875rem;
  }
  .chat-mention-dialog__option {
    padding: 0.75rem 0.8125rem;
    border-radius: 11px;
    margin-bottom: 0.4375rem;
  }
  .chat-mention-dialog__option-title { font-size: 0.84rem; }
  .chat-mention-dialog__option-key { display: none; }
  .chat-mention-dialog__footer { justify-content: center; }

  /* Hide showcase-only frames on mobile — Frames 2-4 are documentation,
     not a primary mobile use. Surfaced via a "Show how it works" toggle. */
  .chat-tiers,
  .chat-origins,
  .chat-mention-grid {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  .chat-rules-strip { margin-left: 0.25rem; margin-right: 0.25rem; }

  /* Frame headers are smaller on mobile */
  .chat-frame-header { padding: 0 0.75rem; gap: 0.5rem; }
  .chat-frame-header__label { font-size: 0.625rem; }
  .chat-frame-header__blurb { font-size: 0.8125rem; }
}

/* Very small screens — phones at <=380px */
@media (max-width: 380px) {
  .chat-thread-body { padding: 0.75rem 0.75rem 5rem; }
  .chat-msg__text { font-size: 0.92rem; }
  .chat-composer__hint { display: none; }
}

/* ─── Member picker · search-as-you-type ───────────────────────── */
.chat-channel-new {
  max-width: 540px;
  margin: 2rem auto 0;
}
.chat-channel-new__card {
  background: var(--color-neutral-paper);
  border: 1px solid var(--color-neutral-fog);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}
.chat-channel-new__header {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.chat-channel-new__title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.chat-channel-new__cancel {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--color-neutral-slate);
}
.chat-channel-new__form,
.chat-channel-new__body {
  min-height: 0;
}
.chat-channel-new__footer {
  margin-top: 1rem;
}
.chat-channel-new__empty {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-neutral-stone);
  margin: 0.75rem 0 0;
}
.chat-channel-new__copy {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-brand-primary);
  font: inherit;
  font-style: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.member-picker { position: relative; }
.member-picker__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  /* Kept modest deliberately — the usual 0.12-0.14em kicker tracking used
     elsewhere in this file reads fine on longer words, but on this two-letter
     "To" label it visibly splits into "T O". */
  letter-spacing: 0.04em;
  color: var(--color-neutral-slate);
  text-transform: uppercase;
  margin: 0.875rem 0 0.375rem;
}
.member-picker__name-input {
  width: 100%;
  padding: 0.5625rem 0.75rem;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}
.member-picker__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.5rem;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
}
.member-picker__field:focus-within { border-color: var(--color-brand-primary); }
.member-picker__chips { display: contents; }
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.375rem 0.1875rem 0.1875rem;
  background: var(--color-brand-primary-light);
  color: var(--color-brand-primary);
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
}
.member-chip__name { padding-right: 0.25rem; }
.member-chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  color: var(--color-brand-primary);
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 99px;
}
.member-chip__x:hover { background: rgba(74, 111, 165, 0.15); }
.member-picker__input {
  flex: 1;
  min-width: 7rem;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.25rem 0.25rem;
  outline: none;
}

.member-picker__list {
  margin-top: 0.5rem;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding: 0.25rem;
}

.member-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-width: 0;
  padding: 0.4375rem 0.5rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.member-row:hover,
.member-row.is-active { background: var(--color-neutral-cream); }
.member-row .chat-av { flex-shrink: 0; }
.member-row__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  color: var(--color-neutral-ink);
}

.member-picker__empty {
  padding: 0.625rem 0.75rem;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--color-neutral-stone);
}

@media (max-width: 720px) {
  .chat-channel-new {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.75rem 1rem calc(96px + env(safe-area-inset-bottom));
  }

  .chat-channel-new__card {
    max-height: calc(100dvh - 116px - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 18px;
    overflow: hidden;
  }

  .chat-channel-new__header {
    flex-shrink: 0;
    margin-bottom: 0.875rem;
  }

  .chat-channel-new__title {
    font-size: 1.42rem;
  }

  .chat-channel-new__form {
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .chat-channel-new__body {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .chat-channel-new__body .member-picker {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .member-picker__name-input {
    flex-shrink: 0;
    min-height: 42px;
    font-size: 1rem;
  }

  .member-picker__field {
    flex-shrink: 0;
    min-height: 72px;
    max-height: 118px;
    overflow-y: auto;
    padding: 0.5rem;
  }

  .member-picker__input {
    font-size: 1rem;
    min-height: 34px;
  }

  .member-picker__list {
    min-height: 0;
    max-height: none;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .member-row {
    min-height: 42px;
    padding: 0.5rem;
  }

  .member-row__name {
    font-size: 0.95rem;
  }

  .chat-channel-new__footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    margin: 0.875rem -1rem -1rem;
    padding: 0.875rem 1rem 1rem;
    background: linear-gradient(to bottom, rgba(255, 253, 247, 0.82), var(--color-neutral-paper) 34%);
    border-top: 1px solid var(--color-neutral-fog);
  }
}

/* Legacy live rows should match the main thread flow. Older broadcasts used
   `chat-message-row` and a client-side `is-mine` class; keep them left-aligned
   so preloaded and newly-sent messages do not jump to opposite edges. */
.chat-message-row.is-mine {
  flex-direction: row;
}
.chat-message-row.is-mine .chat-message-body {
  align-items: stretch;
}

/* ── Add-to-DM ── the "Just N of you" chip opens a member picker ───────── */
.dm-add { position: relative; display: inline-block; }
.dm-add__summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  user-select: none;
}
.dm-add__summary::-webkit-details-marker { display: none; }
.dm-add__summary svg { opacity: 0.75; }
.dm-add[open] .dm-add__summary { background: var(--color-brand-primary); color: #fff; }
.dm-add__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-neutral-fog);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.dm-add__title {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-stone);
  padding: 6px 8px 8px;
}
.dm-add__notice {
  color: var(--color-neutral-slate);
  font-size: 0.75rem;
  line-height: 1.35;
  padding: 0 8px 8px;
}
.dm-add__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}
.dm-add__row:hover { background: var(--color-neutral-cream); }
.dm-add__av {
  width: 26px; height: 26px;
  font-size: 0.6rem;
  color: #fff;
  flex-shrink: 0;
}
.dm-add__name {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-neutral-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm-add__plus {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand-primary);
  flex-shrink: 0;
}

/* Global new-message picker: the action sits in the header so the on-screen
   keyboard can never bury it beneath a list of everyone you travel with. */
.chat-channel-new__header { justify-content: space-between; }
.chat-channel-new__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  touch-action: manipulation;
}
.chat-btn-primary--compact {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
  border-radius: 99px;
  min-height: 40px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
/* Keep the roster from running past the viewport on a long trip list. */
.chat-channel-new .member-picker__list { max-height: min(320px, 42dvh); }

/* Native: this card's rounded, margined "sheet" look was built to float
   inside a native modal presentation with its own chrome above it. It's
   reached as a plain pushed page instead (see
   Hotwire::PathConfigurationController's /chats/new rule — New Chat has its
   own Cancel/Start, not a second native dismiss control), so the card has
   to fill the screen itself: with only a content-driven height it just
   floats near the top, leaving the rest of the screen blank below it.
   height: 100dvh sizes it directly off the viewport rather than depending
   on height:100% propagating correctly through every ancestor (main#main,
   .chat-channel-new__card, __form, __body) — one broken link in that chain
   silently re-collapses the whole thing back to content height. Deliberately
   NOT position: fixed for this: the "To" field is autofocus, and
   fixed-position elements are a known-flaky combination with the iOS
   on-screen keyboard in WKWebView (the layout can visually settle in one
   place while hit-testing stays anchored to where it was before the
   keyboard appeared) — exactly the kind of thing that would make a
   correctly-drawn Start button stop responding to taps. Normal flow avoids
   that; dvh already sizes it correctly without needing fixed positioning.
   env(safe-area-inset-top) accounts for the native title bar still showing
   above the WebView (see the shared main#main comment in
   turbo_native.html.erb for why that's the full inset, not a second
   addition on top of it). */
html.is-native .chat-channel-new {
  width: auto;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
}
html.is-native .chat-channel-new__card {
  flex: 1;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
html.is-native .chat-channel-new__form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.is-native .chat-channel-new__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
html.is-native .chat-channel-new .member-picker__list {
  flex: 1;
  min-height: 0;
  max-height: none;
}