/**
 * SentinelCareAI — crisis.css
 * Crisis — botón pánico fijo, overlay de crisis, testimonios
 * ─────────────────────────────────────────────────────────────
 */

/* ─── PANIC BUTTON (FIXED, ALL SCREENS) ─────────── */
#panic-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: white;
  border: none;
  border-radius: 50px;
  padding: 15px 24px 15px 18px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(192,57,43,0.55), 0 0 0 0 rgba(231,76,60,0.5);
  animation: panicPulse 2.4s ease-in-out infinite;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.25s, visibility 0.25s;
  letter-spacing: 0.01em;
}
#panic-btn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 40px rgba(192,57,43,0.7), 0 0 0 8px rgba(231,76,60,0.15);
  animation: none;
}
#panic-btn .panic-icon {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.22);
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
/* Oculto cuando el teclado está abierto (clase añadida por JS) */
#panic-btn.keyboard-open {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
}
@keyframes panicPulse {
  0%, 100% { box-shadow: 0 8px 32px rgba(192,57,43,0.55), 0 0 0 0 rgba(231,76,60,0.5); }
  50%       { box-shadow: 0 8px 32px rgba(192,57,43,0.55), 0 0 0 14px rgba(231,76,60,0); }
}
@media(max-width:480px){
  /* En móvil: solo icono circular, sin texto */
  #panic-btn {
    bottom: 20px;
    right: 16px;
    padding: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    justify-content: center;
  }
  #panic-btn .panic-label { display: none; }
  #panic-btn .panic-icon {
    width: 52px; height: 52px; font-size: 1.2rem;
    background: transparent;
  }
}

/* ─── CRISIS OVERLAY (FULL SCREEN) ──────────────── */
#crisis-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(160deg, #1a0a0a 0%, #2d0f0f 40%, #1e1020 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  animation: crisisIn 0.35s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
#crisis-overlay.active { display: flex; }
@keyframes crisisIn {
  from { opacity:0; transform: scale(0.97); }
  to   { opacity:1; transform: scale(1); }
}

.crisis-overlay-inner {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

/* Aura avatar in crisis */
.crisis-aura {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c0392b, #9b59b6);
  display: flex; align-items:center; justify-content:center;
  margin: 0 auto 20px;
  font-size: 32px;
  box-shadow: 0 0 40px rgba(192,57,43,0.45), 0 0 80px rgba(155,89,182,0.2);
  animation: auraPulse 2.5s ease-in-out infinite;
}
@keyframes auraPulse {
  0%,100% { box-shadow: 0 0 40px rgba(192,57,43,0.4), 0 0 80px rgba(155,89,182,0.15); }
  50%     { box-shadow: 0 0 60px rgba(192,57,43,0.6), 0 0 100px rgba(155,89,182,0.3); }
}

.crisis-headline {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
}
.crisis-subline {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
  margin-bottom: 8px;
  max-width: 420px;
  margin-left: auto; margin-right: auto;
}

/* Aura's calming message bubble */
.crisis-aura-msg {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px 18px 18px 4px;
  padding: 18px 22px;
  margin: 20px 0 28px;
  text-align: left;
  position: relative;
}
.crisis-aura-msg::before {
  content: 'Aura';
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(200,130,130,0.9);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.crisis-aura-msg p {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.8;
  margin: 0;
}

/* Phone call cards */
.crisis-phones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.crisis-call-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 16px 20px;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}
.crisis-call-card::before {
  content:'';
  position: absolute; inset:0;
  background: linear-gradient(90deg, rgba(231,76,60,0.08), transparent);
  opacity:0;
  transition: opacity 0.2s;
}
.crisis-call-card:hover { border-color: rgba(231,76,60,0.6); transform: translateX(4px); }
.crisis-call-card:hover::before { opacity:1; }

.crisis-call-icon {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex; align-items:center; justify-content:center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.crisis-call-icon.red    { background: rgba(192,57,43,0.25); color: #ff6b5b; }
.crisis-call-icon.teal   { background: rgba(61,122,138,0.25); color: #7eb8c4; }
.crisis-call-icon.green  { background: rgba(39,174,96,0.22);  color: #6fbf73; }

.crisis-call-info { flex: 1; text-align: left; }
.crisis-call-name {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 2px;
}
.crisis-call-number {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.crisis-call-number.red   { color: #ff6b5b; }
.crisis-call-number.teal  { color: #7eb8c4; }
.crisis-call-number.green { color: #6fbf73; }
.crisis-call-desc {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}

.crisis-call-btn {
  display: flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: white; border: none; border-radius: 10px;
  padding: 10px 16px; font-family:'DM Sans',sans-serif;
  font-size: 0.85rem; font-weight: 700; cursor: pointer;
  transition: all 0.2s; white-space: nowrap; flex-shrink:0;
  text-decoration: none;
}
.crisis-call-btn:hover { box-shadow: 0 4px 16px rgba(192,57,43,0.5); transform: scale(1.04); }
.crisis-call-btn.teal-btn  { background: linear-gradient(135deg, #2e7d8a, #3d9aad); }
.crisis-call-btn.teal-btn:hover { box-shadow: 0 4px 16px rgba(61,122,138,0.5); }
.crisis-call-btn.green-btn { background: linear-gradient(135deg, #1f8a4c, #27ae60); }
.crisis-call-btn.green-btn:hover { box-shadow: 0 4px 16px rgba(39,174,96,0.5); }

/* Close/dismiss */
.crisis-close-row {
  display: flex; justify-content:center;
}
.crisis-close-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  padding: 10px 22px;
  color: rgba(255,255,255,0.45);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.crisis-close-btn:hover { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.7); }

body.dark-mode #panic-btn { box-shadow: 0 8px 32px rgba(192,57,43,0.65), 0 0 0 0 rgba(231,76,60,0.6); }

/* ─── TESTIMONIALS (for personal) ───────────────── */
.quote-card {
  background: linear-gradient(135deg, rgba(61,122,138,0.06), rgba(107,143,113,0.04));
  border: 1px solid rgba(107,143,113,0.2);
  border-radius: 16px; padding:24px;
  margin-bottom: 14px;
}
.quote-card blockquote {
  font-family:'Playfair Display',serif;
  font-size:1rem; font-style:italic;
  color:var(--text-dark); line-height:1.7;
  margin-bottom:12px;
}
.quote-card cite { font-size:0.8rem; color:var(--text-light); font-style:normal; }