:root{
  --bg:#0b0f1a;
  --panel:#11162a;
  --accent:#4fd1ff;
  --text:#e6e9f0;
}

*{box-sizing:border-box}
html, body { height:100%; }
body{
  margin:0;
  font-family:system-ui;
  background:var(--bg);
  color:var(--text);
}

/* ===== App Layout ===== */
#app{
  display:flex;
  height:100vh;
  width:100vw;
}

/* ===== Login ===== */
.center{
  height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card{
  width:min(420px,100%);
  background:var(--panel);
  padding:18px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}
.stack input{
  padding:10px;
  border-radius:8px;
  border:1px solid #222;
  background:#0b0f1a;
  color:var(--text);
}
.stack button{
  padding:10px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  cursor:pointer;
  font-weight:600;
}
.row{display:flex;align-items:center;gap:8px}
.muted{opacity:.85}
.small{font-size:12px}

/* ===== Chat View Container (IMPORTANT) ===== */
#chatView{
  display:flex;
  width:100%;
  height:100vh;
}

/* ===== Sidebar ===== */
.sidebar{
  width:260px;
  min-width:260px;
  background:var(--panel);
  padding:16px;
  display:flex;
  flex-direction:column;
}
.sidebar h1{
  margin:0 0 12px 0;
  color:var(--accent);
}
.sidebar button{
  margin-bottom:12px;
  padding:8px;
  background:var(--accent);
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}
.btn-secondary{
  margin-top:10px;
  padding:8px;
  border:none;
  border-radius:8px;
  background:#1a2040;
  color:var(--text);
  cursor:pointer;
}
.me{
  margin:10px 0;
  padding:10px;
  border-radius:10px;
  background:#0b0f1a;
  border:1px solid #222;
  font-size:13px;
  opacity:.9;
}
.sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
  overflow-y:auto;
  flex:1;
}
.sidebar li{
  padding:8px;
  border-radius:6px;
  cursor:pointer;
}
.sidebar li:hover{background:#1a2040}

/* ===== Chat Main ===== */
main.chat{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0; /* IMPORTANT: prevents overflow/collapse */
}

.messages{
  flex:1;
  padding:16px;
  overflow-y:auto;
}

.msg{
  max-width:70%;
  margin-bottom:12px;
  padding:10px;
  border-radius:10px;
  line-height:1.4;
  white-space:pre-wrap;
}
.msg.user{margin-left:auto;background:#1e90ff}
.msg.assistant{margin-right:auto;background:#2a2f55}

/* ===== Input Bar ===== */
.input-bar{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid #222;
  background:rgba(17,22,42,.6);
}
.input-bar input{
  flex:1;
  padding:10px;
  border-radius:8px;
  border:none;
  background:#0b0f1a;
  color:var(--text);
}
.input-bar button{
  padding:10px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  cursor:pointer;
}