/* ---- Fluxwell DF26 · Coworker "Ask" prototype (LEX Cosmos clone) ---- */
/* Salesforce Sans — the real LEX global header/nav (Aura chrome) font. The Ask
   CONTENT surface (greeting/box/pills) is SLDS2 Cosmos = system stack, so this is
   scoped to .lex-header/.lex-nav only. woff2 from b.static.lightning.force.com. */
@font-face{font-family:'Salesforce Sans';font-weight:300;font-style:normal;font-display:swap;
  src:url('fonts/SalesforceSans-Light.woff2') format('woff2')}
@font-face{font-family:'Salesforce Sans';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/SalesforceSans-Regular.woff2') format('woff2')}
@font-face{font-family:'Salesforce Sans';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/SalesforceSans-Bold.woff2') format('woff2')}
.lex-header,.lex-header *,.lex-nav,.lex-nav *{font-family:'Salesforce Sans',var(--sans)}
:root{
  --brand:#0176d3; --brand-dark:#0b5cab; --ink:#080707; --ink-2:#444;
  --muted:#5c5c5c; --line:#e5e5e5; --line-2:#eef0f2; --bg:#fff;
  --user-bubble:#e9edfb; --violet:#5867e8; --card:#fff; --shadow:0 2px 6px rgba(0,0,0,.06);
  --radius:12px; --nav-h:40px; --hdr-h:52px; --os-h:22px; /* nav = slds-context-bar 2.5rem */
  /* Verified from the real Ask page's slds-plus.css: the SLDS 2 / Cosmos "Ask"
     surface resolves --slds-g-font-family-base to the SYSTEM stack, NOT Salesforce
     Sans (which is @font-face'd but only used by legacy Aura). Exact token order: */
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  --danger:#ba0517; --warn:#dd7a01; --ok:#2e844a; --chart:#5a9be0;
  --navy:#032d60;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.hidden{display:none!important}

/* top bars */
.os-bar{height:var(--os-h);background:#000;flex:0 0 auto}
.lex-header{height:var(--hdr-h);flex:0 0 auto;display:flex;align-items:center;
  padding:0 16px;border-bottom:1px solid var(--line);gap:14px;background:#fff}
.lex-logo{display:flex;align-items:center;cursor:pointer}
.lex-search{flex:1;display:flex;justify-content:center;align-items:center;gap:12px}
.lex-searchbox{width:min(42%,470px);height:32px;border:1px solid #c9c9c9;border-radius:18px;
  display:flex;align-items:center;gap:8px;padding:0 14px;color:#747474;background:#fff;font-size:13.5px}
.lex-ask{height:32px;border:1px solid #c9c9c9;border-radius:18px;background:#fff;cursor:pointer;
  display:flex;align-items:center;gap:6px;padding:0 15px;color:var(--brand);font-weight:600;font-size:13.5px;font-family:var(--sans)}
.lex-ask:hover{background:#f4f8fd}
.lex-header-icons{display:flex;align-items:center;gap:16px;color:#747474}
.hic{cursor:pointer;display:flex;align-items:center}
.hic svg{display:block}
.hic-split{gap:2px}
.mini-caret{margin-left:-1px}
.hic .caret{font-size:8px}
.avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;border:1px solid #d0d0d0;flex:0 0 auto}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* nav — regular weight to match LEX */
.lex-nav{height:var(--nav-h);flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:0 16px;border-bottom:1px solid var(--line);background:#fff;overflow:hidden}
.waffle{cursor:pointer;display:flex;align-items:center}
/* app name = .slds-context-bar__app-name: --slds-g-font-scale-3 (20px), pr = spacing-5 (24px) */
.app-name{font-weight:700;font-size:20px;margin-right:24px;color:var(--ink);letter-spacing:-.2px}
.tabs{list-style:none;display:flex;align-items:center;gap:16px;margin:0;padding:0;flex:1;overflow:hidden}
/* tab labels = .slds-context-bar__label-action: font-weight normal */
.tabs li{white-space:nowrap;cursor:pointer;color:var(--ink);font-weight:400;font-size:13.5px;display:flex;align-items:center;gap:4px}
.tabs li .c{opacity:.95;flex:0 0 auto}
.tabs li .spk{flex:0 0 auto;margin-right:3px;vertical-align:-1px}
.tab-active{color:var(--brand)!important;font-style:italic;font-weight:400;
  border-bottom:3px solid var(--brand);height:var(--nav-h);align-items:center;max-width:280px}
.tab-active .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-active .x{font-style:normal;color:var(--brand);margin-left:4px;font-size:11px;flex:0 0 auto}
.pencil{color:#747474;cursor:pointer}

/* ============ Ask entry / welcome (empty) state ============ */
.ask-view{min-height:100%;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;background:#fbfbfe}
/* exact landing gradient from the live product (sentos_results --landing-bg-* stops) */
.ask-view::before{content:"";position:absolute;inset:-8vh -8vw;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(244,244,250,.62) 0%, rgba(242,243,252,.62) 100%),
    radial-gradient(76% 58% at 8% 5%, rgba(247,188,158,.72) 0%, rgba(247,188,158,0) 74%),
    radial-gradient(36% 30% at 18% 14%, rgba(245,196,173,.32) 0%, rgba(245,196,173,0) 78%),
    radial-gradient(112% 88% at 86% 19%, rgba(194,203,247,.22) 0%, rgba(194,203,247,0) 73%),
    radial-gradient(132% 108% at 72% 94%, rgba(166,180,241,.24) 0%, rgba(166,180,241,0) 74%);
  transform-origin:50% 45%;animation:bgFloat 14s cubic-bezier(.4,0,.2,1) 1s infinite alternate}
@keyframes bgFloat{to{transform:translateY(-1.1%) scale(1.02)}}
/* real column is 800px, centered; text LEFT-justified inside it */
.ask-inner{width:100%;max-width:800px;text-align:left;padding:0 24px;position:relative;z-index:1}
.ask-greeting{font-size:32px;line-height:1.25;font-weight:400;letter-spacing:-.2px;margin:0;color:var(--navy)}
.ask-sub{display:inline-block;font-size:14px;color:#022ac0;margin:8px 0 24px;text-decoration:none}
.ask-sub:hover{text-decoration:underline}
/* real box: 1px #5c5c5c border, 20px radius, 8rem tall, NO shadow (glow only on focus) */
.ask-box{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #5c5c5c;
  border-radius:20px;padding:16px 16px 16px 18px;box-shadow:none;
  width:100%;margin:0;cursor:text;transition:border-color .15s,box-shadow .15s;min-height:128px;text-align:left}
.ask-box:hover{border-color:#3e3e3c}
/* focus echoes the live multi-color rainbow glow border */
.ask-box.armed{border-color:transparent;
  box-shadow:0 0 0 2px #fff,0 0 12px 2px rgba(152,189,255,.55),0 0 20px 5px rgba(227,187,255,.38)}
.ask-text{flex:1;font-size:15px;color:var(--ink);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ask-text.placeholder{color:#8c8f98}
.ask-caret{width:2px;height:20px;background:var(--brand);margin-top:1px;
  animation:blink 1s step-end infinite;opacity:0;flex:0 0 auto}
.ask-box.typing .ask-caret{opacity:1}
@keyframes blink{50%{opacity:0}}
.ask-send{align-self:flex-end;flex:0 0 auto;width:32px;height:32px;border:none;border-radius:8px;background:transparent;
  color:#b0b3bb;cursor:not-allowed;display:flex;align-items:center;justify-content:center;transition:.15s}
.ask-send:not([disabled]){color:var(--brand);cursor:pointer}
.ask-send:not([disabled]):hover{background:#eef5fd}
.ask-subrow{margin:8px 0 0;display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:#8c8f98;padding:0 4px}
.ask-subrow .left{display:flex;align-items:center;gap:6px}
.ask-subrow .conn-dot{color:var(--brand)}
.ask-subrow a{color:var(--brand);cursor:pointer;text-decoration:none}
.ask-subrow .mid{flex:1;text-align:center}
/* real suggested-prompt row: gap 0.5rem, 1.5rem above, CENTER-justified under the box */
.ask-actions{display:flex;gap:8px;justify-content:center;margin-top:24px}
.pill{border:1px solid #c9ccd4;background:#fff;border-radius:20px;padding:8px 18px;font-size:13.5px;
  color:var(--brand);cursor:pointer;font-family:var(--sans);font-weight:600;display:flex;align-items:center;gap:7px}
.pill:hover{background:#f4f8fd}
.pill .pi{font-size:12px} .pill .c{font-size:8px;color:var(--brand)}

/* ============ conversation ============ */
.convo{flex:1 1 auto;overflow-y:auto}
.thread{max-width:900px;margin:0 auto;padding:26px 24px 28px;display:flex;flex-direction:column;gap:13px}

.msg-user{align-self:flex-end;background:var(--user-bubble);color:var(--ink);
  padding:11px 18px;border-radius:18px;max-width:70%;font-size:14.5px}
.agent-line{color:var(--ink);font-size:14.5px;margin:2px 0;line-height:1.55}
.agent-line b{font-weight:700}

/* thinking / ThoughtChunk */
.thinking{color:var(--violet);font-weight:600;display:flex;align-items:center;gap:9px;font-size:14.5px}
.thinking .label{background:linear-gradient(90deg,#0d9dda,#5867e8,#c724b1,#5867e8);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 2.4s linear infinite}
@keyframes sweep{to{background-position:300% 0}}
.sparkles{display:inline-flex;gap:3px}
.sparkles i{font-style:normal;background:linear-gradient(120deg,#0d9dda,#5867e8,#c724b1);
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:tw 1.1s infinite}
.sparkles i:nth-child(2){animation-delay:.18s}
.sparkles i:nth-child(3){animation-delay:.36s}
@keyframes tw{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* reasoning step rows (static — no animation, so nothing keeps sparkling) */
.step{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;
  padding:6px 0;border-top:1px solid var(--line-2)}
.step .ic{width:18px;height:18px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:14px}
.step .ic.astro{color:#0b827c}
.step .txt{flex:1}
.step .count{color:#919191;font-size:12px;white-space:nowrap}
.step .spk{color:#5867e8;letter-spacing:2px}

/* answer sections */
.section-title{font-weight:700;font-size:16px;color:var(--navy);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.section-title .meta{font-weight:400;color:#919191;font-size:12.5px}
.subhead{font-weight:700;font-size:14px;color:var(--ink);margin:12px 0 6px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.red{background:var(--danger)} .dot.amber{background:var(--warn)} .dot.green{background:var(--ok)}
.obs{margin:4px 0 6px;padding-left:20px}
.obs li{font-size:13.5px;margin:5px 0;color:var(--ink-2)}
.obs li b{color:var(--ink)}

/* KPI strip */
.kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 4px}
.kpi{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;background:var(--card);box-shadow:var(--shadow)}
.kpi .label{color:var(--muted);font-size:12.5px;font-weight:600}
.kpi .value{font-size:26px;font-weight:700;margin:4px 0 2px;letter-spacing:-.5px;color:var(--ink)}
.kpi .sub{font-size:12px;display:flex;align-items:center;gap:5px}
.kpi .sub.bad{color:var(--danger)} .kpi .sub.warn{color:var(--warn)} .kpi .sub.good{color:var(--ok)}

/* full-width viz card */
.viz-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px 12px;background:var(--card);
  box-shadow:var(--shadow);margin:8px 0}
.viz-card h4{margin:0 0 10px;font-size:13.5px;font-weight:700;color:var(--ink)}
.viz-foot{margin-top:6px;font-size:12.5px}
.viz-foot a{color:#3e3e3c;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.chart-svg{width:100%;display:block}

/* expanders (Sources / Data Source) */
.expander{margin:4px 0}
.exp-head{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:13.5px;font-weight:700;
  cursor:pointer;user-select:none;padding:6px 0}
.exp-head .chev{display:inline-block;transition:transform .18s;font-size:11px;color:#5c5c5c}
.exp-head.open .chev{transform:rotate(90deg)}
.exp-body{display:none;padding:2px 0 8px 22px;font-size:13px;color:var(--ink-2)}
.exp-body.open{display:block;animation:rise .3s ease}
.exp-body ul{margin:2px 0;padding-left:18px}
.exp-body li{margin:5px 0}
.exp-body .ds-model{display:flex;align-items:center;gap:7px;color:var(--brand);font-weight:600;margin:2px 0 10px}
.exp-body .ds-model .badge{width:18px;height:18px;border-radius:4px;background:var(--brand);color:#fff;
  font-size:10px;display:flex;align-items:center;justify-content:center}
.exp-body .ds-h{font-weight:700;color:var(--ink);margin:10px 0 3px}

/* record table */
.rec-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.rec-table table{width:100%;border-collapse:collapse;font-size:13px}
.rec-table th{background:#f4f5f6;text-align:left;padding:9px 14px;font-weight:600;color:#3e3e3c;border-bottom:1px solid var(--line);font-size:12px}
.rec-table td{padding:10px 14px;border-top:1px solid var(--line-2);color:var(--ink)}
.rec-table tr.row{cursor:pointer}
.rec-table tr.row:hover{background:#f7fafd}
.opp-link{display:flex;align-items:center;gap:9px;color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.opp-ic{width:20px;height:20px;border-radius:4px;background:#e8710a;color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sig{font-size:12.5px}
.sig .flag{color:var(--danger);font-weight:600}
.sig .warnf{color:var(--warn);font-weight:600}

/* tasks checklist */
.tasks{display:flex;flex-direction:column;gap:2px}
.task{display:flex;align-items:center;gap:11px;padding:10px 4px;border-top:1px solid var(--line-2)}
.task .cb{width:16px;height:16px;border:1.5px solid #b0b0b0;border-radius:4px;flex:0 0 auto;cursor:pointer}
.task .t{flex:1;font-size:13.5px}
.task .t b{font-weight:700}
.due{font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:11px;white-space:nowrap}
.due.overdue{background:#fdecea;color:var(--danger)}
.due.today{background:#fef4e6;color:var(--warn)}
.due.week{background:#eef4ff;color:var(--brand-dark)}

/* recommendation callout */
.reco{border:1px solid #c9def5;background:linear-gradient(180deg,#f5f9ff,#eef5ff);
  border-radius:var(--radius);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;margin-top:8px}
.reco .spark{font-size:18px;line-height:1.2}
.reco .txt{font-size:13.5px} .reco .txt b{font-weight:700}
.ground-note{color:#919191;font-size:12px;font-style:italic;margin-top:8px}

/* feedback row */
.feedback{display:flex;gap:16px;color:var(--brand);margin:8px 2px 2px;font-size:16px}
.feedback span{cursor:pointer}

/* composer */
.composer-wrap{flex:0 0 auto;background:#fff;padding:10px 0 6px}
.composer{max-width:900px;margin:0 auto;padding:0 24px;position:relative}
.composer textarea{width:100%;resize:none;border:1px solid #c9c9c9;border-radius:14px;
  padding:16px 52px 16px 18px;font-family:var(--sans);font-size:14.5px;color:var(--ink);
  outline:none;min-height:58px;line-height:1.4}
.composer textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(1,118,211,.12)}
.composer .send{position:absolute;right:36px;bottom:14px;background:none;border:none;cursor:pointer;padding:4px}
.composer-sub{max-width:900px;margin:6px auto 0;padding:0 24px;display:flex;justify-content:space-between;
  align-items:center;font-size:12px;color:#919191}
.composer-sub .left{display:flex;align-items:center;gap:6px}
.composer-sub .conn-dot{color:var(--brand)}
.composer-sub a{color:var(--brand);cursor:pointer;text-decoration:none}
.composer-sub .mid{flex:1;text-align:center}

/* utility bar */
.util-bar{flex:0 0 auto;height:32px;border-top:1px solid var(--line);background:#fafafa;
  display:flex;align-items:center;gap:26px;padding:0 20px;font-size:12.5px;color:var(--ink-2);font-weight:600}

/* reveal + chart draw */
.reveal{opacity:0;transform:translateY(6px);animation:rise .45s ease forwards}
@keyframes rise{to{opacity:1;transform:none}}
.line-path{stroke-dasharray:4000;stroke-dashoffset:4000;animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.bar-grow{transform:scaleX(0);transform-box:fill-box;transform-origin:left center;animation:grow .9s ease forwards}
@keyframes grow{to{transform:scaleX(1)}}