/* ============================================================
   NexusAI — Premium UI Stylesheet
   Theme: Modern Grey (No Blue) | Light & Dark Mode
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
  --font:           'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sidebar-w:      260px;
  --topbar-h:       56px;
  --input-max:      768px;
  --radius:         12px;
  --radius-sm:      8px;
  --radius-lg:      16px;
  --transition:     0.2s ease;
  --shadow:         0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md:      0 4px 12px rgba(0,0,0,.15);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.2);
}

/* ── Light Theme ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:     #FFFFFF;
  --bg-secondary:   #F7F7F8;
  --bg-sidebar:     #F0F0F0;
  --bg-hover:       #E8E8E8;
  --bg-active:      #E0E0E0;
  --bg-input:       #FFFFFF;
  --bg-card:        #FFFFFF;
  --bg-code:        #F4F4F5;
  --text-primary:   #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-muted:     #9B9B9B;
  --border:         #E5E5E5;
  --border-input:   #D4D4D4;
  --accent:         #10A37F;
  --accent-hover:   #0E8F6F;
  --accent-light:   rgba(16,163,127,.12);
  --user-bubble:    #1A1A1A;
  --user-text:      #FFFFFF;
  --ai-bubble:      transparent;
  --ai-text:        #1A1A1A;
  --scrollbar:      #C9C9C9;
  --code-header:    #E4E4E7;
}

/* ── Dark Theme ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-primary:     #212121;
  --bg-secondary:   #2F2F2F;
  --bg-sidebar:     #171717;
  --bg-hover:       #3A3A3A;
  --bg-active:      #404040;
  --bg-input:       #2F2F2F;
  --bg-card:        #2A2A2A;
  --bg-code:        #1E1E1E;
  --text-primary:   #ECECEC;
  --text-secondary: #A0A0A0;
  --text-muted:     #6E6E6E;
  --border:         #3A3A3A;
  --border-input:   #4A4A4A;
  --accent:         #10A37F;
  --accent-hover:   #12B48E;
  --accent-light:   rgba(16,163,127,.15);
  --user-bubble:    #3A3A3A;
  --user-text:      #ECECEC;
  --ai-bubble:      transparent;
  --ai-text:        #ECECEC;
  --scrollbar:      #4A4A4A;
  --code-header:    #2A2A2A;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family:    var(--font);
  background:     var(--bg-primary);
  color:          var(--text-primary);
  line-height:    1.6;
  min-height:     100vh;
  overflow:       hidden;
  transition:     background var(--transition), color var(--transition);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

svg { flex-shrink: 0; }

::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--scrollbar); border-radius: 10px; }

/* ── Layout ──────────────────────────────────────────────── */
body:not(.auth-page):not(.settings-page) {
  display: flex;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width:          var(--sidebar-w);
  min-width:      var(--sidebar-w);
  height:         100vh;
  background:     var(--bg-sidebar);
  border-right:   1px solid var(--border);
  display:        flex;
  flex-direction: column;
  position:       relative;
  z-index:        100;
  transition:     transform 0.3s cubic-bezier(.4,0,.2,1),
                  background var(--transition);
  overflow:       hidden;
}

.sidebar-top {
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  padding:        16px 14px 12px;
  border-bottom:  1px solid var(--border);
}

.sidebar-logo {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-weight: 700;
  font-size:   1.05rem;
  color:       var(--text-primary);
}

.logo-icon {
  color:       var(--accent);
  font-size:   1.3rem;
  line-height: 1;
}

.sidebar-close {
  display:         none;
  width:           32px;
  height:          32px;
  border:          none;
  background:      transparent;
  color:           var(--text-secondary);
  cursor:          pointer;
  border-radius:   var(--radius-sm);
  align-items:     center;
  justify-content: center;
  padding:         0;
  transition:      background var(--transition);
}
.sidebar-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-close svg   { width: 18px; height: 18px; }

/* New Chat Button */
.sidebar-new-chat {
  display:         flex;
  align-items:     center;
  gap:             10px;
  margin:          10px 10px 6px;
  padding:         9px 14px;
  border:          1px solid var(--border);
  border-radius:   var(--radius-sm);
  background:      transparent;
  color:           var(--text-primary);
  font-family:     var(--font);
  font-size:       .875rem;
  font-weight:     500;
  cursor:          pointer;
  transition:      background var(--transition), border-color var(--transition);
  white-space:     nowrap;
  overflow:        hidden;
}
.sidebar-new-chat:hover { background: var(--bg-hover); border-color: var(--accent); }
.sidebar-new-chat svg   { width: 16px; height: 16px; color: var(--accent); }

/* Search */
.sidebar-search {
  position:    relative;
  margin:      6px 10px;
}
.sidebar-search .search-icon {
  position:    absolute;
  left:        10px;
  top:         50%;
  transform:   translateY(-50%);
  width:       15px;
  height:      15px;
  color:       var(--text-muted);
  pointer-events: none;
}
.sidebar-search input {
  width:         100%;
  padding:       7px 10px 7px 32px;
  background:    var(--bg-hover);
  border:        1px solid transparent;
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-family:   var(--font);
  font-size:     .8125rem;
  outline:       none;
  transition:    border-color var(--transition), background var(--transition);
}
.sidebar-search input:focus {
  border-color: var(--accent);
  background:   var(--bg-primary);
}
.sidebar-search input::placeholder { color: var(--text-muted); }

/* Nav Items */
.sidebar-nav {
  padding:    4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.nav-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         8px 10px;
  border-radius:   var(--radius-sm);
  color:           var(--text-secondary);
  font-size:       .875rem;
  font-weight:     400;
  text-decoration: none;
  transition:      background var(--transition), color var(--transition);
}
.nav-item:hover        { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.nav-item--coming      { opacity: .6; cursor: default; }
.nav-item--coming:hover{ background: transparent; color: var(--text-secondary); }
.nav-item svg          { width: 16px; height: 16px; }
.badge {
  margin-left: auto;
  background:  var(--bg-hover);
  border:      1px solid var(--border);
  color:       var(--text-muted);
  font-size:   .7rem;
  font-weight: 600;
  padding:     1px 6px;
  border-radius: 20px;
  letter-spacing: .03em;
}

/* Chat History */
.sidebar-history {
  flex:        1;
  overflow-y:  auto;
  padding:     4px 6px;
  min-height:  0;
}
.history-label {
  font-size:      .7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--text-muted);
  padding:        8px 10px 4px;
}
.chat-list {}

/* Date group */
.chat-group-label {
  font-size:   .7rem;
  font-weight: 600;
  color:       var(--text-muted);
  padding:     8px 10px 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Chat item */
.chat-item {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         7px 10px;
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  transition:      background var(--transition);
  position:        relative;
  user-select:     none;
}
.chat-item:hover          { background: var(--bg-hover); }
.chat-item.active         { background: var(--bg-active); }
.chat-item .chat-item-icon { color: var(--text-muted); flex-shrink: 0; }
.chat-item .chat-item-icon svg { width: 14px; height: 14px; }
.chat-item-title {
  font-size:       .8125rem;
  color:           var(--text-primary);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
  flex:            1;
}
.chat-item:hover .chat-item-actions { opacity: 1; }
.chat-item-actions {
  display:    flex;
  gap:        2px;
  opacity:    0;
  transition: opacity var(--transition);
}
.chat-action-btn {
  width:       24px;
  height:      24px;
  border:      none;
  background:  transparent;
  color:       var(--text-secondary);
  cursor:      pointer;
  border-radius: 4px;
  display:     flex;
  align-items: center;
  justify-content: center;
  padding:     0;
  transition:  background var(--transition), color var(--transition);
}
.chat-action-btn:hover     { background: var(--bg-active); color: var(--text-primary); }
.chat-action-btn.del:hover { color: #ef4444; }
.chat-action-btn svg       { width: 12px; height: 12px; }

/* Skeleton */
.chat-list-loading { padding: 8px 10px; }
.skeleton-line {
  height: 12px; background: var(--bg-hover);
  border-radius: 6px; margin: 10px 0;
  animation: skeleton 1.5s infinite ease-in-out;
}
.skeleton-line.short { width: 60%; }
@keyframes skeleton {
  0%,100%{ opacity:.5 } 50%{ opacity:1 }
}

/* Sidebar Bottom */
.sidebar-bottom {
  padding:      10px;
  border-top:   1px solid var(--border);
  background:   var(--bg-sidebar);
}
.user-profile-card {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      8px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.user-avatar {
  width:           34px;
  height:          34px;
  border-radius:   50%;
  background:      var(--accent);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       .9rem;
  flex-shrink:     0;
}
.user-info {
  display:       flex;
  flex-direction: column;
  min-width:     0;
}
.user-name  { font-size:.8125rem; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-email { font-size:.7rem; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.sidebar-bottom-actions { display: flex; flex-direction: column; gap: 2px; }
.bottom-action-btn {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         8px 10px;
  border-radius:   var(--radius-sm);
  color:           var(--text-secondary);
  font-size:       .8125rem;
  font-weight:     400;
  text-decoration: none;
  transition:      background var(--transition), color var(--transition);
  cursor:          pointer;
  border:          none;
  background:      transparent;
  font-family:     var(--font);
  width:           100%;
  text-align:      left;
}
.bottom-action-btn:hover  { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.bottom-action-btn svg    { width: 16px; height: 16px; }
.logout-btn:hover         { color: #ef4444 !important; }

/* ── Main Content ────────────────────────────────────────── */
.main-content {
  flex:           1;
  height:         100vh;
  display:        flex;
  flex-direction: column;
  min-width:      0;
  overflow:       hidden;
  background:     var(--bg-primary);
}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar {
  height:          var(--topbar-h);
  display:         flex;
  align-items:     center;
  padding:         0 16px;
  border-bottom:   1px solid var(--border);
  gap:             12px;
  flex-shrink:     0;
  background:      var(--bg-primary);
  position:        relative;
  z-index:         10;
}
.topbar-menu-btn {
  width:           36px;
  height:          36px;
  border:          none;
  background:      transparent;
  color:           var(--text-secondary);
  cursor:          pointer;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  transition:      background var(--transition), color var(--transition);
  flex-shrink:     0;
}
.topbar-menu-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.topbar-menu-btn svg   { width: 20px; height: 20px; }

.topbar-title {
  font-size:       .9375rem;
  font-weight:     500;
  color:           var(--text-primary);
  flex:            1;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.topbar-actions { display: flex; align-items: center; gap: 8px; }

/* Theme Toggle */
.theme-btn {
  width:           36px;
  height:          36px;
  border:          none;
  background:      transparent;
  color:           var(--text-secondary);
  cursor:          pointer;
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       1.1rem;
  transition:      background var(--transition), color var(--transition);
}
.theme-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: none;  }
[data-theme="light"] .icon-sun  { display: none;  }
[data-theme="light"] .icon-moon { display: block; }

/* ── Chat Wrapper ────────────────────────────────────────── */
.chat-wrapper {
  flex:            1;
  overflow-y:      auto;
  padding:         0;
  position:        relative;
}

/* ── Welcome Screen ──────────────────────────────────────── */
.welcome-screen {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  min-height:      calc(100vh - var(--topbar-h) - 120px);
  padding:         40px 20px;
  text-align:      center;
  gap:             28px;
}
.welcome-icon {
  font-size:   3rem;
  color:       var(--accent);
  line-height: 1;
  margin-bottom: 4px;
  display:     inline-block;
  animation:   pulse 3s infinite ease-in-out;
}
@keyframes pulse {
  0%,100%{ transform: scale(1); opacity: 1; }
  50%    { transform: scale(1.08); opacity: .8; }
}
.welcome-screen h2 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); }
.welcome-screen p  { font-size: .9375rem; color: var(--text-secondary); max-width: 400px; }

.welcome-suggestions {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  justify-content: center;
  max-width: 620px;
}
.suggestion-chip {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 16px;
  background:    var(--bg-secondary);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  color:         var(--text-primary);
  font-size:     .8125rem;
  font-family:   var(--font);
  cursor:        pointer;
  transition:    background var(--transition), border-color var(--transition), transform .15s;
}
.suggestion-chip:hover {
  background:     var(--bg-hover);
  border-color:   var(--accent);
  transform:      translateY(-1px);
}

/* ── Messages ────────────────────────────────────────────── */
.messages-container {
  padding:     24px 0 12px;
}
.messages-list {
  max-width:   var(--input-max);
  margin:      0 auto;
  padding:     0 20px;
  display:     flex;
  flex-direction: column;
  gap:         4px;
}

/* Message row */
.message-row {
  display:         flex;
  gap:             14px;
  padding:         8px 0;
  animation:       msgIn .25s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.message-row.user { justify-content: flex-end; }
.message-row.ai   { justify-content: flex-start; }

/* Avatar */
.msg-avatar {
  width:       32px;
  height:      32px;
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   .75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top:  4px;
}
.msg-avatar.user-av { background: var(--accent); color: #fff; order: 2; }
.msg-avatar.ai-av   { background: #2D2D2D; color: var(--accent); font-size: 1rem; }
[data-theme="light"] .msg-avatar.ai-av { background: #E8E8E8; }

/* Bubble */
.msg-bubble {
  max-width:     75%;
  padding:       10px 14px;
  border-radius: var(--radius);
  font-size:     .9375rem;
  line-height:   1.65;
  position:      relative;
}

.message-row.user .msg-bubble {
  background:    var(--user-bubble);
  color:         var(--user-text);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  order:         1;
}

.message-row.ai .msg-bubble {
  background:    var(--ai-bubble);
  color:         var(--ai-text);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
  padding-left:  0;
}

/* Markdown inside bubbles */
.msg-bubble h1,.msg-bubble h2,.msg-bubble h3 { margin: .75rem 0 .4rem; font-weight: 600; }
.msg-bubble h1 { font-size: 1.2rem; }
.msg-bubble h2 { font-size: 1.05rem; }
.msg-bubble h3 { font-size: .95rem; }
.msg-bubble p  { margin: .35rem 0; }
.msg-bubble ul,.msg-bubble ol { padding-left: 1.4rem; margin: .35rem 0; }
.msg-bubble li { margin: .2rem 0; }
.msg-bubble strong { font-weight: 600; }
.msg-bubble em { font-style: italic; }
.msg-bubble blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: .5rem 0;
  color: var(--text-secondary);
}
.msg-bubble a { color: var(--accent); }
.msg-bubble table { width: 100%; border-collapse: collapse; margin: .5rem 0; font-size: .875rem; }
.msg-bubble th,.msg-bubble td { border: 1px solid var(--border); padding: 6px 10px; }
.msg-bubble th { background: var(--bg-hover); font-weight: 600; }
.msg-bubble hr { border: none; border-top: 1px solid var(--border); margin: .75rem 0; }

/* Inline code */
.msg-bubble code:not(.hljs) {
  background:    var(--bg-code);
  padding:       1px 5px;
  border-radius: 4px;
  font-size:     .85em;
  font-family:   'Courier New', Courier, monospace;
}

/* Code block */
.msg-bubble pre {
  margin:        .5rem 0;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  border:        1px solid var(--border);
}
.code-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         6px 12px;
  background:      var(--code-header);
  border-bottom:   1px solid var(--border);
  font-size:       .75rem;
  color:           var(--text-muted);
}
.copy-code-btn {
  background:  transparent;
  border:      none;
  color:       var(--text-secondary);
  cursor:      pointer;
  font-size:   .75rem;
  font-family: var(--font);
  padding:     3px 8px;
  border-radius: 4px;
  transition:  background var(--transition), color var(--transition);
}
.copy-code-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.msg-bubble pre code { display: block; padding: 14px; overflow-x: auto; font-size: .85rem; line-height: 1.6; }
.msg-bubble pre code.hljs { background: var(--bg-code) !important; }

/* Message actions (copy etc) */
.msg-actions {
  display:    flex;
  gap:        6px;
  margin-top: 6px;
  opacity:    0;
  transition: opacity var(--transition);
}
.message-row:hover .msg-actions { opacity: 1; }
.msg-action-btn {
  background:  transparent;
  border:      none;
  color:       var(--text-muted);
  cursor:      pointer;
  font-size:   .7rem;
  padding:     3px 6px;
  border-radius: 4px;
  display:     flex;
  align-items: center;
  gap:         4px;
  font-family: var(--font);
  transition:  background var(--transition), color var(--transition);
}
.msg-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.msg-action-btn svg   { width: 12px; height: 12px; }

/* Typing indicator */
.typing-row { padding: 8px 0; }
.typing-bubble {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       12px 4px;
}
.typing-dot {
  width:       7px;
  height:      7px;
  background:  var(--text-muted);
  border-radius: 50%;
  animation:   typingDot 1.3s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%,80%,100% { transform: scale(1); opacity: .5; }
  40%         { transform: scale(1.3); opacity: 1; }
}

/* ── Input Area ──────────────────────────────────────────── */
.input-area {
  flex-shrink:  0;
  padding:      10px 20px 16px;
  background:   var(--bg-primary);
  position:     relative;
}
.input-area::before {
  content: '';
  position: absolute;
  top: -20px; left: 0; right: 0; height: 20px;
  background: linear-gradient(to bottom, transparent, var(--bg-primary));
  pointer-events: none;
}

.input-container {
  max-width:  var(--input-max);
  margin:     0 auto;
  display:    flex;
  flex-direction: column;
  gap:        6px;
}

.input-box {
  display:       flex;
  align-items:   flex-end;
  gap:           10px;
  background:    var(--bg-input);
  border:        1.5px solid var(--border-input);
  border-radius: var(--radius-lg);
  padding:       10px 10px 10px 16px;
  transition:    border-color var(--transition), box-shadow var(--transition);
}
.input-box:focus-within {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-light);
}

.input-box textarea {
  flex:          1;
  border:        none;
  background:    transparent;
  color:         var(--text-primary);
  font-family:   var(--font);
  font-size:     .9375rem;
  line-height:   1.5;
  resize:        none;
  outline:       none;
  max-height:    200px;
  min-height:    24px;
  overflow-y:    auto;
}
.input-box textarea::placeholder { color: var(--text-muted); }

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

.input-hint {
  font-size:   .7rem;
  color:       var(--text-muted);
  text-align:  center;
  padding:     2px 0;
}

/* ── Context Menu ────────────────────────────────────────── */
.context-menu {
  position:      fixed;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow:    var(--shadow-md);
  z-index:       1000;
  min-width:     150px;
  padding:       4px;
  display:       none;
  animation:     ctxIn .15s ease;
}
@keyframes ctxIn {
  from { opacity:0; transform: scale(.96); }
  to   { opacity:1; transform: scale(1); }
}
.ctx-item {
  display:       flex;
  align-items:   center;
  gap:           10px;
  width:         100%;
  padding:       8px 12px;
  background:    transparent;
  border:        none;
  color:         var(--text-primary);
  font-size:     .875rem;
  font-family:   var(--font);
  cursor:        pointer;
  border-radius: 4px;
  transition:    background var(--transition);
}
.ctx-item:hover   { background: var(--bg-hover); }
.ctx-delete:hover { color: #ef4444; }
.ctx-item svg     { width: 14px; height: 14px; }

/* Overlay for mobile */
.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgba(0,0,0,.5);
  z-index:    99;
  backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES
═══════════════════════════════════════════════════════════ */
.auth-page {
  overflow: auto;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

.auth-wrapper {
  width:      100%;
  max-width:  420px;
  padding:    20px;
  position:   relative;
}

.auth-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       36px 32px;
  box-shadow:    var(--shadow-lg);
}

.auth-logo {
  text-align:    center;
  margin-bottom: 28px;
}
.auth-logo .logo-icon {
  display:     block;
  font-size:   2.5rem;
  color:       var(--accent);
  margin-bottom: 10px;
}
.auth-logo h1 { font-size: 1.4rem; font-weight: 700; color: var(--text-primary); }
.auth-logo p  { font-size: .875rem; color: var(--text-secondary); margin-top: 4px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.form-group {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.form-group label {
  font-size:   .8125rem;
  font-weight: 500;
  color:       var(--text-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
  padding:       10px 12px;
  background:    var(--bg-secondary);
  border:        1.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  color:         var(--text-primary);
  font-family:   var(--font);
  font-size:     .9375rem;
  outline:       none;
  transition:    border-color var(--transition), background var(--transition);
  width:         100%;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent);
  background:   var(--bg-primary);
}
.form-group select { appearance: auto; cursor: pointer; }
.form-group textarea { resize: vertical; min-height: 100px; }
.form-hint { font-size: .75rem; color: var(--text-muted); margin-top: 4px; }

.input-pw-wrap {
  position: relative;
}
.input-pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position:        absolute;
  right:           10px;
  top:             50%;
  transform:       translateY(-50%);
  background:      transparent;
  border:          none;
  color:           var(--text-muted);
  cursor:          pointer;
  padding:         4px;
  display:         flex;
  align-items:     center;
}
.pw-toggle:hover { color: var(--text-primary); }
.pw-toggle svg   { width: 17px; height: 17px; }

.btn-primary {
  padding:       10px 20px;
  background:    var(--accent);
  color:         #fff;
  border:        none;
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     .9375rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background var(--transition), transform .15s;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary.btn-full { width: 100%; margin-top: 4px; }
.btn-primary.btn-large { padding: 12px 28px; font-size: 1rem; }

.btn-secondary {
  padding:       10px 20px;
  background:    transparent;
  color:         var(--text-primary);
  border:        1.5px solid var(--border-input);
  border-radius: var(--radius-sm);
  font-family:   var(--font);
  font-size:     .875rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    background var(--transition), border-color var(--transition);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--accent); }

.alert {
  padding:       10px 14px;
  border-radius: var(--radius-sm);
  font-size:     .875rem;
  margin-bottom: 16px;
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
}
.alert-error   { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.25); }
.alert-success { background: rgba(16,163,127,.12); color: var(--accent); border: 1px solid rgba(16,163,127,.25); }

.auth-footer {
  text-align:  center;
  margin-top:  20px;
  font-size:   .875rem;
  color:       var(--text-secondary);
}
.auth-footer a { color: var(--accent); font-weight: 500; }

.theme-toggle-auth {
  position:    absolute;
  top:         12px;
  right:       12px;
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS / ACCOUNT / ADMIN PAGES
═══════════════════════════════════════════════════════════ */
.settings-page {
  overflow-y:  auto;
  min-height:  100vh;
  background:  var(--bg-primary);
}

.settings-nav {
  position:    sticky;
  top:         0;
  background:  var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding:     12px 24px;
  display:     flex;
  align-items: center;
  justify-content: space-between;
  z-index:     10;
  backdrop-filter: blur(8px);
}

.back-btn {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       var(--text-secondary);
  font-size:   .875rem;
  font-weight: 500;
  text-decoration: none;
  padding:     6px 10px;
  border-radius: var(--radius-sm);
  transition:  background var(--transition), color var(--transition);
}
.back-btn:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.back-btn svg   { width: 16px; height: 16px; }

.settings-wrapper {
  max-width:  720px;
  margin:     0 auto;
  padding:    32px 24px 60px;
}

.settings-header {
  display:      flex;
  align-items:  center;
  gap:          20px;
  margin-bottom: 28px;
}
.settings-avatar {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--accent);
  color:           #fff;
  font-size:       1.4rem;
  font-weight:     700;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.admin-avatar { background: linear-gradient(135deg, #666, #333); }
.settings-header h1 { font-size: 1.4rem; font-weight: 700; }
.settings-header p  { font-size: .875rem; color: var(--text-secondary); margin-top: 2px; }

.settings-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       22px;
  margin-bottom: 18px;
  transition:    background var(--transition);
}
.settings-card--info { background: var(--bg-secondary); }

.settings-card-header {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     .9375rem;
  font-weight:   600;
  color:         var(--text-primary);
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.settings-card-header svg { width: 18px; height: 18px; color: var(--accent); }

.settings-form { display: flex; flex-direction: column; gap: 14px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-group--btn {
  display:         flex;
  flex-direction:  column;
  justify-content: flex-end;
}

.info-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         8px 0;
  font-size:       .875rem;
  border-bottom:   1px solid var(--border);
  color:           var(--text-secondary);
}
.info-row:last-child { border-bottom: none; }
.info-row strong { color: var(--text-primary); font-weight: 600; }

/* Toggle switch */
.toggle-label {
  display:     flex;
  align-items: center;
  gap:         12px;
  cursor:      pointer;
  user-select: none;
  font-size:   .875rem;
  color:       var(--text-primary);
}
.toggle-label input[type="checkbox"] { display: none; }
.toggle-switch {
  position:    relative;
  width:       42px;
  height:      24px;
  background:  var(--border-input);
  border-radius: 12px;
  flex-shrink: 0;
  transition:  background .25s;
}
.toggle-switch::after {
  content:     '';
  position:    absolute;
  top:         3px; left: 3px;
  width:       18px; height: 18px;
  background:  #fff;
  border-radius: 50%;
  transition:  transform .25s, box-shadow .25s;
  box-shadow:  0 1px 3px rgba(0,0,0,.3);
}
.toggle-label input:checked ~ .toggle-switch { background: var(--accent); }
.toggle-label input:checked ~ .toggle-switch::after { transform: translateX(18px); }

/* Stats row */
.stats-row {
  display:       grid;
  grid-template-columns: repeat(3,1fr);
  gap:           14px;
  margin-bottom: 22px;
}
.stat-card {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       18px;
  text-align:    center;
}
.stat-value { font-size: 1.8rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: .75rem; color: var(--text-secondary); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

/* Model reference */
.model-ref { display: flex; flex-direction: column; gap: 12px; }
.model-ref-group { font-size: .875rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.model-ref-group strong { color: var(--text-secondary); min-width: 120px; }
.model-ref-group code {
  background:    var(--bg-code);
  padding:       2px 7px;
  border-radius: 4px;
  font-size:     .8rem;
  font-family:   'Courier New', monospace;
  color:         var(--text-primary);
  cursor:        pointer;
}
.model-ref-group code:hover { background: var(--accent-light); }

.settings-form-page { display: flex; flex-direction: column; }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --sidebar-w: 280px; }

  .sidebar {
    position:   fixed;
    left:       0; top: 0; bottom: 0;
    transform:  translateX(-100%);
    z-index:    200;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-close { display: flex; }

  .topbar-menu-btn { display: flex; }

  .main-content { width: 100%; }

  .input-area {
    position:   sticky;
    bottom:     0;
    padding:    8px 12px 12px;
  }

  .messages-list { padding: 0 12px; }

  .msg-bubble { max-width: 90%; }

  .welcome-screen { padding: 20px 16px; }
  .welcome-screen h2 { font-size: 1.3rem; }

  .welcome-suggestions { gap: 8px; }
  .suggestion-chip { font-size: .75rem; padding: 8px 12px; }

  /* Settings pages */
  .settings-wrapper { padding: 20px 16px 50px; }
  .form-row { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .stat-card { padding: 12px 8px; }
  .stat-value { font-size: 1.4rem; }

  .auth-card { padding: 28px 20px; }
}

@media (min-width: 769px) {
  .sidebar-close { display: none; }
  .topbar-menu-btn { display: flex; }  /* always visible for collapse */
  .sidebar.collapsed { transform: translateX(-100%); width: 0; min-width: 0; }
}

/* ── Inline rename input ─────────────────────────────────── */
.rename-input {
  background:  transparent;
  border:      none;
  border-bottom: 1px solid var(--accent);
  color:       var(--text-primary);
  font-family: var(--font);
  font-size:   .8125rem;
  width:       100%;
  outline:     none;
  padding:     1px 2px;
}

/* ── Toast notification ──────────────────────────────────── */
.toast {
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%) translateY(20px);
  background:    var(--bg-card);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       10px 20px;
  font-size:     .875rem;
  color:         var(--text-primary);
  box-shadow:    var(--shadow-md);
  z-index:       9999;
  opacity:       0;
  transition:    opacity .25s, transform .25s;
  white-space:   nowrap;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/*edited
/* ===== MOBILE FINAL FIX ===== */
@media (max-width: 768px){

  /* Chat input visible rakho */
  .input-area{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Messages container ko upar space do */
  .chat-wrapper{
    padding-bottom: 120px !important;
  }

  /* Sidebar scroll ho */
  .sidebar{
    overflow-y: auto;
    padding-bottom: 120px;
  }

}