.sidebar__nav-toggle {
  --nav-action-scale: clamp(1, var(--user-font-scale, 1), 1.45);
  --btn-size: calc(2.65rem * var(--nav-action-scale));

  display: flex;
  flex-shrink: 0;
  min-block-size: 44px;
  min-inline-size: 44px;
  pointer-events: auto;
  position: relative;
  z-index: 10;

  /* Extended touch target that spills over the button edges */
  &::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: -1;
  }

  @media (min-width: 67.5rem) {
    display: none !important;
  }

  &.sidebar__nav-toggle--has-unread::after {
    --unread-dot-size: 0.5em;

    background-color: var(--color-negative, #c00);
    border-radius: 50%;
    block-size: var(--unread-dot-size);
    content: "";
    inline-size: var(--unread-dot-size);
    inset-block-start: 0.2em;
    inset-inline-end: 0.2em;
    position: absolute;
  }
}

/* Mobile home-first: hamburger hidden on mobile, back arrow shown when in room */
.sidebar__nav-toggle--menu {
  margin-inline-start: auto;

  @media (max-width: 67.4375rem) {
    .sidebar & {
      display: none !important;
    }
  }
}

.sidebar__nav-toggle--back {
  display: none !important;
  order: -1;
  margin-inline-end: var(--inline-space-half);

  @media (max-width: 67.4375rem) {
    .sidebar.in-room & {
      display: flex !important;
    }
  }
}

/* Hide page-level back links on mobile when the sidebar toggle back button is visible */
.nav__back-link {
  @media (max-width: 67.4375rem) {
    .sidebar.in-room & {
      display: none;
    }

    .sidebar.in-room.voice-calls-index-page &,
    .sidebar.in-room.voice-call-transcript-page &,
    .sidebar.in-room.ai-settings-page & {
      display: flex;
    }
  }
}

@media (max-width: 67.4375rem) {
  .sidebar.in-room.voice-calls-index-page .sidebar__nav-toggle--back,
  .sidebar.in-room.voice-call-transcript-page .sidebar__nav-toggle--back,
  .sidebar.in-room.ai-settings-page .sidebar__nav-toggle--back {
    display: none !important;
  }
}

#nav {
  align-items: center;
  column-gap: var(--inline-space-half);
  display: flex;
  inset: 0 0 auto 0;
  inset-inline-start: var(--content-inline-offset-start, var(--sidebar-width));
  inset-inline-end: var(--content-inline-offset-end, 0vw);
  padding-block-end: var(--block-space);
  padding-block-start: calc(var(--block-space) + var(--safe-area-inset-top));
  padding-inline: calc(var(--inline-space) * 1.5) var(--inline-space-double);
  pointer-events: none;
  position: fixed;
  row-gap: var(--block-space);
  z-index: 10;

  @media (max-width: 67.4375rem) {
    padding-block-start: calc((var(--block-space) * 1.5) + var(--safe-area-inset-top));
  }

  &:has(.room--current) {
    padding-inline: var(--inline-space);

    .room--current {
      --btn-border-radius: 0.5em;
      --num-buttons: 1;

      min-block-size: var(--btn-size);

      /* Mobile: compact name, buttons pushed right */
      @media (max-width: 67.4375rem) {
        flex: 1 1 auto;
        min-inline-size: 0;
        min-block-size: unset;
        overflow: hidden;
        padding-block: calc(0.25em + ((var(--user-font-scale, 1) - 1) * 0.12em));
        padding-inline: calc(0.6em + ((var(--user-font-scale, 1) - 1) * 0.25em));
      }

      .room__contents {
        .account-has-logo & {
          --num-buttons: 2;
        }

        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 0.1em;
        max-inline-size: calc(100dvw - (var(--btn-size) * var(--num-buttons)) - (var(--btn-size) + max(var(--inline-space), 1vw)) - ((var(--inline-space) + 1.8em) * 2) - var(--sidebar-width) - var(--inline-space) * var(--num-buttons));

        /* Mobile: compact, left-aligned */
        @media (max-width: 67.4375rem) {
          align-items: start;
          inline-size: 100%;
          max-inline-size: none;
          min-inline-size: 0;
        }

        .room__name {
          min-inline-size: 0;
        }

        .last-seen-status {
          font-size: calc(0.7rem * var(--user-font-scale, 1));
          line-height: 1.4; /* avoid clipping descenders / round glyphs (e.g. "o") on small screens */
          padding-block-end: 0.1em;
        }
      }
    }

    @media (min-width: 67.5rem) {
      .room--current {
        margin-inline-start: calc(var(--inline-space) + 1vw);
        margin-inline-end: -3vw;

        body.sidebar-right & {
          margin-inline-end: 0;
          margin-inline-start: calc(var(--inline-space) + 0.5vw);
        }

        .account-logo + & {
          margin-inline-end: 0;

          body.sidebar-right & {
            margin-inline-start: 0;
          }
        }
      }

      .account-logo {
        margin-inline-end: calc((var(--btn-size) / 2 + var(--inline-space)) * -1);

        body.sidebar-right & {
          margin-inline-end: 0;
          margin-inline-start: calc((var(--btn-size) / 2 + var(--inline-space)) * -1);
        }
      }
    }
  }

  .sidebar & {
    @media (max-width: 67.4375rem) {
      padding-block-end: var(--block-space-half);
      padding-block-start: calc(var(--block-space-half) + var(--safe-area-inset-top));

      &::before {
        background: linear-gradient(180deg, oklch(var(--lch-white)) 20%, oklch(var(--lch-white) / 0) 100%);
        content: "";
        inset: 0;
        position: absolute;
        z-index: -1;
      }
    }
  }
}

#nav .nav__actions {
  --nav-action-scale: clamp(1, var(--user-font-scale, 1), 1.45);

  flex-shrink: 0;
  margin-inline-start: auto;
}

#nav .nav__actions .btn {
  --btn-size: calc(2.65rem * var(--nav-action-scale));
}

html[data-theme="mideval"] #nav .room--current {
  --btn-background: var(--mideval-parchment);
  --btn-border-color: var(--mideval-parchment-edge);
  --btn-color: var(--mideval-ink);
  --hover-color: var(--mideval-brass);

  background-image:
    linear-gradient(180deg, oklch(93% 0.03 85 / 0.9), oklch(82% 0.05 78 / 0.9)),
    radial-gradient(140% 140% at 12% 0%, oklch(96% 0.03 90 / 0.35), transparent 60%),
    radial-gradient(160% 160% at 88% 100%, oklch(70% 0.05 70 / 0.25), transparent 65%),
    repeating-linear-gradient(35deg, oklch(96% 0.02 85 / 0.12) 0 2px, transparent 2px 5px);
  background-blend-mode: multiply;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.18),
    0 1px 2px oklch(0% 0 0 / 0.25);
}

html[data-theme="mideval"] #nav .btn:not(.room--current) {
  --btn-background: var(--mideval-parchment);
  --btn-border-color: var(--mideval-parchment-edge);
  --btn-color: var(--mideval-ink);
  --btn-icon-filter: var(--btn-icon-filter-dark);
  --hover-color: var(--mideval-brass);

  background-image:
    linear-gradient(180deg, oklch(93% 0.03 85 / 0.9), oklch(82% 0.05 78 / 0.9));
  background-blend-mode: multiply;
  box-shadow:
    inset 0 0 0 1px oklch(100% 0 0 / 0.18),
    0 1px 2px oklch(0% 0 0 / 0.25);
}

html[data-theme="mideval"] #nav .btn--plain,
html[data-theme="mideval"] #nav .btn--borderless {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-icon-filter: var(--btn-icon-filter-dark);

  background-image: none;
  box-shadow: none;
}

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

/* Disabled call button styles */
#nav .btn--icon:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#nav .call-action {
  pointer-events: auto;
  position: relative;
}

#nav .call-action[open] .call-action-menu {
  display: grid;
}

#nav .call-action-menu {
  background-color: var(--color-bg);
  border-radius: 0.75em;
  display: none;
  gap: 0.4em;
  inset-block-start: calc(var(--btn-size) + 0.35em);
  inset-inline-end: 0;
  inset-inline-start: auto;
  min-inline-size: 11rem;
  max-inline-size: var(--max-width, calc(100vw - (var(--inline-space) * 2)));
  padding: 0.4em;
  pointer-events: auto;
  position: absolute;
  transform: translateX(var(--offset-x, 0px));
  z-index: 15;
}

#nav .popup-orientation-top .call-action-menu {
  inset-block-end: calc(var(--btn-size) + 0.35em);
  inset-block-start: auto;
}

#nav .call-action-menu__button {
  --btn-border-radius: 0.55em;
  --btn-padding: 0.45em 0.6em;

  align-items: center;
  gap: 0.5em;
  inline-size: 100%;
  justify-content: flex-start;
}

#nav .nav__overflow-trigger {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

#nav .call-action-menu__section-label {
  color: var(--color-text-muted);
  font-size: var(--txt-small);
  font-weight: 600;
  padding: 0.25rem 0.6rem 0;
}

#nav .ai-page__companion-prompts-menu {
  inline-size: min(32rem, calc(100vw - (var(--inline-space) * 2)));
  max-inline-size: min(32rem, calc(100vw - (var(--inline-space) * 2)));
  min-inline-size: 19rem;
  padding: 0.6rem;
}

#nav .ai-page__companion-prompts-form {
  display: grid;
  gap: 0.45rem;
}

#nav .ai-page__companion-prompts-label {
  font-size: 0.78rem;
  font-weight: 700;
}

#nav .ai-page__companion-prompts-textarea {
  --input-padding: 0.45rem 0.55rem;

  font-size: 0.86rem;
  line-height: 1.3;
  min-block-size: 5.2rem;
}

#nav .ai-page__companion-prompts-status {
  min-block-size: 1.2em;
}

#nav .call-action-menu__divider {
  background-color: color-mix(in srgb, var(--color-text) 12%, transparent);
  block-size: 1px;
  margin: 0.15rem 0.35rem;
}

#nav .daily-summary-menu {
  inline-size: min(22rem, calc(100vw - (var(--inline-space) * 2)));
  max-block-size: min(70vh, 28rem);
  min-inline-size: 18rem;
  max-inline-size: min(22rem, calc(100vw - (var(--inline-space) * 2)));
  overflow-y: auto;
  overscroll-behavior: contain;
}

#nav .daily-summary-menu__form {
  display: block;
}

#nav .daily-summary-menu__button {
  align-items: flex-start;
  display: flex;
  gap: 0.6rem;
  text-align: left;
  width: 100%;
}

#nav .daily-summary-menu__rundown {
  display: grid;
}

#nav .daily-summary-menu__rundown > summary {
  list-style: none;
}

#nav .daily-summary-menu__rundown > summary::-webkit-details-marker {
  display: none;
}

#nav .daily-summary-menu__content {
  display: grid;
  gap: 0.1rem;
  justify-items: flex-start;
}

#nav .daily-summary-menu__title {
  font-weight: 600;
}

#nav .daily-summary-menu__title,
#nav .daily-summary-menu__meta,
#nav .daily-summary-menu__content {
  width: 100%;
}

#nav .daily-summary-menu__chevron {
  flex-shrink: 0;
  margin-inline-start: auto;
  transition: transform 0.15s ease;
}

#nav .daily-summary-menu__rundown[open] .daily-summary-menu__chevron {
  transform: rotate(180deg);
}

#nav .daily-summary-menu__companions {
  display: grid;
  gap: 0.4rem;
  padding: 0.1rem 0.35rem 0.45rem 2rem;
}

#nav .daily-summary-menu__companion-form {
  display: block;
}

#nav .daily-summary-menu__companion-button {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  inline-size: 100%;
  justify-content: flex-start;
  min-block-size: 2.8rem;
  padding: 0.45rem 0.6rem;
  text-align: left;
}

#nav .daily-summary-menu__companion-avatar {
  --avatar-size: 2rem;

  flex-shrink: 0;
}

#nav .daily-summary-menu__companion-name {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sidebar__nav-toggle .nav__icon,
#nav .nav__icon {
  --nav-icon-size-base: 1.25rem;
  --nav-icon-size: calc(var(--nav-icon-size-base) * var(--user-font-scale, 1));

  block-size: var(--nav-icon-size);
  inline-size: var(--nav-icon-size);
  max-inline-size: none;
}

.sidebar__nav-toggle .nav__icon:not(.colorize--black):not(.colorize--white),
#nav .nav__icon:not(.colorize--black):not(.colorize--white) {
  filter: var(--btn-icon-filter, invert(100%));
}

#nav .nav__icon--small {
  --nav-icon-size-base: 1.1rem;
}

.pinned-messages-toggle {
  pointer-events: auto;
}

.pinned-messages-toggle--active {
  --btn-background: var(--color-selected-dark);
  --btn-border-color: var(--color-selected-dark);
  --btn-color: var(--color-text-reversed);
  --btn-icon-filter: var(--btn-icon-filter-light);
  --hover-color: var(--color-selected-dark);
}

/* Turbo Native touch target improvements */
@media (max-width: 67.4375rem) {
  #nav .btn {
    min-height: 44px;
    min-width: 44px;
  }

  #nav .btn--icon {
    min-height: 44px;
    min-width: 44px;
  }

  #nav .nav__actions {
    gap: calc(var(--inline-space-half) + ((var(--user-font-scale, 1) - 1) * 0.2em));
  }

  #nav .call-action-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    max-inline-size: calc(100vw - (var(--inline-space) * 2));
  }
}
/* Desktop-only control for collapsing/expanding the main sidebar */
.sidebar__desktop-toggle {
  display: none;
  flex-shrink: 0;
  min-block-size: 44px;
  min-inline-size: 44px;
  pointer-events: auto;
}

@media (min-width: 67.5rem) {
  body.sidebar-right:not(.has-left-column) .sidebar__desktop-toggle {
    display: none;
  }

  .sidebar__desktop-toggle {
    --btn-background: color-mix(in oklab, var(--color-bg) 72%, transparent);
    --btn-border-color: color-mix(in oklab, var(--color-border-dark) 68%, transparent);
    --btn-padding: 0.2rem 0.4rem;
    --btn-icon-filter: var(--btn-icon-filter-light);

    align-items: center;
    border-radius: 0;
    box-shadow: 0 8px 20px -18px oklch(var(--lch-always-black) / 0.82);
    column-gap: 0.28rem;
    display: inline-flex;
    inset-block-start: var(--safe-area-inset-top);
    inline-size: fit-content;
    justify-content: flex-start;
    line-height: 1;
    max-inline-size: min(22rem, calc(var(--sidebar-width) - 1rem));
    min-block-size: 1.8rem;
    overflow: hidden;
    position: fixed;
    z-index: 12;
  }

  body.sidebar:not(.sidebar-right) .sidebar__desktop-toggle {
    inset-inline-start: 0.5rem;
  }

  body.sidebar.sidebar-right .sidebar__desktop-toggle {
    inset-inline-end: 0.5rem;
  }

  body.sidebar:not(.sidebar-collapsed):not(.sidebar-right) .sidebar__desktop-toggle {
    inset-inline-start: 0;
    inline-size: var(--sidebar-width);
    max-inline-size: var(--sidebar-width);
  }

  body.sidebar:not(.sidebar-collapsed).sidebar-right .sidebar__desktop-toggle {
    inset-inline-end: 0;
    inline-size: var(--sidebar-width);
    max-inline-size: var(--sidebar-width);
  }

  body.sidebar.sidebar-collapsed:not(.sidebar-right) .sidebar__desktop-toggle {
    inset-inline-start: 0.25rem;
    inset-block-start: var(--safe-area-inset-top);
    inline-size: auto;
    max-inline-size: none;
    z-index: 9;
  }

  body.sidebar.sidebar-right.sidebar-collapsed .sidebar__desktop-toggle {
    inset-inline-end: 0.25rem;
    inset-block-start: var(--safe-area-inset-top);
    inline-size: auto;
    max-inline-size: none;
    z-index: 9;
  }

  body.sidebar.sidebar-collapsed .sidebar__desktop-toggle,
  .sidebar__desktop-toggle.sidebar__desktop-toggle--icon-only {
    --btn-padding: 0.2rem;

    min-block-size: 1.8rem;
    min-inline-size: 1.8rem;
  }

  body.sidebar.sidebar-collapsed .sidebar__desktop-toggle .nav__icon,
  .sidebar__desktop-toggle.sidebar__desktop-toggle--icon-only .nav__icon {
    --nav-icon-size-base: 0.82rem;
  }

  body.sidebar.sidebar-collapsed .sidebar__desktop-toggle-copy,
  .sidebar__desktop-toggle.sidebar__desktop-toggle--icon-only .sidebar__desktop-toggle-copy {
    display: none;
  }

  .sidebar__desktop-toggle-copy {
    color: var(--color-text);
    font-size: calc(0.56rem * var(--user-font-scale, 1));
    font-weight: 700;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sidebar__desktop-toggle .nav__icon {
    --nav-icon-size-base: 0.9rem;

    transition: transform 130ms ease;
  }

  body.sidebar.sidebar-collapsed .sidebar__desktop-toggle .nav__icon {
    transform: rotate(180deg);
  }

}