/* mini-potato — professional minimalist theme. Single source of tokens. */
:root{
  --bg:#0b0d10; --panel:#12151a; --panel2:#171b22; --line:#232833;
  --text:#e6e9ef; --muted:#8b93a3; --gold:#ffb020; --cyan:#3ad1c8; --pink:#ff5c8a;
  --ok:#39d98a; --err:#ff5c5c; --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px}
#app{display:flex;height:100vh}

/* sidebar */
#sidebar{width:270px;min-width:270px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:14px;gap:8px;overflow:hidden}
.brand{font-weight:700;font-size:18px;margin-bottom:6px}
.brand span{color:var(--gold)}
.side-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-top:10px}
#session-list{overflow-y:auto;max-height:26vh;display:flex;flex-direction:column;gap:4px}
#live-view{flex:1;overflow-y:auto;background:var(--panel2);border:1px solid var(--line);
  border-radius:var(--radius);padding:8px;font-family:var(--mono);font-size:12px;line-height:1.5}
.side-foot{display:flex;flex-direction:column;gap:6px;margin-top:8px}

.sess{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;border:1px solid transparent}
.sess:hover{background:var(--panel2)}
.sess.active{border-color:var(--gold);background:var(--panel2)}
.sess small{color:var(--muted);display:block}

/* main */
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#chat{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
.msg{max-width:820px;width:100%;margin:0 auto;display:flex;gap:12px}
.msg .who{font-size:12px;color:var(--muted);width:64px;flex-shrink:0;text-align:right;padding-top:2px}
.msg .body{flex:1;white-space:pre-wrap;line-height:1.6}
.msg.user .body{color:var(--text)}
.msg.assistant .body{color:var(--text)}
.msg .body code{font-family:var(--mono);background:var(--panel2);padding:1px 5px;border-radius:5px}
.tool-chip{display:inline-block;font-family:var(--mono);font-size:11px;color:var(--cyan);
  border:1px solid var(--line);border-radius:6px;padding:2px 7px;margin:2px 4px 2px 0;background:var(--panel2)}

/* composer */
#composer{display:flex;gap:10px;padding:16px 24px;border-top:1px solid var(--line);
  max-width:868px;width:100%;margin:0 auto}
#input{flex:1;background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;font-family:var(--font);font-size:15px;resize:none;min-height:44px}
#input:focus{outline:none;border-color:var(--gold)}

/* buttons */
.btn-gold{background:var(--gold);color:#141414;border:none;border-radius:var(--radius);
  padding:0 20px;min-height:44px;font-weight:600;cursor:pointer}
.btn-gold:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;min-height:40px;cursor:pointer;font-size:13px;text-align:left}
.btn-ghost:hover{border-color:var(--gold)}

/* live view rows */
.lv{padding:2px 0;border-bottom:1px dotted var(--line)}
.lv .k{color:var(--gold)}
.lv .sub{color:var(--cyan)}
.lv .done{color:var(--ok)}
.lv .err{color:var(--err)}
.swarm-grid{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.sa{font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--line)}
.sa.queued{color:var(--muted)}
.sa.running{color:var(--gold);border-color:var(--gold)}
.sa.done{color:var(--ok);border-color:var(--ok)}
.sa.error{color:var(--err);border-color:var(--err)}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:50}
.modal[hidden]{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;width:420px;max-width:92vw;display:flex;flex-direction:column;gap:8px}
.modal-card h3{margin:0 0 6px}
.modal-card label{font-size:12px;color:var(--muted);margin-top:6px}
.modal-card .sep{border-top:1px solid var(--line);margin:10px 0}
.modal-card input[type=range]{width:100%}
.modal-card input,.modal-card select{background:var(--panel2);color:var(--text);border:1px solid var(--line);
  border-radius:8px;padding:10px;font-size:15px}
.modal-card .row{display:flex;align-items:center;gap:10px;margin-top:8px}
.muted{color:var(--muted);font-size:12px}

@media(max-width:760px){
  #sidebar{position:absolute;z-index:20;height:100%;transform:translateX(-100%);transition:.2s}
  #sidebar.open{transform:none}
}