/* ============================================================
   «Asesor de Senior Capital» — widget styles (P2-E1 restyle).
   Canonized editorial system (design/tokens/sc-tokens.css):
   navy #183f82 / #0a1638, cyan accent #6EC1E4, cool near-white
   surfaces, Inter body. Prefixed #sc-ai-* / .sc-* to avoid
   collisions with the landing. Mockup target: design/mockups/
   02-chat-widget.html.
   ============================================================ */

/* ---- Launcher ---- */
#sc-ai-launcher {
  position: fixed; right: 22px; bottom: 22px; z-index: 99990;
  width: 56px; height: 56px; border-radius: 50%;
  background: #183f82; color: #fff;
  border: 2px solid #6EC1E4; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 36px rgba(10, 22, 56, 0.28);
  transition: transform .18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
#sc-ai-launcher:hover { transform: translateY(-2px); }
#sc-ai-launcher svg { width: 24px; height: 24px; fill: none; stroke: #fff; }

#sc-ai-launcher .sc-pulse {
  position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid rgba(110, 193, 228, 0.55);
  animation: sc-pulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes sc-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { opacity: 0; }
}

#sc-ai-launcher .sc-tooltip {
  position: absolute; right: 68px; white-space: nowrap;
  background: #0a1638; color: #f5f1e8;
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px; padding: 7px 12px; border-radius: 4px;
  opacity: 0; transform: translateX(6px); pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#sc-ai-launcher:hover .sc-tooltip { opacity: 1; transform: translateX(0); }

/* ---- Window ---- */
#sc-ai-window {
  position: fixed; right: 22px; bottom: 92px; z-index: 99991;
  width: min(378px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  background: #fff; border: 1px solid #dde4ef; border-radius: 10px;
  box-shadow: 0 12px 36px rgba(10, 22, 56, 0.22);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(14px) scale(0.98); pointer-events: none;
  transition: opacity .22s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform .22s cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
}
#sc-ai-window.sc-open { opacity: 1; transform: none; pointer-events: auto; }

/* ---- Header ---- */
.sc-header {
  background: #0a1638; color: #f5f1e8;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; flex: none;
}
.sc-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: #183f82; border: 1.5px solid #6EC1E4;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 13px; color: #fff; flex: none;
}
.sc-header-info { flex: 1; min-width: 0; }
.sc-name { font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; }
.sc-status { font-size: 11px; color: #b9bcc9; margin-top: 1px; }
.sc-status--demo { color: #fcd34d; }
.sc-head-actions { display: flex; gap: 6px; }
.sc-icon-btn {
  width: 30px; height: 30px; border-radius: 6px; border: none;
  background: transparent; color: #b9bcc9; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sc-icon-btn:hover { background: rgba(245, 241, 232, 0.10); color: #fff; }
.sc-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }

/* ---- Body ---- */
.sc-body {
  flex: 1; overflow-y: auto; padding: 14px;
  background: #f6f8fc;
  display: flex; flex-direction: column; gap: 10px;
}
.sc-msg { display: flex; }
.sc-msg.sc-user { justify-content: flex-end; }
.sc-bubble {
  max-width: 86%; border-radius: 10px; padding: 9px 12px;
  font-size: 13px; line-height: 1.55; color: #0b1628;
  background: #fff; border: 1px solid #dde4ef;
  overflow-wrap: break-word;
}
.sc-msg.sc-user .sc-bubble {
  background: #183f82; border-color: #183f82; color: #fff;
}
.sc-bubble p { margin: 0 0 8px; }
.sc-bubble p:last-child { margin-bottom: 0; }
.sc-bubble a { color: #1e8fbc; text-decoration: none; }
.sc-msg.sc-user .sc-bubble a { color: #cfe8f5; }
.sc-bubble code {
  font-family: 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 11px; background: #f6f8fc; border-radius: 3px; padding: 1px 5px;
}
.sc-bubble--confirm {
  border-left: 3px solid #10b981; background: #fff;
}
.sc-ok { color: #166534; }
.sc-fine { font-size: 11px; color: #5a6a85; }

.sc-banner {
  max-width: 92%; border-radius: 6px; padding: 8px 12px;
  font-size: 12px; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fcd34d; color: #92400e;
}

/* typing dots */
.sc-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.sc-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #5a6a85;
  opacity: 0.4; animation: sc-blink 1.2s infinite;
}
.sc-typing span:nth-child(2) { animation-delay: 0.15s; }
.sc-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes sc-blink { 0%, 80%, 100% { opacity: 0.35; } 40% { opacity: 1; } }

/* ---- Quick replies ---- */
.sc-quick {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 14px 10px; background: #f6f8fc; flex: none;
}
.sc-quick:empty { padding: 0; }
.sc-reply {
  border: 1px solid #23528f; color: #183f82; background: #fff;
  border-radius: 999px; font-size: 12px; padding: 5px 12px;
  cursor: pointer; font-family: inherit;
  transition: background .15s, color .15s;
}
.sc-reply:hover { background: #183f82; color: #fff; }

/* ---- Input ---- */
.sc-input-wrap {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid #dde4ef; background: #fff; flex: none;
}
.sc-input {
  flex: 1; border: 1px solid #dde4ef; border-radius: 999px;
  padding: 9px 14px; font-size: 13px; font-family: inherit;
  color: #0b1628; outline: none; min-width: 0;
}
.sc-input:focus { border-color: #2aa9d9; box-shadow: 0 0 0 2px rgba(42, 169, 217, 0.18); }
.sc-send {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: #183f82; color: #fff; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.sc-send:hover { background: #0f2557; }
.sc-send[disabled] { opacity: 0.45; cursor: not-allowed; }
.sc-send svg { width: 16px; height: 16px; fill: none; stroke: #fff; }

.sc-footer-note {
  font-size: 10.5px; color: #5a6a85; text-align: center;
  padding: 6px 12px 9px; background: #fff; flex: none;
}

@media (max-width: 480px) {
  #sc-ai-window { right: 16px; bottom: 84px; }
  #sc-ai-launcher { right: 16px; bottom: 16px; }
}