/* ==========================================================================
   MEMORIA AI — DESIGN SYSTEM & HIGH-CRAFT UI SPECIFICATION
   Compassionate Cognitive Care & Senior-First Accessibility
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* --- Root Design Tokens --- */
:root {
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Atkinson Hyperlegible Next', system-ui, -apple-system, sans-serif;

  /* Color Palette — Reassuring Warm Terracotta & Healing Sage */
  --color-primary: #cc4900;
  --color-primary-hover: #b33e00;
  --color-primary-light: #ff7a3d;
  --color-primary-fixed: #ffdbce;
  --color-primary-glow: rgba(204, 73, 0, 0.28);

  --color-secondary: #00714e;
  --color-secondary-hover: #005a3e;
  --color-secondary-container: #82f5c1;
  --color-secondary-fixed: #85f8c4;
  --color-secondary-glow: rgba(0, 113, 78, 0.22);

  --color-amber: #d97706;
  --color-amber-container: #fef3c7;

  --color-surface-bg: #f8faff;
  --color-card-bg: #ffffff;
  --color-card-border: rgba(207, 218, 242, 0.65);
  --color-card-border-hover: rgba(204, 73, 0, 0.25);

  --color-text-main: #111c2d;
  --color-text-muted: #536077;
  --color-text-subtle: #79879f;

  /* Shadows & Elevations */
  --shadow-sm: 0 1px 2px 0 rgba(17, 28, 45, 0.04), 0 0 0 1px rgba(207, 218, 242, 0.5);
  --shadow-md: 0 4px 12px -2px rgba(17, 28, 45, 0.06), 0 1px 3px 0 rgba(17, 28, 45, 0.04), 0 0 0 1px rgba(207, 218, 242, 0.55);
  --shadow-lg: 0 12px 28px -6px rgba(17, 28, 45, 0.09), 0 4px 12px -2px rgba(17, 28, 45, 0.04), 0 0 0 1px rgba(207, 218, 242, 0.6);
  --shadow-xl: 0 20px 40px -12px rgba(17, 28, 45, 0.15), 0 0 0 1px rgba(207, 218, 242, 0.7);
  --shadow-primary-btn: 0 8px 24px -4px rgba(204, 73, 0, 0.35), 0 2px 6px -1px rgba(204, 73, 0, 0.2);
  --shadow-emergency: 0 10px 28px -6px rgba(186, 26, 26, 0.45), 0 3px 8px -2px rgba(186, 26, 26, 0.25);

  --radius-sm: 0.75rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-surface-bg);
  background-image:
    radial-gradient(65rem 45rem at 8% -5%, rgba(255, 219, 206, 0.65), transparent 60%),
    radial-gradient(55rem 40rem at 95% 15%, rgba(130, 245, 193, 0.38), transparent 60%),
    radial-gradient(45rem 35rem at 50% 95%, rgba(216, 227, 251, 0.75), transparent 65%);
  background-attachment: fixed;
  color: var(--color-text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
  display: inline-block;
}

.material-symbols-outlined.fill-1 {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* Typography Enhancements */
h1, h2, h3, .font-headline {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}

/* App Header Glassmorphism */
header {
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  background: rgba(249, 249, 255, 0.85) !important;
  border-bottom: 1px solid rgba(216, 227, 251, 0.8) !important;
  transition: all 0.25s ease;
}

header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(204, 73, 0, 0.5) 30%, rgba(0, 113, 78, 0.5) 70%, transparent 95%);
  opacity: 0.65;
}

/* Standard Card Surfaces with Rich Depth */
.glass-card,
section > .rounded-xl,
section .grid > .rounded-xl {
  background: #ffffff !important;
  border: 1px solid var(--color-card-border) !important;
  box-shadow: var(--shadow-md) !important;
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth), border-color 0.25s ease;
  position: relative;
}

section > .rounded-xl:hover,
section .grid > .rounded-xl:hover {
  border-color: var(--color-card-border-hover) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-2px);
}

/* Senior-Friendly Tactile Interaction */
button, .clickable-card {
  transition: transform 0.15s var(--ease-smooth), box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button:active, .clickable-card:active {
  transform: scale(0.975);
}

/* Voice Assistant Hero Button & Concentric Pulse */
#micBtn {
  position: relative;
  background: radial-gradient(circle at 35% 30%, #ff8348, #cc4900 60%, #a33900) !important;
  box-shadow: var(--shadow-primary-btn) !important;
  border: 3px solid rgba(255, 255, 255, 0.7) !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}

#micBtn:hover {
  transform: scale(1.04);
  box-shadow: 0 14px 34px -4px rgba(204, 73, 0, 0.45), 0 4px 10px rgba(204, 73, 0, 0.25) !important;
}

#micBtn:active {
  transform: scale(0.96);
}

/* Radar-style Multi-Ring Voice Pulse */
@keyframes mic-pulse-ring-outer {
  0% {
    box-shadow: 0 0 0 0 rgba(204, 73, 0, 0.6);
  }
  60% {
    box-shadow: 0 0 0 28px rgba(204, 73, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(204, 73, 0, 0);
  }
}

.listening-pulse {
  animation: mic-pulse-ring-outer 1.8s infinite cubic-bezier(0.2, 0.7, 0.4, 1) !important;
}

/* Emergency Call Button */
#emergencyBtn {
  background: linear-gradient(135deg, #e02424 0%, #ba1a1a 100%) !important;
  box-shadow: var(--shadow-emergency) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  position: relative;
  overflow: hidden;
}

#emergencyBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transition: left 0.6s ease;
}

#emergencyBtn:hover::before {
  left: 100%;
}

#emergencyBtn:hover {
  background: linear-gradient(135deg, #f03e3e 0%, #c92a2a 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgba(186, 26, 26, 0.6) !important;
}

/* Conversation Log Styling */
.conversation-log-container {
  background: linear-gradient(180deg, #f4f7fe 0%, #eaf0fc 100%) !important;
  border: 1px solid rgba(207, 218, 242, 0.8) !important;
  box-shadow: inset 0 2px 6px rgba(17, 28, 45, 0.04);
}

.conversation-log-container::-webkit-scrollbar {
  width: 6px;
}
.conversation-log-container::-webkit-scrollbar-track {
  background: transparent;
}
.conversation-log-container::-webkit-scrollbar-thumb {
  background: #cfdaf2;
  border-radius: 9999px;
}
.conversation-log-container::-webkit-scrollbar-thumb:hover {
  background: #b4c5e8;
}

#conversationLog > div {
  animation: bubble-slide-up 0.35s var(--ease-spring) both;
}

@keyframes bubble-slide-up {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Quick Prompt Action Pills */
.quick-chip {
  padding: 0.65rem 1.15rem;
  border-radius: 9999px;
  background: #ffffff;
  border: 1.5px solid #e2bfb2;
  color: #7f2b00;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s var(--ease-smooth);
}

.quick-chip:hover {
  background: #ffdbce;
  border-color: #cc4900;
  color: #370e00;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

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

/* Typing Dots Animation */
.typing-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 24px;
  padding: 0 4px;
}

.typing-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cc4900;
  opacity: 0.4;
  animation: dot-bounce-wave 1.2s infinite ease-in-out;
}

.typing-dots i:nth-child(2) {
  animation-delay: 0.18s;
}
.typing-dots i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes dot-bounce-wave {
  0%, 75%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  35% {
    transform: translateY(-7px);
    opacity: 1;
  }
}

/* Daily Care Routine Interactive Items */
.routine-row {
  border: 1.5px solid rgba(216, 227, 251, 0.9) !important;
  box-shadow: var(--shadow-sm);
  transition: all 0.22s var(--ease-smooth);
}

.routine-row:hover {
  background: #ffffff !important;
  border-color: #cc4900 !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1.5px);
}

.routine-row:has(input:checked) {
  background: linear-gradient(90deg, rgba(130, 245, 193, 0.42), rgba(240, 243, 255, 0.6)) !important;
  border-color: #00714e !important;
  box-shadow: 0 1px 3px rgba(0, 113, 78, 0.1);
}

/* 4x4 Gentle Sudoku Polish */
#sudokuGrid {
  background: linear-gradient(145deg, #d8e3fb, #cfdaf2) !important;
  border: 3px solid #b6c8eb !important;
  border-radius: 1.25rem !important;
  box-shadow: inset 0 2px 8px rgba(17, 28, 45, 0.08), var(--shadow-md) !important;
}

.sudoku-cell {
  border: 1px solid rgba(207, 218, 242, 0.8);
  box-shadow: 0 2px 6px rgba(17, 28, 45, 0.07);
  transition: all 0.18s var(--ease-smooth);
  font-family: var(--font-display);
}

.sudoku-cell:hover:not(.cursor-default):not(.selected) {
  transform: translateY(-2px);
  border-color: #cc4900;
  box-shadow: 0 6px 14px -3px rgba(204, 73, 0, 0.2);
}

.sudoku-cell.selected {
  outline: 3px solid #cc4900 !important;
  outline-offset: -2px;
  background-color: #ffdbce !important;
  color: #370e00 !important;
  box-shadow: 0 0 0 4px rgba(204, 73, 0, 0.25), 0 6px 16px rgba(204, 73, 0, 0.25) !important;
  transform: scale(1.04);
  z-index: 2;
}

/* Distinct 2x2 Quadrant boundaries in the 4x4 grid */
#sudokuGrid > button:nth-child(4n+2) {
  margin-right: 4px;
}
#sudokuGrid > button:nth-child(n+5):nth-child(-n+8) {
  margin-bottom: 4px;
}

/* Word Recall Letter Tiles */
#wordTilesContainer > div {
  font-family: var(--font-display);
  border: 1.5px solid rgba(207, 218, 242, 0.9);
  box-shadow: var(--shadow-sm);
  transition: all 0.2s var(--ease-smooth);
}

#word-missing-slot {
  background-color: rgba(255, 219, 206, 0.5) !important;
  border: 2px dashed #cc4900 !important;
}

/* Memory Card 3D Flip System */
.flip-card {
  perspective: 1200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-spring);
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  border: 1.5px solid rgba(207, 218, 242, 0.8);
}

.flip-card-front {
  background: linear-gradient(145deg, #f0f4ff, #e2eafc) !important;
  transition: all 0.2s ease;
}

.flip-card:hover .flip-card-front {
  border-color: #cc4900;
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #d1fae5, #82f5c1) !important;
  border-color: #00714e !important;
  color: #003825 !important;
}

.flip-card.is-matched .flip-card-back {
  animation: match-pulse-ring 1.3s ease-out;
  border: 2.5px solid #00714e !important;
}

@keyframes match-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 113, 78, 0.7);
  }
  100% {
    box-shadow: 0 0 0 24px rgba(0, 113, 78, 0);
  }
}

/* Modals & Overlays */
.modal-overlay {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.modal-overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.modal-overlay > div {
  animation: modal-slide-in 0.35s var(--ease-spring) both;
  box-shadow: var(--shadow-xl) !important;
}

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Confetti Canvas */
#confettiCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 70;
}

/* Accessible Focus Indicators */
:focus-visible {
  outline: 3px solid #cc4900 !important;
  outline-offset: 3px;
}

/* Nav Tab Transitions */
.nav-tab-btn {
  font-family: var(--font-display);
}

.nav-tab-btn:not(.bg-primary-container):hover {
  background: rgba(204, 73, 0, 0.08);
}

/* Form Inputs Focus States */
input:focus, select:focus, textarea:focus {
  border-color: #cc4900 !important;
  box-shadow: 0 0 0 3px rgba(204, 73, 0, 0.18) !important;
}

/* Motion Sensitivity */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   MOBILE RESPONSIVENESS & TOUCH ACCESSIBILITY
   ========================================================================== */

/* overflow-x: clip avoids turning html/body into scroll containers (which broke wheel scrolling) */
html, body {
  overflow-x: clip;
  overflow-y: auto;
  max-width: 100vw;
  width: 100%;
  touch-action: auto;
}
main { overflow-x: clip !important; overflow-y: visible !important; }

@media (max-width: 640px) {
  /* Prevent horizontal scrolling across containers */
  main, header, footer, section {
    max-width: 100vw;
  }

  /* Touch-friendly interactive targets (44px min touch size) */
  button,
  .quick-chip,
  .nav-tab-btn,
  .game-nav-btn,
  input[type="button"],
  input[type="submit"],
  .routine-row {
    min-height: 44px;
  }

  /* Compact header navigation for mobile */
  .nav-tab-btn {
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    font-size: 0.8125rem !important;
  }

  /* Word Recall tiles on small screens */
  #wordTilesContainer > div {
    min-width: 2.75rem;
    height: 4.25rem;
  }
}

@media (max-width: 420px) {
  /* Clean icon-only or ultra-compact mode for nav on very narrow phones */
  .nav-tab-btn span:not(.material-symbols-outlined) {
    display: none;
  }
  .nav-tab-btn {
    padding: 0.5rem 0.65rem !important;
  }
}

/* ==========================================================================
   MOBILE FIXES & MEMORY NOTES (additive only)
   ========================================================================== */

/* Memory Notes card follows the same card surface as other cards */
#memoryNotesSection {
  background: #ffffff !important;
  border: 1px solid var(--color-card-border) !important;
  box-shadow: var(--shadow-md) !important;
}
#notesList > div {
  animation: bubble-slide-up 0.3s var(--ease-spring) both;
}

/* Long words / notes never push the layout sideways */
img, canvas, video, svg { max-width: 100%; }
#notesList span, #conversationLog div { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Force every card grid into a single column (Sudoku 4x4 and pair cards stay as game boards) */
  .grid.lg\:grid-cols-12,
  .grid.md\:grid-cols-12,
  #photoVault {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .grid.lg\:grid-cols-12 > *,
  .grid.md\:grid-cols-12 > * {
    grid-column: auto !important;
    min-width: 0;
  }

  /* Cards keep comfortable padding but never exceed the screen */
  section > .rounded-xl,
  section .grid > .rounded-xl {
    max-width: 100%;
    min-width: 0;
  }

  /* Touch-friendly sizing: voice, games, notes, modal and delete buttons */
  .game-nav-btn,
  #sendTextBtn,
  #saveNoteBtn,
  #readNotesBtn,
  #playAudioNote,
  #voiceGuidanceToggle,
  #saveSettings {
    min-height: 48px;
  }
  #emergencyBtn { min-height: 56px; }
  #micBtn { width: 6.5rem; height: 6.5rem; }
  #gymMicBtn { width: 3.5rem; height: 3.5rem; }
  #closeModal,
  #medList button,
  #photoVault button,
  .note-delete-btn,
  #game-word button[onclick],
  #game-pairs button[onclick^="reset"] {
    min-width: 44px;
    min-height: 44px;
  }
  #letterChoices button { min-height: 64px; }
  #sudokuPicker button { min-height: 64px; }
  .sudoku-cell { min-height: 56px; }
  .quick-chip { min-height: 48px; }

  /* Text inputs: 16px stops iOS from zooming in on focus */
  input[type="text"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="time"], select {
    font-size: 16px;
    min-height: 48px;
  }
  input[type="file"] { max-width: 100%; }

  /* Modals fit small screens */
  .modal-overlay > div { max-width: 100%; max-height: 92vh; overflow-y: auto; }
}

/* Very narrow phones: keep header on one line without sideways scroll */
@media (max-width: 380px) {
  header [onclick="switchMainTab('patient')"] > .flex-col { display: none; }
  .nav-tab-btn { padding: 0.5rem 0.55rem !important; }
}

/* ==========================================================================
   CAREGIVER SUBSCRIPTION (additive)
   ========================================================================== */
#pricingSection { background:#fff !important; border:1px solid rgba(249,115,22,.3) !important; box-shadow: var(--shadow-md) !important; }
.billing-toggle button[aria-pressed="true"] { background:#F97316; color:#fff; box-shadow: var(--shadow-sm); }
.billing-toggle button[aria-pressed="false"] { background:transparent; color: var(--color-text-muted); }
.btn-orange { background:#F97316; color:#fff; box-shadow: 0 8px 24px -6px rgba(249,115,22,.45); }
.btn-orange:hover { background:#ea680c; }
#checkoutModal input { border:1.5px solid rgba(207,218,242,.9); }
@keyframes pop-check { from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
#checkoutDone .check-badge { animation: pop-check .45s var(--ease-spring) both; }