/* Lifeline — application styles.
   Extracted from index.html so the browser can cache it separately and so the
   page's Content-Security-Policy does not have to allow a large inline block. */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --stagger-delay: 60ms;
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Glassmorphism */
.glass {
  background: rgba(250, 248, 244, 0.75);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid rgba(45, 145, 120, 0.08);
}

/* Brand logo — crops logo.jpg to the emblem so the wordmark/tagline don't shrink to noise */
/* Sized here too, so it survives the no-Tailwind fallback path. */
.brand-logo { position: relative; overflow: hidden; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; background: #fff; }
.brand-logo img {
  position: absolute;
  width: 180%;
  max-width: none;
  height: auto;
  left: -35.2%;
  top: -10.5%;
}

/* Scrollbar */
.no-scrollbar::-webkit-scrollbar { width: 6px; }
.no-scrollbar::-webkit-scrollbar-track { background: transparent; }
.no-scrollbar::-webkit-scrollbar-thumb { background: #b3e1d1; border-radius: 8px; }
.no-scrollbar::-webkit-scrollbar-thumb:hover { background: #7ccbb3; }

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes pulse-ring {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.3); opacity: 0; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

.animate-fade-in-up { animation: fadeInUp 0.5s var(--ease-out-expo) both; }
.animate-fade-in { animation: fadeIn 0.35s ease both; }
.animate-slide-right { animation: slideInRight 0.4s var(--ease-out-expo) both; }
.animate-slide-left { animation: slideInLeft 0.4s var(--ease-out-expo) both; }
.animate-scale-in { animation: scaleIn 0.35s var(--ease-out-expo) both; }
.animate-float { animation: float 3s ease-in-out infinite; }

/* Stagger children */
.stagger-children > * { opacity: 0; animation: fadeInUp 0.5s var(--ease-out-expo) forwards; }
.stagger-children > *:nth-child(1) { animation-delay: calc(var(--stagger-delay) * 0); }
.stagger-children > *:nth-child(2) { animation-delay: calc(var(--stagger-delay) * 1); }
.stagger-children > *:nth-child(3) { animation-delay: calc(var(--stagger-delay) * 2); }
.stagger-children > *:nth-child(4) { animation-delay: calc(var(--stagger-delay) * 3); }
.stagger-children > *:nth-child(5) { animation-delay: calc(var(--stagger-delay) * 4); }
.stagger-children > *:nth-child(6) { animation-delay: calc(var(--stagger-delay) * 5); }
.stagger-children > *:nth-child(7) { animation-delay: calc(var(--stagger-delay) * 6); }
.stagger-children > *:nth-child(8) { animation-delay: calc(var(--stagger-delay) * 7); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, #f2ece1 25%, #faf8f4 50%, #f2ece1 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Card hover */
.resource-card {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, border-color 0.3s ease;
}
.resource-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px -12px rgba(29, 94, 79, 0.15), 0 0 0 1px rgba(45, 145, 120, 0.1);
}

/* Hero gradient mesh */
.hero-mesh {
  background: linear-gradient(135deg, #1d5e4f 0%, #227560 25%, #2d9178 50%, #1a4d42 75%, #164038 100%);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  position: relative;
  overflow: hidden;
}
.hero-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 50%, rgba(124, 203, 179, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(45, 145, 120, 0.2) 0%, transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(253, 186, 116, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Modal */
.modal-backdrop {
  transition: opacity 0.3s ease;
}
.modal-card {
  transition: transform 0.35s var(--ease-spring), opacity 0.3s ease;
}

/* Chat */
.chat-msg-enter {
  animation: slideInRight 0.3s var(--ease-out-expo) both;
}
.chat-msg-enter-assistant {
  animation: slideInLeft 0.3s var(--ease-out-expo) both;
}
.typing-dot {
  animation: typingBounce 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

/* Live indicator */
.live-pulse {
  position: relative;
}
.live-pulse::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #2d9178;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Chips */
.catchip, .typechip {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid #d9f0e8;
  background: #fff;
  color: #1d5e4f;
  transition: all 0.2s var(--ease-spring);
  cursor: pointer;
  user-select: none;
}
.catchip:hover, .typechip:hover {
  background: #f0f9f6;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(29, 94, 79, 0.15);
}
.catchip.on, .typechip.on {
  background: #227560;
  color: #fff;
  border-color: #227560;
  box-shadow: 0 4px 12px -4px rgba(29, 94, 79, 0.3);
}

/* Wizard */
.wizard-step {
  transition: all 0.4s var(--ease-out-expo);
}
.wizard-step.active { opacity: 1; transform: translateX(0); pointer-events: all; }
.wizard-step.prev { opacity: 0; transform: translateX(-40px); pointer-events: none; position: absolute; }
.wizard-step.next { opacity: 0; transform: translateX(40px); pointer-events: none; position: absolute; }

/* Markdown */
.chat-md p { margin: 0 0 0.5rem; } .chat-md p:last-child { margin-bottom:0; }
.chat-md ul { list-style: disc; padding-left: 1.1rem; margin: 0.25rem 0 0.6rem; }
.chat-md ol { list-style: decimal; padding-left: 1.2rem; margin: 0.25rem 0 0.6rem; }
.chat-md li { margin: 0.15rem 0; }
.chat-md a { color: #227560; text-decoration: underline; font-weight: 500; text-underline-offset: 2px; }
.chat-md a:hover { color: #1d5e4f; }
.chat-md strong { font-weight: 700; }
.chat-md table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; font-size: 0.85rem; }
.chat-md th, .chat-md td { border: 1px solid #d9f0e8; padding: 0.4rem 0.6rem; text-align: left; }
.chat-md th { background: #f0f9f6; font-weight: 600; }
.chat-md code { background: #f0f9f6; padding: 0.15rem 0.35rem; border-radius: 4px; font-size: 0.85em; color: #1d5e4f; }
.chat-md pre { background: #f0f9f6; padding: 0.75rem; border-radius: 8px; overflow-x: auto; margin: 0.5rem 0; }
.chat-md pre code { background: none; padding: 0; }

/* Entry animations used by the rendered views */
.fade-in { animation: fadeIn 0.35s ease both; }
.reveal-card { animation: fadeInUp 0.45s var(--ease-out-expo) both; }
.reveal-card:hover { will-change: transform; }

/* Pressable buttons */
.btn-pop { transition: transform 0.15s var(--ease-spring), box-shadow 0.2s ease, background-color 0.2s ease; }
.btn-pop:hover { transform: translateY(-1px); }
.btn-pop:active { transform: translateY(0) scale(0.97); }

/* Floating colour blobs inside the hero */
.hero-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(48px);
  opacity: 0.45;
  pointer-events: none;
}
.hero-blob-1 { width: 20rem; height: 20rem; top: -6rem; right: -4rem; background: #7ccbb3; animation: float 9s ease-in-out infinite; }
.hero-blob-2 { width: 16rem; height: 16rem; bottom: -5rem; left: -3rem; background: #fdba74; opacity: 0.25; animation: float 11s ease-in-out infinite reverse; }

/* Floating panels (location selector) */
.glass-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(45, 145, 120, 0.12);
  box-shadow: 0 20px 40px -12px rgba(29, 94, 79, 0.18);
}

/* Assistant typing indicator */
.typing span { animation: typingBounce 1.4s infinite ease-in-out both; }
.typing span:nth-child(1) { animation-delay: -0.32s; }
.typing span:nth-child(2) { animation-delay: -0.16s; }

/* Data-saver: drop the decorative work, keep the content identical */
.low-data-mode .hero-blob,
.low-data-mode .hero-mesh::before { display: none; }
.low-data-mode .hero-mesh { animation: none; }
.low-data-mode * { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* Print */
@media print {
  header, footer, .no-print { display: none !important; }
  main { max-width: 100% !important; padding: 0 !important; }
}