/* 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 whenever the
     sidebar isn't docked — reserve room for it. */
  @media (max-width: 1279.9px) {
    .sidebar & {
      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 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  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;
}

.navbar-dm__text {
  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;
  }
}

/* Member-count pill between the room name and topic. The count is the
   room's, but it links to the community-wide members directory. */
.navbar-members {
  --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;
  flex-shrink: 0;
  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);
  }

  @media (max-width: 833.9px) {
    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;
  white-space: nowrap;

  @media (max-width: 833.9px) {
    visibility: hidden;
  }
}

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

/* Quiet accent text action at the bar's end ("Manage badges") */
.navbar-text-link {
  color: var(--color-accent-brand);
  flex-shrink: 0;
  font-size: 0.78125rem;
  font-weight: 600;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

/* Bar action buttons are quiet icon buttons, not pills: transparent at rest,
   a soft bg fill on hover — the same idiom as every other quiet icon button,
   not the default .btn's border-darker ring. */
#nav .navbar-actions .btn {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --hover-color: transparent;
  --hover-filter: none;

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

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

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

/* The right-side action icons ride the design's quiet scale: a 17px bell
   (the shared involvement image ships larger) and an info glyph in the
   lighter subtle tone the bar glyph already uses, not the heavier muted. */
#nav .navbar-actions img {
  block-size: 17px;
  inline-size: 17px;
}

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

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