#thread-panel {
  display: none;
}

body.sidebar.thread-open {
  /* Narrower desktops: the rooms sidebar would crowd the panel — collapse it
     while a thread is open (the rail keeps navigation reachable) */
  @media (min-width: 100ch) and (max-width: 150ch) {
    --sidebar-width: 0vw;

    grid-template-areas:
      "nav    nav     rail"
      "main   thread  rail";
    grid-template-columns: 1fr min(400px, 35vw) var(--rail-width);

    #sidebar {
      display: none;
    }
  }

  @media (min-width: 150ch) {
    grid-template-areas:
      "nav    nav     sidebar rail"
      "main   thread  sidebar rail";
    grid-template-columns: 1fr min(400px, 35vw) var(--sidebar-width) var(--rail-width);
  }

  #thread-panel {
    display: flex;
    flex-direction: column;
    grid-area: thread;
    background-color: var(--color-bg);
    max-block-size: 100dvh;
    overflow: hidden;

    @media (min-width: 100ch) {
      border-inline: 1px solid var(--color-border-darker);
      /* The navbar is position: fixed and spans the panel column — start below it */
      padding-block-start: var(--navbar-height);
    }
  }
}

#thread-panel > turbo-frame {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-block-size: 0;
}

/* Mobile: off-canvas slide-over, mirrors #sidebar’s 300ms transform transition */
@media (max-width: 100ch) {
  body.sidebar #thread-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 10;
    background-color: var(--color-bg);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 300ms ease, visibility 0s 300ms;
  }

  body.sidebar.thread-open #thread-panel {
    transform: none;
    visibility: visible;
    transition: transform 300ms ease;
  }
}

.thread-panel__container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-block-size: 0;
}

.thread-panel__header {
  border-block-end: 1px solid var(--color-border);
  flex: none;
  min-block-size: var(--navbar-height);

  @media (max-width: 100ch) {
    padding-block-start: env(safe-area-inset-top, 0px);
  }
}

.thread-panel__room {
  --btn-padding: 0.2em 0.8em;
}

.thread-panel__messages {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;

  @media (max-width: 100ch) {
    padding-block-start: 0;
  }

  /* The parent message opens the panel — its day pill is noise there */
  > .message:first-child .message__day-separator {
    display: none;
  }
}

/* Hover actions inline in the meta row — the room’s outside-the-bubble
   positioning (messages.css ≥100ch) would clip inside the 400px panel */
#thread-panel .message__meta .message__actions {
  @media (min-width: 100ch) {
    position: static;
    transform: none;
    margin-inline-start: auto;

    .message__options-btn,
    .message__thread-btn {
      --btn-padding: 0 0.5em;

      aspect-ratio: unset;
      block-size: auto;
      border-radius: 0.3em;
    }
  }
}

#thread-panel .message__actions-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: none;

  &::before,
  &::after {
    inset-inline-start: auto;
    inset-inline-end: 1em;
    transform: none;
  }
}

/* “N replies” — rule-with-label, Slack style (label left, rule filling right) */
.thread-panel__separator {
  align-items: center;
  color: var(--color-text);
  column-gap: var(--inline-space);
  display: grid;
  font-weight: 600;
  grid-template-columns: auto 1fr;
  margin: 0;
  padding-inline: var(--inline-space);

  &::after {
    border-top: 1px solid var(--color-border-dark);
    content: "";
  }
}

.thread-panel__composer {
  border-block-start: 1px solid var(--color-border);
  flex: none;

  @media (max-width: 100ch) {
    padding-block-end: max(var(--block-space-half), env(safe-area-inset-bottom));
  }
}

/* “Also send to #room” checkbox chip — visible focus for the hidden checkbox */
.thread-panel__send-to-room:focus-within {
  outline: var(--outline-size, 2px) solid var(--outline-color, var(--color-selected-dark));
  outline-offset: var(--outline-offset, 2px);
}

.thread-indicator {
  justify-content: start;

  @media (any-hover: hover) {
    &:hover {
      --btn-border-color: var(--color-border-darker);
    }
  }
}

.thread-indicator__avatars {
  gap: 2px;
}

.thread-indicator__link {
  color: var(--color-link);
}