@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Gutsphere design system tokens */
    --font-display: 'Inter', -apple-system, 'SF Pro Display', sans-serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --gs-coral: #EF5350;
    --gs-coral-glow: rgba(239, 83, 80, 0.07);
    --gs-coral-light: rgba(239, 83, 80, 0.14);
    /* Form choice chip — selected state (readable on light canvas) */
    --gs-choice-selected-border: #EF5350;
    --gs-choice-selected-bg: rgba(239, 83, 80, 0.12);
    --gs-choice-selected-text: #EF5350;
    --gs-card: #FFFFFF;
    --gs-card-elevated: #FFFFFF;
    --gs-white: #FFFFFF;
    --white: #FFFFFF;
    --gs-sand: #F5EEE8;
    --gs-sand-light: #FAF6F2;
    --gs-warm-cream: #FFFAF7;
    --gs-text-primary: #1C1917;
    --gs-text-secondary: #57534E;
    --gs-text-muted: #A8A29E;
    --gs-text-hint: #C4BBB5;
    --gs-border: #E7E0DA;
    --gs-border-hover: #D4CCC5;
    /* In-card list row dividers — much lighter than --gs-border (was rgba(0,0,0,0.03) pre–dark-mode) */
    --gs-divider: rgba(0, 0, 0, 0.03);
    --gs-green: #2E7D32;
    --gs-green-bg: #D1FAE5;
    --gs-amber-bg: #FEF3C7;
    --gs-amber-text: #92400E;
    --gs-red: #DC2626;
    --gs-red-bg: #FEE2E2;
    --gs-page-px: 24px;
    --gs-max-width: 430px;
    --gs-radius-sm: 8px;
    --gs-radius-md: 12px;
    --gs-radius-lg: 16px;
    --gs-radius-xl: 20px;
    --gs-radius-pill: 9999px;
    --gs-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --gs-shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --gs-shadow-lg: 0 8px 40px rgba(0,0,0,0.12);

    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 358 100% 65%;
    --primary-foreground: 210 40% 98%;
    --primary-hover: 358 100% 55%;

    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --secondary-hover: 214 32% 91%;

    --tertiary: 0 0% 25.1%;
    --tertiary-foreground: 210 40% 98%;
    --tertiary-hover: 24 9.8% 10%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --accent-border: 215 20.2% 65.1%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 358 100% 65%;
    --primary-foreground: 210 40% 98%;
    --primary-hover: 358 100% 55%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

@layer components {
  /* Shimmer effect for next tracker highlighting */
  .shimmer {
    position: relative;
    overflow: hidden;
  }

  .shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2),
      transparent
    );
    animation: shimmer 2.5s infinite;
    z-index: 1;
  }

  /* Green shimmer variant for green glass buttons */
  .shimmer-green {
    position: relative;
    overflow: hidden;
  }

  .shimmer-green::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(34, 197, 94, 0.3),
      rgba(34, 197, 94, 0.5),
      rgba(34, 197, 94, 0.3),
      transparent
    );
    animation: shimmer 2.5s infinite;
    z-index: 1;
  }

  /* Ensure content stays above shimmer */
  .shimmer-green > * {
    position: relative;
    z-index: 2;
  }

  .dark .shimmer::before {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2),
      transparent
    );
  }

  /* White shimmer for green buttons in dark mode */
  .dark .shimmer-green::before {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2),
      transparent
    );
  }

  @keyframes shimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  /* Primary button style */
  .btn-primary {
    @apply bg-primary text-white font-semibold rounded-lg transition-all shadow-sm;
  }

  .btn-primary:hover {
    @apply bg-primary/90 shadow-lg;
  }

  .btn-primary:active {
    @apply bg-primary/80;
  }

  .btn-primary:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  /* Smart recap follow-up tabs */
  .gs-followups-tab {
    background: transparent;
    color: var(--gs-text-secondary);
    box-shadow: none;
  }

  .gs-followups-tab-active {
    background: var(--gs-coral);
    color: var(--gs-white, #FFFFFF);
    box-shadow: var(--gs-shadow-sm);
  }

  /* Ensure content stays above shimmer */
  .shimmer > * {
    position: relative;
    z-index: 2;
  }

  /* White shimmer effect for buttons (used on trackers + daily pages) */
  .shimmer-button,
  .shimmer-light {
    position: relative;
    overflow: hidden;
  }

  .shimmer-button::before,
  .shimmer-light::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.2),
      transparent
    );
    animation: shimmer 2.5s infinite;
    z-index: 1;
  }

  /* Ensure content stays above shimmer */
  .shimmer-button > *,
  .shimmer-light > * {
    position: relative;
    z-index: 2;
  }

  /* Glassy button styles */
  .glass-button {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
  }

  .glass-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  .glass-button:active {
    transform: translateY(0);
    box-shadow: 
      0 4px 20px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  /* Dark mode glass button */
  .dark .glass-button {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .dark .glass-button:hover {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  /* Colored glass buttons */
  .glass-button-primary {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    box-shadow: 
      0 8px 32px rgba(34, 197, 94, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .glass-button-primary:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 
      0 12px 40px rgba(34, 197, 94, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  .glass-button-secondary {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    box-shadow: 
      0 8px 32px rgba(245, 158, 11, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .glass-button-secondary:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 
      0 12px 40px rgba(245, 158, 11, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }

  /* Circular shimmer effect for current tracker icon */
  .circular-shimmer {
    position: relative;
    overflow: hidden;
  }

  .circular-shimmer::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
      transparent,
      rgba(59, 130, 246, 0.4),
      transparent 30%
    );
    animation: circular-shimmer-spin 3s linear infinite;
  }

  .dark .circular-shimmer::before {
    background: conic-gradient(
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent 30%
    );
  }

  @keyframes circular-shimmer-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Beautiful colored slider tracks for fasting logs */

/* Base slider styling - using higher specificity */
input[type="range"].slider {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  cursor: pointer !important;
  height: 8px !important;
  outline: none !important;
  border: none !important;
}

/* Energy, Hunger, and Meal Quality: Red to Orange to Green gradient */
input[type="range"].energy-slider::-webkit-slider-track,
input[type="range"].hunger-slider::-webkit-slider-track,
input[type="range"].meal-quality-slider::-webkit-slider-track {
  background: linear-gradient(to right, 
    #dc2626 0%,     /* Red (1) */
    #ea580c 25%,    /* Orange (2-3) */
    #eab308 50%,    /* Yellow (4-5) */
    #65a30d 75%,    /* Light Green (6-7) */
    #16a34a 100%    /* Green (8-9) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

input[type="range"].energy-slider::-moz-range-track,
input[type="range"].hunger-slider::-moz-range-track,
input[type="range"].meal-quality-slider::-moz-range-track {
  background: linear-gradient(to right, 
    #dc2626 0%,     /* Red (1) */
    #ea580c 25%,    /* Orange (2-3) */
    #eab308 50%,    /* Yellow (4-5) */
    #65a30d 75%,    /* Light Green (6-7) */
    #16a34a 100%    /* Green (8-9) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

/* Hydration: White to Blue gradient */
input[type="range"].hydration-slider::-webkit-slider-track {
  background: linear-gradient(to right, 
    #f8fafc 0%,     /* Very light gray/white (1) */
    #cbd5e1 25%,    /* Light gray (2) */
    #60a5fa 50%,    /* Light blue (3) */
    #3b82f6 75%,    /* Blue (4) */
    #1d4ed8 100%    /* Dark blue (5) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

input[type="range"].hydration-slider::-moz-range-track {
  background: linear-gradient(to right, 
    #f8fafc 0%,     /* Very light gray/white (1) */
    #cbd5e1 25%,    /* Light gray (2) */
    #60a5fa 50%,    /* Light blue (3) */
    #3b82f6 75%,    /* Blue (4) */
    #1d4ed8 100%    /* Dark blue (5) */
  ) !important;
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
}

/* Generic slider track styling (fallback) */
input[type="range"].slider::-webkit-slider-track {
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
  background: #d1d5db !important; /* More visible gray fallback */
}

input[type="range"].slider::-moz-range-track {
  height: 8px !important;
  border-radius: 4px !important;
  border: none !important;
  background: #d1d5db !important; /* More visible gray fallback */
}

/* Basic visible colors for different slider types */
input[type="range"].energy-slider {
  background: linear-gradient(to right, #f87171, #fbbf24, #34d399) !important;
}

input[type="range"].hunger-slider {
  background: linear-gradient(to right, #ef4444, #f59e0b, #10b981) !important;
}

input[type="range"].meal-quality-slider {
  background: linear-gradient(to right, #dc2626, #f59e0b, #059669) !important;
}

input[type="range"].hydration-slider {
  background: linear-gradient(to right, #e5e7eb, #60a5fa, #1d4ed8) !important;
}

/* Enhanced slider thumbs */
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
  margin-top: -8px !important; /* Center 24px thumb on 8px track: (24-8)/2 = 8px */
}

/* Common slider-custom style for movement entries */
input[type="range"].slider-custom {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  cursor: pointer !important;
  height: 8px !important;
  outline: none !important;
  border: none !important;
}

input[type="range"].slider-custom::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
  margin-top: -8px !important; /* Center 24px thumb on 8px track: (24-8)/2 = 8px */
}

input[type="range"].slider-custom::-moz-range-thumb {
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
}

input[type="range"].slider-custom:focus {
  outline: none !important;
}

input[type="range"].slider-custom::-webkit-slider-thumb:hover,
input[type="range"].slider-custom:focus::-webkit-slider-thumb {
  transform: scale(1.1) !important;
}

input[type="range"].slider-custom::-moz-range-thumb:hover,
input[type="range"].slider-custom:focus::-moz-range-thumb {
  transform: scale(1.1) !important;
}

/* Generic styling for all range inputs without specific classes */
input[type="range"]::-webkit-slider-track {
  height: 8px !important;
  border-radius: 4px !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease-in-out !important;
  margin-top: -8px !important;
}

input[type="range"]::-moz-range-track {
  height: 8px !important;
  border-radius: 4px !important;
}

input[type="range"]::-moz-range-thumb {
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease-in-out !important;
}

input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.1) !important;
}

input[type="range"]::-moz-range-thumb:hover,
input[type="range"]:focus::-moz-range-thumb {
  transform: scale(1.1) !important;
}

input[type="range"]:focus {
  outline: none !important;
}

input.slider::-webkit-slider-thumb:hover,
input.slider:focus::-webkit-slider-thumb {
  transform: scale(1.1) !important;
}

input.slider::-moz-range-thumb {
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.2s ease-in-out !important;
}

input.slider::-moz-range-thumb:hover,
input.slider:focus::-moz-range-thumb {
  transform: scale(1.1) !important;
}

/* Focus states */
input.slider:focus {
  outline: none !important;
}

/* Dark mode adjustments - keep the coral gradient */
.dark input.slider::-webkit-slider-thumb,
.dark input.slider::-moz-range-thumb {
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  border-color: #ffffff !important;
}

.dark input[type="range"]::-webkit-slider-thumb,
.dark input[type="range"]::-moz-range-thumb {
  background: linear-gradient(135deg, #FF5A5F 0%, #FA6B54 100%) !important;
  border-color: #ffffff !important;
}
}

/* Bowel movement prototype: hide Blood section when "No bowel movement today" is selected */
form[data-stool-passed="no_bowel_movement"] #bowel_movement_blood_section {
  display: none !important;
}

@layer components {
  /* Gutsphere typography */
  .gs-page-title { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; color: var(--gs-text-primary); }
  .gs-page-subtitle { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--gs-text-secondary); }
  .gs-section-title { font-family: var(--font-body); font-size: 15px; font-weight: 700; line-height: 1.0; color: var(--gs-text-primary); }
  .gs-card-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; line-height: 1.0; color: var(--gs-text-primary); }
  .gs-card-subtitle { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--gs-text-secondary); }
  .gs-row-title { font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1.0; color: var(--gs-text-primary); }
  .gs-row-subtitle { font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.0; color: var(--gs-text-muted); }
  .gs-group-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.0; color: var(--gs-text-hint); text-transform: uppercase; letter-spacing: 0.06em; }
  .gs-body { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--gs-text-secondary); }
  .gs-body-small { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--gs-text-secondary); }
  .gs-caption { font-family: var(--font-body); font-size: 12px; font-weight: 400; line-height: 1.0; color: var(--gs-text-muted); }
  .gs-hint { font-family: var(--font-body); font-size: 11px; font-weight: 500; line-height: 1.0; color: var(--gs-text-hint); }
  .gs-label { font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1.0; color: var(--gs-text-muted); }
  .gs-heading-lg { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.0; color: var(--gs-text-primary); }
  .gs-heading-md { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.0; letter-spacing: -0.02em; color: var(--gs-text-primary); }
  .gs-profile-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.0; color: var(--gs-text-primary); }

  /* ── Design system primitives (grouped selectors — single source for shared surfaces) ── */

  /* Card / bordered panel */
  .gs-surface-card,
  .gs-tracker-card,
  .gs-stands-out-insight-card,
  .gs-options-container,
  .gs-care-list-shell,
  .gs-care-panel-shell,
  .gs-chat-ai-card,
  .gs-chat-composer-shell {
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
  }
  .gs-surface-card,
  .gs-tracker-card,
  .gs-stands-out-insight-card,
  .gs-options-container,
  .gs-chat-ai-card,
  .gs-chat-composer-shell {
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-sm);
  }
  .gs-care-list-shell,
  .gs-care-panel-shell {
    border-radius: var(--gs-radius-lg);
  }
  .gs-options-container {
    border-radius: var(--gs-radius-md);
    padding: 8px 12px;
  }
  .gs-care-list-shell {
    padding: 4px 8px;
    overflow: hidden;
  }
  .gs-care-panel-shell {
    padding: 16px 16px 14px;
  }

  /* Coral-glow emphasis sections (What Stands Out, diet plans highlight, etc.) */
  .gs-insight-emphasis,
  .gs-stands-out-section {
    background: var(--gs-insight-section-bg, var(--gs-coral-glow));
    border: 1px solid var(--gs-insight-section-border, var(--gs-coral-light));
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-sm);
    padding: var(--gs-space-5, 20px);
  }

  /* Elevated inset tiles (weekly snapshot metrics, recap stats) */
  .gs-surface-elevated,
  .gs-weekly-snapshot-tile,
  .gs-recap-stat {
    background: var(--gs-snapshot-tile-bg, var(--gs-sand-light));
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
  }

  /* Icon wells — neutral or insight-accent */
  .gs-icon-well,
  .gs-stands-out-section__heading-icon,
  .gs-stands-out-insight-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .gs-icon-well {
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
    border-radius: var(--gs-radius-md);
  }
  .gs-stands-out-section__heading-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--gs-card);
    border: 1px solid var(--gs-insight-section-border, var(--gs-coral-light));
    color: var(--gs-coral);
  }
  .gs-stands-out-insight-card__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--gs-radius-md);
    background: var(--gs-insight-section-bg, var(--gs-coral-glow));
    border: 1px solid var(--gs-insight-section-border, var(--gs-coral-light));
    color: var(--gs-coral);
  }

  /* Pill segment tab bar + tab button */
  .gs-segment-tablist,
  .gs-diet-plan-tablist {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: var(--gs-radius-pill);
    background: var(--gs-segment-track-bg, var(--gs-sand-light));
    border: 1px solid var(--gs-border);
  }
  .gs-segment-tab,
  .gs-diet-plan-tab {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: none;
    border-radius: var(--gs-radius-pill);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.15s;
  }

  /* Segment tab states — primary (coral fill) */
  .gs-tab-active {
    background: var(--gs-coral) !important;
    color: #fff !important;
    font-weight: 600;
  }
  .gs-tab-inactive {
    background: var(--gs-sand-light) !important;
    color: var(--gs-text-secondary) !important;
    font-weight: 500;
  }
  .gs-tab-inactive:hover {
    background: var(--gs-sand) !important;
  }
  /* Inactive tabs inside a pill track */
  .gs-segment-tablist .gs-tab-inactive,
  .gs-diet-plan-tablist .gs-tab-inactive {
    background: transparent !important;
    color: var(--gs-text-secondary) !important;
  }
  .gs-segment-tablist .gs-tab-inactive:hover,
  .gs-diet-plan-tablist .gs-tab-inactive:hover {
    background: var(--gs-sand) !important;
    color: var(--gs-text-primary) !important;
  }

  /* Segment tab states — secondary (coral glow) */
  .gs-tab-sub-active {
    background: var(--gs-coral-glow);
    color: var(--gs-coral);
    font-weight: 600;
  }
  .gs-tab-sub-inactive {
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
    font-weight: 500;
  }
  .gs-tab-sub-inactive:hover {
    background: var(--gs-sand-light);
  }

  /* Form choice chips (radio/checkbox labels) — input.peer must be immediate sibling before label */
  .gs-choice-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 10px;
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    background: var(--gs-card);
    color: var(--gs-text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .gs-choice-chip:hover {
    border-color: var(--gs-coral-light);
  }
  input.peer:checked + .gs-choice-chip,
  label:has(> input.peer:checked) .gs-choice-chip,
  label:has(> input.peer:checked) > .gs-choice-chip {
    border-color: var(--gs-choice-selected-border) !important;
    background: var(--gs-choice-selected-bg) !important;
    color: var(--gs-choice-selected-text) !important;
    font-weight: 600;
  }
  input.peer:checked + .gs-choice-chip::after,
  label:has(> input.peer:checked) .gs-choice-chip::after,
  label:has(> input.peer:checked) > .gs-choice-chip::after {
    content: "\2713";
    margin-left: 4px;
    color: var(--gs-choice-selected-text);
    font-weight: 800;
  }
  .gs-choice-chip--row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    padding: 12px;
  }
  input.peer:checked + .gs-choice-chip--row::after {
    margin-left: 6px;
  }
  /* Large yes/no gates (stool passed, pain present, etc.) */
  .gs-choice-chip--prominent {
    padding: 20px;
    border-radius: var(--gs-radius-xl);
    font-size: 14px;
  }
  input.peer:checked + .gs-choice-chip--prominent::after {
    font-size: 1.25rem;
    margin-left: 8px;
  }
  /* BMP stool form row (icon + label + description) */
  .gs-choice-chip--shape {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 8px;
    padding: 12px 16px;
    font-size: 12px;
  }
  .gs-choice-chip--shape.gs-choice-chip--tall {
    min-height: 3rem;
  }
  .gs-choice-chip--stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px;
    font-size: 14px;
  }

  /* BM / tracker time quick-pick buttons (Morning, Afternoon, etc.) */
  .gs-time-quick-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-body);
    border: 1px solid var(--gs-border);
    border-radius: 10px;
    background: var(--gs-card);
    color: var(--gs-text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .gs-time-quick-btn:hover {
    border-color: var(--gs-coral-light);
  }
  .gs-time-quick-btn--active {
    border-color: var(--gs-choice-selected-border) !important;
    background: var(--gs-choice-selected-bg) !important;
    color: var(--gs-choice-selected-text) !important;
    box-shadow: 0 0 0 2px var(--gs-coral-light);
  }

  /* Tracker form fields */
  .gs-form-section {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: var(--gs-radius-lg);
    border: 1px solid var(--gs-border);
    background: var(--gs-sand-light);
  }
  .gs-form-section-inner {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--gs-radius-md);
    border: 1px solid var(--gs-border);
    background: var(--gs-card);
  }
  .gs-form-input,
  .gs-form-textarea {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--gs-text-primary);
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .gs-form-textarea {
    resize: vertical;
    min-height: 96px;
  }
  .gs-form-input::placeholder,
  .gs-form-textarea::placeholder {
    color: var(--gs-text-hint);
  }
  .gs-form-input:hover,
  .gs-form-textarea:hover {
    border-color: var(--gs-coral-light);
  }
  .gs-form-input:focus,
  .gs-form-textarea:focus {
    outline: none;
    border-color: var(--gs-coral);
    box-shadow: 0 0 0 2px var(--gs-coral-light);
  }
  .gs-form-input[type="date"],
  .gs-form-input[type="time"],
  .gs-form-input[type="datetime-local"] {
    accent-color: var(--gs-coral);
    color-scheme: light dark;
  }
  select.gs-form-input,
  select.gs-form-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2357534E'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }
  .dark select.gs-form-input,
  .dark select.gs-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C4BBB5'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  }
  .gs-preset-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-family: var(--font-body);
    font-size: 12px;
    padding: 12px;
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    background: var(--gs-card);
    color: var(--gs-text-primary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
  }
  .gs-preset-btn:hover {
    border-color: var(--gs-coral-light);
  }
  .gs-preset-btn--active {
    border-color: var(--gs-choice-selected-border) !important;
    background: var(--gs-choice-selected-bg) !important;
    color: var(--gs-choice-selected-text) !important;
    font-weight: 600;
  }
  .gs-preset-btn--active::after {
    content: "\2713";
    margin-left: 4px;
    color: var(--gs-choice-selected-text);
    font-weight: 800;
  }
  .gs-photo-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 112px;
    padding: 8px;
    width: 100%;
    cursor: pointer;
    border: 2px dashed var(--gs-border);
    border-radius: var(--gs-radius-md);
    background: var(--gs-card);
    color: var(--gs-text-primary);
    transition: border-color 0.15s, background 0.15s;
  }
  .gs-photo-upload-zone:hover {
    border-color: var(--gs-coral-light);
    background: var(--gs-coral-glow);
  }
  .gs-form-alert-error {
    padding: 8px 12px;
    border-radius: var(--gs-radius-md);
    font-size: 12px;
    text-align: center;
    color: var(--gs-red);
    background: var(--gs-red-bg);
    border: 1px solid color-mix(in srgb, var(--gs-red) 30%, var(--gs-border));
  }
  .gs-form-alert-success {
    padding: 12px 16px;
    border-radius: var(--gs-radius-lg);
    background: var(--gs-green-bg);
    border: 1px solid color-mix(in srgb, var(--gs-green) 35%, var(--gs-border));
    color: var(--gs-green);
  }
  .gs-callout-success {
    padding: 24px 16px;
    border-radius: var(--gs-radius-lg);
    background: var(--gs-green-bg);
    border: 1px solid color-mix(in srgb, var(--gs-green) 35%, var(--gs-border));
    color: var(--gs-green);
  }
  .gs-color-swatch-border {
    border: 2px solid var(--gs-border-hover);
  }
  .gs-btn-destructive-sm {
    padding: 8px 12px;
    border-radius: var(--gs-radius-md);
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--gs-red);
    border: none;
    cursor: pointer;
    box-shadow: var(--gs-shadow-sm);
  }

  /* Diet plan — food lists & secondary buttons */
  .gs-diet-plan-bucket,
  .gs-diet-plan-checklist {
    background: var(--gs-snapshot-tile-bg, var(--gs-sand-light));
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    overflow: hidden;
  }
  .gs-btn-muted {
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-md);
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
  }
  .gs-callout-amber {
    padding: 12px;
    border-radius: var(--gs-radius-md);
    border: 1px solid color-mix(in srgb, var(--gs-amber-text) 35%, var(--gs-border));
    background: var(--gs-amber-bg);
    color: var(--gs-amber-text);
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.45;
  }

  /* Low FODMAP program week picker */
  .gs-program-week-tablist {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    gap: 6px;
  }
  .gs-program-week-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    padding: 10px 4px;
    border-radius: var(--gs-radius-md);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid var(--gs-border);
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .gs-program-week-btn[aria-selected="true"] {
    background: var(--gs-coral);
    color: #fff;
    border-color: transparent;
  }

  /* Chat @guide_key mentions */
  .chat-guide-mention-token {
    color: var(--gs-coral);
    font-weight: 600;
  }
  .chat-composer-mention-wrap {
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
  }
  .chat-composer-mention-mirror {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
    padding: 4px 2px;
    font-size: 14px;
    font-family: var(--font-body), sans-serif;
    line-height: 1.45;
    color: var(--gs-text-primary);
    overflow: hidden;
    background: transparent;
  }
  .chat-composer-mention-mirror-inner {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    color: var(--gs-text-primary);
  }
  .chat-composer-mention-mirror-inner .chat-guide-mention-token {
    color: var(--gs-coral);
  }

  /* Authenticated chat — consistent row rhythm (pairs with user bubbles) */
  .gs-chat-message-row {
    margin: 12px 0;
    display: flex;
    width: 100%;
    padding: 12px 0;
    font-family: var(--font-body), sans-serif;
  }
  .gs-chat-ai-stack {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }
  .gs-chat-ai-card {
    margin-top: 6px;
    padding: 16px;
  }
  .gs-chat-composer-shell {
    width: 100%;
    padding: 10px 12px;
    overflow: visible;
  }
  .gs-chat-surface {
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    color: var(--gs-text-primary);
  }
  .gs-chat-modal {
    background: var(--gs-card);
    border-radius: 20px;
    box-shadow: var(--gs-shadow-md);
    color: var(--gs-text-primary);
  }
  .gs-chat-format-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1.5px solid var(--gs-coral);
    background: var(--gs-card);
    color: var(--gs-coral);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
  }
  .gs-chat-mention-menu {
    pointer-events: auto;
    flex-direction: column;
    background: var(--gs-card-elevated);
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    box-shadow: var(--gs-shadow-lg);
    overflow: hidden;
    max-height: min(42vh, 248px);
    min-width: 200px;
    max-width: 272px;
    color: var(--gs-text-primary);
    z-index: 250;
  }
  .gs-chat-mention-menu[hidden] {
    display: none !important;
  }
  .gs-chat-mention-menu:not([hidden]) {
    display: flex !important;
  }
  .gs-chat-mention-menu__header {
    flex-shrink: 0;
    padding: 5px 10px 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gs-text-secondary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-family: var(--font-body);
    border-bottom: 1px solid var(--gs-border);
    background: var(--gs-sand-light);
  }
  .gs-chat-mention-menu__list {
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
  }
  .chat-guide-mention-option {
    font-family: var(--font-body);
    color: var(--gs-text-primary);
    border-radius: 8px;
    margin: 1px 3px;
    width: calc(100% - 6px);
    border: none;
    cursor: pointer;
    background: transparent;
  }
  .chat-guide-mention-option.is-highlighted,
  .chat-guide-mention-option:hover {
    background: var(--gs-sand-light);
  }
  .chat-guide-mention-option__avatar {
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gs-sand-light);
    border: 1px solid var(--gs-border);
    color: var(--gs-text-secondary);
    font-size: 12px;
    font-weight: 600;
  }
  .gs-chat-thinking-card {
    font-family: var(--font-body);
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-sm);
  }
  .gs-chat-thinking-pulse-core {
    background: var(--gs-card);
  }
  .gs-chat-chip-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--gs-border);
    background: var(--gs-card);
    color: var(--gs-text-primary);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
  }
  .gs-chat-input-field {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--gs-border);
    background: var(--gs-card);
    color: var(--gs-text-primary);
    font-family: var(--font-body);
  }
  .gs-chat-recommendation-btn {
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    color: var(--gs-text-primary);
    padding: 10px 12px;
    border-radius: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    width: 100%;
  }
  .gs-chat-prompt-card {
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-sm);
    font-family: var(--font-body);
    overflow: hidden;
  }
  .guide-segments-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    font-family: var(--font-body), sans-serif;
  }
  .chat-composer-mention-textarea {
    position: relative;
    z-index: 1;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: var(--gs-coral);
    background: transparent !important;
  }
  .chat-composer-mention-textarea::placeholder {
    color: var(--gs-text-hint) !important;
    -webkit-text-fill-color: var(--gs-text-hint) !important;
    opacity: 1;
  }
  .chat-composer-mention-textarea.gs-chat-composer-input,
  .chat-composer-mention-textarea.gs-body-small {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
  }

  /* Chat composer + search — suppress browser focus rings/borders */
  .gs-chat-composer-shell:focus-within,
  .gs-chat-composer-shell form:focus-within {
    border-color: var(--gs-border) !important;
    box-shadow: var(--gs-shadow-sm) !important;
    outline: none !important;
  }
  .gs-chat-composer-input,
  .gs-chat-composer-input:focus,
  .gs-chat-composer-input:focus-visible,
  .gs-chat-composer-input:active,
  .chat-composer-mention-textarea:focus,
  .chat-composer-mention-textarea:focus-visible,
  .chat-composer-mention-textarea:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Chat hub — conversations Turbo skeleton */
  turbo-frame#chat_conversations_results .chat-conversations-results-skeleton { display: none; }
  turbo-frame#chat_conversations_results[busy] .chat-conversations-results-skeleton { display: block; }
  turbo-frame#chat_conversations_results[busy] .chat-conversations-results-body { display: none; }
  turbo-frame#chat_conversations_results:not([busy]) .chat-conversations-results-body { display: block; }
  .chat-conversations-skeleton-row {
    border-radius: 12px;
    height: 52px;
    margin-bottom: 10px;
    background: linear-gradient(90deg, var(--gs-sand-light) 20%, var(--gs-border) 45%, var(--gs-sand-light) 70%);
    background-size: 220% 100%;
    animation: chat-conv-sk 1.75s ease-in-out infinite;
  }

  /* Anonymous / public marketing chat shells */
  .gs-anonymous-chat-body {
    background: var(--gs-bg);
    color: var(--gs-text-primary);
    font-family: var(--font-body), sans-serif;
    min-height: 100vh;
  }
  .gs-anonymous-chat-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid var(--gs-border);
    background: var(--gs-card);
  }
  .gs-anonymous-chat-messages-pane {
    flex: 1;
    background: var(--gs-bg);
    font-size: 14px;
  }
  .gs-anonymous-chat-message-row {
    margin: 8px auto;
    display: flex;
    width: 100%;
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: var(--gs-shadow-sm);
    background: var(--gs-card);
  }
  .gs-anonymous-chat-user-bubble {
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 4px;
    text-align: right;
    background: var(--gs-sand-light);
    color: var(--gs-text-primary);
  }
  .gs-anonymous-chat-ai-bubble {
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 4px;
    text-align: left;
    background: var(--gs-sand-light);
    color: var(--gs-text-primary);
  }
  .gs-anonymous-chat-composer {
    width: 100%;
    padding: 8px;
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    box-shadow: var(--gs-shadow-sm);
  }
  .gs-anonymous-chat-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--gs-card) 95%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--gs-border);
    padding: 8px 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gs-public-chat-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--gs-card);
    box-shadow: var(--gs-shadow-md);
    border-top: 1px solid var(--gs-border);
    padding: 24px 16px;
  }
  .gs-public-chat-body {
    background: var(--gs-bg);
    color: var(--gs-text-primary);
    font-family: var(--font-body), sans-serif;
    min-height: 100vh;
  }
  .gs-anonymous-chat-chip-btn {
    background: var(--gs-sand-light);
    color: var(--gs-text-primary);
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .gs-anonymous-chat-prompt-domain-card {
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    border-radius: 12px;
    transition: border-color 0.2s ease;
  }
  .gs-anonymous-chat-prompt-domain-card:hover {
    border-color: var(--gs-coral-light);
  }
  .gs-anonymous-chat-icon-btn {
    padding: 4px;
    border-radius: 4px;
    border: none;
    background: transparent;
    color: var(--gs-text-hint);
    cursor: pointer;
  }
  .gs-anonymous-chat-icon-btn:hover {
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
  }
  .gs-chat-prompt-nav-btn {
    pointer-events: auto;
    border-radius: 9999px;
    padding: 8px;
    transition: opacity 0.15s ease;
    opacity: 0.6;
    background: var(--gs-card);
    border: 1px solid var(--gs-border);
    box-shadow: var(--gs-shadow-sm);
  }
  .gs-chat-prompt-nav-btn:hover {
    opacity: 1;
  }
  @keyframes chat-conv-sk { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

  /* GS search field (chat hub + reuse) */
  .gs-search-field-form { margin-top: 10px; }
  .gs-search-field-shell {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--gs-card) !important;
    border-radius: 24px;
    border: 1px solid var(--gs-border) !important;
    padding: 6px 6px 6px 14px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .dark .gs-search-field-shell {
    background-color: var(--gs-card-elevated) !important;
    box-shadow: var(--gs-shadow-sm);
  }
  .gs-search-field-shell:focus-within {
    border-color: var(--gs-border) !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .gs-search-field-input {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--gs-text-primary) !important;
    background-color: transparent !important;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  .gs-search-field-input::placeholder {
    color: var(--gs-text-hint) !important;
    opacity: 1;
  }
  .gs-search-field-input:focus,
  .gs-search-field-input:focus-visible,
  .gs-search-field-input:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .gs-search-field-submit {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .gs-search-field-submit:focus,
  .gs-search-field-submit:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }

  .gs-guide-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
  }

  /* Yesterday's log / recap clone dialogs */
  .gs-yesterday-dialog-panel {
    background: var(--gs-card);
    border-color: var(--gs-border);
    box-shadow: var(--gs-shadow-md);
  }
  .gs-yesterday-dialog-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--gs-card) 92%, transparent);
    backdrop-filter: blur(1px);
  }
  .gs-recap-entry-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gs-recap-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    text-align: center;
  }
  .gs-recap-stat-value {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    color: var(--gs-text-primary);
    line-height: 1.2;
  }
  .gs-recap-stat-label {
    font-family: var(--font-body);
    font-size: 10px;
    color: var(--gs-text-muted);
    margin-top: 2px;
  }

  /* Row separator inside cards — subtle line between adjacent rows */
  .gs-row-separator + .gs-row-separator {
    border-top: 1px solid var(--gs-divider);
  }

  /* Track records list — same divider pattern as profile rows */
  .gs-record-list {
    margin: 0 -4px;
  }
  .gs-record-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-radius: 12px;
    transition: background 0.12s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
  }
  .gs-record-row + .gs-record-row {
    border-top: 1px solid var(--gs-divider);
  }

  /* Bowel home — feature-specific overrides (primitives above) */
  .gs-stands-out-insight-card {
    border-color: var(--gs-insight-section-border, var(--gs-coral-light));
    padding: var(--gs-space-5, 20px);
    transition: border-color 0.15s;
  }
  .gs-stands-out-insight-card:hover {
    border-color: var(--gs-coral);
  }
  .gs-weekly-snapshot-tile {
    padding: var(--gs-space-5, 20px);
    transition: border-color 0.15s, background 0.15s;
  }
  .gs-weekly-snapshot-tile:hover {
    border-color: var(--gs-border-hover);
  }
  .gs-weekly-snapshot-bar--filled {
    background: var(--gs-snapshot-bar-fill, var(--gs-coral));
  }
  .gs-weekly-snapshot-bar--empty {
    background: var(--gs-snapshot-bar-empty, var(--gs-border));
  }
  .gs-weekly-trend--up {
    color: var(--gs-green);
  }
  .gs-weekly-trend--down {
    color: var(--gs-text-muted);
  }
  .gs-weekly-trend--neutral {
    color: var(--gs-text-hint);
  }
  .gs-confidence-badge--high,
  .gs-confidence-badge--moderate {
    background: var(--gs-sand-light);
    color: var(--gs-text-secondary);
    border: 1px solid var(--gs-border);
  }
  .gs-confidence-badge--early {
    background: var(--gs-amber-bg);
    color: var(--gs-amber-text);
    border: 1px solid transparent;
  }
  .dark .gs-confidence-badge--high,
  .dark .gs-confidence-badge--moderate {
    background: var(--gs-card-elevated);
    color: var(--gs-text-secondary);
    border-color: var(--gs-border);
  }

  /* Breath coach — Quick / Standard pace toggles (guided + stress plan) */
  .gs-breathing-mode-btn {
    font-family: var(--font-body);
    border: 1px solid var(--gs-border);
    background: var(--gs-card);
    color: var(--gs-text-primary);
  }
  .gs-breathing-mode-btn.is-active {
    background: var(--gs-coral);
    color: #fff;
    border-color: var(--gs-coral);
  }
  .gs-breathing-circle {
    background: var(--gs-coral-glow);
    border: 2px solid var(--gs-coral-light);
  }

  /* Habit week review — Keep / Not sure / Didn't help */
  .gs-habit-feedback-btn {
    flex: 1;
    border-radius: 16px;
    padding: 8px;
    border: 1px solid var(--gs-border);
    background: var(--gs-card);
    color: var(--gs-text-secondary);
    font-family: var(--font-body);
    cursor: pointer;
  }
  .gs-habit-feedback-btn.is-selected[data-habit-feedback-type-value="keep"] {
    border: 2px solid var(--gs-coral);
    background: var(--gs-coral-glow);
    color: var(--gs-text-primary);
  }
  .gs-habit-feedback-btn.is-selected[data-habit-feedback-type-value="not_sure"] {
    border: 2px solid var(--gs-amber-text);
    background: var(--gs-amber-bg);
    color: var(--gs-text-primary);
  }
  .gs-habit-feedback-btn.is-selected[data-habit-feedback-type-value="didnt_help"] {
    border: 2px solid var(--gs-red);
    background: var(--gs-red-bg);
    color: var(--gs-text-primary);
  }

  /* Multi-step flow nav (habit review, visit prep wizard) */
  .gs-flow-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gs-border);
    background: var(--gs-card);
    color: var(--gs-text-secondary);
    cursor: pointer;
  }
  .gs-flow-nav-btn--primary {
    border: none;
    background: var(--gs-coral);
    color: #fff;
  }

  /* Scrollbar hide for segment tabs */
  .gs-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .gs-scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
}

@layer utilities {
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Loading skeleton animations */
  .animate-pulse-fast {
    animation: pulse-fast 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  @keyframes pulse-fast {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }

  /* Smooth transitions for form states */
  .form-transition {
    transition: all 0.3s ease-in-out;
  }

  /* Button loading state */
  .button-loading {
    position: relative;
    color: transparent !important;
  }

  .button-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: button-spin 1s linear infinite;
  }

  @keyframes button-spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Custom scrollbar styles for treatment adherence section */
  .treatment-adherence-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) transparent;
  }

  .treatment-adherence-scroll::-webkit-scrollbar {
    width: 6px;
  }

  .treatment-adherence-scroll::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded-lg;
  }

  .treatment-adherence-scroll::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-lg;
  }

  .treatment-adherence-scroll::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-500;
  }

  .dark .treatment-adherence-scroll {
    scrollbar-color: rgb(75 85 99) transparent;
  }

  /* Enhanced slider thumb for bowel movement prototype - larger and more visible */
  input[type="range"].slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    height: 28px !important;
    width: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    cursor: pointer !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 3px 10px rgba(251, 146, 60, 0.4), 0 0 0 2px rgba(251, 146, 60, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
    margin-top: -10px !important; /* Center 28px thumb on 12px track */
  }

  input[type="range"].slider-thumb::-moz-range-thumb {
    height: 28px !important;
    width: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #fb923c 0%, #f97316 100%) !important;
    cursor: pointer !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 3px 10px rgba(251, 146, 60, 0.4), 0 0 0 2px rgba(251, 146, 60, 0.1) !important;
    transition: all 0.2s ease-in-out !important;
  }

  input[type="range"].slider-thumb::-webkit-slider-thumb:hover,
  input[type="range"].slider-thumb:focus::-webkit-slider-thumb {
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.5), 0 0 0 3px rgba(251, 146, 60, 0.2) !important;
  }

  input[type="range"].slider-thumb::-moz-range-thumb:hover,
  input[type="range"].slider-thumb:focus::-moz-range-thumb {
    transform: scale(1.15) !important;
    box-shadow: 0 4px 12px rgba(251, 146, 60, 0.5), 0 0 0 3px rgba(251, 146, 60, 0.2) !important;
  }

  input[type="range"].slider-thumb {
    height: 12px !important;
  }

  input[type="range"].slider-thumb::-webkit-slider-track {
    height: 12px !important;
    border-radius: 6px !important;
  }

  input[type="range"].slider-thumb::-moz-range-track {
    height: 12px !important;
    border-radius: 6px !important;
  }
}

/* Profile feature sheets render outside <main> — above header, FAB, and bottom nav */
#profile-feature-sheets #super-team-share-sheet,
#support-network-supporter-sheet {
  z-index: 100;
}