/* ask-ai-dock.css — the sticky "Ask CapraSEO AI about this" bar ───────────────────────────────────────────────────────────────────────── The Ask-AI card is the handoff into chat, and on the report pages it sits in the middle of a very long scroll (12,600px on /health/ at 390px). One swipe past it and nothing on screen points back. The sidebar's "Ask AI" sub-nav item exists, but on a phone it lives behind the drawer — two taps. So: when the card leaves the viewport, a ~56px bar takes its place at the bottom. Avatar, one line, a chevron pointing down at what it jumps to. It deliberately does NOT repeat the model/scope pickers or the input — a second composer in a 56px bar is how it would stop being small. Phone + tablet only. On desktop the column is short enough that the card is a flick away, and a permanent floating bar there is clutter. Behaviour lives in js/ask-ai-dock.js. */ .ask-ai-dock { /* Appended to , never inside .stage — a finished `.anim` entrance animation leaves a transform on the ancestor, which makes it the containing block for fixed descendants in Chromium and would pin this bar to the CARD rather than the viewport. Same trap documented in css/theme.css for the dropdown bottom-sheets. */ position: fixed; left: 12px; right: 12px; bottom: 12px; /* Above the sticky "load this report" gate (60), the nav drawer (60) and its backdrop (55); BELOW .modal (100) and — the one that matters — below .dropdown .menu (120), which at ≤640px becomes a fixed bottom sheet at bottom:12px and IS this card's own model/scope picker. It has to cover the dock, not the reverse. Nothing else occupies 60–100 on the report pages. */ z-index: 90; display: flex; align-items: center; gap: 10px; width: auto; padding: 9px 12px; /* The iPhone home-indicator strip. The background sits on this element, so the inset region is filled rather than showing page content through it — same treatment as the setup wizard's sticky action bar. */ padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px)); font: inherit; text-align: left; cursor: pointer; /* Depth the dark way: a lighter surface, a hairline, and an inset top highlight so it reads as catching light — not a glow, and not a tight shadow that would be invisible on near-black anyway. Every token is redefined in css/light.css, so light theme needs no override. */ color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: inset 0 1px 0 var(--edge-hi), 0 10px 30px -12px rgba(0, 0, 0, 0.7); transform: translateY(0); opacity: 1; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s; } /* Hidden is the resting state — the card is on screen far more often than not. `visibility` is delayed out so the bar isn't a tab stop while it's sliding away, and isn't reachable at all once gone. */ .ask-ai-dock[hidden], .ask-ai-dock:not(.is-on) { display: flex; /* override [hidden]'s display:none so it animates */ visibility: hidden; opacity: 0; transform: translateY(calc(100% + 12px)); pointer-events: none; transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 180ms; } .ask-aid-avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid rgba(var(--wash-rgb), 0.14); box-shadow: inset 0 1px 0 var(--edge-hi); } .ask-aid-label { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; /* One line, always — a wrapping label turns a 56px bar into an 80px one. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Chevron pointing DOWN at what the bar jumps to. This is what stops it reading as a second call-to-action competing with the gold buy gate. */ .ask-aid-chev { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--muted); } .ask-ai-dock:active { transform: scale(0.985); } .ask-ai-dock:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* The nav drawer is a sibling: .app.nav-open is set on .app, and the dock lives on , so no descendant selector reaches it. :has() is already load-bearing in this codebase (.stage:has(.center-scroll) in main.css). */ body:has(.app.nav-open) .ask-ai-dock, body:has(.modal:not([hidden])) .ask-ai-dock { visibility: hidden; opacity: 0; pointer-events: none; } /* Desktop: never. This media query is the GUARANTEE — js/ask-ai-dock.js also gates its observer on the same breakpoint, but only to avoid running one for a bar that can't paint. If the two ever drift, CSS wins and the cost is a wasted observer, not a visible bug. */ @media (min-width: 1001px) { .ask-ai-dock { display: none !important; } } @media (prefers-reduced-motion: reduce) { .ask-ai-dock, .ask-ai-dock:not(.is-on) { transition: none; } .ask-ai-dock:active { transform: none; } }