/* Eisenhower Health Workshop Showcase — Custom Styles */

/* Narrative typography */
.narrative-line { line-height: 1.75; margin-bottom: 0.25rem; }
.narrative-line:empty { margin-bottom: 1rem; }

/* Sidebar phase badge */
.phase-badge {
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background: rgba(148, 163, 184, 0.15);
  color: rgb(148, 163, 184);
}

/* Comment sentiment chips */
.sentiment-chip {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: all 0.15s ease;
}
.sentiment-chip:hover { opacity: 0.85; }
.sentiment-chip[data-active="true"] { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); }

.sentiment-resonance { background: rgba(16, 185, 129, 0.1); color: rgb(5, 150, 105); border-color: rgba(16, 185, 129, 0.3); }
.sentiment-disagreement { background: rgba(239, 68, 68, 0.1); color: rgb(220, 38, 38); border-color: rgba(239, 68, 68, 0.3); }
.sentiment-question { background: rgba(59, 130, 246, 0.1); color: rgb(37, 99, 235); border-color: rgba(59, 130, 246, 0.3); }
.sentiment-suggestion { background: rgba(168, 85, 247, 0.1); color: rgb(147, 51, 234); border-color: rgba(168, 85, 247, 0.3); }

/* Journey timeline */
.timeline-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.timeline-dot-complete { background: rgb(16, 185, 129); }
.timeline-dot-upcoming { background: rgb(203, 213, 225); }
.timeline-line {
  width: 2px;
  min-height: 2rem;
  flex-shrink: 0;
}

/* Smooth section transitions */
[x-show] { transition: opacity 0.2s ease; }

/* Scrollbar styling */
.sidebar-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 2px; }