/* ================================================================
   MINDCARE DESIGN SYSTEM — Teal + Indigo
   Version 1.0  |  Modern Mental-Health Dashboard
   Inspired by Stripe, Linear & Headspace
   Load LAST in each page to take cascade priority.
   NO business logic or JavaScript class names are modified.
================================================================ */

/* ─────────────────────────────────────────────────────────────
   1. DESIGN TOKENS  (CSS Custom Properties)
───────────────────────────────────────────────────────────── */
:root {
  /* Primary – Teal */
  --primary-teal:       #14B8A6;
  --primary-teal-dark:  #0F766E;
  --primary-teal-light: #5EEAD4;

  /* Secondary – Indigo */
  --primary-indigo:       #4F46E5;
  --primary-indigo-dark:  #3730A3;
  --primary-indigo-light: #A5B4FC;

  /* Background */
  --bg-main:    #F8FAFC;
  --bg-card:    #FFFFFF;
  --bg-sidebar: #FFFFFF;

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;

  /* Border */
  --border-light: #E2E8F0;

  /* Mood Scale */
  --mood-excellent: #10B981;
  --mood-good:      #14B8A6;
  --mood-okay:      #6366F1;
  --mood-low:       #F59E0B;
  --mood-bad:       #EF4444;

  /* Shadows */
  --shadow-card:       0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.09);
  --shadow-sidebar:    0 8px 20px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --t-fast:   0.15s ease;
  --t-normal: 0.2s ease;
  --t-slow:   0.3s ease;
  --t-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ─────────────────────────────────────────────────────────────
   2. GLOBAL BODY / BACKGROUND
───────────────────────────────────────────────────────────── */
body:not(.ai-chat-page) {
  background-color: var(--bg-main) !important;
}


/* ─────────────────────────────────────────────────────────────
   3. DASHBOARD HERO  — Teal → Indigo gradient
───────────────────────────────────────────────────────────── */
.dashboard-hero {
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-indigo) 100%) !important;
  background-size: 200% 200% !important;
  animation: mcHeroShift 14s ease infinite !important;
  box-shadow: 0 10px 36px rgba(20, 184, 166, 0.28) !important;
}

@keyframes mcHeroShift {
  0%,100% { background-position: 0%   50%; }
  50%     { background-position: 100% 50%; }
}

/* Stats chips inside hero */
.hero-stat-chip {
  background: rgba(255, 255, 255, 0.2)  !important;
  border:     1.5px solid rgba(255, 255, 255, 0.38) !important;
  transition: all var(--t-normal) !important;
}
.hero-stat-chip:hover {
  background:        rgba(255, 255, 255, 0.3) !important;
  transform:         translateY(-2px)          !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12)     !important;
}

/* Sun / greeting icon */
.ig-sun-icon {
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-indigo) 100%) !important;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35) !important;
}

/* Check-in smiley circle */
.checkin-smiley {
  background: var(--primary-teal) !important;
  box-shadow:  0 4px 16px rgba(20, 184, 166, 0.3) !important;
}
.checkin-smiley:hover {
  box-shadow: 0 8px 28px rgba(20, 184, 166, 0.4) !important;
}

/* Card top shimmer bar */
.checkin-card-premium::before {
  background: linear-gradient(90deg,
    var(--primary-teal),
    var(--primary-indigo),
    var(--primary-teal-light),
    var(--primary-teal)) !important;
  background-size: 300% 100% !important;
}


/* ─────────────────────────────────────────────────────────────
   4. SIDEBAR NAVIGATION  (navigation-v2.css override)
───────────────────────────────────────────────────────────── */
.sidebar-nav {
  background: var(--bg-sidebar)     !important;
  border-right: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sidebar) !important;
}

/* Logo branding */
.sidebar-logo i {
  color: var(--primary-teal) !important;
}
.sidebar-logo-text {
  background: linear-gradient(90deg, var(--primary-teal), var(--primary-indigo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Toggle button */
.sidebar-toggle-btn:hover {
  background: #F1F5F9             !important;
  color:       var(--primary-indigo) !important;
}

/* Nav items – default */
.sidebar-item {
  color:         var(--text-secondary) !important;
  border-radius: 10px                  !important;
  margin:        2px 10px              !important;
  padding:       12px 14px             !important;
  transition:    all var(--t-normal)   !important;
}
.sidebar-item i {
  transition: transform var(--t-normal) !important;
}

/* Nav items – hover */
.sidebar-item:hover {
  background: #F1F5F9             !important;
  color:       var(--primary-indigo) !important;
  transform:   none                  !important;
}
.sidebar-item:hover i {
  transform: scale(1.12) !important;
  color:     var(--primary-indigo) !important;
}

/* Nav items – active */
.sidebar-item.active {
  background:  #EEF2FF               !important;
  color:        var(--primary-indigo) !important;
  border-radius: 10px                !important;
  font-weight:   600                 !important;
}
.sidebar-item.active i {
  color: var(--primary-indigo) !important;
}
.sidebar-item.active::before {
  background: var(--primary-indigo) !important;
}

/* Logout item */
.sidebar-logout-btn:hover {
  background: rgba(239, 68, 68, 0.06) !important;
  color: #EF4444 !important;
}
.sidebar-logout-btn:hover i {
  color: #EF4444 !important;
  transform: scale(1.1) !important;
}


/* ─────────────────────────────────────────────────────────────
   5. BOTTOM TAB NAVIGATION  (mobile)
───────────────────────────────────────────────────────────── */
.bottom-nav .nav-item.active,
.bottom-nav .nav-item.active i {
  color: var(--primary-teal) !important;
}
.bottom-nav .nav-item:hover {
  color: var(--primary-indigo) !important;
}
.bottom-nav {
  border-top: 1px solid var(--border-light) !important;
}


/* ─────────────────────────────────────────────────────────────
   6. CARD SYSTEM  (Stripe / Linear aesthetic)
───────────────────────────────────────────────────────────── */
.ig-card,
.checkin-card-premium,
.checkin-card-v3,
.feature-card {
  background:    var(--bg-card)        !important;
  border:        1px solid var(--border-light)  !important;
  border-radius: 16px                  !important;
  box-shadow:    var(--shadow-card)    !important;
  transition:    transform var(--t-normal), box-shadow var(--t-normal) !important;
}
.ig-card:hover {
  transform:  translateY(-3px)           !important;
  box-shadow: var(--shadow-card-hover)   !important;
}

/* Stagger entrance */
@keyframes mcCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ig-card { animation: mcCardIn 0.32s ease both; }
.ig-card:nth-child(2) { animation-delay: 0.06s; }
.ig-card:nth-child(3) { animation-delay: 0.12s; }
.ig-card:nth-child(4) { animation-delay: 0.18s; }


/* ─────────────────────────────────────────────────────────────
   7. BUTTON DESIGN SYSTEM
───────────────────────────────────────────────────────────── */

/* ── Primary (teal) ── */
.save-mood-btn-v3 {
  background:    var(--primary-teal) !important;
  color:          white               !important;
  border:         none                !important;
  border-radius:  10px                !important;
  font-weight:    600                 !important;
  transition:     all var(--t-normal) !important;
}
.save-mood-btn-v3:hover:not(:disabled) {
  background:  var(--primary-teal-dark)         !important;
  transform:   translateY(-1px)                 !important;
  box-shadow:  0 6px 20px rgba(20,184,166,0.32) !important;
}
.save-mood-btn-v3:focus-visible {
  outline:        2px solid var(--primary-indigo-light) !important;
  outline-offset: 2px !important;
}
.save-mood-btn-v3:disabled {
  background: var(--primary-teal-light) !important;
  opacity:    0.55                      !important;
  cursor:     not-allowed               !important;
}

/* ── Primary landing page CTAs ── */
.btn-primary {
  background: linear-gradient(135deg,
    var(--primary-teal)   0%,
    var(--primary-indigo) 100%) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.35) !important;
  animation: mcGradientShift 5s ease infinite !important;
}
@keyframes mcGradientShift {
  0%,100% { background-position: 0%   50%; }
  50%     { background-position: 100% 50%; }
}
.btn-primary:hover {
  transform:  translateY(-3px) scale(1.02)          !important;
  box-shadow: 0 14px 34px rgba(20, 184, 166, 0.45) !important;
}
.btn-primary:focus-visible {
  outline: 3px solid var(--primary-indigo-light) !important;
  outline-offset: 2px !important;
}

/* ── Ghost buttons on landing ── */
.btn-ghost:focus-visible {
  outline: 3px solid rgba(255,255,255,0.7) !important;
  outline-offset: 2px !important;
}

/* ── New Chat button ── */
.new-chat-btn {
  background:    rgba(79, 70, 229, 0.08)  !important;
  border:        1px solid rgba(79,70,229,0.22) !important;
  color:          var(--primary-indigo)    !important;
  border-radius:  10px                     !important;
}
.new-chat-btn:hover {
  background: rgba(79, 70, 229, 0.16) !important;
}


/* ─────────────────────────────────────────────────────────────
   8. LINK STYLING
───────────────────────────────────────────────────────────── */
/* Scope to content links; exclude navigation / CTA classes */
.main-content a:not([class]),
.main-content a.text-link {
  color:      var(--primary-indigo);
  transition: color var(--t-fast);
}
.main-content a:not([class]):hover,
.main-content a.text-link:hover {
  color:           var(--primary-indigo-dark);
  text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────
   9. MOOD SELECTOR — Animated
───────────────────────────────────────────────────────────── */

/* V3 fast emoji buttons */
.mood-btn-v3 {
  transition: transform 0.22s var(--t-bounce), filter 0.2s ease, opacity 0.2s ease !important;
}
.mood-btn-v3:hover {
  transform: scale(1.14) !important;
  filter:    grayscale(0) !important;
  opacity:   1            !important;
}

@keyframes mcMoodBounce {
  0%   { transform: scale(1);    }
  30%  { transform: scale(1.38); }
  55%  { transform: scale(1.12); }
  75%  { transform: scale(1.28); }
  100% { transform: scale(1.2);  }
}

.mood-btn-v3.active {
  filter:    grayscale(0) !important;
  opacity:   1            !important;
  animation: mcMoodBounce 0.42s var(--t-bounce) forwards !important;
}
.mood-btn-v3.active .mood-label {
  color:       var(--primary-teal) !important;
  font-weight: 700                 !important;
}

/* Classic card-style mood options */
.mood-option {
  cursor:     pointer;
  transition: all 0.3s var(--t-bounce) !important;
  padding:    12px;
  border-radius: 16px;
  border: 2px solid transparent;
}
.mood-option:hover {
  background: rgba(20, 184, 166, 0.06) !important;
  transform:  scale(1.06)              !important;
}
.mood-option.selected {
  background:   #F0FDFA                                           !important;
  border-color: var(--primary-teal)                              !important;
  box-shadow:   0 0 0 3px rgba(20,184,166,0.16),
                0 0 14px rgba(20,184,166,0.3)                    !important;
  transform:    scale(1.1)                                       !important;
}
.mood-option.selected i {
  color: var(--primary-teal) !important;
}


/* ─────────────────────────────────────────────────────────────
   10. CHATBOT / AI COMPANION UI
───────────────────────────────────────────────────────────── */

/* Chat surface */
.chatbox {
  background: var(--bg-main) !important;
  scroll-behavior: smooth;
}

/* User bubble  →  Teal */
.message-group.user .message-content,
.user .message-content {
  background:    var(--primary-teal)                       !important;
  color:          white                                     !important;
  border-radius:  16px 16px 4px 16px                       !important;
  box-shadow:     0 4px 14px rgba(20, 184, 166, 0.24)     !important;
}

/* AI bubble  →  Soft Indigo */
.message-group.assistant .message-content,
.assistant .message-content {
  background:    #EEF2FF                                   !important;
  color:          var(--text-primary)                      !important;
  border-radius:  16px 16px 16px 4px                       !important;
  box-shadow:     0 2px 8px rgba(79, 70, 229, 0.08)       !important;
}

/* Typing indicator */
.typing-indicator {
  display:       flex;
  align-items:   center;
  gap:           5px;
  padding:       11px 16px;
  background:    #EEF2FF;
  border-radius: 16px 16px 16px 4px;
  width:         fit-content;
  margin-top:    4px;
}
.typing-dot {
  width:         8px;
  height:        8px;
  background:    var(--primary-indigo);
  border-radius: 50%;
  animation:     mcTypingDot 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes mcTypingDot {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
  30%           { transform: translateY(-7px); opacity: 1;    }
}

/* Chat history items */
.chat-history-item.active {
  background: #EEF2FF               !important;
  color:       var(--primary-indigo) !important;
}
.chat-history-item:hover {
  background: #F8FAFC !important;
}


/* ─────────────────────────────────────────────────────────────
   11. SMILEY QUICK-ACTION LAUNCHER  →  Teal-Indigo
───────────────────────────────────────────────────────────── */
.smiley-center-btn {
  background: linear-gradient(135deg,
    var(--primary-teal)   0%,
    var(--primary-indigo) 100%) !important;
  box-shadow: 0 8px 28px rgba(20,184,166,0.36),
              0 4px 12px rgba(0,0,0,0.1) !important;
}
.smiley-center-btn:hover {
  box-shadow: 0 12px 38px rgba(20,184,166,0.46),
              0 6px 16px rgba(0,0,0,0.14) !important;
}
.smiley-center-btn.open {
  background: linear-gradient(135deg,
    var(--primary-indigo) 0%,
    var(--primary-teal)  100%) !important;
  box-shadow: 0 6px 24px rgba(79,70,229,0.42) !important;
}


/* ─────────────────────────────────────────────────────────────
   12. SITUATION / QUICK-ACTION CARDS
───────────────────────────────────────────────────────────── */
.situation-btn-v3 {
  transition: all var(--t-normal) !important;
}
.situation-btn-v3:hover {
  border-color: var(--primary-teal)           !important;
  background:   rgba(20, 184, 166, 0.04)     !important;
  transform:    translateY(-1px)              !important;
}
.situation-btn-v3.active {
  border-color: var(--primary-teal)           !important;
  background:   rgba(20, 184, 166, 0.09)     !important;
  color:         var(--primary-teal-dark)     !important;
}


/* ─────────────────────────────────────────────────────────────
   13. FORM INPUTS — Focus glow
───────────────────────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary-teal)                 !important;
  box-shadow:   0 0 0 3px rgba(20, 184, 166, 0.2)  !important;
  outline:      none                                !important;
}


/* ─────────────────────────────────────────────────────────────
   14. PROGRESS BARS
───────────────────────────────────────────────────────────── */
.progress-fill,
.progress-bar-fill,
[class*="progress"][class*="fill"],
.streak-bar-fill {
  background: linear-gradient(90deg, var(--primary-teal), var(--primary-indigo)) !important;
}


/* ─────────────────────────────────────────────────────────────
   15. TOP ACTION BUTTONS (mobile topbar)
───────────────────────────────────────────────────────────── */
.top-action-btn:hover {
  background: rgba(20, 184, 166, 0.1) !important;
  color:       var(--primary-teal)     !important;
}


/* ─────────────────────────────────────────────────────────────
   16. ACCESSIBILITY — Focus States (keyboard navigation)
───────────────────────────────────────────────────────────── */
:focus-visible {
  outline:        2px solid var(--primary-indigo) !important;
  outline-offset: 2px                             !important;
}
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline:        2px solid var(--primary-indigo) !important;
  outline-offset: 3px                             !important;
  border-radius:  4px                             !important;
}


/* ─────────────────────────────────────────────────────────────
   17. SCROLLBAR POLISH
───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background:    var(--border-light);
  border-radius: 100px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}


/* ─────────────────────────────────────────────────────────────
   18. MICRO-INTERACTIONS
───────────────────────────────────────────────────────────── */

/* Icon scale on all sidebar/nav icons */
.sidebar-item i,
.nav-item i,
.smiley-action-btn {
  transition: transform var(--t-normal) !important;
}

/* Page transition screen */
.page-transition {
  background: var(--bg-main) !important;
}

/* Feature cards on landing */
.feature-card {
  transition: transform var(--t-normal), box-shadow var(--t-normal) !important;
}
.feature-card:hover {
  transform:  translateY(-4px)         !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* Mission / resource cards */
.resource-card,
.tool-card,
.game-card {
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.resource-card:hover,
.tool-card:hover,
.game-card:hover {
  transform:  translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}


/* ─────────────────────────────────────────────────────────────
   19. DARK / CHARCOAL THEME SYNC
───────────────────────────────────────────────────────────── */
body.theme-charcoal .sidebar-nav {
  background:    #1A1A1A                    !important;
  border-right:  1px solid #2d2d2d          !important;
  box-shadow:    0 8px 20px rgba(0,0,0,0.4) !important;
}
body.theme-charcoal .sidebar-item {
  color: #94A3B8 !important;
}
body.theme-charcoal .sidebar-item:hover {
  background: rgba(79, 70, 229, 0.12) !important;
  color:       var(--primary-indigo-light) !important;
}
body.theme-charcoal .sidebar-item.active {
  background: rgba(79, 70, 229, 0.18) !important;
  color:       var(--primary-indigo-light) !important;
}
body.theme-charcoal .smiley-center-btn {
  background: linear-gradient(135deg,
    var(--primary-teal-dark)   0%,
    var(--primary-indigo-dark) 100%) !important;
}
body.theme-charcoal .sidebar-logo-text {
  background: linear-gradient(90deg, var(--primary-teal-light), var(--primary-indigo-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-charcoal .dashboard-hero {
  box-shadow: 0 10px 36px rgba(20,184,166,0.18) !important;
}
body.theme-charcoal input:focus,
body.theme-charcoal textarea:focus,
body.theme-charcoal select:focus {
  box-shadow: 0 0 0 3px rgba(20,184,166,0.25) !important;
}


/* ─────────────────────────────────────────────────────────────
   20. LANDING PAGE (index.html)
───────────────────────────────────────────────────────────── */

/* Feature section icon accent */
.feature-icon {
  color: var(--primary-teal) !important;
  transition: transform var(--t-normal) !important;
}
.feature-card:hover .feature-icon {
  transform: scale(1.1) !important;
  color: var(--primary-indigo) !important;
}

/* ── Hero: ensure headings always appear white over the dark overlay ── */
.hero h1,
.hero h2,
.hero-content h1,
.hero-content h2 {
  color: white !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25) !important;
}

/* ── Hero CTA buttons ── */
.hero .btn-primary {
  color:       white !important;
  font-weight: 700   !important;
}

/* Ghost buttons — clean frosted glass that works over any photo background */
.hero .btn-ghost,
.btn-ghost {
  background:              rgba(255, 255, 255, 0.18)  !important;
  -webkit-backdrop-filter: blur(12px)                 !important;
  backdrop-filter:         blur(12px)                 !important;
  border:                  2px solid rgba(255,255,255,0.55) !important;
  color:                   white                      !important;
  font-weight:             600                        !important;
  box-shadow:              0 4px 14px rgba(0,0,0,0.12) !important;
}
.hero .btn-ghost:hover,
.btn-ghost:hover {
  background:   rgba(255, 255, 255, 0.30) !important;
  border-color: rgba(255, 255, 255, 0.80) !important;
  transform:    translateY(-3px)          !important;
  box-shadow:   0 10px 28px rgba(0,0,0,0.22) !important;
}

/* Social proof quote */
.hero .social-proof,
.social-proof {
  color:     rgba(255,255,255,0.88) !important;
  font-size: 0.92rem                !important;
}

/* ─────────────────────────────────────────────────────────────
   21. RESPONSIVE — ensure tokens hold on mobile
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mood-btn-v3.active {
    animation: mcMoodBounce 0.38s var(--t-bounce) forwards !important;
  }
  .ig-card {
    border-radius: 14px !important;
  }
}


/* ================================================================
   MINDCARE DESIGN SYSTEM — Version 2.0 Enhancement Layer
   Deeper component polish across all pages.
================================================================ */

/* ─────────────────────────────────────────────────────────────
   22. SIDEBAR ACTIVE ITEM — Teal left-border accent
───────────────────────────────────────────────────────────── */
.sidebar-item.active {
  border-left: 3px solid var(--primary-teal) !important;
  padding-left: 11px !important; /* compensate for visual shift */
}

/* Remove the purple left bar from navigation-v2.css */
.sidebar-item.active::before {
  display: none !important;
}

/* Sidebar section divider */
.sidebar-footer {
  border-top: 1px solid var(--border-light) !important;
}

/* Sidebar header divider */
.sidebar-header {
  border-bottom: 1px solid var(--border-light) !important;
}


/* ─────────────────────────────────────────────────────────────
   23. GLOBAL BUTTON LIFT  (applies to ALL buttons sitewide)
───────────────────────────────────────────────────────────── */
button:not(:disabled):not(.mood-btn-v3):not(.smiley-center-btn):not(.smiley-action-btn):not(.sidebar-toggle-btn):not(.back-btn-top):not(.sidebar-logout-btn):not(.nav-logout-btn):not(.input-btn):not(.new-chat-btn) {
  transition: transform var(--t-normal), box-shadow var(--t-normal), background var(--t-normal) !important;
}
button:not(:disabled):not(.mood-btn-v3):not(.smiley-center-btn):not(.smiley-action-btn):not(.sidebar-toggle-btn):not(.back-btn-top):not(.sidebar-logout-btn):not(.nav-logout-btn):not(.input-btn):not(.new-chat-btn):hover {
  transform:  translateY(-1px) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
}
button:not(:disabled):active {
  transform: translateY(0) scale(0.98) !important;
}


/* ─────────────────────────────────────────────────────────────
   24. BROAD CARD COVERAGE — all page card types
───────────────────────────────────────────────────────────── */
.post-card-v2,
.challenge-card,
.circle-card,
.thought-of-day,
.journal-card,
.journal-stat-card,
.resource-card,
.tool-card,
.game-card,
.daily-tip-card,
.settings-card,
.goals-card,
.progress-card,
.checkin-option-card {
  background:    var(--bg-card)           !important;
  border:        1px solid var(--border-light) !important;
  border-radius: 16px                     !important;
  box-shadow:    var(--shadow-card)       !important;
  transition:    transform var(--t-normal), box-shadow var(--t-normal) !important;
}

.post-card-v2:hover,
.challenge-card:hover,
.circle-card:hover,
.journal-stat-card:hover,
.resource-card:hover,
.tool-card:hover,
.game-card:hover,
.daily-tip-card:hover,
.settings-card:hover,
.goals-card:hover,
.progress-card:hover {
  transform:  translateY(-3px)            !important;
  box-shadow: var(--shadow-card-hover)    !important;
}

/* journal-card already has cursor:pointer — keep its own hover */
.journal-card:hover {
  transform:  translateY(-2px)            !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.07) !important;
}


/* ─────────────────────────────────────────────────────────────
   25. SECTION TITLES — consistent typographic hierarchy
───────────────────────────────────────────────────────────── */
.section-title,
.home-section-title {
  color:          var(--text-muted)       !important;
  text-transform: uppercase               !important;
  letter-spacing: 1px                    !important;
  font-size:      0.78rem                !important;
  font-weight:    700                    !important;
}

/* Page-level H1 / H2 headings — scoped to dashboard/content pages only.
   Hero text inherits white from .hero-content; do NOT override it here. */
.main-content h1,
.main-content h2,
.ig-wrapper h1,
.ig-wrapper h2,
.page-wrapper h1,
.page-wrapper h2 {
  color:          var(--text-primary);
  letter-spacing: -0.025em;
}


/* ─────────────────────────────────────────────────────────────
   26. BACK BUTTON
───────────────────────────────────────────────────────────── */
.back-btn-top {
  border-radius: 50% !important;
  transition:    background var(--t-fast), color var(--t-fast) !important;
}
.back-btn-top:hover {
  background: #EEF2FF          !important;
  color:       var(--primary-indigo) !important;
}


/* ─────────────────────────────────────────────────────────────
   27. MOBILE TOP BAR polish
───────────────────────────────────────────────────────────── */
.mobile-top-bar {
  background:    var(--bg-card)       !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow:    0 1px 8px rgba(0,0,0,0.04) !important;
}
.mobile-top-bar .mobile-logo span {
  background: linear-gradient(90deg, var(--primary-teal), var(--primary-indigo));
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
  font-weight: 700 !important;
}


/* ─────────────────────────────────────────────────────────────
   28. JOURNAL COMPONENTS — teal/indigo accent sync
───────────────────────────────────────────────────────────── */
.journal-stat-icon.teal {
  background: rgba(20, 184, 166, 0.12) !important;
  color:       var(--primary-teal)     !important;
}
.journal-stat-icon.purple {
  background: rgba(79, 70, 229, 0.10)  !important;
  color:       var(--primary-indigo)   !important;
}
.journal-stat-icon.blue {
  background: rgba(99, 102, 241, 0.10) !important;
  color:       var(--primary-indigo)   !important;
}

/* Mood tags — aligned to design system */
.mood-tag.excellent {
  background: rgba(16,185,129,0.12) !important;
  color:       #065f46               !important;
}
.mood-tag.good {
  background: rgba(20,184,166,0.12) !important;
  color:       var(--primary-teal-dark) !important;
}
.mood-tag.neutral {
  background: rgba(79,70,229,0.08)  !important;
  color:       var(--primary-indigo) !important;
}
.mood-tag.low {
  background: rgba(245,158,11,0.12) !important;
  color:       #92400e               !important;
}
.mood-tag.bad {
  background: rgba(239,68,68,0.10)  !important;
  color:       #991b1b               !important;
}

/* Timeline filter button */
.timeline-filter {
  color: var(--primary-indigo)      !important;
}
.timeline-filter:hover {
  background: #EEF2FF              !important;
  color:       var(--primary-indigo) !important;
}

/* Journal section icon */
.journal-timeline-title i {
  color: var(--primary-teal) !important;
}


/* ─────────────────────────────────────────────────────────────
   29. AI CHAT WIDGET — teal/indigo override
───────────────────────────────────────────────────────────── */

/* Widget user messages */
#aiChatWidget .user .message-content {
  background:    var(--primary-teal)                    !important;
  border-radius: 18px 18px 4px 18px                    !important;
  box-shadow:    0 4px 14px rgba(20,184,166,0.25)       !important;
}
#aiChatWidget .assistant .message-content {
  background:    #EEF2FF                                !important;
  color:          var(--text-primary)                   !important;
  border-radius: 18px 18px 18px 4px                    !important;
}

/* Widget send button */
#aiChatWidget .chat-input-area button {
  background: var(--primary-teal)                       !important;
  transition: background var(--t-normal), transform var(--t-normal) !important;
}
#aiChatWidget .chat-input-area button:hover {
  background: var(--primary-teal-dark)                  !important;
  transform:  scale(1.06)                               !important;
}
#aiChatWidget .chat-input-area button:active {
  transform: scale(0.92) !important;
}

/* Widget input focus */
#aiChatWidget .chat-input-area input:focus {
  border-color: var(--primary-teal)              !important;
  box-shadow:   0 0 0 3px rgba(20,184,166,0.18) !important;
}

/* Suggestion chips */
.suggestion-chip {
  border:     1px solid var(--border-light) !important;
  transition: all var(--t-normal)           !important;
}
.suggestion-chip:hover {
  background:   rgba(20, 184, 166, 0.06)   !important;
  border-color: var(--primary-teal)         !important;
  color:         var(--primary-teal-dark)   !important;
  transform:     translateY(-2px)           !important;
}
.suggestion-chip i {
  color: var(--primary-teal) !important;
}

/* Sunnie avatar bubble */
.sunnie-avatar-large,
.checkin-smiley {
  background: var(--primary-teal) !important;
}

/* Full-page chat send button */
.send-btn-main {
  background: var(--primary-teal)                       !important;
  transition: background var(--t-normal), transform var(--t-normal), box-shadow var(--t-normal) !important;
}
.send-btn-main:hover {
  background:  var(--primary-teal-dark)                 !important;
  transform:   scale(1.06)                              !important;
  box-shadow:  0 4px 14px rgba(20,184,166,0.3)          !important;
}

/* Input wrapper focus-within */
.input-wrapper:focus-within {
  border-color: var(--primary-teal)              !important;
  box-shadow:   0 0 0 3px rgba(20,184,166,0.15) !important;
}

/* Model selector pill */
.model-selection:hover {
  border-color: var(--primary-indigo-light) !important;
  background:   #EEF2FF                    !important;
}


/* ─────────────────────────────────────────────────────────────
   30. COMMUNITY PAGE COMPONENTS
───────────────────────────────────────────────────────────── */
.trend-pill {
  transition: all var(--t-normal) !important;
}
.trend-pill:hover {
  background:  rgba(20, 184, 166, 0.08) !important;
  border-color: var(--primary-teal)      !important;
  color:         var(--primary-teal-dark) !important;
  transform:    translateY(-1px)         !important;
}

/* Community top bar */
.community-top-bar {
  background:    var(--bg-card)             !important;
  border-bottom: 1px solid var(--border-light) !important;
  box-shadow:    0 1px 8px rgba(0,0,0,0.04) !important;
}


/* ─────────────────────────────────────────────────────────────
   31. FAB (Floating Action Button)
───────────────────────────────────────────────────────────── */
.fab {
  background: linear-gradient(135deg,
    var(--primary-teal)   0%,
    var(--primary-indigo) 100%) !important;
  box-shadow:  0 6px 20px rgba(20,184,166,0.38) !important;
  transition:  transform var(--t-normal), box-shadow var(--t-normal) !important;
}
.fab:hover {
  transform:  translateY(-3px) scale(1.05)     !important;
  box-shadow: 0 10px 28px rgba(20,184,166,0.46) !important;
}


/* ─────────────────────────────────────────────────────────────
   32. OUTLINE / SECONDARY BUTTONS  (.btn-outline)
───────────────────────────────────────────────────────────── */
.btn-outline {
  border:     1px solid var(--primary-indigo) !important;
  color:       var(--primary-indigo)           !important;
  transition: all var(--t-normal)              !important;
}
.btn-outline:hover {
  background: #EEF2FF                         !important;
  transform:  translateY(-1px)                !important;
}


/* ─────────────────────────────────────────────────────────────
   33. AI INSIGHTS PAGE — badge accents
───────────────────────────────────────────────────────────── */
.ai-hero-badge {
  background:    rgba(20, 184, 166, 0.1)  !important;
  border:        1px solid rgba(20,184,166,0.25) !important;
  color:          var(--primary-teal-dark)  !important;
  border-radius:  100px                    !important;
}
.ai-disclaimer-badge {
  border-color: var(--border-light)       !important;
}


/* ─────────────────────────────────────────────────────────────
   34. FORM LABELS + INPUTS
───────────────────────────────────────────────────────────── */
label {
  color:       var(--text-secondary);
  font-weight: 600;
  font-size:   0.85rem;
}

input,
textarea,
select {
  border:        1px solid var(--border-light);
  border-radius: 10px;
  font-family:   inherit;
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  color:         var(--text-primary);
  background:    var(--bg-card);
}


/* ─────────────────────────────────────────────────────────────
   35. DIVIDERS
───────────────────────────────────────────────────────────── */
.divider,
hr {
  background-color: var(--border-light) !important;
  border:           none               !important;
  height:           1px                !important;
}


/* ─────────────────────────────────────────────────────────────
   36. DARK THEME — V2 additions
───────────────────────────────────────────────────────────── */
body.theme-charcoal .mobile-top-bar,
body.theme-charcoal .community-top-bar {
  box-shadow: 0 1px 8px rgba(0,0,0,0.3) !important;
}
body.theme-charcoal .mobile-top-bar .mobile-logo span {
  background: linear-gradient(90deg, var(--primary-teal-light), var(--primary-indigo-light));
  -webkit-background-clip: text;
  background-clip:         text;
  -webkit-text-fill-color: transparent;
}
body.theme-charcoal .sidebar-item.active {
  border-left-color: var(--primary-teal) !important;
}
body.theme-charcoal .fab {
  box-shadow: 0 6px 20px rgba(20,184,166,0.25) !important;
}
body.theme-charcoal .mood-tag.good {
  background: rgba(20,184,166,0.18) !important;
}
body.theme-charcoal .journal-stat-icon.teal {
  background: rgba(20,184,166,0.18) !important;
}
body.theme-charcoal .journal-stat-icon.purple {
  background: rgba(79,70,229,0.18)  !important;
}
body.theme-charcoal .suggestion-chip {
  background:    #2a2a2a !important;
  border-color:  #3a3a3a !important;
  color:          #e2e8f0 !important;
}
body.theme-charcoal #aiChatWidget .assistant .message-content {
  background: #2a2a2a    !important;
  color:       #e2e8f0   !important;
}
body.theme-charcoal .input-wrapper {
  background:   #1e1e1e   !important;
  border-color: #2d2d2d   !important;
}
body.theme-charcoal .input-wrapper:focus-within {
  border-color: var(--primary-teal)              !important;
  box-shadow:   0 0 0 3px rgba(20,184,166,0.2)  !important;
}
body.theme-charcoal button:not(:disabled):not(.mood-btn-v3):not(.smiley-center-btn):not(.smiley-action-btn):not(.sidebar-toggle-btn):not(.sidebar-logout-btn):not(.nav-logout-btn):not(.input-btn):hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.35) !important;
}


/* ─────────────────────────────────────────────────────────────
   37. REDUCED MOTION SUPPORT
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   38. RESPONSIVE V2 — mobile refinements
───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Cards on small screens */
  .post-card-v2,
  .challenge-card,
  .circle-card,
  .journal-stat-card {
    border-radius: 14px !important;
  }

  /* Sidebar active border on mobile bottom nav */
  .bottom-nav .nav-item.active {
    color: var(--primary-teal) !important;
  }
  .bottom-nav .nav-item.active i {
    transform: scale(1.1) !important;
  }

  /* Make hero stat chips more compact */
  .hero-stat-chip {
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter:          blur(10px) !important;
  }

  /* Touch: remove hover transforms on non-pointer devices */
  @media (hover: none) {
    .ig-card:hover,
    .post-card-v2:hover,
    .challenge-card:hover {
      transform: none !important;
      box-shadow: var(--shadow-card) !important;
    }
  }
}