/* The header bar: a solid in-flow row (grid area "nav") with a hairline
   underneath. Surfaces fill it via content_for :nav — the room surface renders
   glyph + name + topic + actions; other surfaces reuse the same bar. */
#nav {
  align-items: center;
  background-color: var(--color-bg);
  border-block-end: 1px solid var(--color-border);
  column-gap: 10px;
  display: flex;
  min-block-size: var(--navbar-height);
  /* Grid item: without this the bar's nowrap content (room topic, search
     recents) inflates the 1fr column's auto minimum and the page overflows */
  min-inline-size: 0;
  padding-block-start: env(safe-area-inset-top);
  padding-inline: 18px calc(18px + env(safe-area-inset-right));
  position: relative;
  z-index: 2;

  /* The sidebar hamburger pokes out over the bar's left edge only where the
     sidebar is a drawer — below 834. From 834 to 1279 the sidebar is a docked
     icon rail and the hamburger is pinned inside it, so reserving here just left
     the bar's start edge empty: the room name sat a button-width in from where
     the messages below it begin. */
  @media (max-width: 833.9px) {
    .sidebar & {
      padding-inline-start: calc(var(--btn-size, 2.65em) + max(var(--inline-space), 1vw) + 12px);
    }
  }
}

body.room-header--pencil #nav {
  column-gap: 12px;
  padding-inline: 20px calc(20px + env(safe-area-inset-right));

  @media (max-width: 833.9px) {
    padding-inline-start: calc(var(--btn-size, 2.65em) + max(var(--inline-space), 1vw) + 12px);
  }
}

.navbar-glyph {
  --icon-size: 15px;

  color: var(--color-text-subtle);
  flex-shrink: 0;
  font-size: 0.9375rem;
}

.navbar-title {
  /* Compact by default for shared surfaces and direct-message headers. */
  font-size: var(--font-size-medium);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  & a {
    color: inherit;
    text-decoration: none;
  }
}

/* DM header: avatar with presence dot, then name over the presence line */
.navbar-dm {
  align-items: center;
  display: flex;
  gap: 11px;
  min-inline-size: 0;
}

.navbar-dm__avatar {
  --avatar-size: 30px;

  flex-shrink: 0;
  position: relative;
}

.navbar-dm__dot {
  block-size: 10px;
  border: 2px solid var(--color-bg);
  bottom: -2px;
  inline-size: 10px;
  position: absolute;
  right: -2px;
  z-index: 1;
}

/* Name over a context line: the DM header stacks name over presence, the
   settings bar stacks the title over the room it belongs to. */
.navbar-dm__text,
.navbar-titles {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;

  .navbar-title {
    line-height: 1.25;
  }
}

.navbar-dm__status {
  color: var(--color-text-subtle);
  font-size: 0.71875rem;
  line-height: 1.2;
  white-space: nowrap;
}

.btn.navbar-view-profile {
  --btn-background: transparent;
  --btn-border-color: var(--color-border);
  --btn-border-radius: 8px;
  --btn-color: var(--color-text-muted);
  --btn-padding: 5px 11px;

  font-size: 0.78125rem;
  font-weight: 600;
  white-space: nowrap;

  @media (max-width: 833.9px) {
    display: none;
  }
}

/* Bar-scale controls: the member facepile (settings, members tab) and the
   panel icon (room info). */
.navbar-members,
.navbar-roster {
  --icon-size: 17px;

  flex-shrink: 0;
}

.navbar-member-avatars {
  --avatar-size: 18px;

  align-items: center;
  border: 1px solid var(--color-border-dark);
  border-radius: 12px;
  display: flex;
  flex-shrink: 0;
  min-block-size: 34px;
  padding: 3px 7px 3px 3px;
}

.navbar-members--avatars {
  border-radius: 12px;
  display: flex;
  text-decoration: none;

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

/* The open state belongs to the control that reads as a control — the panel
   icon. The room name and the topic open room info too, but they are the
   header's content: accenting them and washing them with a hover background
   made the room look like it had changed, not the panel. The wash is the whole
   state; an accent here never landed on either target anyway, since
   `#nav .navbar-actions .btn` outranks any class-only colour. */
.navbar-roster.btn[aria-expanded="true"] {
  background-color: var(--color-bg-hover);
}

.navbar-member-avatars__avatar {
  box-shadow: 0 0 0 1px var(--color-bg);
  margin-inline-start: -4px;

  &:first-child {
    margin-inline-start: 0;
  }
}

.navbar-member-avatars__overflow {
  align-items: center;
  block-size: var(--avatar-size);
  box-sizing: border-box;
  color: var(--color-text-muted);
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  justify-content: center;
  margin-inline-start: 6px;
  white-space: nowrap;
}

@media (max-width: 1023.9px) {
  body.room-header--pencil .navbar-topic {
    display: none;
  }
}

@media (max-width: 833.9px) {
  .navbar-members--avatars {
    display: none;
  }
}

/* Native keeps the former compact member-management affordance. The richer
   facepile and roster panel are web-only. */
.navbar-members--native {
  --icon-size: 12px;

  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  column-gap: 5px;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 9px;
  text-decoration: none;
  white-space: nowrap;

  &:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-text);
  }
}

/* Room topic rides beside the name and soaks up the slack, so the actions
   stay pinned to the right edge even when it's blank. */
.navbar-topic {
  color: var(--color-text-muted);
  flex: 1;
  font-size: 0.84375rem;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;

  @media (max-width: 833.9px) {
    display: none;
  }
}

.navbar-actions {
  margin-inline-start: auto;
}

.navbar-count {
  color: var(--color-text-subtle);
  font-size: 0.84375rem;
  font-weight: 600;
}

/* Quiet accent back link — "‹ Back", or "‹ {room name}" when the caller
   labels the destination. Padding + negative margin keep the visual quiet
   while preserving a comfortable tap target. */
.navbar-back {
  align-items: center;
  color: var(--color-accent-brand);
  display: inline-flex;
  flex-shrink: 0;
  font-size: 0.84375rem;
  font-weight: 600;
  gap: 5px;
  margin: -8px -6px;
  padding: 8px 6px;
  text-decoration: none;
  white-space: nowrap;

  &:hover .navbar-back__label {
    text-decoration: underline;
  }
}

.navbar-back__chevron {
  font-size: 1.1875rem;
  line-height: 1;
  translate: 0 -1px;
}

.navbar-back__label {
  max-inline-size: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Settings bars and mobile DM headers already name where you are in the title
   stack, so the back control is an icon on the bar's own icon scale rather
   than a second accent headline competing for the left edge. Quiet like the
   bar's other icon actions: transparent at rest, a soft wash on hover. */
.navbar-back-button {
  --icon-size: 18px;

  align-items: center;
  block-size: 30px;
  border-radius: 8px;
  color: var(--color-text-muted);
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 30px;
  justify-content: center;

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

  /* On touch this is the only way back out, so it takes the full 44px target.
     The negative margins keep the bar's spacing unchanged. */
  @media (pointer: coarse) {
    block-size: 44px;
    inline-size: 44px;
    margin-inline: -7px;
  }
}

/* The subtitle is the only place the room being edited is named, so it reads
   on muted rather than the subtle decorative tone. */
.navbar-subtitle {
  color: var(--color-text-muted);
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  .icon {
    --icon-size: 11px;

    translate: 0 1px;
  }
}

/* Bar icon actions are quiet: transparent at rest, with a soft fill on hover.
   Text actions such as View profile retain their compact outlined button. */
#nav .navbar-actions .btn:not(.navbar-view-profile) {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --hover-color: transparent;
  --hover-filter: none;

  color: var(--color-text-muted);

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

      color: var(--color-text);
    }
  }
}

/* The right-side action icons ride the design's quiet 17px scale. */
#nav .navbar-actions img.icon {
  block-size: 17px;
  inline-size: 17px;
}

#nav .navbar-actions .icon--info {
  color: var(--color-text-subtle);
}

/* The involvement toggle (DMs only up here) rides the bar as an icon; its level
   label is hidden — it overflowed the mobile header — and surfaced in the roster
   panel instead. Visually hidden, still read aloud. */
#nav .navbar-actions .btn:is(.mentions, .everything, .nothing, .invisible) span {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.top-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-small);
  text-align: center;

  strong {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
    white-space: nowrap;

    &:hover {
      opacity: 0.85;
    }
  }
}

.top-banner--warning {
  background: var(--color-warning, #f59e0b);
  color: var(--color-warning-contrast, #000);
}

.top-banner--error {
  background: var(--color-negative, #dc2626);
  color: white;
}

/* Live connection-lost strip — hidden until the socket drops
   (connection_status_controller). Tinted amber, matching the States comp. */
.connection-banner {
  align-items: center;
  background: color-mix(in oklch, var(--color-alert) 8%, var(--color-bg));
  border-block-end: 1px solid color-mix(in oklch, var(--color-alert) 35%, transparent);
  color: var(--color-alert);
  display: none;
  font-size: var(--font-size-small);
  font-weight: 600;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  text-align: center;
}

.connection-banner--visible {
  display: flex;
}

.connection-banner__spinner {
  flex-shrink: 0;
}

.skip-navigation {
  --left-offset: -999em;

  inset-block-start: 4rem;
  inset-inline-start: var(--left-offset);
  position: absolute;
  white-space: nowrap;
  z-index: 11;

  &:focus {
    --left-offset: var(--inline-space);
  }
}

/* The sidebar is always docked ≥1280px, so "Skip to menu" is redundant there. */
@media (min-width: 1280px) {
  .skip-navigation--menu {
    display: none;
  }
}