/* static/css/aq_tabbar.css */
.aq-tabbar {
  display: none;
}
@media (max-width: 768px), (pointer: coarse) {
  /* 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;
    /* Translucent so the backdrop blur actually reads as frosted glass. */
    background: rgba(10, 10, 10, 0.42);
    border: 1px solid var(--white-line);
    border-radius: 14px;
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
  }
  [data-theme="light"] .aq-tabbar {
    background: rgba(241, 237, 227, 0.5);
  }
  .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: var(--accent-glow);
  }
  .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 var(--accent-strong);
  }
  .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: 768px), (pointer: coarse) {
  body.has-aq-shell main#app-content {
    /* The floating bar sits at bottom: 10px + safe-area inset and is ~68px
       tall, so content must clear both the bar and the inset or the last rows
       hide under it on gesture-nav / notched phones. */
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }
}