:root{
  --bg: #060c18;
  --panel: #0b1526;
  --panel-2: #101f38;
  --panel-3: #142a4a;
  --line: #1c3a5e;
  --sky: #7dd3fc;
  --sky-soft: #4fb3e8;
  --sky-dim: #a9dffb;
  --sky-faint: #26558a;
  --danger: #fca5a5;
}
*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--sky-dim); font-family:'Lexend', sans-serif; overflow:hidden; }
button{ font-family:'Lexend', sans-serif; background:var(--panel-3); color:var(--sky); border:1px solid var(--sky-faint); border-radius:6px; padding:8px 14px; cursor:pointer; font-size:0.82rem; }
button:hover{ background:var(--sky-faint); border-color:var(--sky-soft); }
button:active{ transform:translateY(1px); }
input[type="text"]{
  font-family:'Lexend', sans-serif; background:var(--panel-2); color:var(--sky-dim);
  border:1px solid var(--line); border-radius:8px; outline:none; padding:10px 14px;
}
input[type="text"]:focus{ border-color:var(--sky-soft); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--panel); }
::-webkit-scrollbar-thumb{ background:var(--sky-faint); border-radius:6px; }

body{ display:flex; flex-direction:column; }

header{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:56px; padding:0 18px; background:var(--panel); border-bottom:1px solid var(--line);
  flex-shrink:0; flex-wrap:wrap;
}
.brand{ font-weight:700; color:var(--sky); letter-spacing:0.02em; display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.brand .sub{ font-size:0.7rem; font-weight:400; color:var(--sky-soft); opacity:0.8; letter-spacing:0; }
#stats{ font-size:0.72rem; color:var(--sky-soft); opacity:0.85; white-space:nowrap; }
.actions{ display:flex; gap:8px; }
.fileBtn{
  font-size:0.82rem; background:var(--panel-3); color:var(--sky); border:1px solid var(--sky-faint);
  border-radius:6px; padding:8px 14px; cursor:pointer;
}
.fileBtn:hover{ background:var(--sky-faint); }

#chat{
  flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:14px;
}

.msg{ max-width:70%; padding:12px 16px; border-radius:14px; font-size:0.92rem; line-height:1.5; }
.msg.user{ align-self:flex-end; background:var(--sky-faint); color:#eaf6ff; border-bottom-right-radius:4px; }
.msg.ai{ align-self:flex-start; background:var(--panel-2); border:1px solid var(--line); color:var(--sky-dim); border-bottom-left-radius:4px; }
.msg .tag{ display:block; font-size:0.65rem; color:var(--sky-soft); opacity:0.7; margin-top:6px; text-transform:uppercase; letter-spacing:0.05em; }

.teach{ align-self:flex-start; max-width:70%; margin-top:-6px; }
.teach button.link{
  background:none; border:none; padding:0; color:var(--sky-soft); font-size:0.72rem;
  text-decoration:underline; cursor:pointer;
}
.teach .form{ display:flex; gap:8px; margin-top:8px; }
.teach .form input{ flex:1; }

#composer{
  display:flex; gap:10px; padding:16px 18px; background:var(--panel); border-top:1px solid var(--line); flex-shrink:0;
}
#composer input{ flex:1; font-size:0.95rem; }