:root {
  color-scheme: light;
  --bg: #f7f7f8; --panel: #ffffff; --ink: #1d1d20; --muted: #6b6b72;
  --line: #e5e5ea; --me: #2563eb; --me-ink: #ffffff; --bot: #f1f1f4;
  --tool: #eef3ff; --err: #b00020; --accent: #2563eb; --code-bg: #0000000d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15151a; --panel: #1c1c22; --ink: #ececf1; --muted: #9a9aa5;
    --line: #2b2b33; --me: #3b82f6; --me-ink: #ffffff; --bot: #26262e;
    --tool: #1e2742; --err: #ff6b6b; --accent: #60a5fa; --code-bg: #ffffff12;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.6 system-ui, "Segoe UI", Tahoma, sans-serif;
  display: flex; flex-direction: column; height: 100dvh;
}
.bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.bar strong { flex: 1; font-size: 15px; }
.status { font-size: 12px; padding: 2px 10px; border-radius: 999px; }
.status.on  { background: #11884422; color: #12a150; }
.status.off { background: #88111122; color: var(--err); }
.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 13px; text-decoration: none; }
.ghost[hidden] { display: none; }
.site-sel { max-width: 22em; background: var(--panel); direction: ltr; text-align: left; }
.sitebar { display: block; width: 100%; text-align: start; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted); background: var(--panel); border: 0; border-bottom: 1px solid var(--line);
  padding: 4px 16px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sitebar:hover { color: var(--ink); }
.sitebar[hidden] { display: none; }
#siteDlg { width: min(96vw, 820px); max-height: 92vh; }
#siteDlg h4 { margin: 16px 0 6px; font-size: 14px; }
.dom-form { display: grid; gap: 4px; }
.dom-form label { margin: 4px 0; }
.dom-actions { display: flex; gap: 10px; align-items: center; }
.dom-actions button { background: var(--accent); color: #fff; border: 0; border-radius: 9px; padding: 7px 14px; font: inherit; cursor: pointer; }
.ngx-steps { margin: 4px 0 8px; padding-inline-start: 1.4em; font-size: 12.5px; line-height: 1.9; }
.ngx-steps code { font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--code-bg);
  padding: 1px 6px; border-radius: 5px; unicode-bidi: isolate; overflow-wrap: anywhere; }
.ngx-head { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.ngx-conf { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--code-bg);
  padding: 10px 12px; border-radius: 8px; overflow: auto; max-height: 46vh; text-align: left; white-space: pre; margin: 4px 0 0; }
.site-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.site-kv .k { color: var(--muted); }
.site-kv .v { display: flex; gap: 6px; align-items: center; min-width: 0; }
.site-kv .v span { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

.chat { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: min(80%, 680px); padding: 9px 13px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; }
.msg.me  { align-self: flex-end; background: var(--me); color: var(--me-ink); border-bottom-left-radius: 4px; }
.msg.bot { align-self: flex-start; background: var(--bot); border-bottom-right-radius: 4px; }
/* Markdown inside assistant bubbles */
.msg.md { white-space: normal; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .4em 0; }
.md h3, .md h4, .md h5, .md h6 { margin: .8em 0 .3em; line-height: 1.35; }
.md h3 { font-size: 1.15em; } .md h4 { font-size: 1.05em; } .md h5, .md h6 { font-size: 1em; }
.md ul, .md ol { margin: .3em 0; padding-inline-start: 1.4em; }
.md li { margin: .15em 0; }
.md code { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 1px 5px; border-radius: 5px; unicode-bidi: isolate; }
.md pre, .card pre { font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--code-bg); padding: 9px 11px; border-radius: 8px; overflow-x: auto;
  white-space: pre; text-align: left; margin: .4em 0; max-height: 420px; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: .4em 0; padding: .2em .8em; border-inline-start: 3px solid var(--line); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: .8em 0; }
.md a { color: var(--accent); }
.md .tbl { overflow-x: auto; }
.md table { border-collapse: collapse; margin: .4em 0; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 9px; }
.md th { background: var(--code-bg); }

/* Event cards (tools, session, system, denials) */
.card { align-self: stretch; max-width: min(100%, 860px); background: var(--tool);
  border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; }
.card > summary { cursor: pointer; padding: 6px 11px; color: var(--ink); list-style: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.card > summary::-webkit-details-marker { display: none; }
.card[open] > summary { border-bottom: 1px solid var(--line); }
.card > :not(summary) { margin: 8px 11px; }
.card.running > summary::after { content: " ⏳"; }
.card.ok { border-inline-start: 3px solid #12a150; }
.card.failed { border-inline-start: 3px solid var(--err); }
.card.info, .card.sys { background: transparent; color: var(--muted); }
.card.denied { border-inline-start: 3px solid var(--err); }
.card.think { background: transparent; color: var(--muted); font-style: italic; }
.think-body { white-space: pre-wrap; }
.lbl { font-size: 11px; color: var(--muted); margin-top: 6px; }
/* classification card */
.card.cls { align-self: flex-end; max-width: min(100%, 560px); }
.card.warn { border-inline-start: 3px solid #d97706; }
.bars { display: grid; gap: 3px; }
.bar-row { display: grid; grid-template-columns: 11em 1fr 2em; align-items: center; gap: 8px; }
.bn { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt { height: 7px; background: var(--code-bg); border-radius: 4px; overflow: hidden; }
.bf { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.bf.hot { background: var(--err); }
.bv { font: 11.5px ui-monospace, monospace; text-align: end; }
.card.cls { max-width: min(100%, 760px); }
.intents { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.intent { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--bg);
  border-inline-start: 3px solid #12a150; }
.intent.v-restrict { border-inline-start-color: #d97706; }
.intent.v-off_topic, .intent.v-security, .intent.v-content_block { border-inline-start-color: var(--err); }
.intent-h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.intent-t { font-weight: 600; overflow-wrap: anywhere; }
.badge { flex: none; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: #12a15022; color: #12a150; }
.v-restrict .badge { background: #d9770622; color: #d97706; }
.v-off_topic .badge, .v-security .badge, .v-content_block .badge { background: #b0002022; color: var(--err); }
.final { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.final .kv { margin-top: 8px; }
.intents .bar-row { grid-template-columns: 6.5em 1fr 1.6em; }
/* debug cards */
.card.dbg { background: transparent; border-style: dashed; color: var(--muted); font-size: 11.5px; }
.card.dbg > summary { padding: 3px 10px; }
.card.guard { border-color: var(--err); }
body.nodebug .dbg { display: none; }
dialog label.check { display: flex; gap: 8px; align-items: center; color: var(--ink); }
dialog label.check input { width: auto; margin: 0; }
.err-pre { color: var(--err); }
.diff-old { border-inline-start: 3px solid var(--err); }
.diff-new { border-inline-start: 3px solid #12a150; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; overflow-wrap: anywhere; }

.msg.blocked { align-self: flex-start; background: transparent; border: 1px solid var(--err); color: var(--err); }
.msg.err { align-self: center; background: transparent; color: var(--err); font-size: 13px; max-width: 90%; }
.meta { align-self: flex-start; font-size: 11px; color: var(--muted); }
.note { align-self: center; font-size: 12px; color: var(--muted); padding: 2px 10px;
  border: 1px dashed var(--line); border-radius: 999px; }
.sessions { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.session-row { display: flex; gap: 6px; align-items: stretch; }
.session-row .session-item { flex: 1; min-width: 0; }
.session-row.current .session-item { border-color: var(--accent); }
.ghost.icon { padding: 4px 9px; }
.ghost.danger:hover { border-color: var(--err); }
.session-item { text-align: start; background: var(--bg); color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; cursor: pointer; font: inherit; }
.session-item:hover { border-color: var(--accent); }
.session-item.current { border-color: var(--accent); }
.session-item .st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-item .sd { font-size: 11px; color: var(--muted); }

.composer { display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--panel); border-top: 1px solid var(--line); }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font: inherit; background: var(--bg); color: var(--ink); max-height: 160px;
}
.composer button {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: 0 18px; font: inherit; cursor: pointer;
}
.composer button:disabled { opacity: .5; cursor: default; }
.composer button.stop { background: var(--err); }

/* next-prompt suggestion */
.suggest { padding: 6px 16px 0; background: var(--panel); }
.suggest-chip { max-width: 100%; text-align: start; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--bg); color: var(--ink); border: 1px dashed var(--accent); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* event groups (Claude Desktop style) */
.group { align-self: stretch; max-width: min(100%, 860px); border: 1px solid var(--line);
  border-radius: 10px; background: transparent; font-size: 12.5px; }
.group > summary { cursor: pointer; padding: 6px 11px; color: var(--muted); list-style: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.group > summary::-webkit-details-marker { display: none; }
.group > summary::before { content: "▸ "; }
.group[open] > summary::before { content: "▾ "; }
.group[open] > summary { border-bottom: 1px solid var(--line); }
.group.is-running > summary { color: var(--ink); }
.group.has-error { border-inline-start: 3px solid var(--err); }
.group-body { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.group-body > .card { max-width: 100%; }

dialog { border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  color: var(--ink); padding: 18px; width: min(92vw, 420px); }
dialog::backdrop { background: #0006; }
dialog h3 { margin: 0 0 12px; }
dialog label { display: block; margin: 10px 0; font-size: 13px; color: var(--muted); }
dialog input { width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; }
dialog menu { display: flex; justify-content: flex-start; gap: 8px; padding: 0; margin: 14px 0 0; }
dialog menu button { border-radius: 9px; padding: 8px 16px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font: inherit; }
dialog menu button.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }

/* layout: chat column + file manager side panel */
.work { flex: 1; display: flex; min-height: 0; }
.chatcol { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fm { width: 330px; flex: none; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-inline-start: 1px solid var(--line); font-size: 13px; }
.fm[hidden] { display: none; }
.fm-head { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.fm-head strong { flex: 1; font-size: 13px; }
.fm-sub { border-top: 1px solid var(--line); background: var(--bg); }
.fm-x { display: none; }
.fm-crumbs { padding: 6px 10px; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-bottom: 1px solid var(--line); white-space: nowrap; overflow-x: auto; text-align: left; }
.fm-crumbs a { color: var(--accent); cursor: pointer; text-decoration: none; }
.fm-crumbs a:hover { text-decoration: underline; }
.fm-crumbs .sep { color: var(--muted); padding: 0 3px; }
.fm-msg { padding: 6px 10px; font-size: 12px; color: var(--err); border-bottom: 1px solid var(--line); }
.fm-msg.ok { color: #12a150; }
.fm-list { flex: 1 1 55%; overflow-y: auto; min-height: 80px; }
.fm-recent { flex: 1 1 45%; overflow-y: auto; min-height: 80px; }
.fm-row { display: flex; gap: 8px; align-items: center; width: 100%; padding: 5px 10px; border: 0;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; direction: ltr; }
.fm-row:hover { background: var(--bot); }
.fm-row.active { background: var(--tool); }
.fm-row .ic { flex: none; width: 1.3em; text-align: center; }
.fm-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.fm-row .sz { flex: none; font-size: 11px; color: var(--muted); direction: rtl; }
.fm-row.dim { color: var(--muted); cursor: default; }
.fm-ch { display: block; width: 100%; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.fm-ch:hover { background: var(--bot); }
.fm-ch .p { display: block; direction: ltr; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.fm-ch .d { display: flex; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 1px; }
.fm-ch .a { padding: 0 6px; border-radius: 999px; background: var(--code-bg); }
.fm-ch .a.create { color: #12a150; } .fm-ch .a.delete { color: var(--err); } .fm-ch .a.edit, .fm-ch .a.modify { color: #d97706; }
.fm-ch.new { animation: fmflash 1.6s ease-out; }
@keyframes fmflash { from { background: var(--tool); } to { background: transparent; } }

/* file view / edit dialog */
.file-dlg { width: min(96vw, 1100px); height: min(92vh, 900px); padding: 0; }
.file-dlg[open] { display: flex; }
.file-dlg form { display: flex; flex-direction: column; flex: 1; min-height: 0; padding: 14px 16px; gap: 8px; }
.file-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.file-head h3 { margin: 0; font: 600 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.file-note { font-size: 12.5px; padding: 6px 10px; border-radius: 8px; border: 1px solid #d97706; color: #d97706; }
.file-note.err { border-color: var(--err); color: var(--err); }
.file-note.ok { border-color: #12a150; color: #12a150; }
.file-text { flex: 1; min-height: 0; width: 100%; resize: none; tab-size: 2; padding: 10px 12px;
  font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.file-text[readonly] { opacity: .85; }
.file-text[hidden] { display: none; }
.file-img { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(var(--code-bg) 0 25%, transparent 0 50%) 0 0 / 18px 18px; border-radius: 9px; }
.file-img[hidden] { display: none; }
.file-img img { max-width: 100%; max-height: 100%; }
.file-dlg menu { align-items: center; margin: 0; flex-wrap: wrap; }
.file-dlg menu .grow { flex: 1; }
.file-dlg menu button:disabled { opacity: .5; cursor: default; }
.file-dlg menu button.danger { color: var(--err); }

@media (max-width: 900px) {
  .fm { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(100vw, 380px); z-index: 20;
    box-shadow: 0 0 24px #0006; padding-top: env(safe-area-inset-top, 0px); }
  .fm-x { display: inline-block; }
}
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; }
  .bar strong { flex-basis: 100%; }
}
.ghost.on { border-color: var(--accent); color: var(--accent); }
.fm-prog { display: grid; gap: 4px; padding: 6px 10px; font-size: 12px; border-bottom: 1px solid var(--line); }
.fm-prog[hidden] { display: none; }
.fm-prog #fmProgTxt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-bar { height: 5px; background: var(--code-bg); border-radius: 3px; overflow: hidden; }
.fm-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.fm.drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
.fm-msg { white-space: pre-line; }
.file-dlg menu { margin-top: auto; }