/**
 * ============================================
 * BRAINDUMP - SMART STACK CSS v9.0.0
 * ============================================
 *
 * @version     9.0.0
 * @date        2026-01-06
 *
 * DESIGN PHILOSOPHY (Research-Based):
 * "Only what's truly important right now"
 * - Tiago Forte PARA: Actionable vs Reference
 * - Progressive disclosure, minimize cognitive load
 * - Quick scan, instant understanding
 *
 * LAYOUT:
 * - "Jetzt Klären" = MAX 3 items, prominently styled
 * - Compact cards for efficient space usage
 * - Desktop: Wide layout, more info visible
 * - Mobile: Single column, touch-friendly
 * ============================================
 */

/* ================================================
   DESIGN TOKENS - Using Unified System
   ================================================

   NOTE: Primary tokens now defined in design-tokens.css
   These are Smart Stack specific overrides/aliases

   @version 7.2.0
   @date 2026-01-04
   ================================================ */

:root {
  /*
   * V3.0 UPDATE: Light-first defaults for better mymind-style visuals
   * Dark themes override these values
   */

  /* Surfaces - Light defaults */
  --surface-bg: var(--bd-bg-elevated, #f8f9fa);
  --card-bg: var(--bd-bg-card, #ffffff);
  --card-bg-hover: var(--bd-bg-card-hover, #f1f3f4);
  --card-bg-action: var(--bd-bg-action, rgba(26, 115, 232, 0.06));
  --card-border: var(--bd-border, #e0e0e0);
  --card-radius: var(--bd-radius-md, 12px);

  /* Action Colors - Light theme default */
  --action-primary: var(--bd-primary, #1a73e8);
  --action-bg: var(--bd-bg-action, rgba(26, 115, 232, 0.08));
  --action-border: var(--bd-border-action, rgba(26, 115, 232, 0.25));

  /* Type Colors - Kept for visual distinction */
  --type-voice: var(--bd-type-voice, #7c3aed);
  --type-link: var(--bd-type-link, #10b981);
  --type-text: var(--bd-type-text, #ec4899);
  --type-file: var(--bd-type-file, #3b82f6);
  --type-image: var(--bd-type-image, #f59e0b);

  /* Typography - Light defaults */
  --text-primary: var(--bd-text-primary, #202124);
  --text-secondary: var(--bd-text-secondary, #5f6368);
  --text-muted: var(--bd-text-muted, #80868b);

  /* Grid */
  --grid-gap: var(--bd-space-3, 12px);

  /* Animation */
  --ease: var(--bd-ease, cubic-bezier(0.4, 0, 0.2, 1));
  --duration: var(--bd-duration-base, 200ms);
}

/* ================================================
   THEME-SPECIFIC OVERRIDES
   ================================================ */

/* Neon Coral Theme */
[data-theme="neon-coral"] {
  --action-primary: #FF6B6B;
  --action-bg: rgba(255, 107, 107, 0.1);
  --action-border: rgba(255, 107, 107, 0.3);
  --card-bg-action: rgba(255, 107, 107, 0.08);
  --action-glow: rgba(255, 107, 107, 0.05);
  --action-glow-strong: rgba(255, 107, 107, 0.2);
  --chip-bg-default: rgba(255, 107, 107, 0.15);
  --chip-border-default: rgba(255, 107, 107, 0.3);
}

/* Electric Violet Theme */
[data-theme="electric-violet"] {
  --action-primary: #8B5CF6;
  --action-bg: rgba(139, 92, 246, 0.1);
  --action-border: rgba(139, 92, 246, 0.3);
  --card-bg-action: rgba(139, 92, 246, 0.08);
  --action-glow: rgba(139, 92, 246, 0.05);
  --action-glow-strong: rgba(139, 92, 246, 0.2);
  --chip-bg-default: rgba(139, 92, 246, 0.15);
  --chip-border-default: rgba(139, 92, 246, 0.3);
}

/* Superhuman Blue Theme */
[data-theme="superhuman-blue"] {
  --action-primary: #0068B1;
  --action-bg: rgba(0, 104, 177, 0.1);
  --action-border: rgba(0, 104, 177, 0.3);
  --card-bg-action: rgba(0, 104, 177, 0.08);
  --action-glow: rgba(0, 104, 177, 0.05);
  --action-glow-strong: rgba(0, 104, 177, 0.2);
  --chip-bg-default: rgba(0, 104, 177, 0.15);
  --chip-border-default: rgba(0, 104, 177, 0.3);
}

/* Warm Vault Theme (Dark) */
[data-theme="warm-vault"] {
  /* Dark surfaces */
  --surface-bg: #141414;
  --card-bg: #1A1A1A;
  --card-bg-hover: #242424;
  --card-border: rgba(255, 255, 255, 0.08);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.48);

  /* Action colors */
  --action-primary: #E6B87D;
  --action-bg: rgba(230, 184, 125, 0.1);
  --action-border: rgba(230, 184, 125, 0.3);
  --card-bg-action: rgba(230, 184, 125, 0.08);
  --action-glow: rgba(230, 184, 125, 0.05);
  --action-glow-strong: rgba(230, 184, 125, 0.2);
  --chip-bg-default: rgba(230, 184, 125, 0.15);
  --chip-border-default: rgba(230, 184, 125, 0.3);
}

/* Material Android Theme (Light) */
[data-theme="material-android"] {
  --action-primary: #1a73e8;
  --action-bg: rgba(26, 115, 232, 0.08);
  --action-border: rgba(26, 115, 232, 0.25);
  --card-bg-action: rgba(26, 115, 232, 0.06);
  --action-glow: rgba(26, 115, 232, 0.05);
  --action-glow-strong: rgba(26, 115, 232, 0.15);
  --chip-bg-default: rgba(26, 115, 232, 0.1);
  --chip-border-default: rgba(26, 115, 232, 0.25);

  /* Light theme surface colors */
  --surface-bg: #f8f9fa;
  --card-bg: #ffffff;
  --card-bg-hover: #f1f3f4;
  --card-border: #dadce0;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
}

/* ================================================
   SMART STACK CONTAINER
   ================================================ */

.smart-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ================================================
   SECTIONS
   ================================================ */

.ss-section {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

/* ================================================
   "JETZT KLÄREN" SECTION - Premium Action Zone v2.0
   ================================================

   CHANGES (Expert Panel 2026-01-04):
   - Julie Zhuo: 22px header, centered, animated icon
   - Refactoring UI: Multi-layer shadow, 2px border
   - Luke Wroblewski: Bigger touch targets
   - Aarron Walter: Pulse animation, motivating subtext
   ================================================ */

/* V9.0: mymind-inspired "JETZT KLÄREN" - Clean, no heavy borders */
.ss-section--needs-action {
  border: none;
  border-radius: var(--bd-radius-lg, 16px);
  padding: 0;
  margin-bottom: var(--bd-space-6, 24px);
  position: relative;
  overflow: hidden;

  /* Clean white/light background - mymind style */
  background: var(--card-bg, #ffffff);

  /* Subtle shadow only - no glows, no borders */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.06);

  transition: all var(--duration) var(--ease);
}

.ss-section--needs-action:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.08);
}

/* V9.0: mymind-style header - Clean, minimal */
.ss-section--needs-action .ss-section__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--bd-space-5, 20px) var(--bd-space-5, 20px) var(--bd-space-3, 12px);
  background: transparent;
  margin-bottom: 0;
  gap: var(--bd-space-2, 8px);
}

.ss-section--needs-action .ss-section__icon {
  font-size: 24px;
  /* No animation - clean and calm */
  filter: none;
}

/* Remove pulse animation for calmer UI */
@keyframes action-pulse {
  0%, 100% { transform: scale(1); }
}

.ss-section--needs-action .ss-section__title {
  font-size: var(--bd-text-lg, 17px);
  font-weight: var(--bd-weight-semibold, 600);
  color: var(--v3-accent, #F97316);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

/* NEW: Motivating subtext */
.ss-section--needs-action .ss-section__subtitle {
  font-size: var(--bd-text-sm, 13px);
  color: var(--text-secondary);
  font-weight: var(--bd-weight-medium, 500);
}

/* V9.0: Subtle count badge */
.ss-section--needs-action .ss-section__count {
  background: var(--v3-accent, #F97316);
  color: white;
  font-weight: var(--bd-weight-semibold, 600);
  padding: 4px 12px;
  border-radius: var(--bd-radius-full, 9999px);
  font-size: var(--bd-text-xs, 11px);
  box-shadow: none;
  margin-top: var(--bd-space-1, 4px);
}

/* Content area with padding */
.ss-section--needs-action .ss-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--bd-space-4, 16px);
  padding: var(--bd-space-4, 16px) var(--bd-space-5, 20px) var(--bd-space-5, 20px);
}

@media (min-width: 640px) {
  .ss-section--needs-action .ss-section__content {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--bd-space-4, 16px);
  }

  .ss-section--needs-action .ss-item {
    flex: 1 1 calc(50% - 8px);
    min-width: 300px;
    max-width: none;
  }
}

/* Desktop: Full-width cards for better readability */
@media (min-width: 1024px) {
  .ss-section--needs-action .ss-section__content {
    gap: var(--bd-space-5, 20px);
  }

  .ss-section--needs-action .ss-item {
    flex: 1 1 calc(50% - 12px);
    min-width: 400px;
  }
}

/* Large Desktop: 3-column layout */
@media (min-width: 1400px) {
  .ss-section--needs-action .ss-item {
    flex: 1 1 calc(33.33% - 14px);
    min-width: 350px;
  }
}

/* Mobile: Full-bleed for impact */
@media (max-width: 639px) {
  .ss-section--needs-action {
    margin-left: calc(-1 * var(--bd-space-4, 16px));
    margin-right: calc(-1 * var(--bd-space-4, 16px));
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top-width: 3px;
    border-bottom-width: 3px;
  }
}

/* ================================================
   SECTION HEADER - Clean & Readable
   ================================================ */

.ss-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin-bottom: 12px;
}

.ss-section__icon {
  font-size: 16px;
  opacity: 0.8;
}

.ss-section__title {
  font-size: var(--bd-text-xs, 11px);
  font-weight: var(--bd-weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
}

.ss-section__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 10px;
  border-radius: 10px;
  margin-left: auto;
}

/* ================================================
   "MEHR ANZEIGEN" BUTTON
   ================================================ */

/* V9.0: mymind-style button - visible on white backgrounds */
.ss-section__more-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 12px;
  background: #fafafa;
  border: 2px dashed rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: #737373;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.ss-section__more-btn:hover {
  background: rgba(249, 115, 22, 0.08);
  border-color: var(--v3-accent, #F97316);
  color: var(--v3-accent, #F97316);
}

/* ================================================
   LIBRARY SECTION - Grid Layout
   ================================================ */

.ss-section--library .ss-section__content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--grid-gap);
}

@media (max-width: 479px) {
  .ss-section--library .ss-section__content {
    grid-template-columns: 1fr;
  }
}

/* Desktop: Larger cards in library grid */
@media (min-width: 1024px) {
  .ss-section--library .ss-section__content {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--bd-space-4, 16px);
  }
}

/* Large Desktop: Even larger cards */
@media (min-width: 1400px) {
  .ss-section--library .ss-section__content {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--bd-space-5, 20px);
  }
}

/* ================================================
   VISUAL CARD - Premium Things 3 Style
   ================================================ */

/* V9.0: mymind-style cards - NO borders, clean shadows */
.ss-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--card-bg, #ffffff);
  border: none;
  border-radius: var(--card-radius, 12px);
  overflow: hidden;
  cursor: pointer;

  /* mymind-style subtle shadow */
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.04);

  transition:
    background var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.ss-item:hover {
  background: var(--card-bg-hover, #fafafa);
  transform: translateY(-2px);

  /* Slightly elevated on hover */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ================================================
   CARD TYPE INDICATOR - Compact Left Strip
   ================================================ */

.ss-item__type-strip {
  width: 4px;
  flex-shrink: 0;
}

.ss-item--voice .ss-item__type-strip { background: var(--type-voice); }
.ss-item--link .ss-item__type-strip { background: var(--type-link); }
.ss-item--text .ss-item__type-strip { background: var(--type-text); }
.ss-item--file .ss-item__type-strip { background: var(--type-file); }
.ss-item--image .ss-item__type-strip { background: var(--type-image); }

/* ================================================
   CARD THUMBNAIL - Small & Efficient
   ================================================ */

.ss-item__thumbnail {
  position: relative;
  width: 80px;
  min-height: 80px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
}

.ss-item__thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ss-item__thumbnail-icon {
  font-size: 28px;
  opacity: 0.5;
}

/* Type badge - Small, top-left */
.ss-item__type-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: white;
}

.ss-item--voice .ss-item__type-badge { background: var(--type-voice); }
.ss-item--link .ss-item__type-badge { background: var(--type-link); }
.ss-item--text .ss-item__type-badge { background: var(--type-text); }
.ss-item--file .ss-item__type-badge { background: var(--type-file); }
.ss-item--image .ss-item__type-badge { background: var(--type-image); }

/* Voice card - Compact waveform */
.ss-item--voice .ss-item__thumbnail {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
}

.ss-item__waveform {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
}

.ss-item__waveform-bar {
  width: 3px;
  background: var(--type-voice);
  border-radius: 2px;
  opacity: 0.7;
}

.ss-item__waveform-bar:nth-child(1) { height: 12px; }
.ss-item__waveform-bar:nth-child(2) { height: 20px; }
.ss-item__waveform-bar:nth-child(3) { height: 14px; }
.ss-item__waveform-bar:nth-child(4) { height: 24px; }
.ss-item__waveform-bar:nth-child(5) { height: 16px; }
.ss-item__waveform-bar:nth-child(6) { height: 10px; }
.ss-item__waveform-bar:nth-child(7) { height: 18px; }

/* ================================================
   CARD BODY - Maximum Information Density
   ================================================ */

.ss-item__body {
  flex: 1;
  min-width: 0;
  padding: var(--bd-space-3, 12px) var(--bd-space-4, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.ss-item__title {
  font-size: var(--bd-text-lg, 17px);
  font-weight: var(--bd-weight-semibold, 600);
  line-height: var(--bd-leading-tight, 1.25);
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ss-item__summary {
  font-size: var(--bd-text-sm, 13px);
  line-height: var(--bd-leading-normal, 1.5);
  color: var(--text-secondary);
  margin: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================
   CARD META - Compact Row
   ================================================ */

.ss-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.ss-item__source {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--type-link);
  font-weight: 500;
}

.ss-item__source-favicon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.ss-item__source-domain {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-item__time {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

.ss-item__drawer {
  font-size: 12px;
}

/* ================================================
   CARD TAGS - Inline, Compact
   ================================================ */

.ss-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.ss-item__tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: var(--text-muted);
}

/* ================================================
   ACTION ITEM CARD - Extended with Follow-ups
   ================================================ */

.ss-item--needs-action {
  flex-direction: column;
  background: var(--card-bg-action);
  border-color: var(--action-border, rgba(245, 158, 11, 0.25));
}

.ss-item--needs-action:hover {
  border-color: var(--action-primary);
  box-shadow: 0 8px 24px var(--action-glow-strong, rgba(245, 158, 11, 0.15));
}

/* Top row: thumbnail + content */
.ss-item--needs-action .ss-item__main {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.ss-item--needs-action .ss-item__title {
  color: var(--text-primary);
  font-weight: 700;
}

/* Follow-up questions section */
.ss-item__followups {
  width: 100%;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

.ss-item__followups-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--action-primary);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ss-item__followup-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ss-item__followup-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.ss-item__followup-item:hover {
  background: var(--action-bg, rgba(245, 158, 11, 0.1));
  border-color: var(--action-primary);
}

.ss-item__followup-bullet {
  color: var(--action-primary);
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
}

.ss-item__followup-text {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  flex: 1;
}

/* Action buttons - 40/60 Split (Expert Panel: Julie Zhuo) */
.ss-item__actions-row {
  display: flex;
  width: 100%;
  gap: var(--bd-space-2, 8px);
  padding: var(--bd-space-3, 12px) var(--bd-space-4, 16px);
  background: rgba(0, 0, 0, 0.15);
  border-top: 2px solid var(--card-border);
}

.ss-item__action-later,
.ss-item__action-done {
  padding: var(--bd-space-3, 12px) var(--bd-space-4, 16px);
  border: none;
  font-size: var(--bd-text-sm, 13px);
  font-weight: var(--bd-weight-bold, 700);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: var(--bd-radius-sm, 8px);
}

/* Später - Secondary (40%) */
.ss-item__action-later {
  flex: 0 0 38%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--card-border);
}

.ss-item__action-later:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: var(--action-primary);
}

/* Erledigt - Primary (60%) */
.ss-item__action-done {
  flex: 0 0 60%;
  background: var(--action-primary);
  color: var(--bd-bg-app, #0A0A0A);
  font-size: var(--bd-text-base, 15px);
  box-shadow: 0 2px 8px var(--action-glow-strong, rgba(230, 184, 125, 0.3));
}

.ss-item__action-done:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--action-glow-strong, rgba(230, 184, 125, 0.4));
}

.ss-item__action-done:active {
  transform: scale(0.98);
}

/* Status indicator */
.ss-item__status {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--action-primary);
  box-shadow: 0 0 8px var(--action-primary);
}

/* ================================================
   QUICK-REPLY CHIPS - Dopamin-optimierte Auswahl
   ================================================ */

.ss-item__quick-reply {
  width: 100%;
  padding: var(--bd-space-4, 16px);
  background: rgba(255, 255, 255, 0.04);
  border-top: 2px solid var(--card-border);
}

/* Prominent question label */
.ss-item__quick-reply-label {
  font-size: var(--bd-text-sm, 13px);
  font-weight: var(--bd-weight-bold, 700);
  color: var(--action-primary);
  margin-bottom: var(--bd-space-3, 12px);
  display: flex;
  align-items: center;
  gap: var(--bd-space-2, 8px);
}

.ss-item__quick-reply-label::before {
  content: "💡";
  font-size: 16px;
}

.ss-item__quick-reply-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bd-space-3, 12px);
}

/* Chips - Bigger & More Prominent (44px touch target) */
.ss-item__chip {
  display: flex;
  align-items: center;
  gap: var(--bd-space-2, 8px);
  padding: var(--bd-space-3, 12px) var(--bd-space-4, 16px);
  min-height: 44px;
  background: linear-gradient(
    135deg,
    var(--chip-bg-default, rgba(230, 184, 125, 0.15)) 0%,
    var(--action-bg, rgba(230, 184, 125, 0.2)) 100%
  );
  border: 2px solid var(--chip-border-default, rgba(230, 184, 125, 0.3));
  border-radius: var(--bd-radius-md, 12px);
  color: var(--action-primary, #E6B87D);
  font-size: var(--bd-text-base, 15px);
  font-weight: var(--bd-weight-semibold, 600);
  cursor: pointer;

  /* Premium shadow */
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 0 8px var(--action-glow, rgba(230, 184, 125, 0.1));

  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.ss-item__chip:hover {
  background: var(--action-primary, #E6B87D);
  border-color: var(--action-primary, #E6B87D);
  color: var(--bd-bg-app, #0A0A0A);
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(0, 0, 0, 0.1),
    0 0 20px var(--action-glow-strong, rgba(230, 184, 125, 0.3));
}

.ss-item__chip:active {
  transform: scale(0.97) translateY(0);
}

.ss-item__chip--selected {
  animation: chip-success 400ms ease forwards;
}

@keyframes chip-success {
  0% { transform: scale(1); }
  30% { transform: scale(1.15); box-shadow: 0 0 24px var(--action-glow-strong); }
  100% { transform: scale(0.9); opacity: 0.5; }
}

.ss-item__chip-icon {
  font-size: 18px;
}

.ss-item__chip-label {
  font-size: var(--bd-text-sm, 13px);
  font-weight: var(--bd-weight-medium, 500);
}

/* Responsive: Auf Mobile nur Icons */
@media (max-width: 400px) {
  .ss-item__chip {
    padding: 10px;
  }

  .ss-item__chip-label {
    display: none;
  }

  .ss-item__chip-icon {
    font-size: 18px;
  }
}

/* ================================================
   EMPTY STATE
   ================================================ */

.ss-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  border-radius: var(--card-radius);
}

.ss-empty__icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.ss-empty__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.ss-empty__text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.ss-empty__cta {
  padding: 12px 24px;
  background: var(--action-primary);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: transform var(--duration) var(--ease);
}

.ss-empty__cta:hover {
  transform: scale(1.05);
}

/* Y Combinator QW-3: Animated Empty States */
.ss-empty--animated {
  animation: ssEmptyFadeIn 0.5s ease-out;
}

@keyframes ssEmptyFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ss-empty__icon--bounce {
  animation: ssEmptyBounce 2s ease-in-out infinite;
}

@keyframes ssEmptyBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ================================================
   PROGRESS BAR
   ================================================ */

.ss-progress {
  padding: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
}

.ss-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ss-progress__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.ss-progress__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.ss-progress__bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.ss-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--action-primary), var(--type-link));
  border-radius: 3px;
  transition: width 500ms var(--ease);
}

.ss-progress__streak {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--type-voice);
}

/* ================================================
   CLUSTER CARDS - Premium Grouped Layout
   ================================================ */

.ss-cluster-card {
  padding: var(--bd-space-4, 16px);
  background: var(--card-bg);
  border: 1px solid var(--bd-border-light, rgba(255, 255, 255, 0.12));
  border-radius: var(--card-radius);

  /* Subtle premium shadow */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.04);
}

.ss-cluster-card__header {
  display: flex;
  align-items: center;
  gap: var(--bd-space-3, 12px);
  margin-bottom: var(--bd-space-3, 12px);
  padding-bottom: var(--bd-space-3, 12px);
  border-bottom: 1px solid var(--card-border);
}

.ss-cluster-card__icon {
  font-size: 16px;
  opacity: 0.9;
}

.ss-cluster-card__label {
  font-size: var(--bd-text-base, 15px);
  font-weight: var(--bd-weight-semibold, 600);
  color: var(--text-primary);
  flex: 1;
}

.ss-cluster-card__count {
  font-size: var(--bd-text-xs, 11px);
  font-weight: var(--bd-weight-bold, 700);
  color: var(--text-secondary);
  background: var(--bd-border-light, rgba(255, 255, 255, 0.1));
  padding: 4px 10px;
  border-radius: var(--bd-radius-full, 9999px);
}

/* Items Container - Standard Card Layout */
.ss-cluster-card__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cluster items use standard card styling */
.ss-item--cluster {
  border-color: var(--card-border);
}

.ss-item--cluster:hover {
  border-color: var(--bd-border-light, rgba(255, 255, 255, 0.15));
}

.ss-cluster-card__more {
  margin-top: var(--bd-space-3, 12px);
  width: 100%;
  padding: var(--bd-space-3, 12px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--bd-border-light, rgba(255, 255, 255, 0.12));
  border-radius: var(--bd-radius-sm, 8px);
  font-size: var(--bd-text-sm, 13px);
  font-weight: var(--bd-weight-medium, 500);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}

.ss-cluster-card__more:hover {
  background: var(--bd-bg-action, rgba(230, 184, 125, 0.08));
  border-color: var(--action-primary);
  color: var(--action-primary);
}

/* ================================================
   SKELETON LOADING
   ================================================ */

.ss-skeleton {
  display: flex;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  overflow: hidden;
}

.ss-skeleton__thumbnail {
  width: 80px;
  height: 80px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.06) 50%, rgba(255, 255, 255, 0.03) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.ss-skeleton__body {
  flex: 1;
  padding: 12px 14px;
}

.ss-skeleton__line {
  height: 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  margin-bottom: 8px;
}

.ss-skeleton__line--short { width: 60%; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ================================================
   ANIMATIONS
   ================================================ */

.ss-item {
  animation: card-fade-in 0.3s var(--ease) forwards;
  opacity: 0;
}

@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.ss-item:nth-child(1) { animation-delay: 0ms; }
.ss-item:nth-child(2) { animation-delay: 50ms; }
.ss-item:nth-child(3) { animation-delay: 100ms; }
.ss-item:nth-child(n+4) { animation-delay: 150ms; }

/* ================================================
   REDUCED MOTION
   ================================================ */

@media (prefers-reduced-motion: reduce) {
  .ss-item {
    animation: none;
    opacity: 1;
  }
}

/* ================================================
   LOCAL/PENDING ITEMS
   ================================================ */

.ss-item--local {
  opacity: 0.6;
}

/* ================================================
   COLLAPSED SECTIONS
   ================================================ */

.ss-section--collapsed .ss-section__content {
  display: none;
}

.ss-section__toggle {
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 8px;
}