/* ArcReady - phone bottom tab bar (v1.0). Phones only (<= 768px). */
:root { --tabbar-h: 58px; }
.tb-bar, .tb-sheet, .tb-backdrop { display: none; }

@media (max-width: 768px) {
  .tb-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px); background: #1A1A1A; border-top: 2px solid #CC0000; box-shadow: 0 -2px 10px rgba(0,0,0,.3); }
  .tb-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 0;
    background: none; border: 0; border-radius: 0; color: #bbb; font: 600 .66rem/1.1 system-ui, -apple-system, sans-serif; text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .tb-item .tb-ico { font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; height: 24px; }
  .tb-item.tb-active { color: #fff; box-shadow: inset 0 3px 0 #FFD700; }
  .tb-item:focus-visible { outline: 2px solid #FFD700; outline-offset: -3px; }

  html.has-tabbar body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  html.tb-hide .tb-bar { display: none; }

  /* Lift other fixed bottom elements above the bar */
  html.has-tabbar .arcready-consent-banner { bottom: calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  html.has-tabbar #ai-chat-bubble { bottom: calc(10px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); right: 10px; }
  html.has-tabbar #feedback-system { bottom: calc(62px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); right: 14px; }
  /* Smaller, label-free floating buttons so they stay out of the way on phones */
  html.has-tabbar #ai-chat-toggle { width: 44px; height: 44px; font-size: 19px; }
  html.has-tabbar #feedback-toggle { width: 36px; height: 36px; font-size: 16px; opacity: .85; }
  html.has-tabbar .ai-fab-label, html.has-tabbar .fab-label { display: none; }
  html.has-tabbar .toast { bottom: calc(32px + var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }

  .tb-backdrop { display: block; position: fixed; inset: 0; z-index: 940; background: rgba(0,0,0,.5); }
  .tb-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; max-height: 80vh; overflow-y: auto;
    padding: 8px 12px calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px)); background: #1A1A1A; color: #fff;
    border-radius: 14px 14px 0 0; border-top: 2px solid #CC0000; }
  .tb-sheet[hidden], .tb-backdrop[hidden] { display: none; }
  .tb-sheet-title { margin: 6px 4px 8px; font: 800 .72rem system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FFD700; }
  .tb-sheet a, .tb-sheet button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 8px; margin: 0;
    background: none; border: 0; border-bottom: 1px solid #333; border-radius: 0; color: #fff; font: 600 1rem system-ui, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
  .tb-sheet a:last-child, .tb-sheet button:last-child { border-bottom: 0; }
  .tb-sheet .tb-ico { width: 1.6em; text-align: center; }
}
@media print { .tb-bar, .tb-sheet, .tb-backdrop { display: none !important; } }
