/* ═══ Simonit · coding agent · shell styles ═══
 * Uses the gateway theme (--tx, --dm, --tl, etc) so Simonit sits on
 * the same palette as the rest of the SCADA app. Layout is a
 * 4-quadrant grid: tree · editor · agent · output. */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:var(--ff-body);font-size:13px;overflow:hidden;display:flex;flex-direction:column}

.top{padding:10px 16px;background:var(--card);border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex-shrink:0;box-shadow:0 1px 3px var(--sh)}
.top .logo{font-family:var(--ff-display);font-weight:700;font-size:16px}
.top .logo span{font-weight:400;color:var(--dm);font-size:12px;margin-left:4px}
.top .bar{display:flex;gap:6px;align-items:center;margin-left:auto}
.top .back{color:var(--tl);text-decoration:none;font-size:11px;font-family:var(--ff-mono);padding:4px 10px;border-radius:var(--r-sm);border:1px solid transparent}
.top .back:hover{background:var(--tlb);border-color:var(--tl)}

.btn{padding:5px 12px;font-family:var(--ff-mono);font-size:11px;background:var(--inp);color:var(--tx);border:1px solid var(--bd);border-radius:var(--r-sm);cursor:pointer;font-weight:600}
.btn:hover{border-color:var(--tl);color:var(--tl)}
.btn.primary{background:var(--tl);color:#fff;border-color:var(--tl)}
.btn.primary:hover{background:var(--tl2)}
select,input{padding:5px 10px;font-family:var(--ff-mono);font-size:11px;background:var(--inp);color:var(--tx);border:1px solid var(--bd);border-radius:var(--r-sm);outline:none}
select:focus,input:focus{border-color:var(--tl)}

.layout{flex:1;display:grid;grid-template-columns:180px 1fr 320px;grid-template-rows:1fr 220px;grid-template-areas:"tree edit agent" "tree output output";gap:4px;padding:4px;background:var(--bd);min-height:0}
.pane{background:var(--card);overflow:hidden;display:flex;flex-direction:column;min-height:0;min-width:0}
.pane-tree{grid-area:tree}
.pane-edit{grid-area:edit}
.pane-agent{grid-area:agent}
.pane-output{grid-area:output}

#editor{flex:1;min-height:0}

.output-tabs{display:flex;background:var(--bg2);border-bottom:1px solid var(--bd);flex-shrink:0}
.output-tabs button{background:transparent;border:0;padding:6px 14px;font-family:var(--ff-mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dm);cursor:pointer;font-weight:600;border-bottom:2px solid transparent}
.output-tabs button.on{color:var(--tl);border-bottom-color:var(--tl)}
.output-body{flex:1;position:relative;min-height:0}
#term{position:absolute;inset:0;margin:0;padding:10px 14px;overflow:auto;font-family:var(--ff-mono);font-size:11px;color:var(--mono-tx);background:var(--mono-bg);white-space:pre-wrap}
#term .info{color:var(--mono-blue)}
#term .warn{color:var(--mono-amber)}
#term .err {color:var(--mono-red)}
#term .ok  {color:var(--mono-green)}
#term .dim {color:#6e7681}
#preview{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;display:none}
.output-body.preview-on #term    {display:none}
.output-body.preview-on #preview {display:block}

/* Tree — single-file VFS for the MVP, but laid out for future add */
.tree-h{font-family:var(--ff-mono);font-size:10px;letter-spacing:1px;color:var(--ft);padding:8px 10px;text-transform:uppercase;border-bottom:1px solid var(--bd);flex-shrink:0}
.tree-list{flex:1;overflow:auto;padding:4px 0}
.tree-entry{padding:4px 10px;font-family:var(--ff-mono);font-size:11px;color:var(--tx);cursor:pointer;border-left:3px solid transparent;transition:background .1s}
.tree-entry.active{background:var(--tlb);border-left-color:var(--tl);color:var(--tl);font-weight:700}
.tree-entry:hover{background:var(--bg2)}
.tree-actions{padding:8px 10px;border-top:1px solid var(--bd);display:flex;gap:4px;flex-shrink:0}
.tree-actions .btn{flex:1;padding:4px 6px;font-size:10px}

/* Agent pane — Karen-powered code assistant */
.agent-h{font-family:var(--ff-mono);font-size:10px;letter-spacing:1px;color:var(--ft);padding:8px 10px;text-transform:uppercase;border-bottom:1px solid var(--bd);flex-shrink:0;display:flex;justify-content:space-between;align-items:center}
.agent-h .agent-state{font-size:9px;color:var(--dm);text-transform:none;letter-spacing:0}
.agent-log{flex:1;overflow:auto;padding:8px 10px;font-size:11.5px;line-height:1.55;display:flex;flex-direction:column;gap:8px}
.agent-msg{padding:7px 10px;border-radius:var(--r-sm);word-break:break-word}
.agent-msg.u{background:var(--tlb);color:var(--tl);align-self:flex-end;max-width:95%}
.agent-msg.a{background:var(--bg2);color:var(--tx);align-self:flex-start;max-width:100%;font-family:var(--ff-mono);font-size:11px;line-height:1.5}
.agent-msg .hint{color:var(--ft);font-size:10px;margin-top:4px;display:block}
.agent-msg pre{background:var(--mono-bg);color:var(--mono-tx);padding:6px 8px;border-radius:4px;overflow-x:auto;margin:4px 0;font-size:10.5px}
.agent-in{border-top:1px solid var(--bd);padding:6px;display:flex;gap:4px;flex-shrink:0}
.agent-in textarea{flex:1;padding:6px 8px;font-family:var(--ff-mono);font-size:11px;background:var(--inp);color:var(--tx);border:1px solid var(--bd);border-radius:var(--r-sm);outline:none;resize:none;min-height:50px}
.agent-in textarea:focus{border-color:var(--tl)}
.agent-in button{padding:0 10px;font-size:10px}
.agent-empty{color:var(--ft);font-style:italic;text-align:center;padding:20px 10px;font-size:11px}

@media (max-width:900px){
  .layout{grid-template-columns:140px 1fr;grid-template-rows:1fr 180px 180px;grid-template-areas:"tree edit" "agent agent" "output output"}
  .pane-agent{min-height:0}
}