@layer components {
  .conversation { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 13px; }
  .conversation-header {
    height: var(--conversation-header-height); flex: none; display: flex; align-items: center; gap: 9px; padding: 0 14px;
    border-bottom: 1px solid var(--border); min-width: 0;
  }
  /* The header is a frame of its own (reloaded for each reader): it takes no box, the header lays itself out. */
  .conversation-header-frame { display: contents; }
  .conversation-header > svg { width: 14px; height: 14px; flex: none; color: var(--muted-foreground); }
  .conversation-header .type-icon { width: 24px; height: 24px; }
  .conversation-header .type-icon--group { width: auto; } /* the stack is wider than a single icon */
  .conversation-title { display: flex; margin: 0; flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
  .conversation-name, .conversation-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* The name opens the settings: a plain button that reads as the title. */
  .conversation-name {
    display: block; margin: 0; padding: 4px 6px; border: 0; border-radius: var(--radius-sm);
    background: none; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer;
  }
  .conversation-name:is(:hover, :active) { background: var(--accent); }
  .conversation-name:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--jx-accent); }
  .conversation-meta {
    flex: 0 100 auto; min-width: 0; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* The header's right side: the star and the settings. */
  .conversation-header-end { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; }
  .conversation-settings { color: var(--muted-foreground); }
  .conversation-settings[aria-expanded="true"] { background: var(--secondary); color: var(--foreground); }
  /* A step the header's extension shows (an onboarding journey), under the header. */
  .conversation-header-extension { flex: none; border-bottom: 1px solid var(--border); }
  /* The flash sits under the header, in the column: it pushes the thread down, never the header the panel aligns to. */
  .app-main .conversation > .flashes { flex: none; max-width: none; margin: 10px var(--gutter) 0; }
  .conversation-count { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  /* Reversed: the thread opens on its latest message before any script runs, so the lazy history
     loader at the top stays out of view until the reader scrolls up. */
  .thread { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 8px; display: flex; flex-direction: column-reverse; }
  .thread-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    padding: 40px var(--gutter); color: var(--muted-foreground);
  }
  .thread-empty p { margin: 0; }
  .thread-empty-title { font-size: 14px; font-weight: 600; color: var(--foreground); }
  .new-marker {
    display: flex; align-items: center; gap: 10px; margin: 10px var(--gutter) 4px;
    color: var(--jx-accent); font-size: var(--text-meta); font-weight: 600;
  }
  .new-marker::before, .new-marker::after { content: ""; flex: 1; height: 1px; background: var(--jx-accent-line); }
  .around-banner, .read-only-bar, .join-bar, .access-revoked {
    margin: 10px var(--gutter); padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
    background: var(--surface); color: var(--muted-foreground); line-height: 1.45;
  }
  .around-banner { margin-bottom: 0; }
  .read-only-bar, .join-bar { flex: none; margin: 8px var(--gutter) max(14px, var(--safe-bottom)); }
  .join-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .join-bar form { margin: 0; flex: none; }
  .join-bar-text { margin: 0; }
  .join-bar-phone { display: none; }
  .read-only-bar--notice,
  .read-only-bar--archived { display: flex; align-items: center; justify-content: center; gap: 6px; }
  .archived-banner {
    flex: none; display: flex; align-items: center; gap: 10px; margin: 8px var(--gutter) 0; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--muted-foreground);
  }
  .archived-banner > svg { flex: none; }
  .archived-banner-text { flex: 1; margin: 0; line-height: 1.45; }
  .archived-banner form { margin: 0; flex: none; }
  .archived-banner .button { gap: 6px; }
  @media (max-width: 1099px) {
    .join-bar-desktop { display: none; }
    .join-bar-phone { display: inline; }
    .archived-banner { flex-wrap: wrap; }
  }
  .access-revoked { border-color: var(--jx-no); background: var(--jx-no-soft); color: var(--foreground); }
  .access-revoked[hidden] { display: none; }
  .history-loader { display: block; padding: 8px var(--gutter); }
  /* Reader-dependent actions, set by the page for everyone who reads the same rendered message. */
  .conversation:not([data-can-post="true"]) .message-reply { display: none; }
  .conversation:not([data-can-post="true"]):not([data-can-publish="true"]) .message-actions,
  .conversation--revoked .message-actions,
  .conversation--revoked .composer,
  .conversation--revoked .composer-notice,
  .conversation--revoked .thread-empty { display: none; }

  /* Mobile shell: the header starts with the way back, then the same icon, name, star and settings as the desktop's. */
  .conversation-back { display: none; }

  @media (max-width: 1099px) {
    .conversation-header { position: relative; padding: 0 8px 0 4px; }
    .conversation-header > svg { display: none; }
    .conversation-back {
      position: relative; display: inline-flex; flex: none; align-items: center; gap: 2px; min-width: var(--tap);
      height: var(--tap); border-radius: var(--radius-md); color: var(--foreground); text-decoration: none;
    }
    /* Rounded corners drop out of hit testing: a square layer keeps the whole 44 px square under the finger. */
    .conversation-back::after { content: ""; position: absolute; inset: 0; }
    .conversation-back:is(:hover, :active) { background: var(--accent); text-decoration: none; }
    .conversation-back svg { width: 24px; height: 24px; }
    .conversation-settings { width: var(--tap); height: var(--tap); }
    .conversation-name { padding-block: 10px; }
  }

  /* The phone's header has no room for the line under the name. */
  @media (max-width: 767px) {
    .conversation-header .conversation-meta:not(.conversation-agent) { display: none; }
    .conversation-header > .conversation-title { flex: 1 1 0; }
  }
}