:root {
  --tech-blue: #4A90E2;
  --warm-orange: #F5A623;
  --white: #FFFFFF;
  --light-gray: #F7F8FA;
  --text-dark: #333333;
  --text-medium: #888888;
}

body {
    font-family: 'Noto Sans SC', sans-serif;
}

.bg-tech-blue { background-color: var(--tech-blue); }
.bg-warm-orange { background-color: var(--warm-orange); }
.bg-light-gray { background-color: var(--light-gray); }
.text-tech-blue { color: var(--tech-blue); }
.text-text-dark { color: var(--text-dark); }
.text-text-medium { color: var(--text-medium); }
.border-tech-blue { border-color: var(--tech-blue); }

#main-header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border-bottom-color: #e5e7eb;
}

.feature-card-bg {
    background-color: var(--white);
    border: 1px solid #e5e7eb;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card-bg:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.feature-card-image-container {
    background-color: #eef5fe;
    background-image: url('data:image/svg+xml;utf8,<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\\\\\\\\\\\\\\\"><path d=\\\\\\\\\\\\\\\"M-10 10 C 20 20, 40 0, 60 10 S 100 0, 120 10\\\\\\\\\\\\\\\" stroke=\\\\\\\\\\\\\\\"%234A90E2\\\\\\\\\\\\\\\" fill=\\\\\\\\\\\\\\\"none\\\\\\\\\\\\\\\" stroke-width=\\\\\\\\\\\\\\\"2\\\\\\\\\\\\\\\" stroke-opacity=\\\\\\\\\\\\\\\"0.2\\\\\\\\\\\\\\\"/></svg>');
    background-size: 50px;
    background-repeat: repeat;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.scroll-target {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-target.visible {
    opacity: 1;
    transform: translateY(0);
}

.wave {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTQ0MCAxNDciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHRpdGxlPmdyb3VwPC90aXRsZT48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48ZyBpZD0iQ29tcG9uZW50LS0tV2F2ZS1Cb3R0b20iIGZpbGw9IiM0QTkwRTIiPjxwYXRoIGQ9Ik0wLDc0LjgzMjk0MTIgQzM2MCw3NC44MzI5NDEyIDM2MCwxNDcgNzIwLDE0NyBDMTA4MCwxNDcgMTA4MCw3NC44MzI5NDEyIDE0NDAsNzQuODMyOTQxMiBMMTQ0MCwxNDcgTDAsMTQ3IEwwLDc0LjgzMjk0MTIgWiIgaWQ9IldhdmUiIG9wYWNpdHk9IjAuMSI+PC9wYXRoPjwvZz48L2c+PC9zdmc+);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 147px;
    animation: wave 15s linear infinite;
}
.wave:nth-of-type(2) {
    animation-direction: reverse;
    animation-duration: 20s;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    animation-duration: 25s;
    opacity: 0.5;
}

@keyframes wave {
    0% { transform: translateX(0); }
    50% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

#chat-messages {
    scrollbar-width: thin;
    scrollbar-color: var(--tech-blue) var(--light-gray);
}

#chat-messages::-webkit-scrollbar {
    width: 6px;
}

#chat-messages::-webkit-scrollbar-track {
    background: var(--light-gray);
}

#chat-messages::-webkit-scrollbar-thumb {
    background-color: var(--tech-blue);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.message-animate {
    animation: message-fade-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes message-fade-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#topic-detail-modal.hidden {
    display: none;
}

#login-modal:not(.hidden) {
    animation: modal-fade-in 0.2s ease-out forwards;
}

#login-modal:not(.hidden) > div {
    animation: modal-scale-up 0.2s ease-out forwards;
}

@keyframes modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modal-scale-up {
    from {
        transform: scale(0.95);
    }
    to {
        transform: scale(1);
    }
}