/* mobile.css - Modern Mobile App Styling with Fixed Chat & Animations */

/* ==================== БАЗОВЫЕ СТИЛИ ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Только для мобильных устройств */
@media screen and (max-width: 992px) {
    /* ----- RESET & BASE ----- */
    body {
        padding: 0 !important;
        margin: 0 !important;
        background: #f8fafc !important;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    html {
        overflow: hidden !important;
        height: 100% !important;
        position: relative !important;
    }

    #loadingOverlay {
        display: none !important;
    }

    /* ----- APP CONTAINER ----- */
    #mobileApp {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        background: #f8fafc;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        overflow: hidden;
    }

    /* ----- HEADER ----- */
    .mobile-header, #mobileApp > div:first-child {
        height: 60px;
        background: white;
        border-bottom: 1px solid #e5e7eb;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        z-index: 100;
    }

    /* ----- MAIN CONTENT ----- */
    .mobile-content, #mobileContent {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        background: #f8fafc;
        position: relative;
    }

    /* Hide original desktop elements */
    .sidebar, .header {
        display: none !important;
    }

    /* ----- BOTTOM NAVIGATION ----- */
    #bottomNav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(70px + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(229, 231, 235, 0.5);
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding: 0 8px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        z-index: 100;
    }

    .mobile-nav-item, [data-section] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #9ca3af;
        font-size: 12px;
        gap: 4px;
        padding: 8px 4px;
        flex: 1;
        max-width: 80px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        border-radius: 12px;
    }

    .mobile-nav-item.active, [data-section].active {
        color: #4f46e5;
    }

    .mobile-nav-item:active, [data-section]:active {
        transform: scale(0.95);
    }

    /* ----- SIDE MENU (Drawer) ----- */
    .mobile-side-menu {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        display: none;
    }

    .mobile-side-menu.active {
        display: block;
    }

    .mobile-menu-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        animation: fadeIn 0.2s ease;
    }

    .mobile-menu-drawer {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        background: white;
        transform: translateX(-100%);
        animation: slideIn 0.2s ease forwards;
        display: flex;
        flex-direction: column;
        box-shadow: 2px 0 20px rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-header {
        padding: 24px 20px;
        background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        color: white;
    }

    .mobile-menu-header h3 {
        margin: 0 0 4px 0;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .mobile-menu-header p {
        margin: 0;
        font-size: 0.8rem;
        opacity: 0.9;
    }

    .mobile-menu-items {
        flex: 1;
        overflow-y: auto;
        padding: 16px 0;
    }

    .mobile-menu-item {
        display: flex;
        align-items: center;
        padding: 14px 20px;
        color: #1f2937;
        text-decoration: none;
        gap: 16px;
        transition: background 0.2s;
        cursor: pointer;
    }

    .mobile-menu-item:active {
        background-color: #f3f4f6;
    }

    .mobile-menu-item i {
        width: 24px;
        font-size: 1.2rem;
        color: #6b7280;
    }

    .mobile-menu-item span {
        font-size: 1rem;
        font-weight: 500;
    }

    .mobile-menu-footer {
        padding: 20px;
        border-top: 1px solid #e5e7eb;
    }

    .mobile-logout-btn {
        background: #fee2e2;
        color: #dc2626;
        border: none;
        padding: 14px;
        border-radius: 12px;
        font-weight: 600;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .mobile-logout-btn:active {
        background: #fecaca;
        transform: scale(0.98);
    }

    /* ----- MOBILE CARDS ----- */
    .mobile-card {
        background: white;
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.2s ease;
        margin-bottom: 12px;
    }

    .mobile-card:active {
        transform: scale(0.98);
        background-color: #fafafa;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f3f4f6;
    }

    .card-title {
        font-weight: 600;
        font-size: 1rem;
        color: #1f2937;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .card-badge {
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.7rem;
        font-weight: 600;
        background: #f3f4f6;
        color: #374151;
    }

    .card-badge.status-new { background: #dbeafe; color: #1e40af; }
    .card-badge.status-confirmed { background: #d1fae5; color: #065f46; }
    .card-badge.status-paid { background: #e0e7ff; color: #3730a3; }
    .card-badge.status-rejected { background: #fee2e2; color: #991b1b; }
    .card-badge.status-pending { background: #fef3c7; color: #92400e; }

    .card-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .card-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 0.9rem;
    }

    .card-label {
        color: #6b7280;
        font-weight: 500;
    }

    .card-value {
        font-weight: 600;
        color: #1f2937;
        text-align: right;
        max-width: 60%;
        word-break: break-word;
    }

    .card-amount {
        color: #059669;
        font-weight: 700;
    }

    .card-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
        padding-top: 12px;
        border-top: 1px solid #f3f4f6;
    }

    .card-btn {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: #f3f4f6;
        color: #374151;
        transition: all 0.2s;
    }

    .card-btn:active {
        transform: scale(0.97);
        background: #e5e7eb;
    }

    .card-btn.primary { background: #4f46e5; color: white; }
    .card-btn.success { background: #10b981; color: white; }
    .card-btn.danger { background: #ef4444; color: white; }

    /* ----- STATS CARDS ----- */
    .stats-grid-mobile {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 20px;
    }

    .stat-card-mobile {
        background: white;
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .stat-number-mobile {
        font-size: 1.75rem;
        font-weight: 700;
        background: linear-gradient(135deg, #1f2937, #4f46e5);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        margin-bottom: 4px;
    }

    .stat-label-mobile {
        font-size: 0.7rem;
        color: #6b7280;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ==================== ЧАТ (Telegram Style) ==================== */
    
    /* Основной контейнер чата */
    #mobileChatApp {
        display: flex;
        flex-direction: column;
        height: 100%;
        background: #0f172a;
        overflow: hidden;
        position: relative;
    }

    /* Список чатов */
    #mobileChatRoomsList {
        flex: 1;
        overflow-y: auto;
        padding: 12px;
        background: #0f172a;
        -webkit-overflow-scrolling: touch;
    }

    /* Элемент чата в списке */
    .mobile-chat-room {
        background: #1e293b;
        border: none;
        border-radius: 16px;
        padding: 14px;
        margin-bottom: 10px;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        animation: listItemAppear 0.2s ease forwards;
    }

    .mobile-chat-room:active {
        transform: scale(0.98);
        background: #334155;
    }

    .mobile-chat-room.active {
        background: #4f46e5;
    }

    /* Область сообщений */
    #mobileChatMessagesArea {
        display: none;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        background: #0f172a;
        min-height: 0;
    }

    /* Контейнер сообщений с прокруткой */
    #mobileChatMessagesContainer {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 16px;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Сообщения - рабочие классы */
    .mobile-chat-message {
        display: flex;
        margin-bottom: 8px;
        animation: messageAppear 0.2s ease;
    }

    .mobile-chat-message.own {
        justify-content: flex-end;
    }

    .mobile-chat-message.other {
        justify-content: flex-start;
    }

    .mobile-chat-message .message-bubble {
        max-width: 80%;
        padding: 10px 14px;
        border-radius: 20px;
        position: relative;
        word-wrap: break-word;
        font-size: 15px;
        line-height: 1.4;
    }

    .mobile-chat-message.own .message-bubble {
        background: #4f46e5;
        color: white;
        border-bottom-right-radius: 6px;
    }

    .mobile-chat-message.other .message-bubble {
        background: #1e293b;
        color: #f1f5f9;
        border-bottom-left-radius: 6px;
    }

    .message-author {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 4px;
        color: #94a3b8;
    }

    .mobile-chat-message.own .message-author {
        display: none;
    }

    .message-time {
        font-size: 10px;
        margin-top: 6px;
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        opacity: 0.7;
    }

    .mobile-chat-message.other .message-time {
        color: #94a3b8;
    }

    .mobile-chat-message.own .message-time {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Вложения */
    .message-attachment {
        margin-top: 8px;
    }

    .message-attachment img {
        max-width: 200px;
        max-height: 150px;
        border-radius: 12px;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .message-attachment img:active {
        transform: scale(0.98);
    }

    .message-attachment a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        text-decoration: none;
        color: #4f46e5;
        font-size: 13px;
    }

    /* Заголовок чата */
    #mobileChatHeader {
        display: none;
        padding: 12px 16px;
        background: #0f172a;
        border-bottom: 1px solid #334155;
        flex-shrink: 0;
    }

    #mobileCurrentRoomName {
        font-weight: 600;
        font-size: 16px;
        color: #f1f5f9;
    }

    #mobileCurrentRoomInfo {
        font-size: 11px;
        color: #94a3b8;
        margin-top: 2px;
    }

    /* Кнопка назад - рабочая */
    #mobileBackToRooms {
        background: none;
        border: none;
        color: #f1f5f9;
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        transition: background 0.2s;
    }

    #mobileBackToRooms:active {
        background: rgba(255, 255, 255, 0.1);
        animation: backButtonHover 0.1s ease forwards;
    }

    /* Поле ввода - фиксированное внизу */
    #mobileChatMessagesArea > div:last-child {
        flex-shrink: 0;
        background: #0f172a;
        padding: 12px;
        border-top: 1px solid #334155;
    }

    /* Контейнер для поля ввода и кнопок */
    .chat-input-wrapper {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    #mobileChatInput {
        flex: 1;
        padding: 12px 16px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 24px;
        font-size: 16px;
        color: #f1f5f9;
        outline: none;
        transition: border-color 0.2s;
    }

    #mobileChatInput:focus {
        border-color: #4f46e5;
        animation: inputFocus 0.2s ease forwards;
    }

    #mobileChatInput::placeholder {
        color: #94a3b8;
    }

    #mobileSendMessageBtn {
        padding: 12px 20px;
        background: #4f46e5;
        border: none;
        border-radius: 24px;
        cursor: pointer;
        color: white;
        font-weight: 600;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: 70px;
    }

    #mobileSendMessageBtn:active {
        transform: scale(0.95);
        opacity: 0.9;
        animation: sendClick 0.2s ease;
    }

    #mobileSendMessageBtn:disabled {
        opacity: 0.5;
        transform: none;
        cursor: not-allowed;
    }

    #mobileUploadFileBtn {
        padding: 12px;
        background: #1e293b;
        border: 1px solid #334155;
        border-radius: 50%;
        cursor: pointer;
        color: #94a3b8;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    #mobileUploadFileBtn:active {
        transform: scale(0.95);
        background: #334155;
    }

    /* Индикатор набора текста */
    #mobileChatTyping {
        padding: 8px 16px;
        font-size: 12px;
        color: #94a3b8;
        background: #0f172a;
        border-top: 1px solid #334155;
        flex-shrink: 0;
    }

    .typing-dots span {
        display: inline-block;
        animation: typingDots 1.2s infinite;
    }

    .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
    .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

    /* Пустое состояние */
    .chat-empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
    }

    .chat-empty-state i {
        font-size: 48px;
        margin-bottom: 16px;
        color: #475569;
    }

    /* Счетчик непрочитанных */
    #unreadBadge-chat {
        position: absolute;
        top: -6px;
        right: -10px;
        background: #ef4444;
        color: white;
        border-radius: 20px;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: bold;
        min-width: 18px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        animation: badgePop 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .counter-update {
        animation: counterUpdate 0.3s ease;
    }

    .mobile-chat-room.new-message {
        animation: newMessagePulse 0.5s ease-in-out;
    }

    .mobile-chat-message.highlight {
        animation: newMessageHighlight 0.5s ease;
    }

    /* Скроллбар */
    #mobileChatMessagesContainer::-webkit-scrollbar,
    #mobileChatRoomsList::-webkit-scrollbar,
    #mobileContent::-webkit-scrollbar {
        width: 4px;
    }

    #mobileChatMessagesContainer::-webkit-scrollbar-track,
    #mobileChatRoomsList::-webkit-scrollbar-track,
    #mobileContent::-webkit-scrollbar-track {
        background: #1e293b;
    }

    #mobileChatMessagesContainer::-webkit-scrollbar-thumb,
    #mobileChatRoomsList::-webkit-scrollbar-thumb,
    #mobileContent::-webkit-scrollbar-thumb {
        background: #475569;
        border-radius: 4px;
    }

    #mobileChatMessagesContainer::-webkit-scrollbar-thumb:hover,
    #mobileChatRoomsList::-webkit-scrollbar-thumb:hover,
    #mobileContent::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }

    /* ==================== АНИМАЦИИ ==================== */
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes slideIn {
        to { transform: translateX(0); }
    }

    @keyframes slideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    @keyframes messageAppear {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

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

    @keyframes newMessagePulse {
        0% {
            background-color: #1e293b;
            transform: scale(1);
        }
        50% {
            background-color: #4f46e5;
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
        }
        100% {
            background-color: #1e293b;
            transform: scale(1);
        }
    }

    @keyframes badgePop {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes counterUpdate {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
            background: #ef4444;
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes typingDots {
        0%, 60%, 100% {
            transform: translateY(0);
        }
        30% {
            transform: translateY(-4px);
        }
    }

    @keyframes sendClick {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(0.9);
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes backButtonHover {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-3px);
        }
    }

    @keyframes inputFocus {
        from {
            border-color: #334155;
            transform: scale(1);
        }
        to {
            border-color: #4f46e5;
            transform: scale(1.02);
        }
    }

    @keyframes newMessageHighlight {
        0% {
            background: rgba(79, 70, 229, 0.3);
        }
        100% {
            background: transparent;
        }
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .fa-spinner, .spinner {
        animation: spin 1s linear infinite;
    }

    /* ----- BOTTOM SHEET MODAL ----- */
    .mobile-bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-radius: 24px 24px 0 0;
        padding: 20px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
        z-index: 20000;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
        display: none;
    }

    .mobile-bottom-sheet.active {
        transform: translateY(0);
        display: block;
    }

    .sheet-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
    }

    .sheet-handle {
        width: 40px;
        height: 4px;
        background: #e5e7eb;
        border-radius: 2px;
        margin-bottom: 16px;
    }

    .sheet-title {
        font-weight: 600;
        font-size: 1.2rem;
        color: #1f2937;
    }

    .sheet-actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
    }

    .sheet-btn {
        flex: 1;
        padding: 14px;
        border: none;
        border-radius: 14px;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .sheet-btn:active {
        transform: scale(0.98);
    }

    .sheet-btn.primary { background: #4f46e5; color: white; }
    .sheet-btn.success { background: #10b981; color: white; }
    .sheet-btn.danger { background: #ef4444; color: white; }
    .sheet-btn.secondary { background: #f3f4f6; color: #374151; }

    /* Клавиатура фиксы */
    body.keyboard-open #mobileChatApp {
        position: relative;
        height: 100%;
    }

    body.keyboard-open #mobileChatMessagesContainer {
        flex: 1;
        overflow-y: auto;
    }

    body.chat-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    input, textarea, select {
        font-size: 16px !important;
    }

    input[type="text"],
    input[type="number"],
    input[type="tel"],
    input[type="email"],
    textarea {
        -webkit-appearance: none;
        appearance: none;
    }

    /* PWA и Safe Area */
    @media (display-mode: standalone) {
        #mobileApp {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
        }

        #bottomNav {
            padding-bottom: env(safe-area-inset-bottom);
        }

        .mobile-content, #mobileContent {
            padding-bottom: calc(70px + env(safe-area-inset-bottom));
        }

        #mobileChatMessagesArea {
            padding-bottom: env(safe-area-inset-bottom);
        }
    }

    /* Фикс для форм */
    body:has(.form-card),
    body:has(.form-container) {
        overflow: auto !important;
        position: static !important;
        height: auto !important;
        min-height: 100vh !important;
    }

    .form-container {
        padding: 10px;
        align-items: flex-start;
    }

    .form-card {
        max-height: none;
        margin: 10px 0;
    }
}

/* ==================== ДЕСКТОП (скрываем мобильные элементы) ==================== */
@media screen and (min-width: 993px) {
    html, body {
        overflow: auto !important;
        position: static !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    .mobile-header,
    .mobile-bottom-nav,
    .mobile-side-menu,
    #mobileApp,
    .mobile-content,
    .mobile-cards,
    .mobile-bottom-sheet {
        display: none !important;
    }
}