@layer components {
  .group-chat {
    display: flex;
    flex-direction: column;
    /* Fill the available viewport minus top nav, the Chat/Members primary-
       tabs strip (~3.625rem), and bottom nav inset. --top-nav-inset is 4rem
       on web, 0 in the native shell — without this the chat left dead space
       above the bottom nav on native. */
    height: calc(100dvh - var(--top-nav-inset) - 3.625rem - var(--bottom-nav-inset));
    margin-inline: calc(-1 * var(--inline-space-l));
    position: relative;
    background: var(--color-canvas);
  }

  .group-chat--ride {
    height: auto;
    max-height: 28rem;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;

    & .group-chat__messages { min-height: 12rem; }
  }

  .group-chat__empty {
    margin: auto;
    padding: var(--block-space-l) var(--inline-space);
    text-align: center;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  .group-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--block-space) var(--inline-space);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  .group-chat__loading {
    text-align: center;
    padding: var(--block-space-s);
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }

  .group-chat__typing {
    padding: 2px var(--inline-space);
    font-size: 0.75rem;
    color: oklch(var(--lch-laser));
    font-style: italic;
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  .group-chat__compose {
    position: relative;
    padding: var(--block-space-s) var(--inline-space);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  .group-chat__form {
    display: flex;
    gap: var(--inline-space-s);
    align-items: center;
  }

  .group-chat__input {
    flex: 1;
    padding: var(--block-space-s) var(--inline-space);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-canvas);
    color: var(--color-ink);
    font: inherit;

    &:focus {
      outline: 2px solid oklch(var(--lch-flare));
      outline-offset: -1px;
    }
  }

  .group-chat__send {
    flex-shrink: 0;

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  /* --- Day separator (sticky pill between days) --- */

  .message-day-sep {
    position: sticky;
    top: 0;
    z-index: 3;
    align-self: center;
    width: max-content;
    margin: 0.5rem auto;
    pointer-events: none;
  }

  .message-day-sep__pill {
    display: inline-block;
    padding: 4px 0.875rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px oklch(0% 0 0 / 25%);
    pointer-events: auto;
  }

  /* Festival days (Fri / Sat / Sun) glow Golden — stage-ready vibe. */
  .message-day-sep[data-festival="true"] .message-day-sep__pill {
    background: color-mix(in oklch, var(--color-surface) 70%, oklch(var(--lch-golden)));
    border-color: color-mix(in oklch, var(--color-border) 50%, oklch(var(--lch-golden)));
    color: oklch(var(--lch-golden));
  }

  /* --- Message bubble (W1 / WhatsApp-style) --- */

  .message {
    display: flex;
    gap: var(--inline-space-s);
    max-width: 85%;
    position: relative;
    align-items: flex-start;
  }

  .message--mine {
    align-self: flex-end;
    flex-direction: row-reverse;

    & .message__avatar { display: none; }
  }

  .message--theirs { align-self: flex-start; }

  /* Tighter spacing between consecutive bubbles in a streak */
  .message[data-streak-first="false"] { margin-block-start: -4px; }

  .message__avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    align-self: flex-start;
  }

  .message[data-streak-first="false"] .message__avatar {
    visibility: hidden;
  }

  .message__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
  }

  .message--mine .message__body { align-items: flex-end; }

  /* Bubble — grid with text + meta */
  .bub {
    position: relative;
    padding: 0.4375rem 0.625rem 0.3125rem 0.75rem;
    background: var(--color-surface);
    color: var(--color-ink);
    line-height: 1.4;
    word-break: break-word;
    border-radius: var(--radius-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.625rem;
    box-shadow: 0 1px 0 oklch(0% 0 0 / 25%);
    max-width: 100%;
  }

  .message--mine .bub {
    background: oklch(40% 0.09 35);
    color: var(--color-ink);
  }

  /* Tail flag on first-of-streak only — top-leading corner squared with a small triangle */
  .message[data-streak-first="true"].message--theirs .bub {
    border-top-left-radius: 0;
  }
  .message[data-streak-first="true"].message--theirs .bub::before {
    content: "";
    position: absolute;
    top: 0;
    left: -6px;
    width: 8px;
    height: 11px;
    background: var(--color-surface);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }
  .message[data-streak-first="true"].message--mine .bub {
    border-top-right-radius: 0;
  }
  .message[data-streak-first="true"].message--mine .bub::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 8px;
    height: 11px;
    background: oklch(40% 0.09 35);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .bub__author {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    font-weight: 700;
    color: oklch(var(--lch-uv));
    margin-block-end: 1px;
  }

  .bub__content {
    grid-column: 1;
    min-width: 0;
  }

  .bub__text {
    display: block;
  }

  .bub__meta {
    grid-column: 2;
    align-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.25ch;
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    line-height: 1;
    padding-block-end: 2px;
    white-space: nowrap;
  }

  .message--mine .bub__meta {
    /* ink-muted on the warm mine bubble drops to 3.4:1 — brighten with the
       same warm hue family to clear WCAG AA for small text. */
    color: oklch(82% 0.04 35);
  }

  .bub__edited {
    font-style: italic;
    margin-inline-end: 0.25ch;
  }

  /* --- @-mention pill --- */

  .bub__mention {
    display: inline;
    padding: 0 0.25ch;
    border-radius: 4px;
    color: oklch(var(--lch-uv));
    background: color-mix(in oklch, oklch(var(--lch-uv)) 18%, transparent);
    font-weight: 600;
  }

  .message--mine .bub__mention {
    color: oklch(var(--lch-laser));
    background: color-mix(in oklch, oklch(var(--lch-laser)) 22%, transparent);
  }

  /* --- Mention typeahead dropdown --- */

  .mention-typeahead {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: var(--inline-space);
    inset-inline-end: var(--inline-space);
    margin: 0 0 var(--block-space-s) 0;
    padding: 4px;
    list-style: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 -4px 16px oklch(0% 0 0 / 35%);
    max-height: 12rem;
    overflow-y: auto;
    z-index: 5;

    &[hidden] {
      display: none;
    }
  }

  .mention-typeahead__item {
    display: flex;
    align-items: center;
    min-height: var(--touch-min);
    padding: 0 var(--inline-space);
    border-radius: 4px;
    color: var(--color-ink);
    font-size: 0.9375rem;
    cursor: pointer;

    &.is-active,
    &:hover {
      background: color-mix(in oklch, var(--color-surface) 75%, oklch(var(--lch-uv)));
      color: oklch(var(--lch-uv));
    }
  }

  /* --- Inline edit form --- */

  .message--editing {
    align-self: stretch;
    max-width: 100%;
    scroll-margin-block-end: 6rem;
  }

  .bub--editing {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-s);
    padding: var(--block-space-s);
    background: var(--color-surface);
    border: 1px solid color-mix(in oklch, var(--color-border) 60%, oklch(var(--lch-laser)));
    border-radius: var(--radius);
    box-shadow: 0 2px 12px oklch(0% 0 0 / 30%);
  }

  .bub__edit-input {
    width: 100%;
    min-height: 2rem;
    max-height: 15rem;
    padding: var(--block-space-s) 0;
    border: none;
    background: none;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    resize: none;

    &:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px oklch(var(--lch-laser));
      border-radius: var(--radius);
    }
  }

  .bub__edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--inline-space-s);
  }

  .bub__edit-cancel,
  .bub__edit-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-min);
    padding: 0 var(--inline-space);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }

  .bub__edit-cancel {
    border: 1px solid var(--color-border);
    background: var(--color-canvas);
    color: var(--color-ink);

    &:hover {
      background: color-mix(in oklch, var(--color-canvas) 80%, var(--color-ink));
    }
  }

  .bub__edit-save {
    border: none;
    background: oklch(var(--lch-laser));
    color: oklch(var(--lch-laser-ink, 15% 0 0));

    &:hover {
      filter: brightness(1.1);
    }
  }

  /* Deleted message text */
  .message__content--deleted {
    font-style: italic;
    color: var(--color-ink-muted);
  }

  /* Read indicator */
  .message__status-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  .message__status {
    width: 0.75rem;
    height: 0.75rem;
    color: oklch(var(--lch-laser));
  }

  .message__status--read {
    width: 1.125rem;
    height: 0.75rem;
    color: oklch(var(--lch-laser));
  }

  .message--mine .message__status,
  .message--mine .message__status--read {
    color: oklch(var(--lch-laser));
  }

  /* Hide read indicator on theirs (we never see their read status) */
  .message--theirs .message__status-icon { display: none; }

  /* --- Reply quote --- */

  .message__quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--block-space-s) var(--inline-space);
    border-inline-start: 3px solid oklch(var(--lch-uv));
    border-radius: var(--radius-sm);
    background: color-mix(in oklch, var(--color-surface) 90%, var(--color-ink));
    font-size: 0.8125rem;
    text-align: start;
    cursor: pointer;
    border-block: none;
    border-inline-end: none;

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-uv));
      outline-offset: 2px;
    }
  }

  .message--mine .message__quote {
    background: oklch(28% 0.07 35);
  }

  .message__quote-author {
    font-weight: 600;
    color: oklch(var(--lch-uv));
  }

  .message__quote-text {
    color: var(--color-ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* --- More-actions button (desktop hover-reveal) --- */

  .message__more-btn {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;

    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }

    &:hover,
    &:focus-visible {
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-surface) 70%, var(--color-ink));
    }
  }

  .message:hover .message__more-btn,
  .message__more-btn:focus-visible,
  .message:has(.message__actions-menu:popover-open) .message__more-btn {
    opacity: 1;
  }

  /* On touch, sighted users invoke the menu via long-press; the more-btn is
     visually collapsed but stays in the focus order so screen-reader users
     can Tab to it and reveal it via :focus-visible. */
  @media (hover: none) {
    .message__more-btn:not(:focus-visible) {
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }
  }

  /* --- Reactions (overlap chip on bubble bottom corner) --- */

  .message__reactions {
    position: absolute;
    bottom: -0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    z-index: 1;
    margin: 0;
    padding: 0;

    &:empty { display: none; }
  }

  .message--theirs .message__reactions { left: 0.625rem; }
  .message--mine .message__reactions { right: 0.625rem; }

  .message__reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.25ch;
    padding: 1px 0.45ch;
    border: 2px solid var(--color-canvas);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1.3;
  }

  .message__reaction--active {
    background: color-mix(in oklch, var(--color-surface) 75%, oklch(var(--lch-uv)));
  }

  .message__reaction-emoji {
    font-size: 0.875rem;
  }

  .message__reaction-count {
    color: var(--color-ink-muted);
    font-size: 0.6875rem;
  }

  .message--mine .message__reaction-count {
    color: oklch(82% 0.04 35);
  }

  /* Bottom margin on messages that have reactions, to clear the overlap */
  .message:has(.message__reactions:not(:empty)) {
    margin-block-end: 0.5rem;
  }

  /* --- Unified actions menu (long-press / right-click / ⋮) ---
         Top: 6-emoji reaction bar (Tapback). Bottom: Reply / Delete. --- */

  .message__actions-menu[popover] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 14rem;
    padding: 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 6px 20px oklch(0% 0 0 / 35%);
    margin: 0;
    inset: auto;
    opacity: 1;
    scale: 1;
    transition: opacity 0.15s, scale 0.15s;
    transform-origin: top center;

    @starting-style {
      opacity: 0;
      scale: 0.94;
    }

    &:not(:popover-open) {
      display: none;
    }
  }

  .message__actions-menu__reactions {
    display: flex;
    gap: 2px;
    justify-content: space-between;
    padding: 2px;
  }

  .message__actions-menu__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-block-start: 1px solid var(--color-border);
    padding-block-start: 6px;
  }

  .message__reaction-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    font-size: 1.375rem;
    cursor: pointer;

    &:hover,
    &:focus-visible {
      background: color-mix(in oklch, var(--color-surface) 80%, var(--color-ink));
    }
  }

  .message__actions-menu-item {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-s);
    width: 100%;
    min-height: var(--touch-min);
    padding: 0 var(--inline-space);
    border: none;
    border-radius: var(--radius);
    background: none;
    color: var(--color-ink);
    font: inherit;
    font-size: 0.875rem;
    text-align: start;
    cursor: pointer;

    & svg {
      width: 1rem;
      height: 1rem;
      flex-shrink: 0;
      color: var(--color-ink-muted);
    }

    &:hover,
    &:focus-visible {
      background: color-mix(in oklch, var(--color-surface) 80%, var(--color-ink));
    }
  }

  .message__actions-menu-item--danger {
    color: oklch(var(--lch-flare));

    & svg {
      color: oklch(var(--lch-flare));
    }
  }

  /* button_to wraps the link in a form — flatten so the form acts as a row, not a block */
  .message__actions-menu form {
    margin: 0;
    display: contents;
  }

  /* --- Reply indicator --- */

  .group-chat__reply-indicator {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--inline-space-s);
    padding: var(--block-space-s) var(--inline-space);
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in oklch, var(--color-surface) 90%, oklch(var(--lch-uv)));
    font-size: 0.8125rem;
    color: var(--color-ink);

    &[hidden] { display: none; }
  }

  .group-chat__reply-cancel {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink);
    cursor: pointer;

    & svg {
      width: 0.875rem;
      height: 0.875rem;
      padding: 0.3125rem;
      box-sizing: content-box;
      background: var(--color-border);
      border-radius: 50%;
    }
  }

  /* --- Message highlight (scroll-to-parent) --- */

  .message--highlight {
    animation: message-highlight 1.5s ease-out;
  }

  @keyframes message-highlight {
    0%, 30% { background: color-mix(in oklch, var(--color-canvas) 70%, oklch(var(--lch-golden))); }
    100% { background: transparent; }
  }

  /* --- Emoji-only messages --- */

  .message--emoji-only .bub {
    background: none;
    box-shadow: none;
    padding-block: 2px;
  }

  .message--emoji-only .bub::before { display: none; }

  .message--emoji-only .bub__text {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  /* Hide chrome on emoji-only — author label and meta would float orphaned
     once the bubble background is removed. */
  .message--emoji-only .bub__author,
  .message--emoji-only .bub__meta { display: none; }

  .message--mine.message--emoji-only .bub {
    background: none;
    color: var(--color-ink);
  }

  /* --- Location bubble --- */

  .message__location-link {
    display: block;
    width: 18rem;
    max-width: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .message__location {
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    & .leaflet-container {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }

    & .location-thumbnail__pin {
      background: none;
      border: none;
    }

    & .location-thumbnail__pin .group-map__pin-inner {
      width: 32px;
      height: 32px;
      font-size: 0.75rem;
      border-width: 2px;
    }
  }

  .message__location-caption {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--block-space-s) var(--inline-space-s);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    line-height: 1.3;
  }

  .message__location-author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink);
  }

  .message__location-name {
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
  }

  .message--mine .message__location-caption {
    background: oklch(40% 0.09 35);
  }

  .message--mine .message__location-author {
    color: var(--color-ink);
  }

  .message--mine .message__location-name {
    color: var(--color-ink-muted);
  }

  /* --- Location preview in compose --- */

  .group-chat__location-preview {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    padding: var(--block-space-s) var(--inline-space);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);

    &[hidden] { display: none; }
  }

  .group-chat__location-preview-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: oklch(var(--lch-flare));
  }

  .group-chat__location-preview-text {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .group-chat__location-preview-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink);
    cursor: pointer;

    & svg {
      width: 0.875rem;
      height: 0.875rem;
      padding: 0.3125rem;
      box-sizing: content-box;
      background: var(--color-border);
      border-radius: 50%;
    }
  }

  /* --- Location button --- */

  .group-chat__location-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    &:hover {
      color: var(--color-ink);
    }
  }

  /* --- Photo button --- */

  .group-chat__photo-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    &:hover {
      color: var(--color-ink);
    }
  }

  /* --- Image preview in compose --- */

  .group-chat__image-preview {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    padding: var(--block-space-s) var(--inline-space);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);

    &[hidden] { display: none; }
  }

  .group-chat__image-preview-thumb {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: var(--radius);
  }

  .group-chat__image-preview-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink);
    cursor: pointer;

    & svg {
      width: 0.875rem;
      height: 0.875rem;
      padding: 0.3125rem;
      box-sizing: content-box;
      background: var(--color-border);
      border-radius: 50%;
    }
  }

  /* --- Message image thumbnail --- */

  .message__image-btn {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .message__image {
    display: block;
    max-width: 100%;
    max-height: 16rem;
    border-radius: var(--radius-lg);
    object-fit: cover;
  }

  /* --- Full-screen image dialog --- */

  .image-dialog {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    padding: 0;
    border: none;
    background: oklch(0% 0 0 / 90%);

    &::backdrop {
      background: none;
    }
  }

  .image-dialog__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .image-dialog__close {
    position: fixed;
    top: var(--block-space);
    right: var(--inline-space);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: oklch(0% 0 0 / 50%);
    color: oklch(100% 0 0);
    cursor: pointer;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  /* --- Emoji picker --- */

  .group-chat__emoji-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;

    & svg {
      width: 1.5rem;
      height: 1.5rem;
    }

    &:hover {
      color: var(--color-ink);
    }
  }

  .group-chat__emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: var(--block-space-s) var(--inline-space);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);

    &[hidden] { display: none; }
  }

  .group-chat__emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-min);
    height: var(--touch-min);
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: none;
    font-size: 1.375rem;
    cursor: pointer;

    &:hover {
      background: color-mix(in oklch, var(--color-surface) 80%, var(--color-ink));
    }
  }

  /* --- Character counter --- */

  .group-chat__counter {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    flex-shrink: 0;
  }

  .group-chat__counter--warn {
    color: oklch(var(--lch-flare));
    font-weight: 600;
  }

  /* --- First-visit coach mark for long-press --- */

  .chat-coach {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    translate: -50% 0;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    padding: var(--block-space-s) var(--block-space-s) var(--block-space-s) var(--inline-space);
    border-radius: var(--radius-pill);
    background: oklch(var(--lch-uv));
    color: oklch(100% 0 0);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 4px 16px oklch(0% 0 0 / 40%);
    max-width: calc(100% - 2rem);

    @starting-style {
      opacity: 0;
      translate: -50% 0.5rem;
    }
    transition: opacity 0.2s, translate 0.2s;

    &[hidden] { display: none; }
  }

  .chat-coach__icon { font-size: 1.125rem; }

  .chat-coach__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .chat-coach__dismiss {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: oklch(0% 0 0 / 25%);
    color: oklch(100% 0 0);
    cursor: pointer;

    & svg { width: 0.875rem; height: 0.875rem; }

    &:hover, &:focus-visible { background: oklch(0% 0 0 / 40%); }
  }

  /* --- New messages badge --- */

  .new-messages-badge {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    translate: -50% 0;
    padding: var(--block-space-s) var(--inline-space);
    border: 1px solid color-mix(in oklch, var(--color-border) 30%, oklch(var(--lch-golden)));
    border-radius: var(--radius-pill);
    background: oklch(var(--lch-golden));
    color: oklch(20% 0.04 84);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px oklch(var(--lch-golden) / 35%);
    z-index: 10;
    animation: new-messages-pulse 1.6s ease-in-out infinite;

    @starting-style {
      opacity: 0;
      translate: -50% 0.5rem;
    }
    transition: opacity 0.25s, translate 0.25s;

    &:hover {
      background: color-mix(in oklch, oklch(var(--lch-golden)) 90%, oklch(0% 0 0));
      animation-play-state: paused;
    }
  }

  @keyframes new-messages-pulse {
    0%, 100% {
      box-shadow: 0 4px 14px oklch(var(--lch-golden) / 35%);
    }
    50% {
      box-shadow: 0 4px 22px oklch(var(--lch-golden) / 65%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .new-messages-badge { animation: none; }
  }

  /* --- Vibe Check --- */

  .vibe-check {
    border-bottom: 1px solid var(--color-border);
    width: 100%;
    max-width: 42rem;
    margin-inline: auto;
  }

  .vibe-check__toggle {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    width: 100%;
    padding: var(--block-space-s) var(--inline-space);
    border: none;
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;

    &:hover {
      background: color-mix(in oklch, var(--color-surface) 90%, var(--color-ink));
    }
  }

  .vibe-check__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: oklch(var(--lch-flare));
  }

  .vibe-check__badge {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.375rem;
    border-radius: var(--radius-pill);
    background: oklch(var(--lch-uv));
    color: oklch(100% 0 0);
    font-size: 0.6875rem;
    font-weight: 700;
  }

  .vibe-check__panel {
    padding: var(--block-space-s) var(--inline-space);
    background: var(--color-surface);
  }

  .vibe-check__panel--hidden {
    display: none;
  }

  /* --- Vibe Picker --- */

  .vibe-picker__options {
    display: flex;
    gap: var(--inline-space-s);
    justify-content: center;
    padding-block-end: var(--block-space-s);
  }

  .vibe-picker__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--block-space-s) var(--inline-space-s);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-canvas);
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;

    &:hover {
      border-color: oklch(var(--lch-uv));
    }
  }

  .vibe-picker__option--active {
    border-color: oklch(var(--lch-uv));
    background: color-mix(in oklch, var(--color-canvas) 85%, oklch(var(--lch-uv)));
  }

  .vibe-picker__emoji {
    font-size: 1.5rem;
  }

  .vibe-picker__label {
    font-size: 0.625rem;
    color: var(--color-ink-muted);
    font-weight: 600;
  }

  /* --- Vibe Board Bar Chart --- */

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

  .vibe-board__row {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
  }

  .vibe-board__emoji {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
  }

  .vibe-board__track {
    flex: 1;
    height: 1rem;
    background: var(--color-canvas);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .vibe-board__fill {
    height: 100%;
    background: oklch(var(--lch-uv));
    border-radius: var(--radius-pill);
    transition: width 0.3s ease;
    min-width: 0;
  }

  .vibe-board__count {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    font-weight: 600;
    width: 1.5rem;
    text-align: end;
    flex-shrink: 0;
  }

  .vibe-board__empty {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    text-align: center;
    padding: var(--block-space-s);
  }

  /* --- Pending / Failed offline messages --- */

  .message--pending {
    opacity: 0.6;
  }

  .message__pending-icon {
    vertical-align: -2px;
    color: var(--color-ink-muted);
  }

  .message--failed {
    opacity: 1;
  }

  .message--failed .message__time {
    color: oklch(var(--lch-flare));
  }

  .message__retry-btn {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    color: oklch(var(--lch-flare));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    min-height: var(--touch-min);
  }

  /* --- Queue full warning --- */

  .group-chat__queue-warning {
    padding: var(--block-space-s) var(--inline-space);
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(var(--lch-golden));
    background: color-mix(in oklch, oklch(var(--lch-golden)) 10%, var(--color-canvas));
    border-top: 1px solid color-mix(in oklch, oklch(var(--lch-golden)) 30%, transparent);
    text-align: center;

    &[hidden] {
      display: none;
    }
  }

  /* ── System messages (join/leave announcements) ── */

  .message--system {
    display: flex;
    justify-content: center;
    padding: 0.5rem var(--inline-space);
  }

  .message__system-text {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    margin: 0;
    padding: 0.25em 0.75em;
    background: color-mix(in oklch, var(--color-ink) 5%, transparent);
    border-radius: var(--radius-pill);
  }

  /* ── Read-by sheet ──
     Bottom sheet on mobile, anchored card on larger viewports.
     Triggered from the long-press menu on the user's own messages. */

  .read-by-sheet[popover] {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 32rem;
    margin: 0 auto;
    padding: var(--block-space) var(--inline-space) calc(var(--block-space) + env(safe-area-inset-bottom, 0));
    border: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: 0 -8px 32px oklch(0% 0 0 / 50%);
    max-height: 70dvh;
    overflow-y: auto;
    translate: 0 0;
    transition: translate 0.2s ease, opacity 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete;

    @starting-style {
      translate: 0 100%;
      opacity: 0;
    }

    &:not(:popover-open) {
      translate: 0 100%;
      opacity: 0;
    }

    &::backdrop {
      background: oklch(0% 0 0 / 50%);
      transition: background 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
    }

    &:not(:popover-open)::backdrop {
      background: oklch(0% 0 0 / 0%);
    }
  }

  .read-by-sheet__close {
    position: absolute;
    inset-block-start: var(--block-space-s);
    inset-inline-end: var(--inline-space-s);
    width: var(--touch-min);
    height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    border-radius: 50%;

    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }

    &:hover,
    &:focus-visible {
      color: var(--color-ink);
      background: color-mix(in oklch, var(--color-surface) 80%, var(--color-ink));
    }

    &:focus-visible {
      outline: 2px solid oklch(var(--lch-laser));
      outline-offset: 2px;
    }
  }

  .read-by__header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-block-end: var(--block-space);
    padding-inline-end: var(--touch-min); /* room for the close button */
  }

  .read-by__title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-ink);
  }

  .read-by__count {
    margin: 0;
    font-size: 0.8125rem;
    color: oklch(var(--lch-laser));
    font-variant-numeric: tabular-nums;
  }

  .read-by__section {
    margin-block-start: var(--block-space);

    &:first-of-type {
      margin-block-start: 0;
    }
  }

  .read-by__section-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-muted);
    margin: 0 0 var(--block-space-s) 0;
  }

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

  .read-by__list--muted {
    opacity: 0.65;
  }

  .read-by__member {
    display: flex;
    align-items: center;
    gap: var(--inline-space-s);
    padding: var(--block-space-s) 0;
  }

  .read-by__member-name {
    font-size: 0.9375rem;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .read-by__empty {
    margin: 0;
    padding: var(--block-space) 0;
    text-align: center;
    color: var(--color-ink-muted);
    font-size: 0.875rem;
  }
}