/* ===================== CALM PAGE STYLES ===================== */

/* Note: Header sticky glassmorphism styles moved to global scope in style.css */

/* Modern Calm Page Design */
.calm {
  /* Note: --brand override only affects page content, not header (header uses --header-bg) */
  --brand: #1f3a93;
  --ink: #0f172a;
  --muted: #64748b;
  --ring: rgba(31,58,147,.2);
  
  /* Soft color palette for cards - more differentiated */
  --card-mint: #f0fdf4;      /* Breathing exercises - mint green */
  --card-blue: #eff6ff;      /* TIPP/Cold exercises - pale blue */
  --card-sage: #ecfdf5;      /* Grounding exercises - sage green (slightly different from mint) */
  --card-lavender: #faf5ff;  /* Body scan - soft lavender */
  --card-peach: #fff7ed;     /* Butterfly - warm peach */
  
  /* Icon circle backgrounds - slightly darker for contrast */
  --icon-green: #bbf7d0;     /* Breathing - medium green */
  --icon-blue: #bfdbfe;      /* TIPP/Cold - medium blue */
  --icon-sage: #bbf7d0;      /* Grounding - medium green */
  --icon-purple: #ddd6fe;   /* Body scan - medium purple */
  --icon-orange: #fed7aa;   /* Butterfly - warm orange */
  
  /* Icon stroke colors - darker for better contrast */
  --icon-stroke-green: #047857;
  --icon-stroke-blue: #0369a1;
  --icon-stroke-purple: #6d28d9;
  --icon-stroke-orange: #c2410c;
}

/* ========== RELAXING PALETTE TOKENS (RGBA-safe, no color-mix) ========== */
:root {
  /* Base (neutral) */
  --bg: #F7FAFF;
  --surface: rgba(255, 255, 255, 0.86);
  
  /* Mint (breathing / calm) - soft seafoam gradient */
  --tint-mint: rgba(203, 245, 226, 0.75);
  --tint-mint2: rgba(224, 250, 239, 0.85);
  --accent-mint: rgba(78, 191, 150, 0.35);
  --accent2-mint: rgba(78, 191, 150, 0.18);
  --mint-ink: #166534;
  
  /* Blue (TIPP / cold) */
  --tint-blue: rgba(234, 243, 255, 0.85);
  --accent-blue: rgba(132, 182, 255, 0.24);
  --accent2-blue: rgba(132, 182, 255, 0.16);
  
  /* Lavender (scan/STOP) */
  --tint-lav: rgba(242, 238, 255, 0.85);
  --accent-lav: rgba(184, 168, 255, 0.22);
  --accent2-lav: rgba(184, 168, 255, 0.14);
  
  /* Peach (butterfly) */
  --tint-peach: rgba(255, 241, 230, 0.85);
  --accent-peach: rgba(255, 181, 138, 0.24);
  --accent2-peach: rgba(255, 181, 138, 0.16);
  
  /* Current calm variables (default to mint) */
  --calm-tint: var(--tint-mint);
  --calm-tint2: var(--tint-mint2);
  --calm-accent: var(--accent-mint);
  --calm-accent2: var(--accent2-mint);
  
  /* Calm design tokens - single source of truth for guided UI */
  --calm-bg: rgba(247, 250, 255, 0.95); /* Very light tinted background, not gray */
  --calm-surface: rgba(255, 255, 255, 0.92); /* Warm white, slightly translucent */
  --calm-ink: #0F172A; /* Text */
  --calm-muted: rgba(100, 116, 139, 0.85); /* Muted text with slight tint, not pure gray */
}

/* Decorative background elements */
.calm-page {
  position: relative;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(240, 253, 244, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(219, 234, 254, 0.15) 0%, transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  /* CRITICAL: Ensure no overflow restrictions that break sticky positioning */
  overflow: visible !important;
  overflow-x: hidden; /* Only hide horizontal overflow */
}

.calm-page::before {
  content: '';
  position: fixed;
  top: -30%;
  right: -15%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(240, 253, 244, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.calm-page::after {
  content: '';
  position: fixed;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(219, 234, 254, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}

.calm .container {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  position: relative;
  z-index: 1;
  /* Add top padding to account for sticky header (60px) + safe area */
  padding-top: calc(2rem + 60px + env(safe-area-inset-top, 0));
}

/* Mobile adjustment for padding */
@media (max-width: 640px) {
  .calm .container {
    padding-top: calc(1rem + 60px + env(safe-area-inset-top, 0));
  }
}

.calm h1 {
  margin: 0 0 2rem;
  color: var(--ink);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ===== Calm page title (softer) ===== */
.calm #calm-title {
  position: relative;
  margin: 10px 0 18px;
  padding-left: 18px;
  font-size: 38px;
  line-height: 1.05;
  font-weight: 600;          /* було занадто "тяжко" — робимо м'якше */
  letter-spacing: -0.02em;
  color: #111827;
}

/* М'який "спокійний" штрих зліва (без крапки) */
.calm #calm-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  /* дуже легкий, холодний, без жовтого */
  background: linear-gradient(
    180deg,
    rgba(11, 61, 145, 0.10),
    rgba(11, 61, 145, 0.22),
    rgba(11, 61, 145, 0.10)
  );
}

/* Трохи "повітря" на мобільному */
@media (max-width: 480px) {
  .calm #calm-title {
    font-size: 34px;
    padding-left: 16px;
  }
  
  .calm #calm-title::before {
    top: 5px;
    bottom: 9px;
  }
}

/* Modern Card Design */
.calm .card {
  background: var(--card-mint);
  border-radius: 16px;
  padding: 1.5rem;
  margin: 1.25rem 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  position: relative;
}

/* Color-coded cards - more differentiated by exercise type */
.calm .card:nth-child(1) { background: var(--card-mint); }      /* Breathing */
.calm .card:nth-child(2) { background: var(--card-sage); }     /* Grounding */
.calm .card:nth-child(3) { background: var(--card-peach); }     /* Butterfly */
.calm .card:nth-child(4) { background: var(--card-blue); }     /* TIPP/Cold */
.calm .card:nth-child(5) { background: var(--card-lavender); } /* Body scan */
.calm .card:nth-child(6) { background: var(--card-mint); }     /* Hand breathing */
.calm .card:nth-child(7) { background: var(--card-lavender); } /* STOP */

/* Hover/Active states */
.calm .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.calm .card:active {
  transform: translateY(0);
}

/* Touch feedback for mobile */
@media (max-width: 480px) {
  .calm .card:active {
    transform: scale(0.98);
    background-color: rgba(0, 0, 0, 0.02);
  }
}

.calm details[open] {
  outline: none;
}

.calm details[open] .card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Accordion content - smooth transition for desktop */
.calm details > *:not(summary) {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide content by default on mobile when closed */
@media (max-width: 480px) {
  /* Wrap content in a container for smooth accordion */
  .calm details {
    overflow: hidden;
  }
  
  .calm details:not([open]) > ol,
  .calm details:not([open]) > p {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  }
  
  .calm details[open] > ol,
  .calm details[open] > p {
    opacity: 1;
    max-height: 1000px;
    transition: opacity 0.3s ease 0.1s, max-height 0.4s ease, margin 0.3s ease, padding 0.3s ease;
  }
}

.calm summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding-right: 4.5rem; /* Space for duration badge */
}

.calm summary::-webkit-details-marker {
  display: none;
}

.calm .title {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.4;
}

.calm .title > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.calm .subtitle {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 0.125rem;
}

/* Icon with colored circle background */
.calm .icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--icon-green);
}

.calm .card:nth-child(1) .icon-wrapper { background: var(--icon-green); }   /* Breathing */
.calm .card:nth-child(2) .icon-wrapper { background: var(--icon-sage); }     /* Grounding */
.calm .card:nth-child(3) .icon-wrapper { background: var(--icon-orange); }   /* Butterfly */
.calm .card:nth-child(4) .icon-wrapper { background: var(--icon-blue); }     /* TIPP/Cold */
.calm .card:nth-child(5) .icon-wrapper { background: var(--icon-purple); }     /* Body scan */
.calm .card:nth-child(6) .icon-wrapper { background: var(--icon-green); }    /* Hand breathing */
.calm .card:nth-child(7) .icon-wrapper { background: var(--icon-purple); }    /* STOP */

.calm .icon {
  width: 24px;
  height: 24px;
  stroke: var(--icon-stroke-green);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calm .card:nth-child(1) .icon { stroke: var(--icon-stroke-green); fill: rgba(4, 120, 87, 0.1); }
.calm .card:nth-child(2) .icon { stroke: var(--icon-stroke-green); fill: rgba(4, 120, 87, 0.1); }
.calm .card:nth-child(3) .icon { stroke: var(--icon-stroke-orange); fill: rgba(194, 65, 12, 0.1); }
.calm .card:nth-child(4) .icon { stroke: var(--icon-stroke-blue); fill: rgba(3, 105, 161, 0.1); }
.calm .card:nth-child(5) .icon { stroke: var(--icon-stroke-purple); fill: rgba(109, 40, 217, 0.1); }
.calm .card:nth-child(6) .icon { stroke: var(--icon-stroke-green); fill: rgba(4, 120, 87, 0.1); }
.calm .card:nth-child(7) .icon { stroke: var(--icon-stroke-purple); fill: rgba(109, 40, 217, 0.1); }

/* Duration badge in top-right */
.calm summary small {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--muted);
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Ensure badge doesn't overlap on mobile */
@media (max-width: 480px) {
  .calm summary small {
    top: 0.25rem;
    right: 0.5rem;
    font-size: 0.75rem;
    padding: 0.3rem 0.6rem;
  }
}

.calm ol {
  margin: 1.25rem 0 0 1.5rem;
  padding: 0;
  line-height: 1.7;
}

.calm ol li {
  margin: 0.5rem 0;
  color: var(--ink);
}

.calm p {
  margin: 1.25rem 0 0;
  line-height: 1.7;
  color: var(--ink);
}

.calm .muted {
  color: var(--muted);
  margin-top: 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
}

/* Footer Cards - Harmonious informational cards */
.footer-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 12px;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 2rem;
  color: var(--ink);
}

.footer-card-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.footer-card span {
  flex: 1;
}

/* Advice Card - Glassmorphism effect with emerald */
.footer-card--advice {
  background: rgba(240, 253, 244, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(22, 163, 74, 0.2);
  border-left: 2px solid #16a34a;
  color: #166534;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08);
}

.footer-card--advice .footer-card-icon {
  color: #16a34a;
}

/* Warning Card - High Priority Note with soft cream */
.footer-card--warning {
  background: #fef9e7;
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #78350f;
  box-shadow: 0 2px 12px rgba(251, 191, 36, 0.15);
  border-left: 3px solid #f59e0b;
}

.footer-card--warning .footer-card-icon {
  color: #d97706;
  stroke-width: 2;
}

.footer-card--warning strong {
  font-weight: 700;
  color: #b45309;
  font-size: 1.05em;
}

@media (max-width: 480px) {
  .footer-card {
    padding: 0.875rem;
    font-size: 0.85rem;
    margin-top: 1.5rem;
  }

  .footer-card-icon {
    width: 18px;
    height: 18px;
  }
  
  .calm h1 {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }
  
  .calm .container {
    padding: 1.5rem 0.875rem;
    padding-bottom: 80px; /* Safe area for bottom navigation/chat button */
  }
  
  .calm .card {
    padding: 1rem 0.875rem; /* Reduced horizontal padding */
    margin: 0.875rem 0;
  }
  
  .calm .title {
    font-size: 1rem; /* Reduced to prevent awkward wrapping */
    line-height: 1.3;
    gap: 0.75rem;
  }
  
  .calm .icon-wrapper {
    width: 32px; /* Smaller icons for mobile */
    height: 32px;
    flex-shrink: 0;
  }
  
  .calm .icon {
    width: 16px; /* Proportional icon size */
    height: 16px;
  }
  
  /* Ensure summary has enough space for badge */
  .calm summary {
    padding-right: 4rem; /* More space for badge on mobile */
    min-height: 2.5rem; /* Ensure touch target is large enough */
  }
  
  /* Smooth accordion transitions */
  .calm details {
    transition: all 0.3s ease;
  }
  
  .calm details[open] {
    margin-bottom: 0.5rem;
  }
  
  /* List and paragraph spacing on mobile */
  .calm ol,
  .calm p {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
  }
  
  .calm ol {
    margin-left: 1.25rem;
  }
  
  .calm ol li {
    margin: 0.4rem 0;
    line-height: 1.6;
  }
}

/* ========== OVERLAY STYLES ========== */
#exercise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Soft tinted backdrop for pre-start modal - no dark gray */
  background: rgba(203, 245, 226, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

/* #guided-overlay is defined separately below with its own backdrop */

@media (min-width: 640px) {
  #exercise-overlay,
  #guided-overlay {
    align-items: center;
  }
}

#exercise-overlay.open,
#guided-overlay.open {
  opacity: 1;
  visibility: visible;
}

.overlay-content {
  background: linear-gradient(180deg, var(--overlay-tint, var(--calm-tint)) 0%, rgba(255, 255, 255, 1) 58%);
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(15, 23, 42, 0.06);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Accent border - apply opacity to the accent color */
.overlay-content::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--overlay-accent, var(--calm-accent));
  opacity: 0.6;
  border-radius: 20px 0 0 0;
  pointer-events: none;
}

@media (min-width: 640px) {
  .overlay-content {
    border-radius: 20px;
    max-height: 85vh;
    transform: translateY(0) scale(0.95);
  }
  
  #exercise-overlay.open .overlay-content,
  #guided-overlay.open .overlay-content {
    transform: scale(1);
  }
}

#exercise-overlay.open .overlay-content,
#guided-overlay.open .overlay-content {
  transform: translateY(0);
}

.overlay-header {
  padding: 1.5rem;
  padding-right: 52px; /* Reserve space for close button */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-shrink: 0;
  position: relative;
}

.overlay-header-main {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
}

.overlay-icon-wrapper {
  position: relative; /* For badge positioning */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--overlay-accent, var(--calm-accent));
}

.overlay-icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--calm-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.overlay-icon-wrapper .icon {
  width: 24px;
  height: 24px;
  stroke: var(--overlay-accent-ink, var(--icon-stroke-green));
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overlay-icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--calm-accent);
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.overlay-header-text {
  flex: 1;
  min-width: 0; /* Critical for flex text wrapping */
}

.overlay-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 0.5rem;
  line-height: 1.15;
  /* No ellipsis, allow natural wrapping up to 2-3 lines */
  display: block;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal; /* important: avoid 'anywhere' */
  hyphens: none; /* avoid odd hyphenation */
  text-overflow: clip; /* remove ellipsis */
  overflow: visible; /* allow natural height */
  min-width: 0; /* Ensure wrapping works in flex container */
}

.overlay-chips {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.overlay-duration-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--overlay-accent-ink, var(--muted));
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overlay-pattern-chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--overlay-accent-ink, var(--muted));
  padding: 0.35rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.overlay-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 1;
}

.overlay-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.overlay-close svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
}

.overlay-body {
  padding: 1.5rem;
  flex: 1;
  overflow-y: auto;
}

/* Butterfly illustration (exercise #3 only) */
.calm-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 1.5rem;
  width: 100%;
}

.calm-illustration img,
img.calm-illustration {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  margin: 0 auto;
  display: block;
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
  .calm-illustration img,
  img.calm-illustration {
    max-height: 220px;
  }
}

.overlay-summary {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.overlay-why {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
  font-style: italic;
}

.overlay-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.overlay-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.overlay-steps li:last-child {
  border-bottom: none;
}

.step-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  stroke: var(--brand);
  fill: none;
  stroke-width: 1.5;
  margin-top: 0.125rem;
}

.step-text {
  flex: 1;
  color: var(--ink);
  line-height: 1.6;
}

.overlay-actions {
  padding: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.btn-start {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
  min-height: 48px;
}

.btn-start:hover {
  background: #0848A8;
}

.btn-start:active {
  transform: scale(0.98);
}

/* Guided Mode Styles */
#guided-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Tinted translucent backdrop - no dark gray scrim */
  /* Fallback: use rgba with calculated opacity */
  background: rgba(203, 245, 226, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

/* Override backdrop tint per exercise via JS-set variable */
/* Fallback for browsers without color-mix */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  #guided-overlay {
    background: color-mix(in srgb, var(--calm-tint) 55%, transparent);
  }
}

.guided-content {
  /* Warm white glass surface with calm gradient */
  background: linear-gradient(180deg, 
    var(--calm-tint) 0%, 
    var(--calm-tint) 15%,
    var(--calm-surface) 45%,
    rgba(255, 255, 255, 0.98) 100%
  );
  /* Subtle top glow using accent */
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(78, 191, 150, 0.12); /* Tinted border, not gray */
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Soft shadow using tint */
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.8),
    0 8px 32px rgba(78, 191, 150, 0.15),
    0 4px 16px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

/* Subtle top glow */
.guided-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(circle at 50% 20%, 
    color-mix(in srgb, var(--calm-accent) 18%, transparent) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

.guided-content > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 640px) {
  .guided-content {
    border-radius: 20px;
    transform: scale(0.9);
  }
  
  #guided-overlay.open .guided-content {
    transform: scale(1);
  }
}

#guided-overlay.open .guided-content {
  transform: translateY(0) scale(1);
}

.guided-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(78, 191, 150, 0.12); /* Tinted border, not gray */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: transparent;
}

.guided-title-wrapper {
  flex: 1;
  min-width: 0;
}

.guided-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--calm-ink);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guided-time {
  font-size: 0.85rem;
  color: var(--calm-muted);
  margin: 0.25rem 0 0;
}

.guided-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  min-height: 300px;
  /* Inherits gradient from .guided-content, but ensure visibility */
  background: transparent;
}

/* Breathing Circle - Relaxing aura with soft mint gradient and glow */
.breathing-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem;
  /* Soft radial gradient: mint center fading to white */
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 255, 255, 0.95) 0%,
    var(--calm-tint) 40%,
    var(--calm-tint2) 60%,
    rgba(255, 255, 255, 0.98) 100%);
  /* Subtle outer glow and inner light */
  box-shadow:
    0 0 24px rgba(78, 191, 150, 0.15),
    0 8px 24px rgba(15, 23, 42, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.75);
  transform: scale(1);
  will-change: transform;
}

/* Ring 1 - Inner accent ring */
.breathing-circle::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle,
    transparent 55%,
    var(--calm-accent) 62%,
    var(--calm-accent) 68%,
    transparent 75%);
  opacity: 0.85;
  pointer-events: none;
}

/* Ring 2 - Outer glow ring */
.breathing-circle::after {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 999px;
  background: radial-gradient(circle,
    transparent 58%,
    var(--calm-accent2) 64%,
    var(--calm-accent2) 70%,
    transparent 82%);
  opacity: 0.7;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .breathing-circle.breathing-in,
  .breathing-circle.breathing-out {
    animation: none !important;
  }
}

.breathing-circle.breathing-in {
  animation: breatheIn 4s ease-in-out;
}

.breathing-circle.breathing-out {
  animation: breatheOut 6s ease-in-out;
}

@keyframes breatheIn {
  from { transform: scale(0.92); }
  to { transform: scale(1.06); }
}

@keyframes breatheOut {
  from { transform: scale(1.06); }
  to { transform: scale(0.92); }
}

.guided-instruction {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--calm-ink);
  text-align: center;
  margin: 0 0 0.75rem;
}

/* Exercise 4 (TIPP) completion message - large and centered */
.calm-completion-message {
  font-size: 2rem;
  font-weight: 700;
  color: var(--calm-ink);
  text-align: center;
  margin: 2rem 0;
  padding: 1.5rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* Timer hint for Exercise 4 step 3 (breathing instruction) */
.timer-hint {
  font-size: 0.9rem;
  color: var(--calm-muted);
  text-align: center;
  margin-top: 0.5rem;
  opacity: 0.85;
  font-style: italic;
}

.guided-secondary {
  font-size: 1rem;
  color: var(--calm-muted);
  opacity: 0.85;
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: 0.01em;
}

.cycle-counter {
  font-size: 0.9rem;
  color: var(--calm-muted);
  opacity: 0.75;
  text-align: center;
  margin: 1.25rem 0 0;
  letter-spacing: 0.02em;
}

.guided-controls {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid rgba(78, 191, 150, 0.12); /* Tinted border, not gray */
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
  background: transparent;
}

.btn-control {
  flex: 1;
  padding: 0.875rem 1rem;
  /* Warm white with tinted border, not gray */
  border: 1px solid rgba(78, 191, 150, 0.2);
  background: var(--calm-surface);
  color: var(--calm-ink);
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  min-height: 48px;
}

.btn-control:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(78, 191, 150, 0.3);
}

.btn-control.primary {
  /* Calm gradient using accent colors */
  background: linear-gradient(180deg, var(--calm-accent) 0%, var(--calm-accent2) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(78, 191, 150, 0.2);
}

/* Completion modal Done button and step Next button - high contrast black text */
.guided-controls .btn-control.primary,
#btn-done-exercise,
#btn-next-step {
  color: #000000;
  font-weight: 600;
}

.btn-control.primary:hover {
  background: linear-gradient(180deg, rgba(78, 191, 150, 0.45) 0%, rgba(78, 191, 150, 0.25) 100%);
  box-shadow: 0 4px 12px rgba(78, 191, 150, 0.3);
}

/* Completion modal Done button and step Next button hover - slightly darker for feedback */
.guided-controls .btn-control.primary:hover,
#btn-done-exercise:hover,
#btn-next-step:hover {
  background: linear-gradient(180deg, rgba(78, 191, 150, 0.5) 0%, rgba(78, 191, 150, 0.3) 100%);
  color: #000000;
}

/* Completion modal Done button and step Next button active/pressed state */
.guided-controls .btn-control.primary:active,
#btn-done-exercise:active,
#btn-next-step:active {
  background: linear-gradient(180deg, rgba(78, 191, 150, 0.4) 0%, rgba(78, 191, 150, 0.2) 100%);
  color: #0a1a3d;
  transform: translateY(1px);
  box-shadow: 0 1px 4px rgba(78, 191, 150, 0.25);
}

/* Completion modal Done button and step Next button focus state for accessibility */
.guided-controls .btn-control.primary:focus-visible,
#btn-done-exercise:focus-visible,
#btn-next-step:focus-visible {
  outline: 2px solid #1f3a93;
  outline-offset: 2px;
}

.btn-control.primary.btn-disabled,
.btn-control.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  /* Ensure disabled state is visually clear but still calm */
  background: rgba(78, 191, 150, 0.15) !important;
  color: var(--calm-muted) !important;
  border-color: rgba(78, 191, 150, 0.2) !important;
  box-shadow: none !important;
}

/* Central guided step button - soft cloud look with glass effect */
.calm .calm-step-cloud-btn {
  position: relative;
  isolation: isolate; /* keeps pseudo-elements behind text cleanly */
  opacity: 1; /* ensure active is not faded */
  color: var(--calm-ink, var(--ink)) !important;
  font-weight: 700;

  /* soft "cloud glass" */
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Subtle mint tint overlay without changing global variables */
  background-image: linear-gradient(
    180deg,
    rgba(187, 247, 208, 0.22),
    rgba(255, 255, 255, 0.55)
  );

  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 999px;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.06);

  /* Remove text shadow if any */
  text-shadow: none;
  
  /* Keep current sizing if layout depends on it */
  min-height: 48px;
}

/* Cloud bumps */
.calm .calm-step-cloud-btn::before,
.calm .calm-step-cloud-btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.60);
  filter: blur(0.2px);
  border-radius: 999px;
}

.calm .calm-step-cloud-btn::before {
  width: 70%;
  height: 70%;
  top: -22%;
  left: -18%;
}

.calm .calm-step-cloud-btn::after {
  width: 78%;
  height: 78%;
  top: -28%;
  right: -20%;
}

/* Hover/focus (desktop) – gentle, not flashy */
.calm .calm-step-cloud-btn:focus-visible {
  outline: none;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 0 0 3px rgba(31, 58, 147, 0.12);
}

.calm .calm-step-cloud-btn:hover:not(:disabled):not(.btn-disabled) {
  background-image: linear-gradient(
    180deg,
    rgba(187, 247, 208, 0.28),
    rgba(255, 255, 255, 0.62)
  );
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.12),
    0 3px 8px rgba(0, 0, 0, 0.08);
}

/* Ensure disabled state still looks disabled */
.calm .calm-step-cloud-btn.btn-disabled,
.calm .calm-step-cloud-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
  background-image: linear-gradient(
    180deg,
    rgba(187, 247, 208, 0.12),
    rgba(255, 255, 255, 0.35)
  ) !important;
  color: var(--calm-muted) !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06) !important;
  pointer-events: none;
}

/* Chips UI for ex2_54321 */
.chip-counter {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--calm-muted);
  margin: 1rem 0 1.5rem;
}

.chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem 0;
  padding: 0 0.5rem;
}

.chip-chip {
  min-width: 56px;
  height: 56px;
  border: 2px solid rgba(78, 191, 150, 0.3);
  background: var(--calm-surface);
  color: var(--calm-ink);
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.chip-chip:hover {
  border-color: rgba(78, 191, 150, 0.5);
  background: rgba(78, 191, 150, 0.05);
  transform: translateY(-2px);
}

.chip-chip:active {
  transform: translateY(0);
}

.chip-chip--selected {
  background: linear-gradient(180deg, var(--calm-accent) 0%, var(--calm-accent2) 100%);
  border-color: rgba(78, 191, 150, 0.6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78, 191, 150, 0.25);
}

.chip-chip--selected:hover {
  border-color: rgba(78, 191, 150, 0.8);
  box-shadow: 0 4px 12px rgba(78, 191, 150, 0.35);
}

/* RTL support for Arabic and Farsi */
[dir="rtl"] .chip-container {
  direction: rtl;
}

[dir="rtl"] .chip-counter {
  direction: rtl;
}

@media (max-width: 480px) {
  .chip-chip {
    min-width: 52px;
    height: 52px;
    font-size: 1rem;
  }
  
  .chip-container {
    gap: 0.625rem;
  }
}

/* ========== Variant B: Grounding Chips UI (ex2_54321) ========== */
/* New class names as per Task 4 specification */

.grounding-hint {
  font-size: 1rem;
  font-weight: 500;
  color: var(--calm-muted);
  text-align: center;
  margin: 0.75rem 0 1rem;
  line-height: 1.5;
}

.grounding-counter {
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--calm-muted);
  margin: 1rem 0 1.5rem;
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  padding: 0 0.5rem;
}

.chip {
  min-width: 56px;
  height: 56px;
  border: 2px solid rgba(78, 191, 150, 0.3);
  background: var(--calm-surface);
  color: var(--calm-ink);
  border-radius: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Remove default button styles */
  padding: 0;
  margin: 0;
  font-family: inherit;
  text-align: center;
}

.chip:hover {
  border-color: rgba(78, 191, 150, 0.5);
  background: rgba(78, 191, 150, 0.05);
  transform: translateY(-2px);
}

.chip:active {
  transform: translateY(0);
}

.chip.is-selected {
  background: linear-gradient(180deg, var(--calm-accent) 0%, var(--calm-accent2) 100%);
  border-color: rgba(78, 191, 150, 0.6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(78, 191, 150, 0.25);
}

.chip.is-selected:hover {
  border-color: rgba(78, 191, 150, 0.8);
  box-shadow: 0 4px 12px rgba(78, 191, 150, 0.35);
}

.chip:focus-visible {
  outline: 2px solid rgba(78, 191, 150, 0.5);
  outline-offset: 2px;
}

/* Task 10: RTL support for Arabic and Farsi */
[dir="rtl"] .chip-grid {
  direction: rtl;
}

[dir="rtl"] .grounding-counter,
[dir="rtl"] .grounding-hint {
  direction: rtl;
  text-align: right;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .chip {
    min-width: 52px;
    height: 52px;
    font-size: 1rem;
  }
  
  .chip-grid {
    gap: 0.625rem;
    padding: 0 0.25rem;
  }
  
  .grounding-hint {
    font-size: 0.9375rem;
    margin: 0.5rem 0 0.75rem;
  }
  
  .grounding-counter {
    font-size: 0.9375rem;
    margin: 0.75rem 0 1rem;
  }
}

.completion-actions .btn-primary {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--calm-accent, var(--brand)) 92%, #fff 8%),
    var(--calm-accent, var(--brand))
  );
}

.timer-display {
  font-size: 2rem;
  font-weight: 600;
  color: var(--brand);
  text-align: center;
  margin: 1rem 0;
}

@media (max-width: 480px) {
  .guided-main {
    padding: 2rem 1rem;
  }
  
  .breathing-circle {
    width: 160px;
    height: 160px;
  }
  
  .guided-instruction {
    font-size: 1.25rem;
  }
  
  /* Exercise 4 completion message on mobile */
  .calm-completion-message {
    font-size: 1.75rem;
    padding: 1.25rem;
  }
}

/* Optional: Glow wrapper if .breathing-wrap exists */
.breathing-wrap {
  position: relative;
}

.breathing-wrap::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 999px;
  background: radial-gradient(circle, var(--calm-accent) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
  pointer-events: none;
}