@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════
   COMPASS Design System — Dark Theme v3
   Palette: Navy / Lime / Yellow / Teal / Orange
═══════════════════════════════════════════════ */

:root {
  --bg:           #0D1B2A;
  --bg-card:      #1B263B;
  --bg-card-2:    #162032;
  --bg-elevated:  #223249;
  --primary:      #7CFC00;   /* lime green */
  --primary-dark: #5AB800;
  --secondary:    #00BFA6;   /* teal */
  --accent:       #4DA3FF;   /* blue */
  --warning:      #FFD43B;   /* yellow */
  --danger:       #FF6B3D;   /* orange-red */
  --text:         #F2F2F2;
  --text-muted:   #8892A4;
  --text-dim:     #4d5a6e;
  --border:       rgba(255,255,255,0.07);
  --border-med:   rgba(255,255,255,0.12);
  --border-bright:rgba(255,255,255,0.20);
  --shadow:       0 8px 32px rgba(0,0,0,0.45);
  --shadow-sm:    0 2px 12px rgba(0,0,0,0.3);
  --glow-green:   0 0 24px rgba(124,252,0,0.25);
  --glow-teal:    0 0 24px rgba(0,191,166,0.25);
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg) !important;
  color: var(--text);
  min-height: 100vh;
}

/* ── Tailwind global dark overrides ─────────────────────────────────── */
.bg-\[#f0f4ff\],
.bg-\[#f8fafc\] { background: var(--bg) !important; }

.bg-white       { background: var(--bg-card)    !important; }
.bg-gray-50     { background: var(--bg-card-2)  !important; }
.bg-gray-100    { background: var(--bg-elevated) !important; }
.bg-gray-200    { background: rgba(255,255,255,0.10) !important; }

.text-gray-900,
.text-gray-800  { color: var(--text)       !important; }
.text-gray-700,
.text-gray-600  { color: #c5cdd8           !important; }
.text-gray-500,
.text-gray-400  { color: var(--text-muted) !important; }
.text-gray-300  { color: var(--text-dim)   !important; }

.border-gray-100,
.border-gray-200 { border-color: var(--border)     !important; }
.border-gray-300  { border-color: var(--border-med) !important; }

/* Colored bg chips → dark tints */
.bg-emerald-50,  .bg-emerald-100  { background: rgba(124,252,0,0.09)   !important; }
.bg-green-50,    .bg-green-100    { background: rgba(124,252,0,0.09)   !important; }
.bg-amber-50,    .bg-amber-100    { background: rgba(255,212,59,0.09)  !important; }
.bg-yellow-50,   .bg-yellow-100   { background: rgba(255,212,59,0.09)  !important; }
.bg-orange-50,   .bg-orange-100   { background: rgba(255,107,61,0.09)  !important; }
.bg-red-50,      .bg-red-100      { background: rgba(239,68,68,0.09)   !important; }
.bg-indigo-50,   .bg-indigo-100   { background: rgba(77,163,255,0.09)  !important; }
.bg-blue-50,     .bg-blue-100     { background: rgba(77,163,255,0.09)  !important; }
.bg-violet-50,   .bg-violet-100   { background: rgba(167,139,250,0.09) !important; }
.bg-purple-50,   .bg-purple-100   { background: rgba(168,85,247,0.09)  !important; }
.bg-teal-50,     .bg-teal-100     { background: rgba(0,191,166,0.09)   !important; }
.bg-sky-50,      .bg-sky-100      { background: rgba(56,189,248,0.09)  !important; }
.bg-pink-50,     .bg-pink-100     { background: rgba(236,72,153,0.09)  !important; }

/* Colored text → bright accent versions */
.text-emerald-600, .text-emerald-700, .text-emerald-500 { color: #7CFC00 !important; }
.text-emerald-900, .text-emerald-800 { color: #b8ff70 !important; }
.text-green-600,   .text-green-500   { color: #7CFC00 !important; }
.text-amber-700,   .text-amber-600,
.text-amber-500,   .text-yellow-500  { color: #FFD43B !important; }
.text-orange-600,  .text-orange-500  { color: #FF6B3D !important; }
.text-red-500,     .text-red-600     { color: #ff7070 !important; }
.text-indigo-600,  .text-indigo-700,
.text-indigo-800,  .text-indigo-500  { color: #4DA3FF !important; }
.text-blue-600,    .text-blue-700,
.text-blue-500     { color: #4DA3FF  !important; }
.text-violet-500,  .text-violet-600  { color: #c084fc !important; }
.text-purple-600,  .text-purple-500  { color: #c084fc !important; }
.text-teal-600,    .text-teal-500    { color: #00BFA6 !important; }

/* Colored borders → dark tints */
.border-emerald-100, .border-emerald-200 { border-color: rgba(124,252,0,0.15)  !important; }
.border-amber-100,   .border-amber-200   { border-color: rgba(255,212,59,0.15) !important; }
.border-orange-200                        { border-color: rgba(255,107,61,0.15) !important; }
.border-indigo-200,  .border-blue-200    { border-color: rgba(77,163,255,0.2)  !important; }
.border-violet-200,  .border-purple-200  { border-color: rgba(167,139,250,0.2) !important; }
.border-teal-200                          { border-color: rgba(0,191,166,0.2)   !important; }

/* ── Components ──────────────────────────────────────────────────────── */

/* Glass card */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s, transform 0.2s;
}
.glass-card:hover {
  box-shadow: var(--shadow);
}

/* Dark card variants */
.emerald-card {
  background: linear-gradient(135deg, rgba(124,252,0,0.07), var(--bg-card));
  border: 1px solid rgba(124,252,0,0.15);
  border-radius: 20px;
  padding: 20px;
}
.warm-card {
  background: linear-gradient(135deg, rgba(255,107,61,0.07), var(--bg-card));
  border: 1px solid rgba(255,107,61,0.15);
  border-radius: 20px;
  padding: 20px;
}
.amber-card {
  background: linear-gradient(135deg, rgba(255,212,59,0.07), var(--bg-card));
  border: 1px solid rgba(255,212,59,0.15);
  border-radius: 20px;
  padding: 20px;
}
.blue-card {
  background: linear-gradient(135deg, rgba(77,163,255,0.07), var(--bg-card));
  border: 1px solid rgba(77,163,255,0.15);
  border-radius: 20px;
  padding: 20px;
}
.violet-card {
  background: linear-gradient(135deg, rgba(167,139,250,0.07), var(--bg-card));
  border: 1px solid rgba(167,139,250,0.15);
  border-radius: 20px;
  padding: 20px;
}
.red-card {
  background: linear-gradient(135deg, rgba(239,68,68,0.07), var(--bg-card));
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 20px;
  padding: 20px;
}
.teal-card {
  background: linear-gradient(135deg, rgba(0,191,166,0.07), var(--bg-card));
  border: 1px solid rgba(0,191,166,0.15);
  border-radius: 20px;
  padding: 20px;
}

/* Inspirational band */
.insp-band {
  background: linear-gradient(135deg, rgba(124,252,0,0.08), rgba(0,191,166,0.08));
  border: 1px solid rgba(124,252,0,0.12);
  border-radius: 20px;
  padding: 20px;
  margin: 20px 0;
}

/* Hero section */
.page-hero {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 28px 20px 36px;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(124,252,0,0.08) 0%, transparent 70%);
  top: -80px; right: -60px;
  pointer-events: none;
}

.hero-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-bright);
  border-radius: 16px;
  padding: 14px 18px;
  backdrop-filter: blur(10px);
}

/* Card lift */
.card-lift {
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* ── Bottom navigation ───────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-med);
  padding: 8px 0 env(safe-area-inset-bottom, 10px);
  z-index: 100;
  backdrop-filter: blur(20px);
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bottom-nav-item.active {
  color: var(--primary);
}
.bottom-nav-item svg { width: 22px; height: 22px; }
.bottom-nav-item.active svg { stroke: var(--primary); }

/* ── Desktop sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 260px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-med);
  height: 100vh;
  position: fixed;
  left: 0; top: 0;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 2px;
}
.sidebar-item:hover {
  background: rgba(124,252,0,0.07);
  color: var(--primary);
}
.sidebar-item.active {
  background: rgba(124,252,0,0.12);
  color: var(--primary);
  font-weight: 700;
}

/* ── Inputs ──────────────────────────────────────────────────────────── */
.app-input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border-med);
  border-radius: 14px;
  font-size: 0.9rem;
  transition: all 0.2s;
  background: var(--bg-card-2);
  color: var(--text);
  outline: none;
}
.app-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124,252,0,0.12);
}
input, textarea, select {
  background: var(--bg-card-2) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-dim) !important;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--primary);
  color: #0D1B2A;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--glow-green);
}
.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1.5px solid var(--border-med);
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-secondary:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-danger {
  background: var(--danger);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}

/* ── Progress ring ───────────────────────────────────────────────────── */
.progress-ring-circle {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

/* ── Task check ──────────────────────────────────────────────────────── */
.task-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-med);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  cursor: pointer;
  flex-shrink: 0;
}
.task-check.done {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 10px rgba(124,252,0,0.3);
}
.task-check.done svg { color: #0D1B2A; }

/* ── Mood button ─────────────────────────────────────────────────────── */
.mood-btn {
  font-size: 2rem;
  padding: 0.6rem;
  border-radius: 16px;
  border: 2px solid var(--border-med);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card-2);
}
.mood-btn:hover {
  transform: scale(1.15);
  border-color: var(--primary);
}
.mood-btn.selected {
  border-color: var(--primary);
  background: rgba(124,252,0,0.1);
  transform: scale(1.1);
  box-shadow: var(--glow-green);
}

/* ── Chat bubbles ────────────────────────────────────────────────────── */
.chat-bubble-user {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #0D1B2A;
  border-radius: 20px 20px 4px 20px;
  padding: 12px 16px;
  max-width: 75%;
  word-break: break-word;
  font-weight: 600;
}
.chat-bubble-ai {
  background: var(--bg-card);
  border: 1px solid var(--border-med);
  border-radius: 20px 20px 20px 4px;
  padding: 12px 16px;
  max-width: 75%;
  word-break: break-word;
  color: var(--text);
}

/* ── Typing indicator ────────────────────────────────────────────────── */
@keyframes bounce-dot {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}
.typing-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: bounce-dot 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-ring {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.04); opacity: 0.85; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1);   opacity: 0.7; }
  50%       { transform: scale(1.4); opacity: 1; }
}
@keyframes float-hero {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(124,252,0,0.2); }
  50%       { box-shadow: 0 0 40px rgba(124,252,0,0.5); }
}
@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes check-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.slide-up { animation: slideUp 0.45s ease forwards; }
.fade-in  { animation: fadeIn  0.4s ease forwards; }
.streak-badge   { animation: pulse-ring 3s ease-in-out infinite; }
.breathing-circle { animation: breathe 4s ease-in-out infinite; }
.float-hero     { animation: float-hero 5s ease-in-out infinite; }
.glow-pulse     { animation: glow-pulse 2.5s ease-in-out infinite; }
.toast          { animation: toast-in 0.3s ease forwards; }
.check-pop      { animation: check-pop 0.3s ease; }

.stagger > * { opacity: 0; animation: slideUp 0.45s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.12s; }
.stagger > *:nth-child(3) { animation-delay: 0.19s; }
.stagger > *:nth-child(4) { animation-delay: 0.26s; }
.stagger > *:nth-child(5) { animation-delay: 0.33s; }
.stagger > *:nth-child(6) { animation-delay: 0.40s; }

/* ── Category chips ──────────────────────────────────────────────────── */
.category-body    { background: rgba(124,252,0,0.12);  color: #7CFC00; }
.category-mind    { background: rgba(167,139,250,0.12); color: #c084fc; }
.category-home    { background: rgba(255,212,59,0.12);  color: #FFD43B; }
.category-purpose { background: rgba(77,163,255,0.12);  color: #4DA3FF; }
.category-people  { background: rgba(255,107,61,0.12);  color: #FF6B3D; }

/* ── Scrollbar ───────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Relapse overlay ─────────────────────────────────────────────────── */
.relapse-overlay {
  background: linear-gradient(135deg, #0D1B2A 0%, #1a0a2e 50%, #0D1B2A 100%);
}

/* ── Quote card ──────────────────────────────────────────────────────── */
.quote-card {
  background: var(--bg-card);
  border-radius: 20px;
  border-left: 4px solid var(--primary);
  position: relative;
  overflow: hidden;
}