/* ── 1. Sidebar shell ─────────────────────────────────────────────── */
#sidebar {
  background: var(--sidebar-light);  
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(43, 24, 23, 0.03), 0 6px 20px rgba(43, 24, 23, 0.04);
}

/* ── 2. Brand mark ────────────────────────────────────────────────── */
#sidebar .brand-mark {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  background: var(--ink);
  opacity: 85%;
  color: #fff;
}
#sidebar .brand-mark .bx { font-size: 15px !important; }

#sidebar:not(.hide) .brand-mark { display: none; }
#sidebar.hide .brand-name { padding: 0px; }
#sidebar .brand-name {
  font-weight: 600;
  font-size: 21px;
  padding: 0 4px;
  color: var(--ink);
  opacity: 85%;
}

/* ── 3. Nav items ─────────────────────────────────────────────────── */
#sidebar .side-menu { padding: 10px 8px; }
#sidebar .side-menu li { margin-bottom: 1px; }

#sidebar .side-menu li a {
  border: 1px solid transparent;
  border-radius: 9px;
}
#sidebar .side-menu li a:hover {
  background: var(--sidebar-hover);
  border-color: transparent;
}
#sidebar .side-menu li.active a {
  background: var(--bg-page);
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(43, 24, 23, 0.05);
  color: var(--sidebar-ink);
}


.side-menu li.active a {
  background: var(--sidebar-active);
  border-color: transparent;
  box-shadow: none;
}

/* Smooth transition on the icons */
#sidebar .side-menu li a i,
#sidebar .side-menu li a .bx {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

#sidebar .side-menu li a:hover i,
#sidebar .side-menu li a:hover .bx {
  transform: scale(1.08) rotate(1deg);
}

/* ── 4. New Chat button ───────────────────────────────────────────── */
#sidebar .sidebar-new-chat-btn {
  padding: 8px 8px;
  margin-bottom: 6px;
  font-weight: 500;
}
#sidebar .sidebar-new-chat-btn:hover {
  border-color: var(--border-hover);
  background: var(--bg-elevated);
}
#sidebar .sidebar-new-chat-icon {
  background: var(--bg-elevated);
  color: var(--ink);
}

#sidebar .sidebar-new-chat-btn:hover .sidebar-new-chat-icon {
  background: var(--bg-page);
}

#sidebar.hide .sidebar-new-chat-btn { border-radius: 9px; }

/* ── 5. Recents ───────────────────────────────────────────────────── */
#sidebar .sidebar-history { padding: 2px 8px 0; }
#sidebar .sidebar-history-toggle { border-radius: 9px; }

#sidebar .sidebar-history-list .ai-history-empty {
  padding: 14px 10px 18px;
  gap: 6px;
}
#sidebar .sidebar-history-list .ai-history-empty i { font-size: 1.1rem; }
#sidebar .sidebar-history-list .ai-history-empty p { font-size: 0.7rem; }

/* ── 6. Divider ───────────────────────────────────────────────────── */
#sidebar .sidebar-divider {
  background: var(--border);
  margin: 8px 10px;
}

/* ── 7. Bottom user row ───────────────────────────────────────────── */
#sidebar .sidebar-bottom { padding: 0 8px 8px; }

#sidebar .sidebar-user {
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 6px 4px;
}
#sidebar .sidebar-user:hover {
  background: var(--bg-page);
  border-color: var(--border);
}

#sidebar .sidebar-avatar {
  background: var(--bg-elevated);
  color: var(--ink-soft);
  font-weight: 700;
  border: 2px solid var(--bg-surface);
  box-shadow: 0 1px 2px rgba(43,24,23,0.08);
}


#sidebar .sidebar-avatar:hover {
  box-shadow: none;
  transform: none;
}

/* ── 8. Account popup ── */
.sidebar-popup {
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}