/* ── Reset & Base ─────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:       #0b0f19;
  --surface:  #111827;
  --surface2: #1a2233;
  --border:   #1f2a3d;
  --text:     #e2e8f0;
  --text2:    #94a3b8;
  --accent:   #6366f1;
  --accent-h: #818cf8;
  --danger:   #ef4444;
  --user-bg:  #6366f1;
  --bot-bg:   #1e293b;
  --radius:   10px;
  --sidebar-w:260px;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
html,body{height:100%;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.55}
button{font-family:inherit;cursor:pointer}
input,textarea{font-family:inherit}

/* ── Login Screen ────────────────────────────────────── */
#login-screen,#chat-screen{display:none}
#login-screen.active,#chat-screen.active{display:flex}

#login-screen{
  align-items:center;justify-content:center;
  min-height:100vh;
  background:radial-gradient(ellipse at 50% 0%, #1e1b4b 0%, var(--bg) 70%);
}
.login-container{
  width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:2.5rem 2rem 2rem;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.login-brand{text-align:center;margin-bottom:2rem}
.login-brand h1{font-size:1.6rem;font-weight:700;margin:.6rem 0 .2rem;letter-spacing:-.02em}
.login-brand p{color:var(--text2);font-size:.88rem}

/* Logo */
.logo-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,var(--accent),#a78bfa);
  color:#fff;font-weight:700;font-size:1.35rem;
  box-shadow:0 4px 20px rgba(99,102,241,.35);
}
.logo-circle.small{width:34px;height:34px;border-radius:9px;font-size:.9rem}
.logo-circle.large{width:68px;height:68px;border-radius:18px;font-size:1.8rem;margin-bottom:1rem}

/* Form */
.input-group{margin-bottom:1rem}
.input-group label{display:block;font-size:.82rem;font-weight:600;color:var(--text2);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.04em}
.input-group input{
  width:100%;padding:.7rem .9rem;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text);font-size:.95rem;
  transition:border-color .15s,box-shadow .15s;
}
.input-group input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.2)}

.btn-primary{
  width:100%;padding:.75rem;margin-top:.5rem;
  border:none;border-radius:var(--radius);
  background:var(--accent);color:#fff;
  font-size:.95rem;font-weight:600;
  transition:background .15s,transform .1s;
}
.btn-primary:hover{background:var(--accent-h)}
.btn-primary:active{transform:scale(.98)}

.field-error{color:var(--danger);font-size:.84rem;margin-top:.65rem;text-align:center}

/* ── Chat Layout ─────────────────────────────────────── */
#chat-screen{height:100vh}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  padding:1rem;
}
.sidebar-top{display:flex;flex-direction:column;gap:.75rem}
.sidebar-brand{display:flex;align-items:center;gap:.6rem;font-weight:600;font-size:1.05rem}
.sidebar-bottom{padding-top:1rem;border-top:1px solid var(--border)}

/* Chat list */
.sidebar-chats{
  flex:1;overflow-y:auto;
  margin:.75rem -1rem 0;
  padding:0 .5rem;
}
.sidebar-chats::-webkit-scrollbar{width:4px}
.sidebar-chats::-webkit-scrollbar-track{background:transparent}
.sidebar-chats::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

.chat-list-empty{
  color:var(--text2);font-size:.82rem;text-align:center;
  padding:1.5rem .5rem;opacity:.7;
}

.chat-list-item{
  display:flex;align-items:center;gap:.4rem;
  padding:.55rem .65rem;
  border-radius:8px;
  cursor:pointer;
  transition:background .15s;
  margin-bottom:2px;
}
.chat-list-item:hover{background:var(--surface2)}
.chat-list-item.active{background:var(--surface2);border:1px solid var(--border)}

.chat-list-title{
  flex:1;
  font-size:.85rem;
  color:var(--text2);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-list-item.active .chat-list-title,
.chat-list-item:hover .chat-list-title{color:var(--text)}

.chat-list-delete{
  flex-shrink:0;
  width:22px;height:22px;
  border:none;border-radius:5px;
  background:transparent;
  color:var(--text2);
  font-size:1rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity .15s, background .15s, color .15s;
  cursor:pointer;
}
.chat-list-item:hover .chat-list-delete{opacity:1}
.chat-list-delete:hover{background:rgba(239,68,68,.15);color:var(--danger)}

.btn-ghost{
  width:100%;padding:.55rem .75rem;
  background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  color:var(--text2);font-size:.88rem;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-ghost:hover{background:var(--surface2);color:var(--text);border-color:var(--text2)}
.btn-ghost.danger:hover{color:var(--danger);border-color:var(--danger)}

/* Chat Area */
.chat-area{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-header{
  display:flex;align-items:center;gap:.6rem;
  padding:.8rem 1.5rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
}
.chat-header h2{font-size:1rem;font-weight:600}
.badge{
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:6px;
  background:rgba(99,102,241,.15);color:var(--accent-h);
}

/* Messages */
.messages-container{
  flex:1;overflow-y:auto;padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;
  scroll-behavior:smooth;
}
.messages-container::-webkit-scrollbar{width:6px}
.messages-container::-webkit-scrollbar-track{background:transparent}
.messages-container::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.welcome{
  margin:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  opacity:.85;
}
.welcome h2{font-size:1.3rem;font-weight:600}
.welcome p{color:var(--text2);font-size:.92rem}

/* Message Bubbles */
.msg-row{display:flex;gap:.75rem;max-width:80%;animation:fadeUp .25s ease}
.msg-row.user{align-self:flex-end;flex-direction:row-reverse}
.msg-row.assistant{align-self:flex-start}

.msg-avatar{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:#fff;
}
.msg-row.user .msg-avatar{background:var(--user-bg)}
.msg-row.assistant .msg-avatar{background:linear-gradient(135deg,var(--accent),#a78bfa)}

.msg-bubble{
  padding:.75rem 1rem;border-radius:14px;
  font-size:.94rem;line-height:1.6;
  white-space:pre-wrap;word-wrap:break-word;
}
.msg-row.user .msg-bubble{
  background:var(--user-bg);color:#fff;
  border-bottom-right-radius:4px;
}
.msg-row.assistant .msg-bubble{
  white-space:normal;
  background:var(--bot-bg);color:var(--text);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.msg-row.assistant .msg-bubble p{margin:.4em 0}
.msg-row.assistant .msg-bubble p:first-child{margin-top:0}
.msg-row.assistant .msg-bubble p:last-child{margin-bottom:0}
.msg-row.assistant .msg-bubble ul,
.msg-row.assistant .msg-bubble ol{margin:.4em 0;padding-left:1.4em}
.msg-row.assistant .msg-bubble code{background:rgba(255,255,255,.07);padding:.1em .3em;border-radius:4px;font-size:.88em}
.msg-row.assistant .msg-bubble pre{background:rgba(0,0,0,.2);padding:.6em .8em;border-radius:6px;overflow-x:auto;margin:.5em 0}
.msg-row.assistant .msg-bubble pre code{background:none;padding:0}

/* Typing indicator */
.typing-dots{display:inline-flex;gap:4px;padding:4px 0}
.typing-dots span{
  width:7px;height:7px;border-radius:50%;background:var(--text2);
  animation:blink 1.4s infinite both;
}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}

/* Composer */
.composer{
  padding:.75rem 1.5rem 1rem;
  border-top:1px solid var(--border);
  background:var(--surface);
}
.composer-inner{
  display:flex;align-items:flex-end;gap:.5rem;
  background:var(--bg);border:1px solid var(--border);border-radius:14px;
  padding:.5rem .65rem .5rem 1rem;
  transition:border-color .15s;
}
.composer-inner:focus-within{border-color:var(--accent)}

#message-input{
  flex:1;background:transparent;border:none;color:var(--text);
  font-size:.95rem;line-height:1.5;resize:none;
  max-height:150px;padding:.25rem 0;
}
#message-input:focus{outline:none}
#message-input::placeholder{color:var(--text2)}

#send-btn{
  width:36px;height:36px;border:none;border-radius:10px;
  background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .15s,opacity .15s,transform .1s;
}
#send-btn:hover{background:var(--accent-h)}
#send-btn:active{transform:scale(.92)}
#send-btn:disabled{opacity:.35;cursor:not-allowed}

/* ── Animations ──────────────────────────────────────── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes blink{
  0%,80%,100%{opacity:.25}
  40%{opacity:1}
}

/* ── Responsive ──────────────────────────────────────── */
@media(max-width:768px){
  .sidebar{display:none}
  .chat-header{padding:.7rem 1rem}
  .messages-container{padding:1rem}
  .composer{padding:.6rem 1rem .75rem}
  .msg-row{max-width:92%}
}