/* assets/chrome-base.css · reset Round 1 (3 Nov 2026), integrate lane.
   The one cookie bar and the voice-widget stacking for every kit page (a page that links assets/kit.css). chrome.py
   links it right before nav.css, so it overrides the older cookie rules in visuals.css and mobile.css on pages that
   still load them, and the page sheets after kit.css never need their own copy (requests R-CM1, R-B3, R-P1, I-3).
   One look on every page: the ink glass bar of brief 2.4 (glass widely, solid only in the mega-menu panels). */

/* The bar site.js builds (.cookie). site.js sets the top offset itself when the bar rests under the header. */
.cookie{ position:fixed; left:50%; bottom:18px; z-index:1100; width:min(680px, calc(100vw - 28px)); opacity:0;
  transform:translate(-50%, 140%); font-family:var(--font-sans);
  transition:transform var(--dur-slow, .4s) var(--ease-standard, ease), opacity var(--dur-base, .24s) var(--ease-standard, ease); }
.cookie.in{ transform:translateX(-50%); opacity:1; }
.cookie.cookie--top{ bottom:auto; transform:translate(-50%, -24px); }
.cookie.cookie--top.in{ transform:translateX(-50%); }
.cookie__body{ display:flex; align-items:center; gap:16px; padding:14px 16px; border-radius:16px; color:#fff;
  background:rgba(10,10,12,.86); -webkit-backdrop-filter:var(--glass-filter, blur(20px) saturate(160%)); backdrop-filter:var(--glass-filter, blur(20px) saturate(160%));
  border:0; box-shadow:0 24px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14); }
.cookie__ico{ display:inline-grid; flex:none; font-size:1.4rem; line-height:1; color:var(--gold); }
.cookie__txt{ flex:1; min-width:0; margin:0; font-size:14px; line-height:1.45; color:rgba(255,255,255,.8); }
.cookie__txt a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.cookie__actions{ display:flex; gap:8px; flex:none; }
.cookie__btn{ min-height:44px; padding:0 16px; border:0; border-radius:10px; font:600 14px/1 var(--font-sans); cursor:pointer; white-space:nowrap; }
.cookie__btn--ghost{ background:rgba(255,255,255,.1); color:rgba(255,255,255,.9); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.cookie__btn--accept{ background:var(--purple); color:#fff; }
.cookie__btn:focus-visible, .cookie__txt a:focus-visible{ outline:3px solid var(--purple-500, #7B87FF); outline-offset:2px; }   /* focus is purple (BRAND), purple-500 on the dark glass */
.cookie__short{ display:none; }
:lang(ar) .cookie, :lang(ar) .cookie__btn{ font-family:var(--font-arabic, var(--font-sans)); }
@media (prefers-reduced-motion: reduce){ .cookie{ transition:opacity var(--dur-base, .24s) linear; } }

/* Stacking, top to bottom: modal dialogs, the cookie bar, the voice widget (<elevenlabs-convai>, z-index 1000), the header.
   These change stacking only, never layout. */
.rfm{ z-index:1200; }
/* the first-party round launcher (voice.js) rises above the bar while it is open (site.js sets --cookie-lift) */
html.cookie-low .rv-voice{ bottom:calc(var(--cookie-lift, 0px) + env(safe-area-inset-bottom, 0px)); transition:bottom .2s ease; }

@media (max-width:720px){
  /* compact on phones (review P1-10): a two-line honest summary and the two 44px choices in one row, about 100px
     tall, so the first screen's action stays visible; the full sentence shows from 721px */
  .cookie__body{ flex-wrap:wrap; gap:8px 10px; padding:10px 12px; border-radius:14px; }
  .cookie__ico{ display:none; }
  .cookie__txt{ flex-basis:100%; font-size:12.5px; line-height:1.4; }
  .cookie__full{ display:none; }
  .cookie__short{ display:inline; }
  .cookie__actions{ width:100%; }
  .cookie__btn{ flex:1; min-height:44px; }
  /* the widget's own spacing token: its round button lines up with the 16px page gutter (pinned widget 0.21.4) */
  elevenlabs-convai{ --el-overlay-padding:16px; }
  /* nothing fixed at the bottom covers the voice widget (N14): on phones the resting bar sits above the launcher
     (16px padding + 56px button + 12px gap) */
  body:has(elevenlabs-convai) .cookie:not(.cookie--top){ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* The launcher rests 32px from the right above 720px, so a 680px centred bar still reaches it up to about
   856px (N14: nothing fixed at the bottom covers the voice widget). Lift the bar over it there too. */
@media (min-width: 721px) and (max-width: 860px) {
  body:has(elevenlabs-convai) .cookie:not(.cookie--top) { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}