:root{
  --bg:#0b0f17; --panel:#131a26; --panel2:#1b2432; --line:#263142;
  --txt:#e7edf5; --muted:#8a97a8; --accent:#5b9dff; --accent2:#3b7ae0;
  --ok:#36d399; --warn:#fbbd23; --err:#f87272; --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:var(--err);font-size:13px;min-height:16px;margin-top:6px}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}

/* LOGIN */
.login{min-height:100dvh;display:grid;place-items:center;padding:20px}
.login-card{
  width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 22px;display:flex;flex-direction:column;gap:10px;
}
.brand{font-size:22px;font-weight:700;letter-spacing:.5px}
.login-card input{
  background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;
}
.login-card input:focus{border-color:var(--accent)}
.login-card button{
  background:var(--accent2);border:none;border-radius:10px;padding:12px;font-weight:600;margin-top:6px;
}

/* APP SHELL */
.app{display:flex;flex-direction:column;height:100dvh}
.topbar{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  padding-top:calc(10px + env(safe-area-inset-top));
  background:var(--panel);border-bottom:1px solid var(--line);
}
.icon{background:transparent;border:none;font-size:20px;line-height:1;padding:6px;border-radius:8px}
.icon:hover{background:var(--panel2)}
.project-sel{
  flex:1;min-width:0;background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;appearance:none;
}
.pill{
  display:flex;align-items:center;gap:7px;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 0 rgba(0,0,0,0)}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--err);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(248,114,114,.5)}100%{box-shadow:0 0 0 8px rgba(248,114,114,0)}}

/* HEALTH PANEL */
.health-panel{
  background:var(--panel);border-bottom:1px solid var(--line);
  padding:14px 12px;max-height:55dvh;overflow:auto;
}
.hp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.hp-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}
.hp-card .k{font-size:12px;color:var(--muted)}
.hp-card .v{font-size:20px;font-weight:700;margin-top:2px}
.bar{height:6px;border-radius:4px;background:#0c1017;overflow:hidden;margin-top:8px}
.bar>span{display:block;height:100%;background:var(--accent)}
.bar.warn>span{background:var(--warn)} .bar.bad>span{background:var(--err)}
.hp-sub{font-size:12px;color:var(--muted);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.5px}
.svc{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:12px;padding:4px 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--line)}
.chip.ok{color:var(--ok)} .chip.bad{color:var(--err);border-color:var(--err)}
.alert{background:rgba(248,114,114,.12);border:1px solid var(--err);color:#ffd7d7;
  border-radius:10px;padding:10px 12px;margin-bottom:10px;font-size:13px}
.proc{font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,monospace}
.proc b{color:var(--txt)}

/* CHAT */
.chat{flex:1;overflow-y:auto;padding:16px 12px;display:flex;flex-direction:column;gap:12px}
.empty-hint{color:var(--muted);text-align:center;margin:auto;max-width:280px}
.msg{max-width:92%;padding:11px 14px;border-radius:14px;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--accent2);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.ai p{margin:0 0 8px} .msg.ai p:last-child{margin:0}
.msg code{background:#0c1017;border-radius:5px;padding:1px 5px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.msg pre{background:#0c1017;border:1px solid var(--line);border-radius:10px;padding:10px;overflow:auto;margin:6px 0}
.msg pre code{background:none;padding:0}
.tool{align-self:flex-start;font-size:12px;color:var(--muted);font-family:ui-monospace,Menlo,monospace;
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:5px 11px;max-width:92%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool b{color:var(--accent)}
.result-note{align-self:center;font-size:12px;color:var(--muted)}
.typing{align-self:flex-start;color:var(--muted);font-size:13px;padding:4px 2px}
.typing span{animation:blink 1.2s infinite}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

/* ATTACH + COMPOSER */
.attach-bar{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-top:1px solid var(--line)}
.att{font-size:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;display:flex;gap:6px;align-items:center}
.att button{background:none;border:none;color:var(--muted)}
.composer{
  display:flex;align-items:flex-end;gap:8px;padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line);
}
#input{
  flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;resize:none;max-height:140px;outline:none;
}
#input:focus{border-color:var(--accent)}
.mode-sel{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:10px 8px;font-size:13px}
.send{background:var(--accent2);border:none;border-radius:50%;width:44px;height:44px;font-size:18px;color:#fff;flex:0 0 auto}
.send:disabled{opacity:.5}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:84px;transform:translate(-50%,16px);
  background:var(--panel2);border:1px solid var(--accent);color:var(--txt);
  padding:10px 16px;border-radius:999px;font-size:13px;z-index:60;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* MODAL */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;padding:18px;z-index:50}
.modal-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.modal-title{font-size:17px;font-weight:700;margin-bottom:14px}
.fld{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted);margin-bottom:12px}
.fld input{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--txt);outline:none}
.fld input:focus{border-color:var(--accent)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.btn-ghost{background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 16px}
.btn-primary{background:var(--accent2);border:none;border-radius:10px;padding:10px 18px;font-weight:600;color:#fff}

@media(min-width:720px){
  .msg,.tool{max-width:680px}
  .health-panel{max-height:none}
  .hp-grid{grid-template-columns:repeat(4,1fr)}
}