/* static/css/aq_tabbar.css */
.aq-tabbar {
  display: none;
}
@media (max-width: 919px) {
  /* Sharp rectangular bar (Neo-Scribe consistent) with circular FAB buttons inside. */
  .aq-tabbar {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; left: 12px; right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 50;
    padding: 6px 10px;
    background: rgba(30, 28, 26, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .aq-tab {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    text-decoration: none; cursor: pointer;
    font-family: 'Courier New', monospace;
    min-width: 44px; min-height: 44px;
    transition: color 140ms ease, transform 90ms ease, background-color 140ms ease;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
  }
  .aq-tab:active { transform: scale(0.88); }
  .aq-tab.is-active {
    color: var(--accent-color);
    background: rgba(255, 191, 0, 0.14);
  }
  .aq-tab-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
  }
  .aq-tab-icon svg { width: 100%; height: 100%; display: block; }
  /* Outline default, filled when active. Both pre-rendered so the swap is
     instant (no JS toggle, no layout shift). */
  .aq-tab .aq-tab-icon-filled { display: none; }
  .aq-tab.is-active .aq-tab-icon-outline { display: none; }
  .aq-tab.is-active .aq-tab-icon-filled { display: block; }
  /* Mobile bottom tabs: icon-only. Keep label in DOM for accessibility but hide visually. */
  .aq-tab-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }

  .aq-tab-create {
    width: 56px; height: 56px;
    background: var(--accent-color);
    color: var(--bg-color);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(255, 191, 0, 0.38);
  }
  .aq-tab-create:active { transform: translateY(-4px) scale(0.9); }
  .aq-tab-create.is-active { background: var(--accent-color); color: var(--bg-color); }
  .aq-tab-create .aq-tab-icon { width: 24px; height: 24px; }
}

/* Padding so floating bar doesn't overlap content */
@media (max-width: 919px) {
  body.has-aq-shell main#app-content {
    padding-bottom: 88px;
  }
}