/* ============================================================
   @javimxoficial · AI Assistant widget (chatbot + voice bot)
   Violet theme · self-contained · injected by js/assistant.js
   ============================================================ */
:root {
    --ai-violet: #9d4bff;
    --ai-violet-deep: #5a17be;
    --ai-bg: #0e0820;
    --ai-panel: #120a22;
    --ai-border: rgba(157, 75, 255, 0.28);
    --ai-text: #ffffff;
    --ai-dim: rgba(255, 255, 255, 0.62);
}

/* ---- Floating action buttons ---- */
.ai-fabs { position: fixed; right: 20px; bottom: 20px; z-index: 9000; display: flex; flex-direction: column; gap: 12px; }
.ai-fab {
    width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; position: relative;
    display: flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #fff;
    background: linear-gradient(135deg, var(--ai-violet), var(--ai-violet-deep));
    box-shadow: 0 10px 30px rgba(157, 75, 255, 0.5), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;
}
.ai-fab:hover { transform: scale(1.08); box-shadow: 0 14px 38px rgba(157, 75, 255, 0.7); }
.ai-fab:active { transform: scale(0.96); }
.ai-fab::after {
    content: attr(data-label); position: absolute; right: 70px; top: 50%; transform: translateY(-50%);
    background: rgba(12,7,26,0.95); color: #fff; font: 600 0.72rem/1 system-ui, sans-serif; white-space: nowrap;
    padding: 0.5rem 0.7rem; border-radius: 8px; border: 1px solid var(--ai-border); opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.ai-fab:hover::after { opacity: 1; }
.ai-fab--voice { background: linear-gradient(135deg, #b06bff, #7a1fd6); }
.ai-fab__pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(157,75,255,0.6); animation: aiPulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes aiPulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---- Panel ---- */
.ai-panel {
    position: fixed; right: 20px; bottom: 20px; z-index: 9001; width: 370px; max-width: calc(100vw - 32px);
    height: 560px; max-height: calc(100vh - 40px); display: none; flex-direction: column; overflow: hidden;
    background: var(--ai-panel); border: 1px solid var(--ai-border); border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(157,75,255,0.18);
    transform: translateY(20px) scale(0.98); opacity: 0; transition: transform 0.3s var(--ease, cubic-bezier(0.22,1,0.36,1)), opacity 0.3s;
}
.ai-panel.is-open { display: flex; transform: none; opacity: 1; }

.ai-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; background: linear-gradient(135deg, rgba(157,75,255,0.22), rgba(90,23,190,0.12)); border-bottom: 1px solid var(--ai-border); }
.ai-head__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ai-violet), var(--ai-violet-deep)); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; flex-shrink: 0; }
.ai-head__meta { display: flex; flex-direction: column; line-height: 1.2; }
.ai-head__title { font: 700 0.95rem system-ui, sans-serif; color: #fff; }
.ai-head__status { font: 500 0.72rem system-ui, sans-serif; color: var(--ai-dim); display: flex; align-items: center; gap: 0.35rem; }
.ai-dot { width: 7px; height: 7px; border-radius: 50%; background: #33d17a; box-shadow: 0 0 8px #33d17a; }
.ai-head__close { margin-left: auto; background: rgba(255,255,255,0.06); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 1.1rem; line-height: 1; transition: background 0.2s; }
.ai-head__close:hover { background: rgba(255,255,255,0.15); }

/* ---- Messages ---- */
.ai-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.65rem; scrollbar-width: thin; }
.ai-msgs::-webkit-scrollbar { width: 6px; }
.ai-msgs::-webkit-scrollbar-thumb { background: rgba(157,75,255,0.35); border-radius: 3px; }
.ai-msg { max-width: 82%; padding: 0.6rem 0.85rem; border-radius: 14px; font: 400 0.88rem/1.45 system-ui, sans-serif; word-wrap: break-word; }
.ai-msg--bot { align-self: flex-start; background: rgba(255,255,255,0.07); color: #f2ecff; border-bottom-left-radius: 4px; }
.ai-msg--user { align-self: flex-end; background: linear-gradient(135deg, var(--ai-violet), var(--ai-violet-deep)); color: #fff; border-bottom-right-radius: 4px; }
.ai-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 0.7rem 0.9rem; background: rgba(255,255,255,0.07); border-radius: 14px; }
.ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-violet); animation: aiBlink 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiBlink { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.ai-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.5rem; }
.ai-quick button { font: 500 0.72rem system-ui, sans-serif; color: var(--ai-violet); background: rgba(157,75,255,0.1); border: 1px solid var(--ai-border); border-radius: 100px; padding: 0.35rem 0.7rem; cursor: pointer; transition: all 0.2s; }
.ai-quick button:hover { background: rgba(157,75,255,0.22); color: #fff; }

/* ---- Composer ---- */
.ai-composer { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem; border-top: 1px solid var(--ai-border); background: rgba(0,0,0,0.2); }
.ai-composer input { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid var(--ai-border); border-radius: 100px; padding: 0.65rem 0.95rem; color: #fff; font: 400 0.88rem system-ui, sans-serif; outline: none; }
.ai-composer input::placeholder { color: var(--ai-dim); }
.ai-composer input:focus { border-color: var(--ai-violet); }
.ai-icon-btn { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1rem; background: linear-gradient(135deg, var(--ai-violet), var(--ai-violet-deep)); transition: transform 0.2s, box-shadow 0.2s; }
.ai-icon-btn:hover { transform: scale(1.08); }
.ai-icon-btn--mic.is-listening { animation: micPulse 1.2s ease-in-out infinite; }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(157,75,255,0.6); } 50% { box-shadow: 0 0 0 10px rgba(157,75,255,0); } }

/* ---- Voice overlay ---- */
.ai-voice { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 40%, rgba(157,75,255,0.18), var(--ai-panel) 70%); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 1.5rem; text-align: center; }
.ai-voice.is-active { display: flex; }
.ai-orb { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c18cff, var(--ai-violet-deep)); box-shadow: 0 0 50px rgba(157,75,255,0.7); position: relative; transition: transform 0.2s; }
.ai-orb::before, .ai-orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(157,75,255,0.5); animation: aiPulse 2.4s ease-out infinite; }
.ai-orb::after { animation-delay: 1.2s; }
.ai-orb.is-thinking { animation: orbSpin 1s linear infinite; }
.ai-orb.is-speaking { transform: scale(1.08); }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.ai-voice__status { color: #fff; font: 600 1rem system-ui, sans-serif; }
.ai-voice__hint { color: var(--ai-dim); font: 400 0.82rem system-ui, sans-serif; max-width: 240px; }
.ai-voice__ctrls { display: flex; gap: 1rem; }
.ai-voice__btn { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--ai-border); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.15rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.ai-voice__btn:hover { background: rgba(255,255,255,0.16); }
.ai-voice__btn--end { background: linear-gradient(135deg, #ff2d55, #b00d24); border-color: transparent; }
.ai-voice__transcript { color: var(--ai-dim); font: 400 0.8rem system-ui, sans-serif; min-height: 1.2em; max-width: 260px; }

@media (max-width: 640px) {
    .ai-panel { right: 12px; bottom: 12px; width: calc(100vw - 24px); height: calc(100vh - 90px); }
    .ai-fabs { right: 14px; bottom: 14px; }
    .ai-fab { width: 52px; height: 52px; font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-fab__pulse, .ai-orb::before, .ai-orb::after, .ai-typing span, .ai-icon-btn--mic.is-listening { animation: none; }
}