/* Pulse dashboard — translated from the design canvas */
:root{
  /* surfaces (light — default theme) */
  --bg:#FAF8F4; --panel:#FFFFFF; --panel2:#F2EEE7; --card:#F6F3ED; --panel-hover:#EFEAE1;
  /* lines & fills */
  --line:rgba(30,24,16,.10); --line2:rgba(30,24,16,.13); --line-faint:rgba(30,24,16,.07);
  --line-strong:rgba(30,24,16,.18); --line-xstrong:rgba(30,24,16,.28); --tint:rgba(30,24,16,.035);
  --topbar-bg:rgba(250,248,244,.86);
  /* text */
  --text:#211D18; --text2:#332E28; --text-soft:#2B2620;
  --dim:#5A5349; --dim2:#786F63; --dim3:#887E70; --muted:#5A5349;
  --tan:#8A5A28; --warn:#B23B2E; --icon-subtle:#D7CFC2;
  /* accent text (contrast-safe per theme) */
  --amber-fg:#A15E14; --amber-hi-fg:#8C4A12; --green-hi:#3F6B34; --red-fg:#A13F35;
  --code-tag:#3E5872; --code-str:#6B5730; --chat-user-fg:#5C3D14;
  /* brand & status fills — constant across themes (used for dots, bars, glows, always-dark surfaces) */
  --amber:#E39A4E; --amber-hi:#F0B673; --amber-dim:#B4712C;
  --green:#6FA05F; --red:#C4756B;
  --sans:'Instrument Sans',system-ui,sans-serif;
  --display:'Outfit',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --bg:#0B0A09; --panel:#110F0E; --panel2:#0D0B0A; --card:#100E0D; --panel-hover:#141110;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.08); --line-faint:rgba(255,255,255,.045);
  --line-strong:rgba(255,255,255,.12); --line-xstrong:rgba(255,255,255,.2); --tint:rgba(255,255,255,.03);
  --topbar-bg:rgba(11,10,9,.86);
  --text:#F2EDE7; --text2:#C7BEB5; --text-soft:#E2DBD2;
  --dim:#8C837B; --dim2:#6E655D; --dim3:#5F574F; --muted:#A79D94;
  --tan:#C0A283; --warn:#E0A29A; --icon-subtle:#4E4741;
  --amber-fg:#E39A4E; --amber-hi-fg:#F0B673; --green-hi:#8DAF80; --red-fg:#C4756B;
  --code-tag:#7E8F9E; --code-str:#8B7A5A; --chat-user-fg:#EEDCC5;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--amber-fg);text-decoration:none}a:hover{color:var(--amber-hi-fg)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px}::-webkit-scrollbar-track{background:transparent}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(227,154,78,.45)}70%{box-shadow:0 0 0 12px rgba(227,154,78,0)}100%{box-shadow:0 0 0 0 rgba(227,154,78,0)}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

h1{margin:0;font-family:var(--display);font-size:34px;font-weight:400;letter-spacing:-.01em}
h2{margin:0;font-family:var(--display);font-size:21px;font-weight:500}
h3{margin:0;font-family:var(--display);font-size:16px;font-weight:500}
.sub{margin:0;font-size:14px;color:var(--dim);max-width:56ch;text-wrap:pretty}
.mono{font-family:var(--mono)}
.k{font:500 10px var(--mono);letter-spacing:.18em;color:var(--dim2);text-transform:uppercase}
.meta{font:400 11px var(--mono);color:var(--dim3)}

/* Top nav */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:14px 28px;background:var(--topbar-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;padding-right:18px;border-right:1px solid var(--line2)}
.brand .logo{height:20px;width:auto;display:block;color:var(--text)}
.crumb{margin-left:auto;font:400 11.5px var(--mono);color:var(--dim2)}

/* Header ticker: broadcast messages scrolling left→right, sits just left of the crumb */
.ticker{position:relative;margin-left:auto;width:300px;height:26px;flex:none;overflow:hidden;border-radius:99px;border:1px solid rgba(227,154,78,.22);background:rgba(227,154,78,.05);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker span{position:absolute;left:0;top:6px;white-space:nowrap;font:400 11.5px var(--mono);color:var(--tan);will-change:transform}
.ticker:not([hidden]) ~ .crumb{margin-left:0}

/* Buttons & pills */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:99px;border:1px solid var(--line-strong);background:none;color:var(--muted);font-family:var(--sans);font-size:13.5px;cursor:pointer;transition:all .15s}
.btn:hover{border-color:var(--line-xstrong);color:var(--text-soft)}
.btn.primary{border-color:rgba(227,154,78,.55);background:rgba(227,154,78,.14);color:var(--amber-hi-fg);font-weight:500}
.btn.primary:hover{background:rgba(227,154,78,.24);border-color:var(--amber)}
.btn.small{padding:7px 14px;font-size:12.5px}
.btn.danger:hover{border-color:rgba(196,117,107,.5);color:var(--red-fg)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{border:none;padding:0;background:none;color:var(--dim)}
.btn.ghost:hover{color:var(--amber-fg)}
.navbtn{padding:7px 15px;border-radius:99px;border:1px solid var(--line2);background:transparent;color:var(--dim);font-family:var(--sans);font-size:12.5px;white-space:nowrap;cursor:pointer}
.navbtn.on{border-color:rgba(227,154,78,.5);background:rgba(227,154,78,.12);color:var(--amber-hi-fg)}
.pill{display:inline-block;padding:4px 10px;border-radius:99px;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pill.video{color:var(--amber-fg);background:rgba(227,154,78,.1);border:1px solid rgba(227,154,78,.35)}
.pill.agent{color:var(--dim);background:var(--tint);border:1px solid var(--line2)}
.pill.ok{color:var(--green-hi);background:rgba(111,160,95,.1);border:1px solid rgba(111,160,95,.28)}
.pill.work{color:var(--tan);background:rgba(227,154,78,.1);border:1px solid rgba(227,154,78,.3)}
.pill.idle{color:var(--dim);background:var(--tint);border:1px solid var(--line2)}
.pill.err{color:var(--red-fg);background:rgba(196,117,107,.1);border:1px solid rgba(196,117,107,.3)}

/* Inputs */
.field{display:flex;flex-direction:column;gap:9px}
.field label{font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2)}
.field label .opt{color:var(--icon-subtle);letter-spacing:0;text-transform:none;font-family:var(--sans)}
.input{padding:14px 18px;border-radius:11px;border:1px solid var(--line2);background:var(--panel2);font-size:15px;color:var(--text);font-family:var(--sans);outline:none;transition:border-color .15s}
.input:focus{border-color:rgba(227,154,78,.4)}
.input::placeholder{color:var(--dim3)}

/* Layout */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 50px)}
.side{border-right:1px solid var(--line);padding:30px 20px;display:flex;flex-direction:column;gap:30px}
.side-group{display:flex;flex-direction:column;gap:2px}
.side-title{font:500 10px var(--mono);letter-spacing:.18em;color:var(--dim2);text-transform:uppercase;padding:0 12px 12px}
.side-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--dim);font-size:14px;cursor:pointer;border:1px solid transparent}
.side-item:hover{color:var(--text2)}
.side-item.on{background:rgba(227,154,78,.10);border-color:rgba(227,154,78,.28);color:var(--amber-hi-fg);font-weight:500}
.side-card{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
.side-user{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--line)}
.main{padding:36px 44px 60px;display:flex;flex-direction:column;gap:30px;min-width:0}
.page{max-width:1180px;margin:0 auto;padding:40px 40px 80px;display:flex;flex-direction:column;gap:30px}

/* Avatar circles — always a dark badge with vivid amber initials, independent of page theme */
.avatar{flex:none;border-radius:99px;background:linear-gradient(150deg,#3E2D1D,#1A1615);border:1px solid rgba(227,154,78,.3);box-shadow:0 0 16px rgba(227,154,78,.12);display:grid;place-items:center;font:500 13px var(--mono);color:var(--amber);background-size:cover;background-position:center}

/* Pulse cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.pcard{display:flex;flex-direction:column;border-radius:16px;border:1px solid var(--line2);background:var(--panel);overflow:hidden;cursor:pointer;transition:all .15s}
.pcard:hover{border-color:rgba(227,154,78,.34);background:var(--panel-hover)}
.pcard-top{display:flex;gap:14px;padding:20px 20px 16px}
.pcard-foot{display:flex;align-items:center;gap:16px;padding:12px 20px;border-top:1px solid var(--line-faint);background:var(--tint)}
.dot{width:6px;height:6px;border-radius:99px}
.dot.ok{background:var(--green)}
.dot.work{background:var(--amber);animation:pulseRing 2.4s ease-out infinite}
.dot.idle{background:var(--dim2)}
.dot.err{background:var(--red)}

/* Panels & lists */
.panel{border-radius:16px;border:1px solid var(--line2);background:var(--panel)}
.panel-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.rowlist>div{display:flex;align-items:center;gap:15px;padding:16px 22px;border-bottom:1px solid var(--line-faint)}
.rowlist>div:last-child{border-bottom:none}
.doc-icon{width:30px;height:34px;border-radius:5px;border:1px solid var(--line-strong);display:grid;place-items:center;font:500 9px var(--mono);color:var(--dim);flex:none}
.bar{height:3px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>div{height:100%;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .4s}
.bar>div.done{background:#4E7A4A}

/* Create-flow steps */
.steps{display:flex;align-items:center}
.step{display:flex;align-items:center;gap:10px}
.step .n{width:28px;height:28px;flex:none;border-radius:99px;cursor:pointer;font:500 12px var(--mono);border:1px solid var(--line-strong);background:transparent;color:var(--dim2);display:grid;place-items:center}
.step.cur .n{border-color:rgba(227,154,78,.6);background:rgba(227,154,78,.16);color:var(--amber-fg)}
.step.done .n{border-color:rgba(227,154,78,.3);color:var(--amber-fg)}
.step .lbl{font-size:13px;white-space:nowrap;color:var(--dim2)}
.step.cur .lbl{color:var(--text)}
.step-line{flex:1;height:1px;margin:0 12px;background:var(--line2)}
.step-line.done{background:rgba(227,154,78,.28)}

/* Drop zone */
.dropzone{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:14px;border:1px dashed var(--line-strong);background:var(--tint);align-items:flex-start;transition:all .15s}
.dropzone.drag{border-color:rgba(227,154,78,.55);background:rgba(227,154,78,.05)}

/* Agent picker */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.agent-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 18px;border-radius:14px;cursor:pointer;border:1px solid var(--line2);background:var(--panel2);transition:all .15s}
.agent-card.sel{border-color:rgba(227,154,78,.5);background:rgba(227,154,78,.06)}

/* Code block */
.code{padding:14px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font:400 11px/1.75 var(--mono);color:var(--dim3);overflow-x:auto;white-space:pre}
.code .tag{color:var(--code-tag)}.code .str{color:var(--code-str)}

/* Tables */
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);padding:12px 16px;border-bottom:1px solid var(--line)}
table.tbl td{padding:14px 16px;border-bottom:1px solid var(--line-faint);color:var(--text2);vertical-align:middle}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:100}
.modal{width:min(480px,92vw);border-radius:18px;border:1px solid var(--line2);background:var(--panel);padding:28px;display:flex;flex-direction:column;gap:20px;max-height:86vh;overflow-y:auto}

/* Login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(420px,92vw);display:flex;flex-direction:column;gap:24px;padding:40px 36px;border-radius:20px;border:1px solid var(--line2);background:var(--panel)}

/* Chat reader */
.chat-msg{max-width:76%;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.55}
.chat-msg.u{align-self:flex-end;background:rgba(227,154,78,.14);border:1px solid rgba(227,154,78,.24);color:var(--chat-user-fg);border-bottom-right-radius:4px}
.chat-msg.a{align-self:flex-start;background:var(--line-faint);border:1px solid var(--line);color:var(--text-soft);border-bottom-left-radius:4px}

/* Embed preview modal — deliberately a fixed dark stage, independent of page theme */
.preview-back{position:fixed;inset:0;background:rgba(7,6,5,.94);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:120;padding:32px}
.preview-frame{position:relative;width:min(1000px,94vw);padding:10px;border-radius:18px;border:1px dashed rgba(227,154,78,.55)}
.preview-frame .embed-tag{position:absolute;top:-9px;left:18px;padding:1px 8px;background:#070605;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber-dim)}
.preview-close{position:absolute;top:-14px;right:-14px;width:34px;height:34px;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:#1A1615;color:#A79D94;display:grid;place-items:center;cursor:pointer}
.preview-close:hover{border-color:rgba(227,154,78,.5);color:var(--amber)}

/* Toast — always a dark chip, independent of page theme */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 22px;border-radius:99px;background:#1A1615;border:1px solid rgba(227,154,78,.4);color:var(--amber-hi);font-size:13.5px;z-index:200;box-shadow:0 12px 30px rgba(0,0,0,.5)}

/* Topic map */
.topic-bars{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px}
.topic-row{display:flex;align-items:center;gap:14px;padding:10px 2px}

/* Usage chart (Usage tab: conversations per day/month) */
.usage-chart{display:flex;align-items:flex-end;gap:4px}
.usage-chart .bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.usage-chart .bar-fill{width:100%;max-width:26px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--amber),var(--amber-dim));min-height:2px;transition:height .3s}
.usage-chart .bar-label{font:400 10px var(--mono);color:var(--dim3);white-space:nowrap}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search{margin-left:auto;display:flex;align-items:center;gap:10px;padding:10px 16px;min-width:260px;border-radius:99px;border:1px solid var(--line2);background:var(--card)}
.search input{background:none;border:none;outline:none;color:var(--text);font-size:13.5px;flex:1}
.search input::placeholder{color:var(--dim3)}
.empty{padding:60px 20px;text-align:center;color:var(--dim2);font-size:14px;border:1px dashed var(--line2);border-radius:16px}

/* Dropdown menu */
.menu-wrap{position:relative;display:inline-flex}
.menu{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:1px;z-index:40}
.menu[hidden]{display:none}
.menu-item{display:block;width:100%;text-align:left;padding:9px 12px;border-radius:8px;border:none;background:none;color:var(--text2);font-family:var(--sans);font-size:13.5px;cursor:pointer;white-space:nowrap}
.menu-item:hover{background:var(--tint);color:var(--text)}
.menu-item.danger{color:var(--red-fg)}
.menu-item.danger:hover{background:rgba(196,117,107,.1)}