/* assets/css/style.css */

/* Hide scrollbar for clean chat view */
.chat-container::-webkit-scrollbar {
    width: 6px;
}
.chat-container::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.chat-container::-webkit-scrollbar-thumb {
    background: #FFD700; 
    border-radius: 4px;
}
.chat-container::-webkit-scrollbar-thumb:hover {
    background: #330066; 
}

/* Empty state illustration sizing */
.empty-state-svg {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    opacity: 0.6;
}

/* --- Added for Modern Flat UI --- */

/* Static background utility - replaced moving gradient */
.bg-flat-gradient {
    background-color: #330066;
}

/* Noise overlay utility - subtle texture */
.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Scroll entry animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

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

/* Simplified panel utility */
.glass-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.dark-glass-panel {
    background: #1e293b;
    border: 1px solid #334155;
}

@keyframes chatBubbleInFromLeft {
    from {
        opacity: 0;
        transform: translate3d(-20px, 10px, 0) rotate(-2deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

@keyframes chatBubbleInFromRight {
    from {
        opacity: 0;
        transform: translate3d(20px, 10px, 0) rotate(2deg);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(0);
    }
}

.chat-bubble {
    overflow-wrap: anywhere;
    border-radius: var(--border-radius-sharp);
    border: 1px solid rgba(255,255,255,0.1);
    font-family: var(--font-ui);
    padding: 12px 16px;
}

.chat-bubble-incoming {
    animation: chatBubbleInFromLeft 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    background: rgba(255,255,255,0.05);
    border-left: 4px solid var(--color-accent);
    color: var(--color-fg);
}

.chat-bubble-outgoing {
    animation: chatBubbleInFromRight 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    background: var(--color-bg);
    border: 1px solid var(--color-accent);
    box-shadow: 3px 3px 0px var(--color-accent);
    color: var(--color-fg);
}

.chat-bubble-mine::selection {
    background: var(--color-accent);
    color: #000;
}

.chat-bubble-theirs::selection {
    background: var(--color-accent);
    color: #000;
}

/* Scroll-to-bottom button: JS toggles .visible class */
#scroll-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
#scroll-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Delivery tick icon smooth swap */
.tick-wrap svg {
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.1s ease;
}