/* === App layout with sidebar === */
.app-layout { display: flex; min-height: 100vh; }

/* === Sidebar === */
.sidebar {
  width: var(--sidebar-width, 260px);
  background: var(--color-bg-subtle);
  border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100; overflow: hidden;
  transition: width 0.2s ease;
}

/* --- Collapsed mode --- */
.sidebar.collapsed { width: 50px; }
.sidebar.collapsed .sidebar-logo span,
.sidebar.collapsed .sidebar-search,
.sidebar.collapsed .sidebar-section-header,
.sidebar.collapsed .sidebar-item-title,
.sidebar.collapsed .sidebar-item-meta,
.sidebar.collapsed .sidebar-conv-menu-btn,
.sidebar.collapsed .sidebar-footer > div,
.sidebar.collapsed .sidebar-footer a,
.sidebar.collapsed .sidebar-footer form { display: none; }
.sidebar.collapsed .sidebar-conv-link { justify-content: center; padding: var(--space-1); }
.sidebar.collapsed .sidebar-conv { justify-content: center; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: var(--space-2); }
.sidebar.collapsed .sidebar-logo { gap: 0; }
.sidebar.collapsed + .sidebar-overlay + .main-content { margin-left: 50px; }

.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3); border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.sidebar-logo {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-base); text-decoration: none; color: var(--color-text);
}
.sidebar-logo img { border-radius: 4px; }
.sidebar-new {
  background: none; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--color-text-secondary); font-size: 1.1rem; transition: all 0.15s;
}
.sidebar-new:hover { border-color: var(--color-primary); color: var(--color-primary); }

.sidebar-search { padding: var(--space-2) var(--space-3); flex-shrink: 0; }
.sidebar-search input { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius); background: var(--color-bg-surface); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: var(--space-1) 0; }

.sidebar-section-header {
  padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: 600;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em;
  cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between;
}
.sidebar-chevron { font-size: 0.7em; transition: transform 0.15s; }
.sidebar-section-content.collapsed { display: none; }

/* --- Conversation item with menu --- */
.sidebar-conv {
  display: flex; align-items: center; position: relative;
  padding: 0 var(--space-1) 0 0;
  border-radius: var(--radius-sm); margin: 0 var(--space-1);
  transition: background 0.1s;
}
.sidebar-conv:hover { background: var(--color-border); }
.sidebar-conv.active { background: var(--color-primary-subtle); }
.sidebar-conv.active .sidebar-conv-link { color: var(--color-primary); }

.sidebar-conv-link {
  flex: 1; display: flex; align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-secondary);
  text-decoration: none; overflow: hidden;
}
.sidebar-conv-link:hover { text-decoration: none; color: var(--color-text); }
.sidebar-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sidebar-conv-menu-btn {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 1rem; padding: 2px 4px;
  border-radius: var(--radius-sm); opacity: 0; transition: opacity 0.1s;
  flex-shrink: 0;
}
.sidebar-conv:hover .sidebar-conv-menu-btn { opacity: 1; }
.sidebar-conv-menu-btn:hover { background: var(--color-bg-subtle); color: var(--color-text); }

/* --- Context menu --- */
.sidebar-conv-menu {
  display: none; position: absolute; left: var(--space-2); top: 100%;
  background: var(--color-bg-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-2);
  z-index: 110; min-width: 180px; box-shadow: var(--shadow-md);
}
.sidebar-conv-menu.open { display: block; }

.scm-item { padding: var(--space-1) 0; }
.scm-item button {
  background: none; border: none; cursor: pointer;
  font-size: var(--text-xs); color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-2); width: 100%; text-align: left;
  border-radius: var(--radius-sm); transition: background 0.1s;
}
.scm-item button:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.scm-rename-input {
  font-size: var(--text-xs); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm); width: 100%;
}
.scm-move { padding: var(--space-1) var(--space-2); }
.scm-move-btn {
  background: none; border: 1px solid var(--color-border); cursor: pointer;
  font-size: var(--text-xs); padding: 1px var(--space-2); border-radius: var(--radius-sm);
  color: var(--color-text-secondary); margin: 2px; transition: all 0.1s;
}
.scm-move-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* --- Sidebar items (projects, footer) --- */
.sidebar-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4);
  font-size: var(--text-sm); color: var(--color-text-secondary);
  cursor: pointer; transition: background 0.1s;
  text-decoration: none; border: none; background: none; width: 100%; text-align: left;
}
.sidebar-item:hover { background: var(--color-border); color: var(--color-text); text-decoration: none; }
.sidebar-item.active { background: var(--color-primary-subtle); color: var(--color-primary); }
.sidebar-item-meta { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; margin-left: var(--space-2); }

/* --- Toggle collapse button --- */
.sidebar-collapse-btn {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 0.9rem; padding: var(--space-2) var(--space-3);
  text-align: center; width: 100%; transition: color 0.1s;
}
.sidebar-collapse-btn:hover { color: var(--color-text); }

.sidebar-footer {
  border-top: 1px solid var(--color-border); padding: var(--space-1) 0; flex-shrink: 0;
}
.sidebar-footer .sidebar-item { font-size: var(--text-xs); }

/* === Main content === */
.main-content {
  flex: 1; margin-left: var(--sidebar-width, 260px);
  display: flex; flex-direction: column; min-height: 100vh;
  transition: margin-left 0.2s ease;
}
.main-body { flex: 1; display: flex; flex-direction: column; }

/* === Topbar === */
.topbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border);
  min-height: 44px; flex-shrink: 0;
}
.topbar-title { flex: 1; font-weight: 600; font-size: var(--text-base); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
.hamburger { display: none; background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: var(--space-1); color: var(--color-text); }

/* === Sidebar overlay (mobile) === */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
.sidebar-overlay.open { display: block; }

/* === Mobile === */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s ease; width: var(--sidebar-width, 260px); }
  .sidebar.open { transform: translateX(0); }
  .sidebar.collapsed { width: var(--sidebar-width, 260px); }
  .main-content { margin-left: 0; }
  .sidebar.collapsed + .sidebar-overlay + .main-content { margin-left: 0; }
  .hamburger { display: block; }
  .sidebar-collapse-btn { display: none; }
}

/* === Chat page adjustments === */
body.chat-page .main-content { overflow: hidden; }
body.chat-page .main-body { overflow: hidden; }