/* Logo glow */
.group:hover img[alt="AIPlatforms"] {
    filter: drop-shadow(0 0 8px rgba(51, 119, 255, 0.5));
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    overflow-x: hidden;
}

/* Header scroll state */
#header { background: transparent; }
#header.scrolled {
    background: rgba(11, 13, 20, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Textarea auto-resize */
.chat-textarea {
    max-height: 200px;
    min-height: 48px;
    font-size: 16px;
}

#chat-input-mobile {
    min-height: 64px;
}

/* Chat messages */
.msg-user {
    background: rgba(51, 119, 255, 0.08);
    border: 1px solid rgba(51, 119, 255, 0.15);
}

.msg-ai {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-content {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* Markdown in chat */
.chat-content h1, .chat-content h2, .chat-content h3 {
    color: white;
    font-weight: 600;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.chat-content h1 { font-size: 1.25rem; }
.chat-content h2 { font-size: 1.125rem; }
.chat-content h3 { font-size: 1rem; }

.chat-content p { margin-bottom: 0.75em; line-height: 1.7; }
.chat-content ul, .chat-content ol { padding-left: 1.5em; margin-bottom: 0.75em; }
.chat-content li { margin-bottom: 0.25em; }

.chat-content code {
    background: rgba(255,255,255,0.06);
    padding: 0.15em 0.4em;
    border-radius: 0.375rem;
    font-size: 0.85em;
    color: #8ec0ff;
}

.chat-content pre {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 0.75rem;
    padding: 1em;
    overflow-x: auto;
    max-width: 100%; /* Prevent expanding parent */
    margin-bottom: 0.75em;
    white-space: pre; /* Keep code formatting */
}

.chat-content pre code {
    background: none;
    padding: 0;
    color: #d4d4d8;
}

.chat-content blockquote {
    border-left: 3px solid rgba(51, 119, 255, 0.4);
    padding-left: 1em;
    color: #9ca3af;
    margin-bottom: 0.75em;
}

.chat-content a {
    color: #599dff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.chat-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75em;
}
.chat-content th, .chat-content td {
    border: 1px solid rgba(255,255,255,0.08);
    padding: 0.5em 0.75em;
    text-align: left;
    font-size: 0.875rem;
}
.chat-content th {
    background: rgba(255,255,255,0.03);
    color: white;
    font-weight: 600;
}

/* Typing animation */
.typing-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(51,119,255,0.5);
    animation: typing 1.4s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

/* Pulse on live badge */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}