/* ============================================================
   DESIGN POLISH — премиальный слой поверх уже хорошей базы.
   Ничего не ломает и не переопределяет структурно — только
   добавляет глубину (тени), тактильность (нажатия/переходы) и
   более уверенную визуальную иерархию. Подключается последним.
   ============================================================ */

/* ---------- Общие плавные переходы там, где их не хватало ---------- */
.chat-item, .side-menu-item, .bottom-nav-item, .settings-item,
.game-card, .gift-item, button {
    transition: background-color .15s ease, box-shadow .15s ease,
                transform .1s ease, border-color .15s ease;
}

/* ---------- Список чатов: больше глубины и "тактильности" ---------- */
.chat-item {
    box-shadow: 0 1px 2px rgba(20, 24, 34, 0.03);
    border: 1px solid var(--border-subtle, #E7EBF0);
}

.chat-item:hover {
    box-shadow: var(--shadow-md, 0 6px 20px rgba(20,24,34,.08));
    transform: translateY(-1px);
}

.chat-item:active {
    transform: translateY(0) scale(.99);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(20,24,34,.04));
}

/* Тонкое кольцо вокруг аватара — фирменный акцент вместо голого круга */
.chat-avatar {
    box-shadow: 0 0 0 2px var(--bg-surface, #fff), 0 0 0 3.5px rgba(255, 179, 71, 0.35);
}

body.dark-theme .chat-avatar {
    box-shadow: 0 0 0 2px var(--bg-dark-secondary, #1B1E2C), 0 0 0 3.5px rgba(255, 179, 71, 0.3);
}

/* ---------- Сообщения: лёгкая глубина вместо плоских плашек ---------- */
.message {
    box-shadow: 0 1px 3px rgba(20, 24, 34, 0.06);
}

.message.sent {
    box-shadow: 0 2px 8px rgba(255, 179, 71, 0.25);
}

.message-time {
    font-variant-numeric: tabular-nums; /* цифры времени не "прыгают" по ширине */
}

/* ---------- Навбар: отделяем от контента мягкой тенью, а не только рамкой ---------- */
.navbar {
    box-shadow: 0 1px 0 var(--border-subtle, #E7EBF0), 0 4px 16px rgba(20, 24, 34, 0.04);
}

/* ---------- Нижняя навигация: явный индикатор активного пункта ---------- */
.bottom-nav-item {
    position: relative;
    border-radius: 12px;
    margin: 4px 3px;
}

.bottom-nav-item.active {
    background: rgba(255, 179, 71, 0.12);
}

.bottom-nav-item.active i {
    transform: translateY(-1px);
}

.bottom-nav-item:active {
    transform: scale(.94);
}

/* ---------- Кнопки: единая логика нажатия + чуть больше веса у первичных действий ---------- */
.new-chat-btn, .send-btn, .premium-buy-btn, .play-btn.play-btn-game {
    box-shadow: 0 3px 10px rgba(255, 179, 71, 0.35);
}

.new-chat-btn:active, .send-btn:active {
    transform: scale(.95);
    box-shadow: 0 1px 4px rgba(255, 179, 71, 0.3);
}

button:active {
    transform: scale(.97);
}

/* ---------- Поле ввода: чуть более "тактильная" рамка с фокусом ---------- */
.message-input {
    transition: box-shadow .15s ease, border-color .15s ease;
}

.message-input:focus {
    box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.15);
}

/* ---------- Пустые состояния — не просто текст по центру, а мягкий акцент ---------- */
.empty-state {
    animation: emptyStateFadeIn .35s ease;
}

.empty-icon {
    filter: drop-shadow(0 4px 10px rgba(20, 24, 34, 0.08));
}

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

/* ---------- Тонкий, ненавязчивый скроллбар (десктопный PWA/широкие экраны) ---------- */
.messages-container::-webkit-scrollbar,
.chats-list::-webkit-scrollbar,
.side-menu::-webkit-scrollbar {
    width: 6px;
}

.messages-container::-webkit-scrollbar-thumb,
.chats-list::-webkit-scrollbar-thumb,
.side-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
}

body.dark-theme .messages-container::-webkit-scrollbar-thumb,
body.dark-theme .chats-list::-webkit-scrollbar-thumb,
body.dark-theme .side-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* ---------- Боковое меню: разделение секций читается увереннее ---------- */
.side-menu-item {
    border-radius: 10px;
    margin: 1px 8px;
}

.side-menu-item:hover {
    transform: translateX(2px);
}

/* ---------- Карточки настроек/премиума — единая лёгкая тень вместо плоских блоков ---------- */
.settings-section, .premium-feature-card, .game-card, .stat-card {
    box-shadow: 0 1px 3px rgba(20, 24, 34, 0.05);
}

/* ---------- Уважение к reduced-motion — часть пользователей отключает анимации осознанно ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}