@import url('assets/fonts/fonts.css');
:root{
  --bg:#0e1117; --panel:#161b22; --panel2:#1c232c; --line:#2a323c;
  --txt:#e6edf3; --muted:#8b98a5; --accent:#25d366; --accent2:#128c7e;
  --in:#202c33; --out:#075e54; --chatbg:#0b141a; --warn:#f0a202; --err:#f85149; --blue:#388bfd;
  --radius:10px; --radius-sm:7px; --shadow:0 6px 22px rgba(0,0,0,.32);
  --shadow-sm:0 2px 8px rgba(0,0,0,.22); --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-head:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
/* ── Falak canonical brand (default) — Navy #073A8C · Gold #FBB024 · Green #2D6A4F
   Source of truth: ~/Developer/falak-solar/design.md. Navy chrome, white content,
   one gold thread. Sidebar override below paints the rail navy. ─────────────── */
body[data-theme="falak"]{
  --navy:#073A8C; --navy-d:#052a66; --gold:#FBB024; --gold-d:#E07B00; --green:#2D6A4F;
  --bg:#eaf0f9; --panel:#ffffff; --panel2:#f2f6fc; --line:#dce4f1;
  --txt:#16202c; --muted:#5a6b85; --accent:#FBB024; --accent2:#073A8C;
  --in:#ffffff; --out:#e3f0d9; --chatbg:#e7eef8; --warn:#E07B00; --err:#d6453c; --blue:#073A8C;
  --shadow:0 8px 26px rgba(7,58,140,.13); --shadow-sm:0 2px 10px rgba(7,58,140,.09);
  --grad:linear-gradient(135deg,#FBB024,#E07B00);
}
body[data-theme="falak"] #sidebar{background:var(--navy);border-right-color:var(--navy-d)}
body[data-theme="falak"] .nav-item{color:#d6e2f6}
body[data-theme="falak"] .nav-item:hover{background:rgba(255,255,255,.09)}
body[data-theme="falak"] .nav-item.active{background:var(--gold);color:#08203f;font-weight:600}
body[data-theme="falak"] .status{color:#9fb3d6;border-top-color:rgba(255,255,255,.13)}
body[data-theme="falak"] .status.ok{color:var(--gold)}
body[data-theme="falak"] .theme-select-wrap{color:#cdd9ee;border-color:rgba(255,255,255,.2)}
body[data-theme="falak"] .theme-select{background:rgba(255,255,255,.08);color:#eaf0f9;border-color:rgba(255,255,255,.18)}
body[data-theme="falak"] .tab.active{color:#08203f}
body[data-theme="falak"] .msg.out{color:#16202c}
/* ── Graphite — neutral slate-grey dark (its own theme, NOT the green :root
   fallback). Steel accent, zero brand green. ─────────────────────────────── */
body[data-theme="graphite"]{
  --bg:#14161b; --panel:#1b1e25; --panel2:#232730; --line:#323845;
  --txt:#e6e9ef; --muted:#98a1b0; --accent:#9aa6bd; --accent2:#4a5365;
  --in:#232730; --out:#2b303b; --chatbg:#0f1116; --warn:#e0a800; --err:#e0574e; --blue:#6b8afd;
  --shadow:0 6px 22px rgba(0,0,0,.34); --shadow-sm:0 2px 8px rgba(0,0,0,.24);
}
body[data-theme="graphite"] .nav-item.active{background:var(--accent2);color:#fff}
body[data-theme="graphite"] .kpi-val{color:#c9d1e0}
/* ── premium themes (chosen via 🎨 dropdown, persisted to settings) ─────────── */
body[data-theme="midnight"]{
  --bg:#0b1020; --panel:#121a33; --panel2:#1a2444; --line:#283358;
  --txt:#e8edff; --muted:#8d9bc4; --accent:#6c8cff; --accent2:#3f5bd6;
  --in:#1a2342; --out:#2b3a7a; --chatbg:#0a1020; --blue:#6c8cff;
}
body[data-theme="emerald"]{
  --bg:#08130f; --panel:#0e1f18; --panel2:#142a20; --line:#1f3b2e;
  --txt:#e6f5ec; --muted:#86a896; --accent:#2bd47e; --accent2:#13986a;
  --in:#13261d; --out:#0c6b4b; --chatbg:#06120d; --blue:#34d399;
}
body[data-theme="falak-light"]{
  --bg:#f4f6fb; --panel:#ffffff; --panel2:#eef1f7; --line:#dfe4ee;
  --txt:#16202c; --muted:#5e6b7c; --accent:#1aa861; --accent2:#0d7a4a;
  --in:#ffffff; --out:#d7f3e3; --chatbg:#dbe3ee; --warn:#c47d00; --err:#d6453c; --blue:#2f6bd6;
  --shadow:0 6px 22px rgba(40,60,90,.12); --shadow-sm:0 2px 8px rgba(40,60,90,.08);
}
/* ── terminal color themes ───────────────────────────────────────────── */
body[data-theme="novel"]{  /* macOS Terminal "Novel" — cream paper, brown ink */
  --bg:#dfdbc3; --panel:#ece8d0; --panel2:#d4cfb4; --line:#c2ba98;
  --txt:#3b2322; --muted:#6f5b46; --accent:#a6701e; --accent2:#7a5018;
  --in:#ece8d0; --out:#cfe3b0; --chatbg:#d3cdb0; --warn:#a6701e; --err:#a3331f; --blue:#7a5018;
  --shadow:0 6px 22px rgba(90,70,40,.14); --shadow-sm:0 2px 8px rgba(90,70,40,.1);
}
body[data-theme="dracula"]{
  --bg:#282a36; --panel:#21222c; --panel2:#343746; --line:#44475a;
  --txt:#f8f8f2; --muted:#9aa0c0; --accent:#50fa7b; --accent2:#bd93f9;
  --in:#343746; --out:#44475a; --chatbg:#21222c;
}
body[data-theme="solarized"]{ /* Solarized Dark */
  --bg:#002b36; --panel:#073642; --panel2:#0a4250; --line:#0e4b5a;
  --txt:#93a1a1; --muted:#586e75; --accent:#2aa198; --accent2:#268bd2;
  --in:#073642; --out:#0a4f48; --chatbg:#002028;
}
body[data-theme="gruvbox"]{ /* Gruvbox Dark */
  --bg:#282828; --panel:#32302f; --panel2:#3c3836; --line:#504945;
  --txt:#ebdbb2; --muted:#a89984; --accent:#b8bb26; --accent2:#689d6a;
  --in:#3c3836; --out:#4a5238; --chatbg:#1d2021;
}
body[data-theme="homebrew"]{ /* classic green-on-black CRT */
  --bg:#000000; --panel:#0a0f0a; --panel2:#0f180f; --line:#1d3a1d;
  --txt:#28e028; --muted:#1a8a1a; --accent:#37ff37; --accent2:#1f9e1f;
  --in:#0c160c; --out:#0f2e0f; --chatbg:#000000;
}

/* ════════════════════════════════════════════════════════════════════════════
   STITCH-GENERATED THEME CONCEPTS (project 10683045662378562669)
   Each is a self-contained data-theme block + element overrides. Additive only —
   switch back via the 🎨 picker to revert instantly. Animated themes (Aurora,
   Neon Pulse) layer keyframe motion gated entirely by data-theme.
   ════════════════════════════════════════════════════════════════════════════ */

/* shared keyframe library — only referenced by themed rules below */
@keyframes flkGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes flkShimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes flkGlowPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,45,217,.4),0 0 10px rgba(255,45,217,.25)}50%{box-shadow:0 0 0 1px rgba(0,240,255,.6),0 0 22px rgba(0,240,255,.45)}}
@keyframes flkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* ── 1 · AURORA GLASS — dark indigo, frosted glass, violet→cyan, animated ───── */
body[data-theme="aurora"]{
  --bg:#0b1020; --panel:rgba(22,28,56,.72); --panel2:rgba(32,40,78,.6); --line:rgba(255,255,255,.09);
  --txt:#e9ecff; --muted:#9aa6d6; --accent:#7c5cff; --accent2:#22d3ee;
  --in:rgba(38,46,88,.7); --out:#2a3f8a; --chatbg:#0a0f22; --blue:#22d3ee; --err:#ff6b8a; --warn:#fbbf24;
  --grad:linear-gradient(135deg,#7c5cff,#22d3ee);
  --shadow:0 12px 40px rgba(10,12,40,.55); --shadow-sm:0 4px 18px rgba(10,12,40,.4);
}
body[data-theme="aurora"] #sidebar{background:linear-gradient(160deg,#3a1a8a,#0b1020 42%,#0e4a72);background-size:220% 220%;animation:flkGradientShift 10s ease infinite;border-right-color:rgba(255,255,255,.07)}
body[data-theme="aurora"] .card,body[data-theme="aurora"] .kpi{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body[data-theme="aurora"] .nav-item.active{background:linear-gradient(90deg,#7c5cff,#22d3ee,#7c5cff);background-size:200% auto;animation:flkShimmer 4s linear infinite;color:#fff;box-shadow:0 4px 16px rgba(124,92,255,.4)}
body[data-theme="aurora"] .kpi-val{background:linear-gradient(90deg,#7c5cff,#22d3ee,#7c5cff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flkShimmer 5s linear infinite}

/* ── 2 · CARBON PRO — OLED black, sharp edges, electric lime, engineered ────── */
body[data-theme="carbon"]{
  --bg:#050607; --panel:#0d0f12; --panel2:#14171b; --line:#20252b;
  --txt:#e8eef2; --muted:#7d8893; --accent:#c6ff3a; --accent2:#171b20;
  --in:#14171b; --out:#243010; --chatbg:#050607; --blue:#5ad1ff; --warn:#ffb020; --err:#ff5c5c;
  --radius:3px; --radius-sm:2px; --shadow:0 4px 18px rgba(0,0,0,.6); --shadow-sm:0 2px 8px rgba(0,0,0,.5);
}
body[data-theme="carbon"] .card,body[data-theme="carbon"] .kpi,body[data-theme="carbon"] button.btn{border-radius:3px}
body[data-theme="carbon"] .nav-item.active{background:var(--accent);color:#0a0f00;font-weight:700}
body[data-theme="carbon"] .kpi-val{color:var(--accent);font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace;letter-spacing:-1px}
body[data-theme="carbon"] .status.ok{color:var(--accent)}

/* ── 3 · NORDIC FROST — light, airy slate-blue, big radius (rearranged grid) ── */
body[data-theme="frost"]{
  --bg:#eef3fa; --panel:#ffffff; --panel2:#f3f7fd; --line:#e2e9f4;
  --txt:#1f2b3a; --muted:#62718a; --accent:#5b8def; --accent2:#3a6fd6;
  --in:#ffffff; --out:#e3edff; --chatbg:#e8eff9; --blue:#3a6fd6; --warn:#e0900a; --err:#e05a5a;
  --radius:18px; --radius-sm:12px; --shadow:0 8px 30px rgba(58,111,214,.12); --shadow-sm:0 3px 12px rgba(58,111,214,.08);
}
body[data-theme="frost"] .card,body[data-theme="frost"] .kpi{border-radius:18px}
body[data-theme="frost"] .view-body{max-width:1280px;margin:0 auto}
body[data-theme="frost"] .nav-item.active{background:var(--accent2);color:#fff}

/* ── 4 · NEON PULSE — synthwave purple, magenta+cyan glow, animated ─────────── */
body[data-theme="neon"]{
  --bg:#120a24; --panel:#1b1136; --panel2:#241647; --line:#3a2570;
  --txt:#f3e9ff; --muted:#b39ad8; --accent:#ff2dd9; --accent2:#00f0ff;
  --in:#211243; --out:#3a1170; --chatbg:#0d0720; --blue:#00f0ff; --warn:#ffc83a; --err:#ff5c8a;
  --grad:linear-gradient(135deg,#ff2dd9,#00f0ff); --shadow:0 8px 34px rgba(255,45,217,.18); --shadow-sm:0 3px 14px rgba(0,240,255,.14);
}
body[data-theme="neon"] #sidebar{background:linear-gradient(165deg,#3a0b6e,#120a24 52%,#08203a);background-size:220% 220%;animation:flkGradientShift 9s ease infinite;border-right-color:#3a2570}
body[data-theme="neon"] .card,body[data-theme="neon"] .kpi{border:1px solid rgba(255,45,217,.32);box-shadow:0 0 0 1px rgba(0,240,255,.08),0 8px 30px rgba(255,45,217,.12)}
body[data-theme="neon"] .nav-item.active{background:rgba(255,45,217,.14);color:#fff;animation:flkGlowPulse 2.4s ease-in-out infinite}
body[data-theme="neon"] .kpi-val{background:linear-gradient(90deg,#ff2dd9,#00f0ff,#ff2dd9);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flkShimmer 4.5s linear infinite}
body[data-theme="neon"] .kpi.clickable:hover{animation:flkFloat 1.6s ease-in-out infinite}

/* ── 5 · SUNSET EMBER — warm coral→amber, light, soft ───────────────────────── */
body[data-theme="sunset"]{
  --bg:#fff4ec; --panel:#fffaf6; --panel2:#ffeede; --line:#f6dcc6;
  --txt:#3a2418; --muted:#8a6b56; --accent:#ff6b4a; --accent2:#f59e0b;
  --in:#fffaf6; --out:#ffe6d0; --chatbg:#fdeadd; --blue:#e0712a; --warn:#e0900a; --err:#d6453c;
  --grad:linear-gradient(135deg,#ff6b4a,#f59e0b); --shadow:0 8px 26px rgba(214,90,40,.14); --shadow-sm:0 3px 12px rgba(214,90,40,.1);
}
body[data-theme="sunset"] .nav-item.active{background:var(--grad);color:#fff;font-weight:600}
body[data-theme="sunset"] .kpi-val{color:var(--accent)}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.45 var(--font-body, -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);background:var(--bg);color:var(--txt);height:100vh;overflow:hidden;
  /* declared on body (not :root) so it recomputes with each theme's --accent instead of
     inheriting :root's baked-in green. Themes that want a custom grad override it. */
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  transition:background .45s ease, color .45s ease}
h1,h2,h3,h4,.brand,.kpi-val,.view-head h2,.modal-card h3{font-family:var(--font-head, inherit)}
/* visible keyboard focus ring on all interactive elements (a11y) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
#app{display:flex;height:100vh}

/* sidebar */
#sidebar{width:230px;flex:0 0 auto;flex-shrink:0;position:relative;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:14px 10px;overflow:hidden auto}
/* main menu: resizable + retractable */
#sidebarResizer{flex:0 0 6px;cursor:col-resize;background:transparent;transition:background .12s ease}
#sidebarResizer:hover,#sidebarResizer:active{background:var(--accent)}
#sidebarReveal{display:none;flex:0 0 24px;width:24px;border:none;border-right:1px solid var(--line);background:var(--panel);color:var(--muted);cursor:pointer;font-size:15px;align-items:flex-start;justify-content:center;padding-top:16px}
#sidebarReveal:hover{color:var(--accent);background:var(--panel2)}
#sidebarCollapse{position:absolute;top:10px;right:7px;z-index:6;width:22px;height:22px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:6px;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
#sidebarCollapse:hover{color:var(--accent);border-color:var(--accent)}
.nav-item .nav-ic{flex:none;width:18px;text-align:center}
.nav-item .nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* collapsed = clickable icon rail (navigate without reopening) */
body.sidebar-collapsed #sidebar{width:62px!important;padding:12px 7px}
body.sidebar-collapsed #sidebarResizer,body.sidebar-collapsed #sidebarReveal{display:none}
body.sidebar-collapsed .brand,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed #status,
body.sidebar-collapsed .badge,
body.sidebar-collapsed .theme-select{display:none}
body.sidebar-collapsed #sidebarCollapse{position:static;margin:0 auto 12px;transform:none}
/* collapsed nav: centered 44x44 icon buttons. transform:none defeats any residual
   GSAP entrance transform that would otherwise shove icons off-centre in the narrow rail. */
body.sidebar-collapsed .nav-item{justify-content:center;align-items:center;gap:0;
  width:44px;height:44px;padding:0;margin:3px auto;border-radius:11px;transform:none}
body.sidebar-collapsed .nav-item .nav-ic{width:auto;font-size:18px;line-height:1}
body.sidebar-collapsed .theme-select-wrap{display:none} /* hide picker in rail — expand to change theme */
/* session chip → icon-only in the rail (name/role/labels hidden, buttons stack) */
body.sidebar-collapsed .session-chip{margin:6px auto;padding:4px 0;border:none;background:none}
body.sidebar-collapsed .session-chip .sess-id{display:none}
body.sidebar-collapsed .session-chip .sess-actions{flex-direction:column;gap:5px;margin-top:0;align-items:center}
body.sidebar-collapsed .session-chip .cl{display:none}
body.sidebar-collapsed .session-chip .btn{width:40px;height:40px;padding:0;margin:0 auto;
  display:flex;align-items:center;justify-content:center;border-radius:11px;transform:none}
.brand{font-weight:700;font-size:17px;padding:10px 8px 16px;display:flex;flex-direction:column;align-items:center;gap:8px}
.brand .brand-logo{width:158px;max-width:100%;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-sm);display:block}
.brand .brand-sub{font-family:var(--font-head,inherit);font-weight:600;font-size:10.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gold,var(--muted))}
.nav-item{background:none;border:none;color:var(--txt);text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;cursor:pointer;margin-bottom:2px;display:flex;align-items:center;gap:8px}
.nav-item:hover{background:var(--panel2)}
.nav-item.active{background:var(--accent2);color:#fff}
.nav-spacer{flex:1}
.badge{background:var(--err);color:#fff;border-radius:10px;font-size:11px;padding:0 6px;margin-left:auto}
.badge:empty{display:none}
.status{font-size:11px;color:var(--muted);padding:8px;border-top:1px solid var(--line)}
.status.ok{color:var(--accent)} .status.bad{color:var(--err)}

/* main */
#main{flex:1;overflow:hidden;display:flex;flex-direction:column}
.view{flex:1;display:flex;flex-direction:column;overflow:hidden}
.view-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.view-head h2{font-size:18px}
.view-body{flex:1;overflow:auto;padding:18px 22px}

/* inbox split */
.inbox{display:flex;flex:1;overflow:hidden}
.threads{width:300px;border-right:1px solid var(--line);overflow:auto}
.thread{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.thread:hover{background:var(--panel)}
.thread.active{background:var(--panel2)}
.thread .name{font-weight:600;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.thread .thread-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread .thread-time{flex:none;font-size:11px;font-weight:400;color:var(--muted)}
.thread .thread-line{display:flex;align-items:center;gap:8px;margin-top:2px}
.thread .preview{flex:1;min-width:0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread-count{flex:none;background:var(--accent2);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;
  border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.thread.active .unread-count{background:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--err);display:inline-block}
.convo{flex:1;display:flex;flex-direction:column;overflow:hidden}
.cinfo{width:270px;border-left:1px solid var(--line);overflow:auto;padding:14px;background:var(--panel)}
.cinfo:empty{display:none}
.cinfo-sec{margin-bottom:16px}
.cinfo-sec input,.cinfo-sec textarea{width:100%}
.attr-row{display:flex;gap:6px;align-items:center;font-size:12px;padding:3px 0}
.attr-row span:nth-child(2){flex:1}
.note{background:var(--panel2);border-radius:6px;padding:7px 9px;margin-top:6px;font-size:12px}
.mini{padding:5px 7px;font-size:12px}
select.mini{width:auto}
.qr-pick{padding:9px;border-radius:7px;cursor:pointer;border:1px solid var(--line);margin-bottom:6px}
.qr-pick:hover{background:var(--panel2)}
.sol-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--line);font-size:13px;gap:10px}
.sol-row span:last-child{text-align:right}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));grid-auto-rows:1fr;gap:10px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;
  display:flex;flex-direction:column;justify-content:center;min-height:86px}
.kpi-val{font-size:26px;font-weight:700;color:var(--accent)}
.kpi-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.chart{display:flex;gap:6px;align-items:flex-end;height:140px;margin-top:12px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.chart-col .bars{flex:1;display:flex;gap:2px;align-items:flex-end;width:100%;justify-content:center}
.chart-col .bar{width:8px;border-radius:2px 2px 0 0;min-height:1px}
.chart-col .bar.in{background:var(--blue)}
.chart-col .bar.out{background:var(--accent)}
.chart-x{font-size:9px;color:var(--muted);margin-top:4px}
.imp-method{border:1px solid var(--line);border-radius:9px;padding:12px;margin-top:10px}
.imp-method input[type=text],.imp-method input:not([type]){width:100%}
.convo-head{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.convo-msgs{flex:1;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px;background:var(--chatbg)}
.msg{max-width:70%;padding:8px 11px;border-radius:8px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.msg.in{background:var(--in);align-self:flex-start}
.msg.out{background:var(--out);align-self:flex-end}
.msg .meta{font-size:10px;color:var(--muted);margin-top:4px;text-align:right}
.msg-media{max-width:240px;border-radius:8px;display:block;cursor:pointer}
.msg-sticker{max-width:120px;display:block}
.msg audio{max-width:240px;height:36px}
.msg .cap{margin-top:5px;font-size:13px}
.msg .doc{color:var(--blue);text-decoration:none;display:inline-block;margin-top:2px}
.media-ph{color:var(--muted);font-style:italic;font-size:12px;padding:4px 0}

/* agent flow diagram */
.flow-diagram{display:flex;flex-direction:column;align-items:center;padding:10px 0}
.flow-start,.flow-end{background:var(--accent2);color:#fff;padding:10px 20px;border-radius:20px;font-weight:600}
.flow-end{background:var(--panel2);color:var(--muted)}
.flow-conn{width:2px;height:26px;background:var(--line);position:relative}
.flow-conn-label{position:absolute;left:8px;top:4px;font-size:10px;color:var(--muted);white-space:nowrap}
.flow-row{display:flex;align-items:center;gap:0;width:100%;max-width:760px;justify-content:center}
.flow-node{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;width:380px;cursor:pointer;transition:.15s}
.flow-node:hover{border-color:var(--accent2)}
.flow-node.off{opacity:.5}
.flow-node-head{display:flex;align-items:center;gap:8px}
.flow-num{background:var(--blue);color:#fff;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.flow-cond{font-size:12px;color:var(--muted);margin-top:7px;padding-left:28px}
.flow-arrow{color:var(--accent);font-size:16px;padding:0 10px}
.flow-action-chain{display:flex;flex-direction:column;align-items:center;gap:0}
.flow-action-box{background:#10241c;border:1px solid var(--accent2);border-radius:10px;padding:10px 14px;width:200px;font-size:13px}
.flow-step-arrow{color:var(--accent);font-size:13px;line-height:1.4}
.steps-box{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.step-row{display:flex;gap:6px;align-items:center}
.step-row select{width:150px}
.step-row input{flex:1}
.composer{border-top:1px solid var(--line);padding:12px;display:flex;gap:8px;align-items:flex-end;background:var(--panel)}
.composer textarea{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:9px;resize:none;font:inherit;min-height:40px;max-height:120px}
.window-note{font-size:11px;color:var(--warn);padding:4px 12px}

/* controls */
button.btn{background:var(--accent2);color:#fff;border:none;padding:9px 14px;border-radius:8px;cursor:pointer;font-size:13px}
button.btn:hover{background:var(--accent)}
button.btn.ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
button.btn.sm{padding:5px 9px;font-size:12px}
button.btn:disabled{opacity:.4;cursor:not-allowed}
input,select,textarea{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;padding:8px;font:inherit}
label{display:block;font-size:12px;color:var(--muted);margin:10px 0 4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.col{flex:1;min-width:200px}
/* dashboard card groups: grid so wrapped cards stay equal-width instead of a lone
   flex:1 card ballooning to full width and breaking row alignment */
.row.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch}
.row.dash-grid>.dash-card{margin-bottom:0}
.pill{font-size:11px;padding:2px 8px;border-radius:20px;display:inline-block}
.pill.APPROVED{background:#0f5132;color:#7ee2a8}
.pill.PENDING{background:#5a4500;color:#ffd86b}
.pill.REJECTED,.pill.failed{background:#5a1a1a;color:#ff9a9a}
.pill.sent{background:#1c3a5e;color:#9ec5ff}
.pill.delivered{background:#14463a;color:#7ee2c0}
.pill.read{background:#0f5132;color:#7ee2a8}
.pill.queued{background:#33373d;color:#aab}
.switch{position:relative;width:38px;height:20px;display:inline-block}
.switch input{display:none}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:20px;transition:.2s}
.switch span:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(18px)}
/* labeled switch: visible text beside the track (used in the convo header) */
.switch.lbl{position:static;width:auto;height:auto;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.switch.lbl>span:first-of-type{position:relative;inset:auto;flex:none;width:38px;height:20px}
.switch.lbl>span.switch-lbl{position:static;font-size:12.5px;color:var(--txt);white-space:nowrap;background:none;border-radius:0}
.switch.lbl>span.switch-lbl:before{content:none}
/* convo-header control clusters: routing | automation, separated by a divider */
.head-group{display:flex;align-items:center;gap:10px}
.head-group+.head-group{margin-left:12px;padding-left:12px;border-left:1px solid var(--line)}
.muted{color:var(--muted)}
.help{font-size:11px;color:var(--muted);margin-top:3px}

/* toast */
#toast{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:99}
.toast{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);padding:10px 14px;border-radius:8px;font-size:13px;max-width:340px;animation:slide .2s}
.toast.err{border-left-color:var(--err)}
@keyframes slide{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
.empty{color:var(--muted);text-align:center;padding:40px}

/* modal */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50}
#modal.show{display:flex}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;max-width:520px;width:90%;max-height:84vh;overflow:auto;padding:20px}
.modal-card h3{margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.modal-card .x{cursor:pointer;color:var(--muted);font-size:20px;background:none;border:none}
.wa-preview{background:#0b141a;border-radius:10px;padding:14px}
.wa-bubble{background:var(--in);border-radius:8px;padding:10px 12px;white-space:pre-wrap;font-size:13px}
.wa-bubble .hdr{font-weight:700;margin-bottom:6px}
.wa-bubble .ftr{color:var(--muted);font-size:11px;margin-top:8px}
.wa-bubble img{max-width:100%;border-radius:6px;margin-bottom:8px}
.wa-btns{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.wa-btns div{text-align:center;color:var(--blue);border-top:1px solid var(--line);padding-top:7px;font-size:13px}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--panel2)}
.thumb{max-height:60px;border-radius:6px;border:1px solid var(--line)}

/* ════════ UI polish: motion, tabs, theme button ════════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.view{animation:fadeUp .22s ease both}
/* a11y: honor OS "reduce motion" — kill animations + transitions */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
.nav-item,.btn,.tab,.theme-btn{transition:background .16s ease,color .16s ease,transform .12s ease,box-shadow .16s ease}
.nav-item:active,.btn:active{transform:translateY(1px)}
.card{transition:transform .14s ease,box-shadow .16s ease}
.view-body.nopad{padding:0;overflow:hidden;display:flex}

.theme-select-wrap{display:flex;gap:8px;align-items:center;border:1px solid var(--line);color:var(--muted);
  padding:6px 10px;border-radius:var(--radius-sm);font-size:13px;margin:6px 0;overflow:hidden}
.theme-select-wrap:hover{background:var(--panel2);color:var(--txt);box-shadow:var(--shadow-sm)}
.theme-select{flex:1;min-width:0;max-width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:5px 6px;font-size:12.5px;cursor:pointer;font-family:inherit}

/* inbox template sender — stacked so nothing overflows the window */
.tmpl-bar{border-top:1px solid var(--line);background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.tmpl-row{display:flex;gap:8px;align-items:center}
.tmpl-sel{flex:1;min-width:0}
.tmpl-params{display:flex;flex-direction:column;gap:6px}
.tmpl-preview{font-size:12px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px;white-space:pre-wrap;line-height:1.4}
.tmpl-field{display:flex;gap:8px;align-items:center}
.tmpl-field label{min-width:46px;font-size:12px;color:var(--accent);font-weight:700}
.tmpl-field input{flex:1;min-width:0}

.meta.failed{color:var(--err)}

.tabs{display:flex;gap:4px;background:var(--panel2);padding:3px;border-radius:var(--radius-sm)}
.tab{background:none;border:none;color:var(--muted);padding:6px 12px;border-radius:6px;font-size:13px;cursor:pointer}
.tab:hover{color:var(--txt)}
.tab.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-sm)}

#toast .toast{animation:toastIn .2s ease both}
#modal.show .modal-card{animation:popIn .2s ease both}

/* ════════ Graph flow builder (React Flow island) ═══════════════════════════ */
.fb-mount{flex:1;height:100%;min-height:0}
.fb-root{display:flex;height:100%;width:100%;background:var(--bg);color:var(--txt)}
.fb-list{width:210px;border-right:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;padding:10px}
.fb-new{background:var(--grad);color:#fff;border:none;padding:9px;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm)}
.fb-new:hover{filter:brightness(1.07)}
.fb-templates-btn{margin-top:6px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:8px;border-radius:var(--radius-sm);font-size:13px;cursor:pointer}
.fb-templates-btn:hover{border-color:var(--accent)}

/* templates gallery */
.fb-gallery-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:20;display:flex;align-items:center;justify-content:center;animation:fadeUp .18s ease both}
.fb-gallery{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);width:min(820px,92%);max-height:86%;overflow:auto;box-shadow:var(--shadow);animation:popIn .18s ease both}
.fb-gallery-head{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--line);font-size:15px}
.fb-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px}
.fb-gallery-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;cursor:pointer;transition:border-color .14s ease,transform .12s ease}
.fb-gallery-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.fb-gallery-name{font-weight:600;margin-bottom:5px}
.fb-gallery-desc{color:var(--muted);font-size:12.5px;line-height:1.5}
.fb-gallery-meta{color:var(--accent);font-size:11px;margin-top:7px}

/* custom form builder rows */
.formb-rows{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.formb-row{display:flex;gap:6px;align-items:center}
.formb-row input,.formb-row select{background:var(--panel);border:1px solid var(--line);color:var(--txt);padding:6px 8px;border-radius:6px;font-size:12.5px}
.formb-label{flex:2;min-width:0}
.formb-type{flex:0 0 104px}
.formb-opts{flex:1.4;min-width:0}
.formb-req{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--muted);white-space:nowrap}
.formb-handle{color:var(--muted);cursor:grab;font-size:11px}

/* template presets picker */
.preset-list{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto}
.preset-card{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;cursor:pointer;transition:border-color .14s ease,transform .12s ease}
.preset-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.preset-name{font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.preset-body{color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:6px}
.preset-btns{color:var(--accent);font-size:11.5px;margin-top:6px}

.fb-node.fb-template .fb-node-head{color:var(--blue)}
.fb-node.fb-handoff .fb-node-head{color:var(--warn)}
.fb-node.fb-quote .fb-node-head{color:var(--accent)}
.fb-node.fb-ai .fb-node-head{color:var(--accent2)}
.fb-list-scroll{flex:0 0 auto;max-height:38%;overflow:auto;margin:10px 0}
.fb-empty-list{color:var(--muted);font-size:12px;padding:8px}
.fb-list-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:13px}
.fb-list-item:hover{background:var(--panel2)}
.fb-list-item.active{background:var(--panel2);box-shadow:inset 2px 0 0 var(--accent)}
.fb-list-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fb-list-del{flex:0 0 auto;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;padding:2px 4px;border-radius:4px;opacity:0;transition:opacity .15s}
.fb-list-item:hover .fb-list-del{opacity:.7}
.fb-list-del:hover{opacity:1;background:var(--danger,#e5484d);color:#fff}
.fb-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.fb-dot.on{background:var(--accent)}
.fb-palette{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;display:flex;flex-direction:column;gap:4px;overflow:auto}
.fb-palette-title{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.fb-pal-btn{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:7px 9px;border-radius:var(--radius-sm);font-size:12.5px;cursor:pointer;text-align:left}
.fb-pal-btn:hover{border-color:var(--accent);transform:translateX(2px)}
.fb-ic{font-size:14px}

.fb-canvas-wrap{flex:1;display:flex;flex-direction:column;min-width:0}
.fb-trigger-bar{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.fb-trigger-bar input,.fb-trigger-bar select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:7px 9px;border-radius:var(--radius-sm);font-size:13px}
.fb-name{font-weight:600;min-width:170px}
.fb-match{min-width:200px;flex:1}
.fb-enable{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--muted)}
.fb-status{font-size:12px;color:var(--accent);min-width:60px}
.fb-save{margin-left:auto;background:var(--grad);color:#fff;border:none;padding:8px 16px;border-radius:var(--radius-sm);font-weight:600;cursor:pointer;box-shadow:var(--shadow-sm)}
.fb-save:hover{filter:brightness(1.07)}
.fb-canvas{flex:1;position:relative}
.fb-blank{display:flex;height:100%;align-items:center;justify-content:center;color:var(--muted)}

.fb-side{width:280px;border-left:1px solid var(--line);background:var(--panel);overflow:auto}
.fb-editor{padding:14px;animation:fadeUp .2s ease both}
.fb-editor.empty{color:var(--muted);font-size:13px;line-height:1.6}
.fb-editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:15px}
.fb-del{background:none;border:1px solid var(--err);color:var(--err);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer}
.fb-del:hover{background:var(--err);color:#fff}
.fb-field{display:flex;flex-direction:column;gap:4px;margin-bottom:11px;font-size:12.5px;color:var(--muted)}
.fb-field input,.fb-field textarea,.fb-field select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:8px 9px;border-radius:var(--radius-sm);font-size:13px;font-family:inherit;resize:vertical}
.fb-field input:focus,.fb-field textarea:focus,.fb-field select:focus{outline:none;border-color:var(--accent)}
.fb-note{color:var(--muted);font-size:11.5px;line-height:1.5;display:block;margin-top:4px}

/* nodes */
.fb-node{background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);min-width:150px;font-size:12.5px;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease,border-color .15s ease}
.fb-node.sel,.react-flow__node.selected .fb-node{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.fb-node-head{display:flex;align-items:center;gap:6px;padding:8px 10px;font-weight:600;border-bottom:1px solid var(--line)}
.fb-node-body{padding:7px 10px;color:var(--muted);word-break:break-word}
.fb-node.fb-start .fb-node-head{background:var(--grad);color:#fff;border-radius:var(--radius) var(--radius) 0 0;border:none}
.fb-node.fb-end .fb-node-head{color:var(--err)}
.fb-node.fb-condition .fb-node-head{color:var(--blue)}
.fb-handles{display:flex;flex-direction:column;gap:3px;padding:4px 10px 9px}
.fb-handle-row{display:flex;align-items:center;justify-content:flex-end;gap:6px;height:14px}
.fb-handle-lbl{font-size:10.5px;color:var(--muted)}
.react-flow__handle{width:9px;height:9px;border:2px solid var(--panel);background:var(--accent)}
.react-flow__edge-path{stroke:var(--accent);stroke-width:2}
.react-flow__controls{box-shadow:var(--shadow)}
.react-flow__controls button{background:var(--panel2);border-bottom:1px solid var(--line);color:var(--txt);fill:var(--txt)}
.react-flow__minimap{background:var(--panel)!important}
.react-flow__attribution{display:none}

/* ════════ Message reactions ════════════════════════════════════════════════ */
.msg{position:relative}
.msg:hover .react-btn{opacity:1}
.react-btn{position:absolute;top:-10px;opacity:0;transition:opacity .14s ease;background:var(--panel);border:1px solid var(--line);
  border-radius:50%;width:24px;height:24px;font-size:12px;cursor:pointer;line-height:1;box-shadow:var(--shadow-sm)}
.msg.in .react-btn{right:-10px}
.msg.out .react-btn{left:-10px}
.react-picker{position:absolute;top:-44px;display:none;gap:2px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:4px 6px;box-shadow:var(--shadow);z-index:5;animation:popIn .14s ease both}
.msg.in .react-picker{right:-6px}
.msg.out .react-picker{left:-6px}
.react-picker.show{display:flex}
.react-emoji{background:none;border:none;font-size:16px;cursor:pointer;padding:2px;border-radius:6px;transition:transform .1s ease}
.react-emoji:hover{transform:scale(1.3)}
.reaction-chip{position:absolute;bottom:-12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:0 5px;font-size:13px;line-height:20px;box-shadow:var(--shadow-sm)}
.msg.in .reaction-chip{left:8px}
.msg.out .reaction-chip{right:8px}

/* ── auth gate — "solar dawn" branded lock screen (frontend-design pass) ──────
   Always Falak navy/gold regardless of active theme: deliberate brand moment,
   consistent across all 9 themes. Colors hardcoded to canonical brand on purpose. */
.auth-gate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#041634;
  background-image:
    radial-gradient(70% 50% at 50% 122%, rgba(251,176,36,.55), transparent 62%),
    radial-gradient(120% 85% at 50% 130%, rgba(224,123,0,.30), transparent 60%),
    radial-gradient(80% 60% at 10% -12%, rgba(45,106,79,.24), transparent 55%),
    linear-gradient(165deg, #073A8C 0%, #052a66 46%, #041634 100%)}
/* drifting aurora layer */
.auth-gate::before{content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 22% 28%, rgba(251,176,36,.20), transparent 70%),
    radial-gradient(34% 30% at 80% 72%, rgba(64,128,255,.22), transparent 70%);
  filter:blur(14px);animation:authAurora 18s ease-in-out infinite alternate}
@keyframes authAurora{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
/* fine grain overlay for depth (inline SVG turbulence) */
.auth-gate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

.auth-card{position:relative;z-index:2;width:372px;max-width:92vw;display:flex;flex-direction:column;
  padding:30px 28px 26px;border-radius:22px;
  background:linear-gradient(180deg, rgba(18,38,78,.72), rgba(9,24,56,.82));
  -webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(251,176,36,.22);
  box-shadow:0 28px 70px -18px rgba(2,10,30,.72), inset 0 1px 0 rgba(255,255,255,.10);
  animation:authCardIn .6s cubic-bezier(.16,1,.3,1) both}
/* gold edge-light hairline across the top */
.auth-card::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(251,176,36,.9),transparent)}
@keyframes authCardIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-transparency:reduce){
  .auth-card{background:#0a1a3d;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* staggered entrance — each row reveals in sequence */
.auth-card>*{animation:authRow .5s cubic-bezier(.16,1,.3,1) both}
.auth-card>*:nth-child(1){animation-delay:.10s}
.auth-card>*:nth-child(2){animation-delay:.16s}
.auth-card>*:nth-child(3){animation-delay:.22s}
.auth-card>*:nth-child(4){animation-delay:.28s}
.auth-card>*:nth-child(5){animation-delay:.34s}
.auth-card>*:nth-child(6){animation-delay:.40s}
.auth-card>*:nth-child(7){animation-delay:.46s}
@keyframes authRow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.auth-logo{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:18px}
.auth-logo-img{width:172px;max-width:80%;background:#fff;border-radius:14px;padding:11px 14px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.5)}
.auth-eyebrow{font-family:var(--font-head,inherit);font-weight:700;font-size:10.5px;letter-spacing:4px;
  text-transform:uppercase;color:#FBB024}
.auth-title{font-family:var(--font-head,inherit);font-size:21px;font-weight:700;color:#fff;text-align:center;letter-spacing:-.2px}
.auth-help{font-size:12.5px;color:#aebfdc;text-align:center;margin:6px 0 18px;line-height:1.5}
.auth-card input{margin-top:10px;width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#eef3fb;border-radius:11px;padding:12px 13px;font-size:14px;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.auth-card input::placeholder{color:#7f90b3}
.auth-card input:focus{outline:none;background:rgba(255,255,255,.09);border-color:#FBB024;
  box-shadow:0 0 0 3px rgba(251,176,36,.22)}
.auth-card .pw-wrap input{margin-top:0}
.auth-card .pw-wrap{margin-top:10px}
.auth-card .pw-eye{color:#aebfdc}
.auth-msg{color:#ff9c8f;font-size:12.5px;min-height:17px;margin-top:9px;text-align:center}
.btn.auth-submit{width:100%;margin-top:18px;padding:13px;font-size:14px;font-weight:700;color:#08203f;border:none;border-radius:12px;
  background:linear-gradient(135deg,#FBB024,#E07B00);box-shadow:0 12px 26px -10px rgba(251,176,36,.7);
  position:relative;overflow:hidden;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,filter .16s ease}
.btn.auth-submit:hover{filter:brightness(1.05);box-shadow:0 16px 32px -10px rgba(251,176,36,.85)}
.btn.auth-submit:active{transform:translateY(1px) scale(.992)}
/* sheen sweep on hover */
.btn.auth-submit::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg)}
.btn.auth-submit:hover::after{animation:authSheen .7s ease}
@keyframes authSheen{from{left:-60%}to{left:130%}}
.session-chip{margin:6px 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);font-size:13px}
.role-pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;padding:1px 7px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);vertical-align:middle}
.role-pill.admin{background:var(--grad);color:#fff;border-color:transparent}
.agent-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.agent-row:last-child{border-bottom:none}
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{flex:1;width:100%}
.pw-eye{position:absolute;right:6px;background:none;border:none;cursor:pointer;font-size:15px;line-height:1;padding:4px}

/* ── quotation-builder: customer type-ahead + add-brand ─────────────────────── */
.ac-wrap{position:relative;margin:8px 0 4px}
.ac-wrap>input{width:100%}
.ac-box{position:absolute;left:0;right:0;top:100%;z-index:40;margin-top:4px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);max-height:264px;overflow:auto;display:none}
.ac-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:13px}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--panel2)}
.col label .btn.sm{margin-left:8px;padding:2px 8px;font-size:11px;vertical-align:middle}

/* ══ DASHBOARD: animated + clickable analytics ═══════════════════════════════ */
.kpi.clickable,.chart-col.clickable,.sol-row.clickable,.funnel-row.clickable,.heat-col.clickable{cursor:pointer}
.kpi.clickable{transition:transform .14s ease,box-shadow .16s ease,border-color .16s ease}
.kpi.clickable:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.sol-row.clickable:hover{background:var(--panel2)}
.bar{transform-origin:bottom}
.chart-col.clickable:hover .bar{filter:brightness(1.25)}

/* lifecycle funnel */
.funnel{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.funnel-row{display:flex;align-items:center;gap:10px;padding:3px 4px;border-radius:8px;transition:background .14s ease}
.funnel-row:hover{background:var(--panel2)}
.funnel-lbl{flex:0 0 120px;font-size:12.5px;color:var(--muted)}
.funnel-track{flex:1;height:18px;background:var(--panel2);border-radius:6px;overflow:hidden}
.funnel-bar{height:100%;background:var(--grad,linear-gradient(135deg,var(--accent),var(--accent2)));border-radius:6px}
.funnel-n{flex:0 0 56px;text-align:right;font-weight:700;font-size:13px}
.funnel-conv{flex:0 0 44px;text-align:right;font-size:11px;font-weight:700}
.funnel-conv.ok{color:var(--accent)}
.funnel-conv.warn{color:var(--warn)}

/* source attribution bars */
.src-row{display:flex;align-items:center;gap:10px;padding:4px 0}
.src-lbl{flex:0 0 150px;font-size:12.5px;color:var(--muted)}
.src-track{flex:1;height:14px;background:var(--panel2);border-radius:5px;overflow:hidden}
.src-bar{height:100%;background:var(--blue);border-radius:5px}
.src-n{flex:0 0 44px;text-align:right;font-weight:700;font-size:13px}

/* inbound-by-hour heatmap */
.heat{display:flex;gap:3px;align-items:flex-end;margin-top:12px}
.heat-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.heat-cell{width:100%;height:34px;border-radius:4px;background:var(--accent)}
.heat-col:hover .heat-cell{outline:2px solid var(--txt)}
.heat-x{font-size:9px;color:var(--muted);height:11px}

/* drill-down modal list */
.drill-list{max-height:60vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
.drill-row{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:13px;transition:background .12s ease}
.drill-row:last-child{border-bottom:none}
.drill-row:hover{background:var(--panel2)}
.drill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.drill-sub{flex-shrink:0;font-size:12px}

/* template list thumbnails */
.tmpl-thumb{width:46px;height:46px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:18px}
.tmpl-thumb-img{width:100%;height:100%;object-fit:cover}

/* ════════ AGENT-BUILDER SKINS (local, per-machine — 🎨 picker in trigger bar) ══
   Each redefines the theme vars ONLY within .fb-root, so it re-skins the builder
   canvas without touching the rest of the app or the global theme. "Classic" =
   no override (inherits the active app theme). Switch back any time to revert.
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes flkFlowDash{to{stroke-dashoffset:-24}}
.fb-skin{min-width:118px}

/* ── Hyperframe — dark spatial glass, violet→cyan, accent rails, glow wires ──── */
.fb-root[data-fb-skin="hyperframe"]{
  --bg:#0a0f20; --panel:#0e1426; --panel2:rgba(22,28,56,.62); --line:rgba(255,255,255,.10);
  --txt:#e8ecff; --muted:#9aa6d6; --accent:#6c8cff; --accent2:#22d3ee;
  --radius:14px; --radius-sm:9px; --grad:linear-gradient(135deg,#6c8cff,#22d3ee);
  --shadow-sm:0 10px 30px rgba(0,0,0,.42);
}
.fb-root[data-fb-skin="hyperframe"] .fb-node{backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);border-left:3px solid var(--accent)}
.fb-root[data-fb-skin="hyperframe"] .fb-node.fb-condition{border-left-color:var(--blue)}
.fb-root[data-fb-skin="hyperframe"] .fb-node.fb-ai{border-left-color:var(--accent2)}
.fb-root[data-fb-skin="hyperframe"] .react-flow__edge-path{stroke:var(--accent);stroke-width:2;filter:drop-shadow(0 0 4px rgba(108,140,255,.5))}

/* ── Stitch — bright Material 3, elevated white cards, vivid chips ───────────── */
.fb-root[data-fb-skin="stitch"]{
  --bg:#f5f7fa; --panel:#ffffff; --panel2:#ffffff; --line:#e3e8ef;
  --txt:#1f2937; --muted:#64748b; --accent:#3b82f6; --accent2:#3b82f6;
  --radius:16px; --radius-sm:11px; --grad:linear-gradient(135deg,#3b82f6,#6366f1);
  --shadow-sm:0 6px 20px rgba(40,60,90,.12);
}
.fb-root[data-fb-skin="stitch"] .fb-node{box-shadow:0 6px 18px rgba(40,60,90,.13)}
.fb-root[data-fb-skin="stitch"] .fb-node-head{border-bottom-color:#eef2f7}
.fb-root[data-fb-skin="stitch"] .react-flow__edge-path{stroke:#94a3b8;stroke-width:3;stroke-linecap:round}

/* ── Linear — near-black minimal, hairline, single indigo accent, mono body ──── */
.fb-root[data-fb-skin="linear"]{
  --bg:#08080a; --panel:#0d0d10; --panel2:#131316; --line:#26262b;
  --txt:#e4e4e7; --muted:#71717a; --accent:#6366f1; --accent2:#6366f1;
  --radius:8px; --radius-sm:6px; --grad:linear-gradient(135deg,#6366f1,#818cf8);
  --shadow-sm:0 4px 14px rgba(0,0,0,.5);
}
.fb-root[data-fb-skin="linear"] .fb-node-body{font-family:ui-monospace,'JetBrains Mono','SF Mono',monospace;font-size:11.5px}
.fb-root[data-fb-skin="linear"] .react-flow__edge-path{stroke:#52525b;stroke-width:1.5}

/* ── Neon — synthwave purple, glowing nodes, animated dashed wires ──────────── */
.fb-root[data-fb-skin="neon"]{
  --bg:#0d0720; --panel:#1a1036; --panel2:#1b1136; --line:rgba(255,45,217,.30);
  --txt:#f3e9ff; --muted:#b39ad8; --accent:#ff2dd9; --accent2:#00f0ff;
  --radius:12px; --radius-sm:8px; --grad:linear-gradient(135deg,#ff2dd9,#00f0ff);
  --shadow-sm:0 0 0 1px rgba(0,240,255,.08),0 8px 26px rgba(255,45,217,.20);
}
.fb-root[data-fb-skin="neon"] .fb-node{border-color:rgba(255,45,217,.32);box-shadow:0 0 0 1px rgba(0,240,255,.08),0 8px 26px rgba(255,45,217,.16)}
.fb-root[data-fb-skin="neon"] .react-flow__edge-path{stroke:#ff2dd9;stroke-width:2;stroke-dasharray:6 6;animation:flkFlowDash 1s linear infinite;filter:drop-shadow(0 0 5px rgba(255,45,217,.6))}

/* ════════ AI FLOW BUILDER — describe it, watch it assemble ═══════════════════ */
.fb-ai-toggle{background:var(--panel2);border:1px solid var(--line);color:var(--txt);padding:7px 12px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:600;cursor:pointer}
.fb-ai-toggle:hover,.fb-ai-toggle.on{border-color:var(--accent);color:var(--accent)}

/* node entrance — each node pops as the AI drops it on the canvas */
@keyframes fbPop{from{opacity:0;transform:scale(.84) translateY(10px)}to{opacity:1;transform:none}}
.fb-node{animation:fbPop .34s cubic-bezier(.2,.85,.25,1) both}

/* blank-state hero */
.fb-blank{flex-direction:column;gap:11px;text-align:center;padding:34px}
.fb-blank-art{font-size:46px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.fb-blank-h{font-size:18px;font-weight:700;color:var(--txt)}
.fb-blank-sub{color:var(--muted);font-size:13px;max-width:460px;line-height:1.55}
.fb-ai-cta{background:var(--grad);color:#fff;border:none;padding:11px 22px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;margin-top:6px;box-shadow:var(--shadow-sm)}
.fb-ai-cta:hover{filter:brightness(1.07)}
.fb-blank-link{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;text-decoration:underline}

/* docked prompt panel */
.fb-ai-panel{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(660px,calc(100% - 40px));
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:13px 14px;z-index:8;animation:fadeUp .2s ease both}
.fb-ai-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.fb-ai-head b{font-size:14px;color:var(--txt)}
.fb-ai-sub{color:var(--muted);font-size:11.5px}
.fb-ai-x{margin-left:auto;background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px}
.fb-ai-x:hover{color:var(--txt)}
.fb-ai-input{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:9px;padding:10px;font-size:13px;font-family:inherit;line-height:1.45;resize:vertical}
.fb-ai-input:focus{outline:none;border-color:var(--accent)}
.fb-ai-err{color:var(--err);font-size:12px;margin-top:7px}
.fb-ai-actions{display:flex;align-items:center;gap:10px;margin-top:10px}
.fb-ai-hint{color:var(--muted);font-size:11px}
.fb-ai-build{margin-left:auto;background:var(--grad);color:#fff;border:none;padding:9px 20px;border-radius:9px;font-weight:700;font-size:13px;cursor:pointer}
.fb-ai-build:hover:not(:disabled){filter:brightness(1.07)}
.fb-ai-build:disabled{opacity:.5;cursor:default}

/* ════════ resizable + retractable panels ════════════════════════════════════ */
.fb-list,.fb-side{position:relative}
.fb-resizer{flex:0 0 6px;cursor:col-resize;background:transparent;position:relative;z-index:6;transition:background .12s ease}
.fb-resizer:hover,.fb-resizer:active{background:var(--accent)}
.fb-reveal{flex:0 0 22px;width:22px;border:none;background:var(--panel);color:var(--muted);cursor:pointer;font-size:14px;border-right:1px solid var(--line);display:flex;align-items:flex-start;justify-content:center;padding-top:14px}
.fb-reveal.right{border-right:none;border-left:1px solid var(--line)}
.fb-reveal:hover{color:var(--accent);background:var(--panel2)}
.fb-collapse{position:absolute;top:7px;right:7px;z-index:7;width:22px;height:22px;border:1px solid var(--line);background:var(--panel2);color:var(--muted);border-radius:6px;cursor:pointer;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
.fb-collapse:hover{color:var(--accent);border-color:var(--accent)}
.fb-list .fb-new{padding-right:30px}