/* ============================================ */
/* GB FLUENT — Sidebar v16                       */
/* Claude/zo.computer style: principal app links */
/* on top, conversation history below.           */
/* ============================================ */

.chat-sidebar {
  width: 300px;
  height: 100%;
  background: var(--glass-bg, var(--shell-bg, rgba(20,22,35,0.6)));
  backdrop-filter: var(--glass-backdrop, var(--shell-blur, blur(16px) saturate(150%)));
  -webkit-backdrop-filter: var(--glass-backdrop, var(--shell-blur, blur(16px) saturate(150%)));
  border-right: 1px solid var(--shell-border, var(--glass-border-color, rgba(255,255,255,0.12)));
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width 300ms cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
  flex-shrink: 0;
}

.chat-sidebar.collapsed {
  width: 51px;
}

.chat-sidebar-toggle {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 180ms;
  flex-shrink: 0;
}

.chat-sidebar-toggle:hover {
  background: var(--win-caption-hover, rgba(255,255,255,0.06));
}

.chat-sidebar-toggle svg {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary, #888);
  transition: all 300ms;
}

.chat-sidebar-toggle:hover svg {
  stroke: var(--primary, var(--accent, #84d669));
}

.chat-sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-sidebar.collapsed .chat-sidebar-content {
  display: none;
}

/* ── Brand header ── */
.chat-sidebar-header {
  padding: 14px 16px 10px;
}

.chat-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.chat-sidebar-brand-name {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #eee);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.glow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary, var(--accent, #84d669));
  box-shadow: 0 0 8px var(--primary, var(--accent, #84d669));
  animation: chatDotPulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes chatDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* ── New conversation ── */
.chat-sidebar-new-chat {
  margin: 4px 12px 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #eee);
  background: var(--surface-hover, rgba(255,255,255,0.07));
  transition: all 180ms;
  flex-shrink: 0;
}

.chat-sidebar-new-chat:hover {
  background: var(--primary, var(--accent, #84d669));
  color: #111;
}

/* ── Principal app links ── */
.chat-sidebar-apps {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 10px;
  border-bottom: 1px solid var(--shell-border, var(--glass-border-color, rgba(255,255,255,0.08)));
  flex-shrink: 0;
}

.sidebar-app-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #ddd);
  transition: background 150ms;
  user-select: none;
}

.sidebar-app-link:hover {
  background: var(--win-caption-hover, rgba(255,255,255,0.07));
}

.sidebar-app-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-secondary, #999);
  transition: color 150ms;
}

.sidebar-app-icon svg {
  width: 17px;
  height: 17px;
}

.sidebar-app-link:hover .sidebar-app-icon {
  color: var(--primary, var(--accent, #84d669));
}

.sidebar-app-label {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── History section ── */
.chat-sidebar-section-label {
  padding: 14px 18px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary, #777);
  flex-shrink: 0;
}

.chat-sidebar-conversations {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}

.chat-sidebar-conv-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
  margin-bottom: 1px;
}

.chat-sidebar-conv-item:hover {
  background: var(--win-caption-hover, rgba(255,255,255,0.06));
}

.chat-sidebar-conv-item.active {
  background: var(--surface-active, rgba(255,255,255,0.10));
}

.chat-sidebar-conv-info {
  flex: 1;
  min-width: 0;
}

.chat-sidebar-conv-name {
  font-size: 13px;
  color: var(--text, #ccc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-sidebar-conv-item.active .chat-sidebar-conv-name {
  color: var(--text, #eee);
  font-weight: 600;
}

.chat-sidebar-conv-time {
  font-size: 10px;
  color: var(--text-secondary, #666);
  flex-shrink: 0;
}

.chat-sidebar-history-empty,
.chat-sidebar-signin-hint {
  margin: 6px 4px;
  padding: 12px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary, #777);
  text-align: center;
}

.chat-sidebar-signin-hint {
  border: 1px dashed var(--shell-border, rgba(255,255,255,0.15));
  cursor: pointer;
  transition: all 150ms;
}

.chat-sidebar-signin-hint:hover {
  border-color: var(--primary, var(--accent, #84d669));
  color: var(--primary, var(--accent, #84d669));
}

/* ── Theme selector row ── */
.chat-sidebar-theme {
  flex-shrink: 0;
  padding: 0 12px 6px;
}

.chat-sidebar-theme .theme-dropdown {
  width: 100%;
  padding: 7px 26px 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--shell-border, rgba(255,255,255,0.12));
  font-size: 12px;
}

.chat-sidebar-theme .theme-dropdown option {
  background: var(--surface, #1a1a24);
  color: var(--text, #eee);
}

/* ── User footer ── */
.chat-sidebar-user {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  margin: 4px 8px 8px;
  border-radius: 10px;
  cursor: pointer;
  border-top: 1px solid transparent;
  background: var(--surface-hover, rgba(255,255,255,0.04));
  transition: background 150ms;
  user-select: none;
}

.chat-sidebar-user:hover {
  background: var(--win-caption-hover, rgba(255,255,255,0.08));
}

.sidebar-user-avatar {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary, var(--accent, #84d669));
  color: #111;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-avatar-anon {
  background: var(--surface-active, rgba(255,255,255,0.12));
  color: var(--text-secondary, #999);
}

.sidebar-user-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #ddd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-chevron {
  font-size: 10px;
  color: var(--text-secondary, #777);
  flex-shrink: 0;
}

/* ── Collapsed icons ── */
.chat-sidebar-collapsed-icons {
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  gap: 4px;
}

.chat-sidebar.collapsed .chat-sidebar-collapsed-icons {
  display: flex;
}

.chat-sidebar-collapsed-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  transition: all 150ms;
  color: var(--text-secondary, #888);
}

.chat-sidebar-collapsed-icon:hover {
  background: var(--win-caption-hover, rgba(255,255,255,0.08));
  color: var(--text, #eee);
}

.chat-sidebar-collapsed-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

/* ── Public mode / fullscreen sidebar hide ── */
body.public-mode .chat-sidebar { /* always visible */ }

body.fullscreen .chat-sidebar {
  display: none !important;
}