:root{
  --bg:#12141a; --panel:#181b23; --panel-2:#1f2430; --line:#272d3a;
  --text:#e7e9ee; --dim:#9aa3b4; --accent:#7aa2f7; --ok:#7bd88f;
  --warn:#e0af68; --bad:#f7768e; --purple:#bb9af7;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:14px/1.5 "Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column;
}
header{
  display:flex; align-items:center; gap:16px; padding:10px 16px;
  background:var(--panel); border-bottom:1px solid var(--line);
  position:relative;   /* якорь для выпадающей панели слуха */
}
.brand{font-weight:600; font-size:16px}
.brand .sub{display:block; font-weight:400; font-size:11px; color:var(--dim)}
.backend{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim)}
.backend select{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:4px 8px; font:inherit; font-size:12px; max-width:230px;
}
.backend select:focus{outline:none; border-color:var(--accent)}
.backend.cloud select{border-color:var(--purple); color:var(--purple)}
.status{margin-left:14px; font-size:12px; color:var(--dim)}
.status b{color:var(--ok)}
.status b.off{color:var(--bad)}
.digesting{margin-left:12px; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--purple)}
.digesting.hidden{display:none}
.digesting .dot{width:8px; height:8px; border-radius:50%; background:var(--purple);
  animation:digest-pulse 1.2s ease-in-out infinite}
@keyframes digest-pulse{0%,100%{opacity:.25; transform:scale(.8)} 50%{opacity:1; transform:scale(1)}}
.actions{display:flex; gap:8px}
/* кто вошёл */
.who{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--dim);
  padding-left:12px; border-left:1px solid var(--line)}
.who.hidden{display:none}
.who #who-name{color:var(--text); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who button{padding:4px 10px; font-size:12px}
#btn-listen.rec{border-color:var(--bad); color:var(--bad); animation:digest-pulse 1.6s ease-in-out infinite}
.listen-panel{position:absolute; top:52px; right:16px; z-index:20; display:flex; gap:10px;
  align-items:center; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 12px; box-shadow:0 6px 24px rgba(0,0,0,.4)}
.listen-panel.hidden{display:none}
.listen-panel label{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--dim)}
.listen-panel select, .listen-panel input{
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:5px 8px; font:inherit; font-size:12.5px; max-width:280px}
.listen-panel input{width:64px}
button{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:8px; padding:6px 12px; cursor:pointer; font-size:13px;
}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.5; cursor:default}

main{flex:1; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr); min-height:0}
.chat{display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--line)}
.messages{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px}
.msg{max-width:82%; padding:10px 14px; border-radius:12px; white-space:pre-wrap; word-wrap:break-word}
.msg.user{align-self:flex-end; background:#22304d; border:1px solid #2f4370}
.msg.assistant{align-self:flex-start; background:var(--panel); border:1px solid var(--line)}
.msg.system{align-self:center; background:transparent; color:var(--dim); font-size:12px; border:1px dashed var(--line)}
.msg .tasks{margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:12.5px}
.msg .tasks b{color:var(--ok)}
.msg .tasks div{color:var(--dim); margin-top:3px}

/* понимание */
.mind{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:14px}
.mind .when{font-size:11px; color:var(--dim); margin-bottom:8px}
.mind .narrative{margin:0 0 10px; line-height:1.55}
.mind .focus{font-size:13px; color:var(--accent); margin-bottom:8px}
.mind .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin-top:8px}
.mind ul{margin:4px 0 8px; padding-left:18px}
.mind li{margin-bottom:4px}
.mind .decisions li{color:var(--ok)}
.mind .questions li{color:var(--warn)}
#mind-box > .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:14px 0 6px}
.mind-hist{margin:6px 0 0; padding-left:20px; color:var(--dim); font-size:12.5px}
.mind-hist li{margin-bottom:6px}
.mind-hist li:first-child{color:var(--text)}
.mind-hist li .t{display:block; font-size:11px; opacity:.7; margin-top:2px}

/* канонические сущности */
.card.entity .title{font-weight:600}
.card.entity .slot{display:flex; gap:8px; margin-top:5px; font-size:13px}
.card.entity .pred{color:var(--dim); min-width:104px; text-align:right}
.card.entity .val{flex:1}

/* забывание и архив */
.row.forgotten .v{color:var(--dim); text-decoration:line-through; text-decoration-color:var(--line)}
.row.forgotten .k{color:var(--warn)}
.mem-tools{display:flex; gap:8px; margin:6px 0 10px}
.mem-tools input{
  flex:1; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; color:var(--text); font:inherit; font-size:13px;
}
#archive-out .row{cursor:default}
#archive-out .row:hover{border-color:var(--line)}

/* след похода в интернет */
.msg .trace{
  margin-bottom:8px; padding-bottom:7px; border-bottom:1px dashed var(--line);
  font-size:12px; color:var(--dim);
}
.msg .trace .step{display:flex; gap:6px; align-items:baseline; margin-bottom:2px}
.msg .trace .what{color:var(--accent); white-space:nowrap}
.msg .trace .step.bad .what{color:var(--warn)}
.msg .trace .arg{color:var(--text); opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg .trace .note{margin-left:auto; white-space:nowrap; opacity:.75}

/* разметка везде, где текст пишет модель: реплики, заметки, конспекты */
.md{white-space:normal}
.md > :first-child{margin-top:0}
.md > :last-child{margin-bottom:0}
.md p{margin:0 0 8px}
.md h4,.md h5,.md h6{margin:12px 0 6px; font-size:14px; line-height:1.3}
.md h5,.md h6{font-size:13px; color:var(--dim); text-transform:none}
.md ul,.md ol{margin:6px 0 8px; padding-left:22px}
.md li{margin-bottom:3px}
.md li > ul,.md li > ol{margin:3px 0}
.md li p{margin:2px 0}
.md a{color:var(--accent)}
.md hr{border:none; border-top:1px solid var(--line); margin:10px 0}
.md blockquote{
  margin:8px 0; padding:2px 0 2px 12px;
  border-left:3px solid var(--line); color:var(--dim);
}
.md code{
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-family:"Cascadia Mono",Consolas,ui-monospace,monospace; font-size:12.5px;
}
.md pre{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:10px 12px; margin:8px 0; overflow-x:auto;
}
.md pre code{background:none; border:none; padding:0; line-height:1.45}
.md table{
  border-collapse:collapse; margin:8px 0; font-size:13px;
  display:block; max-width:100%; overflow-x:auto;
}
.md th,.md td{border:1px solid var(--line); padding:5px 9px; text-align:left}
.md th{background:var(--panel-2); font-weight:600}

.composer{display:flex; gap:8px; padding:12px 16px 4px; border-top:1px solid var(--line)}
textarea{
  flex:1; resize:none; background:var(--panel); color:var(--text);
  border:1px solid var(--line); border-radius:var(--radius); padding:10px; font:inherit;
}
textarea:focus,input:focus{outline:none; border-color:var(--accent)}
.hint{padding:2px 16px 10px; font-size:11.5px; color:var(--dim)}

.side{display:flex; flex-direction:column; min-height:0; background:var(--bg)}
.tabs{display:flex; border-bottom:1px solid var(--line); background:var(--panel)}
.tab{border:none; border-radius:0; background:transparent; padding:11px 14px; color:var(--dim)}
.tab.active{color:var(--text); box-shadow:inset 0 -2px 0 var(--accent)}
.badge{margin-left:6px; font-size:11px; color:var(--dim)}
.pane{display:none; flex:1; overflow-y:auto; padding:14px}
.pane.active{display:block}

.quick{display:flex; gap:8px; margin-bottom:14px}
.quick input{
  flex:1; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; color:var(--text); font:inherit;
}

/* импорт документов в память */
.import{margin:0 0 14px; border:1px dashed var(--line); border-radius:var(--radius); padding:8px 12px}
.import summary{cursor:pointer; font-size:12.5px; color:var(--dim)}
.import input, .import textarea{
  width:100%; margin-top:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; color:var(--text); font:inherit; font-size:13px}
.import textarea{resize:vertical}
.import button{margin-top:8px}

/* инструменты вкладки задач: поиск + переключатель видов */
.task-tools{display:flex; gap:8px; align-items:center; margin:-6px 0 14px; flex-wrap:wrap}
.task-tools .view-toggle{margin-top:0}
#task-search, #note-search{
  flex:1; min-width:180px; background:var(--panel); border:1px solid var(--line);
  border-radius:20px; padding:6px 12px; color:var(--text); font:inherit; font-size:12.5px;
}
#note-search{display:block; width:100%; margin:-6px 0 14px}
mark.hl{background:#ffd866; color:#1a1c22; border-radius:3px; padding:0 1px}

/* планирование в один клик (вид «План» и «Контроль») */
.plan-btns{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap}
.plan-btns button{padding:2px 9px; font-size:11px; border-radius:20px; color:var(--dim)}
.plan-btns button:hover{color:var(--accent)}

.pill.who{color:var(--accent); border-color:var(--accent)}

.group{margin-bottom:18px}
.group h3{
  margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--dim); display:flex; align-items:center; gap:8px;
}
.group h3 .n{color:var(--text); opacity:.6}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; margin-bottom:8px;
}
.card.fresh{border-color:var(--ok)}
.card .title{cursor:pointer}
.card .title:hover{color:var(--accent)}
.card .meta{display:flex; gap:8px; align-items:center; margin-top:8px; flex-wrap:wrap}
.card select{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:3px 6px; font-size:12px;
}
.pill{font-size:11px; padding:2px 7px; border-radius:20px; border:1px solid var(--line); color:var(--dim)}
.pill.must{color:var(--bad); border-color:var(--bad)}
.pill.should{color:var(--warn); border-color:var(--warn)}
.pill.wont{opacity:.55}
/* дореформенные значения в истории закрытых задач */
.pill.urgent{color:var(--bad); border-color:var(--bad)}
.pill.high{color:var(--warn); border-color:var(--warn)}
.pill.due{color:var(--warn)}
.pill.overdue{color:var(--bad); border-color:var(--bad)}
.pill.src{opacity:.7}

.sum{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px; margin-bottom:12px}
.sum h4{margin:0 0 4px; font-size:14px}
.sum .when{font-size:11px; color:var(--dim); margin-bottom:8px}
.sum ul{margin:4px 0 10px; padding-left:18px}
.sum li{margin-bottom:4px}
.sum .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim)}
.sum .decisions li{color:var(--ok)}
.sum .questions li{color:var(--warn)}

.storage-head p{color:var(--dim); font-size:12.5px; margin-top:0}
.row{
  display:flex; gap:10px; padding:7px 10px; border:1px solid var(--line);
  border-radius:8px; margin-bottom:6px; background:var(--panel); cursor:pointer;
}
.row:hover{border-color:var(--accent)}
.row .k{color:var(--dim); font-size:12px; min-width:92px}
.row .v{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.drawer{
  position:fixed; right:0; top:0; bottom:0; width:min(460px,92vw); background:var(--panel);
  border-left:1px solid var(--line); box-shadow:-16px 0 40px rgba(0,0,0,.45);
  display:flex; flex-direction:column; z-index:20;
}
.drawer.hidden{display:none}
.drawer-head{display:flex; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line)}
.drawer-head span{font-weight:600}
.drawer-head button{margin-left:auto}
#drawer-body{overflow-y:auto; padding:14px}
/* граф связей в «Хранилище» */
.view-toggle{display:flex; gap:6px; margin-top:8px}
.view-toggle button{padding:4px 10px; font-size:12px}
.view-toggle button.active{border-color:var(--accent); color:var(--accent)}
#graph-wrap.hidden, #storage-list.hidden{display:none}
.graph-info{font-size:12px; color:var(--dim); margin:4px 0 8px; min-height:18px}
#graph-box{height:calc(100vh - 240px); min-height:360px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); overflow:hidden}
#graph-box svg{width:100%; height:100%; display:block; cursor:grab}
.gedge{stroke:var(--line); stroke-width:1.2}
.gedge.cause{stroke-dasharray:3 3; opacity:.7}
.gedge.lit{stroke:var(--accent); opacity:1}
.gedge.faded{opacity:.12}
.gnode{cursor:pointer}
.gnode circle{stroke:var(--bg); stroke-width:1.5}
.gnode text{font-size:9px; fill:var(--dim); text-anchor:middle; pointer-events:none}
.gnode.sel circle{stroke:var(--accent); stroke-width:2.5}
.gnode.sel text, .gnode.near text{fill:var(--text)}
.gnode.faded{opacity:.18}

.edit{display:flex; flex-direction:column; gap:10px; margin-bottom:16px;
  padding-bottom:14px; border-bottom:1px solid var(--line)}
.edit .field{display:flex; flex-direction:column; gap:4px}
.edit .field span{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim)}
.edit input, .edit textarea, .edit select{
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:7px 9px; font:inherit; font-size:13px}
.edit input:focus, .edit textarea:focus, .edit select:focus{outline:none; border-color:var(--accent)}
.edit textarea{resize:vertical}
.edit button{align-self:flex-start}

/* связи в карточке: что извлечено из источника / откуда знание */
.links{margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.links .lbl{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.link-row{display:flex; gap:8px; align-items:baseline; margin-bottom:4px; font-size:13px}
.link-row .rel{color:var(--dim); font-size:11.5px; min-width:86px; text-align:right}
.link-row .target{color:var(--accent); cursor:pointer}
.link-row .target:hover{text-decoration:underline}

.hist{margin-bottom:14px}
.hist .p{font-size:12px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em}
.hist ol{margin:6px 0 0; padding-left:20px}
.hist li{margin-bottom:3px}
.hist li .t{color:var(--dim); font-size:11px; margin-left:6px}
.hist li:last-child{color:var(--accent)}
.hist li .val{display:inline-block; vertical-align:top; max-width:calc(100% - 120px)}
.hist li .val > p:only-child{display:inline}

/* общее для новых панелей: шапка с описанием, заголовок секции, таблица в прокрутке */
.pane-head{display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px}
.pane-head p{flex:1 1 220px; color:var(--dim); font-size:12.5px; margin:0}
.pane-head .spinner{flex-basis:100%}
.spinner.hidden{display:none}
.sect{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:18px 0 8px}
.tbl-wrap{overflow-x:auto}
.tbl-wrap table{width:100%; border-collapse:collapse; font-size:12.5px}
.tbl-wrap th{
  text-align:left; font-weight:400; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); padding:4px 8px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl-wrap td{padding:7px 8px; vertical-align:top}
.empty.bad{color:var(--bad)}

/* рутины */
.rt .rt-row td{padding-top:10px; white-space:nowrap}
.rt .rt-row td.name{white-space:normal; min-width:160px}
.rt .rt-row .title{font-weight:600}
.rt .rt-row .sub{color:var(--dim); font-size:11.5px; overflow:hidden; text-overflow:ellipsis;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.rt .rt-row.paused .title{color:var(--dim)}
.rt .rt-row.retired td{opacity:.7}
.st{font-size:11px; padding:2px 8px; border-radius:20px; border:1px solid var(--line); color:var(--dim); white-space:nowrap}
.st.enabled{color:var(--ok); border-color:var(--ok)}
.st.paused{color:var(--warn); border-color:var(--warn)}
.st.retired{opacity:.7}
.rt .rt-actions td{padding:2px 8px 10px; border-bottom:1px solid var(--line)}
.rt .rt-actions button{padding:3px 10px; font-size:11.5px; border-radius:20px; margin:2px 6px 2px 0}
.rt-err{color:var(--warn); font-size:12px; margin-left:4px}
.rt-err:empty{display:none}
.rt-edit{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:8px}
.rt-edit.hidden{display:none}
.rt-edit label{display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--dim)}
.rt-edit input{
  width:130px; background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  border-radius:6px; padding:5px 8px; font:inherit; font-size:12.5px}
.rt-edit input:focus{outline:none; border-color:var(--accent)}
.rt-retired{margin-top:14px}
.rt-retired summary{cursor:pointer; font-size:12.5px; color:var(--dim); margin-bottom:6px}
.rt-form{margin-top:18px; padding:12px; border:1px dashed var(--line); border-radius:var(--radius)}
.rt-form .sect{margin-top:0}
.rt-inline{display:flex; gap:10px; flex-wrap:wrap}
.rt-inline .field{flex:1 1 120px}
.rt-foot{display:flex; gap:10px; align-items:center; flex-wrap:wrap}

/* эволюция */
.ev{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:12px}
.ev .when{font-size:11px; color:var(--dim); margin-bottom:8px}
.ev .stats{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--dim)}
.ev .stat b{color:var(--text)}
.ev .stat b.ok{color:var(--ok)}
.ev .stat b.warn{color:var(--warn)}
.ev .stat b.bad{color:var(--bad)}
.ev .lbl, #schema-box .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim); margin:12px 0 6px}
.ev ul{margin:0; padding-left:18px; font-size:13px}
.ev li{margin-bottom:4px}
.ev .accepted li{color:var(--ok)}
.ev .rejected li{color:var(--dim)}
.ev pre.report{
  margin:0; padding:10px 12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:8px; white-space:pre-wrap; word-wrap:break-word; font-size:12px; line-height:1.45;
  font-family:"Cascadia Mono",Consolas,ui-monospace,monospace;
}
.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{font-size:11.5px; padding:2px 8px; border-radius:20px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); white-space:nowrap}
.chip.learned{border-color:var(--purple); color:var(--purple)}
.learned-row{display:flex; gap:8px; align-items:baseline; margin-bottom:5px; font-size:13px}
.learned-row .ru{color:var(--dim)}
.rules td.name{font-weight:600; white-space:nowrap}
.rules td.ru{color:var(--dim); min-width:120px}
.rules td.def{white-space:nowrap}
.rules code{
  background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 5px;
  font-family:"Cascadia Mono",Consolas,ui-monospace,monospace; font-size:11.5px;
}
.rules .arrow{color:var(--dim)}

.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  background:var(--panel-2); border:1px solid var(--accent); color:var(--text);
  padding:9px 16px; border-radius:20px; font-size:13px; z-index:30;
}
.toast.hidden{display:none}
.empty{color:var(--dim); font-size:13px; padding:8px 0}
.spinner{color:var(--dim); font-size:12px}