/* ============================================================================
   AQUA HOMESPACE - INTERNAL NAVIGATION
   ============================================================================ */

body.internal-page {
  --internal-nav-rail-width: 92px;
  --internal-nav-panel-width: 292px;
  --internal-topbar-height: 76px;
  --internal-topbar-gap: 0px;
  --internal-nav-speed-fast: 110ms ease-out;
  --internal-nav-speed-base: 180ms ease-out;
  padding-left: var(--internal-nav-rail-width);
  padding-top: calc(var(--internal-topbar-height) + var(--internal-topbar-gap));
  transition: padding-left var(--internal-nav-speed-base);
}

body.internal-page.internal-nav-open {
  padding-left: calc(var(--internal-nav-rail-width) + var(--internal-nav-panel-width));
}

.internal-nav-shell {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--internal-nav-rail-width);
  overflow: hidden;
  transition: width var(--internal-nav-speed-base);
  z-index: 1300;
}

body.internal-nav-open .internal-nav-shell {
  width: calc(var(--internal-nav-rail-width) + var(--internal-nav-panel-width));
}

.internal-topbar {
  position: fixed;
  top: 0;
  left: var(--internal-nav-rail-width);
  right: 0;
  height: var(--internal-topbar-height);
  background: var(--main, #00b5ef);
  box-shadow: 0 10px 22px rgba(33, 37, 46, 0.18);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  z-index: 1200;
  transition: left var(--internal-nav-speed-base);
}

.internal-topbar::after {
  content: '';
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 75px;
  height: 5px;
  background: var(--accent);
}

body.internal-nav-open .internal-topbar {
  left: calc(var(--internal-nav-rail-width) + var(--internal-nav-panel-width));
}

.internal-topbar-left {
  display: grid;
  align-items: center;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.topbar-rotator-item {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-rotator-item.is-visible {
  opacity: 1;
}

.internal-topbar-greeting {
  font-family: var(--font-family-headlines);
  font-size: clamp(0.88rem, 1.6vw, 1.08rem);
  letter-spacing: 0.01em;
  color: #ffffff;
}

.internal-topbar-quote {
  font-family: var(--font-family-headlines);
  font-size: clamp(0.76rem, 1.2vw, 0.9rem);
  font-style: italic;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.01em;
}

.internal-topbar-quote-author {
  opacity: 0.75;
  font-style: normal;
}

.internal-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.internal-topbar-icon-btn,
.internal-topbar-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: #ffffff;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--internal-nav-speed-fast), box-shadow var(--internal-nav-speed-fast), transform var(--internal-nav-speed-fast);
}

/* Unread-count badge — shared by the desktop and mobile bell buttons. */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0483e;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #ffffff;
}

.internal-topbar-icon-btn:hover {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.internal-topbar-avatar:hover {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 7px 16px rgba(7, 181, 124, 0.35);
  transform: translateY(-1px);
}

.internal-topbar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-family: var(--font-family-headlines);
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  background: linear-gradient(155deg, #00b5ef 0%, #07b57c 100%);
  border-color: rgba(255, 255, 255, 0.6);
}

.internal-topbar-palm-bg {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.internal-nav-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: var(--internal-nav-rail-width);
  height: 100vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 248, 249, 0.84) 100%);
  border-right: 1px solid #dddfe3;
  box-shadow: 8px 0 18px rgba(51, 56, 66, 0.06);
  padding: 0 10px 14px;
}

.internal-nav-rail-footer {
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.internal-nav-badge-btn {
  width: 72px;
  height: 90px;
  border: 0;
  border-radius: 0 0 12px 12px;
  background: var(--main);
  box-shadow: var(--drop-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.internal-nav-badge-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.internal-nav-hamburger {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid #d8dbe0;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(46, 53, 64, 0.09);
  transition: border-color var(--internal-nav-speed-fast), box-shadow var(--internal-nav-speed-fast), background var(--internal-nav-speed-fast);
}

.internal-nav-hamburger:hover {
  border-color: #cbd1d8;
}

.internal-nav-hamburger-lines {
  position: relative;
  width: 20px;
  height: 14px;
}

.internal-nav-hamburger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background: #2e333d;
  transform-origin: center;
  transition: transform var(--internal-nav-speed-fast), opacity var(--internal-nav-speed-fast), top var(--internal-nav-speed-fast);
}

.internal-nav-hamburger-lines span:nth-child(1) {
  top: 0;
}

.internal-nav-hamburger-lines span:nth-child(2) {
  top: 6px;
}

.internal-nav-hamburger-lines span:nth-child(3) {
  top: 12px;
}

body.internal-nav-open .internal-nav-hamburger-lines span:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}

body.internal-nav-open .internal-nav-hamburger-lines span:nth-child(2) {
  opacity: 0;
}

body.internal-nav-open .internal-nav-hamburger-lines span:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

.internal-nav-panel {
  position: absolute;
  top: 0;
  left: var(--internal-nav-rail-width);
  width: var(--internal-nav-panel-width);
  height: 100vh;
  background: linear-gradient(180deg, #fbfbfc 0%, #f1f2f4 100%);
  border-right: 1px solid #d8dbe0;
  box-shadow: 10px 0 22px rgba(29, 33, 40, 0.12);
  transform: translateX(-16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform var(--internal-nav-speed-base), opacity var(--internal-nav-speed-fast), visibility var(--internal-nav-speed-fast);
  padding: 124px 20px 24px;
  display: flex;
  flex-direction: column;
}

body.internal-nav-open .internal-nav-panel {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.internal-nav-panel-header {
  margin-bottom: 16px;
}

.internal-nav-subtitle {
  margin: 0;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-headlines);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d7380;
}

.internal-nav-divider {
  margin: 10px 0 0;
  border: 0;
  border-top: 1px solid #dfe2e7;
}

.internal-nav-list {
  list-style: none;
  margin: 0;
  padding: 0 0 25px;
  display: grid;
  gap: 10px;
}

.internal-nav-logout-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid #d5d9df;
  background: #ffffff;
  color: #2e333d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--internal-nav-speed-fast), box-shadow var(--internal-nav-speed-fast), color var(--internal-nav-speed-fast);
}

.internal-nav-logout-btn:hover {
  border-color: #b7bec8;
  box-shadow: 0 3px 10px rgba(46, 53, 64, 0.12);
}

.internal-nav-link {
  display: block;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--line-faint);
  color: var(--text-main);
  font-family: var(--font-family-headlines);
  font-size: 1.08rem;
  letter-spacing: 0.001em;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.internal-nav-link:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  box-shadow: 0 8px 18px rgba(29, 33, 40, 0.1);
  transform: translateX(2px);
}

.internal-nav-link.is-active {
  border-color: var(--main);
  background: var(--main);
  color: var(--text-on-main);
}

/* ── Mobile-only action bar (hidden on desktop) ──────────────────────── */

.mobile-bar-actions {
  display: none;
}

/* ── Hotbar row wrapper (desktop: invisible to layout; mobile: see below) ── */

.nav-hotbar-row {
  display: contents;
}

/* ── Hotbar rail slots ────────────────────────────────────────────────── */

.nav-hotbar-slots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.nav-hotbar-slot {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #d8dbe0;
  background: #ffffff;
  color: #2e333d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(46, 53, 64, 0.07);
  transition: border-color var(--internal-nav-speed-fast), box-shadow var(--internal-nav-speed-fast), color var(--internal-nav-speed-fast), transform var(--internal-nav-speed-fast);
}

.nav-hotbar-slot:hover {
  border-color: var(--main, #00b5ef);
  box-shadow: 0 4px 14px rgba(0, 181, 239, 0.18);
  transform: scale(1.06);
  color: var(--main, #00b5ef);
}

.nav-hotbar-slot.is-active {
  border-color: var(--main, #00b5ef);
  background: var(--main, #00b5ef);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 181, 239, 0.25);
}

/* ── Hotbar add button ────────────────────────────────────────────────── */

#navHotbarAddBtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px dashed #c4c8cf;
  background: transparent;
  color: #9ba2ad;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--internal-nav-speed-fast), color var(--internal-nav-speed-fast), background var(--internal-nav-speed-fast);
}

#navHotbarAddBtn:hover {
  border-color: var(--main, #00b5ef);
  color: var(--main, #00b5ef);
  background: rgba(0, 181, 239, 0.06);
}

/* ── Hotbar picker panel ─────────────────────────────────────────────── */

.nav-hotbar-picker {
  position: fixed;
  left: calc(var(--internal-nav-rail-width) + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  width: 260px;
  background: var(--surface, #ffffff);
  border: 1px solid var(--line-soft, #dfe2e7);
  /* Popup panel — exempt from the app-wide sharp-card rule. */
  border-radius: var(--radius-accent, 14px);
  box-shadow: 0 16px 40px rgba(29, 33, 40, 0.16), 0 2px 8px rgba(29, 33, 40, 0.08);
  z-index: 1400;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms;
  padding: 16px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.nav-hotbar-picker.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s 0s;
}

.nav-hotbar-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nav-hotbar-picker-title {
  margin: 0;
  font-family: var(--font-family-headlines);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-main);
}

.nav-hotbar-picker-count {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-family-headlines);
  white-space: nowrap;
}

.nav-hotbar-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 12px;
}

.nav-hotbar-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px;
  border: 1px solid var(--line-soft, #dfe2e7);
  border-radius: var(--radius-sm, 4px);
  background: var(--light-mode-bg, #f9fafb);
  cursor: pointer;
  transition: border-color var(--internal-nav-speed-fast), background var(--internal-nav-speed-fast), color var(--internal-nav-speed-fast);
  font-family: var(--font-family-headlines);
  font-size: 0.72rem;
  line-height: 1.2;
  color: var(--text-main);
  text-align: center;
}

.nav-hotbar-picker-item:hover:not(:disabled) {
  border-color: var(--line-strong, #c8cdd5);
  background: var(--surface, #ffffff);
}

.nav-hotbar-picker-item.is-selected {
  border-color: var(--main, #00b5ef);
  background: rgba(0, 181, 239, 0.07);
  color: var(--main, #00b5ef);
}

.nav-hotbar-picker-item:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.nav-hotbar-picker-icon {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-hotbar-picker-footer {
  display: flex;
  gap: 8px;
}

.nav-hotbar-picker-save {
  flex: 1;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: var(--main, #00b5ef);
  color: #ffffff;
  font-family: var(--font-family-headlines);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--internal-nav-speed-fast), box-shadow var(--internal-nav-speed-fast);
}

.nav-hotbar-picker-save:hover {
  background: #009fd4;
  box-shadow: 0 4px 10px rgba(0, 181, 239, 0.28);
}

.nav-hotbar-picker-cancel {
  padding: 8px 10px;
  border: 1px solid var(--line-soft, #dfe2e7);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-family-headlines);
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color var(--internal-nav-speed-fast), background var(--internal-nav-speed-fast);
}

.nav-hotbar-picker-cancel:hover {
  border-color: var(--line-strong, #c8cdd5);
  background: var(--light-mode-bg, #f4f4f4);
}

@media (max-width: 900px) {
  body.internal-page {
    --internal-nav-rail-width: 72px;
    --internal-nav-panel-width: min(84vw, 290px);
    --internal-topbar-height: 68px;
    --internal-topbar-gap: 0px;
  }

  .internal-topbar {
    top: 0;
    left: var(--internal-nav-rail-width);
    right: 0;
    padding: 0 14px;
  }

  .internal-topbar::after {
    left: 14px;
  }

  body.internal-nav-open .internal-topbar {
    left: calc(var(--internal-nav-rail-width) + var(--internal-nav-panel-width));
  }

  .internal-topbar-left {
    max-width: 60%;
  }

  .internal-topbar-actions {
    gap: 8px;
  }

  .internal-topbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .internal-topbar-avatar {
    width: 40px;
    height: 40px;
  }

  .internal-nav-rail {
    padding-top: 12px;
  }

  .internal-nav-badge-btn {
    width: 56px;
    height: 70px;
  }

  .internal-nav-badge-logo {
    width: 44px;
    height: 44px;
  }

  .nav-hotbar-picker {
    left: calc(var(--internal-nav-rail-width) + 8px);
    width: min(240px, calc(100vw - var(--internal-nav-rail-width) - 20px));
  }
}

/* ============================================================================
   MOBILE BOTTOM BAR (≤ 799px)
   Sidebar + topbar collapse into a single fixed bar at the bottom.
   The nav panel becomes a full-screen overlay sliding from the left.
   ============================================================================ */

@media (max-width: 799px) {

  /* ── Body padding reset ──────────────────────────────────────────────── */

  body.internal-page {
    --mobile-bar-height: 58px;
    --mobile-hotbar-row-height: 54px;
    --internal-nav-rail-width: 0px;
    --internal-topbar-height: 0px;
    --internal-topbar-gap: 0px;
    padding-bottom: var(--mobile-bar-height);
  }

  /* Prevent the nav-open padding-left from applying on mobile */
  body.internal-page.internal-nav-open {
    padding-left: 0;
  }

  /* Dim the page content behind the open nav panel */
  body.internal-nav-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mobile-bar-height);
    background: rgba(16, 20, 28, 0.42);
    z-index: 1299;
  }

  /* ── Hide topbar (replaced by bottom bar) ────────────────────────────── */

  .internal-topbar {
    display: none;
  }

  /* ── Nav shell → bottom bar container ───────────────────────────────── */

  .internal-nav-shell {
    inset: auto 0 0 0;
    width: 100%;
    height: var(--mobile-bar-height);
    overflow: visible;
  }

  body.internal-nav-open .internal-nav-shell {
    width: 100%;
  }

  /* ── Rail → horizontal bottom bar ───────────────────────────────────── */

  .internal-nav-rail {
    flex-direction: row;
    width: 100%;
    height: var(--mobile-bar-height);
    padding: 0 12px;
    border-right: none;
    border-top: 1px solid #dddfe3;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -4px 18px rgba(33, 37, 46, 0.1);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .internal-nav-badge-btn,
  .internal-nav-rail-footer {
    display: none;
  }

  .internal-nav-hamburger {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  /* ── Hotbar row → own bar, docked above the main bottom row ──────────── */

  .nav-hotbar-row {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--mobile-hotbar-row-height);
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid #dddfe3;
    box-shadow: 0 -4px 14px rgba(33, 37, 46, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s 0s;
  }

  .nav-hotbar-row.is-auto-hidden {
    opacity: 0;
    transform: translateY(8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms;
  }

  /* ── Hotbar slots → horizontal row, centered ─────────────────────────── */

  .nav-hotbar-slots {
    flex-direction: row;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    align-items: center;
  }

  .nav-hotbar-slots::-webkit-scrollbar {
    display: none;
  }

  .nav-hotbar-slot {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  #navHotbarAddBtn {
    display: inline-flex;
    flex-shrink: 0;
  }

  /* ── Mobile right-side actions ───────────────────────────────────────── */

  .mobile-bar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .mobile-bar-icon-btn {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #d8dde4;
    background: #ffffff;
    color: #2d3542;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 110ms ease-out, box-shadow 110ms ease-out;
  }

  .mobile-bar-icon-btn:hover {
    border-color: #bcc4cf;
    box-shadow: 0 4px 10px rgba(40, 45, 55, 0.12);
  }

  .mobile-bar-avatar {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: linear-gradient(155deg, #00b5ef 0%, #07b57c 100%);
    color: #ffffff;
    font-family: var(--font-family-headlines);
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 110ms ease-out, transform 110ms ease-out;
  }

  .mobile-bar-avatar:hover {
    box-shadow: 0 4px 12px rgba(0, 181, 239, 0.3);
    transform: scale(1.04);
  }

  /* ── Nav panel → full-screen overlay from left ───────────────────────── */

  .internal-nav-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--mobile-bar-height);
    width: 100vw;
    height: auto;
    z-index: 1302;
    transform: translateX(-100%);
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    padding: 36px 20px 20px;
    border-right: none;
    border-bottom: 1px solid #d8dbe0;
    box-shadow: none;
    /* The list has grown substantially (Tasks/Open Tasks/Tasks
       Oversight/Aqua League added alongside everything already here) — on a
       short phone screen it can now be taller than the available height
       between the top padding and the bottom bar, so this needs to scroll
       instead of silently clipping unreachable items. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.internal-nav-open .internal-nav-panel {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: 0 4px 32px rgba(16, 20, 28, 0.18);
  }

  /* Slightly denser than the desktop sidebar's spacing so more items fit
     before scrolling is needed, while staying comfortably tappable. */
  .internal-nav-list {
    gap: 6px;
  }

  .internal-nav-link {
    padding: 11px 14px;
    font-size: 1rem;
  }

  /* ── Hotbar picker panel → above bottom bar, centered ───────────────── */

  .nav-hotbar-picker {
    top: auto;
    bottom: calc(var(--mobile-bar-height) + var(--mobile-hotbar-row-height) + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: min(280px, calc(100vw - 32px));
  }

  .nav-hotbar-picker.is-open {
    transform: translateX(-50%) translateY(0);
  }
}