@layer components {
  .group-chat {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    margin: calc(-1 * var(--block-space)) calc(-1 * var(--inline-space-l));
    position: relative;
    background: var(--color-canvas);
  }

  .group-chat__header {
    display: flex;
    align-items: center;
    padding: var(--block-space-s) var(--inline-space);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .group-chat__back {
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-s);
    color: var(--color-link);
    text-decoration: none;
    font-weight: 600;

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

  .group-chat__mute-btn {
    margin-inline-start: auto;
    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.25rem;
      height: 1.25rem;
    }

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

  .group-chat__mute-btn--muted {
    color: oklch(var(--lch-flare));

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

  .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);
  }

  .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: var(--color-ink-muted);
    font-style: italic;
  }

  .group-chat__compose {
    padding: var(--block-space-s) var(--inline-space);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .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;
  }

  /* --- Message bubble --- */

  .message {
    display: flex;
    gap: var(--inline-space-s);
    max-width: 80%;
  }

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

    & .message__avatar,
    & .message__author {
      display: none;
    }
  }

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

    & .message__status-icon {
      display: none;
    }
  }

  .message__avatar {
    flex-shrink: 0;
    align-self: flex-end;
  }

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

  .message__author {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    padding-inline-start: var(--inline-space-s);
  }

  .message__content {
    margin: 0;
    padding: var(--block-space-s) var(--inline-space);
    border-radius: var(--radius-lg);
    line-height: 1.4;
    word-break: break-word;
  }

  .message__content--deleted {
    font-style: italic;
    color: var(--color-ink-muted);
    background: none;
  }

  .message--mine .message__content--deleted {
    background: none;
    color: var(--color-ink-muted);
  }

  .message__delete-btn {
    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;

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

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

  .message--theirs .message__content {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .message--mine .message__content {
    background: oklch(var(--lch-flare));
    color: oklch(100% 0 0);
  }

  .message__time {
    display: inline-flex;
    align-items: center;
    gap: 0.25ch;
    font-size: 0.6875rem;
    color: var(--color-ink-muted);
    padding-inline: var(--inline-space-s);
  }

  .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__time {
    text-align: end;
  }

  /* --- 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;
  }

  .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;
  }

  /* --- Message actions (reply + react buttons) --- */

  .message__actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    align-self: center;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .message:hover .message__actions,
  .message__actions:focus-within {
    opacity: 1;
  }

  @media (hover: none) {
    .message__actions {
      opacity: 0.6;
    }
  }

  .message__react-btn,
  .message__reply-btn {
    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;

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

  /* --- Reactions --- */

  .message__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-inline: var(--inline-space-s);

    &:empty {
      display: none;
    }
  }

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

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

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

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

  /* --- Reaction picker --- */

  .message__reaction-picker {
    display: flex;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: 0 2px 8px oklch(0% 0 0 / 20%);
    position: absolute;
    bottom: 100%;
    margin-bottom: 4px;
    z-index: 5;
  }

  .message--mine .message__reaction-picker {
    right: 0;
  }

  .message--theirs .message__reaction-picker {
    left: 0;
  }

  .message__reaction-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    font-size: 1.25rem;
    cursor: pointer;

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

  /* --- 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);
  }

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

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

  /* --- 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 .message__content {
    font-size: 2.5rem;
    line-height: 1.2;
    background: none;
    padding: 0;
    color: var(--color-ink);
  }

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

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

  .message__location-link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .message__location {
    width: 12.5rem;
    height: 7.5rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

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

  .message__location-link:not(:has(+ .message__location-name)) .message__location {
    border-radius: var(--radius-lg);
  }

  .message__location-name {
    display: block;
    padding: var(--block-space-s) var(--inline-space-s);
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    background: var(--color-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    line-height: 1.3;
  }

  .message--mine .message__location-name {
    background: color-mix(in oklch, oklch(var(--lch-flare)) 85%, oklch(0% 0 0));
    color: oklch(100% 0 0 / 80%);
  }

  /* --- 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);
  }

  .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;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-ink);
    cursor: pointer;

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

  /* --- 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);
  }

  .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;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-border);
    color: var(--color-ink);
    cursor: pointer;

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

  /* --- 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);
  }

  .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;
  }

  /* --- 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 var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    box-shadow: 0 2px 8px oklch(0% 0 0 / 30%);
    z-index: 10;

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

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

  .vibe-check {
    border-bottom: 1px solid var(--color-border);
  }

  .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);
  }
}