/* SeenSecure Chatbot — widget. Todo el CSS está prefijado con #ssc-cb-* */

/* El contenedor no aporta nada al flujo de la página (evita overflow/encogido en móvil) */
#ssc-cb-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position: fixed; top: 0; left: 0; width: 100%; height: 0;
    overflow: hidden; pointer-events: none; z-index: 2147482999;
}
#ssc-cb-wrap > * { pointer-events: auto; }

/* El atributo hidden debe ganar siempre (si no, el panel no se puede cerrar) */
#ssc-cb-panel[hidden] { display: none !important; }

/* ── Botón burbuja flotante ── */
#ssc-cb-open {
    position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: 22px; z-index: 2147483000;
    display: flex; align-items: center; gap: 8px;
    background: #1e293b; color: #fff;
    border: none; cursor: pointer; padding: 12px 18px; border-radius: 999px;
    font-size: 14px; font-weight: 600; line-height: 1;
    box-shadow: 0 6px 20px rgba(15, 23, 42, .35);
    transition: transform .15s, box-shadow .15s;
}
#ssc-cb-open:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .42); }
#ssc-cb-open .ssc-cb-ico { font-size: 19px; }
#ssc-cb-open.ssc-cb-hidden { display: none; }

/* ── Panel: lateral anclado a la derecha en PC ── */
#ssc-cb-panel {
    position: fixed; right: 0; bottom: 0; z-index: 2147483001;
    width: 420px;
    height: calc(100vh - 84px);
    height: min(calc(100dvh - 84px), 720px);
    background: #fff;
    border-radius: 16px 0 0 0;
    border: 1px solid #e2e8f0; border-right: 0; border-bottom: 0;
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .22);
}

/* ── Móvil: pantalla completa (como WhatsApp) y bloqueo del scroll de la página ── */
@media (max-width: 560px) {
    #ssc-cb-open { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); padding: 14px; }
    #ssc-cb-open .ssc-cb-label { display: none; }
    #ssc-cb-panel {
        left: 0; top: 0; right: 0; bottom: 0;
        width: 100%; height: 100%; max-height: 100%;
        border-radius: 0; border: none;
    }
    #ssc-cb-close { width: 34px; height: 34px; font-size: 19px; }
    #ssc-cb-clear { width: 34px; height: 34px; font-size: 18px; }
    #ssc-cb-popout { display: none; }
    body.ssc-cb-locked { overflow: hidden; }
    html.ssc-cb-locked { overflow: hidden; }
}

/* ── Cabecera ── */
#ssc-cb-head {
    background: #1e293b;
    color: #fff; padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
}
.ssc-cb-head-ico {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    background: #334155;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.ssc-cb-head-txt { flex: 1; min-width: 0; }
#ssc-cb-title { font-size: 14.5px; font-weight: 700; }
#ssc-cb-sub { font-size: 11.5px; opacity: .8; margin-top: 1px; }
#ssc-cb-close {
    background: #334155; color: #fff; border: none;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    font-size: 17px; line-height: 1;
}
#ssc-cb-close:hover { background: #475569; }
#ssc-cb-clear {
    background: transparent; color: #cbd5e1; border: none;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    font-size: 15px; line-height: 1;
}
#ssc-cb-clear:hover { background: #475569; color: #fff; }
#ssc-cb-popout {
    background: transparent; color: #cbd5e1; border: none;
    width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
    font-size: 14px; line-height: 1;
}
#ssc-cb-popout:hover { background: #475569; color: #fff; }

/* ── Ventana independiente (chat.html en PC) ── */
body.ssc-cb-standalone { margin: 0; overflow: hidden; }
body.ssc-cb-standalone #ssc-cb-open { display: none; }
body.ssc-cb-standalone #ssc-cb-panel {
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%; height: 100%; max-width: none; max-height: none;
    border-radius: 0; border: none;
}
body.ssc-cb-standalone #ssc-cb-msgs { padding: 18px max(20px, calc((100% - 880px) / 2)); }
body.ssc-cb-standalone #ssc-cb-form {
    padding: 12px max(20px, calc((100% - 880px) / 2)) 10px;
}
body.ssc-cb-standalone #ssc-cb-foot { padding-bottom: 12px; }
body.ssc-cb-standalone .ssc-cb-bubble { font-size: 13.5px; max-width: 78%; }

/* ── Mensajes ── */
#ssc-cb-msgs {
    flex: 1; overflow-y: auto; padding: 14px 14px 6px;
    background: #f8fafc;
    display: flex; flex-direction: column; gap: 8px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.ssc-cb-msg { display: flex; gap: 6px; }
.ssc-cb-msg.ssc-cb-user { justify-content: flex-end; }
.ssc-cb-msg.ssc-cb-bot { justify-content: flex-start; align-items: flex-end; }
.ssc-cb-avatar {
    width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
    background: #f1f5f9; border: 1px solid #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.ssc-cb-bubble {
    max-width: 86%; padding: 9px 12px; border-radius: 14px;
    font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word;
}
.ssc-cb-user .ssc-cb-bubble { background: #1e293b; color: #fff; border-bottom-right-radius: 4px; }
.ssc-cb-bot .ssc-cb-bubble { background: #fff; color: #1f2937; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.ssc-cb-bubble a { color: #2563eb; font-weight: 600; }
.ssc-cb-user .ssc-cb-bubble a { color: #bfdbfe; }

/* Sugerencias de pregunta (chips) */
.ssc-cb-chips { margin-top: 9px; display: flex; flex-direction: column; gap: 6px; }
.ssc-cb-chip {
    text-align: left; cursor: pointer;
    background: #eef2f7; color: #334155;
    border: 1px solid #e2e8f0; border-radius: 10px;
    font-size: 12px; padding: 7px 10px; line-height: 1.35;
}
.ssc-cb-chip:hover { background: #e2e8f0; }

/* Fuentes */
.ssc-cb-sources { margin-top: 7px; padding-top: 7px; border-top: 1px dashed #cbd5e1; }
.ssc-cb-sources-lbl { display: block; font-size: 10.5px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.ssc-cb-sources a {
    display: block; font-size: 11.5px; color: #2563eb; text-decoration: none;
    padding: 2px 0;
}
.ssc-cb-sources a:hover { text-decoration: underline; }

/* Indicador escribiendo */
#ssc-cb-typing { padding: 0 14px 6px; }
#ssc-cb-typing span {
    display: inline-block; width: 7px; height: 7px; margin-right: 4px;
    background: #94a3b8; border-radius: 50%;
    animation: ssc-cb-bounce 1.2s infinite;
}
#ssc-cb-typing span:nth-child(2) { animation-delay: .15s; }
#ssc-cb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ssc-cb-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* Formulario: fuente 16px para que iOS NO haga zoom al escribir (como WhatsApp) */
#ssc-cb-form {
    display: flex; gap: 8px; padding: 10px 12px;
    background: #fff; border-top: 1px solid #f1f5f9; flex: 0 0 auto;
}
#ssc-cb-input {
    flex: 1; border: 1px solid #cbd5e1; border-radius: 999px;
    padding: 9px 14px; font-size: 16px; line-height: 1.4; outline: none; background: #f8fafc;
    -webkit-appearance: none; appearance: none;
}
#ssc-cb-input:focus { border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, .18); }
#ssc-cb-send {
    width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
    background: #1e293b; color: #fff; font-size: 15px;
    flex: 0 0 auto;
}
#ssc-cb-send:hover { background: #0f172a; }
#ssc-cb-send:disabled { background: #cbd5e1; cursor: default; }

/* Pie */
#ssc-cb-foot {
    text-align: center; font-size: 10px; color: #94a3b8;
    padding: 6px 0 8px; background: #fff;
}