/* ==========================================
   ПЕРЕМЕННЫЕ ТЕМ
   ========================================== */

/* 1. Светлая тема (по умолчанию) */
:root {
    --bg-main: #f0f2f5;
    --bg-panel: #ffffff;
    --bg-header: #f8f9fa;
    --bg-chat-area: #e5ddd5;
    --bg-input-area: #f0f0f0;

    --text-main: #222222;
    --text-secondary: #666666;
    --text-muted: #8a949b;

    --border-color: #ebedef;

    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --primary-text: #ffffff;

    --msg-mine-bg: #007bff;
    --msg-mine-text: #ffffff;
    --msg-other-bg: #e9ecef;
    --msg-other-text: #000000;

    --item-hover: #f4f5f7;
    --item-active: #e9ecef;
}

/* 2. Темная тема */
[data-theme="dark"] {
    --bg-main: #111111;
    --bg-panel: #222222;
    --bg-header: #1a1a1a;
    --bg-chat-area: #0f0f0f;
    --bg-input-area: #1a1a1a;

    --text-main: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #aaaaaa;

    --border-color: #333333;

    --primary-color: #3390ec;
    --primary-hover: #2a7bc4;
    --primary-text: #ffffff;

    --msg-mine-bg: #3390ec;
    --msg-mine-text: #ffffff;
    --msg-other-bg: #333333;
    --msg-other-text: #ffffff;

    --item-hover: #2a2a2a;
    --item-active: #333333;
}

/* 3. Тёма Бакинский (Радужный фон чата) */
[data-theme="bakinsky"] {
    --bg-chat-area: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    /* Анимируем градиент для крутизны */
    background-size: 400% 400%;
    animation: rainbow 15s ease infinite;
}

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body { background-color: var(--bg-main); height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--text-main); }

/* Стили специально для body в чате, чтобы не ломать логин/регистрацию */
body.chat-body { background: var(--bg-main); margin: 0; display: flex; height: 100vh; overflow: hidden; align-items: stretch; justify-content: flex-start; }

/* ЭКРАН ВХОДА */
#auth-screen { background: var(--bg-panel); padding: 40px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); width: 360px; display: flex; flex-direction: column; gap: 15px; transition: all 0.3s ease; }
#auth-screen h2 { text-align: center; color: var(--text-main); margin-bottom: 10px; font-weight: 700; }
.input-field { padding: 14px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 15px; outline: none; transition: border 0.3s, box-shadow 0.3s; background: var(--bg-main); color: var(--text-main); }
.input-field:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(51, 144, 236, 0.1); background: var(--bg-panel); }
.btn { padding: 14px; border: none; border-radius: 10px; font-size: 15px; font-weight: 600; color: white; cursor: pointer; transition: transform 0.1s, background 0.2s; }
.btn:active { transform: scale(0.98); }
.btn-blue { background: var(--primary-color); } .btn-blue:hover { background: var(--primary-hover); }
.btn-green { background: #2ea664; } .btn-green:hover { background: #248550; }
.error { color: #e53935; font-size: 13px; text-align: center; min-height: 20px; font-weight: 500; }

/* ГЛАВНЫЙ ЭКРАН */
#app-screen { display: flex; width: 100%; height: 100%; background: var(--bg-panel); overflow: hidden; flex-direction: row; }

/* ЛЕВАЯ ПАНЕЛЬ */
.sidebar { width: 320px; background: var(--bg-panel); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; transition: transform 0.3s ease; z-index: 10; }
.sidebar-header { padding: 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background: var(--bg-header); }
.profile-info { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 18px; text-transform: uppercase; flex-shrink: 0; }
.user-info { font-weight: 600; color: var(--text-main); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.status { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.logout-btn { background: none; border: none; color: #e53935; cursor: pointer; font-size: 14px; font-weight: 600; padding: 6px 10px; border-radius: 6px; transition: background 0.2s; }
.logout-btn:hover { background: #ffebee; }
.sidebar-btn { margin: 10px; font-size: 12px; }

/* СПИСОК ЧАТОВ */
.chat-list { flex: 1; overflow-y: auto; }
.chat-item { padding: 10px 20px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: background 0.2s, border-radius 0.2s; border-bottom: 1px solid transparent; }
.chat-item:hover { background: var(--item-hover); }
.chat-item.active-chat { background-color: var(--item-active); border-radius: 10px; margin: 0 5px; }

/* Если чатов нет */
.empty-chat-list { padding: 20px; color: var(--text-muted); text-align: center; font-size: 13px; }

/* Элементы внутри чата (сайдбар) */
.chat-item-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--primary-color); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; flex-shrink: 0; }
.chat-item-details { flex: 1; overflow: hidden; }
.chat-item-name { font-weight: 600; color: var(--text-main); margin-bottom: 4px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-preview { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Значок непрочитанных */
.unread-badge { background: #dc3545; color: white; border-radius: 10px; padding: 2px 7px; font-size: 11px; font-weight: bold; margin-left: auto; flex-shrink: 0; }


/* ПРАВАЯ ПАНЕЛЬ */
.chat-main-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-panel); height: 100%; min-width: 0; position: relative; }
.chat-main-header { flex-shrink: 0; padding: 15px 20px; border-bottom: 1px solid var(--border-color); background: var(--bg-header); display: flex; align-items: center; }
.chat-main-header h3 { margin: 0; color: var(--text-main); font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* Кнопка "Назад" для мобилок */
.back-btn { display: none; background: none; border: none; font-size: 24px; color: var(--primary-color); cursor: pointer; padding: 0 15px 0 0; margin-right: 10px; }

/* ОКНО СООБЩЕНИЙ */
.chat-messages-area { flex: 1; padding: 20px; overflow-y: auto; background: var(--bg-chat-area); display: flex; flex-direction: column; }
.empty-chat-placeholder-container { text-align: center; margin-top: 50px; }
.empty-chat-placeholder { color: var(--text-secondary); background: var(--bg-panel); padding: 5px 10px; border-radius: 10px; display: inline-block; font-size: 14px; opacity: 0.9;}
.chat-loading-msg { text-align: center; color: var(--text-muted); margin-top: 20px; font-size: 14px; }
.chat-error-msg { color: red; text-align: center; margin-top: 20px; padding: 20px; font-size: 14px; }

/* СООБЩЕНИЯ */
.msg-wrapper { margin: 5px 0; display: flex; flex-direction: column; }
.msg-wrapper-mine { align-items: flex-end; }
.msg-wrapper-other { align-items: flex-start; }

.msg-bubble { display: inline-block; padding: 8px 12px; border-radius: 15px; max-width: 85%; text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,0.1); min-width: 60px; word-break: break-word; overflow: hidden; font-size: 14px; }
.msg-bubble-mine { background: var(--msg-mine-bg); color: var(--msg-mine-text); border-bottom-right-radius: 4px; }
.msg-bubble-other { background: var(--msg-other-bg); color: var(--msg-other-text); border-bottom-left-radius: 4px; }

.msg-author { font-size: 11px; margin-bottom: 3px; opacity: 0.8; font-weight: bold; }
.msg-content { word-break: break-word; overflow: hidden; line-height: 1.4; white-space: pre-wrap; }
.msg-checkmark { font-size: 12px; margin-left: 8px; color: #a9d0f5; float: right; margin-top: 2px; }

/* ПАНЕЛЬ ВВОДА */
.chat-input-area { flex-shrink: 0; padding: 10px 15px; background: var(--bg-input-area); border-top: 1px solid var(--border-color); align-items: flex-end; gap: 10px; display: flex; }
.chat-input-field { flex: 1; padding: 10px 15px; border: 1px solid var(--border-color); border-radius: 20px; font-size: 14px; outline: none; background: var(--bg-panel); color: var(--text-main); transition: border-color 0.2s; min-width: 0; resize: none; overflow-y: hidden; min-height: 40px; max-height: 100px; line-height: 20px; font-family: inherit; }
.chat-input-field:focus { border-color: var(--primary-color); }
.chat-send-btn { padding: 10px 15px; background: var(--primary-color); color: white; border: none; border-radius: 20px; cursor: pointer; font-weight: 600; transition: background 0.2s; white-space: nowrap; font-size: 14px; height: 40px; }
.chat-send-btn:hover { background: var(--primary-hover); }

/* МОДАЛЬНОЕ ОКНО QR */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 100; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-content { background: var(--bg-panel); padding: 20px; border-radius: 15px; text-align: center; max-width: 350px; width: 90%; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.modal-title { margin-bottom: 15px; color: var(--text-main); font-size: 18px; }
.qr-container { margin-bottom: 15px; display: flex; justify-content: center; padding: 10px; background: white; border-radius: 10px; } /* Белый фон под QR нужен всегда, иначе сканер не прочтет на темной теме */
.qr-container img { max-width: 100%; height: auto; }
.qr-token-block { margin-bottom: 15px; background: var(--bg-main); padding: 10px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qr-token-text { font-family: monospace; font-size: 13px; color: var(--text-main); cursor: pointer; word-break: break-all; text-align: left; }
.qr-copy-btn { padding: 6px 12px; background: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 12px; white-space: nowrap; transition: background 0.2s; }
.qr-copy-btn:hover { background: #218838; }
.qr-copy-btn.copied { background: #20c997; }
.modal-subtext { font-size: 12px; color: var(--text-secondary); margin-bottom: 15px; }
.modal-close-btn { padding: 10px 20px; background: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; width: 100%; font-weight: 600; transition: background 0.2s; }
.modal-close-btn:hover { background: var(--primary-hover); }

/* ТОСТЫ (ВСПЛЫВАЮЩИЕ УВЕДОМЛЕНИЯ) */
.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }
.toast { padding: 12px 20px; border-radius: 8px; color: white; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s; pointer-events: none; max-width: 300px; word-break: break-word; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background-color: #28a745; }
.toast.error { background-color: #dc3545; }
.toast.info { background-color: var(--primary-color); }

/* ==========================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   ========================================== */

@media (max-width: 768px) {
    /* Контейнер приложения занимает весь экран на мобилках */
    #app-screen {
        margin: 0;
        border-radius: 0;
        width: 100vw;
        height: 100vh;
        /* Важно для iOS Safari, чтобы не обрезало снизу из-за панели адреса */
        /* Используем -webkit-fill-available как фолбэк для старых iOS и dvh для новых */
        height: 100dvh;
        height: -webkit-fill-available;
    }

    /* Левая панель (список чатов) занимает 100% ширины по умолчанию */
    .sidebar {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 10;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Правая панель (сам чат) всегда под левой панелью, занимает 100% */
    .chat-main-area {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 5;
    }

    /* Когда открыт чат, левая панель уезжает влево за пределы экрана */
    body.chat-active .sidebar {
        transform: translateX(-100%);
    }

    /* Показываем кнопку "Назад" в мобильной версии */
    .back-btn {
        display: block;
        padding-top: 5px; /* Немного опускаем стрелку, чтобы не была под челкой iPhone */
    }

    /* Уменьшаем отступы и размеры шрифтов для компактности */
    /* Используем env(safe-area-inset-top) только там, где нужно, чтобы контент не уезжал под строку состояния (челку) */
    .sidebar-header { padding: 15px; padding-top: max(15px, env(safe-area-inset-top)); }
    .avatar { width: 36px; height: 36px; font-size: 16px; }
    .chat-item { padding: 10px 15px; }
    .chat-item-avatar { width: 40px; height: 40px; font-size: 16px; }

    .chat-main-header { padding: 12px 15px; padding-top: max(12px, env(safe-area-inset-top)); }
    .chat-main-header h3 { font-size: 15px; padding-top: 5px; }

    /* Сообщения не должны перекрываться челкой или клавиатурой, убираем env отсюда, пусть сам скролл разбирается */
    .chat-messages-area { padding: 15px 10px; }
    .msg-bubble { max-width: 90%; }

    /* Отступ для нижней панели iOS (чтобы не перекрывалась полоской "Домой") */
    .chat-input-area { padding: 8px 10px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .chat-input-field { padding: 10px 15px; font-size: 16px; /* 16px важно для iOS, чтобы не было автозума */ }
    .chat-send-btn { padding: 10px 15px; }

    /* Позиционирование тостов на мобилках */
    .toast-container {
        bottom: 80px; /* Выше клавиатуры и поля ввода */
        right: 10px;
        left: 10px;
        align-items: center;
    }
    .toast {
        width: auto;
        max-width: none;
        text-align: center;
    }
}