/*
  57-app-nav.css — v45.8 the bottom bar, a group's channels and Menu
  (design/shell/Main, Sheet, Menu, CoreOnly; design/icons/Main, Menu).

  41-codex-refinement.css forces .bottom-nav-inner to a flex scroller with
  !important; the slots need a grid, so these rules carry !important at a
  higher specificity. Skuttles mode (05) turns the nav into a keyboard and is
  left to its own rules.
*/

body:not(.skuttles-mode) .bottom-nav { background: #1f1712; border-top: 1px solid #3a2a1d; padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
body:not(.skuttles-mode) .bottom-nav .bottom-nav-inner.nv-slots {
  display: grid !important;
  grid-template-columns: repeat(var(--slots, 5), minmax(0, 1fr)) !important;
  gap: 4px; padding: 0; margin: 0 auto;
  width: 100% !important; max-width: 560px !important;
  overflow: visible; cursor: auto; justify-content: stretch !important;
}
.nv-slot {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 56px; padding: 0 2px; border: 0; border-radius: 14px;
  background: transparent; color: #bfae8c; font: inherit; cursor: pointer;
}
.nv-slot .nv-label { font-size: 13px; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nv-slot .nv-bar { position: absolute; top: -6px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: transparent; }
.nv-slot.is-on { color: #e8c069; background: #33261b; }
.nv-slot.is-on .nv-bar { background: #c18a2a; }
.nv-slot:focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }
/* 50's scroll arrows belong to the old scrolling rail. */
.bottom-nav:has(.nv-slots) .nav-rail-arrow { display: none !important; }
/* While a group's channels are open the bottom bar stays live above the backdrop. */
/* Only for the channel sheet: the Day and Sync sheets reach the bottom edge. */
body.cb-sheet-open:has(#cbSheet.cb-sheet-channels:not([hidden])) .bottom-nav { z-index: 150; }

/* ---------- a group's channels ---------- */
.cb-sheet.cb-sheet-channels {
  top: auto; left: 10px; right: 10px; gap: 2px; padding: 12px 8px 8px;
  max-height: calc(100dvh - 160px); border-radius: 20px; box-shadow: 0 -8px 30px rgba(0,0,0,.4);
}
@media (min-width: 580px) { .cb-sheet.cb-sheet-channels { left: 50%; right: auto; width: 420px; transform: translateX(-50%); margin: 0; } }
.nv-sheet-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 10px 8px; }
.nv-sheet-title { font-size: 18px; font-weight: 700; }
.nv-sheet-aside { font-size: 13px; color: #5c4a30; }
.nv-channels { display: flex; flex-direction: column; gap: 2px; }
.nv-channel.is-on { background: #efe4c3; border-color: #ddd0ab; }
.nv-channel { min-height: 60px; }

/* ---------- Menu ---------- */
#screen-menu { padding-bottom: 24px; }
.mn-head { display: flex; align-items: center; gap: 12px; padding: 8px 2px 14px; margin-bottom: 8px; border-bottom: 1px solid #3a2a1d; }
.mn-badge { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #c18a2a; color: #1f1712; font-size: 19px; font-weight: 800; }
.mn-head-text { min-width: 0; }
.mn-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: #e8c069; font: inherit; font-size: 19px; font-weight: 700; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-who { font-size: 13px; color: #bfae8c; }
.mn-list { display: flex; flex-direction: column; gap: 2px; }
.mn-group {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px;
  padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
  color: #f1e4c4; font: inherit; text-align: left; cursor: pointer;
}
.mn-group > .cx-icon { flex-shrink: 0; color: #e8c069; }
.mn-group-name { flex: 1 1 auto; font-size: 16px; font-weight: 700; }
.mn-group.is-here { background: #2a1e15; }
.mn-group.is-here::before { content: ""; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: #e8c069; }
.mn-dot { width: 8px; height: 8px; border-radius: 999px; background: #e0705c; }
.mn-chev { flex-shrink: 0; fill: none; stroke: #bfae8c; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.mn-chev.is-open { transform: rotate(90deg); }
.mn-channels { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 8px 22px; padding-left: 12px; border-left: 2px solid #6e5b40; }
.mn-channel {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: #d9c9a6; font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer;
}
.mn-channel .cx-icon { flex-shrink: 0; color: #bfae8c; }
.mn-channel.is-on { background: #e8c069; color: #1f1712; font-weight: 700; }
.mn-channel.is-on .cx-icon { color: #1f1712; }
.mn-group:hover, .mn-channel:not(.is-on):hover { background: #2a1e15; }
.mn-group:focus-visible, .mn-channel:focus-visible, .mn-name:focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mn-chev { transition: none; } }