:root{
  --ink:#0E1116;
  --panel:#151A22;
  --line:#242C38;
  --text:#C7D0DA;
  --dim:#6C7787;
  --amber:#DFA45C;
  --teal:#4FB0A3;
  --red:#C6614F;
  --r:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--ink);color:var(--text);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}

.wordmark{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;
  letter-spacing:.01em;font-size:34px;color:#EAF0F6}
.wordmark.small{font-size:19px;flex:none}

/* poarta */
.gate{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  background:var(--ink);padding:24px}
.gate.off{display:none}
.gate-box{width:100%;max-width:320px;text-align:center}
.gate-note{color:var(--dim);font-size:13px;margin:10px 0 22px}
.gate input{width:100%;padding:11px 13px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);color:var(--text);
  font-family:"IBM Plex Mono",monospace;font-size:13px}
.gate input:focus{outline:none;border-color:var(--amber)}
.gate button{width:100%;margin-top:10px;padding:11px;background:transparent;
  border:1px solid var(--amber);border-radius:var(--r);color:var(--amber);
  font-family:"IBM Plex Mono",monospace;font-size:13px;cursor:pointer}
.gate button:hover{background:rgba(223,164,92,.09)}
.gate-err{color:var(--red);font-size:12px;margin-top:12px;min-height:16px;
  font-family:"IBM Plex Mono",monospace}

/* schelet */
.hud{display:none;flex-direction:column;height:100dvh;max-height:100dvh;overflow:hidden}
.hud.on{display:flex}

.bar{display:flex;align-items:center;gap:14px;padding:12px 16px;
  border-bottom:1px solid var(--line);flex:none}
.trace{flex:1;height:22px;display:block;min-width:0}
.state{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim);
  letter-spacing:.06em;flex:none}
.state[data-s="thinking"]{color:var(--amber)}
.state[data-s="tool"]{color:var(--teal)}

/* flux */
.stream{flex:1;min-height:0;overflow-y:auto;padding:22px 16px 8px;
  display:flex;flex-direction:column;gap:20px}
.empty{margin:auto;max-width:300px;text-align:center}
.empty-line{color:var(--dim);font-size:14px}

.turn{max-width:680px;width:100%;margin:0 auto}
.turn .who{font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.turn.user .who{color:var(--teal)}
.turn.agent .who{color:var(--amber)}
.turn .body{white-space:pre-wrap;word-wrap:break-word}
.turn.user .body{color:#E4EAF1}

.act{max-width:680px;width:100%;margin:0 auto;border-left:1px solid var(--line);
  padding-left:12px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--dim)}
.act b{color:var(--teal);font-weight:500}
.act .out{display:block;margin-top:4px;white-space:pre-wrap;
  max-height:76px;overflow:hidden;opacity:.62}
.act.err b{color:var(--red)}

/* compunere */
.composer{flex:none;display:flex;gap:8px;align-items:flex-end;padding:12px 16px;
  border-top:1px solid var(--line);max-width:712px;width:100%;margin:0 auto}
.composer textarea{flex:1;resize:none;max-height:160px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  color:var(--text);font:inherit}
.composer textarea:focus{outline:none;border-color:var(--amber)}
.composer button{flex:none;width:40px;height:40px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r);color:var(--amber);
  font-size:17px;cursor:pointer}
.composer button:hover{border-color:var(--amber)}

.rail{flex:none;display:flex;gap:6px;align-items:center;padding:0 16px 12px;
  max-width:712px;width:100%;margin:0 auto}
.chip{background:transparent;border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  padding:4px 9px;cursor:pointer;letter-spacing:.04em}
.chip[data-on="1"]{color:var(--teal);border-color:rgba(79,176,163,.4)}
.chip[data-on="0"]{color:var(--red);border-color:rgba(198,97,79,.45)}
.count{margin-left:auto;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:var(--dim)}

*:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
.stream::-webkit-scrollbar{width:3px}
.stream::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

@media (prefers-reduced-motion:reduce){.trace{opacity:.35}}

/* ---- fisiere atasate ---- */
.tray{
  flex:none;display:flex;flex-wrap:wrap;gap:6px;
  max-width:712px;width:100%;margin:0 auto;padding:0 16px;
}
.tray:empty{display:none}
.tray{padding-top:8px}

.file{
  display:flex;align-items:center;gap:7px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:5px 8px;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--text);max-width:100%;
}
.file .tag{color:var(--teal);flex:none}
.file .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}
.file .sz{color:var(--dim);flex:none}
.file .x{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:14px;line-height:1;padding:0 0 0 2px;flex:none;
}
.file .x:hover{color:var(--red)}
.file.up{opacity:.5}
.file.bad{border-color:rgba(198,97,79,.5)}
.file.bad .tag{color:var(--red)}

#clip{
  flex:none;width:40px;height:40px;background:transparent;
  border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);font-size:19px;line-height:1;cursor:pointer;
}
#clip:hover{color:var(--teal);border-color:var(--teal)}

/* miniaturi in flux */
.turn .shots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.turn .shots .chipfile{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--dim);
  border:1px solid var(--line);border-radius:var(--r);padding:3px 7px;
}

/* ---- voce ---- */
#mic{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--r);
  color:var(--dim);cursor:pointer;transition:all .18s;
}
#mic:hover{color:var(--teal);border-color:var(--teal)}
#mic[data-rec="1"]{
  color:var(--red);border-color:var(--red);
  background:rgba(198,97,79,.10);
  animation:pulse 1.1s ease-in-out infinite;
}
#mic[data-rec="2"]{color:var(--amber);border-color:var(--amber)}
#mic:disabled{opacity:.35;cursor:default}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

.act.voice b{color:var(--amber)}