/* ==========================================================================
   AnjokWA Bot design tokens
   Palette: cool blueprint blues. Ink is navy, never black.
   ========================================================================== */
:root{
  --ink:        #0B2942;
  --ink-2:      #3C5C78;
  --ink-3:      #7A94AB;
  --surface:    #EDF4FB;
  --surface-2:  #F7FAFD;
  --card:       #FFFFFF;
  --line:       #D7E6F3;
  --line-soft:  #E9F1F9;
  --primary:    #1E7BE0;
  --primary-d:  #0F4C93;
  --primary-l:  #E6F1FD;
  --accent:     #17B6C4;
  --accent-l:   #E2F6F8;
  --ok:         #12886A;
  --ok-l:       #E1F4EE;
  --warn:       #B4690E;
  --warn-l:     #FBF0DF;
  --bad:        #B03A48;
  --bad-l:      #FBE9EB;
  --radius:     14px;
  --shadow-1:   0 1px 2px rgba(11,41,66,.05), 0 1px 3px rgba(11,41,66,.06);
  --shadow-2:   0 4px 10px -2px rgba(11,41,66,.09), 0 12px 28px -12px rgba(11,41,66,.18);
  --shadow-3:   0 18px 50px -18px rgba(15,76,147,.38);
}

*{box-sizing:border-box}
/* Component classes set display, so [hidden] needs to win outright.
   Do not rely on Tailwind's preflight for this — the CDN may not load. */
[hidden]{display:none !important}
pre,p,figure{margin:0}
ul,ol{margin:0;padding:0}
html,body{height:100%}
body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body h1,body h2,body h3,body h4,.display{font-family:"Bricolage Grotesque","Public Sans",sans-serif;letter-spacing:-.02em;font-weight:700}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-ligatures:none}

a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ------------------------------------------------------------ structure */
.shell{display:flex;min-height:100vh}
.rail{
  width:246px;flex:0 0 246px;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40;
}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  padding:12px 22px;background:rgba(247,250,253,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.page{padding:22px;flex:1}
@media (max-width:1023px){
  .rail{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.8,.3,1);box-shadow:var(--shadow-3)}
  .rail.open{transform:none}
  .page{padding:16px}
  .scrim{position:fixed;inset:0;background:rgba(11,41,66,.42);z-index:35;backdrop-filter:blur(2px)}
}

/* ---------------------------------------------------------------- brand */
.brandmark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 34px;
  background:linear-gradient(150deg,var(--primary) 0%,var(--primary-d) 100%);
  box-shadow:0 6px 14px -6px rgba(30,123,224,.75);color:#fff;
}

/* -------------------------------------------------------------- nav rail */
.nav-group{padding:4px 12px 10px}
.nav-label{
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;padding:12px 10px 6px;
}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;
  color:var(--ink-2);font-weight:500;position:relative;transition:background .14s,color .14s;
}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item.active{background:var(--primary-l);color:var(--primary-d);font-weight:650}
.nav-item.active::before{
  content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--primary);
}
.nav-item .count{margin-left:auto;font-size:11px;background:var(--surface);border:1px solid var(--line);
  padding:1px 7px;border-radius:999px;color:var(--ink-2);font-weight:600}

/* ---------------------------------------------------------------- cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.card-pad{padding:18px}
.card-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.card-head > h3{white-space:nowrap}
.stat-num{font-family:"Bricolage Grotesque",sans-serif;font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.1}

/* ---------------------------------------------------------------- chips */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;border:1px solid transparent;white-space:nowrap}
.chip-blue{background:var(--primary-l);color:var(--primary-d);border-color:#CBE0F8}
.chip-ok{background:var(--ok-l);color:var(--ok);border-color:#C6E8DC}
.chip-warn{background:var(--warn-l);color:var(--warn);border-color:#F0DCBB}
.chip-bad{background:var(--bad-l);color:var(--bad);border-color:#F2CCD1}
.chip-mute{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.chip-accent{background:var(--accent-l);color:#0C7B85;border-color:#C2EAEE}

/* -------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:10px;
  font-weight:650;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:transform .1s,box-shadow .16s,background .16s,border-color .16s;box-shadow:var(--shadow-1)}
.btn:hover{background:var(--surface-2);border-color:#C4DAEE}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(160deg,var(--primary),var(--primary-d));color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -8px rgba(15,76,147,.85)}
.btn-primary:hover{background:linear-gradient(160deg,#2A87EC,#134F98);border-color:transparent}
.btn-ghost{background:transparent;box-shadow:none;border-color:transparent}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn-danger{color:var(--bad);border-color:#F2CCD1;background:var(--bad-l)}

/* --------------------------------------------------------------- inputs */
.field{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);
  transition:border-color .14s,box-shadow .14s}
.field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,123,224,.14)}
.field::placeholder{color:var(--ink-3)}
label.lbl{display:block;font-size:12px;font-weight:650;color:var(--ink-2);margin-bottom:5px}
.switch{position:relative;width:40px;height:23px;border-radius:999px;background:#CBD9E7;cursor:pointer;
  transition:background .18s;border:none;flex:0 0 40px}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(11,41,66,.3);transition:transform .18s}
.switch[aria-checked="true"]{background:var(--primary)}
.switch[aria-checked="true"]::after{transform:translateX(17px)}

/* --------------------------------------------------------------- tables */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--surface-2)}

/* ====================================================================== */
/*  SIGNATURE: the blueprint flow canvas                                   */
/* ====================================================================== */
.canvas-wrap{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);
  background:#F4F9FE;height:calc(100vh - 178px);min-height:460px}
.canvas-wrap::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(30,123,224,.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,123,224,.10) 1px,transparent 1px),
    linear-gradient(rgba(30,123,224,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(30,123,224,.045) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:var(--gx,0) var(--gy,0);
}
#canvas{position:absolute;inset:0;transform-origin:0 0}
#wires{position:absolute;left:0;top:0;width:6000px;height:4000px;overflow:visible;pointer-events:none}
.wire{fill:none;stroke:#9FC4E8;stroke-width:2.25}
.wire.hot{stroke:var(--primary)}
.wire-flow{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linecap:round;
  stroke-dasharray:7 190;animation:pulse 2.6s linear infinite;opacity:.95}
@keyframes pulse{to{stroke-dashoffset:-197}}
@media (prefers-reduced-motion:reduce){.wire-flow{animation:none;opacity:0}}

.node{
  position:absolute;width:236px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-2);cursor:grab;user-select:none;transition:box-shadow .16s,border-color .16s;
}
.node:hover{border-color:#B9D4EE}
.node.sel{border-color:var(--primary);box-shadow:0 0 0 3px rgba(30,123,224,.16),var(--shadow-2)}
.node.dragging{cursor:grabbing;box-shadow:var(--shadow-3);z-index:20}
.node-top{display:flex;align-items:center;gap:9px;padding:9px 11px;border-bottom:1px solid var(--line-soft);
  border-radius:12px 12px 0 0}
.node-ico{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;flex:0 0 24px}
.node-kind{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.8}
.node-title{font-weight:650;font-size:13.5px;line-height:1.25}
.node-body{padding:9px 11px;font-size:12.5px;color:var(--ink-2);min-height:34px}
.port{position:absolute;width:13px;height:13px;border-radius:50%;background:#fff;border:2.5px solid #9FC4E8;
  left:50%;margin-left:-6.5px;cursor:crosshair;transition:transform .12s,border-color .12s;z-index:5}
/* A 13px dot is roughly 7px on screen once the canvas is zoomed out, which is
   not a target anyone can hit with a thumb. This grows the grabbable area to
   ~34px without changing how it looks. */
.port::after{content:"";position:absolute;inset:-11px;border-radius:50%}
@media (pointer:coarse){
  .port{width:17px;height:17px;margin-left:-8.5px}
  .port::after{inset:-15px}
  .port.in{top:-9px}
  .port.out{bottom:-9px}
  .port.out.side{right:-9px;margin-top:-8.5px}
}
.port:hover,.port.armed{border-color:var(--primary);transform:scale(1.32)}
.port.in{top:-7px}
.port.out{bottom:-7px}

.palette-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;border:1px solid var(--line-soft);
  background:var(--card);cursor:grab;transition:border-color .14s,transform .1s,box-shadow .14s}
.palette-item:hover{border-color:#BBD6EF;box-shadow:var(--shadow-1);transform:translateX(2px)}
.palette-item:active{cursor:grabbing}
.drop-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .16s}
.canvas-wrap.dropping .drop-hint{opacity:1}
.canvas-wrap.dropping{box-shadow:inset 0 0 0 2px var(--primary)}

/* ---------------------------------------------------------- phone frame */
.phone{color:var(--ink);width:298px;border-radius:34px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-3);
  overflow:hidden;flex:0 0 298px}
.phone-bar{background:linear-gradient(160deg,var(--primary-d),#12599F);color:#fff;padding:12px 14px;
  display:flex;align-items:center;gap:9px}
.phone-body{background:#EAF2FA;padding:14px 12px;height:520px;overflow-y:auto;
  background-image:radial-gradient(rgba(30,123,224,.07) 1px,transparent 1px);background-size:16px 16px}
.bub{max-width:86%;padding:8px 11px;border-radius:14px;font-size:13px;box-shadow:var(--shadow-1);margin-bottom:9px;
  white-space:pre-wrap;word-break:break-word}
.bub-bot{background:#fff;border-top-left-radius:4px}
.bub-me{background:#D7EDFB;border-top-right-radius:4px;margin-left:auto}
.bub-btn{white-space:normal;display:block;width:100%;margin-top:5px;padding:7px;border-radius:9px;border:1px solid #CBE0F8;
  background:#fff;color:var(--primary-d);font-weight:650;font-size:12.5px;cursor:pointer}
.bub-btn:hover{background:var(--primary-l)}

/* ------------------------------------------------------------- carousel */
.rail-x{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;
  scrollbar-width:thin;scrollbar-color:#BBD6EF transparent}
.rail-x::-webkit-scrollbar{height:7px}
.rail-x::-webkit-scrollbar-thumb{background:#BBD6EF;border-radius:9px}
.rail-x > *{scroll-snap-align:start;flex:0 0 auto}
.pcard{width:206px;border:1px solid var(--line);border-radius:13px;background:var(--card);overflow:hidden;
  transition:border-color .14s,box-shadow .16s,transform .14s}
.pcard:hover{border-color:#B9D4EE;box-shadow:var(--shadow-2);transform:translateY(-2px)}
.pcard-img{height:112px;background:linear-gradient(150deg,#DCEBFA,#EAF4FC);display:grid;place-items:center;font-size:34px}

/* ------------------------------------------------- multi-select options */
.optchip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .14s}
.optchip:hover{border-color:#B9D4EE;background:var(--surface-2)}
.optchip[aria-pressed="true"]{background:var(--primary-l);border-color:var(--primary);color:var(--primary-d)}
.optchip .tick{width:15px;height:15px;border-radius:5px;border:1.5px solid #BBD1E4;display:grid;place-items:center;
  font-size:9px;color:transparent;transition:all .14s}
.optchip[aria-pressed="true"] .tick{background:var(--primary);border-color:var(--primary);color:#fff}
.optchip.radio .tick{border-radius:50%}

/* ---------------------------------------------------------------- misc  */
.scroll-y{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#C6DCF0 transparent}
.scroll-y::-webkit-scrollbar{width:7px}
.scroll-y::-webkit-scrollbar-thumb{background:#C6DCF0;border-radius:9px}
.divider{height:1px;background:var(--line-soft)}
.kbd{font-family:"JetBrains Mono",monospace;font-size:10.5px;padding:1px 5px;border-radius:5px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(120%);z-index:90;
  opacity:0;visibility:hidden;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:11px;font-weight:600;font-size:13px;
  box-shadow:var(--shadow-3);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.toast{transition:transform .3s cubic-bezier(.2,.9,.3,1),opacity .2s,visibility .3s}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
.modal-bg{position:fixed;inset:0;background:rgba(11,41,66,.44);backdrop-filter:blur(3px);z-index:60;
  display:grid;place-items:center;padding:18px}
.modal{background:var(--card);border-radius:16px;box-shadow:var(--shadow-3);width:100%;max-width:520px;
  max-height:88vh;overflow-y:auto}
.grid-auto{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.auth-wrap{max-width:420px;margin:0 auto;padding:48px 22px 72px}
.empty{text-align:center;padding:46px 18px;color:var(--ink-2)}

/* ---------------------------------------------- builder on small screens */
/* Stacking 18 palette blocks above the canvas buries the thing you came to
   edit, so on narrow screens the canvas comes first and the palette turns
   into a horizontal strip underneath it. */
@media (max-width:1179px){
  #builderCols{grid-template-columns:minmax(0,1fr) !important}
  #canvasWrap{order:1;height:58vh;min-height:340px}
  #palette{order:2}
  #palette .scroll-y{max-height:none;display:flex;align-items:center;gap:8px;
    overflow-x:auto;overflow-y:hidden;padding:10px}
  #palette .nav-label{display:none}
  #palette .scroll-y > div{display:flex;gap:8px}
  #palette .scroll-y > div > * + *{margin-top:0}
  #palette .palette-item{white-space:nowrap}
  #palette .scroll-y > p{display:none}
  #inspector{order:3;max-height:none}
  /* Those shortcut hints describe a keyboard and a mouse wheel. */
  #canvasWrap .kbd{display:none}
}

/* ------------------------------------------------------------ media field */
.media-field{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface-2)}
.media-preview{height:104px;border-radius:9px;background:var(--card);border:1px dashed var(--line);
  display:grid;place-items:center;overflow:hidden;margin-bottom:9px}
.media-preview img{width:100%;height:100%;object-fit:cover}
.media-empty{font-size:12.5px;color:var(--ink-3)}
.media-file{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:7px;padding:0 10px;text-align:center}
.media-actions{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.media-pick{cursor:pointer;position:relative}
.media-pick.busy{opacity:.6;pointer-events:none}
.media-hint{font-size:11.5px;color:var(--ink-3)}
.media-bar{height:3px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:9px}
.media-bar i{display:block;height:100%;width:40%;background:var(--primary);border-radius:3px;
  animation:mediaslide 1.1s ease-in-out infinite}
@keyframes mediaslide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ---------------------------------------------------- branching outlets */
.outlets{padding:6px 0 8px}
.outlet{position:relative;display:flex;align-items:center;padding:6px 22px 6px 11px;font-size:12.5px;
  color:var(--ink-2);border-top:1px solid var(--line-soft)}
.outlet:first-child{border-top:none}
.outlet-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outlet-label em{color:var(--ink-3)}
.port.out.side{left:auto;right:-7px;top:50%;bottom:auto;margin-left:0;margin-top:-6.5px}
.node-thumb{height:72px;border-radius:8px;overflow:hidden;margin-bottom:7px;background:var(--surface)}
.node-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.node-file{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);margin-bottom:5px}

/* --------------------------------------------------- branch summary list */
.branch-list{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.branch-row{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12.5px;
  border-top:1px solid var(--line-soft);background:var(--card)}
.branch-row:first-child{border-top:none}
.branch-dot{width:7px;height:7px;border-radius:50%;background:#C3D3E1;flex:none}
.branch-dot.on{background:var(--ok)}
.branch-name{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44%}
.branch-name em{font-weight:400;color:var(--ink-3)}
.branch-dest{margin-left:auto;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}