/* Modern UI Styles - Complementing Tailwind CSS */
:root {
    --vh: 1vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    overflow: hidden;
    height: 100%;
    position: fixed;
    width: 100%;
}

/* Custom Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Message Bubble Styles */
.message {
    animation: slideIn 0.3s ease;
}

.message.sent .message-bubble {
    background: linear-gradient(135deg, #e0e9ff 0%, #c7d7fe 100%);
    border-bottom-right-radius: 4px;
}

.message-content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* File Message Styles */
.file-message {
    transition: all 0.2s ease;
}

.file-message:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.file-icon {
    font-size: 32px;
}

/* Multi-select mode */
.message.selectable.selected {
    background: rgba(124, 110, 242, 0.1);
    border-radius: 12px;
    padding: 8px;
    margin: -8px;
}

.message-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #7c6ef2;
}

/* Side Menu Animation */
.side-menu.active {
    transform: translateX(0) !important;
}

/* Overlay Animation */
.overlay.active {
    display: block !important;
}

/* Toast Animation */
.toast.show {
    display: block !important;
    animation: toastSlideUp 0.3s ease;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Mobile Viewport Height Fix */
@media (max-width: 768px) {
    #chatScreen {
        height: calc(var(--vh, 1vh) * 100);
        max-height: calc(var(--vh, 1vh) * 100);
    }
}

/* Desktop Styles */
@media (min-width: 769px) {
    .menu-btn {
        display: none !important;
    }
}

/* Utility Classes */
.hidden {
    display: none !important;
}