/* ============================================================================
   FORGE — Chat-first AI canvas.
   The conversation is the workspace. Artifacts materialize inline.
   ============================================================================ */

:root {
  /* ----------------------------------------------------------------
     CLDS-v5 canonical aliases (single source of truth).
     Forge tokens below remain for backwards-compat with existing
     selectors, but all VALUES are pulled from CLDS so cross-instance
     installs match the canonical design system.
     See: canonical/14_DESIGN_TOKENS.md (CLDS-v5 single source of truth)
     ---------------------------------------------------------------- */
  --cl-bg:         #eef5fb;
  --cl-bg-2:       #f0f4f8;
  --cl-surface:    #ffffff;
  --cl-surface-2:  #f7fbff;
  --cl-surface-3:  #f8fafc;
  --cl-line:       #d7e7f5;
  --cl-line-2:     #eaf2fa;
  --cl-line-3:     #e8edf2;
  --cl-ink:        #10243f;
  --cl-ink-2:      #1e293b;
  --cl-muted:      #617a98;
  --cl-muted-2:    #93a9bf;
  --cl-faint:      #94a3b8;
  --cl-primary:    #2764e6;
  --cl-primary-2:  #289ee8;
  --cl-violet:     #7c3aed;
  --cl-pink:       #ec4899;
  --cl-success:    #16a34a;
  --cl-warning:    #d97706;
  --cl-danger:     #dc2626;
  --cl-info:       #0284c7;
  --cl-shadow-xs:  0 2px 6px rgba(24,67,119,.06);
  --cl-shadow-soft:0 8px 26px rgba(24,67,119,.08);
  --cl-shadow:     0 18px 50px rgba(24,67,119,.12);
  --cl-r-xs:       8px;
  --cl-r-sm:       12px;
  --cl-r:          18px;
  --cl-r-lg:       22px;

  /* Surfaces — Forge aliases pointing at CLDS values */
  --page:        var(--cl-bg);
  --rail:        var(--cl-surface);
  --stage:       var(--cl-bg-2);
  --card:        var(--cl-surface);
  --soft:        var(--cl-surface-2);
  --tint:        var(--cl-bg-2);

  /* Lines */
  --line-1:      var(--cl-line);
  --line-2:      var(--cl-line-2);
  --line-3:      var(--cl-line-3);

  /* Ink */
  --ink-1:       var(--cl-ink);
  --ink-2:       var(--cl-ink-2);
  --ink-3:       var(--cl-muted);
  --mute:        var(--cl-muted);
  --faint:       var(--cl-faint);
  --ghost:       #CBD5E1; /* Forge-internal — no CLDS equivalent */

  /* Brand · single primary, no gradients */
  --brand:       var(--cl-primary);
  --brand-2:     var(--cl-primary-2);
  --brand-soft:  #EEF3FF; /* Forge-internal soft tint — keep, no CLDS equivalent */
  --brand-line:  #C9D6F7; /* Forge-internal — keep */

  --vio:         var(--cl-violet);
  --pnk:         var(--cl-pink);
  /* Per the Prime Directive: NO gradients. These aliases resolve to solid
     colors so any legacy selector still painting via var(--gradient) gets a flat fill. */
  --gradient:    var(--cl-primary);
  --gradient-soft: var(--brand-soft);

  /* Semantic */
  --ok:          var(--cl-success);
  --ok-soft:     #ECFDF5; /* Forge-internal soft variant */
  --warn:        var(--cl-warning);
  --warn-soft:   #FFFAEB; /* Forge-internal soft variant */
  --bad:         var(--cl-danger);
  --bad-soft:    #FEF2F2; /* Forge-internal soft variant */

  --r:    var(--cl-r);
  --r-sm: var(--cl-r-sm);
  --r-xs: var(--cl-r-xs);

  --fnt:   "Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fnt-d: "Inter","SF Pro Display",-apple-system,sans-serif;
  --fnt-m: "JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;

  --shadow-1: var(--cl-shadow-xs);
  --shadow-2: var(--cl-shadow-soft);
  --shadow-card: var(--cl-shadow-soft);
  --shadow-hero: var(--cl-shadow);

  /* Typography scale — bumped for readability */
  --fs-xs:   13px;
  --fs-sm:   14px;
  --fs:      15.5px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  44px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background: var(--page);
  color: var(--ink-1);
  font-family: var(--fnt);
  font-size: var(--fs);
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;padding:0}
input,textarea,select{font:inherit;color:inherit}
::selection{background:rgba(45,91,255,.20)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#D1D7E2;border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#B6BDCC;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ============================================================================
   APP LAYOUT
   ============================================================================ */
.app{
  display:grid;
  grid-template-rows: 56px 1fr;
  height:100vh;
  position:relative;
}

.chrome{
  display:flex;align-items:center;gap:14px;padding:0 22px;
  background: var(--rail);
  border-bottom: 1px solid var(--line-1);
  position:relative;z-index:30;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fnt-d);font-weight:700}
.brand-mark{
  width:30px;height:30px;border-radius:9px;
  background: var(--gradient);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;
  box-shadow: 0 4px 14px rgba(124,58,237,.30);
  position:relative;
}
.brand-mark::after{
  /* Light theme: no gloss overlay. Kept selector for layout stability. */
  content:""; position:absolute; inset:1px; border-radius:8px;
  background: none;
  pointer-events:none;
}
.brand b{font-size:var(--fs-md);color:var(--ink-1);letter-spacing:-.015em}
.brand small{
  font-size:11px;color:var(--mute);font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;margin-left:4px;
}

.divider-v{width:1px;height:22px;background:var(--line-2);margin:0 6px}

.canvas-name{
  display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px;
  border-radius:9px;background:transparent;color:var(--ink-2);font-weight:600;font-size:var(--fs-sm);
  transition:.12s;
}
.canvas-name:hover{background:var(--soft);color:var(--ink-1)}
.canvas-name .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(45,91,255,.12)}

.spacer{flex:1}

.quick-ai{
  display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 13px 0 11px;border-radius:9px;
  background: var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-2);
  font-weight:600;font-size:13px;cursor:pointer;
  transition:.14s;
}
.quick-ai:hover{background:#E3ECFF}
.quick-ai .glyph{
  width:22px;height:22px;border-radius:6px;background:var(--gradient);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;
}
.quick-ai kbd{font-family:var(--fnt-m);font-size:10px;background:#fff;border:1px solid var(--brand-line);border-radius:4px;padding:1px 5px;font-weight:600;color:var(--brand-2)}

.icbtn{
  width:34px;height:34px;border-radius:8px;color:var(--ink-3);
  display:inline-grid;place-items:center;transition:.12s;
}
.icbtn:hover{background:var(--soft);color:var(--ink-1)}
.icbtn.active{background:var(--brand-soft);color:var(--brand)}

.btn{
  height:36px;padding:0 16px;border-radius:9px;
  background:#fff;border:1px solid var(--line-2);color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:7px;
  transition:.12s;
}
.btn:hover{background:var(--soft);border-color:var(--line-3);color:var(--ink-1)}
.btn.primary{
  background: var(--brand);color:#fff;border-color: var(--brand);
  box-shadow: 0 1px 0 rgba(15,23,41,.04), 0 6px 14px rgba(45,91,255,.22);
}
.btn.primary:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
/* .btn.gradient — kept selector name for legacy markup; visually now the
   "elevated primary" tier: solid violet so it is distinguishable from
   .btn.primary (which is brand blue) without using a CSS gradient. */
.btn.gradient{
  background: var(--cl-violet);color:#fff;border:0;
  box-shadow: 0 4px 12px rgba(124,58,237,.30);
}
.btn.gradient:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,58,237,.40);color:#fff;background:#6D28D9}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-3)}
.btn.ghost:hover{background:var(--soft);color:var(--ink-1)}
.btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:7px}
.btn.xs{height:26px;padding:0 10px;font-size:11.5px;border-radius:6px}
.btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

.user-chip{
  width:36px;height:36px;border-radius:50%;
  background: var(--cl-violet);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:var(--fs-sm);
  cursor:pointer;
}

/* ============================================================================
   CANVAS
   ============================================================================ */
.canvas{
  position:relative;
  display:flex;flex-direction:column;
  background: var(--page);
  overflow:hidden;
}

/* ---- Spotlight empty state ---- */
.spotlight{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding: 0 24px;text-align:center;animation: spotIn .5s ease both;
}
@keyframes spotIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.spotlight .badge{
  display:inline-flex;align-items:center;gap:8px;
  padding: 7px 14px;border-radius: 999px;
  background:#fff;border:1px solid var(--line-2);
  font-size: 12.5px;color:var(--ink-3);font-weight:600;
  box-shadow: var(--shadow-1);
  margin-bottom:32px;
}
.spotlight .badge .d{width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(45,91,255,.16);animation:pulseD 1.8s infinite}
@keyframes pulseD{0%,100%{box-shadow:0 0 0 0 rgba(45,91,255,.4)}50%{box-shadow:0 0 0 8px rgba(45,91,255,0)}}

.spotlight h1{
  font-family:var(--fnt-d);font-size: var(--fs-3xl);font-weight:700;
  letter-spacing:-.03em;line-height:1.12;margin:0 0 14px;
  color:var(--ink-1);max-width: min(880px, 100vw - 48px);
}
.spotlight h1 .grad{
  background: var(--gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.spotlight .sub{
  font-size: var(--fs-md);color:var(--mute);max-width: min(620px, 100vw - 48px);margin:0 0 36px;
  line-height:1.55;
}

.spotlight-prompts{
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width: min(920px, 100vw - 48px);
  margin-bottom: 28px;
}
.spotlight-prompt{
  padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line-2);
  font-size: 13.5px;color:var(--ink-2);font-weight:500;
  cursor:pointer;transition:.14s;
  box-shadow: var(--shadow-1);
}
.spotlight-prompt:hover{
  border-color:var(--brand);color:var(--brand);background:var(--brand-soft);
  transform: translateY(-1px);
}
.spotlight-prompt .ic{margin-right:7px;color:var(--mute)}
.spotlight-prompt:hover .ic{color:var(--brand)}

.spotlight-meta{
  margin-top: 36px;display:flex;gap:18px;font-size:12.5px;color:var(--faint);
  font-family:var(--fnt-m);
}
.spotlight-meta .pip{display:inline-flex;align-items:center;gap:5px}
.spotlight-meta .pip .g{width:6px;height:6px;border-radius:50%;background:var(--ok)}

/* ---- Conversation (after first prompt) ---- */
.convo-wrap{
  flex:1;display:flex;flex-direction:column;min-height:0;
}
.convo{
  flex:1;overflow-y:auto;
  padding: 28px 24px 12px;
  scroll-behavior:smooth;
}
/* fluid reading lane: inner cap 920px (primary read width), outer respects viewport */
.convo-inner{max-width: min(100vw - 48px, 100%); width: min(920px, 100%); margin: 0 auto; padding: 0 24px;}

.msg{margin-bottom: 28px;animation: msgIn .25s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.msg-head{
  display:flex;align-items:center;gap:9px;margin-bottom:9px;
  font-size: 12.5px;font-weight:700;color:var(--mute);
  text-transform:uppercase;letter-spacing:.9px;
}
.msg-head .av{
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-weight:800;font-size:10.5px;color:#fff;flex-shrink:0;
}
.msg.user .msg-head .av{background:var(--cl-violet)} /* user message avatar — solid violet, no gradient */
.msg.forge .msg-head .av{background:var(--gradient)}
.msg.system .msg-head .av{background:var(--ink-1)}
.msg-head .time{margin-left:auto;font-weight:500;color:var(--faint);text-transform:none;letter-spacing:0;font-size:11.5px;font-family:var(--fnt-m)}

.msg.user .bubble{
  background:#fff;border:1px solid var(--line-1);
  padding: 14px 18px;border-radius: 12px;
  font-size: var(--fs);color:var(--ink-1);line-height:1.55;
  box-shadow: var(--shadow-1);
}
.msg.forge .bubble{
  background:transparent;border:0;padding:0;
  font-size: var(--fs-md);color:var(--ink-1);line-height:1.65;
}
.msg.forge .bubble p{margin: 0 0 12px}
.msg.forge .bubble b{font-weight:700;color:var(--ink-1)}
.msg.forge .bubble code{font-family:var(--fnt-m);font-size:12.5px;background:var(--soft);border:1px solid var(--line-1);border-radius:5px;padding:1px 6px;color:var(--brand-2)}

/* thinking stream */
.thinking{
  margin: 6px 0 14px;
  background: #FAFBFD; /* solid mid-tone, no gradient */
  border:1px solid var(--line-1);border-radius:12px;
  padding: 12px 16px;
  font-family:var(--fnt-m);font-size:12.5px;color:var(--ink-3);line-height:1.85;
}
.thinking .th-head{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:1px;
  margin-bottom:6px;
}
.thinking .th-head .models{margin-left:auto;display:flex;gap:4px}
.thinking .step{display:flex;align-items:center;gap:9px;padding:1px 0}
.thinking .step.run{color:var(--brand)}
.thinking .step.done{color:var(--ink-3)}
.thinking .step.done .ico{color:var(--ok)}
.thinking .step .ico{width:13px;text-align:center;flex-shrink:0;font-weight:700}
.thinking .step .lbl{flex:1}
.thinking .step .by{font-size:10.5px;color:var(--faint)}

.model-pip{
  display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:999px;
  background:var(--soft);border:1px solid var(--line-1);font-size:10px;color:var(--ink-3);font-weight:700;
  letter-spacing:.3px;
}
.model-pip .d{width:5px;height:5px;border-radius:50%;background:var(--ghost)}
.model-pip.on{background:#fff;color:var(--brand-2);border-color:var(--brand-line)}
.model-pip.on .d{background:var(--brand);animation:miniPulse 1.1s infinite}
@keyframes miniPulse{0%,100%{box-shadow:0 0 0 0 rgba(45,91,255,.5)}50%{box-shadow:0 0 0 4px rgba(45,91,255,0)}}

/* PR-two additions ----------------------------------------------------- */
/* PK / FK pills on schema field rows */
.pill-pk{background:var(--soft);color:var(--brand-2);border:1px solid var(--brand-line);padding:0 6px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:.3px}
.pill-fk{background:var(--soft);color:var(--ink-2);border:1px solid var(--line-1);padding:0 6px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:.3px}

/* Schema drawer search box */
.lib-search{width:100%;margin:6px 0 10px;padding:7px 9px;border:1px solid var(--line-1);border-radius:7px;background:var(--bg-2);color:var(--ink-1);font:inherit}
.lib-search:focus{outline:none;border-color:var(--brand-line)}

/* Schema drawer field row — keyboard focus */
.sch-fld{cursor:pointer}
.sch-fld:hover{background:var(--soft)}
.sch-fld:focus{outline:2px solid var(--brand-line);outline-offset:-2px}

/* Filter editor — operator pick buttons */
.op-pick{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 8px}
.op-pick .op-btn{padding:3px 9px;border:1px solid var(--line-1);background:var(--bg-2);color:var(--ink-2);border-radius:6px;font:inherit;font-size:11px;cursor:pointer}
.op-pick .op-btn:hover{border-color:var(--brand-line);color:var(--ink-1)}
.op-pick .op-btn.on{background:var(--soft);border-color:var(--brand-line);color:var(--brand-2);font-weight:600}

/* Filter editor — dual input range (number/date between, daterange) */
.fe-range{display:flex;gap:6px}
.fe-range input{flex:1;min-width:0}

/* Filter editor — choice pill grid */
.choice-grid{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}
.choice-grid .choice-pill{padding:3px 10px;border:1px solid var(--line-1);background:var(--bg-2);color:var(--ink-2);border-radius:12px;font:inherit;font-size:11px;cursor:pointer}
.choice-grid .choice-pill:hover{border-color:var(--brand-line)}
.choice-grid .choice-pill.on{background:var(--soft);border-color:var(--brand-line);color:var(--brand-2);font-weight:600}

/* Assistant suggestions + action chips (post /ask) */
.suggestions{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.suggestion{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:12px}
.suggestion .sug-ic{color:var(--brand)}
.action-chips{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.action-chip{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--line-1);background:var(--bg-2);color:var(--ink-2);border-radius:14px;font:inherit;font-size:11px;cursor:pointer}
.action-chip:hover{border-color:var(--brand-line);color:var(--brand-2)}

/* Command palette item (renamed from cmdk-row) — keyboard nav */
.cmdk-item{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border-radius:6px;cursor:pointer}
.cmdk-item:hover{background:var(--soft)}
.cmdk-item .cmdk-n{color:var(--ink-1);font-weight:500}
.cmdk-item .cmdk-m{color:var(--ink-3);font-size:11px}

/* ---- Quick action chips (under AI replies) ---- */
.action-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.action-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;
  background:#fff;border:1px solid var(--line-2);
  font-size:13px;color:var(--ink-2);font-weight:600;
  cursor:pointer;transition:.12s;
  box-shadow: var(--shadow-1);
}
.action-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.action-chip .ic{font-family:var(--fnt-m);font-weight:800;color:var(--mute);font-size:11px}
.action-chip:hover .ic{color:var(--brand)}

/* ---- ARTIFACT CARD (the hero) ---- */
.artifact{
  margin-top: 14px;
  background:#fff;border:1px solid var(--line-1);border-radius: 14px;
  overflow:hidden;box-shadow: var(--shadow-card);
  animation: artIn .42s cubic-bezier(.2,.7,.3,1.2) both;
  position:relative;
}
@keyframes artIn{
  0%{opacity:0;transform:translateY(14px) scale(.97)}
  60%{opacity:1;transform:translateY(0) scale(1.005)}
  100%{transform:translateY(0) scale(1)}
}
.artifact.materializing::before{
  content:"";position:absolute;inset:0;
  background: var(--gradient-soft);
  pointer-events:none;animation:shimmerArt 1.2s ease-out forwards;
}
@keyframes shimmerArt{to{opacity:0}}

.art-head{
  display:flex;align-items:center;gap:14px;
  padding: 16px 18px;border-bottom:1px solid var(--line-1);
  background: #FAFBFD; /* solid, no gradient */
}
.art-head .lbl{
  font-family:var(--fnt-m);font-size:10.5px;font-weight:700;color:var(--mute);
  text-transform:uppercase;letter-spacing:1.2px;
}
.art-head h3{
  margin:2px 0 0;font-size:var(--fs-lg);font-family:var(--fnt-d);font-weight:700;
  letter-spacing:-.02em;color:var(--ink-1);
}
.art-head .meta{font-size:12px;color:var(--mute);margin-top:3px;font-family:var(--fnt-m)}
.art-head .meta b{color:var(--ink-2);font-weight:600}
.art-head .right{margin-left:auto;display:flex;gap:6px;align-items:center;flex-shrink:0}

.mod-tag{
  font-family:var(--fnt-m);font-size:10px;font-weight:700;
  padding:2px 7px;border-radius:5px;letter-spacing:.4px;
  background:var(--soft);border:1px solid var(--line-1);color:var(--ink-3);
}
.mod-tag.FIN{background:#EEF3FF;color:#1D4ED8;border-color:#C9D6F7}
.mod-tag.ADM{background:#F5EFFF;color:#6B21A8;border-color:#DDC6FA}
.mod-tag.HRM{background:#E8F8F4;color:#065F46;border-color:#B5E4D5}
.mod-tag.ATT{background:#FFF4E6;color:#92400E;border-color:#FBD9A6}
.mod-tag.EXM{background:#FEEDED;color:#991B1B;border-color:#FBC4C4}
.mod-tag.LIB{background:#F5EAFD;color:#7E22CE;border-color:#E0C8F5}
.mod-tag.TRN{background:#E5F5FE;color:#075985;border-color:#B6E0F8}

.tag{
  font-family:var(--fnt-m);font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;
  background:var(--soft);color:var(--ink-3);border:1px solid var(--line-1);
}
.tag.acc{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:#BBF7D0}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:#FDE68A}
.tag.bad{background:var(--bad-soft);color:var(--bad);border-color:#FECACA}

/* artifact KPI strip */
.art-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding: 0;border-bottom:1px solid var(--line-1);
}
.art-kpi{padding:14px 16px;border-right:1px solid var(--line-1);position:relative}
.art-kpi:last-child{border-right:0}
.art-kpi .lbl{font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.9px}
.art-kpi .val{font-size:22px;color:var(--ink-1);font-weight:700;letter-spacing:-.5px;margin-top:3px;font-family:var(--fnt-d)}
.art-kpi .trend{font-size:11.5px;font-weight:600;margin-top:2px;color:var(--mute)}
.art-kpi .trend.up{color:var(--ok)}
.art-kpi .trend.dn{color:var(--bad)}

/* artifact param chips (read-only) */
.art-params{
  display:flex;flex-wrap:wrap;gap:7px;padding: 12px 18px;
  border-bottom:1px solid var(--line-1);background:#FAFBFD;
}
.art-param{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:7px;
  background:#fff;border:1px solid var(--line-1);
  font-size:12px;color:var(--ink-2);font-weight:500;
}
.art-param .k{color:var(--mute);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.art-param .v{font-family:var(--fnt-m);font-size:12px;color:var(--ink-1);font-weight:600}

/* artifact table preview (top N rows) */
.art-grid{padding: 0 18px 14px;overflow:auto}
.art-grid table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:8px}
.art-grid th{
  text-align:left;padding:9px 12px;background:#FAFBFD;color:#1F477A;font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid var(--line-1);
}
.art-grid th.right{text-align:right}
.art-grid td{padding:9px 12px;border-bottom:1px solid #F2F4F8;color:var(--ink-2);vertical-align:middle}
.art-grid td.right{text-align:right}
.art-grid tr:hover td{background:#FAFBFD}
.art-grid tr:last-child td{border-bottom:0}

.amt{font-family:var(--fnt-m);font-weight:700;color:var(--ink-1);font-size:13px}
.mono-c{font-family:var(--fnt-m);font-size:12.5px;color:var(--brand-2)}
.muted-c{color:var(--mute);font-size:12.5px}
.strong-c{font-weight:600;color:var(--ink-1)}
.sub-c{display:block;font-size:11px;color:var(--faint);margin-top:1px;font-weight:400}

.bank-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:6px}
.bank-chip .b{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800}
.bank-chip[data-b="HDFC"]{background:#fff5e6;color:#9a3412}.bank-chip[data-b="HDFC"] .b{background:#dc2626}
.bank-chip[data-b="ICICI"]{background:#fff7ed;color:#9a3412}.bank-chip[data-b="ICICI"] .b{background:#ea580c}
.bank-chip[data-b="SBI"]{background:#eff6ff;color:#1e40af}.bank-chip[data-b="SBI"] .b{background:#2563eb}
.bank-chip[data-b="AXIS"]{background:#fef2f2;color:#991b1b}.bank-chip[data-b="AXIS"] .b{background:#9d174d}
.bank-chip[data-b="KOTAK"]{background:#fffbeb;color:#92400e}.bank-chip[data-b="KOTAK"] .b{background:#d97706}
.bank-chip[data-b="PNB"]{background:#f0fdf4;color:#166534}.bank-chip[data-b="PNB"] .b{background:#16a34a}
.bank-chip[data-b="BOB"]{background:#eef2ff;color:#3730a3}.bank-chip[data-b="BOB"] .b{background:#4f46e5}
.bank-chip[data-b="CANARA"]{background:#f0fdfa;color:#115e59}.bank-chip[data-b="CANARA"] .b{background:#0d9488}
.bank-chip[data-b="INDUSIND"]{background:#fff1f2;color:#9f1239}.bank-chip[data-b="INDUSIND"] .b{background:#be123c}

.due-soon{color:var(--bad);font-weight:700;font-family:var(--fnt-m);font-size:12.5px}
.due-week{color:var(--warn);font-weight:600;font-family:var(--fnt-m);font-size:12.5px}
.due-far{color:var(--ok);font-weight:600;font-family:var(--fnt-m);font-size:12.5px}

.status-pill{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.5px}
.status-pill.pending{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.status-pill.cleared{background:#ecfdf5;color:#047857;border:1px solid #bbf7d0}
.status-pill.bounced{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.status-pill.deposited{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}

.type-chip{
  font-family:var(--fnt-m);font-size:11px;font-weight:700;letter-spacing:.5px;
  padding:3px 7px;border-radius:5px;text-transform:uppercase;
  background:var(--soft);color:var(--ink-3);border:1px solid var(--line-1);
}
.type-chip[data-v="REC"]{background:#ECFDF5;color:#047857;border-color:#BBF7D0}
.type-chip[data-v="PAY"]{background:#FEF2F2;color:#B91C1C;border-color:#FECACA}
.type-chip[data-v="JV"] {background:#EEF2FF;color:#3730A3;border-color:#C7D2FE}

.pct-bar{display:flex;align-items:center;gap:8px;font-family:var(--fnt-m);font-weight:700;font-size:12.5px}
.pct-bar .pb{flex:1;height:7px;border-radius:4px;background:#EEF1F7;overflow:hidden;min-width:60px}
.pct-bar .pb i{display:block;height:100%;background:var(--brand);border-radius:4px}
.pct-bar.lo .pb i{background:var(--bad)}
.pct-bar.mid .pb i{background:var(--warn)}
.pct-bar.hi  .pb i{background:var(--ok)}

.art-foot{
  display:flex;align-items:center;gap:10px;
  padding: 11px 18px;
  border-top:1px solid var(--line-1);
  background:#FAFBFD;
  font-size:11.5px;color:var(--mute);font-family:var(--fnt-m);
}
.art-foot .more{margin-left:auto}
.art-foot b{color:var(--ink-2);font-weight:600}

.art-actions{display:flex;gap:6px;align-items:center}

/* ---- Suggestion bubble (proactive AI cue) ---- */
.suggestion{
  margin-top: 14px;
  padding: 12px 16px;
  background: #F5F8FF; /* very light blue solid, no gradient */
  border: 1px dashed var(--brand-line);
  border-radius:12px;
  display:flex;align-items:flex-start;gap:11px;
}
.suggestion .glyph{
  width:24px;height:24px;border-radius:7px;background:var(--gradient);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:11px;flex-shrink:0;
}
.suggestion .body{flex:1;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.suggestion .body b{color:var(--ink-1)}

/* ============================================================================
   HERO COMPOSER
   ============================================================================ */
.composer-wrap{
  margin-top: auto;            /* push composer to bottom of canvas flex column */
  padding: 18px 24px 24px;
  background: transparent;
  width: 100%;
}
.composer{
  max-width: min(920px, 100vw - 48px);margin: 0 auto;
  background:#fff;border:1px solid var(--line-2);border-radius:18px;
  box-shadow: var(--shadow-hero);
  padding: 14px 16px 12px;
  transition: .2s;
  position:relative;
}
.composer:focus-within{
  border-color: var(--brand-line);
  box-shadow: 0 4px 12px rgba(15,23,41,.06), 0 16px 40px rgba(45,91,255,.16), 0 0 0 4px rgba(45,91,255,.10);
}
.composer.hero{
  max-width: min(720px, 100vw - 48px);
  border-radius:22px;padding: 18px 22px 14px;
}
.composer.hero textarea{font-size: 18px;min-height:50px}

.composer-row1{display:flex;align-items:flex-start;gap:12px}
.composer-row1 .mic{
  width:38px;height:38px;border-radius:10px;
  display:grid;place-items:center;color:var(--ink-3);
  background:var(--soft);border:1px solid var(--line-1);
  flex-shrink:0;transition:.14s;cursor:pointer;
}
.composer-row1 .mic:hover{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-line)}
.composer-row1 .mic.recording{color:#fff;background:var(--bad);border-color:var(--bad);animation:micPulse 1s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(185,28,28,.6)}50%{box-shadow:0 0 0 8px rgba(185,28,28,0)}}

.composer textarea{
  flex:1;background:transparent;border:0;outline:0;resize:none;
  color:var(--ink-1);font-size: var(--fs-md);line-height:1.55;font-family:inherit;
  min-height: 42px;max-height: 200px;padding: 8px 0;
}
.composer textarea::placeholder{color:var(--faint)}

.composer-row2{
  display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;
  border-top:1px dashed var(--line-1);
}
.cm-btn{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 11px;border-radius:8px;
  font-size:12px;font-weight:600;color:var(--ink-3);
  background:transparent;border:1px solid transparent;
  transition:.12s;
}
.cm-btn:hover{background:var(--soft);color:var(--ink-1);border-color:var(--line-1)}
.cm-btn.active{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.cm-btn .ic{font-size:13px}

.lang-pick{
  display:inline-flex;background:var(--soft);border:1px solid var(--line-1);border-radius:8px;padding:2px;
}
.lang-pick button{
  height:24px;padding:0 9px;border-radius:5px;color:var(--mute);font-size:11px;font-weight:600;font-family:var(--fnt-m);letter-spacing:.3px;
}
.lang-pick button.active{background:#fff;color:var(--ink-1);box-shadow:var(--shadow-1)}
.lang-pick button:hover{color:var(--ink-2)}

.composer-row2 .right{margin-left:auto;display:flex;gap:8px;align-items:center}
.composer-row2 .ctx-pip{
  font-size:11px;color:var(--faint);font-family:var(--fnt-m);
}
.composer-row2 .ctx-pip b{color:var(--ink-3);font-weight:600}

/* .send-btn — primary "submit your prompt" action.
   Distinct from .btn.primary by using violet (vs brand blue) so the user's
   eye lands on it as the hero CTA. Violet shadow matches the violet fill
   so there is no halo mismatch. */
.send-btn{
  display:inline-flex;align-items:center;gap:7px;
  height:36px;padding:0 16px;border-radius:9px;
  background: var(--cl-violet);color:#fff;font-weight:700;font-size:13px;
  box-shadow: 0 4px 12px rgba(124,58,237,.30);
  transition:.14s;
}
.send-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(124,58,237,.40);background:#6D28D9}
.send-btn:disabled{opacity:.4;cursor:not-allowed}
.send-btn .ks{font-family:var(--fnt-m);font-size:10.5px;opacity:.7;margin-left:2px}

/* ============================================================================
   DRAWERS (slide-in from edges)
   ============================================================================ */
.drawer-toggles{
  position:absolute;top:72px;display:flex;flex-direction:column;gap:7px;z-index:20;
}
.drawer-toggles.left{left:14px}
.drawer-toggles.right{right:14px}
.drawer-tog{
  width:42px;height:42px;border-radius:11px;
  background:#fff;border:1px solid var(--line-1);
  color:var(--ink-3);display:grid;place-items:center;font-family:var(--fnt-m);font-weight:700;
  cursor:pointer;transition:.14s;
  box-shadow: var(--shadow-1);
  font-size:11px;letter-spacing:.5px;
}
.drawer-tog .ic{font-size:16px}
.drawer-tog:hover{color:var(--brand);border-color:var(--brand-line);background:var(--brand-soft);transform:translateX(0)}
.drawer-tog.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 14px rgba(45,91,255,.30)}

.drawer{
  position:absolute;top:0;bottom:0;width: min(360px, 85vw);z-index:40;
  background:#fff;border-right:1px solid var(--line-1);
  display:flex;flex-direction:column;min-height:0;
  transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.3,1);
  box-shadow: 12px 0 30px rgba(15,23,41,.06);
}
.drawer.right{right:0;left:auto;border-right:0;border-left:1px solid var(--line-1);transform:translateX(100%);box-shadow:-12px 0 30px rgba(15,23,41,.06)}
.drawer.open{transform:translateX(0)}

.drawer-head{
  padding:14px 16px;border-bottom:1px solid var(--line-1);
  display:flex;align-items:center;gap:8px;
}
.drawer-head h3{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink-1)}
.drawer-head .sub{font-size:11.5px;color:var(--mute);margin-left:6px}
.drawer-head .x{margin-left:auto;width:30px;height:30px;border-radius:8px;color:var(--mute);font-size:14px;line-height:1}
.drawer-head .x:hover{background:var(--soft);color:var(--ink-1)}

.drawer-body{flex:1;overflow-y:auto;padding:12px 14px 18px}

.drawer-search{
  display:flex;align-items:center;gap:9px;
  margin-bottom: 12px;height:34px;padding:0 12px;
  background:var(--soft);border:1px solid var(--line-1);border-radius:8px;
}
.drawer-search input{flex:1;background:transparent;border:0;outline:0;font-size:13px;color:var(--ink-1)}
.drawer-search input::placeholder{color:var(--faint)}

/* library cards inside drawer */
.lib-card{
  display:block;padding:10px 12px;border-radius:9px;border:1px solid transparent;cursor:pointer;
  margin-bottom:3px;transition:.12s;
}
.lib-card:hover{background:var(--soft);border-color:var(--line-1)}
.lib-card .top{display:flex;align-items:center;gap:8px}
.lib-card .nm{font-weight:600;font-size:13px;color:var(--ink-1);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-card .star{font-size:13px;color:#F59E0B}.lib-card .star.dim{color:var(--ghost)}
.lib-card .ds{font-size:11.5px;color:var(--mute);margin-top:3px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lib-card .meta{display:flex;gap:6px;margin-top:5px;font-size:11px;color:var(--faint);font-family:var(--fnt-m)}
.lib-card .meta .r{margin-left:auto}

.scope-chips{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
.scope-chip{
  font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;
  background:var(--soft);color:var(--ink-3);border:1px solid var(--line-1);cursor:pointer;
}
.scope-chip.active{background:var(--ink-1);color:#fff;border-color:var(--ink-1)}

/* drawer history list */
.hist-item{
  padding:10px 12px;border-radius:9px;cursor:pointer;margin-bottom:3px;
  border:1px solid transparent;
}
.hist-item:hover{background:var(--soft);border-color:var(--line-1)}
.hist-item .nm{font-size:13px;font-weight:600;color:var(--ink-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hist-item .sub{font-size:11.5px;color:var(--mute);margin-top:2px;font-family:var(--fnt-m)}
.hist-item.active{background:var(--brand-soft);border-color:var(--brand-line)}
.hist-item.active .nm{color:var(--brand-2)}

/* schema browser */
.schema-tree{padding: 4px 2px 14px}
.tbl{
  margin: 4px 2px;border:1px solid var(--line-1);background:#fff;border-radius:9px;overflow:hidden;
}
.tbl-h{
  display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  border-bottom:1px solid transparent;
}
.tbl-h:hover{background:var(--soft)}
.tbl.open .tbl-h{border-bottom-color:var(--line-1)}
.tbl-h .chev{width:9px;color:var(--mute);transition:.16s;font-size:11px}
.tbl.open .tbl-h .chev{transform:rotate(90deg)}
.tbl-h .nm{font-family:var(--fnt-m);font-size:12.5px;font-weight:700;color:var(--ink-1)}
.tbl-h .meta{margin-left:auto;font-size:11px;color:var(--faint);font-family:var(--fnt-m)}
.tbl-cols{display:none}
.tbl.open .tbl-cols{display:block}
.col{
  display:flex;align-items:center;gap:9px;padding:6px 11px 6px 26px;
  font-family:var(--fnt-m);font-size:11.5px;cursor:pointer;
  border-bottom:1px solid #F2F4F8;
}
.col:hover{background:var(--brand-soft);color:var(--ink-1)}
.col .ty{margin-left:auto;color:var(--mute);font-size:10.5px}
.col.pk .nm{color:#7C3AED}.col.fk .nm{color:var(--brand)}
.col .pin{width:14px;color:var(--faint);font-size:10px;text-align:center;flex-shrink:0;font-weight:700}
.col.pk .pin::after{content:"PK";color:#7C3AED}
.col.fk .pin::after{content:"FK";color:var(--brand)}

/* ============================================================================
   FULL-SCREEN ARTIFACT EXPANDED VIEW
   ============================================================================ */
.fullart{
  position:absolute;inset:0;background:rgba(15,23,41,.55);backdrop-filter:blur(6px);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:36px 24px;
  animation: fade .18s ease both;
}
.fullart.show{display:flex}
.fullart .pane{
  background:#fff;border-radius:16px;width: min(1180px, 100vw - 48px);max-height:calc(100vh - 72px);
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-2);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fullart .pane-head{padding:16px 22px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-1);background:#FAFBFD} /* solid header */
.fullart .pane-head h2{margin:0;font-size:22px;font-family:var(--fnt-d);font-weight:700;letter-spacing:-.02em}
.fullart .pane-head .x{margin-left:auto;width:34px;height:34px;border-radius:8px;color:var(--mute);font-size:18px}
.fullart .pane-head .x:hover{background:var(--soft);color:var(--ink-1)}
.fullart .pane-body{flex:1;overflow:auto}

/* ============================================================================
   MODELS CONSTELLATION (header widget)
   ============================================================================ */
.constellation{
  display:inline-flex;align-items:center;gap:4px;height:30px;padding: 0 9px;
  border-radius:999px;background:#fff;border:1px solid var(--line-2);
  font-family:var(--fnt-m);font-size:11px;color:var(--mute);font-weight:600;
  cursor:pointer;
}
.constellation .star{
  display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ghost);
  margin: 0 1px;
}
.constellation .star.on{background:var(--ok);box-shadow:0 0 0 2px rgba(21,128,61,.18)}
.constellation .star.active{background:var(--brand);animation:miniPulse 1.1s infinite}
.constellation .lbl{margin-left:5px}

/* ============================================================================
   TOAST
   ============================================================================ */
.toast-wrap{position:fixed;bottom:104px;right:24px;display:flex;flex-direction:column;gap:7px;z-index:80;pointer-events:none}
.toast{
  pointer-events:auto;background:#fff;border:1px solid var(--line-2);border-radius:10px;
  padding:11px 14px;font-size:13px;color:var(--ink-1);min-width: min(260px, 100vw - 64px);
  box-shadow: var(--shadow-2);
  animation: tIn .22s ease both, tOut .22s ease 3.6s both forwards;
}
.toast .nm{font-weight:700;font-size:13px}
.toast .ds{font-size:11.5px;color:var(--mute);margin-top:2px}
.toast.ok{border-left:3px solid var(--ok)}
.toast.warn{border-left:3px solid var(--warn)}
.toast.err{border-left:3px solid var(--bad)}
@keyframes tIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes tOut{to{opacity:0;transform:translateY(8px)}}

/* ============================================================================
   MODAL (ship, cmdK, etc.)
   ============================================================================ */
.modal{
  position:fixed;inset:0;background:rgba(15,23,41,.45);backdrop-filter:blur(3px);z-index:90;
  display:none;align-items:flex-start;justify-content:center;padding: 96px 24px 24px;
}
.modal.show{display:flex}
.modal .box{
  background:#fff;border:1px solid var(--line-1);border-radius:14px;width: min(780px, 100vw - 48px);
  max-height:80vh;overflow:hidden;box-shadow:var(--shadow-2);display:flex;flex-direction:column;
}
.modal .h{padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-1)}
.modal .h h3{margin:0;font-size:var(--fs-lg);font-weight:700;color:var(--ink-1);letter-spacing:-.01em}
.modal .h .sub{font-size:13px;color:var(--mute);margin-left:8px}
.modal .h .x{margin-left:auto;width:32px;height:32px;border-radius:8px;color:var(--mute);font-size:16px;line-height:1}
.modal .h .x:hover{background:var(--soft);color:var(--ink-1)}
.modal .b{padding:20px;overflow-y:auto;flex:1}
.modal .f{padding:14px 20px;border-top:1px solid var(--line-1);display:flex;gap:10px;align-items:center;background:var(--soft)}

.cmdk{
  background:#fff;border:1px solid var(--line-1);border-radius:14px;width: min(640px, 100vw - 48px);
  box-shadow: var(--shadow-2);overflow:hidden;
}
.cmdk-input{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line-1)}
.cmdk-input input{flex:1;background:transparent;border:0;outline:0;font-size:var(--fs-md);color:var(--ink-1)}
.cmdk-input input::placeholder{color:var(--faint)}
.cmdk-list{max-height:50vh;overflow-y:auto;padding:6px}
.cmdk-grp{padding:8px 12px 4px;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:1px}
.cmdk-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;cursor:pointer}
.cmdk-item:hover,.cmdk-item.active{background:var(--soft)}
.cmdk-item .ic{width:28px;height:28px;border-radius:7px;background:var(--soft);color:var(--ink-2);display:grid;place-items:center;font-size:13px;flex-shrink:0;font-family:var(--fnt-m);font-weight:600}
.cmdk-item .nm{font-weight:600;font-size:13px;color:var(--ink-1)}
.cmdk-item .ds{font-size:11.5px;color:var(--mute)}
.cmdk-item .ks{margin-left:auto;font-family:var(--fnt-m);font-size:11px;color:var(--faint)}
.cmdk-foot{padding:10px 16px;border-top:1px solid var(--line-1);font-size:11.5px;color:var(--mute);display:flex;gap:14px;background:var(--soft)}
.cmdk-foot kbd{font-family:var(--fnt-m);background:#fff;border:1px solid var(--line-1);padding:1px 6px;border-radius:5px;font-size:10px;color:var(--ink-3);margin-right:4px;font-weight:600}

/* avatar menu */
.av-menu{
  position:absolute;top:54px;right:22px;z-index:60;
  background:#fff;border:1px solid var(--line-1);border-radius:12px;
  width: min(320px, 95vw);box-shadow:var(--shadow-2);
  display:none;overflow:hidden;
}
.av-menu.show{display:block}
.av-menu .head{padding:14px 16px;border-bottom:1px solid var(--line-1)}
.av-menu .head .nm{font-weight:700;font-size:13px;color:var(--ink-1)}
.av-menu .head .ro{font-size:12px;color:var(--mute);margin-top:2px}
.av-section{padding:6px 0;border-bottom:1px solid var(--line-1)}
.av-section:last-child{border-bottom:0}
.av-section .h{padding:9px 16px 4px;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:1px}
.av-row{display:flex;align-items:center;gap:11px;padding:9px 16px;font-size:13px;color:var(--ink-2);cursor:pointer}
.av-row:hover{background:var(--soft);color:var(--ink-1)}
.av-row .crest{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:10px;flex-shrink:0}
.av-row .meta{margin-left:auto;font-size:11px;color:var(--faint);font-family:var(--fnt-m)}
.av-row.active{background:var(--brand-soft);color:var(--brand)}

.code-block{
  background:#0E1729;border:1px solid #1E293B;border-radius:9px;padding:12px 16px;
  font-family:var(--fnt-m);font-size:12px;color:#CBD5E1;overflow:auto;line-height:1.7;
}
.code-block .k{color:#A78BFA}.code-block .s{color:#86EFAC}.code-block .n{color:#FDE68A}
.code-block .c{color:#64748B;font-style:italic}.code-block .t{color:#22D3EE}

.bundle-files{display:grid;gap:7px}
.bundle-file{
  display:flex;align-items:center;gap:12px;padding:10px 12px;background:#fff;border:1px solid var(--line-1);border-radius:9px;
}
.bundle-file .ic{width:32px;height:32px;border-radius:7px;background:var(--soft);color:var(--ink-2);display:grid;place-items:center;font-size:14px;border:1px solid var(--line-1)}
.bundle-file .nm{font-weight:600;color:var(--ink-1);font-size:13px}
.bundle-file .meta{font-size:11.5px;color:var(--mute);font-family:var(--fnt-m)}
.bundle-file .sz{margin-left:auto;font-family:var(--fnt-m);font-size:11.5px;color:var(--ink-3)}

/* notice */
.notice{
  padding:11px 13px;border-radius:9px;font-size:12.5px;line-height:1.55;
  border:1px solid;display:flex;gap:9px;align-items:flex-start;margin-bottom:7px;
}
.notice .ic{flex-shrink:0;font-size:14px;font-weight:700;line-height:1}
.notice.info  {border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-2)}
.notice.warn  {border-color:#FDE68A;background:var(--warn-soft);color:var(--warn)}
.notice.ok    {border-color:#BBF7D0;background:var(--ok-soft);color:var(--ok)}
.notice.danger{border-color:#FECACA;background:var(--bad-soft);color:var(--bad)}

/* shimmer skeleton during gen — animation disabled, solid placeholder only */
.shimmer{
  position:relative;overflow:hidden;background:var(--soft);
}
.shimmer::after{
  content:"";position:absolute;inset:0;
  background: none;
  animation: none;
}
@keyframes shim{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ============================================================================
   INTERACTIVE FILTER CHIPS (on artifact cards)
   ============================================================================ */
.filters-bar{
  display:flex;flex-wrap:wrap;gap:7px;padding: 12px 18px;
  border-bottom:1px solid var(--line-1);background:#FAFBFD;
  align-items:center;
}
.filter-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 6px 6px 11px;border-radius:9px;
  background:#fff;border:1px solid var(--line-2);
  font-size:13px;color:var(--ink-1);font-weight:500;
  cursor:pointer;transition:.12s;
  position:relative;
  box-shadow: var(--shadow-1);
}
.filter-chip:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.filter-chip .ic{font-size:13px;flex-shrink:0;line-height:1}
.filter-chip .k{
  color:var(--mute);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
}
.filter-chip .v{
  color:var(--ink-1);font-weight:600;font-family:var(--fnt-m);font-size:12.5px;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.filter-chip .x{
  width:20px;height:20px;border-radius:5px;display:grid;place-items:center;
  color:var(--mute);font-size:14px;line-height:1;margin-left:2px;
  transition:.1s;
}
.filter-chip .x:hover{background:#FEE2E2;color:var(--bad)}

.add-filter-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:9px;
  background:#fff;border:1px dashed var(--line-3);
  font-size:13px;color:var(--ink-3);font-weight:600;
  cursor:pointer;transition:.12s;
}
.add-filter-btn:hover{border-style:solid;border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.add-filter-btn .plus{
  width:18px;height:18px;border-radius:5px;background:var(--soft);color:var(--ink-2);
  display:grid;place-items:center;font-weight:800;font-size:12px;flex-shrink:0;line-height:1;
}
.add-filter-btn:hover .plus{background:var(--brand);color:#fff}

/* ============================================================================
   FILTER PICKER POPOVER (when "+ Add filter" is clicked)
   ============================================================================ */
.filter-pop{
  position:fixed;z-index:95;
  width:min(620px, 92vw);max-height:60vh;
  background:#fff;border:1px solid var(--line-1);border-radius:14px;
  box-shadow: var(--shadow-2);
  display:none;flex-direction:column;
  overflow:hidden;
}
.filter-pop.show{display:flex;animation: fpIn .14s ease both}
@keyframes fpIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.fp-head{
  padding:12px 16px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line-1);
}
.fp-head h4{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink-1)}
.fp-head .sub{font-size:12.5px;color:var(--mute);margin-left:4px}
.fp-head .x{margin-left:auto;width:28px;height:28px;border-radius:7px;color:var(--mute);font-size:16px;line-height:1}
.fp-head .x:hover{background:var(--soft);color:var(--ink-1)}
.fp-search{padding:8px 12px;border-bottom:1px solid var(--line-1)}
.fp-search input{
  width:100%;background:var(--soft);border:1px solid var(--line-1);border-radius:8px;
  padding:8px 12px;font-size:14px;color:var(--ink-1);outline:0;
}
.fp-search input:focus{border-color:var(--brand-line);background:#fff;box-shadow:0 0 0 3px rgba(45,91,255,.10)}
.fp-body{flex:1;overflow-y:auto;padding:10px 12px 14px}
.fp-section{margin-bottom:14px}
.fp-section h5{
  margin:8px 4px 6px;font-size:11px;font-weight:700;color:var(--mute);
  text-transform:uppercase;letter-spacing:1px;
}
.fp-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));gap:5px;
}
.fp-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 11px;border-radius:8px;background:#fff;border:1px solid var(--line-1);cursor:pointer;
  transition:.1s;
}
.fp-item:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.fp-item .ic{font-size:14px;flex-shrink:0;color:var(--mute)}
.fp-item:hover .ic{color:var(--brand)}
.fp-item .nm{font-weight:600;font-size:13px;color:var(--ink-1)}
.fp-item .ty{font-family:var(--fnt-m);font-size:10.5px;color:var(--faint);margin-left:auto;text-transform:lowercase}

/* ============================================================================
   FILTER WIDGET EDITOR (inline below a filter chip, when clicked)
   ============================================================================ */
.filter-editor{
  position:fixed;z-index:96;
  background:#fff;border:1px solid var(--line-1);border-radius:12px;
  box-shadow: var(--shadow-2);
  padding:14px 16px;min-width: min(280px, 95vw);max-width: min(420px, 95vw);
  display:none;flex-direction:column;gap:10px;
}
.filter-editor.show{display:flex;animation: fpIn .14s ease both}
.filter-editor h5{
  margin:0 0 4px;font-size:11px;font-weight:700;color:var(--mute);
  text-transform:uppercase;letter-spacing:1px;
}
.filter-editor h5 b{color:var(--ink-1);font-weight:700;text-transform:none;letter-spacing:0;font-size:14px}
.filter-editor .row{display:flex;align-items:center;gap:8px}
.filter-editor input[type=text],
.filter-editor input[type=number],
.filter-editor input[type=date],
.filter-editor select{
  width:100%;background:#fff;border:1px solid var(--line-2);color:var(--ink-1);
  border-radius:8px;padding:8px 11px;font-size:14px;outline:0;
  transition:.12s;font-family:inherit;
}
.filter-editor input:focus,.filter-editor select:focus{border-color:var(--brand-line);box-shadow:0 0 0 3px rgba(45,91,255,.10)}
.filter-editor .op-pick{display:flex;gap:4px;background:var(--soft);border:1px solid var(--line-1);border-radius:8px;padding:2px}
.filter-editor .op-pick button{
  height:26px;padding:0 9px;border-radius:5px;color:var(--mute);font-size:12px;font-weight:600;font-family:var(--fnt-m);
}
.filter-editor .op-pick button.active{background:#fff;color:var(--ink-1);box-shadow:var(--shadow-1)}

.choice-grid{display:flex;flex-wrap:wrap;gap:5px;max-height:240px;overflow-y:auto;padding:2px}
.choice-pill{
  padding:5px 10px;border-radius:6px;background:var(--soft);border:1px solid var(--line-1);
  font-size:12.5px;color:var(--ink-3);font-weight:600;cursor:pointer;transition:.1s;
}
.choice-pill:hover{background:#fff;border-color:var(--line-2);color:var(--ink-1)}
.choice-pill.on{background:var(--brand);color:#fff;border-color:var(--brand)}

.filter-editor .ed-actions{
  display:flex;gap:8px;align-items:center;padding-top:8px;border-top:1px solid var(--line-1);margin-top:4px;
}
.filter-editor .ed-actions .right{margin-left:auto;display:flex;gap:6px}

/* ============================================================================
   FRIENDLY SCHEMA DRAWER — entity-centric, humanized
   ============================================================================ */
.friendly-tree{padding:4px 4px 12px}
.fri-mod{margin-bottom:10px}
.fri-mod-head{
  display:flex;align-items:center;gap:9px;padding:8px 8px;
  font-size:12px;font-weight:700;color:var(--ink-1);
  text-transform:uppercase;letter-spacing:.6px;
}
.fri-mod-head .ic{font-size:16px}
.fri-mod-head .ct{
  font-family:var(--fnt-m);font-size:10.5px;color:var(--mute);background:var(--soft);
  border:1px solid var(--line-1);padding:1px 6px;border-radius:5px;letter-spacing:0;font-weight:600;
}
.fri-ent{
  margin:4px 4px;border:1px solid var(--line-1);background:#fff;border-radius:9px;overflow:hidden;
}
.fri-ent-h{
  display:flex;align-items:center;gap:9px;padding:9px 11px;cursor:pointer;
  border-bottom:1px solid transparent;
}
.fri-ent-h:hover{background:var(--soft)}
.fri-ent.open .fri-ent-h{border-bottom-color:var(--line-1)}
.fri-ent-h .chev{width:9px;color:var(--mute);transition:.16s;font-size:11px;flex-shrink:0}
.fri-ent.open .fri-ent-h .chev{transform:rotate(90deg)}
.fri-ent-h .nm{font-weight:700;font-size:13px;color:var(--ink-1)}
.fri-ent-h .meta{margin-left:auto;font-size:11px;color:var(--faint);font-family:var(--fnt-m)}
.fri-ent-desc{padding:4px 12px 8px 30px;font-size:11.5px;color:var(--mute);line-height:1.45;display:none}
.fri-ent.open .fri-ent-desc{display:block}
.fri-fields{display:none}
.fri-ent.open .fri-fields{display:block}
.fri-field{
  display:flex;align-items:center;gap:10px;padding:7px 11px 7px 28px;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;
  border-bottom:1px solid #F2F4F8;
}
.fri-field:hover{background:var(--brand-soft);color:var(--ink-1)}
.fri-field:last-child{border-bottom:0}
.fri-field .nm{font-weight:600;color:var(--ink-1)}
.fri-field .hint{font-size:11.5px;color:var(--mute);font-style:italic}
.fri-field .ty{
  margin-left:auto;font-family:var(--fnt-m);font-size:10.5px;color:var(--mute);
  background:var(--soft);border:1px solid var(--line-1);padding:1px 6px;border-radius:5px;font-weight:600;
}
.fri-field .add{
  font-family:var(--fnt-m);font-size:10.5px;color:var(--brand);font-weight:700;
  background:var(--brand-soft);border:1px solid var(--brand-line);padding:1px 6px;border-radius:5px;
  opacity:0;transition:.12s;
}
.fri-field:hover .add{opacity:1}

/* ============================================================================
   Custom widgets + responsive design — canonical forge.css was authored at
   a wide-only target; these rules add the responsive behaviour for narrower
   viewports without bridging any mismatched class.
   ============================================================================ */

/* Chrome bar elements should not wrap inside themselves at any viewport. */
.brand b, .brand small      { white-space: nowrap; }
.canvas-name                { white-space: nowrap; }
.quick-ai                   { white-space: nowrap; }
.btn.primary                { white-space: nowrap; }
.constellation .model-pip   { white-space: nowrap; }

/* < 1200px: chrome compresses — drop the subtitle and constellation labels
   so the chrome bar fits on a single row without text wrapping. */
@media (max-width: 1199px) {
  .brand small              { display: none; }
  .constellation .model-pip { font-size: 10px; padding: 0 5px; }
  .constellation .model-pip .d { width: 4px; height: 4px; }
  .quick-ai kbd             { display: none; }
}

/* < 980px: drop more — keep only the brand mark, canvas name, Quick AI, avatar.
   Constellation collapses to a small icon-only strip. */
@media (max-width: 979px) {
  .constellation            { display: none; }
  .icbtn                    { display: none; }
  .btn.primary span,
  .btn.primary svg          { /* keep arrow icon, label is fine */ }
}

.artifact-foot              { padding: 8px 18px; border-top: 1px solid var(--line-2);
                              font-family: var(--fnt-m); font-size: 11px; color: var(--faint);
                              text-align: right; font-variant-numeric: tabular-nums; }
.tenant-tag           { display: inline-flex; align-items: center; gap: 4px;
                        padding: 2px 8px; background: var(--soft);
                        border: 1px solid var(--line-2); border-radius: 5px;
                        font-size: 10.5px; color: var(--ink-3);
                        font-family: var(--fnt-m); margin-left: 6px; }
.tenant-tag.unknown   { background: var(--warn-soft); border-color: #FCD34D;
                        color: var(--warn); }

.trunc-badge          { display: inline-flex; align-items: center; gap: 5px;
                        padding: 3px 9px; background: var(--warn-soft);
                        border: 1px solid #FCD34D; color: var(--warn);
                        border-radius: 5px; font-size: 11px; font-weight: 600;
                        cursor: pointer; transition: .12s; font-family: var(--fnt-m); }
.trunc-badge:hover    { background: #FEF3C7; border-color: #F59E0B; }

.msg.msg-error .bubble{ background: var(--bad-soft); border-color: #FCA5A5;
                        color: var(--bad); }