/* ============================================================================
     Enterprise Dense design system — compact, data-first, muted-professional.
     Top tab-bar navigation. One accent (indigo). Crisp SVG icons. The page
     renderers (app.js) emit .card / table / .stat / .pill / button / input, so
     restyling those here propagates the new look to every page.
     ============================================================================ */
  :root{
    /* surfaces — warm cream (Cartesia-style); crisp white cards float on it */
    --bg:#f4f3ed; --canvas:#ebeae1; --card:#ffffff; --raise:#faf9f4;
    /* lines */
    --line:#e7e5db; --line-strong:#d6d4c8;
    /* ink — stronger top-end contrast, calmer mids */
    --ink:#111827; --ink-2:#374151; --muted:#6b7280; --faint:#9aa1ad;
    /* accent — brand green (matches the RCX Agent login button / app icon) + semantics */
    --brand:#1a784c; --brand-d:#145d3b; --brand-soft:#e8f5ee; --brand-ring:rgba(26,120,76,.18);
    --ok:#0f7a43; --ok-soft:#e6f4ec; --warn:#9a5700; --warn-soft:#fbefdc;
    --bad:#c0392b; --bad-soft:#fbeae8; --violet:#7c3aed; --teal:#0e7490;
    /* shell */
    --topbar:#ffffff; --topbar-ink:#374151; --brandbar:#0e1430;
    --radius:10px; --radius-lg:16px;
    --shadow:0 1px 2px rgba(40,40,30,.05); --shadow-md:0 6px 18px rgba(40,40,30,.09);
    --shadow-pop:0 18px 48px rgba(30,30,20,.20);
    /* density — airier, rounded (Cartesia-style clean), not cramped */
    --fs:13.5px; --row-y:11px; --pad:17px; --gap:13px;
    --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    --serif:"Fraunces",Georgia,Cambria,"Times New Roman",serif;  /* headings — Cartesia-style serif */
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{font-size:var(--fs)}
  body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:1rem;line-height:1.45;
    -webkit-font-smoothing:antialiased;letter-spacing:-.005em}

  /* ---- buttons ---- */
  button{cursor:pointer;border:1px solid transparent;border-radius:var(--radius);padding:7px 13px;
    font-size:.86rem;font-weight:600;font-family:inherit;line-height:1.2;transition:background .12s,border-color .12s,box-shadow .12s,opacity .12s;display:inline-flex;align-items:center;gap:6px}
  button:active{transform:translateY(.5px)}
  .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
  .btn-primary:hover{background:var(--brand-d);border-color:var(--brand-d)}
  .btn-danger{background:var(--bad);color:#fff;border-color:var(--bad)}.btn-danger:hover{background:#a93226}
  .btn-ghost{background:#fff;color:var(--ink-2);border-color:var(--line-strong)}
  .btn-ghost:hover{background:var(--raise);border-color:#c2c8d0}
  .btn-sm,.sm{padding:4px 9px;font-size:.78rem}
  .btn-icon{background:transparent;color:var(--muted);padding:5px 7px;border-radius:8px;border:none}
  .btn-icon:hover{background:var(--canvas);color:var(--ink)}

  /* ---- form controls ---- */
  input,select,textarea{padding:7px 10px;border:1px solid var(--line-strong);border-radius:var(--radius);
    font-size:.86rem;width:100%;background:#fff;font-family:inherit;color:var(--ink)}
  input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  input:disabled{background:var(--canvas);color:var(--muted)}
  textarea{line-height:1.5;resize:vertical}
  label{display:block;font-size:.68rem;font-weight:700;color:var(--muted);margin:11px 0 4px;
    text-transform:uppercase;letter-spacing:.04em}
  label:first-child{margin-top:0}
  label.ck{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:.86rem;
    font-weight:500;color:var(--ink-2)}
  label.ck input{width:auto}

  /* ---- tables (dense, sticky header, zebra-on-hover) ---- */
  table,.tbl{width:100%;border-collapse:collapse}
  th,td{text-align:left;padding:var(--row-y) var(--pad);border-bottom:1px solid var(--line);
    font-size:.85rem;vertical-align:middle;overflow-wrap:anywhere}
  tbody tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--raise)}
  th{color:var(--faint);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:650;
    background:#fff;position:sticky;top:0;border-bottom:1px solid var(--line);
    /* header labels are short by convention — never let them letter-stack under squeeze (the
       card scrolls instead; overflow-wrap:anywhere stays for td content like long questions) */
    white-space:nowrap;overflow-wrap:normal}
  td.ar,th.ar{text-align:right}

  /* ---- cards ---- */
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
    padding:var(--pad);margin-bottom:13px;box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
  .card.pad0{padding:0;overflow:hidden}
  .card.pad{padding:var(--pad)}
  .card.pad0:hover,.card:hover{border-color:var(--line-strong)}
  .card h2{font-size:.98rem;font-weight:680;margin-bottom:10px;letter-spacing:-.01em}
  .cardhead{display:flex;align-items:center;gap:10px;padding:13px var(--pad);border-bottom:1px solid var(--line);background:#fff}
  .cardhead h2{flex:1;margin:0;font-size:.96rem;font-weight:680}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:900px){.grid2{grid-template-columns:1fr}}
  .row{display:flex;gap:12px;flex-wrap:wrap}.row>div{flex:1;min-width:130px}
  /* Cards can't survive the 130px squeeze (prose wraps one word per line, table columns collapse
     to ~1ch and words stack letter-by-letter). Give cards realistic floors so the row WRAPS
     instead of crushing; table cards additionally scroll inside as the last resort. The 130px
     floor stays for non-card .row children (form fields). */
  .row>.card{min-width:240px}
  .row>.card.pad0{min-width:300px;overflow-x:auto}

  /* ---- badges / pills ---- */
  .pill{display:inline-flex;align-items:center;background:var(--canvas);color:var(--ink-2);border-radius:999px;
    padding:2px 10px;font-size:.7rem;margin:1px;font-weight:600;border:1px solid var(--line)}
  .pill.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
  .pill.gray{background:var(--canvas);color:var(--muted)}
  .pill.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
  .pill.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
  .muted{color:var(--muted)}
  code{background:var(--canvas);padding:1px 6px;border-radius:4px;font-size:.8rem;font-family:var(--mono);overflow-wrap:anywhere}
  /* URL/value + trailing control (copy button, pill): keep the control pinned inline and ellipsize
     a long value instead of wrapping it under the control. Used by the chat-endpoint & webhook rows. */
  .trylist{display:flex;flex-direction:column;gap:8px;margin:4px 0 8px}
.tryrow a.btn{cursor:pointer;border:1px solid var(--line-strong);border-radius:var(--radius);padding:7px 13px;
  font-size:.86rem;font-weight:600;line-height:1.2;display:inline-flex;align-items:center;gap:6px;
  background:#fff;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tryrow a.btn:hover{background:var(--raise);border-color:#c2c8d0}
.tryrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line,#e3e7e2);border-radius:10px;background:var(--panel2,#fafbf9)}
.tryrow .trybody{flex:1;min-width:0;line-height:1.45}
.trystep{flex:none;width:22px;height:22px;border-radius:50%;background:var(--green,#1f7a4d);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.urlcell{display:inline-flex;align-items:center;gap:6px;max-width:100%;vertical-align:middle}
  .urlcell code{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:340px}
  .urlcell .btn-icon{flex:0 0 auto}
  code.mono{background:none;padding:0;font-size:.74rem;color:var(--muted)}
  .empty{padding:30px;text-align:center;color:var(--muted);font-size:.85rem}
  .hint{font-size:.75rem;color:var(--muted);margin-top:4px}

  /* ============================ shell: left sidebar ============================ */
  #app{display:flex;height:100vh;overflow:hidden}
  /* ---- left sidebar: brand · grouped nav · account ---- */
  .sidebar{width:236px;flex:none;background:var(--bg);border-right:1px solid var(--line);
    display:flex;flex-direction:column;height:100vh}
  .sidebar .brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:1.24rem;color:var(--ink);
    padding:18px 18px 14px;white-space:nowrap;letter-spacing:-.01em}
  .sidebar .brand .mark{width:26px;height:26px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .sidebar .brand .mark svg{width:100%;height:100%}
  nav#nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 12px 12px;scrollbar-width:thin}
  nav#nav::-webkit-scrollbar{width:7px}nav#nav::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
  nav#nav .navgroup{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    color:var(--faint);padding:15px 11px 5px}
  /* The nav ships with ALL tabs in static HTML; app.js hides the ones the role can't access after
     reading perms. Keep it invisible until then (.ready added post-perms) so unauthorized tabs never
     flash on load/refresh. visibility (not display) reserves the layout — no shift when it appears. */
  nav#nav:not(.ready){visibility:hidden}
  nav#nav a{display:flex;align-items:center;gap:11px;padding:8px 11px;color:var(--ink);cursor:pointer;text-decoration:none;
    font-weight:500;font-size:.92rem;border-radius:10px;margin-bottom:1px;
    transition:color .12s,background .12s}
  nav#nav a svg{width:17px;height:17px;flex:0 0 auto;color:var(--faint)}
  nav#nav a:hover{color:var(--ink);background:var(--raise)}
  nav#nav a.active{color:var(--brand);background:var(--brand-soft);font-weight:650}
  nav#nav a.active svg{color:var(--brand)}
  .sidefoot{flex:none;border-top:1px solid var(--line);padding:11px;display:flex;align-items:center;gap:8px}
  .sidefoot .who{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
  .sidefoot .who #acctName{font-size:.82rem;font-weight:600;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .avatar{width:28px;height:28px;border-radius:9px;background:var(--brand);display:flex;align-items:center;
    justify-content:center;font-weight:700;color:#fff;font-size:.78rem;flex:0 0 auto}
  /* ---- main column: page title bar + scrolling content ---- */
  .maincol{flex:1;display:flex;flex-direction:column;min-width:0}
  .subbar{display:flex;align-items:center;gap:12px;height:64px;padding:0 30px;background:var(--bg);
    border-bottom:1px solid var(--line);flex:none}
  .subbar h1{font-family:var(--serif);font-size:1.7rem;font-weight:600;letter-spacing:-.01em}
  #pageTabs{flex:1;display:flex;gap:4px;align-self:stretch;align-items:stretch;margin-left:18px;overflow-x:auto;white-space:nowrap}
  #pageTabs button{appearance:none;background:none;border:none;border-radius:0;box-shadow:none;cursor:pointer;padding:0 14px;font:inherit;font-weight:600;font-size:.88rem;color:var(--muted)}
  #pageTabs button:hover{color:var(--ink)}
  #pageTabs button.active{color:var(--brand);font-weight:700}
  #pageActions{display:flex;align-items:center;gap:8px}
  main{flex:1;overflow:auto}
  .content{padding:26px 30px;max-width:1280px;margin:0 auto}

  /* ---- dashboard stat strip ---- */
  .alertbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
  .alertchip{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:8px;background:var(--warn-soft);color:var(--warn);border:1px solid transparent}
  .alertchip.crit{background:var(--bad-soft);color:var(--bad)}
  .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
  .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px 20px;
    box-shadow:var(--shadow);position:relative;overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}
  .stat:hover{border-color:var(--line-strong);box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .stat .n{font-family:var(--serif);font-size:2.1rem;font-weight:600;line-height:1.05;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
  .stat .l{color:var(--muted);font-size:.7rem;text-transform:uppercase;font-weight:700;margin-top:6px;letter-spacing:.05em}
  .statn{font-family:var(--serif);font-size:1.7rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
  .statl{color:var(--muted);font-size:.7rem;text-transform:uppercase;font-weight:700;letter-spacing:.05em}
  /* tabular figures in data tables keep columns aligned */
  td{font-variant-numeric:tabular-nums}
  .statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;vertical-align:middle}
  .statusbadge{display:inline-flex;align-items:center;font-weight:600;font-size:.8rem;text-transform:capitalize}
  .legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.76rem;color:var(--muted);margin-top:6px}

  /* ---- chips input ---- */
  .chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px solid var(--line-strong);border-radius:var(--radius);padding:5px 7px;min-height:38px}
  .chips:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .chips .chip{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:600;display:flex;align-items:center;gap:5px}
  .chips .chip b{cursor:pointer;font-weight:700;opacity:.55}.chips .chip b:hover{opacity:1}
  .chips input{border:none;box-shadow:none;flex:1;min-width:80px;padding:3px;width:auto}
  .chips input:focus{box-shadow:none}

  /* ---- checkbox list ---- */
  .checklist{border:1px solid var(--line-strong);border-radius:var(--radius);max-height:170px;overflow:auto}
  .checklist label{display:flex;align-items:center;gap:9px;margin:0;padding:8px 11px;text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);cursor:pointer}
  .checklist label:last-child{border-bottom:none}
  .checklist label:hover{background:var(--raise)}
  .checklist input{width:auto}
  .checklist .none{padding:11px;color:var(--muted)}
  /* ---- queue members + per-queue routing priority ---- */
  .qmlist{border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;background:#fff}
  .qmlist.scroll{max-height:288px;overflow:auto}
  .qmlist .none{padding:14px;color:var(--muted);font-size:.85rem}
  .qmhead{display:flex;align-items:center;gap:12px;padding:8px 13px;background:var(--raise);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;
    font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
  .qmhead .h-agent{flex:1}
  .qmhead .h-prio{width:72px;text-align:center;flex:0 0 auto}
  .qmrow{display:flex;align-items:center;gap:12px;padding:9px 13px;border-bottom:1px solid var(--line);transition:background .1s}
  .qmrow:last-child{border-bottom:none}
  .qmrow:hover{background:var(--raise)}
  .qm-mem{flex:1;min-width:0;display:flex;align-items:center;gap:10px;margin:0;padding:0;cursor:pointer;
    text-transform:none;letter-spacing:0;font-weight:400}
  .qm-mem input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;margin:0;cursor:pointer}
  .qm-name{font-size:.86rem;font-weight:600;color:var(--ink);white-space:nowrap}
  .qm-ext{font-size:.78rem;color:var(--muted);font-family:var(--mono)}
  .qm-skills{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
  .qm-chip{font-size:.66rem;font-weight:600;color:var(--ink-2);background:var(--raise);
    border:1px solid var(--line-strong);border-radius:20px;padding:1px 8px;white-space:nowrap;text-transform:none;letter-spacing:0}
  .qm-prio{width:72px;flex:0 0 auto;text-align:center;padding:6px 8px;font-variant-numeric:tabular-nums}
  .qm-prio:disabled{opacity:.5;cursor:not-allowed}

  /* ---- secret field ---- */
  .secret{display:flex;gap:6px;align-items:center}
  .secret code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ---- modal ---- */
  #modalRoot{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(16,24,40,.45);z-index:50;padding:20px;backdrop-filter:blur(2px)}
  #modalRoot.show{display:flex}
  /* Second modal layer, above the first: a picker opened FROM a form modal. Same look, higher
     stacking context, its own backdrop so the form behind reads as parked rather than gone. */
  #modalRoot2{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(16,24,40,.45);z-index:60;padding:20px;backdrop-filter:blur(2px)}
  #modalRoot2.show{display:flex}
  .modal{background:#fff;border-radius:12px;width:560px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);animation:pop .14s ease-out;border:1px solid var(--line)}
  @keyframes pop{from{transform:scale(.98) translateY(4px);opacity:.5}to{transform:scale(1);opacity:1}}
  .modal .mhead{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
  .modal .mhead h2{flex:1;font-size:.98rem;font-weight:680}
  .modal .mbody{padding:16px 18px;overflow:auto}
  .modal .mfoot{display:flex;justify-content:flex-end;gap:9px;padding:13px 18px;border-top:1px solid var(--line);background:var(--raise);border-radius:0 0 12px 12px}
  .modal .err{color:var(--bad);font-size:.83rem;margin-top:9px;min-height:1em}
  .msec{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
    margin:16px 0 8px;padding-top:13px;border-top:1px solid var(--line)}
  .msec:first-child{margin-top:0;padding-top:0;border-top:none}

  /* ---- toasts ---- */
  #toasts{position:fixed;top:14px;right:14px;z-index:9997;display:flex;flex-direction:column;gap:9px}
  /* Above BOTH modal layers (50/60): the tool chooser fires toasts while it is open — a failed
     class-override PUT dimmed behind a blurred backdrop reads as an unresponsive link. Below the
     stale-build banner (9998) and the session-expired overlay (9999). */
  .toast{background:var(--ink);color:#fff;border-radius:9px;padding:11px 15px;box-shadow:var(--shadow-pop);font-size:.85rem;font-weight:600;min-width:220px;animation:slidein .18s ease-out;border-left:3px solid var(--ok)}
  .toast.error{border-left-color:var(--bad);padding-right:34px;position:relative}
  .toast .tclose{position:absolute;top:4px;right:4px;background:none;border:none;color:#fff;opacity:.7;padding:2px 6px;font-size:.8rem;cursor:pointer}
  .toast .tclose:hover{opacity:1}
  @keyframes slidein{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
  .hidden{display:none !important}
  .err{color:var(--bad);font-size:.83rem;min-height:1em}
  /* Progress block for a long background job (website import): spinner + label + indeterminate bar. */
  .jobprog{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px 14px;background:var(--raise);border:1px solid var(--line);border-radius:10px}
  .jobprog-row{display:flex;align-items:center;gap:9px}
  .jobprog-row b{font-size:.86rem;color:var(--ink)}
  .spinner{width:15px;height:15px;flex:none;border:2px solid var(--line-strong);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .jobbar{position:relative;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
  .jobbar::after{content:"";position:absolute;left:-40%;top:0;height:100%;width:40%;border-radius:3px;background:var(--brand);animation:jobbar 1.1s ease-in-out infinite}
  @keyframes jobbar{0%{left:-40%}100%{left:100%}}
  .jobprog .sub{font-size:.76rem;color:var(--faint)}
  /* segmented toggle (e.g. sound-file vs text-to-speak) */
  .seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--radius);overflow:hidden;margin-bottom:6px}
  .seg button{border:none;border-radius:0;background:#fff;color:var(--ink-2);padding:6px 13px;font-size:.82rem}
  .seg button+button{border-left:1px solid var(--line-strong)}
  .seg button.on{background:var(--brand);color:#fff}
  .seg button:not(.on):hover{background:var(--raise)}

  /* ---- full-page editors (queue, agent) ---- */
  .editor{max-width:780px;display:flex;flex-direction:column;gap:14px}
  .editor textarea{width:100%;resize:vertical;font:inherit;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:var(--ink)}
  .ckline{display:flex;align-items:center;gap:8px;text-transform:none;font-weight:600;color:var(--ink);margin:0}
  .ckline input{width:auto}

  /* ---- flow builder ---- */
  /* Flow editor header: name+note grouped left, actions right, dirty indicator before them. */
  .fbhead{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
  .fbhead-left{display:flex;gap:12px;flex:1;min-width:280px}
  .fbhead-left .fbfield{flex:1;min-width:150px}
  .fbhead-right{display:flex;gap:8px;align-items:center}
  .flowwrap{display:flex;gap:12px;align-items:flex-start}
  .palette{flex:0 0 172px;max-height:calc(100vh - 150px);overflow-y:auto}
  .palhead{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
  .palhead h2{margin:0}
  .palhead .btn-ghost{padding:3px 7px;font-size:.7rem}
  .palcustom .msec:first-child{margin-top:0;padding-top:0;border-top:none}
  .palcustom label.ckline svg{width:14px;height:14px;color:var(--brand);flex:0 0 auto}
  .cfgpanel{flex:0 0 286px}
  .cfgpanel h2{font-size:.9rem}
  #edges line.hit{stroke:transparent;stroke-width:14px;pointer-events:stroke;cursor:pointer}
  #edges line.vis{pointer-events:none}
  #edges line.sel{stroke:var(--bad) !important}
  .palette .pbtn{display:flex;align-items:center;gap:9px;width:100%;text-align:left;margin-bottom:5px;background:#fff;color:var(--ink-2);border:1px solid var(--line-strong);font-size:.8rem;padding:7px 10px}
  .palette .pbtn svg{width:15px;height:15px;flex:0 0 auto;color:var(--brand);opacity:.92}
  .palette .pbtn:hover{background:var(--raise);border-color:#c2c8d0}
  .palette .pbtn:hover svg{opacity:1}
  .palette .pbtn.locked{opacity:.6}
  .palette .pbtn.locked svg{color:var(--ink-3,#9aa3af)}
  .palette .pbtn .lockpill{margin-left:auto;font-size:.6rem;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--brand);border-radius:6px;padding:1px 6px}
  #canvas{position:relative;flex:1;height:72vh;min-height:480px;background:var(--raise);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;cursor:grab}
  #canvas.panning{cursor:grabbing}
  #canvas.linking{cursor:crosshair}
  #canvas.linking .node{cursor:crosshair}
  /* Transformed inner layer: nodes + edges live here in logical coords; pan/zoom is a CSS transform. */
  #canvasInner{position:absolute;top:0;left:0;width:4000px;height:3000px;transform-origin:0 0;
    background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);background-size:18px 18px}
  #edges{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .marquee{position:absolute;border:1px solid var(--brand);background:rgba(79,70,229,.10);border-radius:3px;pointer-events:none;z-index:4}
  /* ---- widget inspector (config panel) ---- */
  .wdesc{font-size:.8rem;color:var(--ink-2);margin:0 0 4px;line-height:1.45}
  .cfgrow{display:flex;gap:6px;align-items:center;margin:4px 0}
  .rulecard{border:1px solid var(--line);border-radius:8px;padding:8px 9px;margin:6px 0;background:var(--card)}
  .rulecard label:first-child{margin-top:0}
  #zoomctl{position:absolute;right:10px;bottom:10px;display:flex;gap:3px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px;box-shadow:var(--shadow-md);z-index:5}
  #zoomctl button{border:0;background:transparent;color:var(--ink);font-size:.82rem;font-weight:700;line-height:1;padding:5px 9px;border-radius:6px;cursor:pointer;min-width:30px}
  #zoomctl button:hover{background:var(--raise)}
  .node{position:absolute;width:176px;background:#fff;border:1px solid var(--line-strong);border-radius:9px;cursor:grab;user-select:none;box-shadow:var(--shadow-md);transition:box-shadow .12s,border-color .12s}
  .node:hover{box-shadow:0 8px 22px rgba(16,24,40,.16)}
  .node:hover .link{transform:scale(1.12)}
  .node.sel{outline:2px solid var(--brand-ring);border-color:var(--brand)}
  .node .head{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px 8px 0 0;color:#fff;font-weight:750;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
  .node .head svg{width:14px;height:14px;flex:0 0 auto;opacity:.95}
  .node.welcome .head,.node.play_prompt .head{background:linear-gradient(90deg,#0e7490,#155e75)}
  .node.smart_routing .head,.node.menu .head,.node.ai_router .head,.node.collect .head{background:linear-gradient(90deg,#6d28d9,#5b21b6)}
  .node.hours .head{background:linear-gradient(90deg,#a25c00,#854d0e)}
  .node.queue .head{background:linear-gradient(90deg,#127a45,#0f5132)}
  .node.ai_agent .head{background:linear-gradient(90deg,#4f46e5,#4338ca)}
  .node.voicemail .head,.node.callback .head{background:linear-gradient(90deg,#0e7490,#0c5e72)}
  .node.data_dip .head{background:linear-gradient(90deg,#0369a1,#075985)}
  .node.set_var .head{background:linear-gradient(90deg,#0891b2,#0e7490)}
  .node.set_language .head{background:linear-gradient(90deg,#0891b2,#0e7490)}
  .node.send_sms .head,.node.send_email .head,.node.send_notification .head{background:linear-gradient(90deg,#0d9488,#0f766e)}
  .node.transfer .head{background:linear-gradient(90deg,#b45309,#92400e)}
  .node.go_to_flow .head{background:linear-gradient(90deg,#4338ca,#3730a3)}
  .node.survey .head{background:linear-gradient(90deg,#be123c,#9f1239)}
  .node.wrap_up .head,.node.hangup .head{background:linear-gradient(90deg,#667085,#475467)}
  /* Fallback: any widget type without an explicit color still gets a styled (not invisible) header. */
  .node .head{background:linear-gradient(90deg,#475569,#334155)}
  .node .body{padding:9px 11px;font-weight:600;font-size:.86rem;color:var(--ink)}
  .node .sub2{font-size:.7rem;color:var(--muted);font-weight:500;margin-top:2px}
  .node .link{position:absolute;right:-9px;bottom:-9px;width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px;line-height:20px;text-align:center;cursor:crosshair;box-shadow:var(--shadow-md);transition:transform .12s,background .12s}
  .node .link:hover{background:var(--brand-d);transform:scale(1.2)}
  .node .del{position:absolute;right:-7px;top:-8px;width:18px;height:18px;border-radius:50%;background:var(--bad);color:#fff;font-size:11px;line-height:18px;text-align:center;cursor:pointer}
  .entrytag{position:absolute;left:-7px;top:-8px;background:var(--ok);color:#fff;font-size:.56rem;font-weight:800;padding:2px 6px;border-radius:4px;box-shadow:var(--shadow);letter-spacing:.03em}
  .entrytag.orphan{background:var(--warn)}

  /* ---- full-page branded login ---- */
  /* Admin console login — a focused, security-forward card on a flat deep-navy backdrop. */
  .login-page{position:fixed;inset:0;overflow:auto;
    background:radial-gradient(62% 60% at 50% 26%, #1a2a56 0%, #101c3e 52%, #0a1024 100%)}
  .login-page .admin-brand{position:absolute;top:26px;left:30px;display:flex;align-items:center;gap:11px;
    color:#fff;font-weight:750;font-size:1.22rem;letter-spacing:-.01em}
  .login-page .admin-brand .mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
  .login-page .admin-brand .mark svg{width:100%;height:100%}
  .login-card{position:relative;width:420px;max-width:calc(100% - 32px);margin:0 auto;top:50%;transform:translateY(-50%);
    background:#fff;border-radius:16px;padding:34px 34px 26px;
    box-shadow:0 34px 90px -22px rgba(3,10,30,.66),0 2px 10px rgba(0,0,0,.20)}
  .login-card .admin-badge{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--brand);
    font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:15px}
  .login-card .admin-badge svg{width:18px;height:18px}
  .login-card .admin-title{font-size:1.4rem;font-weight:750;color:#101828;text-align:center;margin:0 0 12px;letter-spacing:-.01em}
  .login-card label{display:block;font-size:.84rem;font-weight:600;color:#344054;margin:14px 0 6px;text-transform:none;letter-spacing:0}
  .login-card input{width:100%;height:46px;padding:0 13px;font-size:.95rem;border:1px solid #d0d5dd;border-radius:9px;
    background:#fff;color:#101828;transition:border-color .12s,box-shadow .12s}
  .login-card input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  /* Keep browser-autofilled fields on-brand (Chrome/Safari otherwise paint them pale blue/yellow,
     which looks like the form "changed" after the password manager fills a saved login). */
  .login-card input:-webkit-autofill,.login-card input:-webkit-autofill:hover,.login-card input:-webkit-autofill:focus{
    -webkit-box-shadow:0 0 0 1000px #fff inset;-webkit-text-fill-color:#101828;caret-color:#101828;transition:background-color 9999s ease-in-out 0s}
  .login-card .admin-pass{position:relative}
  .login-card .admin-pass input{padding-right:44px}
  .login-card .admin-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;background:none;border:none;color:#98a2b3;cursor:pointer;border-radius:8px}
  .login-card .admin-eye:hover{color:#475467;background:#f2f4f7}
  .login-card .admin-forgot-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
  .login-card .admin-forgot-row a{font-size:.84rem;font-weight:600;color:var(--brand);cursor:pointer;text-decoration:none}
  .login-card .admin-forgot-row a:hover{text-decoration:underline}
  .login-card .admin-remember{display:flex;align-items:center;gap:8px;margin:0;font-size:.86rem;font-weight:500;
    color:#344054;cursor:pointer;text-transform:none;letter-spacing:0}
  .login-card .admin-remember input{width:auto;height:auto;margin:0;padding:0;accent-color:var(--brand)}
  .login-card .err{color:var(--bad);font-size:.84rem;margin-top:12px;text-align:center}
  .login-card .admin-signin{width:100%;height:48px;justify-content:center;margin-top:16px;font-size:.98rem;font-weight:650;border-radius:9px}
  .login-card .admin-note{font-size:.82rem;color:var(--muted);text-align:center;margin:16px 0 0}
  .login-card .admin-divider{height:1px;background:#e8ebf1;margin:20px 0 0}
  /* "or" separator + Google SSO button (shown only when /auth/methods says google is configured) */
  .login-card .admin-or{display:flex;align-items:center;gap:12px;margin:16px 0 0;color:var(--faint);font-size:.78rem}
  .login-card .admin-or::before,.login-card .admin-or::after{content:"";flex:1;height:1px;background:#e8ebf1}
  .btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:46px;
    margin-top:14px;border:1px solid #dadce0;border-radius:9px;background:#fff;color:#3c4043;
    font-size:.92rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,box-shadow .15s}
  .btn-google:hover{background:#f8f9fa;box-shadow:0 1px 3px rgba(60,64,67,.15)}
  .login-card .admin-secure{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--faint);font-size:.8rem;margin-top:15px}
  .login-card .admin-secure svg{width:15px;height:15px}

  /* ============================================================================
     Cartesia-style configuration page — clean, airy, rounded. Scoped to .cxset so
     it doesn't touch the dense data pages. (Platform → System settings.)
     ============================================================================ */
  .cxset{max-width:940px;margin:0 auto;padding-top:2px}
  /* two-pane: left group nav (Cartesia-style) + right content */
  .cxset.cxlayout{display:flex;gap:34px;align-items:flex-start;max-width:1120px}
  .cxnav{position:sticky;top:14px;width:208px;flex:none;align-self:flex-start}
  .cxnav-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin:2px 12px 9px}
  .cxnav-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;color:var(--ink-2);
    font-size:.88rem;font-weight:550;cursor:pointer;margin-bottom:2px;transition:background .1s,color .1s;line-height:1.3}
  .cxnav-item svg{color:var(--faint);flex:none}
  .cxnav-item:hover{background:var(--raise);color:var(--ink)}
  .cxnav-item.active{background:var(--brand-soft);color:var(--brand);font-weight:650}
  .cxnav-item.active svg{color:var(--brand)}
  .cxmain{flex:1;min-width:0;max-width:780px}
  @media(max-width:820px){.cxset.cxlayout{flex-direction:column}.cxnav{position:static;width:100%;display:flex;flex-wrap:wrap;gap:4px}.cxnav .cxnav-label{width:100%}}
  .cxset .cxsearch{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);
    border-radius:13px;padding:12px 16px;margin-bottom:18px;box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s}
  .cxset .cxsearch:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
  .cxset .cxsearch svg{width:18px;height:18px;color:var(--faint);flex:none}
  .cxset .cxsearch input{border:none;padding:0;font-size:.95rem;background:transparent;color:var(--ink)}
  .cxset .cxsearch input:focus{outline:none;box-shadow:none}
  .cxset .cxintro{color:var(--muted);font-size:.82rem;line-height:1.6;margin:0 4px 24px;max-width:780px}
  .cxset .cxsection{margin-bottom:28px}
  .cxset .cxsection-label{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 4px 4px}
  .cxset .cxsection-desc{color:var(--faint);font-size:.78rem;line-height:1.5;margin:0 4px 11px;max-width:700px}
  .cxset .cxcard{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}
  .cxset .cxrow{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);transition:background .1s}
  .cxset .cxrow:last-child{border-bottom:none}
  .cxset .cxrow:hover{background:var(--raise)}
  .cxset .cxdot{width:9px;height:9px;border-radius:50%;flex:none;background:#cbd2da}
  .cxset .cxdot.ok{background:var(--ok)} .cxset .cxdot.bad{background:var(--bad)} .cxset .cxdot.mut{background:#cbd2da}
  .cxset .cxrow-main{flex:1;min-width:0}
  .cxset .cxrow-title{font-weight:650;font-size:.92rem;color:var(--ink);display:flex;align-items:center;gap:8px}
  .cxset .cxrow-hint{color:var(--muted);font-size:.76rem;line-height:1.5;margin-top:3px;max-width:600px}
  .cxset .cxval{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);background:var(--canvas);
    padding:4px 10px;border-radius:8px;white-space:nowrap;max-width:190px;overflow:hidden;text-overflow:ellipsis;flex:none}
  .cxset .cxval.mut{color:var(--faint);background:transparent}
  .cxset .cxstatus{font-size:.7rem;font-weight:600;color:var(--faint);width:72px;text-align:right;flex:none}
  .cxset .cxstatus.ok{color:var(--ok)} .cxset .cxstatus.bad{color:var(--bad)}
  .cxset .cxedit{background:#fff;border:1px solid var(--line-strong);color:var(--ink-2);border-radius:999px;
    padding:6px 17px;font-size:.8rem;font-weight:600;flex:none}
  .cxset .cxedit:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
  .cxset .cxtag{font-size:.58rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--warn);
    background:var(--warn-soft);padding:2px 7px;border-radius:6px}
  .cxset details.cxadv{border-top:1px solid var(--line)}
  .cxset details.cxadv summary{cursor:pointer;padding:12px 18px;font-size:.79rem;color:var(--muted);user-select:none;list-style:none}
  .cxset details.cxadv summary::-webkit-details-marker{display:none}
  .cxset details.cxadv summary:hover{background:var(--raise)}
  .cxset details.cxadv[open]>summary{border-bottom:1px solid var(--line)}
  .cxset details.cxadv summary .cxmut{color:var(--faint);font-weight:400}

  /* clickable account name in the platform accounts table */
  .acctlink{cursor:pointer;font-weight:680;color:var(--ink);border-bottom:1px solid transparent}
  .acctlink:hover{color:var(--brand);border-bottom-color:var(--brand)}

  /* impersonation banner: shown while a platform operator is inside a tenant's console */
  #impBanner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;background:#4a3a12;color:#ffe6a3;font-size:.82rem;flex:0 0 auto}
  #impBanner b{color:#fff}
  #impBanner button{background:#ffe6a3;color:#3a2d0c;border:none;border-radius:7px;padding:6px 13px;font-weight:650;cursor:pointer;font-size:.78rem}
  #impBanner button:hover{background:#fff}

  /* tenant-config inspector: expandable item rows */
  details.cfgitem>summary{list-style:none;outline:none}
  details.cfgitem>summary::-webkit-details-marker{display:none}
  details.cfgitem>summary::before{content:'▸';color:var(--muted);font-size:.7rem;margin-right:7px;display:inline-block;transition:transform .12s}
  details.cfgitem[open]>summary::before{transform:rotate(90deg)}
  details.cfgitem>summary:hover{background:var(--raise)}

  /* ---- Wallboard (full-screen TV mode for a floor monitor) ---- */
  #wallboard{position:fixed;inset:0;z-index:9999;background:#0b1220;color:#e2e8f0;
    display:flex;flex-direction:column;padding:22px 28px;gap:18px;font-family:inherit;overflow:hidden}
  #wallboard .wb-head{display:flex;align-items:center;gap:18px}
  #wallboard .wb-title{font-size:1.6rem;font-weight:800;letter-spacing:.5px;flex:1}
  #wallboard .wb-clock{font-size:1.4rem;font-weight:700;color:#94a3b8;font-variant-numeric:tabular-nums}
  #wallboard .wb-exit{background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
    padding:8px 14px;font-size:.9rem;cursor:pointer}
  #wallboard .wb-exit:hover{background:#334155}
  #wallboard .wb-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
  #wallboard .wb-tile{background:#111c30;border:1px solid #1e293b;border-radius:14px;padding:18px 14px;text-align:center}
  #wallboard .wb-n{font-size:3.2rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
  #wallboard .wb-l{margin-top:8px;font-size:.95rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px}
  #wallboard .wb-cols{flex:1;display:grid;grid-template-columns:1fr 2fr;gap:16px;min-height:0}
  #wallboard .wb-panel{background:#111c30;border:1px solid #1e293b;border-radius:14px;padding:16px 18px;overflow:auto}
  #wallboard .wb-ph{font-size:1.1rem;font-weight:700;margin-bottom:12px;color:#cbd5e1}
  #wallboard .wb-states{display:flex;flex-direction:column;gap:14px;font-size:1.25rem}
  #wallboard .wb-states b{float:right;font-weight:800}
  #wallboard .wb-dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:10px}
  #wallboard .wb-q{width:100%;border-collapse:collapse;font-size:1.2rem}
  #wallboard .wb-q td{padding:10px 6px;border-bottom:1px solid #1e293b}
  /* Dark-theme row hover: the global tbody tr:hover uses the light --raise (near-white), which
     washes the wallboard's light-on-dark text into invisibility. Scope a dark raise here. */
  #wallboard .wb-q tbody tr:hover{background:#1b2942}
  #wallboard .wb-ticker{display:flex;flex-wrap:wrap;gap:14px;min-height:34px;align-items:center}
  #wallboard .wb-alert{padding:6px 14px;border-radius:8px;font-weight:700;font-size:1rem}
  #wallboard .wb-alert.warn{background:#78350f;color:#fde68a}
  #wallboard .wb-alert.critical{background:#7f1d1d;color:#fecaca}
  #wallboard .wb-ok{color:#22c55e;font-weight:700;font-size:1.05rem}

  /* Keyboard focus: every interactive element gets a visible ring (audit: none existed). */
  button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
  #nav a:focus-visible{outline-offset:-2px}

  /* ---- AI tool picker (searchable, grouped, read/write badged) ---- */
  .toolpick-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .toolpick-q{flex:1;margin:0}
  .toolpick-list{max-height:280px}
  .toolpick-group{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:6px 11px;background:var(--raise);border-bottom:1px solid var(--line);
    font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    position:sticky;top:0;z-index:1}
  /* The header doubles as a select-all for its server. */
  /* Qualified with .checklist because `.checklist label` (0,1,1) sets text-transform:none, its own
     font size/weight and a bottom border — it outranks a bare `.toolpick-all` (0,1,0), so the group
     title stopped reading as a heading the moment it became a select-all label. */
  .checklist label.toolpick-all{display:flex;align-items:center;gap:8px;cursor:pointer;
    margin:0;padding:0;border:0;background:none;
    font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
  .checklist label.toolpick-all:hover{background:none}
  .toolpick-all input{margin:0;cursor:pointer}
  .toolpick-gcount{font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
  .checklist label.toolrow{align-items:flex-start;gap:9px;padding:9px 11px}
  .toolrow-body{display:flex;flex-direction:column;gap:2px;min-width:0}
  .toolrow-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .toolrow-head code{font-size:.8rem}
  /* A stored tool no connected server offers: kept and ticked, but visibly not normal. */
  .checklist label.toolrow-unknown{background:var(--warn-soft,#fff8e6)}

  /* ---- The tool field on the agent form: the answer, not the chooser ---- */
  .toolsel{display:flex;flex-direction:column;gap:8px}
  .toolsel-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:26px}
  .toolsel-actions{display:flex;align-items:center;gap:10px}
  .toolchip{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 9px;border-radius:6px;
    background:var(--raise);border:1px solid var(--line);font-size:.78rem;max-width:100%}
  .toolchip code{font-size:.78rem}
  /* A write tool changes data in the connected system, so it is worth seeing at a glance which of
     the agent's powers are not merely reads. */
  .toolchip-write{border-color:var(--warn,#b45309)}
  .toolchip-miss{background:var(--warn-soft,#fff8e6);border-color:var(--warn,#b45309)}
  .toolchip-x{border:0;background:none;cursor:pointer;color:var(--muted);font-size:.8rem;
    line-height:1;padding:3px 4px;border-radius:4px}
  .toolchip-x:hover{background:var(--line);color:var(--text)}

  /* In its own window the chooser has the room the inline version never did. */
  #modalRoot2 .toolpick-list{max-height:52vh}
  /* Group headers already name the source; the per-row chip is noise until search hides them. */
  .toolpick-list .toolrow-src{display:none}
  .toolpick-list.searching .toolrow-src{display:inline-flex}

  /* "+N more" reuses the chip shape so the row stays one visual rhythm. */
  .toolchip-more{cursor:pointer;padding:3px 9px;color:var(--muted);font-weight:600}
  .toolchip-more:hover{color:var(--text);border-color:var(--muted)}

  /* A guessed read/write class: dashed outline + a trailing "?" so it never reads as the server's
     own declaration. The correction link sits in the row body. */
  .pill.pill-guess{border:1px dashed currentColor;background:transparent}