/* A compact, labeled mobile dock. Its collapse behavior is managed by mobile-nav.js. */
.mobile-nav { display: none; }
@media (max-width: 768px) {
  .mobile-nav {
    position: fixed;
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 14px);
    background: var(--surface-1, #fff);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(15, 23, 42, .12));
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .mobile-nav-btn {
    min-width: 68px;
    width: auto;
    height: 50px;
    padding: 5px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 10px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    box-shadow: none;
  }
  .mobile-nav-btn i { display: none; }
  .mobile-nav-btn::before { font-family: system-ui, sans-serif; font-size: 20px; line-height: 1; }
  .mobile-nav-btn[onclick*="index.html"]::before { content: "⌂"; }
  .mobile-nav-btn[onclick*="toggleMobileMenu"]::before { content: "☰"; }
  .mobile-nav-btn[onclick*="toggleSettings"]::before { content: "⚙"; }
  .mobile-nav-btn::after { font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.1; }
  .mobile-nav-btn[onclick*="index.html"]::after { content: 'Home'; }
  .mobile-nav-btn[onclick*="toggleMobileMenu"]::after { content: 'Menu'; }
  .mobile-nav-btn[onclick*="toggleSettings"]::after { content: 'Settings'; }
  .mobile-nav-btn:hover { background: var(--surface-2, #f4f6f8); color: var(--text-color); }
  .mobile-nav-btn.active,
  .mobile-nav-btn[aria-expanded="true"] {
    background: var(--action-bg, #1459a8);
    color: var(--action-ink, #fff);
    border-color: var(--action-bg, #1459a8);
  }
  .mobile-nav.collapsed {
    width: 54px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    border-radius: var(--radius-md, 12px) !important;
    cursor: pointer;
  }
  .mobile-nav.collapsed .mobile-nav-btn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .mobile-nav.collapsed::before {
    content: '•••';
    position: absolute;
    color: var(--accent-color);
    font-size: 19px;
    letter-spacing: 3px;
    padding-left: 3px;
    line-height: 1;
  }
  .mobile-nav:not(.collapsed) .mobile-nav-btn { opacity: 1; visibility: visible; pointer-events: auto; }
  body.fullscreen-active .mobile-nav { display: none !important; }
}