.thread-panel-controller {
  display: contents;
}

#thread-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--color-bg);
  border-inline-start: 1px solid var(--color-border-dark);
  transition: transform 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

#thread-panel[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #thread-panel {
    transition: none;
  }
}

/* Each panel declares its kind server-side as data-panel-kind on its header
   (roster | thread | forum); every dock breakpoint, width and scrim rule below
   keys off that marker rather than sniffing the loaded content's classes.
   Panels overlay from the right until layout.css gives their current kind an
   inline grid column. The room-info panel is narrower than a thread. */
@media (min-width: 500px) {
  #thread-panel {
    block-size: 100dvh;
    box-shadow: var(--shadow-panel);
    inline-size: var(--thread-panel-width);
    inset: 0 0 0 auto;
    position: fixed;
    transform: translateX(100%);
    z-index: 10;
  }

  #thread-panel:has([data-panel-kind="roster"]) {
    inline-size: 288px;
  }

  body.thread-panel-open #thread-panel {
    transform: translateX(0);
  }
}

/* Forum posts keep the wider reading measure below their desktop column. */
@media (min-width: 500px) and (max-width: 1023.9px) {
  #thread-panel:has([data-panel-kind="forum"]) {
    inline-size: min(560px, 100vw);
  }
}

/* Phone threads become the room column. Their parent-room link in the header
   remains the way back to the conversation. */
@media (width < 500px) {
  #thread-panel:not([hidden]) {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 10;
    transform: translateX(100%);
  }

  body.thread-panel-open #thread-panel {
    transform: translateX(0);
  }
}

@media (min-width: 1160px) {
  body:has(#thread-panel:not([hidden]) [data-panel-kind="roster"]) #thread-panel {
    block-size: auto;
    box-shadow: none;
    inline-size: var(--thread-width);
    inset: auto;
    position: static;
    z-index: auto;
  }
}

@media (min-width: 1360px) {
  body:not(:has(#list-rail)):has(#thread-panel:not([hidden]) [data-panel-kind="thread"]) #thread-panel {
    block-size: auto;
    box-shadow: none;
    inline-size: var(--thread-width);
    inset: auto;
    position: static;
    z-index: auto;
  }
}

@media (min-width: 1536px) {
  body:has(#list-rail):has(#thread-panel:not([hidden]) [data-panel-kind="thread"]) #thread-panel {
    block-size: auto;
    box-shadow: none;
    inline-size: var(--thread-width);
    inset: auto;
    position: static;
    z-index: auto;
  }
}

@media (min-width: 1024px) {
  body:has(#thread-panel:not([hidden]) [data-panel-kind="forum"]) #thread-panel {
    block-size: auto;
    box-shadow: none;
    inline-size: var(--thread-width);
    inset: auto;
    position: static;
    z-index: auto;
  }
}

.thread-panel__scrim {
  background: var(--color-scrim);
  border: 0;
  cursor: default;
  display: none;
  inset: 0;
  padding: 0;
  position: fixed;
  z-index: 9;
}

@media (min-width: 500px) and (max-width: 1159.9px) {
  body.thread-panel-open:has(#thread-panel [data-panel-kind="roster"]) .thread-panel__scrim {
    display: block;
  }
}

@media (min-width: 500px) and (max-width: 1359.9px) {
  body.thread-panel-open:has(#thread-panel [data-panel-kind="thread"]) .thread-panel__scrim {
    display: block;
  }
}

@media (min-width: 1360px) and (max-width: 1535.9px) {
  body.thread-panel-open:has(#list-rail):has(#thread-panel [data-panel-kind="thread"]) .thread-panel__scrim {
    display: block;
  }
}

@media (min-width: 500px) and (max-width: 1023.9px) {
  body.thread-panel-open:has(#thread-panel [data-panel-kind="forum"]) .thread-panel__scrim {
    display: block;
  }
}

/* Header */
.thread-panel__header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding-inline: var(--inline-space);
  border-block-end: 1px solid var(--color-border);
  block-size: var(--navbar-height);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.thread-panel__icon {
  flex-shrink: 0;
  opacity: 0.5;
  translate: 0 1px;
}

/* Full-screen (phone/tablet) the panel IS the room context, so the header
   leads with the room glyph instead of the thread icon */
.thread-panel__hash {
  display: none;
  opacity: 0.5;
}

@media (width < 500px) {
  .thread-panel__icon {
    display: none;
  }

  .thread-panel__hash {
    display: inline;
  }
}

/* Two-line title stack: bold "Thread" over an accent "in {room}" link that
   jumps back to the parent message */
.thread-panel__title {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-inline-size: 0;
  font-size: var(--font-size-medium);
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

/* The room glyph is a 16px mask box against ~11px of cap height, so it reads
   larger than the name it sits beside and needs a touch more room than a
   text-sized separator would. */
.thread-panel__name {
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
}

.thread-panel__room {
  color: var(--color-link);
  font-size: 0.75rem;
  font-weight: 400;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      text-decoration: underline;
    }
  }
}

/* Follow/Unfollow chip in the header */
.thread-panel__follow {
  --btn-background: transparent;
  --btn-border-color: var(--color-border-dark);
  --btn-border-radius: 7px;
  --btn-color: var(--color-text);
  --btn-padding: 5px 10px;
  --hover-color: transparent;
  --hover-filter: none;

  font-size: 0.75rem;
  font-weight: 600;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --btn-background: var(--color-bg-hover);
    }
  }
}

/* A quiet glyph, not a pill: strip the inherited .btn chrome (white fill,
   border, 2em radius) down to a subtle ✕ that fills in softly on hover. */
.thread-panel__close {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-border-radius: 7px;
  --btn-color: var(--color-text-subtle);
  --btn-padding: 3px 7px;
  --hover-color: transparent;
  --hover-filter: none;

  flex-shrink: 0;
  font-size: 0.9375rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      --btn-background: var(--color-bg-hover);
      --btn-color: var(--color-text);
    }
  }
}

/* Turbo frame — flex child to contain scrolling content */
#thread_panel_frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
}

/* Override message-area display:contents so it scrolls independently in the panel */
#thread-panel .message-area {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
  position: relative;
}

/* Messages container is the scroll container — IntersectionObserver root must scroll */
#thread-panel .messages {
  flex: 1;
  overflow-y: auto;
  padding-block-start: var(--block-space-half);
}

/* Return-to-latest button positioning within thread panel */
#thread-panel .message-area__return-to-latest {
  position: absolute;
  inset-block-end: var(--block-space);
}

/* Composer */
#thread-panel .composer--thread {
  flex-shrink: 0;
  padding: var(--block-space-half) var(--inline-space);
  border-block-start: 1px solid var(--color-border);
}

/* Room info is one of the settings stacks (panels.css) in the panel's narrower
   column, so it only adds what being a panel costs: it scrolls inside a fixed
   height, and clears the home indicator. Nothing here needs a breakpoint — the
   rows already fold at 480px. */
.roster {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  padding-block-end: calc(24px + env(safe-area-inset-bottom));
}

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

.roster__topic {
  color: var(--color-text-muted);
  font-size: var(--font-size-x-small);
  line-height: 1.5;
  margin: 0;
}

.roster__notification-menu [aria-checked="true"] {
  color: var(--color-accent-brand);
  font-weight: 700;
}

/* Settings furniture takes the same step down as the message rows below: the
   room settings page sets its type for a 676px column and it reads heavy
   against a 288px one. The step lands on the six-level scale in base.css
   rather than on sizes of its own — medium for the panel title above, small
   for row titles, x-small for everything supporting them. Only the sizes move;
   weights, colours and spacing stay the page's, so the two still read as one
   surface. */
#thread-panel .setting-row__title {
  font-size: var(--font-size-small);
}

#thread-panel .setting-row__text .txt-small,
#thread-panel .btn.settings-chip-btn,
.roster__meta {
  font-size: var(--font-size-x-small);
}

.roster__meta {
  margin: 0;
}

/* Panel rows sit tighter than the main stream: 32px avatars, one step down
   on body type (forum opening posts keep their 36px hero treatment) */
#thread-panel .message:not(.message--forum-opening) {
  column-gap: 10px;
  grid-auto-columns: 32px 1fr min-content;
}

#thread-panel .message:not(.message--forum-opening) .message__avatar {
  --avatar-size: 32px;
}

#thread-panel .message:not(.message--forum-opening) .message__body-content {
  font-size: 0.875rem;
}