/* --- CSS RESET FOR PLUGIN --- */
#spex-a-container button {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
#spex-a-container input[type="text"] {
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    width: 100%;
}
#spex-a-container * {
    box-sizing: border-box;
}

/* --- MAIN PLUGIN STYLES --- */
#spex-a-container {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, rgba(12, 17, 43, 0.9) 0%, rgba(12, 17, 43, 1) 100%);
    color: white;
    overflow: hidden; 
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

#spex-a-container .aurora-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150vw;
    height: 150vh;
    background: radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.15) 0%, rgba(56, 189, 248, 0) 25%),
                radial-gradient(circle at 80% 70%, rgba(167, 139, 250, 0.15) 0%, rgba(167, 139, 250, 0) 25%);
    animation: aurora 20s infinite linear;
    z-index: 0;
}
@keyframes aurora {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

#spex-a-container .card-bg {
    background-color: rgba(23, 30, 65, 0.5);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#spex-a-container .chat-bubble, #spex-a-container .starter-prompts {
    animation: pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pop-in {
    0% { transform: scale(0.95) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0px); opacity: 1; }
}

#spex-a-container #chat-window::-webkit-scrollbar { width: 4px; }
#spex-a-container #chat-window::-webkit-scrollbar-track { background: transparent; }
#spex-a-container #chat-window::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }

#spex-a-container .result-gauge-fg {
    transition: stroke-dashoffset 1.5s ease-in-out;
}
#spex-a-container .human-result { stroke: #4ade80; }
#spex-a-container .ai-result { stroke: #a78bfa; }

#spex-a-container .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #38bdf8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }