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

/* A page with nothing for the header bar doesn't get an empty one. Phones
   keep it, since the drawer's menu button sits in its slot. */
@media (min-width: 834px) {
  #nav:not(:has(*)) {
    display: none;
  }
}

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

/* 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.
   The app moves the DM list's bar action into the list's header, so it matches there.
   Text actions such as View profile retain their compact outlined button. */
:is(#nav, .dm-rail__header) .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);
}

/* Quiet strip for a standing fact (a demo workspace's time left): it sits on
   the page rather than calling out from it, and wraps on a phone. */
.top-banner--quiet {
  background: var(--color-bg-sunk);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text-muted);
  flex-wrap: wrap;
  row-gap: 0.125rem;

  a {
    color: var(--color-link);
  }
}

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