/* Final Telegram Style Adjustments */

/* Override any remaining non-Telegram styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    background: var(--tg-bg-primary) !important;
    color: var(--tg-text-primary) !important;
}

/* Ensure chat container has proper Telegram look */
.chat-container {
    background: var(--tg-bg-chat) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Chat header final adjustments */
.chat-header {
    background: var(--tg-bg-header) !important;
    border-bottom: 1px solid var(--tg-border) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Message styling final touches */
.message {
    animation: none !important;
    transition: none !important;
}

.message-bubble {
    box-shadow: none !important;
    border: none !important;
    transition: none !important;
}

.message-bubble:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Remove all gradient backgrounds */
.brand-icon,
.user-avatar,
.chat-user-avatar,
.mobile-user-avatar,
.voice-play-btn,
.file-icon {
    background: var(--tg-blue) !important;
    background-image: none !important;
}

.message.me .message-bubble {
    background: var(--tg-bg-message-out) !important;
    background-image: none !important;
}

/* Button styling */
.btn-primary {
    background: var(--tg-blue) !important;
    background-image: none !important;
    border: none !important;
}

.btn-success {
    background: var(--tg-green) !important;
    background-image: none !important;
    border: none !important;
}

.voice-record-btn {
    background: var(--tg-red) !important;
    background-image: none !important;
}

.voice-record-btn.recording {
    background: var(--tg-red) !important;
    background-image: none !important;
}

/* Remove all pseudo-element effects */
.btn::before,
.nav-link::before,
.user-item::before,
.theme-toggle::before {
    display: none !important;
}

/* Navbar final adjustments */
.modern-navbar {
    backdrop-filter: none !important;
    background: var(--tg-bg-header) !important;
}

.theme-toggle {
    background: var(--tg-bg-secondary) !important;
    border: 1px solid var(--tg-border) !important;
}

.action-btn {
    background: var(--tg-bg-secondary) !important;
    border: 1px solid var(--tg-border) !important;
}

/* Input styling */
.chat-input-wrapper {
    background: var(--tg-bg-input) !important;
    border: 1px solid var(--tg-border) !important;
    box-shadow: none !important;
}

.chat-input-wrapper:focus-within {
    border-color: var(--tg-blue) !important;
    box-shadow: none !important;
    transform: none !important;
}

.form-control {
    background: var(--tg-bg-input) !important;
    border: 1px solid var(--tg-border) !important;
    box-shadow: none !important;
}

.form-control:focus {
    border-color: var(--tg-blue) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* User list final touches */
.user-item {
    background: var(--tg-bg-primary) !important;
    border: none !important;
    border-bottom: 1px solid var(--tg-border-light) !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.user-item:hover {
    background: var(--tg-bg-secondary) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Welcome section */
.welcome-section {
    background: var(--tg-bg-secondary) !important;
    border: 1px solid var(--tg-border) !important;
    box-shadow: none !important;
}

.welcome-section::before {
    display: none !important;
}

.welcome-section i {
    animation: none !important;
}

/* Login page */
.login-wrapper {
    background: var(--tg-bg-primary) !important;
}

.login-wrapper::before {
    display: none !important;
}

.login-card {
    background: var(--tg-bg-primary) !important;
    border: 1px solid var(--tg-border) !important;
    box-shadow: var(--tg-shadow-lg) !important;
    backdrop-filter: none !important;
}

/* Alert styling */
.alert {
    border: none !important;
    box-shadow: none !important;
}

.alert::before {
    display: none !important;
}

/* Remove all animations and transitions except basic ones */
* {
    animation: none !important;
    transition: all 0.2s ease !important;
}

/* Keep only essential transitions */
.chat-action-btn,
.user-item,
.nav-link,
.btn,
.emoji-item,
.sticker-item {
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Scrollbar final styling */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: var(--tg-border) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tg-text-muted) !important;
}

/* Mobile specific final adjustments */
@media (max-width: 768px) {
    .chat-container {
        height: calc(100vh - 60px) !important;
    }
    
    .message {
        max-width: 85% !important;
    }
    
    .chat-header {
        padding: 8px 12px !important;
    }
    
    .chat-input-container {
        padding: 6px 8px !important;
    }
}

/* Ensure proper RTL support */
[dir="rtl"] .user-item .user-avatar {
    margin-left: 0 !important;
    margin-right: 12px !important;
}

[dir="rtl"] .message.me {
    margin-left: 12px !important;
    margin-right: auto !important;
}

[dir="rtl"] .message.other {
    margin-left: auto !important;
    margin-right: 12px !important;
}

/* Dark mode final adjustments */
.dark {
    --tg-bg-primary: var(--tg-dark-bg-primary) !important;
    --tg-bg-secondary: var(--tg-dark-bg-secondary) !important;
    --tg-bg-chat: var(--tg-dark-bg-chat) !important;
    --tg-bg-header: var(--tg-dark-bg-header) !important;
    --tg-text-primary: var(--tg-dark-text-primary) !important;
    --tg-text-secondary: var(--tg-dark-text-secondary) !important;
    --tg-border: var(--tg-dark-border) !important;
}

/* Ensure all text uses proper Telegram colors */
h1, h2, h3, h4, h5, h6 {
    color: var(--tg-text-primary) !important;
    font-weight: 500 !important;
}

p {
    color: var(--tg-text-secondary) !important;
}

/* Final cleanup - remove any remaining fancy effects */
.hover-lift:hover {
    transform: none !important;
}

.scale-in,
.fade-in-up,
.slide-in-right {
    animation: none !important;
}

.shadow-glow {
    box-shadow: none !important;
}

.text-gradient {
    background: var(--tg-blue) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Voice message final styling */
.voice-message.playing {
    background: rgba(0, 136, 204, 0.1) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* File message final styling */
.file-message:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Sticker message final styling */
.sticker-message:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Ensure proper spacing and sizing */
.message {
    margin: 4px 12px !important;
}

.message-bubble {
    padding: 8px 12px !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.message.me .message-bubble {
    border-bottom-right-radius: 4px !important;
}

.message.other .message-bubble {
    border-bottom-left-radius: 4px !important;
}

/* Final voice controls styling */
.voice-controls-container {
    background: var(--tg-bg-header) !important;
    border-top: 1px solid var(--tg-border) !important;
}

/* Final picker styling */
.emoji-picker,
.sticker-picker {
    background: var(--tg-bg-primary) !important;
    border: 1px solid var(--tg-border) !important;
    box-shadow: var(--tg-shadow-lg) !important;
    backdrop-filter: none !important;
}