/* VoidChat - Custom Styles */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1a1a25;
}

::-webkit-scrollbar-thumb {
    background: #3a3a4a;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a4a5a;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #3a3a4a #1a1a25;
}

/* Selected text */
::selection {
    background: rgba(0, 255, 136, 0.3);
    color: #ffffff;
}

/* Focus outline */
*:focus-visible {
    outline: 2px solid rgba(0, 255, 136, 0.5);
    outline-offset: 2px;
}

/* Prevent text selection on buttons */
button,
[role="button"] {
    user-select: none;
}

/* Message animations */
.message-bubble {
    animation: slideUp 0.3s ease-out;
}

/* Scanline effect on landing page */
.scanline {
    pointer-events: none;
}

/* Grid background */
.grid-bg {
    pointer-events: none;
}

/* Mobile optimizations */
@media (max-width: 640px) {
    .message-bubble {
        max-width: 95% !important;
    }
    
    .chat-messages {
        padding: 0.5rem !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .glass {
        background: rgba(26, 26, 37, 1);
        border: 2px solid rgba(0, 255, 136, 0.5);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .message-bubble,
    .animate-fade-in,
    .btn-hover {
        animation: none !important;
        transition: none !important;
    }
}

/* Print styles - hide everything */
@media print {
    body {
        display: none;
    }
}

/* Temp message flash effect */
.temp-delete {
    animation: tempFlash 0.5s ease-out;
}

@keyframes tempFlash {
    0% { background-color: rgba(255, 51, 102, 0.3); }
    100% { background-color: transparent; opacity: 0; }
}

/* Reaction badge */
.reaction-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    border-radius: 9999px;
    background: rgba(58, 58, 74, 0.8);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}

.reaction-badge:hover {
    background: rgba(58, 58, 74, 1);
}

/* Safety wipe animation */
@keyframes wipePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.wipe-active {
    animation: wipePulse 0.5s ease-in-out infinite;
}

/* Search highlight */
mark {
    background: #00ff88;
    color: #0a0a0f;
    padding: 0 2px;
    border-radius: 2px;
}

/* Screen share preview */
#screenSharePreview video {
    background: #000;
}

/* Drag and drop overlay */
.file-drop-zone.drag-over {
    border-color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.05) !important;
}