/* Shared left-rail styles — included by every page via <link rel="stylesheet" href="/sidebar.css"> */
#sidebar {
  width: 260px; min-width: 260px; background: var(--sidebar-bg);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  line-height: normal; font-family: 'Inter', system-ui, sans-serif;
}
.sidebar-top { padding: 16px 12px 12px; border-bottom: 1px solid var(--border-sub); }
.sidebar-brand {
  display: flex; align-items: center; gap: 8px; padding: 0 4px; margin-bottom: 12px;
  text-decoration: none; color: inherit;
}
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }
.brand-name { font-size: 15px; font-weight: 600; }
.btn-new-chat {
  width: 100%; background: none; border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer; text-align: left;
  font-family: inherit; transition: background 0.15s;
  display: flex; align-items: center; gap: 7px;
}
.btn-new-chat:hover { background: rgba(0,0,0,0.05); }
.sidebar-scroll { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; }
.sidebar-chats { flex: 1; }
.sidebar-section { margin-bottom: 4px; }
.sidebar-section-label {
  font-size: 11px; color: var(--text-muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 8px 10px 4px;
}
.nav-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 8px; cursor: pointer; margin-bottom: 1px;
  text-decoration: none; color: var(--text-2); font-size: 13px; transition: background 0.1s;
}
.nav-item:hover { background: rgba(0,0,0,0.05); }
.nav-item.disabled { opacity: 0.35; pointer-events: none; }
.nav-item.active, .nav-item-active {
  background: hsl(15 63% 60% / 0.08); color: var(--brand); font-weight: 500;
}
.nav-item-left { display: flex; align-items: center; gap: 8px; }
.nav-item-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-2); opacity: 0.6; }
.nav-item.active .nav-item-icon, .nav-item-active .nav-item-icon { opacity: 1; color: var(--brand); }
.nav-item-label { font-size: 13px; }
.nav-badge {
  margin-left: auto; font-size: 11px; font-weight: 600; background: var(--brand); color: #fff;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 5px;
}
.chat-item {
  padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 1px;
  text-decoration: none; display: block;
}
.chat-item:hover { background: rgba(0,0,0,0.05); }
.chat-item.active { background: rgba(0,0,0,0.07); }
.chat-item-title {
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.chat-item-time { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.sidebar-empty { padding: 8px 10px; font-size: 13px; color: var(--text-muted); }
.filter-wrap { padding: 4px 2px 8px; display: flex; flex-direction: column; gap: 6px; }
.filter-select {
  width: 100%; background: none; border: 1px solid var(--border); color: var(--text-2);
  padding: 6px 8px; border-radius: 6px; font-size: 12px; font-family: inherit; cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--brand); }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-sub); flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; color: var(--text-muted); }
.btn-logout {
  background: none; border: 1px solid var(--border); color: var(--text-2);
  padding: 5px 10px; border-radius: 6px; font-size: 12px;
  cursor: pointer; font-family: inherit; width: 100%;
}
.btn-logout:hover { border-color: #ef4444; color: #ef4444; }