/* ===== Question Selector — stronger scoping + hard resets ===== */
/* Custom check icon inside card */
/* Filter chips */
/* ===== Question Selector — stronger scoping + hard resets ===== */
.question-selector .question-category {
  margin-bottom: 1rem;
}
.question-selector .category-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0.5rem 0 0.35rem;
  padding-left: 0.35rem;
}

/* Grid for cards instead of giant pills */
.question-selector .category-questions {
  display: grid !important;
  /* Force single-column rows everywhere for a clean stacked list */
  grid-template-columns: 1fr !important;
  gap: 0.65rem !important;
}

/* In split mode (left list + right panel) render questions as full-width rows
   so they appear stacked row-wise rather than as multi-column tiles. */
.question-selector.question-selector--rows .category-questions,
.question-selector .question-selector--split .category-questions {
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}

/* Reset any global panel/card styles that might wrap categories */
.question-selector,
.question-selector .question-selector-container,
.question-selector .question-list,
.question-selector .question-category {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* HARD RESET for card visuals (override global pills/cards) */
.question-selector .question-item {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide any pseudo decorations applied globally to labels or items */
.question-selector .question-item::before,
.question-selector .question-item::after,
.question-selector label::before,
.question-selector label::after {
  display: none !important;
  content: none !important;
}

/* Ensure any checkbox inputs (including global styles) are hidden inside the selector */
.question-selector input[type="checkbox"],
.question-selector input[type="checkbox"].question-checkbox,
.question-selector input[hidden] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Hover state */
.question-selector .question-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 245, 255, 0.15) !important;
  border-color: rgba(0, 245, 255, 0.25) !important;
}
.question-selector .question-card > *:first-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Text sizing & truncation */
.question-selector .question-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Category title alignment fixes */
.question-selector .question-category {
  padding: 0.25rem 0 !important;
}
.question-selector .category-title {
  display: block !important;
  margin: 0.5rem 0 0.35rem !important;
  padding-left: 0.35rem !important;
}

/* Priority chip - brighter, compact pill */
.question-selector .priority-badge {
  background: linear-gradient(90deg, #ffd166, #ffc857) !important;
  color: #1e1b18 !important;
  border: 0 !important;
  padding: 0.32rem 0.75rem !important;
  border-radius: 999px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) inset !important;
  z-index: 2 !important; /* keep badge above subtle card overlays */
}

/* Ensure the priority badge remains readable when the card is selected */
.question-selector .question-item.selected .priority-badge {
  /* keep the bright yellow but add a thin dark outline to keep contrast */
  background: linear-gradient(90deg, #ffd166, #ffc857) !important;
  color: #1e1b18 !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  opacity: 1 !important;
}

/* Make the checkbox truly invisible (click the card instead) */
.question-selector .question-checkbox {
  display: none !important;
}

/* Split layout: keep right panel tidy and sticky */
.question-selector .question-selector--split {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
  height: 100%;
}
.question-selector .selector-right {
  position: sticky;
  top: 1rem;
  align-self: start;
  border-radius: 14px;
  padding: 0.85rem;
  max-height: calc(100vh - 6rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}
.question-selector .selected-list {
  overflow: auto;
  min-height: 0;
}

/* Selected chips */
.question-selector .selected-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.45rem 0.6rem;
}
.question-selector .chip-text {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.question-selector .chip-remove {
  width: 22px;
  height: 22px;
  border-radius: 999px;
}
.question-selector .chip-remove:hover {
  background: var(--color-bg-tertiary);
}

/* Selected state overrides - higher specificity for aria-checked */
.question-selector
  .question-list
  .question-item[aria-checked="true"]
  .question-card {
  border: 2px solid rgba(0, 245, 255, 0.4) !important;
  background: rgba(0, 245, 255, 0.05) !important;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

.question-selector
  .question-list
  .question-item[aria-checked="true"]
  .check-icon {
  background: linear-gradient(
    90deg,
    rgba(0, 245, 255, 0.95),
    rgba(102, 126, 234, 0.9)
  ) !important;
  box-shadow: 0 2px 8px rgba(0, 245, 255, 0.3) !important;
}

/* Make the right selected chips reflect the same visual language */
.question-selector .selected-panel .chip.linked-question[aria-checked="true"] {
  border: 1px solid var(--color-accent, #5b8def) !important;
  box-shadow: 0 6px 18px rgba(91, 141, 239, 0.12) !important;
}
/* Hide check icon - selection is indicated by card styling */
.question-selector .check-icon {
  display: none !important;
}

/* Filter chips */
.question-selector .filter-chip {
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
}
.question-selector .filter-chip.active {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
}

/* Search input spacing */
.question-selector .selector-search .form-input {
  height: 42px;
}

/* Scroll areas */
.question-selector .question-list {
  scrollbar-gutter: stable both-edges;
}

/* Slightly increase left padding so check icon doesn't overlap in stacked rows */
.question-selector .question-item .question-card {
  padding-left: 2.2rem !important;
}

/* Improve empty state appearance inside the story panel compact list */
.question-list-compact .empty-state,
.question-selector .empty-state {
  padding: 2.2rem 1.2rem;
  text-align: center;
  color: var(--color-text-tertiary);
  background: transparent;
  border-radius: 8px;
  border: 1px dashed var(--color-border);
}

/* ===== Responsive tweaks ===== */
@media (max-width: 640px) {
  .question-selector .question-text {
    font-size: 0.95rem;
  }
  .question-selector .selected-actions .btn {
    width: 100%;
  }
}

/* ===== Stronger split/grid & row layout overrides (appended) ===== */
/* Ensure the split layout uses explicit grid areas so the right panel
   never floats over the left list and the left list starts at the top. */
.question-selector .question-selector--split {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas: "left" "right" !important;
  gap: 1rem !important;
  height: 100% !important;
}
.question-selector .selector-left {
  grid-area: left !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}
.question-selector .selector-right {
  grid-area: right !important;
}

/* Remove the extra top spacing that pushed the left list down */
.question-selector .selector-header {
  margin: 0 0 0.5rem 0 !important;
}
.question-selector .selector-search {
  margin: 0 !important;
}

/* Make sure the left list can grow and scroll inside the split layout */
.question-selector .question-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}

/* Force categories to be single-column rows in split mode */
.question-selector .question-selector--split .category-questions,
.question-selector.question-selector--rows .category-questions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
}

/* Card visual cleanup for tidy row-wise cards */
.question-selector .question-card {
  border-radius: 14px !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-surface) !important;
  padding: 0.9rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

/* Clean selected state */
.question-selector .question-item.selected .question-card {
  border-color: rgba(0, 245, 255, 0.4) !important;
  border-width: 2px !important;
  background: rgba(0, 245, 255, 0.05) !important;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Sticky category titles (optional polish) */
.question-selector .category-title {
  position: sticky;
  top: 0;
  z-index: 1;
  background: transparent;
  padding: 0.35rem 0;
}

@media (max-width: 1024px) {
  .question-selector .selector-right {
    position: static !important;
    max-height: none !important;
  }
}