/* AngelBoard Oracle CRM v3.0 — per-screen layout */

/* ---------- auth ---------- */
/* Leather look matches public/splash/angeldesk-splash.js exactly (same color values), so the
   splash fades into sign-in with no visual jump. Theme-independent by design: every rule here
   is scoped under #auth / .auth-card, so no other screen or theme is affected. */
#auth{
  --leather-1:#2b1d14;--leather-2:#3d2a1d;--leather-3:#170f0a;--stitch:#c9a45c;
  --auth-gold:#d8b46a;--auth-gold-hi:#f3dfa8;--auth-cream:#efe4cf;--auth-taupe:#9c8a76;--auth-ink:#120d08;
  position:fixed;inset:0;overflow:auto;display:grid;place-items:center;padding:48px 16px;
  background:radial-gradient(120% 90% at 50% 35%,var(--leather-2) 0%,var(--leather-1) 55%,var(--leather-3) 100%);
}
#auth.hidden{display:none}
#auth::after{content:"";position:absolute;inset:max(12px,2vmin);border:2px dashed var(--stitch);opacity:.55;border-radius:14px;pointer-events:none}
.auth-wrap{position:relative;z-index:1;width:100%;max-width:428px;display:flex;flex-direction:column;align-items:center;gap:22px}
.auth-logo{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.auth-logo img{display:block;width:min(300px,80vw);height:auto}
#auth .auth-logo img{content:url("/img/angeldesk-logo-dark-bg.png");filter:none}
.auth-logo small{display:block;font-weight:500;color:#d9caa8;font-size:12px} /* taupe lifted for AA on the leather sheen, same lift as skin-leather.css */
.auth-card{width:100%;padding:30px 30px 26px;border-radius:24px;
  background:var(--auth-ink);color:var(--auth-cream);border:1px solid rgba(201,164,90,.35);
  box-shadow:0 20px 48px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,235,200,.08)}
.auth-card h1{margin:0;font-size:19px;font-weight:600;color:var(--auth-cream)}
.auth-card .sub{margin-top:6px;font-size:14px;color:var(--auth-taupe)}
.auth-card form{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.auth-card .fld label{color:var(--auth-taupe)}
.auth-card .inp{height:40px;background:#1c140d;border-color:rgba(201,164,90,.35);color:var(--auth-cream)}
.auth-card .inp::placeholder{color:#b8a98f}
.auth-card .inp:focus{border-color:var(--auth-gold);box-shadow:0 0 0 3px rgba(216,180,106,.3);outline:none}
.auth-card .btn{height:40px;margin-top:6px;background:#241910;border-color:rgba(201,164,90,.35);color:var(--auth-cream)}
.auth-card .btn:hover{background:#2c2013}
.auth-card .btn.p{background:var(--auth-gold);color:var(--leather-1);border-color:transparent;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.auth-card .btn.p:hover{background:var(--auth-gold-hi)}
.auth-card .btn:focus-visible,.auth-card a:focus-visible{outline:2px solid var(--auth-gold-hi);outline-offset:2px}
.auth-card .links{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin-top:4px;flex-wrap:wrap}
.auth-card .links a{text-decoration:none;color:var(--auth-gold-hi)}
.auth-card .links a:hover{text-decoration:underline}
.auth-card .foot{margin-top:14px;font-size:12px;color:var(--auth-taupe)}
.auth-card .errbox{background:rgba(255,106,77,.16);color:#ff8a75}
.auth-card .okbox{padding:10px 12px;border-radius:var(--r-md);background:rgba(159,224,138,.16);color:#9fe08a;font-size:13px}
.auth-card .okbox:empty{display:none}

/* ---------- dashboard ---------- */
.dash-kpis{margin-top:0}
.dash-ctx{padding:12px 18px}
.dash-map{width:100%;height:auto;display:block;border-radius:10px;background:var(--map-bg)}
.cb-table td.num{white-space:nowrap}

/* ---------- pipeline ---------- */
.pipe-search{width:220px}
.pipe-count{font-size:12px;color:var(--text-3);margin-left:auto}
.tbl .co-cell{min-width:180px}
.tbl .co-sub{font-size:11.5px;color:var(--text-3);margin-top:2px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.tbl td.acts{text-align:right}

/* ---------- inbox ---------- */
.inbox-kpis{margin-bottom:16px}
.tbl .subj b{display:block}
.tbl .subj .snip{font-size:12px;color:var(--text-3);white-space:normal;max-width:420px}
.tbl td.dir{width:48px}

/* ---------- record drawer ---------- */
.rec-section{display:flex;flex-direction:column;gap:8px}
.rec-signals{display:flex;gap:4px;flex-wrap:wrap}
.rec-signals .chip{margin:0}
.qual-head{display:flex;align-items:center;gap:16px}
.qual-head .muted{margin-top:2px;white-space:normal}
.ai-box{border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);background:var(--violet-soft);border-radius:var(--r-md);padding:12px 14px;font-size:13px}
.ai-box .ai-h{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);font-weight:700;margin-bottom:6px}
.ai-box ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.rec-links{display:flex;gap:10px;flex-wrap:wrap;font-size:12.5px}
.chan-list{display:flex;flex-direction:column;gap:6px}
.chan-row{display:grid;grid-template-columns:120px 1fr 1fr auto;gap:6px;align-items:center}
@media(max-width:600px){.chan-row{grid-template-columns:1fr}}

/* ---------- angel AI (sim visual; used by screens/ai.js) ---------- */
.ai-wrap{display:grid;grid-template-columns:230px 1fr;gap:0;min-height:560px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.ai-side{border-right:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface-2);overflow:auto}
.ai-side .th{padding:9px 10px;border-radius:var(--r-md);font-size:12.5px;color:var(--text-2);cursor:pointer;text-align:left;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-side .th.on,.ai-side .th[aria-current="true"]{background:var(--surface);color:var(--text);font-weight:600}
.ai-main{display:flex;flex-direction:column;min-width:0}
.ai-welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center}
/* Iridescent glass bubble — replaces the old flat violet circle + person glyph. Pure abstract sphere: a dark
   base, a blurred rotating conic-gradient for the color-shift, and a glossy highlight ellipse for the
   glass reflection. Works at every size (96/64/26px) since it's layered gradients, not a raster image. */
.orb{width:96px;height:96px;border-radius:50%;position:relative;overflow:hidden;isolation:isolate;flex:none;
  background:radial-gradient(120% 120% at 42% 34%,#14131c 0%,#07060b 55%,#000 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.07),inset 0 -18px 30px rgba(0,0,0,.85),0 20px 44px rgba(0,0,0,.55);
  animation:orb-float 4.5s ease-in-out infinite}
.orb::before{content:"";position:absolute;inset:-6%;border-radius:50%;padding:14%;
  background:conic-gradient(from 210deg,transparent 0deg,transparent 185deg,rgba(255,95,109,.95) 215deg,rgba(255,255,255,1) 245deg,rgba(120,220,255,.95) 275deg,rgba(185,139,255,.85) 305deg,transparent 335deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(5px) saturate(1.3);mix-blend-mode:screen;z-index:1;animation:orb-spin 17s linear infinite}
@keyframes orb-spin{to{transform:rotate(360deg)}}
@keyframes orb-float{50%{transform:translateY(-3px) scale(1.015)}}

/* Angel AI avatar (v3.1) — the generated video loop on a glowing, theme-coloured stage. Every colour here comes
   from the active theme's --accent, so the glow and ring follow whichever of the themes (or a "Surprise me"
   generated one) the user has picked. .orb.avatar only clips the video to the circle; the glow and rotating
   ring live on the unclipped .ai-avatar wrapper so they can sit outside the circle. (v3.1a dropped the wing
   corner badge — see public/js/screens/ai.js.) */
.ai-welcome{background:radial-gradient(ellipse 55% 42% at 50% 36%,color-mix(in srgb,var(--accent) 11%,transparent) 0%,transparent 72%)}
.ai-avatar{--av:112px;position:relative;width:var(--av);height:var(--av);flex:none;display:grid;place-items:center;margin-bottom:6px}
.ai-avatar-glow{position:absolute;inset:-32%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 48%,transparent) 0%,color-mix(in srgb,var(--accent) 20%,transparent) 42%,transparent 70%);
  filter:blur(10px);animation:av-glow 3.6s ease-in-out infinite}
.ai-avatar-ring{position:absolute;inset:-6px;border-radius:50%;padding:2px;pointer-events:none;opacity:.85;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent) 60deg,transparent 150deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orb-spin 3.2s linear infinite}
.ai-avatar .orb.avatar{width:100%;height:100%;background:var(--surface-3);animation:none;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 75%,transparent),0 0 26px color-mix(in srgb,var(--accent) 45%,transparent),0 10px 24px rgba(0,0,0,.18)}
.ai-avatar .orb.avatar::before{display:none}
.ai-avatar .orb.avatar video{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
@keyframes av-glow{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){.ai-avatar-glow,.ai-avatar-ring{animation:none}}

.ai-welcome h2{margin:0;font-size:22px}
.ai-welcome p{margin:0;color:var(--text-2)}
.sug{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:680px}
.sug button{padding:12px 14px;text-align:left;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;color:var(--text-2);transition:all var(--dur-fast)}
.sug button:hover{border-color:var(--violet);color:var(--text);box-shadow:0 0 0 3px var(--violet-glow)}
.ai-thread{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:78%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.u{align-self:flex-end;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.msg.a{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border)}
.msg.a::before{content:"Angel AI";display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);margin-bottom:4px;font-weight:700}
.tray{margin:0 20px;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--violet);background:var(--violet-soft);display:flex;flex-direction:column;gap:8px}
.tray .tt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-text);font-weight:700}
.tray .ti{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px}
.ai-in{display:flex;gap:8px;align-items:center;padding:14px 20px 18px}
.pill{flex:1;display:flex;align-items:center;gap:8px;height:46px;padding:0 8px 0 16px;border-radius:var(--r-pill);border:1px solid var(--violet);background:var(--surface-2);box-shadow:0 0 0 4px rgba(139,92,246,.1);min-width:0}
.pill input{flex:1;border:0;background:transparent;outline:none;font-size:14px;min-width:0;color:var(--text)}
.pill .ib{width:32px;height:32px}
.pill .send{background:var(--violet);color:#fff}
@media(max-width:900px){.ai-wrap{grid-template-columns:1fr}.ai-side{display:none}.sug{grid-template-columns:1fr}}

/* ==========================================================================
   Angel AI — Executive skin (html.xd-on only). Reuses the shared leather / LCD
   skin from css/skin-leather.css (.leather, .lcdscr, --xd-serif, --xd-cream,
   --xd-taupe, --xd-gold-hi, --xd-ok, --xd-engrave) — no new materials here.
   New elements are hidden below by default so Classic renders unchanged;
   the rules that turn them on are anchored to #screen-ai so they always win
   over executive.css/skin-leather.css regardless of stylesheet load order
   (those are injected into <head> at runtime, after this file).
   ========================================================================== */
.ai-w-exec,.ai-cap,.ai-tag,.ai-rail-live,.ai-th-head,.msg-avatar{display:none}

/* ----- header strip: leather panel, scope chip ----- */
html.xd-on #screen-ai .ai-exec-head{flex:none;padding:2px 2px}
html.xd-on #screen-ai .ai-exec-head .ph{padding:14px 20px;margin:0}
html.xd-on #screen-ai .acts{display:flex;align-items:center;gap:10px}
html.xd-on #screen-ai .ai-scopechip{display:inline-flex;padding:7px 12px;font-size:10px;letter-spacing:.09em;border-radius:10px}

/* ----- three-panel body: conversations rail / cockpit / live rail ----- */
html.xd-on #screen-ai.active{display:flex;flex-direction:column;gap:14px}
html.xd-on #screen-ai .ai-wrap{flex:1;min-height:480px;display:grid;grid-template-columns:270px 1fr 290px;gap:14px;background:transparent;border:0;border-radius:0;overflow:visible}
html.xd-on #screen-ai .ai-rail-live{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
@media (min-width:1100px){
  /* No page scroll at desktop widths: the screen fills #main's content box exactly; only the lists inside scroll. */
  html.xd-on #screen-ai.active{height:100%;overflow:hidden}
  html.xd-on #screen-ai .ai-wrap{height:100%;min-height:0}
  html.xd-on #screen-ai .ai-side{min-height:0;overflow:hidden auto}
  html.xd-on #screen-ai .ai-main{min-height:0}
  html.xd-on #screen-ai .ai-body-wrap{min-height:0}
  html.xd-on #screen-ai .ai-thread,html.xd-on #screen-ai .ai-welcome{min-height:0;overflow:auto}
}
@media (max-width:1099px){
  html.xd-on #screen-ai .ai-wrap{grid-template-columns:270px 1fr}
  html.xd-on #screen-ai .ai-rail-live{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  html.xd-on #screen-ai .ai-rail-live>*{flex:1 1 220px}
}
@media (max-width:760px){
  html.xd-on #screen-ai .ai-wrap{grid-template-columns:1fr}
  html.xd-on #screen-ai .ai-side{display:flex;max-height:260px}
}

/* ----- conversations rail ----- */
html.xd-on #screen-ai .ai-side{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px}
html.xd-on #screen-ai .ai-side-h.exec{display:flex;align-items:center;justify-content:space-between;font:700 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--xd-engrave,#e3c992)}
html.xd-on #screen-ai .ai-side-h.exec .th-count{padding:3px 10px;font-size:11px}
html.xd-on #screen-ai .ai-search{height:36px;padding:0 12px;border-radius:9px;border:1px solid rgba(232,176,74,.4);background:rgba(0,0,0,.45);color:#efe2c8;font:500 13px var(--font)}
html.xd-on #screen-ai .ai-search::placeholder{color:#a6916a}
html.xd-on #screen-ai .ai-new{height:44px;border-radius:12px;flex:none}
html.xd-on #screen-ai .th-list{overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column;gap:2px}
html.xd-on #screen-ai .th-gl{font:700 10px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--xd-engrave,#e3c992);padding:8px 4px 4px}
html.xd-on #screen-ai .ai-side .th{display:flex;align-items:flex-start;flex-wrap:wrap;gap:3px 8px;white-space:normal;overflow:visible;text-overflow:unset;padding:10px 10px;color:#efe2c8}
html.xd-on #screen-ai .ai-side .th.on,html.xd-on #screen-ai .ai-side .th[aria-current="true"]{background:rgba(232,176,74,.16);color:#fff3cf}
html.xd-on #screen-ai .ai-side .th-t{white-space:normal;overflow:visible;text-overflow:unset;flex:1 1 140px;font-weight:600}
html.xd-on #screen-ai .ai-side .th small{width:100%;color:#c9b07a;font-size:11px}
html.xd-on #screen-ai .th-ic{color:#c9a35c}

/* ----- cockpit: avatar, greeting, presets ----- */
html.xd-on #screen-ai .ai-welcome{background:radial-gradient(ellipse 55% 42% at 50% 34%,rgba(139,92,246,.1),transparent 72%)}
html.xd-on #screen-ai .ai-w-classic{display:none}
html.xd-on #screen-ai .ai-w-exec{display:block}
html.xd-on #screen-ai .ai-w-exec h2{margin:0;font:700 38px/1.1 var(--xd-serif);color:var(--xd-cream,#f4e8d2);text-shadow:0 0 26px rgba(139,92,246,.3)}
html.xd-on #screen-ai .ai-w-exec p{margin:6px 0 0;color:var(--xd-taupe,#cbb98f);font-size:14.5px}
html.xd-on .ai-avatar{--av:225px}
html.xd-on .ai-avatar-ring{display:none}
html.xd-on .ai-avatar-glow{inset:auto;width:390px;height:390px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.42) 0%,rgba(139,92,246,.16) 45%,transparent 70%);filter:blur(14px);
  animation:ai-glow-idle 3.8s ease-in-out infinite}
html.xd-on .ai-avatar.thinking .ai-avatar-glow{animation:ai-glow-think 1.5s ease-in-out infinite}
html.xd-on .ai-avatar .orb.avatar{box-shadow:0 0 0 1px rgba(196,181,253,.28),0 0 48px rgba(124,92,255,.42),0 14px 30px rgba(0,0,0,.6);animation:ai-breathe 4s ease-in-out infinite}
@keyframes ai-glow-idle{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes ai-glow-think{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(.98)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes ai-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@media (prefers-reduced-motion:reduce){html.xd-on .ai-avatar-glow,html.xd-on .ai-avatar .orb.avatar{animation:none!important}}
html.xd-on #screen-ai .sug{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
html.xd-on #screen-ai .sug button{min-height:76px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;border-radius:14px;padding:12px 14px;color:#efe2c8}
html.xd-on #screen-ai .ai-tag{display:inline-block;padding:2px 7px;border-radius:5px;border:1px solid rgba(232,176,74,.55);color:#e6d3a6;font:700 9.5px var(--font);letter-spacing:.1em}
html.xd-on #screen-ai .sug button:hover{border-color:rgba(232,176,74,.7);box-shadow:0 0 0 2px rgba(232,176,74,.25)}
/* the flyout keeps its own compact preset look (no tag, no exec greeting) — "leave the flyout alone" */
.ai-welcome.compact .ai-tag{display:none}

/* ----- active thread header ----- */
html.xd-on #screen-ai .ai-th-head{display:flex;align-items:center;gap:10px;padding:10px 4px 14px;border-bottom:1px solid rgba(232,176,74,.2);margin-bottom:6px}
html.xd-on #screen-ai .ai-th-avatar{width:34px;height:34px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#a78bfa,#6d3fe0 70%);box-shadow:0 0 0 1px rgba(196,181,253,.35)}
html.xd-on #screen-ai .ai-th-meta{display:flex;flex-direction:column;min-width:0}
html.xd-on #screen-ai .ai-th-meta b{font:700 15px var(--xd-serif);color:var(--xd-cream,#f4e8d2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.xd-on #screen-ai .ai-th-meta small{color:var(--xd-taupe,#cbb98f);font-size:12px}

/* ----- messages ----- */
html.xd-on #screen-ai .msg{display:flex;gap:10px;max-width:84%}
html.xd-on #screen-ai .msg.u{margin-left:auto;flex-direction:row-reverse;background:linear-gradient(160deg,#5a3a1c,#3a2410);border:1px solid rgba(232,176,74,.45);color:#f6ecd8}
html.xd-on #screen-ai .msg.a{background:rgba(24,16,10,.88);border:1px solid rgba(232,176,74,.18)}
html.xd-on #screen-ai .msg.a::before{display:none}
html.xd-on #screen-ai .msg-avatar{display:block;width:28px;height:28px;border-radius:50%;flex:none;margin-top:2px;background:radial-gradient(circle at 35% 30%,#a78bfa,#6d3fe0 70%);box-shadow:0 0 0 1px rgba(196,181,253,.35)}
html.xd-on #screen-ai .msg-body{min-width:0}
html.xd-on #screen-ai .msg.err .msg-body{color:#ff9d7a}
/* a tabular/numeric assistant reply renders as an LCD readout instead of prose */
html.xd-on #screen-ai .ai-lcd{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
html.xd-on #screen-ai .ai-lcd-row .row{justify-content:space-between}
html.xd-on #screen-ai .ai-lcdbar{height:5px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:2px;overflow:hidden}
html.xd-on #screen-ai .ai-lcdbar::before{content:"";display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,#8a5a16,#e8b04a 70%,#ffd98f);box-shadow:0 0 8px rgba(240,176,74,.5)}

/* ----- proposed action card (Executive tray) ----- */
html.xd-on #screen-ai .tray.pr-exec{margin:0 20px;display:flex;flex-direction:column;gap:10px}
html.xd-on #screen-ai .pr-card{border-radius:14px;padding:12px 16px;border:1px solid rgba(139,92,246,.55);background:rgba(40,28,54,.55);box-shadow:0 0 0 1px rgba(139,92,246,.15),0 10px 24px -10px rgba(0,0,0,.6)}
html.xd-on #screen-ai .pr-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 10.5px var(--font);letter-spacing:.1em;color:#c9bbfd;margin-bottom:6px}
html.xd-on #screen-ai .pr-body{color:#efe2c8;font-size:13.5px}
html.xd-on #screen-ai .pr-body small{display:block;margin-top:4px}
html.xd-on #screen-ai .pr-body small.ok{color:var(--xd-ok,#6fd0a0)}
html.xd-on #screen-ai .pr-body small.bad{color:#ff9d7a}
html.xd-on #screen-ai .pr-chip{padding:3px 9px;border-radius:999px;font:700 10px var(--font);letter-spacing:.06em;white-space:nowrap}
html.xd-on #screen-ai .pr-chip.wait{background:rgba(139,92,246,.25);color:#e4daff}
html.xd-on #screen-ai .pr-chip.ok{background:rgba(111,208,160,.2);color:var(--xd-ok,#6fd0a0)}
html.xd-on #screen-ai .pr-chip.bad{background:rgba(255,120,90,.2);color:#ff9d7a}
html.xd-on #screen-ai .pr-acts{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
html.xd-on #screen-ai .btn.ghost{background:transparent;border:1px solid rgba(232,176,74,.4);color:#efe2c8}
html.xd-on #screen-ai .btn.ghost:hover{background:rgba(232,176,74,.12)}

/* ----- composer ----- */
html.xd-on #screen-ai .ai-main{display:flex;flex-direction:column}
html.xd-on #screen-ai .ai-body-wrap{display:flex;flex-direction:column;flex:1}
html.xd-on #screen-ai .ai-body{flex:1;display:flex;flex-direction:column}
html.xd-on #screen-ai .ai-thread{flex:1}
html.xd-on #screen-ai .ai-welcome{flex:1}
html.xd-on #screen-ai .ai-in{flex-direction:column;align-items:stretch;gap:6px;padding:12px 18px 16px}
html.xd-on #screen-ai .pill{height:50px;padding:0 10px 0 18px;border-radius:999px;background:rgba(10,6,4,.6);border:1px solid rgba(139,92,246,.55);box-shadow:0 0 0 4px rgba(139,92,246,.14)}
html.xd-on #screen-ai .pill .ib{width:44px;height:44px}
html.xd-on #screen-ai .pill .send{width:46px;height:46px;background:linear-gradient(145deg,#a78bfa,#6d3fe0)}
html.xd-on #screen-ai .ai-cap{display:block;text-align:center;font-size:11.5px;color:var(--xd-taupe,#cbb98f)}

/* ----- right rail: approvals tray / live context / angel ai can ----- */
html.xd-on #screen-ai .ai-rail-card{padding:14px 16px;border-radius:16px;color:#efe2c8}
html.xd-on #screen-ai .ai-rail-h{font:700 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--xd-engrave,#e3c992);margin-bottom:10px}
html.xd-on #screen-ai .ai-rail-lcd{padding:12px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
html.xd-on #screen-ai .pr-steps{display:flex;flex-direction:column;gap:8px;margin-top:12px}
html.xd-on #screen-ai .pr-step{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#c9b07a}
html.xd-on #screen-ai .pr-step .nm{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.4);border:1px solid rgba(232,176,74,.4);font:700 10.5px var(--font);flex:none}
html.xd-on #screen-ai .pr-step .ck{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:rgba(232,176,74,.22);color:#ffd98f;font-size:11px;flex:none}
html.xd-on #screen-ai .pr-step.now{color:#e4daff}
html.xd-on #screen-ai .pr-step.now .nm{background:rgba(139,92,246,.35);border-color:#8b5cf6;color:#fff}
html.xd-on #screen-ai .pr-step.done{color:#efe2c8}
html.xd-on #screen-ai .ai-ctx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html.xd-on #screen-ai .ai-ctx-tile{padding:10px 12px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;text-align:left;width:100%}
html.xd-on #screen-ai .ai-ctx-tile:hover{box-shadow:0 0 0 1px rgba(232,176,74,.6),0 0 14px -2px rgba(232,176,74,.4)}
html.xd-on #screen-ai .ai-ctx-tile .big{font-size:20px}
html.xd-on #screen-ai .ai-rail-cap{margin:10px 0 0;font-size:11.5px;color:var(--xd-taupe,#cbb98f)}
html.xd-on #screen-ai .ai-can{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#e6d3a6}

/* ---------- time & shifts ---------- */
.tc{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:24px 28px}
.tc .st{font-size:13px;color:var(--text-2)}
.tc .big{font-family:var(--font-num);font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.clockbtn{height:48px;padding:0 26px;border-radius:var(--r-pill);font-weight:800;font-size:14px;letter-spacing:.04em;background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px var(--accent-shadow);transition:transform var(--dur-fast),background var(--dur-fast)}
.clockbtn:active{transform:scale(.97)}
.clockbtn.out{background:var(--danger);color:#fff;box-shadow:0 8px 24px rgba(224,90,90,.3)}
.cal{display:grid;grid-template-columns:120px repeat(7,minmax(90px,1fr));font-size:12px;min-width:800px}
.cal .hd{padding:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--border);text-align:center}
.cal .nm{padding:12px 10px;font-weight:600;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.cal .c{padding:6px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);min-height:52px;cursor:pointer;transition:background var(--dur-fast);text-align:left;width:100%;display:block}
.cal .c:hover{background:var(--surface-2)}
.sh-pill{display:block;padding:5px 7px;border-radius:7px;font-size:11px;font-weight:600;background:var(--accent-soft);color:var(--text);border-left:3px solid var(--accent)}
.sh-pill.req{background:var(--warn-bg);border-color:var(--warn)}.sh-pill.live{background:var(--ok-bg);border-color:var(--ok)}
@media(max-width:900px){.tc{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---------- scout map wrapper (legacy scout.js markup lives inside #screen-scout) ---------- */
.mapwrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);background:var(--map-bg);min-height:460px}
.mapwrap svg{width:100%;height:100%;display:block;position:absolute;inset:0}
.map-fab{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2}
.map-panel{position:absolute;left:14px;top:14px;width:250px;z-index:2;padding:12px}

/* ---------- settings ---------- */
.set{display:grid;grid-template-columns:200px 1fr;gap:var(--s5)}
.setnav{display:flex;flex-direction:column;gap:2px;position:sticky;top:0;align-self:start}
.setnav button{text-align:left;padding:9px 12px;border-radius:var(--r-md);color:var(--text-2);font-weight:500;font-size:13px}
.setnav button[aria-selected="true"]{background:var(--accent-soft);color:var(--text);font-weight:600}
.set .row .inp{width:120px}
@media(max-width:900px){.set{grid-template-columns:1fr}.setnav{flex-direction:row;flex-wrap:wrap;position:static}}

/* ---------- insights / commissions ---------- */
.ins-bars{display:flex;align-items:flex-end;gap:6px;height:120px}
.ins-bars i{flex:1;background:var(--accent);border-radius:3px 3px 0 0;display:block}

@media(max-width:900px){.pipe-search{width:100%}.ph .acts .tabs{flex:1}}