/* =====================================================================
   Astra R15 · Base: reset, field, app frame, header, dock, layers
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%}
body{
  font-family:var(--font);font-synthesis:none;font-size:var(--fs-15);line-height:var(--lh);color:var(--ink-2);
  background:var(--field);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{color:var(--ink);font-weight:700;letter-spacing:-.01em;text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:not-allowed}
a{color:var(--blue);text-decoration:none;-webkit-tap-highlight-color:transparent}
img,svg{display:block}
.num,.tnum{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:12px}
.ico{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.s16{width:16px;height:16px}.ico.s18{width:18px;height:18px}.ico.s20{width:20px;height:20px}.ico.s14{width:14px;height:14px}.ico.s12{width:12px;height:12px}

/* ---------- Field: light pools + faint routing light converging on the AI core ---------- */
.field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(60% 42% at 92% 4%,var(--field-pool-cyan) 0%,rgba(210,241,255,0) 70%),
  radial-gradient(55% 40% at -8% 46%,var(--field-pool-blue) 0%,rgba(216,226,255,0) 72%),
  radial-gradient(70% 36% at 50% 104%,#DCE9FF 0%,rgba(220,233,255,0) 70%),
  var(--field)}
.field svg{position:absolute;left:50%;bottom:0;width:max(100%,900px);height:100%;transform:translateX(-50%)}

/* ---------- Stage & app column ---------- */
.stage{position:relative;z-index:1;height:100%;display:flex;justify-content:center}
.app{
  --app-w:min(100vw,440px);
  position:relative;width:var(--app-w);height:100%;height:100dvh;overflow:hidden;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  container-type:inline-size;container-name:app;
}
@media (min-width:600px){
  .app{box-shadow:0 0 0 1px var(--hairline),0 30px 80px -40px rgba(16,42,94,.35)}
}
.scroller{
  position:relative;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;scroll-behavior:auto;
  padding:0;
}
.scroller::-webkit-scrollbar{width:0;height:0}
.page{position:relative;padding:8px var(--gutter) 24px;min-height:100%}

/* ---------- Brand header: slogan stays beside Astra, including narrow screens ---------- */
.hdr{
  position:relative;z-index:30;min-height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:calc(env(safe-area-inset-top) + 8px) var(--gutter) 8px;
  display:grid;grid-template-columns:max-content minmax(0,1fr) auto;align-items:center;gap:8px;background:#fff;
}
.hdr[data-scrolled="true"]{box-shadow:0 1px 0 var(--hairline)}
.hdr-brand{display:flex;align-items:center;gap:8px;min-height:48px;min-width:0;color:var(--ink)}
.hdr-brand img{width:38px;height:38px}
.hdr-brand b{font-size:1.875rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.hdr-slogan{display:flex;align-content:center;justify-content:center;align-items:center;flex-wrap:wrap;min-width:0;min-height:48px;margin:0;text-align:center;font-size:14px;font-weight:700;line-height:1.5;color:#355779;overflow-wrap:anywhere;text-wrap:balance}
.hdr-slogan > span{display:inline-block;max-width:100%;white-space:pre-wrap}
:root[data-lang="en"] .hdr-slogan{font-size:12px;line-height:1.4}
@media(max-width:359px){
  .hdr-brand{gap:5px}
  .hdr-brand img{width:32px;height:32px}
  .hdr-brand b{font-size:1.5rem}
  .hdr-slogan,:root[data-lang="en"] .hdr-slogan{font-size:12px}
}
.hdr-mid{flex:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center}
.hdr-title{font-size:var(--fs-17);font-weight:600;color:var(--ink);line-height:1.35;text-align:center;overflow-wrap:anywhere}
.hdr-tools{display:flex;align-items:center;gap:6px;flex:none}
.hdr-btn{min-width:var(--tap);height:48px;display:grid;place-items:center;border:0;background:none;padding:0;color:var(--ink-2);position:relative;border-radius:12px}
.hdr-lang span{width:48px;height:44px;padding:0 5px;border-radius:10px;display:inline-flex;justify-content:center;align-items:center;gap:3px;font-size:var(--fs-13);font-weight:650;color:var(--ink-2);background:#F5F8FD;border:1px solid #DCE5F1}
.hdr-lang .ico{stroke-width:2}
.hdr-cs .bubble{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--blue)}
.hdr-cs .bubble .ico{width:26px;height:26px}
.hdr-cs .dot{position:absolute;top:-2px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font-size:var(--fs-11);font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
.hdr-back{display:flex;align-items:center;gap:2px;min-height:var(--tap);padding:0 8px 0 0;border:0;background:none;color:var(--blue);font-size:var(--fs-15);font-weight:600;flex:none}
.hdr--sub{display:flex;min-height:calc(64px + env(safe-area-inset-top));gap:8px}

/* ---------- Navigation: its own layout row, never an overlay on the form ---------- */
.dock{position:relative;z-index:40;isolation:isolate;padding:0 0 env(safe-area-inset-bottom);background:transparent}
.dock::before{content:"";position:absolute;inset:24px 0 0;background:#fff;border-radius:0 0 18px 18px;z-index:-1}
.dock-contour{position:absolute;left:0;top:0;width:100%;height:26px;pointer-events:none;z-index:-1}
.dock-fill{fill:#fff}
.dock-edge{fill:none;stroke:#DDE6F2;stroke-width:1;vector-effect:non-scaling-stroke}
.dock-bar{
  position:relative;min-height:var(--dock-h);display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(86px,1.2fr) repeat(2,minmax(0,1fr));align-items:stretch;
}
.dock-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;min-height:var(--dock-h);color:var(--ink-3);
  font-size:var(--fs-12);font-weight:400;line-height:1.2;letter-spacing:0;text-align:center;padding:4px 0 10px}
:root[data-lang="en"] .dock-item{font-size:var(--fs-11);letter-spacing:-.02em}
.dock-item > span:not(.dock-core){white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:clip}
.dock-item > .ico{width:29px;height:29px;stroke-width:1.9}
.dock-item::before{content:"";position:absolute;inset:30px 2px 6px;border-radius:10px;background:transparent;transition:background var(--t-fast) var(--ease-out)}
.dock-item[aria-current="page"]{color:var(--blue);font-weight:600}
.dock-item[aria-current="page"]::before{background:var(--blue-soft)}
.dock-item > *{position:relative}
.dock-item:active::before{background:rgba(21,101,242,.10)}
.dock-ai{color:var(--blue);font-weight:600;gap:6px;padding-bottom:10px;font-size:var(--fs-12);letter-spacing:0}
.dock-ai::before{display:none}
.dock-core{position:relative;width:56px;height:56px;flex:none;border:3px solid #fff;border-radius:17px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(145deg,#2DC5EA,#2372F5);box-shadow:0 3px 8px rgba(37,118,224,.22);transition:box-shadow var(--t-fast) var(--ease-out)}
.dock-core .ico{width:34px;height:34px;stroke-width:1.8}
.dock-ai[aria-current="page"] .dock-core{box-shadow:0 0 0 2px var(--blue-soft),0 3px 8px rgba(37,118,224,.28)}
.dock-ai:active .dock-core{box-shadow:inset 0 2px 5px rgba(16,42,94,.2)}
.dock-core i.halo{display:none}

/* ---------- Layers: sheets, toasts ---------- */
.layer{position:absolute;inset:0;z-index:60;pointer-events:none}
.scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity var(--t) var(--ease-out);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.layer.is-open{pointer-events:auto}
.layer.is-open .scrim{opacity:1}
.toasts{position:absolute;z-index:80;left:0;right:0;top:calc(var(--header-h) + env(safe-area-inset-top) + 6px);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 var(--gutter)}
/* with a sheet open the header sits behind the scrim: toasts move up so they never cover the sheet's own header */
.layer.is-open ~ .toasts{top:calc(env(safe-area-inset-top) + 8px)}

/* Content is readable immediately; no staggered page-load fade choreography. */
.is-push{animation:push-in var(--t) var(--ease-out) both}
.is-pop{animation:pop-in var(--t) var(--ease-out) both}
@keyframes push-in{from{opacity:.4;transform:translateX(28%)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:.4;transform:translateX(-18%)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .dock-core[data-halo="run"] i.halo{animation:none}
}

/* ---------- Launch screen (new brand; replaces the old “A + Astra AI” splash) ---------- */
.splash{position:absolute;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(70% 50% at 50% 40%,#FFFFFF 0%,#EAF2FF 60%,#DCE8FF 100%);transition:opacity .45s var(--ease-out)}
.splash.is-on{display:flex}
.splash.is-out{opacity:0}
.splash b{margin-top:14px;font-size:2rem;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.splash small{font-size:var(--fs-15);color:var(--ink-2)}
.splash em{font-style:normal;font-size:var(--fs-11);letter-spacing:.08em;color:var(--blue-ink);font-weight:600}

/* ---------- Service banner: 503 integrity / service unavailable (app.js renderBanner) ---------- */
.banner{padding:6px var(--gutter) 0}
.banner:empty{display:none}
.banner .notice{background:#FFF6F7}
.banner .notice .btn{margin-top:8px}
/* While the service is down every submit button is disabled; mark a button data-safe to keep it usable. */
body.svc-down .btn[data-act^="x:"]:not([data-safe]),body.svc-down [data-submit]:not([data-safe]){
  color:var(--ink-4);background:#E9EDF4;box-shadow:inset 0 0 0 1px rgba(17,48,110,.06);pointer-events:none;cursor:not-allowed}

/* ---------- Customer support: the header button drives the widget, so its floating button is hidden ---------- */
body.has-cs #ls-chat-btn{display:none!important}
.hdr-cs[hidden],.hdr-cs .dot[hidden]{display:none}
.hdr-cs.is-open .bubble{color:#fff;background:var(--blue);border-color:var(--blue)}   /* support panel open: the header button is its toggle */