/* Raxis AI Widget — v1.0 */

/* ── Variables ── */
:root {
    --rai-accent: #722F37;
    --rai-bg: #ffffff;
    --rai-border: #e8e0e0;
    --rai-text: #1a1a1a;
    --rai-muted: #888;
    --rai-bot-bg: #f5f0ef;
    --rai-user-bg: var(--rai-accent);
    --rai-radius: 16px;
    --rai-shadow: 0 8px 40px rgba(0,0,0,.18);
}

/* ── FAB flotante ── */
.raxis-ai-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    transition: transform .2s, box-shadow .2s;
}
.raxis-ai-fab:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(0,0,0,.3); }

/* ── Contenedor flotante ── */
.raxis-ai-floating .raxis-ai-box {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 360px;
    max-height: 560px;
    z-index: 9999;
    border-radius: var(--rai-radius);
    box-shadow: var(--rai-shadow);
    display: flex;
    flex-direction: column;
    background: var(--rai-bg);
    overflow: hidden;
    animation: raiSlideUp .25s ease;
}

/* ── Contenedor inline ── */
.raxis-ai-inline .raxis-ai-box,
.raxis-ai-embed .raxis-ai-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--rai-bg);
    border-radius: var(--rai-radius);
    border: 1px solid var(--rai-border);
    overflow: hidden;
}

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

/* ── Header ── */
.raxis-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    flex-shrink: 0;
}
.raxis-ai-header-info { display: flex; align-items: center; gap: 10px; }
.raxis-ai-avatar { font-size: 26px; }
.raxis-ai-title  { color: #fff; font-size: 14px; font-weight: 700; }
.raxis-ai-status { color: rgba(255,255,255,.75); font-size: 11px; }
.raxis-ai-close  { background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .8; padding: 4px; }
.raxis-ai-close:hover { opacity: 1; }

/* ── Mensajes ── */
.raxis-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.raxis-ai-msg {
    display: flex;
    max-width: 85%;
}
.raxis-ai-msg span {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
}
.raxis-ai-bot  { align-self: flex-start; }
.raxis-ai-user { align-self: flex-end; flex-direction: row-reverse; }
.raxis-ai-bot  span { background: var(--rai-bot-bg); color: var(--rai-text); border-bottom-left-radius: 4px; }
.raxis-ai-user span { background: var(--rai-accent); color: #fff; border-bottom-right-radius: 4px; }

/* ── Typing dots ── */
.raxis-ai-typing span { display: flex; gap: 4px; padding: 12px 14px; }
.raxis-dot { width: 7px; height: 7px; border-radius: 50%; background: #aaa; animation: raiDot 1.2s infinite; }
.raxis-dot:nth-child(2) { animation-delay: .2s; }
.raxis-dot:nth-child(3) { animation-delay: .4s; }
@keyframes raiDot { 0%,80%,100%{opacity:.2} 40%{opacity:1} }

/* ── Email capture ── */
.raxis-ai-email-capture {
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--rai-border);
    background: #faf8f8;
}
.raxis-ai-input-sm {
    border: 1px solid var(--rai-border);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}
.raxis-ai-input-sm:focus { border-color: var(--rai-accent); }
.raxis-ai-email-capture small { font-size: 10px; color: var(--rai-muted); }

/* ── Quick actions ── */
.raxis-ai-quick-actions {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    flex-wrap: wrap;
    border-top: 1px solid var(--rai-border);
}
.raxis-ai-quick-btn {
    background: #f5f0ef;
    border: 1px solid var(--rai-border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    cursor: pointer;
    color: var(--rai-text);
    text-decoration: none;
    transition: background .2s;
}
.raxis-ai-quick-btn:hover { background: #ede5e5; }
.raxis-ai-wa-btn { background: #25D366; border-color: #25D366; color: #fff; }
.raxis-ai-wa-btn:hover { background: #128C7E; }

/* ── Input área ── */
.raxis-ai-input-area {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--rai-border);
    flex-shrink: 0;
}
.raxis-ai-photo-btn {
    cursor: pointer;
    font-size: 20px;
    flex-shrink: 0;
    opacity: .7;
    transition: opacity .2s;
}
.raxis-ai-photo-btn:hover { opacity: 1; }
.raxis-ai-text-input {
    flex: 1;
    border: 1px solid var(--rai-border);
    border-radius: 22px;
    padding: 9px 14px;
    font-size: 13px;
    outline: none;
    background: #faf8f8;
}
.raxis-ai-text-input:focus { border-color: var(--rai-accent); background: #fff; }
.raxis-ai-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s;
}
.raxis-ai-send-btn:hover { transform: scale(1.1); }

/* ── Footer ── */
.raxis-ai-footer { text-align: center; padding: 6px; }
.raxis-ai-footer small { font-size: 10px; color: var(--rai-muted); }
.raxis-ai-footer a { color: var(--rai-accent); text-decoration: none; }

/* ── Responsive móvil ── */
@media (max-width: 480px) {
    .raxis-ai-floating .raxis-ai-box {
        width: calc(100vw - 24px);
        right: 12px;
        bottom: 80px;
        max-height: 70vh;
    }
    .raxis-ai-fab { bottom: 16px; right: 16px; }
}