/* =============================================================================
   TOTALISYS COLLEGE — assets/css/web-chat.css
   -----------------------------------------------------------------------------
   Globo de chat del agente en el sitio web — mismo agente que responde por
   WhatsApp, aquí embebido directo en la página. Apilado ARRIBA del botón
   de WhatsApp (mismo lado derecho) para no chocar con él ni con el
   widget de accesibilidad, que va a la izquierda.
   ============================================================================= */

.tc-chat-float {
    position: fixed; bottom: 92px; right: 22px; z-index: 91;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--tc-navy, #0f2848), var(--tc-blue, #1a437c));
    display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform 0.15s ease;
}
.tc-chat-float:hover, .tc-chat-float:focus-visible { transform: scale(1.08); }
.tc-chat-float:focus-visible { outline: 3px solid var(--tc-mint, #5bbf9c); outline-offset: 3px; }
.tc-chat-float svg { width: 28px; height: 28px; }
.tc-chat-float .tc-chat-dot {
    position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
    background: var(--tc-mint, #5bbf9c); border: 2px solid #fff;
}
@media (max-width: 600px) {
    .tc-chat-float { bottom: 78px; right: 16px; width: 50px; height: 50px; }
}

.tc-chat-panel {
    position: fixed; bottom: 158px; right: 22px; z-index: 92;
    width: 360px; max-width: calc(100vw - 32px); height: 520px; max-height: 70vh;
    background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.28);
    display: none; flex-direction: column; overflow: hidden;
    font-family: var(--tc-font-body, 'IBM Plex Sans', sans-serif);
}
.tc-chat-panel.is-open { display: flex; }
@media (max-width: 600px) {
    .tc-chat-panel { bottom: 138px; right: 16px; width: calc(100vw - 32px); height: 65vh; }
}

.tc-chat-header {
    background: var(--tc-navy, #0f2848); color: #fff; padding: 16px 18px;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.tc-chat-header .tc-chat-avatar {
    width: 34px; height: 34px; border-radius: 50%; background: var(--tc-mint, #5bbf9c);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tc-chat-header .tc-chat-avatar svg { width: 20px; height: 20px; }
.tc-chat-header-text { flex: 1; min-width: 0; }
.tc-chat-header-text strong { display: block; font-size: 0.92rem; font-family: var(--tc-font-display, inherit); }
.tc-chat-header-text span { display: block; font-size: 0.72rem; color: #9fb3d4; }
.tc-chat-header button {
    background: rgba(255,255,255,0.15); border: none; color: #fff; width: 28px; height: 28px;
    border-radius: 50%; cursor: pointer; font-size: 1rem; flex-shrink: 0;
}

.tc-chat-messages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: var(--tc-paper, #f4f7f5);
}
.tc-chat-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 0.88rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.tc-chat-msg.is-user { align-self: flex-end; background: var(--tc-navy, #0f2848); color: #fff; border-bottom-right-radius: 4px; }
.tc-chat-msg.is-agent { align-self: flex-start; background: #fff; color: var(--tc-ink, #1a2b47); border: 1px solid var(--tc-line, #dfe4ea); border-bottom-left-radius: 4px; }
.tc-chat-msg.is-typing { align-self: flex-start; background: #fff; border: 1px solid var(--tc-line, #dfe4ea); border-bottom-left-radius: 4px; padding: 12px 16px; display: flex; gap: 4px; }
.tc-chat-msg.is-typing span { width: 6px; height: 6px; border-radius: 50%; background: #a9bcd8; animation: tcChatBounce 1.2s infinite ease-in-out; }
.tc-chat-msg.is-typing span:nth-child(2) { animation-delay: 0.15s; }
.tc-chat-msg.is-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tcChatBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

.tc-chat-form {
    display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--tc-line, #dfe4ea); flex-shrink: 0; background: #fff;
}
.tc-chat-form input {
    flex: 1; border: 1px solid var(--tc-line, #dfe4ea); border-radius: 20px; padding: 9px 16px; font-size: 0.88rem;
    font-family: inherit; outline: none;
}
.tc-chat-form input:focus { border-color: var(--tc-navy, #0f2848); }
.tc-chat-form button {
    width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--tc-navy, #0f2848);
    color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.tc-chat-form button svg { width: 17px; height: 17px; }
.tc-chat-form button:disabled { opacity: 0.5; cursor: default; }

/* Campo trampa — nunca visible para un visitante real */
.tc-chat-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }