/* ═══════════════════════════════════════════
   DISERC Conversation Engine
   Internal rules-based Q&A — no AI/LLM calls
═══════════════════════════════════════════ */

button.nav-cta{
  background:transparent;cursor:pointer;font-family:inherit;
  align-items:center;display:inline-flex;
}
/* Fix: button.nav-cta's element+class specificity was beating the
   plain .lang-es{display:none} rule, so both language buttons showed
   at once. These rules restore correct language toggling for buttons. */
button.lang-en{display:inline-flex}
button.lang-es{display:none}
html.es button.lang-en{display:none}
html.es button.lang-es{display:inline-flex}

/* ── Modal shell ── */
.conv-modal{
  align-items:center;background:rgba(1,4,9,.82);display:flex;
  inset:0;justify-content:center;opacity:1;padding:20px;
  position:fixed;transition:opacity .2s;z-index:300;
}
.conv-modal[aria-hidden="true"]{opacity:0;pointer-events:none}
.conv-panel{
  background:#0a0e15;border:1px solid rgba(0,184,255,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.6);display:flex;flex-direction:column;
  max-height:calc(100vh - 40px);max-width:560px;overflow:hidden;
  position:relative;width:100%;
}
.conv-close{
  background:transparent;border:0;color:#94a3b8;cursor:pointer;
  font-size:26px;line-height:1;padding:6px;position:absolute;
  right:14px;top:14px;z-index:2;
}
.conv-close:hover{color:#f8fafc}

/* ── Header / progress ── */
.conv-header{border-bottom:1px solid var(--line);padding:24px 28px 18px}
.conv-eyebrow{color:var(--cyan);font:10px var(--mono);letter-spacing:.15em}
.conv-progress-track{background:var(--line);height:3px;margin-top:14px;overflow:hidden;width:100%}
.conv-progress-fill{background:linear-gradient(90deg,var(--blue),var(--cyan));height:100%;transition:width .35s ease}
.conv-progress-label{color:var(--muted);font:11px var(--mono);margin-top:8px}

/* ── Body ── */
.conv-body{overflow-y:auto;padding:26px 28px 28px}
.conv-question{font:500 22px var(--display);line-height:1.3;margin-bottom:6px}
.conv-subtext{color:var(--muted);font-size:13px;margin-bottom:22px}

/* ── Option buttons ── */
.conv-options{display:flex;flex-direction:column;gap:10px}
.conv-option{
  background:var(--surface,#0d1219);border:1px solid var(--line);
  color:var(--text);cursor:pointer;display:flex;align-items:center;
  font:500 14px var(--body);gap:14px;padding:16px 18px;
  text-align:left;transition:.18s border-color,.18s background,.18s transform;
  width:100%;
}
.conv-option:hover{border-color:var(--blue);background:rgba(0,184,255,.06);transform:translateX(3px)}
.conv-option .opt-icon{color:var(--blue);flex-shrink:0;font-size:16px;width:20px}
.conv-option .opt-label{flex:1}
.conv-option .opt-label small{color:var(--muted);display:block;font-size:12px;font-weight:400;margin-top:2px}
.conv-option .opt-arrow{color:var(--muted);flex-shrink:0;font-size:16px;transition:.18s transform,.18s color}
.conv-option:hover .opt-arrow{color:var(--cyan);transform:translateX(3px)}

/* ── Urgency banner (shown for urgent security path) ── */
.conv-urgent-banner{
  align-items:center;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);
  display:flex;gap:10px;margin-bottom:18px;padding:14px 16px;
}
.conv-urgent-banner b{color:#ff9b9b;font-size:13px}
.conv-urgent-banner a{color:#ff9b9b;text-decoration:underline}

/* ── Contact form step ── */
.conv-field{color:var(--muted);display:block;font-size:12px;margin:0 0 14px}
.conv-field input,.conv-field textarea{
  background:#071019;border:1px solid rgba(148,163,184,.2);color:#f8fafc;
  display:block;font:14px var(--body);margin-top:6px;padding:11px;width:100%;
}
.conv-field textarea{min-height:80px;resize:vertical}
.conv-field input:focus,.conv-field textarea:focus{border-color:var(--cyan);outline:0}
.conv-field-row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.conv-error{color:#ff9b9b;font-size:12px;margin-bottom:14px;min-height:16px}

/* ── Summary ── */
.conv-summary{background:var(--surface,#0d1219);border:1px solid var(--line);margin-bottom:20px;padding:16px 18px}
.conv-summary-row{border-bottom:1px solid var(--line);display:flex;font-size:13px;gap:10px;justify-content:space-between;padding:9px 0}
.conv-summary-row:last-child{border-bottom:0}
.conv-summary-row span:first-child{color:var(--muted)}
.conv-summary-row span:last-child{color:var(--text);text-align:right}
.conv-route-note{align-items:center;color:var(--muted);display:flex;font-size:12px;gap:8px;margin-bottom:20px}
.conv-route-note strong{color:var(--cyan)}

/* ── Nav row (back / submit) ── */
.conv-actions{display:flex;gap:10px;margin-top:6px}
.conv-back{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  cursor:pointer;font:500 13px var(--body);padding:13px 18px;transition:.2s;
}
.conv-back:hover{border-color:var(--blue);color:var(--text)}
.conv-submit{flex:1}
.conv-submit:disabled{cursor:wait;opacity:.6}

/* ── Confirmation screen ── */
.conv-done{padding:8px 4px 4px;text-align:center}
.conv-done-icon{
  align-items:center;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.35);
  border-radius:50%;color:#22c55e;display:flex;font-size:26px;height:56px;
  justify-content:center;margin:0 auto 20px;width:56px;
}
.conv-done h3{font:500 22px var(--display);margin-bottom:10px}
.conv-done p{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:6px}
.conv-done .routed-email{color:var(--cyan);font-weight:600}
.conv-done-actions{display:flex;flex-direction:column;gap:10px;margin-top:24px}

/* ── Step transition ── */
.conv-step{animation:conv-in .25s ease}
@keyframes conv-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:620px){
  .conv-field-row{grid-template-columns:1fr}
  .conv-question{font-size:19px}
}