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

/* 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: 360px;
    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: 1232px) {
  body: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: 1231.9px) {
  body.thread-panel-open: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: 0.90625rem;
  font-weight: 700;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
}

.thread-panel__name {
  align-items: center;
  display: inline-flex;
  gap: 0.4em;
}

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

  @media (any-hover: hover) {
    &: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-muted);
  --btn-padding: 5px 10px;
  --hover-color: transparent;
  --hover-filter: none;

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

  @media (any-hover: hover) {
    &: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 (any-hover: hover) {
    &: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);
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

/* 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 roster panel: the contextual room info that opens from the header member
   count — a description, a favourite/settings button pair, then here-now / away
   sections of avatar rows. */
.roster {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-block-size: 0;
  overflow-y: auto;
  padding: var(--block-space-half) var(--inline-space) var(--block-space);
}

.roster__topic {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Favourite + Settings sit as two equal buttons under the description. */
.roster__actions {
  display: flex;
  gap: 8px;
}

.roster__action {
  align-items: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  flex: 1;
  font-size: 0.78125rem;
  font-weight: 600;
  gap: 5px;
  justify-content: center;
  padding: 7px;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

.roster__fav--on {
  color: var(--color-accent-brand);
}

.roster__section {
  margin-block-start: 18px;
}

.roster__label {
  align-items: baseline;
  color: var(--color-text-muted);
  display: flex;
  font-size: 0.6875rem;
  font-weight: 600;
  gap: 6px;
  letter-spacing: 0.07em;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.roster__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.roster__row {
  margin: 0;
}

.roster__link {
  align-items: center;
  border-radius: 8px;
  color: var(--color-text);
  display: flex;
  gap: 10px;
  padding: 6px 8px;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      background-color: var(--color-bg-hover);
    }
  }
}

/* Away members read as recently-here, not present: dimmed, and the section
   header carries the status so the row drops its own dot. */
.roster__link--away {
  opacity: 0.65;
}

.roster__avatar {
  flex-shrink: 0;
  position: relative;
}

.status-dot--roster {
  border: 2px solid var(--color-bg);
  height: 9px;
  inset-block-end: -1px;
  inset-inline-end: -1px;
  position: absolute;
  width: 9px;
  z-index: 1; /* the avatar figure is a positioned, overflow-clipped sibling — lift the dot above it */
}

.roster__name {
  font-size: 0.84375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster__link--active .roster__name {
  font-weight: 500;
}

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

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