/* Palette carried over from the previous UI deliberately -- this is a rebuild of the same
   product, not a different one. Light is the default; dark via [data-theme="dark"]. */
:root{
  --bg:#fbfcfd; --bg2:#fff; --bg3:#f2f4f7; --line:#dfe3ea;
  --fg:#131722; --fg2:#5b6472; --fg3:#8b94a3;
  --acc:#3b6fd4; --ok:#2f9e63; --warn:#b8801f; --err:#c8453a; --run:#3b6fd4;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0e1014; --bg2:#15181f; --bg3:#1c2029; --line:#272c38;
  --fg:#e6e9ef; --fg2:#9aa3b2; --fg3:#6b7484;
  --acc:#5b8cff; --ok:#3fbf7f; --warn:#e0a33e; --err:#e0574a; --run:#5b8cff;
}
*{box-sizing:border-box}

/* A class rule that sets `display` outranks the UA stylesheet's [hidden]{display:none}. That
   has bitten four times here -- an invisible backdrop swallowing clicks, a stale filter note,
   the whole signed-in shell rendering to logged-out visitors, and again in the rebuild. Every
   selector below that sets `display` carries an explicit [hidden] override. */
[hidden]{display:none !important}

body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;margin:0;
  height:100vh;display:grid;grid-template-columns:210px 1fr}
body:has(#login:not([hidden])){display:grid;grid-template-columns:1fr;place-items:center}

.muted{color:var(--fg2)}
.pad{padding:0 20px}
code{font-family:var(--mono);font-size:12.5px}

/* login */
#login{display:grid;place-items:center;height:100vh;width:100%}
#login[hidden]{display:none !important}
.login-card{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:30px;
  width:340px;display:grid;gap:11px}
.login-card[hidden]{display:none !important}
.login-logo{font-size:26px;color:var(--acc)}
.login-card h1{margin:0;font-size:18px}
#loginErr{color:var(--err);font-size:13px;min-height:18px}

/* shell */
#app{display:contents}
#app[hidden]{display:none !important}
.sidebar{background:var(--bg2);border-right:1px solid var(--line);padding:14px 10px;
  display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;padding:0 4px}
.logo{font-size:20px;color:var(--acc)}
.brand-name{font-weight:600;font-size:13.5px;line-height:1.2}
.brand-org{font-size:11px;color:var(--fg3)}
nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav{display:flex;gap:10px;align-items:center;padding:8px 10px;border:0;border-radius:7px;
  background:none;color:var(--fg2);font:inherit;cursor:pointer;text-align:left}
.nav span{opacity:.65;font-size:12px;width:14px}
.nav:hover{background:var(--bg3);color:var(--fg)}
.nav.active{background:var(--bg3);color:var(--fg);font-weight:550}
.nav.active span{opacity:1;color:var(--acc)}
.sidebar-foot{border-top:1px solid var(--line);padding:12px 4px 2px;font-size:11px;line-height:1.7}
.foot-actions{display:flex;gap:10px;margin-top:6px}

main{overflow:hidden;display:flex;flex-direction:column;min-height:0}
.view{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
.view[hidden]{display:none !important}
.vh{display:flex;align-items:center;gap:12px;padding:16px 20px 10px}
.vh h1{margin:0;font-size:15px}
.vh .btn{margin-left:auto}
.vh .muted{margin-left:auto;font-family:var(--mono);font-size:11.5px}

/* buttons + inputs */
.btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--bg3);
  color:var(--fg);border-radius:7px;padding:7px 13px}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.small{padding:4px 9px;font-size:12.5px}
.link{background:none;border:0;color:var(--fg2);cursor:pointer;font:inherit;padding:0;
  text-decoration:underline}
.link:hover{color:var(--fg)}
input,textarea,select{font:inherit;background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:7px;padding:7px 10px;width:100%}
textarea{font-family:var(--mono);font-size:13px;resize:vertical}

/* stats strip */
.stats{display:flex;gap:10px;padding:0 20px 12px;flex-wrap:wrap}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 14px;min-width:104px}
.stat b{display:block;font-size:19px;line-height:1.3}
.stat span{font-size:11px;color:var(--fg2)}
.stat.warn b{color:var(--warn)}
.stat.bad b{color:var(--err)}

/* filters */
.filters{display:flex;gap:8px;padding:0 20px 12px;align-items:center}
.filters input{max-width:260px}
.filters select{max-width:150px}

/* split list/detail */
.split{display:grid;grid-template-columns:320px 1fr;flex:1;min-height:0;
  border-top:1px solid var(--line)}
.list{border-right:1px solid var(--line);overflow-y:auto;padding:10px;display:flex;
  flex-direction:column;gap:7px;background:var(--bg2)}
.item{border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer;
  background:var(--bg);display:grid;gap:5px}
.item:hover{border-color:var(--acc)}
.item.sel{border-color:var(--acc);background:var(--bg3)}
.item .t{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{display:flex;gap:6px;align-items:center;color:var(--fg2);font-size:11px;flex-wrap:wrap}
.badge{border-radius:4px;padding:1px 7px;font-size:11px;font-weight:600;background:var(--bg3);
  border:1px solid var(--line)}
.badge.sre{color:#79c0ff}.badge.reviewer{color:#d2a8ff}.badge.devops{color:#ffa657}
.st{font-weight:600}
.st.running{color:var(--run)}.st.idle{color:var(--ok)}
.st.needs_approval{color:var(--warn)}.st.failed{color:var(--err)}

.detail{overflow-y:auto;padding:18px 24px}
.detail[hidden]{display:none !important}
.empty{color:var(--fg2);display:grid;place-items:center;height:55vh}
.detail h2{margin:0 0 6px;font-size:17px}

/* trace */
.trace{display:flex;flex-direction:column;gap:7px;margin:16px 0}
.ev{border:1px solid var(--line);border-radius:8px;padding:9px 11px;background:var(--bg2)}
.ev.tool{border-left:3px solid var(--acc)}
.ev.denied{border-left:3px solid var(--warn)}
.ev.error{border-left:3px solid var(--err)}
.ev.turn{border-left:3px solid var(--fg3);background:var(--bg3)}
.ev .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg3)}
.ev pre{margin:5px 0 0;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;
  word-break:break-word}
.ev .why{color:var(--warn);font-size:12.5px;margin-top:5px}
.answer{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--ok);
  border-radius:8px;padding:15px 17px;margin-top:14px}
.answer pre{white-space:pre-wrap;font-family:inherit;margin:0;line-height:1.6}
.approval{background:var(--bg2);border:1px solid var(--warn);border-radius:8px;padding:13px 15px;
  margin:11px 0;display:grid;gap:9px}
.approval code{background:var(--bg);padding:3px 7px;border-radius:4px;display:block;overflow-x:auto}
.acts{display:flex;gap:8px}
.reply{display:flex;gap:8px;margin-top:18px;position:sticky;bottom:0;background:var(--bg);padding:10px 0}
.spin{display:inline-block;width:10px;height:10px;border:2px solid var(--line);
  border-top-color:var(--acc);border-radius:50%;animation:s .8s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}

/* cards */
.cards{padding:14px 20px;display:grid;gap:12px;overflow-y:auto;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:15px 17px}
.card h3{margin:0 0 5px;font-size:14.5px;display:flex;align-items:center;gap:8px}
.card p{margin:0 0 9px;color:var(--fg2);font-size:13px}
.tools{display:flex;gap:5px;flex-wrap:wrap}
.tools span{font-family:var(--mono);font-size:11px;background:var(--bg3);border:1px solid var(--line);
  border-radius:4px;padding:2px 7px}
.ok{color:var(--ok)}.bad{color:var(--err)}

/* ask */
.ask-wrap{padding:0 20px;display:grid;gap:11px;max-width:820px}
.rolepick{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rolepick .r{border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer;
  background:var(--bg2)}
.rolepick .r.sel{border-color:var(--acc);background:var(--bg3)}
.rolepick .r b{display:block;font-size:13px}
.rolepick .r span{color:var(--fg2);font-size:11.5px}
label.row{display:flex;align-items:center;gap:8px}
label.row input{width:auto}

/* role editor + knowledge viewer */
.editor{width:100%;min-height:60vh;font-family:var(--mono);font-size:12.5px}
.doc{white-space:pre-wrap;font-family:var(--mono);font-size:12.5px;line-height:1.6}
.editbar{display:flex;gap:8px;align-items:center;margin:10px 0}
.saved{color:var(--ok);font-size:12.5px}

/* dialog */
dialog{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:12px;
  padding:0;width:min(620px,92vw)}
dialog::backdrop{background:#000a}
dialog form{padding:20px;display:grid;gap:9px}
dialog h2{margin:0;font-size:17px}
dialog label{font-size:12px;color:var(--fg2);margin-top:5px}
dialog menu{display:flex;justify-content:flex-end;gap:8px;padding:0;margin:12px 0 0}

/* ── ported verbatim from the previous UI ──────────────────────────────────────
   These screens worked. The rebuild changed the data model underneath them, not
   the way they look, so the styles come across unchanged rather than reinvented. */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;
        padding:9px 18px;border-bottom:1px solid var(--line);flex-shrink:0}
.actions{display:flex;gap:8px;align-items:center}
.overview{padding:18px 22px 0;flex-shrink:0}
.overview.collapsed{padding:0}
.overview.collapsed .chart-card{display:none}
.ov-toggle{border:0;background:transparent;color:var(--fg3);font:inherit;font-size:11px;
           cursor:pointer;padding:2px 6px;border-radius:5px}
.ov-toggle:hover{background:var(--bg3);color:var(--fg)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;
          margin-bottom:14px}
.stat-label{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
            font-weight:600}
.stat-value{font-size:22px;font-weight:650;margin-top:5px;font-variant-numeric:tabular-nums}
.stat-sub{font-size:11px;color:var(--fg3);margin-top:2px}
.stat-value.ok{color:var(--ok)}.stat-value.warn{color:var(--warn)}.stat-value.bad{color:var(--err)}
.chart-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
            flex-wrap:wrap;margin-bottom:10px}
.chart-title{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg3);
             font-weight:600}
.chart-controls{display:flex;gap:8px}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--fg3);font:inherit;font-size:11px;
            padding:4px 10px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--bg3);color:var(--fg);font-weight:550}
.chart-legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:10.5px;color:var(--fg2)}
.chart-legend span{display:flex;align-items:center;gap:6px}
.chart-legend i{width:10px;height:2px;border-radius:2px;display:inline-block}
.chart-empty{color:var(--fg3);font-size:12.5px;padding:26px 0;text-align:center}
svg .grid{stroke:var(--line);stroke-width:1}
svg .axis{fill:var(--fg3);font-size:9.5px;font-family:var(--mono)}
svg .ln{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg .pt{stroke:var(--bg2);stroke-width:1.5}
svg .hit{cursor:pointer}
.btn.danger{color:var(--err);border-color:transparent}
.btn.danger:hover{border-color:var(--err)}
.pill{padding:2px 7px;border-radius:20px;font-size:10.5px;background:var(--bg);
      border:1px solid var(--line);color:var(--fg2);font-family:var(--mono)}

/* visibility: who else can see this session. Private is the exception and should look like it. */
.pill.vis-private{border-color:var(--warn);color:var(--warn)}
.pill.vis-org{border-color:var(--ok);color:var(--ok)}
.pill.vis-channel{border-color:var(--acc);color:var(--acc)}

.sched-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
            padding:15px 17px;margin-bottom:12px;display:grid;
            grid-template-columns:1fr auto;gap:10px 18px;align-items:start}
.sched-main{min-width:0}
.sched-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.sched-name{font-size:14px;font-weight:600}
.sched-badges{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.sched-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.sched-prompt{font-size:12.5px;color:var(--fg2);margin-top:11px;line-height:1.6;
              white-space:pre-wrap;border-left:2px solid var(--line);padding-left:11px}
.sched-prompt-wrap{margin-top:7px}
.sched-prompt-wrap summary{cursor:pointer;color:var(--fg2);font-size:12px;line-height:1.55;
                           user-select:none}
.sched-prompt-wrap summary:hover{color:var(--fg)}
.sched-prompt-full{margin-top:8px;white-space:pre-wrap}
.sched-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sched-off{opacity:.6}
.sched-off .sched-name{text-decoration:line-through;text-decoration-color:var(--fg3)}
.sw{position:relative;width:34px;height:19px;flex-shrink:0;border:0;padding:0;cursor:pointer;
    border-radius:20px;background:var(--line);transition:.18s}
.sw.on{background:var(--ok)}
.sw:after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
          background:#fff;transition:.18s}
.sw.on:after{transform:translateX(15px)}
.cron-modes{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.cron-modes button{border:1px solid var(--line);background:var(--bg);color:var(--fg3);
                   border-radius:7px;padding:5px 10px;font:inherit;font-size:11.5px;cursor:pointer}
.cron-modes button.on{background:var(--bg3);color:var(--fg);border-color:var(--acc);font-weight:550}
.cron-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--fg2)}
.cron-row input,.cron-row select{width:auto;min-width:70px}
.cron-next{margin-top:9px;font-size:11.5px;color:var(--fg3);font-family:var(--mono);line-height:1.7}
.dow{display:flex;gap:4px}
.dow button{border:1px solid var(--line);background:var(--bg);color:var(--fg3);border-radius:6px;
            width:34px;padding:5px 0;font:inherit;font-size:11px;cursor:pointer}
.dow button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.field{margin-bottom:13px}
.field label{display:block;font-size:11px;color:var(--fg2);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%}
.field textarea{min-height:110px;font-family:var(--mono);font-size:12px}
.pad{padding:16px 22px;overflow-y:auto}


/* ── layout corrections ────────────────────────────────────────────────────────
   (2) the view header was 16px top and bottom plus an 18px title -- ~50px of chrome
   above every screen. (3) the overview sat outside the scroll area, so on a laptop the
   list and detail were squeezed into a third of the window while charts nobody was
   reading held the rest. (5) the reply box was sticky INSIDE the scrolling pane, so
   content ran underneath it and text appeared both above and below. */
.topbar h1{font-size:15px;margin:0;font-weight:650}
.overview{padding:9px 18px 12px}
.stat-row{gap:8px;margin-bottom:9px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
.stat{padding:7px 11px;border-radius:8px}
.stat-value{font-size:17px;margin-top:2px}
.stat-label{font-size:9.5px}
.stat-sub{font-size:10px}
.chart-card{padding:9px 12px}
.chart-head{margin-bottom:6px}
.filters{padding:9px 18px;border-top:1px solid var(--line);margin:0}

/* the working area owns the remaining height, and never less than half the window */
/* The working area gets the height, not the dashboard above it. Charts are context;
   the list and the trace are the job. */
.split{flex:1;min-height:min(58vh,560px)}

/* detail: one scrolling region, one pinned footer */
.detail{padding:0;display:flex;flex-direction:column;overflow:hidden}
.detail-scroll{flex:1;overflow-y:auto;padding:16px 20px}
.reply{position:static;margin:0;padding:10px 20px;border-top:1px solid var(--line);
  background:var(--bg2);flex-shrink:0}

/* (4) consecutive tool calls collapse into one line you can open */
.tools-group{border:1px solid var(--line);border-radius:8px;background:var(--bg2);
  border-left:3px solid var(--acc)}
.tools-group>summary{cursor:pointer;padding:7px 11px;font-size:12px;color:var(--fg2);
  user-select:none;list-style:none;display:flex;gap:8px;align-items:center}
.tools-group>summary::-webkit-details-marker{display:none}
.tools-group>summary:hover{color:var(--fg)}
.tools-group>summary .caret{color:var(--fg3);font-size:10px}
.tools-group[open]>summary{border-bottom:1px solid var(--line)}
.tools-group .inner{padding:7px 11px;display:flex;flex-direction:column;gap:6px}
.tools-group .inner pre{margin:0;font-family:var(--mono);font-size:12px;white-space:pre-wrap;
  word-break:break-word;color:var(--fg2)}
.tools-group .last{font-family:var(--mono);font-size:11.5px;color:var(--fg3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}

/* (6) modal breathing room */
dialog{width:min(680px,94vw)}
#modalBody{padding:20px 22px 18px}
#modalBody h2{margin:0 0 14px;font-size:16px}
.field{margin-bottom:15px}
.modal-actions{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cron-modes{margin-bottom:9px}
.cron-next{margin-top:10px;padding:8px 10px;background:var(--bg3);border-radius:7px}

/* (7) the agent editor edits every field, not just the prompt */
.agent-form{display:grid;gap:13px;max-width:760px}
.agent-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.toolbox{display:flex;gap:6px;flex-wrap:wrap}
.toolbox label{display:flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:7px;padding:4px 9px;font-size:12px;cursor:pointer;background:var(--bg2)}
.toolbox label.on{border-color:var(--acc);background:var(--bg3)}
.toolbox input{width:auto}
.editor{min-height:38vh}


/* the agent writes markdown; render it like prose, not like a log line */
.prose{font-size:13.5px;line-height:1.62}
.prose p{margin:0 0 8px}
.prose p:last-child{margin-bottom:0}
.prose h4{margin:12px 0 6px;font-size:13px;font-weight:650;color:var(--fg)}
.prose h4:first-child{margin-top:0}
.prose ul,.prose ol{margin:0 0 8px;padding-left:20px}
.prose li{margin:2px 0}
.prose code{font-family:var(--mono);font-size:12.2px;background:var(--bg3);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.prose pre.code{font-family:var(--mono);font-size:12px;background:var(--bg3);
  border:1px solid var(--line);border-radius:7px;padding:9px 11px;overflow-x:auto;
  margin:8px 0;white-space:pre;line-height:1.5}
.prose pre.code code{background:none;border:0;padding:0}
.prose b{font-weight:650;color:var(--fg)}
.answer.prose{padding:15px 17px}


/* a message typed while the agent is still working */
.ev.queued{border-left:3px solid var(--warn);background:var(--bg3)}
.queued-note{font-size:11.5px;color:var(--warn);padding:6px 20px 0}
.reply.busy input{opacity:.85}

/* the composer: the way in, on the screen rather than behind a button */
.composer{max-width:760px;display:grid;gap:12px;padding:8px 0}
.composer h2{margin:0;font-size:16px}
.composer textarea{min-height:120px}
.crow{display:flex;align-items:center;gap:14px}
.crow .btn{margin-left:auto}
.composer .rolepick .r{padding:8px 11px}

/* the agent writes markdown tables constantly; they arrived as literal pipes */
.prose table{border-collapse:collapse;margin:10px 0;font-size:12.5px;display:block;
  overflow-x:auto;max-width:100%}
.prose th,.prose td{border:1px solid var(--line);padding:5px 9px;text-align:left;
  vertical-align:top}
.prose th{background:var(--bg3);font-weight:600;white-space:nowrap}
.prose tbody tr:nth-child(even){background:var(--bg2)}