/* ==========================================================
   PSIKOREALIS — S.O.S Trigger Regulation & Reframing Tool
   sos-style.css (v2 — premium)
   ========================================================== */

#sosContainer{
  --sos-bg:#0D0D11;
  --sos-bg-soft:#14141A;
  --sos-card:#1A1A21;
  --sos-card-border:#26262E;
  --sos-text:#EDEDED;
  --sos-text-dim:#9A9AA3;
  --sos-accent-1:#8E0E3A;
  --sos-accent-2:#C2185B;
  --sos-accent-3:#FF2D7A;
  --sos-gradient:linear-gradient(135deg,var(--sos-accent-1) 0%,var(--sos-accent-2) 50%,var(--sos-accent-3) 100%);
  --sos-radius:18px;
  --sos-radius-sm:12px;
  font-family:'Montserrat',sans-serif;
  background:var(--sos-bg);
  color:var(--sos-text);
  border-radius:var(--sos-radius);
  padding:28px 20px 32px;
  max-width:480px;
  margin:0 auto;
  box-sizing:border-box;
  position:relative;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.45);
  isolation:isolate;
}

#sosContainer *{ box-sizing:border-box; }

/* ---------- Ambient background ---------- */
#sosContainer::before,#sosContainer::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.2;z-index:0;pointer-events:none;
  animation:sosDrift 9s ease-in-out infinite alternate;
}
#sosContainer::before{width:220px;height:220px;background:#FF2D7A;top:-70px;right:-60px;}
#sosContainer::after{width:180px;height:180px;background:#8E0E3A;bottom:5%;left:-70px;animation-delay:-4s;}
@keyframes sosDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-14px,16px) scale(1.12)}}

#sosContainer .sos-phase{
  display:none;
  animation:sosFadeIn .45s ease forwards;
  position:relative;z-index:1;
}
#sosContainer .sos-phase.active{ display:block; }

@keyframes sosFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

#sosContainer h1{
  font-size:24px;
  font-weight:800;
  line-height:1.3;
  margin:0 0 12px;
  letter-spacing:-0.3px;
}
#sosContainer h2{
  font-size:18px;
  font-weight:700;
  margin:0 0 8px;
}
#sosContainer p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--sos-text-dim);
  margin:0 0 18px;
}
#sosContainer .sos-eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  background:var(--sos-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px;
}

/* ---------- Tools series badge ---------- */
#sosContainer .sos-series{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;opacity:0;animation:sosIn .55s ease forwards}
#sosContainer .sos-series-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.18);transition:background .2s}
#sosContainer .sos-series-dot.sos-series-active{background:var(--sos-accent-3);width:16px;border-radius:99px}
#sosContainer .sos-series-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--sos-text-dim);font-weight:700}

/* ---------- Entrance stagger ---------- */
#sosContainer .sos-in{opacity:0;animation:sosIn .55s ease forwards}
#sosContainer .sos-in-1{animation-delay:.05s}
#sosContainer .sos-in-2{animation-delay:.15s}
#sosContainer .sos-in-3{animation-delay:.25s}
#sosContainer .sos-in-4{animation-delay:.4s}
#sosContainer .sos-in-5{animation-delay:.52s}
@keyframes sosIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Breathing rings hero (Phase 1) ---------- */
#sosContainer .sos-hero-visual{width:100%;max-width:170px;margin:2px auto 20px;display:block}
#sosContainer .sos-hero-ring{transform-origin:100px 100px;animation:sosRingPulse 3.6s ease-in-out infinite}
#sosContainer .sos-hero-ring-2{animation-delay:.5s}
#sosContainer .sos-hero-ring-3{animation-delay:1s}
@keyframes sosRingPulse{0%,100%{opacity:.25;transform:scale(0.9)}50%{opacity:.7;transform:scale(1.05)}}
#sosContainer .sos-hero-core{animation:sosCoreGlow 3.6s ease-in-out infinite}
@keyframes sosCoreGlow{0%,100%{opacity:.85}50%{opacity:1}}

/* ---------- Meta row with icons ---------- */
#sosContainer .sos-meta-row{display:flex;gap:16px;margin-bottom:22px;flex-wrap:wrap}
#sosContainer .sos-meta{font-size:12px;color:var(--sos-text-dim);display:flex;align-items:center;gap:7px}
#sosContainer .sos-meta svg{width:15px;height:15px;flex-shrink:0;opacity:.85}
#sosContainer .sos-meta b{color:var(--sos-text);font-weight:700}

/* ---------- Body-area preview chips ---------- */
#sosContainer .sos-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
#sosContainer .sos-chip{font-size:11.5px;font-weight:700;color:#e8c9d3;background:rgba(255,45,122,0.09);border:1px solid rgba(255,45,122,0.28);padding:7px 12px;border-radius:99px;opacity:0;animation:sosChipIn .5s ease forwards}
#sosContainer .sos-chip-1{animation-delay:.15s}
#sosContainer .sos-chip-2{animation-delay:.28s}
#sosContainer .sos-chip-3{animation-delay:.41s}
#sosContainer .sos-chip-4{animation-delay:.54s}
@keyframes sosChipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

#sosContainer .sos-cred{font-size:11px;color:var(--sos-text-dim);text-align:center;margin-top:12px;line-height:1.5}

/* ---------- Buttons ---------- */
#sosContainer .sos-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:15px 20px;
  border:none;
  border-radius:var(--sos-radius-sm);
  font-family:'Montserrat',sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  text-decoration:none;
}
#sosContainer .sos-btn:active{ transform:scale(0.97); }

#sosContainer .sos-btn-primary{
  background:var(--sos-gradient);
  color:#fff;
  box-shadow:0 8px 24px rgba(255,45,122,0.28);
  position:relative;overflow:hidden;
}
#sosContainer .sos-btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);animation:sosShine 2.8s ease-in-out infinite}
@keyframes sosShine{0%{left:-60%}55%{left:120%}100%{left:120%}}
#sosContainer .sos-btn-primary:disabled{
  opacity:0.35;
  cursor:not-allowed;
  box-shadow:none;
}
#sosContainer .sos-btn-primary:disabled::after{display:none}
#sosContainer .sos-btn-secondary{
  background:var(--sos-card);
  border:1px solid var(--sos-card-border);
  color:var(--sos-text);
}
#sosContainer .sos-btn-secondary:hover{ border-color:var(--sos-accent-3); }

#sosContainer .sos-btn-ig{
  background:linear-gradient(135deg,#8E0E3A,#C2185B,#FF2D7A,#FFB199);
  color:#fff;
}

/* ---------- Phase 1: Intro ---------- */
#sosContainer .sos-returning-badge{
  background:var(--sos-card);
  border:1px solid var(--sos-card-border);
  border-radius:var(--sos-radius-sm);
  padding:12px 14px;
  font-size:13px;
  color:var(--sos-text-dim);
  margin-bottom:18px;
}
#sosContainer .sos-returning-badge b{ color:var(--sos-text); }

/* ---------- Phase 2: Somatic + Breathing ---------- */
#sosContainer .sos-silhouette-wrap{
  display:flex;
  justify-content:center;
  margin:8px 0 18px;
}
#sosContainer .sos-silhouette-wrap svg{ width:150px; height:auto; }
#sosContainer .sos-hotspot{
  fill:rgba(255,45,122,0.35);
  stroke:#FF2D7A;
  stroke-width:1.5;
  cursor:pointer;
  animation:sosPulse 2.4s ease-in-out infinite;
  transition:fill .2s ease;
}
#sosContainer .sos-hotspot:hover, #sosContainer .sos-hotspot.sos-selected{
  fill:rgba(255,45,122,0.75);
}
@keyframes sosPulse{
  0%,100%{ opacity:.65; }
  50%{ opacity:1; }
}

#sosContainer .sos-area-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:18px;
}
#sosContainer .sos-area-chip{
  background:var(--sos-card);
  border:1px solid var(--sos-card-border);
  border-radius:var(--sos-radius-sm);
  padding:14px 10px;
  text-align:center;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
#sosContainer .sos-area-chip:hover{ border-color:var(--sos-accent-3); }
#sosContainer .sos-area-chip.sos-selected{
  border-color:var(--sos-accent-3);
  background:linear-gradient(135deg, rgba(142,14,58,0.35), rgba(255,45,122,0.18));
}

#sosContainer .sos-breathing-zone{
  display:none;
  text-align:center;
  padding-top:6px;
}
#sosContainer .sos-breathing-zone.active{ display:block; }

#sosContainer .sos-breath-circle-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  height:200px;
  margin-bottom:14px;
}
#sosContainer .sos-breath-circle{
  width:110px;
  height:110px;
  border-radius:50%;
  background:var(--sos-gradient);
  box-shadow:0 0 60px rgba(255,45,122,0.45);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  color:#fff;
  animation:sosBreathe 12s ease-in-out infinite;
}
@keyframes sosBreathe{
  0%{ transform:scale(1); }
  33%{ transform:scale(1.45); }
  66%{ transform:scale(1.45); }
  100%{ transform:scale(1); }
}
#sosContainer .sos-breath-progress{
  font-size:13px;
  color:var(--sos-text-dim);
  margin-bottom:20px;
}
#sosContainer .sos-breath-bar-track{
  width:100%;
  height:6px;
  border-radius:6px;
  background:var(--sos-card-border);
  overflow:hidden;
  margin-bottom:24px;
}
#sosContainer .sos-breath-bar-fill{
  height:100%;
  width:0%;
  background:var(--sos-gradient);
  transition:width 1s linear;
}

/* ---------- Phase 3: Fact vs Projection ---------- */
#sosContainer label{
  display:block;
  font-size:13.5px;
  font-weight:700;
  margin-bottom:8px;
}
#sosContainer textarea{
  width:100%;
  min-height:88px;
  background:var(--sos-card);
  border:1px solid var(--sos-card-border);
  border-radius:var(--sos-radius-sm);
  padding:12px 14px;
  color:var(--sos-text);
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  line-height:1.5;
  resize:vertical;
  margin-bottom:18px;
  transition:border-color .2s ease;
}
#sosContainer textarea:focus{
  outline:none;
  border-color:var(--sos-accent-3);
}
#sosContainer textarea::placeholder{ color:#5A5A63; }

/* ---------- Phase 4: Result ---------- */
#sosContainer .sos-chapter{padding-top:2px;padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid var(--sos-card-border)}
#sosContainer .sos-chapter:last-of-type{border-bottom:none;margin-bottom:0}
#sosContainer .sos-chapter-h{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sos-text-dim);font-weight:700;margin:0 0 14px}

#sosContainer .sos-alarm-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,45,122,0.12);border:1px solid rgba(255,45,122,0.3);
  border-radius:99px;padding:7px 14px;margin-bottom:14px;
}
#sosContainer .sos-alarm-badge svg{width:15px;height:15px;stroke:#FF7CA8;fill:none;stroke-width:2}
#sosContainer .sos-alarm-badge span{font-size:12.5px;font-weight:700;color:#FF7CA8}

#sosContainer .sos-result-card{
  border-radius:var(--sos-radius-sm);
  padding:16px 16px 14px;
  margin-bottom:14px;
  border:1px solid var(--sos-card-border);
  background:var(--sos-card);
}
#sosContainer .sos-result-card.sos-card-fact{
  border-left:4px solid #4BD4B0;
}
#sosContainer .sos-result-card.sos-card-alarm{
  border-left:4px solid var(--sos-accent-3);
}
#sosContainer .sos-result-card h3{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.8px;
  margin:0 0 8px;
  color:var(--sos-text-dim);
}
#sosContainer .sos-result-card .sos-user-text{
  font-size:14.5px;
  line-height:1.55;
  margin:0 0 10px;
  color:var(--sos-text);
}
#sosContainer .sos-mechanism-line{
  font-size:13px;
  line-height:1.6;
  color:var(--sos-text-dim);
  border-top:1px solid var(--sos-card-border);
  padding-top:10px;
  margin:0;
}

/* ---------- Gap analysis box ---------- */
#sosContainer .sos-gap-box{
  background:linear-gradient(135deg, rgba(142,14,58,0.16), rgba(255,45,122,0.08));
  border:1px solid rgba(255,45,122,0.25);
  border-radius:var(--sos-radius-sm);
  padding:16px;
  margin-bottom:14px;
}
#sosContainer .sos-gap-stat-row{display:flex;gap:18px;margin-bottom:10px}
#sosContainer .sos-gap-stat{flex:1;text-align:center}
#sosContainer .sos-gap-stat b{display:block;font-size:24px;font-weight:800;color:#fff}
#sosContainer .sos-gap-stat span{font-size:10.5px;color:var(--sos-text-dim);text-transform:uppercase;letter-spacing:.05em}
#sosContainer .sos-gap-text{font-size:13.5px;line-height:1.6;color:var(--sos-text);margin:0}

/* ---------- Quote card ---------- */
#sosContainer .sos-quote-card{border-radius:16px;padding:26px 22px;text-align:center;background:var(--sos-gradient)}
#sosContainer .sos-quote-card p{position:relative;font-size:17px;line-height:1.5;font-weight:800;margin:0;color:#fff}

#sosContainer .sos-reflection-list{
  list-style:none;
  margin:0;
  padding:0;
}
#sosContainer .sos-reflection-list li{
  background:var(--sos-bg-soft);
  border:1px solid var(--sos-card-border);
  border-radius:var(--sos-radius-sm);
  padding:12px 14px;
  font-size:14px;
  line-height:1.5;
  margin-bottom:10px;
}
#sosContainer .sos-reflection-list li:last-child{margin-bottom:0}

#sosContainer .sos-disclaimer{
  font-size:12px;
  color:var(--sos-text-dim);
  background:var(--sos-bg-soft);
  border:1px solid var(--sos-card-border);
  border-radius:var(--sos-radius-sm);
  padding:14px;
  line-height:1.55;
}

#sosContainer .sos-session-counter{
  text-align:center;
  font-size:12.5px;
  color:var(--sos-text-dim);
}

#sosContainer .sos-actions-row{
  display:flex;
  gap:10px;
}
#sosContainer .sos-actions-row .sos-btn{ flex:1; }

#sosContainer .sos-followbox{
  background:linear-gradient(135deg, rgba(142,14,58,0.28), rgba(255,45,122,0.12));
  border:1px solid rgba(255,45,122,0.35);
  border-radius:var(--sos-radius);
  padding:18px;
  text-align:center;
}
#sosContainer .sos-followbox p{
  color:var(--sos-text);
  margin-bottom:14px;
  font-size:14px;
}

/* ---------- Cross-link cards ---------- */
#sosContainer .sos-cross-card{display:block;background:var(--sos-card);border:1px solid var(--sos-card-border);border-radius:14px;padding:16px 18px;text-decoration:none;margin-bottom:10px;transition:border-color .15s ease,transform .15s ease}
#sosContainer .sos-cross-card:last-child{margin-bottom:0}
#sosContainer .sos-cross-card:hover{border-color:rgba(255,45,122,0.4);transform:translateY(-2px)}
#sosContainer .sos-cross-label{display:block;color:#FF7CA8;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
#sosContainer .sos-cross-title{display:flex;align-items:center;justify-content:space-between;color:var(--sos-text);font-size:15px;font-weight:700}
#sosContainer .sos-cross-desc{display:block;color:var(--sos-text-dim);font-size:12.5px;margin-top:4px;line-height:1.4}
#sosContainer .sos-cross-title svg{width:15px;height:15px;flex-shrink:0;stroke:var(--sos-text-dim)}

#sosContainer .sos-explore-secondary{
  display:flex;
  flex-direction:column;
  gap:8px;
}
#sosContainer .sos-explore-secondary a{
  font-size:13px;
  color:var(--sos-text-dim);
  text-decoration:none;
  border-bottom:1px dashed var(--sos-card-border);
  padding-bottom:6px;
}
#sosContainer .sos-explore-secondary a:hover{ color:var(--sos-accent-3); }

#sosContainer .sos-teaser{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--sos-bg-soft);
  border:1px dashed var(--sos-card-border);
  border-radius:var(--sos-radius-sm);
  padding:12px 14px;
  color:var(--sos-text-dim);
  font-size:12.5px;
}
#sosContainer .sos-teaser svg{ flex:0 0 auto; opacity:0.6; }

#sosContainer .sos-footer{text-align:center;margin-top:22px}
#sosContainer .sos-footer span{font-size:11px;color:var(--sos-text-dim);letter-spacing:.05em}

/* ---------- Print ---------- */
@media print{
  body *{ visibility:hidden; }
  #sosContainer, #sosContainer *{ visibility:visible; }
  #sosContainer{ box-shadow:none; position:absolute; left:0; top:0; width:100%; background:#fff; color:#111; }
  #sosContainer::before,#sosContainer::after{ display:none !important; }
  #sosContainer .sos-phase:not(.active){ display:none !important; }
  #sosContainer .sos-btn, #sosContainer .sos-followbox, #sosContainer .sos-cross-card, #sosContainer .sos-explore-secondary, #sosContainer .sos-teaser,
  #sosContainer .sos-actions-row, #sosContainer .sos-session-counter, #sosContainer .sos-footer, #sosContainer .sos-no-print{
    display:none !important;
  }
  #sosContainer .sos-result-card, #sosContainer .sos-reflection-list li, #sosContainer .sos-disclaimer, #sosContainer .sos-gap-box{
    border-color:#ccc; background:#fafafa; color:#111;
  }
  #sosContainer .sos-mechanism-line, #sosContainer p, #sosContainer .sos-gap-text{ color:#333; }
  #sosContainer .sos-quote-card{ background:#f0f0f0 !important; }
  #sosContainer .sos-quote-card p{ color:#111 !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:360px){
  #sosContainer{ padding:22px 14px 26px; }
  #sosContainer h1{ font-size:19px; }
}
@media(prefers-reduced-motion:reduce){
  #sosContainer *{animation:none!important;transition:none!important}
}