/* Projects — sidebar section, create modal, landing page.
   Spec: docs/superpowers/specs/2026-05-22-projects-design.md */

/* -----------------------------------------------------------------------
   Quiet focus across the entire Projects feature.

   styles.css has a global :focus-visible rule that paints a 2px
   var(--accent) outline (purple — perceived as blue) on every focused
   element. We don't want any colored rings inside the Projects UI —
   focus is communicated via subtle background/border shifts only.

   This rule wins because it's defined here (loaded after styles.css)
   AND uses a more specific descendant selector. !important is belt-
   and-braces against future global focus tweaks.
   ----------------------------------------------------------------------- */
.sidebar-projects :focus-visible,
.project-modal :focus-visible,
.project-page :focus-visible,
.sidebar-project-menu-popover :focus-visible,
.project-page-menu-popover :focus-visible,
.project-page-color-picker :focus-visible,
.session-project-picker :focus-visible,
/* Chat-row ⋯ menu option buttons (Share / Pin / Archive / Rename /
   Add to project / Delete) */
.button-group :focus-visible,
.chat-btn:focus-visible,
/* "Add to project" submenu inside the global attach menu */
#submenu-projects :focus-visible,
.submenu-project-item:focus-visible,
/* The 4 task-suggestion cards on the new-chat home screen */
.options .options-button:focus-visible,
.options-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- Sidebar Projects section ---------- */
/* ==================================================================
   Projects sidebar section (clean rewrite)
   ------------------------------------------------------------------
   Layout contract:
     - Parent .sidebar-content already pads 6px sides → that's "the
       margin". This section adds NO horizontal padding of its own.
     - Title row + every list item have padding-left: 0 → their content
       (Projects label, folder icons) all sit at the same vertical line
       flush against the margin.
     - Right padding leaves 8px space for the per-row ⋯ menu so it
       doesn't crowd against the sidebar edge.
   ================================================================== */

/* Small horizontal inset so content isn't flush against the
   sidebar-content margin. 10px lines everything in this section up
   with the action button icons above (which sit at 18px from sidebar
   edge: 6px sidebar-content pad + 10px btn pad + 2px icon nudge). */
.sidebar-projects {
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--border-secondary);
}

/* --- Title row -------------------------------------------------- */
/* Block-level flex (not inline-flex) so it sits on its own line at
   the section's left edge — inline-flex was getting 16px of extra
   inline indent in some layouts. justify-content keeps content
   left-aligned; the button still takes full row width but the
   hover bg is opt-out (just color shift). */
/* Diagnostic: !important on the padding to beat
   responsive-foundation.css's generic `button` rule that's sneaking in
   ~16px left padding. The specificity SHOULD be enough on its own
   (class beats element), so the fact that this is required is a clue
   to investigate later. */
.sidebar-projects-header,
.sidebar-projects-header.sidebar-projects-header {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 6px !important;
  padding: 4px 0 !important;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  text-align: left;
  transition: color 150ms ease;
}
.sidebar-projects-header:hover { color: var(--text-primary); }

.sidebar-projects-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: inherit;
  user-select: none;
}

/* Chevron — hidden by default, shown on hover / focus / collapsed. */
.sidebar-projects-chevron {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  color: var(--text-tertiary);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              color 150ms ease,
              opacity 120ms ease;
}
.sidebar-projects-header:hover .sidebar-projects-chevron,
.sidebar-projects-header:focus-visible .sidebar-projects-chevron,
.sidebar-projects--collapsed .sidebar-projects-chevron {
  opacity: 1;
  pointer-events: auto;
  color: var(--text-secondary);
}
.sidebar-projects--collapsed .sidebar-projects-chevron {
  transform: rotate(-90deg);
}
.sidebar-projects--collapsed .sidebar-projects-list {
  display: none;
}

/* --- List + rows ----------------------------------------------- */

.sidebar-projects-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* "New project" + each project row share identical box geometry so
   folder icons stack in one column. display:block on the wrappers
   neutralizes the default list-item marker box (which was offsetting
   .sidebar-project-newrow's button by ~16px). */
.sidebar-project-newrow,
.sidebar-project-row {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Same !important treatment so generic `button { padding: ... }`
   doesn't sneak left padding into the New project button. */
.sidebar-project-newbtn,
.sidebar-project-row,
.sidebar-project-newbtn.sidebar-project-newbtn,
.sidebar-project-row.sidebar-project-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 2px 0;
  padding: 0 8px !important;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-project-newbtn:hover,
.sidebar-project-row:hover {
  background: var(--bg-hover);
}

/* Active row — sidebar row matching the project page you're viewing.
   Set by projectsModule.renderList() when the URL is /p/<id>. */
.sidebar-project-row.is-active {
  background: var(--bg-hover);
  min-height: 36px !important;
}
.sidebar-project-row.is-active .name {
  font-weight: 500;
}

/* The New-project entry is a CTA, not a real project — read as muted */
.sidebar-project-newbtn {
  color: var(--text-secondary);
  appearance: none;
  -webkit-appearance: none;
}
.sidebar-project-newbtn:hover { color: var(--text-primary); }

/* Folder icon column — same dimensions in both row types */
.sidebar-project-newbtn .folder-icon,
.sidebar-project-row .folder-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  transition: color 150ms ease;
}
.sidebar-project-newbtn .folder-icon { color: var(--text-tertiary); }
.sidebar-project-newbtn:hover .folder-icon { color: var(--text-secondary); }
.sidebar-project-row .folder-icon { color: var(--project-accent, var(--accent)); }

.sidebar-project-row[data-drag-over='true'] {
  background: color-mix(in srgb, var(--project-accent, var(--accent)) 18%, transparent);
}

/* Project name text — both rows */
.sidebar-project-newbtn .name,
.sidebar-project-row .name {
  flex: 1;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-projects-more-hint {
  padding: 6px 0;
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary);
}

/* --- Nested chats under the active project ----------------------- */
/* Indented chat rows that appear beneath .is-active project row.
   Mirrors ChatGPT's pattern: 32px tall, 28px indent, no icon. */
.sidebar-project-chats {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
}
.sidebar-project-chat {
  display: flex !important;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  margin: 2px 0;
  padding: 0 8px 0 28px !important;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-project-chat:hover {
  background: var(--bg-hover);
}
.sidebar-project-chats-empty {
  padding: 4px 8px 4px 28px;
  font-size: 12px;
  font-style: italic;
  color: var(--text-tertiary);
}

/* --- "More" overflow row ---------------------------------------- */
/* Same geometry as project rows but muted, no folder icon. The
   three dots are typographic, not an icon — fewer SVGs to manage. */
.sidebar-project-morebtn {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 2px 0;
  padding: 0 8px !important;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--text-secondary);
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-project-morebtn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar-project-morebtn .more-dots {
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}

/* ==================================================================
   Collapsed sidebar — show ONE single Projects icon, regardless of
   how many projects exist. Clicking it expands the sidebar so the
   full list becomes accessible. Avoids the long stack of folder
   icons that gets ugly with many projects.
   ================================================================== */

/* The collapsed-only icon is hidden in expanded state. In collapsed
   state, .sidebar-action-btn (already on this button) provides all
   the size, hover, and tooltip styling — same as every other icon
   in the collapsed sidebar. */
.sidebar-projects-collapsed-icon { display: none !important; }

body.sidebar-collapsed .sidebar-projects {
  padding: 0.35rem 0 !important;
  border-bottom: none;
}

/* Hide the expanded-state controls when collapsed. */
body.sidebar-collapsed .sidebar-projects-header,
body.sidebar-collapsed .sidebar-projects-list {
  display: none !important;
}

/* Show the single icon button when collapsed. !important overrides
   the default-hidden rule above. */
body.sidebar-collapsed .sidebar-projects-collapsed-icon {
  display: flex !important;
}

/* ---------- Create-project modal ---------- */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;            /* must beat sidebar (1100) */
  display: flex;
  align-items: center;
  justify-content: center;
  animation: project-modal-fade 160ms ease-out;
}
.project-modal[hidden] { display: none; }

@keyframes project-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes project-modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.project-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.project-modal-content {
  position: relative;
  width: min(480px, calc(100vw - 32px));
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  padding: 28px 28px 22px;
  box-shadow: var(--shadow-2xl);
  animation: project-modal-rise 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-modal-heading {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.project-modal-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--text-secondary);
}

.project-modal-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text-primary);
  outline: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.project-modal-input::placeholder { color: var(--text-tertiary); }
.project-modal-input:hover {
  border-color: color-mix(in srgb, var(--border-primary) 60%, var(--text-tertiary) 40%);
}
/* Quiet focus: no ring, no colored outline — just a subtle border tone shift.
   The !important on outline kills the global :focus-visible accent ring. */
.project-modal-input:focus,
.project-modal-input:focus-visible {
  outline: none !important;
  border-color: var(--text-secondary);
  box-shadow: none;
}

.project-modal-helper {
  margin: 14px 0 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-tertiary);
}

.project-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.project-modal-cancel,
.project-modal-create {
  min-width: 96px;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease,
              opacity 150ms ease, transform 120ms ease;
}
.project-modal-cancel:active,
.project-modal-create:active:not(:disabled) { transform: scale(0.98); }

/* Secondary — quiet text/border button */
.project-modal-cancel {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-primary);
}
.project-modal-cancel:hover {
  background: var(--bg-hover);
  border-color: color-mix(in srgb, var(--border-primary) 50%, var(--text-tertiary) 50%);
}

/* Primary — inverse high-contrast button.
   Dark theme: cream bg + dark text. Light theme: dark bg + cream text. */
.project-modal-create {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-color: var(--text-primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.project-modal-create:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.22);
}
.project-modal-create:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* Reduce-motion respects user prefs */
@media (prefers-reduced-motion: reduce) {
  .project-modal,
  .project-modal-content { animation: none; }
  .project-modal-cancel,
  .project-modal-create { transition: none; transform: none; }
}

/* ---------- "in: <project>" tag at top of chat area ---------- */
/* ---------- "in: <project>" tag at top of chat area ---------- */
.project-context-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--project-accent, var(--accent)) 14%, transparent);
  color: var(--project-accent, var(--accent));
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.project-context-tag .folder-icon { width: 12px; height: 12px; }

/* ---------- Project landing page ---------- */
/* ChatGPT-pure look: header (icon + name) + tabs + chats list.
   Auxiliary buttons/sections (rename, menu, "+ New chat", Instructions,
   Files) are hidden via .pp-hidden — code stays for future use. */
.pp-hidden { display: none !important; }

.project-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 24px 32px;
  color: var(--text-primary);
  background: transparent;
  /* No min-height: the page sizes to content. The parent .chat-stage
     already provides the visual frame. */
}
.project-page-header {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 20px;
}

/* {} icon button — clickable, opens the icon/color picker.
   Glyph stays neutral (text-primary) like ChatGPT; the project's
   accent color shows up on the sidebar row, not here. */
.project-page-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 120ms ease;
}
.project-page-icon-btn:hover { background: var(--bg-hover); }
.project-page-icon-btn .project-page-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.project-page-icon-btn .project-page-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-page-title {
  flex: 1;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.2;
  color: var(--text-primary);
}

/* --- Tabs (Chats / Sources) ------------------------------------- */
.project-page-tabs {
  display: flex;
  align-items: stretch;
  gap: 24px;
  height: 36px;
  border-bottom: 1px solid var(--border-primary);
  margin: 4px 0 16px;
}
.project-page-tab {
  background: transparent;
  border: none;
  padding: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;  /* overlap parent border so active underline sits on the line */
  transition: color 120ms ease, border-color 120ms ease;
}
.project-page-tab:hover { color: var(--text-primary); }
.project-page-tab.is-active {
  color: var(--text-primary);
  font-weight: 500;
  border-bottom-color: var(--text-primary);
}

.project-sources-placeholder {
  padding: 24px 4px;
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Legacy auxiliary controls kept for forward-compat; hidden by .pp-hidden. */
.project-page-back {
  font-size: 18px;
  text-decoration: none;
  color: var(--text-secondary);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 120ms ease, color 120ms ease;
}
.project-page-back:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.project-page-edit,
.project-page-menu {
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 120ms ease;
}
.project-page-edit:hover,
.project-page-menu:hover { background: var(--bg-hover); }

/* Compact New-chat row that lives below the tabs. Less visual weight
   than the previous full-bleed CTA; the standard chat input in the
   sidebar already covers "start any chat", so this is just the
   in-project shortcut. */
.project-new-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 12px 0 0;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.project-new-chat-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

.project-section { margin: 28px 0; }
.project-section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin: 0 0 10px;
}

.project-instructions {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.55;
  outline: none;
  font-family: inherit;
  transition: border-color 120ms ease;
}
.project-instructions::placeholder { color: var(--text-tertiary); }
.project-instructions:focus { border-color: var(--text-tertiary); }

.project-instructions-status {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  min-height: 16px;
}

.project-files-empty {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 12px;
  font-style: italic;
}

.project-chats { list-style: none; padding: 0; margin: 0; }

/* ChatGPT-style chat row: 64px tall, divider line, title + preview + date.
   The row is flex; left column stacks title over preview, date pins right. */
.project-chat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-primary);
  border-radius: 0;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 120ms ease;
}
.project-chat-row:hover {
  background: var(--bg-hover);
  border-radius: 8px;
  border-bottom-color: transparent;
}
.project-chat-row .pcr-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  gap: 2px;
}
.project-chat-row .pcr-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-chat-row .pcr-preview {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-chat-row .pcr-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.project-chats-empty {
  padding: 24px 4px;
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ---------- Project page: files list & dropzone ---------- */
.project-files-dropzone {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1px dashed var(--border-primary);
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--bg-tertiary);
  transition: border-color 120ms ease, background 120ms ease;
}
.project-files-dropzone.drag-over {
  border-color: var(--project-accent, var(--accent));
  background: color-mix(in srgb, var(--project-accent, var(--accent)) 8%, transparent);
}
.project-add-files-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background 120ms ease;
}
.project-add-files-btn:hover { background: var(--bg-hover); }
.project-files-hint { font-size: 12px; color: var(--text-tertiary); }

.project-files { list-style: none; padding: 0; margin: 0; }
.project-file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--text-primary);
  transition: background 120ms ease;
}
.project-file-row:hover { background: var(--bg-hover); }
.project-file-row .filename { flex: 1; font-size: 14px; }
.project-file-row .size { font-size: 12px; color: var(--text-tertiary); }
.project-file-row .file-remove {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 120ms ease, color 120ms ease;
}
.project-file-row .file-remove:hover {
  color: var(--border-error);
  background: var(--bg-hover);
}

/* ---------- Icon + color picker popover ---------- */
/* Triggered by clicking .project-page-icon-btn in the project header.
   Layout: color swatches row → divider → 5-col icon grid → footer. */
.icon-color-picker {
  position: absolute;
  z-index: 1500;
  width: 224px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  padding: 12px;
  color: var(--text-primary);
  user-select: none;
}

.icp-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 10px;
}
.icp-swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 100ms ease;
}
.icp-swatch:hover { transform: scale(1.08); }
.icp-swatch.is-selected {
  /* Inner gap + 2px white ring, per spec. */
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--text-primary);
}

.icp-divider {
  height: 1px;
  background: var(--border-primary);
  margin: 8px 0;
}

.icp-icons {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: 4px;
}
.icp-icon-cell {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.icp-icon-cell svg { width: 18px; height: 18px; }
.icp-icon-cell:hover { background: var(--bg-hover); }
.icp-icon-cell.is-selected {
  background: var(--bg-hover);
  border-color: var(--border-secondary);
}

.icp-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-primary);
}
.icp-close {
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 120ms ease;
}
.icp-close:hover { color: var(--text-primary); }

/* ---------- Project page ⋯ menu popover + color picker ---------- */
.project-page-menu-popover {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 160px;
}
.project-page-menu-popover button {
  background: transparent;
  border: none;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
.project-page-menu-popover button:hover { background: var(--bg-hover); }
.project-page-menu-popover button.danger { color: var(--border-error); }

.project-page-color-picker {
  display: grid;
  grid-template-columns: repeat(5, 28px);
  gap: 8px;
  padding: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.project-page-color-picker button {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-primary);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}
.project-page-color-picker button:hover {
  border-color: var(--text-primary);
  transform: scale(1.05);
}

/* ---------- Empty state in sidebar (no projects yet) ----------
   ChatGPT-style neutral row, NOT a dashed CTA. Reads as a normal
   sidebar item that lights up on hover. */
.sidebar-projects-empty {
  list-style: none;
  margin: 1px 4px;
}
.sidebar-projects-empty-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-projects-empty-cta:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar-projects-empty-cta svg { flex-shrink: 0; opacity: 0.85; }

/* Per-project folder color is set inline via --project-accent in renderList(). */

/* ---------- Per-session "Add to project" picker popover ---------- */
.session-project-picker {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
}
.session-project-picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms ease;
}
.session-project-picker__item:hover { background: var(--bg-hover); }

/* ---------- Per-project-row ⋯ menu trigger + popover ---------- */
.sidebar-project-row .sidebar-project-menu-btn {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity 100ms ease, background 100ms ease, color 100ms ease;
}
.sidebar-project-row:hover .sidebar-project-menu-btn,
.sidebar-project-row .sidebar-project-menu-btn:focus-visible {
  opacity: 1;
}
.sidebar-project-row .sidebar-project-menu-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.sidebar-project-row .sidebar-project-menu-btn i.fas {
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}

.sidebar-project-menu-popover {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.sidebar-project-menu-popover button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 120ms ease;
}
.sidebar-project-menu-popover button:hover { background: var(--bg-hover); }
.sidebar-project-menu-popover button.danger { color: var(--border-error); }
.sidebar-project-menu-popover button i { width: 14px; opacity: 0.85; }

/* Font Awesome icons inside the projects sidebar buttons */
.sidebar-projects-add i.fas,
.sidebar-projects-empty-cta i.fas {
  font-size: 12px;
  line-height: 1;
}