:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --border:#1f2937;
  --text:#e5e7eb;
  --accent:#38bdf8;
}

*{ box-sizing:border-box }

body{
  margin:0;
  height:100vh;
  display:flex;
  font-family:system-ui, sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#0b1020,#11183a);
}

/* ===== SIDEBAR ===== */

#sidebar{
  width:260px;
  background:#020617;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
}

#newChat{
  padding:14px;
  margin:12px;
  border:none;
  background:#111827;
  color:white;
  border-radius:8px;
  cursor:pointer;
}

#convos{
  flex:1;
  overflow:auto;
  padding:8px;
}

.convo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:4px;
  background:#020617;
}

.convo:hover{ background:#111827 }

.convo button{
  background:none;
  border:none;
  color:#888;
  cursor:pointer;
  font-size:14px;
}

.convo button:hover{ color:#f87171 }

/* ===== MAIN LAYOUT ===== */

#main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
}

#chatWrap{
  width:100%;
  max-width:760px;
  flex:1;
  display:flex;
  flex-direction:column;
}

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

/* ===== MESSAGE WRAPPER ===== */

.msg-wrap{
  display:flex;
  flex-direction:column;
  max-width:75%;
  margin:10px 0;
}

.msg-wrap.user{ align-self:flex-end }
.msg-wrap.bot{  align-self:flex-start }

/* ===== CHAT BUBBLES ===== */

.msg{
  padding:12px 16px;
  border-radius:18px;
  line-height:1.5;
  word-wrap:break-word;
  background:#1f2937;
  color:var(--text);
}

/* USER */

.msg-wrap.user .msg{
  background:#2563eb;
  color:white;
  border-bottom-right-radius:6px;
}

/* BOT */

.msg-wrap.bot .msg{
  border-bottom-left-radius:6px;
}

/* ===== DOTS (⋯) ===== */

.msg-dots{
  font-size:18px;
  color:#9ca3af;
  cursor:pointer;
  width:fit-content;
  margin-top:3px;
  opacity:0;
  transition:opacity .15s ease;
  user-select:none;
}

.msg-wrap:hover .msg-dots{
  opacity:1;
}

/* ===== EDIT BOX ===== */

.edit-box{
  width:100%;
  background:#020617;
  color:white;
  border:1px solid #374151;
  border-radius:12px;
  padding:10px;
  font-family:inherit;
  resize:vertical;
}

/* ===== INPUT ===== */

#inputBar{
  width:100%;
  max-width:760px;
  display:flex;
  align-items:flex-end;   /* ⭐ viktigt */
  padding:16px;
  border-top:1px solid var(--border);
  background:var(--panel);
  gap:10px;
}

#input{
  flex:1;
  padding:12px;
  border-radius:12px;
  border:none;
  background:#020617;
  color:white;
  font-family:inherit;
  font-size:15px;
  resize:none;
  outline:none;
  line-height:1.4;
  align-items: flex-end;

  min-height:44px;
  max-height:220px;
  overflow-y:auto;
}

#send{
  margin-left:10px;
  padding:12px 18px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:black;
  font-weight:bold;
  cursor:pointer;
}

#stop{
  margin-left:10px;
  padding:12px 18px;
  border:none;
  border-radius:8px;
  background:#ef4444;
  color:white;
  font-weight:bold;
  cursor:pointer;
}

/* ===== TYPING INDICATOR ===== */

.typing{
  display:inline-flex;
  align-items:center;
  gap:6px;
  opacity:.9;
  font-style:italic;
}

.dots{
  display:inline-flex;
  gap:4px;
}

.dots span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#9ca3af;
  opacity:.3;
  animation:blink 1.4s infinite;
}

.dots span:nth-child(2){ animation-delay:.2s }
.dots span:nth-child(3){ animation-delay:.4s }

@keyframes blink{
  0%,80%,100%{ opacity:.2; transform:scale(.8) }
  40%{ opacity:1; transform:scale(1.2) }
}

/* ===== MARKDOWN / CODE ===== */

.msg p{ margin:0 0 12px }

.msg ul,
.msg ol{
  margin:0 0 12px;
  padding-left:22px;
}

.msg code{
  background:#111827;
  padding:2px 6px;
  border-radius:4px;
  font-family:monospace;
}

.msg pre{
  background:#020617;
  padding:14px;
  border-radius:10px;
  overflow:auto;
  margin:12px 0;
  border:1px solid #1f2937;
}

.msg pre code{
  background:none;
  padding:0;
  font-size:0.9rem;
}

/* ===== COPY BUTTON ===== */

.msg pre{ position:relative }

.copy-btn{
  position:absolute;
  top:8px;
  right:8px;
  background:#111827;
  border:1px solid #374151;
  color:#e5e7eb;
  padding:4px 8px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  opacity:.8;
}

.copy-btn:hover{
  opacity:1;
  background:#1f2937;
}

/* ===== SCROLLBAR ===== */

#chat::-webkit-scrollbar{ width:10px }

#chat::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.15);
  border-radius:999px;
}

/* ===== SETTINGS MODAL ===== */

#settingsModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:999;
}

#settingsModal.hidden{
  display:none;
}

/* ===== PANEL ===== */

#settingsBox{
  width:100%;
  max-width:520px;
  max-height:90vh;

  display:flex;
  flex-direction:column;

  background:#020617;
  border:1px solid #1f2937;
  border-radius:14px;
  overflow:hidden;
}

/* ===== HEADER ===== */

.settings-header{
  padding:18px 22px;
  border-bottom:1px solid #1f2937;
  font-size:18px;
  font-weight:600;
  background:#020617;
  position:sticky;
  top:0;
  z-index:1;
}

/* ===== SCROLL AREA ===== */

.settings-body{
  padding:18px 22px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ===== FOOTER ===== */

.settings-footer{
  padding:14px 22px;
  border-top:1px solid #1f2937;
  background:#020617;
  position:sticky;
  bottom:0;
}

/* ===== INPUTS ===== */

#settingsBox label{
  font-size:13px;
  opacity:.8;
}

#settingsBox input,
#settingsBox textarea,
#settingsBox select{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:none;
  background:#111827;
  color:white;
  font-family:inherit;
}

#settingsBox textarea{
  min-height:120px;
  resize:vertical;
}

/* ===== BUTTON ===== */

.settings-footer button{
  width:100%;
  padding:12px;
  border:none;
  border-radius:10px;
  background:#2563eb;
  color:white;
  font-weight:600;
  cursor:pointer;
}

#settingsBox{
  backdrop-filter: blur(12px);
  background: rgba(2,6,23,0.85);
}

/* ===== TAB BAR ===== */

.settings-tabs{
  display:flex;
  border-bottom:1px solid #1f2937;
}

.tab{
  flex:1;
  padding:12px;
  background:none;
  border:none;
  color:#9ca3af;
  cursor:pointer;
  font-weight:600;
}

.tab:hover{
  background:#111827;
}

.tab.active{
  color:white;
  border-bottom:2px solid #38bdf8;
}

/* ===== TAB CONTENT ===== */

.tab-content{
  display:none;
  flex-direction:column;
  gap:16px;
}

.tab-content.active{
  display:flex;
}

/* ===== RESET BUTTON ===== */

.settings-footer{
  display:flex;
  gap:10px;
}

.settings-footer button{
  flex:1;
}

.danger{
  background:#7f1d1d;
}

.danger:hover{
  background:#991b1b;
}