/* Визуальные улучшения мобильного кабинета (задача №107769).
   Аккуратные, аддитивные правки поверх MDB — не ломают существующую вёрстку. */

/* ---- Подсказки при наведении ---- */
[title] { cursor: help; }
input[title], textarea[title], select[title] { cursor: text; }

/* Видимые подсказки под полями */
.hint-block, .form-text {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.35;
}

/* ---- Поля ввода: мягкий фокус ---- */
.form-control:focus,
.form-outline .form-control:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
    border-radius: 8px;
}

/* ---- Кнопки: чуть мягче и приятнее нажатие ---- */
.btn {
    border-radius: 10px;
    transition: transform .06s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { box-shadow: 0 4px 12px rgba(37, 99, 235, .22); }

/* ---- Карточки-разделы ---- */
.auth section {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 16px 14px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

/* ==================================================================
   Сгруппированные действия в карточке отзыва («⋮ Действия»)
   ================================================================== */
.card-actions { position: relative; display: inline-block; }
.card-actions > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.card-actions > summary::-webkit-details-marker { display: none; }
.card-actions > summary::marker { content: ''; }

.card-actions-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.card-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #111827;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}
.card-action:hover { background: #f3f4f6; text-decoration: none; }
.card-action.disabled { opacity: .45; pointer-events: none; }
.card-action i { width: 18px; text-align: center; }

@media (prefers-color-scheme: dark) {
    .card-actions-menu { background: #111827; border-color: #1f2937; }
    .card-action { color: #e5e7eb; }
    .card-action:hover { background: #1f2937; }
}

/* ==================================================================
   ЧАТ
   ================================================================== */
.chats .chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 8px 8px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.chats-messages-item { list-style: none; display: flex; }

.chat-message {
    max-width: 82%;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    border: 1px solid #eceef1;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    position: relative;
    animation: chatIn .18s ease;
}
@keyframes chatIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chat-message .info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.chat-message .sender { font-size: 13px; color: #2563eb; }
.chat-message .date { font-size: 11px; font-weight: 400; }
.chat-message .content { font-size: 14px; line-height: 1.4; word-break: break-word; }
.chat-message .content p { margin: 0; }

/* Моё сообщение — справа, в цвете */
.chats-messages-item:has(.chat-message.my) { justify-content: flex-end; }
.chat-message.my {
    margin-left: auto;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
}
.chat-message.my .sender { color: #1d4ed8; }

/* Непрочитанное — мягкая подсветка */
.chat-message.new {
    background: #fffdf3;
    border-color: #fde68a;
}

/* Отправляется (оптимистичный пузырь) */
.chat-message.pending { opacity: .65; }
.chat-message.pending .content::after {
    content: ' · отправляется…';
    font-size: 11px;
    color: #9ca3af;
}

/* Ошибка отправки */
.chat-message.failed {
    border-color: #fca5a5;
    background: #fef2f2;
}
.chat-message.failed .content::after {
    content: ' · не отправлено';
    font-size: 11px;
    color: #dc2626;
}

/* Поле ввода сообщения */
.chat-form { margin-top: 10px; }
.chat-form textarea {
    border-radius: 14px !important;
    resize: none;
    min-height: 46px;
    padding: 12px 14px;
}

/* Тёмная тема (Telegram) */
@media (prefers-color-scheme: dark) {
    .auth section { background: #0f172a; border-color: #1e293b; }
    .chat-message { background: #111827; border-color: #1f2937; color: #e5e7eb; }
    .chat-message .content { color: #e5e7eb; }
    .chat-message.my { background: linear-gradient(135deg, #1e3a8a, #1d4ed8); border-color: #1d4ed8; }
    .chat-message.new { background: #422006; border-color: #a16207; }
}

/* ==================================================================
   Улучшения по итогам UX-ревью
   ================================================================== */

/* Тач-таргеты кнопок в карточках (минимум 40px на телефоне) */
@media (max-width: 640px) {
    .card .card-toolbar > *,
    .card-actions > summary {
        min-width: 40px;
        min-height: 40px;
    }
    .card .card-toolbar .btn-floating i,
    .card-actions > summary i { font-size: 1rem; }
}

/* Счётчик новых сообщений — читаемее */
.chats .order-chat-card .chat-title .news-counter,
.chat-title .news-counter {
    font-size: .68rem !important;
    min-width: 1.15rem;
    height: 1.15rem;
    line-height: 1.15rem;
}

/* Единая заглушка «нет данных» */
.empty-state { color: #9ca3af; padding: 8px 0; }
.empty-state i { opacity: .6; }

/* Поле ввода чата + кнопка «Отправить» */
.chat-input-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.chat-input-row textarea {
    flex: 1;
    min-height: 46px;
    max-height: 140px;
    border-radius: 14px !important;
    resize: none;
    padding: 12px 14px;
}
.chat-send {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .28);
}

/* Задача №312: прикрепление фото/скриншота в мобильном чате. */
#chatAttachBtn {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-attach-hint {
    font-size: 11.5px;
    line-height: 1.4;
    margin: 0 0 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.chat-attach-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    background: #f5f7ff;
    border-radius: 10px;
    padding: 6px 10px;
    margin: 0 0 6px;
}
.chat-attach-preview #chatAttachName {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-attach-error {
    font-size: 12px;
    margin: 0 0 6px;
}

@media (prefers-color-scheme: dark) {
    .chat-attach-preview { background: #111827; }
}

/* Фикс конфликта раскладки пузырей чата (перекрываем .chats .chat-message из темы) */
.chats .chat-message { width: auto; max-width: 82%; margin-left: 0; }
.chats .chat-message.my { margin-left: auto; }

/* Предпросмотр выбранного скриншота */
.screen-preview {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    margin: 10px auto 0;
}

/* ==================================================================
   Навигация: шапка, левая шторка-меню, плавающая кнопка чата
   ================================================================== */
.app-navbar {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 6px;
    gap: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .14);
    /* Задача №78149: при инерционной прокрутке в мобильном WebView (Telegram/MAX,
       Android) фиксированная шапка на миг «мигала» белым, будто прокручиваемый
       текст перекрывает её сверху — типичный баг рендеринга position:fixed без
       собственного композитного слоя. Принудительно выносим шапку на GPU-слой. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}
/* Кнопка в шапке — аккуратный круглый тач-таргет */
.app-nav-btn {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: transparent; cursor: pointer;
    color: #fff; font-size: 20px;
    border-radius: 50%;
    position: relative;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
}
.app-nav-btn:hover, .app-nav-btn:focus { color: #fff; }
.app-nav-btn:active { background: rgba(255, 255, 255, .18); }
.app-nav-right { margin-left: auto; }
/* Название раздела — по центру, крупно, с многоточием */
.app-nav-title {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: .1px;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Отступ контента под фиксированную шапку (высота 56px) — заголовок раздела
   больше не прячется. Используем «~» (не «+»), т.к. между header и main теперь
   есть шторка/чат/помощник, и смежный селектор не срабатывает. */
header ~ main { margin-top: 56px; }

/* Бейдж уведомлений — компактный, в углу колокольчика */
.app-nav-btn .badge-notification {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    font-size: 10px; line-height: 16px;
    border: 1.5px solid #2563eb;
}

/* Пункт меню-шторки, оформленный как кнопка (для «Обучение по разделу») */
button.app-drawer-item {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ==================================================================
   ЕДИНЫЙ ПРЕМИАЛЬНЫЙ СТИЛЬ КАРТОЧЕК И ПОЛЕЙ (профиль/оплаты/заказ)
   ================================================================== */

/* --- Заголовок раздела в контенте (если показан) --- */
main .container > .payments > h1,
main .container > .order > h1,
main .container .reviews > h1 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 14px;
}

/* --- Базовая премиальная карточка --- */
.review-card.card,
.payment-card.card,
.order-info-card.card,
.auth section {
    background: #fff;
    border: 1px solid #eceff4;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .12);
    overflow: hidden;
}
.review-card.card .card-body,
.payment-card.card .card-body,
.order-info-card.card .card-body {
    padding: 14px 16px;
}
.list-item { margin-bottom: 12px; }

/* Кликабельная карточка (проваливание в детали) — лёгкий подъём */
a.card-link { display: block; text-decoration: none; color: inherit; }
a.card-link:hover, a.card-link:active { text-decoration: none; color: inherit; }
a.card-link .card { transition: transform .12s ease, box-shadow .2s ease; }
a.card-link:active .card { transform: translateY(1px); }
a.card-link:hover .card,
a.card-link:focus .card {
    border-color: #d8dee9;
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 30px -12px rgba(37, 99, 235, .28);
}

/* --- Спец-лист «ярлык → значение» --- */
.card .card-details,
.card-details {
    display: flex !important;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}
.card-details .detail {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-top: 1px solid #f2f4f7;
}
.card-details .detail:first-child { border-top: 0; }
.card-details .detail-label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600 !important;
    color: #98a2b3;
    letter-spacing: .2px;
}
.card-details .detail-value {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #101828;
    word-break: break-word;
}
.card-details .detail-value a { color: #2563eb; font-weight: 600; }
.card-details .review-address .detail-value { text-align: right; }

/* --- Шапка карточки: id заказа/отзыва, клиент --- */
.review-id {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #2563eb;
    background: #eff4ff;
    border-radius: 999px;
    padding: 3px 10px;
    align-self: flex-start;
}
.review-id a { color: #2563eb; text-decoration: none; }
.review-client {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 8px 0 2px;
}

/* --- Текст отзыва --- */
.review-content {
    display: block;
    font-size: 14.5px;
    line-height: 1.5;
    color: #344054;
    margin: 8px 0 2px;
    white-space: pre-line;
}
.review-content-copy {
    background: #f8fafc;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 10px 12px;
}
.review-content-copy:hover { background: #f1f5fb; }

/* --- Карточка «состав заказа» --- */
.order-info-card .order-info-area {
    font-size: 15px; font-weight: 700; color: #0f172a;
}
.order-info-card .order-info-address {
    font-size: 13px; color: #667085; margin-top: 2px;
}

/* --- Профиль: секции-карточки --- */
.auth section { padding: 18px 16px 8px; margin-bottom: 16px; }
.auth section > h2 {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-start !important;
    font-size: 15px !important; font-weight: 700; color: #0f172a;
    padding-bottom: 12px; margin-bottom: 12px !important;
    border-bottom: 1px solid #f2f4f7;
    text-align: left !important;
}
.auth section > h2::before {
    content: '';
    width: 4px; height: 18px; border-radius: 3px;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    flex: 0 0 auto;
}
/* Профиль: премиальная кнопка «Сохранить» */
.auth button[type="submit"],
.auth .btn-primary.btn-block {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 15px 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    box-shadow: 0 12px 24px -10px rgba(37, 99, 235, .65);
    margin-top: 6px;
    transition: transform .06s ease, box-shadow .2s ease;
}
.auth button[type="submit"]:hover,
.auth .btn-primary.btn-block:hover { color: #fff; box-shadow: 0 16px 30px -10px rgba(37, 99, 235, .7); }
.auth button[type="submit"]:active { transform: translateY(1px); }

/* Профиль: чекбокс «Показать пароль» — аккуратнее */
.auth .form-check { padding-left: 0; display: flex; align-items: center; gap: 8px; }
.auth .form-check .form-check-input { margin: 0; float: none; }
.auth .form-check .form-check-label { margin: 0; color: #475467; font-size: 14px; }

/* --- Итоговые бейджи (оплаты/мои отзывы) --- */
.payments .badge, .reviews-my .badge {
    font-size: 13px; padding: 6px 10px; border-radius: 999px; font-weight: 600;
}

/* --- Заказ: премиальная шапка --- */
.order-hero {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-radius: 16px;
    padding: 18px 18px 20px;
    color: #fff;
    box-shadow: 0 10px 26px -10px rgba(37, 99, 235, .55);
    margin-bottom: 16px;
}
.order-hero .review-id { background: rgba(255, 255, 255, .18); color: #fff; }
.order-hero-title {
    font-size: 22px; font-weight: 800; line-height: 1.2;
    margin: 10px 0 4px; color: #fff;
}
.order-hero-city { font-size: 14px; opacity: .92; }
.order-hero-city i { margin-right: 4px; opacity: .9; }

/* --- Заказ: аккордеон-секции чуть аккуратнее --- */
.order .accordion .accordion-item {
    border: 1px solid #eceff4; border-radius: 14px !important; overflow: hidden; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.order .accordion .accordion-button { font-weight: 700; color: #0f172a; }

/* --- История оплат: строка даты + «Подробнее» --- */
.payment-date-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.payment-date { font-size: 15px; font-weight: 700; color: #0f172a; }
.payment-date i { color: #2563eb; margin-right: 2px; }
.payment-more { font-size: 12px; font-weight: 600; color: #2563eb; white-space: nowrap; }
.payment-more i { font-size: 10px; }

/* --- Детализация оплаты --- */
.payment-detail .pd-summary {
    font-size: 14px; color: #475467; margin-bottom: 14px;
}
.pd-screen { margin-top: 12px; }
.pd-screen-label {
    display: block; font-size: 12px; font-weight: 600; color: #98a2b3; margin-bottom: 6px;
}
.pd-screen-label i { color: #2563eb; }
.pd-screen-img {
    display: block; width: 100%; max-height: 320px; object-fit: cover;
    border-radius: 12px; border: 1px solid #eceff4;
}

/* ==================================================================
   Уведомления
   ================================================================== */
.notifications .notification-card.card {
    display: block;
    border: 1px solid #eceff4;
    border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -14px rgba(16, 24, 40, .12);
    text-decoration: none;
    overflow: hidden;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.notifications .notification-card.card:active { transform: translateY(1px); }
.notifications .notification-card.card:hover { border-color: #d8dee9; box-shadow: 0 2px 6px rgba(16,24,40,.06), 0 16px 32px -16px rgba(37,99,235,.3); }
.notifications .notification-card .card-body { padding: 12px 14px; }

/* Непрочитанное — акцентная полоса слева + мягкий фон */
.notifications .notification-card.is-unread {
    border-left: 3px solid #2563eb;
    background: linear-gradient(90deg, rgba(37,99,235,.045), rgba(37,99,235,0) 60%);
}
.notifications .notification-card.is-unread .notification-text { font-weight: 600; color: #0f172a; }

.notif-row { display: flex; align-items: flex-start; gap: 12px; }
.notif-icon {
    flex: 0 0 auto;
    width: 38px; height: 38px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.notif-icon.notif-primary { background: #eff4ff; color: #2563eb; }
.notif-icon.notif-success { background: #e7f7ee; color: #16a34a; }
.notif-icon.notif-danger  { background: #fdecec; color: #dc2626; }
.notif-icon.notif-money   { background: #fff4e5; color: #ea580c; }

.notif-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.notifications .notification-text { font-size: 14px; line-height: 1.4; color: #344054; }
.notifications .notification-comment {
    display: block; font-size: 13px; color: #667085;
    background: #f8fafc; border: 1px solid #eef2f6; border-radius: 10px; padding: 6px 10px;
}
.notifications .notification-comment i { color: #98a2b3; margin-right: 3px; font-size: 10px; }
.notifications .notification-date { font-size: 11.5px; color: #98a2b3; }
.notifications .notification-date i { margin-right: 3px; }

.notif-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; margin-top: 6px; }

@media (prefers-color-scheme: dark) {
    .notifications .notification-card.card { background: #0f172a; border-color: #1e293b; }
    .notifications .notification-card.is-unread .notification-text { color: #e5e7eb; }
    .notifications .notification-text { color: #cbd5e1; }
    .notifications .notification-comment { background: #0b1220; border-color: #1e293b; color: #94a3b8; }
}

/* ==================================================================
   Чаты — премиальный список (одна колонка, как в мессенджере)
   ================================================================== */
.chats h1 { font-size: 22px; font-weight: 700; color: #0f172a; margin-bottom: 12px; }

.chats-filter { margin-bottom: 6px; }
.chats-filter .input-group { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); border-radius: 12px; }
.chats-filter .form-control {
    border: 1px solid #e5e7eb; border-right: 0; border-radius: 12px 0 0 12px; padding: 11px 14px; font-size: 14px;
}
.chats-filter .input-group-text {
    background: #fff; border: 1px solid #e5e7eb; border-left: 0; border-radius: 0 12px 12px 0; color: #98a2b3;
}

/* Одна колонка */
.chats .list { grid-template-columns: 1fr !important; gap: 10px; }

.chats .chat-card.card {
    border: 1px solid #eceff4; border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px -14px rgba(16, 24, 40, .12);
    text-decoration: none; overflow: hidden;
    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.chats .chat-card.card:hover { border-color: #d8dee9; box-shadow: 0 2px 6px rgba(16, 24, 40, .06), 0 16px 30px -16px rgba(37, 99, 235, .28); }
.chats .chat-card.card:active { transform: translateY(1px); }
.chats .chat-card .card-body {
    display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px;
}

.chat-ava {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eff4ff; color: #2563eb; font-size: 17px; font-weight: 700;
}
.chat-ava-general { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }

.chat-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chats .chat-title {
    font-size: 15px; font-weight: 600; color: #0f172a; display: block;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chats .order-client {
    font-size: 12.5px; color: #667085;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Счётчик непрочитанного — справа, не перекрывает заголовок */
.chats .news-counter {
    position: static !important; flex: 0 0 auto;
    min-width: 20px; height: 20px; padding: 0 6px;
    background: #ef4444; color: #fff; border-radius: 999px;
    font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    top: auto; right: auto;
}
.chats .news-counter.d-none { display: none !important; }
.chat-chevron { flex: 0 0 auto; color: #cbd5e1; font-size: 13px; }

/* Заголовок группы («Ответственные») */
.chats h2 {
    font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: #98a2b3 !important; text-align: left !important; margin: 20px 2px 8px !important;
}

@media (prefers-color-scheme: dark) {
    .chats h1 { color: #e5e7eb; }
    .chats .chat-card.card { background: #0f172a; border-color: #1e293b; }
    .chats .chat-title { color: #e5e7eb; }
    .chats-filter .form-control, .chats-filter .input-group-text { background: #0f172a; border-color: #1e293b; color: #e5e7eb; }
    .chat-ava { background: #172554; }
}

@media (prefers-color-scheme: dark) {
    .payment-date { color: #e5e7eb; }
    .pd-screen-img { border-color: #1e293b; }
    .review-card.card, .payment-card.card, .order-info-card.card, .auth section {
        background: #0f172a; border-color: #1e293b;
    }
    .card-details .detail { border-top-color: #1e293b; }
    .card-details .detail-value, .review-client, .order-info-card .order-info-area { color: #e5e7eb; }
    .review-content { color: #cbd5e1; }
    .review-content-copy { background: #0b1220; border-color: #1e293b; }
    .auth section > h2 { color: #e5e7eb; border-bottom-color: #1e293b; }
    .review-id { background: #172554; }
}

/* Левая шторка */
.app-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 82%;
    max-width: 320px;
    background: #fff;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.app-drawer.open { transform: translateX(0); }

.app-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s;
}
.app-drawer-backdrop.show { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }

.app-drawer-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}
.app-drawer-avatar {
    width: 46px; height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700;
    flex: 0 0 auto;
}
.app-drawer-user { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app-drawer-user .name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-drawer-user .role { font-size: 12px; opacity: .85; }
.app-drawer-close { background: transparent; border: 0; color: #fff; font-size: 20px; padding: 6px; cursor: pointer; }

.app-drawer-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.app-drawer-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 14px;
    border-radius: 12px;
    color: #1f2937;
    font-size: 15px;
    text-decoration: none;
}
.app-drawer-item i { width: 22px; text-align: center; color: #2563eb; font-size: 16px; }
.app-drawer-item:hover, .app-drawer-item:active { background: #eff6ff; text-decoration: none; color: #1f2937; }
.app-drawer-item.danger { color: #dc2626; }
.app-drawer-item.danger i { color: #dc2626; }

/* Плавающая кнопка чата */
.chat-fab {
    position: fixed;
    right: 16px; bottom: 16px;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
    box-shadow: 0 8px 22px rgba(37, 99, 235, .4);
    z-index: 1030;
    text-decoration: none;
}
.chat-fab:active { transform: scale(.94); }
.chat-fab:hover, .chat-fab:focus { color: #fff; }
.chat-fab-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: #ef4444; color: #fff;
    border-radius: 10px; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
/* На страницах чата плавающую кнопку прячем + место под неё в списках */
body[data-route^="chats/"] .chat-fab { display: none; }
main { padding-bottom: 84px; }

@media (prefers-color-scheme: dark) {
    .app-drawer { background: #0b0f19; }
    .app-drawer-item { color: #e5e7eb; }
    .app-drawer-item:hover, .app-drawer-item:active { background: #1f2937; color: #e5e7eb; }
}

/* ==================================================================
   Чат — современный вид
   ================================================================== */
.chats h1 { font-size: 18px; margin-bottom: 10px; }
.chat-message { border-radius: 18px !important; }
.chat-message.my { border-bottom-right-radius: 6px !important; }
.chats-messages-item:not(:has(.my)) .chat-message { border-bottom-left-radius: 6px !important; }
.chat-message .content { font-size: 15px; }
.chat-form {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 8px 0 10px;
    z-index: 5;
}
@media (prefers-color-scheme: dark) {
    .chat-form { background: #0b0f19; }
}

/* ==================================================================
   Копирование текста отзыва в один клик (отзывы в работе)
   ================================================================== */
.review-content-copy {
    cursor: pointer;
    position: relative;
    border-radius: 8px;
    transition: background .15s;
    -webkit-tap-highlight-color: transparent;
}
.review-content-copy:hover { background: rgba(37, 99, 235, .06); }
.review-content-copy:active { background: rgba(37, 99, 235, .12); }
.review-content-copy::after {
    content: '\f0c5'; /* fa-copy */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: .72em;
    color: #94a3b8;
    margin-left: 6px;
    vertical-align: middle;
    opacity: .7;
}
.review-content-copy.copied {
    background: rgba(22, 163, 74, .12);
}
.review-content-copy.copied::after {
    content: '\f00c'; /* fa-check */
    color: #16a34a;
    opacity: 1;
}
@media (prefers-color-scheme: dark) {
    .review-content-copy:hover { background: rgba(96, 165, 250, .12); }
}

/* ==================================================================
   Статистика (график оплат)
   ================================================================== */
.stats h1 { font-size: 22px; }

/* Переключатель периода — сегментированные вкладки */
.stats-tabs {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}
.stats-tab {
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.stats-tab:hover { color: #1e293b; text-decoration: none; }
.stats-tab.active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

/* KPI-плитки */
.stats-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.stats-kpi-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stats-kpi-label { font-size: 12px; color: #6b7280; }
.stats-kpi-value { font-size: 20px; font-weight: 700; line-height: 1.15; }

/* Карточка графика */
.stats-chart-card {
    border: 1px solid #eef0f3;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.stats-chart-card .card-body { padding: 14px 10px; }
#statsChart { max-height: 300px; }

/* Годовая динамика зарплаты по неделям */
.stats-year-head { margin-bottom: 8px; }
.stats-year-title { display: block; font-size: 15px; font-weight: 700; color: #0f172a; }
.stats-year-sub { display: block; font-size: 12px; color: #98a2b3; }
#statsYearChart { max-height: 200px; }
@media (prefers-color-scheme: dark) { .stats-year-title { color: #e5e7eb; } }

@media (prefers-color-scheme: dark) {
    .stats-tabs { background: #1e293b; }
    .stats-tab { color: #94a3b8; }
    .stats-tab.active { background: #0b0f19; color: #93c5fd; }
    .stats-kpi-card, .stats-chart-card { background: #0f172a; border-color: #1e293b; }
}

/* ==================================================================
   Карточка загрузки скриншота отзыва (единый премиум-стиль)
   ================================================================== */
.review .review-comment {
    font-size: 13px; color: #92400e; background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 10px; padding: 8px 10px; margin-bottom: 8px;
}
.review .review-comment i { color: #d97706; margin-right: 3px; }
.review .ru-photos { margin-top: 12px; }
.review .ru-photos .photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.review .ru-photos .image-preview { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid #eceff4; }

.ru-form { margin-top: 14px; }
.ru-form .ru-file-label,
.review .ru-photos .detail-label {
    display: block; font-size: 12px; font-weight: 600; color: #98a2b3; margin: 4px 0 6px;
}

.ru-uploader { margin-top: 4px; }
.ru-drop {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    border: 1.5px dashed #cbd5e1; border-radius: 14px; padding: 20px 14px;
    background: #f8fafc; color: #475467;
}
.ru-drop > i { font-size: 26px; color: #2563eb; margin-bottom: 4px; }
.ru-drop-title { font-size: 14px; font-weight: 600; color: #0f172a; }
.ru-drop-sub { font-size: 12px; color: #98a2b3; }
.ru-drop-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.ru-drop-actions .btn { border-radius: 10px; }
.ru-drop.has-file { display: none; }

.review .screen-preview {
    display: block; max-width: 100%; max-height: 340px; border-radius: 12px;
    border: 1px solid #eceff4; margin: 12px auto 0;
}
.ru-form button[type="submit"].btn-block {
    display: block; width: 100%; border-radius: 12px; padding: 13px; font-weight: 700;
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important; border: 0; color: #fff;
    box-shadow: 0 10px 22px -10px rgba(37, 99, 235, .6);
}

@media (prefers-color-scheme: dark) {
    .ru-drop { background: #0b1220; border-color: #1e293b; color: #94a3b8; }
    .ru-drop-title { color: #e5e7eb; }
    .review .review-comment { background: #422006; border-color: #a16207; color: #fde68a; }
}

/* ==================================================================
   ЕДИНЫЙ ЧАТ (master-detail): боковая панель + активная переписка
   ================================================================== */
/* Страница чата занимает всё пространство под шапкой — убираем отступы main,
   иначе форма ввода уезжает вниз и появляется лишняя прокрутка. */
body[data-route="chats/index"] main { padding: 0 !important; }

.chat-shell {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - 56px);
    min-height: 420px;
    margin: 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Верхняя панель управления */
.chat-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid #eef0f3;
    background: #fff;
    flex: 0 0 auto;
}
.chat-icon-btn {
    width: 38px; height: 38px; flex: 0 0 auto;
    border: 0; border-radius: 10px; background: #f3f4f6; color: #334155;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease;
}
.chat-icon-btn:hover { background: #e5e7eb; }
.chat-topbar-title {
    flex: 1 1 auto; min-width: 0;
    font-size: 15px; font-weight: 700; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; border-radius: 999px; padding: 7px 12px 7px 10px;
    background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 600; cursor: pointer;
    white-space: nowrap;
}
.chat-back-btn:hover { background: #dbeafe; }
.chat-collapse-btn { background: #eef2ff; color: #4f46e5; }
.chat-collapse-btn:hover { background: #e0e7ff; }

/* Тело: сайдбар + панель переписки */
.chat-body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; }

.chat-sidebar {
    flex: 0 0 300px; width: 300px;
    display: flex; flex-direction: column; min-height: 0;
    border-right: 1px solid #eef0f3; background: #fafbfc;
}
.chat-sidebar-head { padding: 10px 12px; border-bottom: 1px solid #eef0f3; background: #fff; }
.chat-sidebar-title { display: block; font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.chat-search { position: relative; }
.chat-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #98a2b3; font-size: 13px; }
.chat-search input {
    width: 100%; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 8px 10px 8px 30px; font-size: 13px; background: #fff; color: #0f172a; outline: 0;
}
.chat-search input:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }

.chat-sidebar-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; -webkit-overflow-scrolling: touch; }
.chat-side-group {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #98a2b3; padding: 12px 8px 4px;
}
.chat-side-empty { color: #9ca3af; font-size: 13px; text-align: center; padding: 20px 8px; }

.chat-side-item {
    width: 100%; display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; text-align: left; cursor: pointer;
    padding: 9px 10px; border-radius: 12px; color: #0f172a; margin-bottom: 1px;
}
.chat-side-item:hover { background: #eef2f7; }
.chat-side-item.active { background: #e0edff; }
.chat-side-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-side-title {
    font-size: 14px; font-weight: 600; color: #0f172a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-side-sub {
    font-size: 12px; color: #98a2b3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-side-item .chat-chevron { color: #cbd5e1; font-size: 12px; }
.chat-online {
    display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; margin-left: 2px; vertical-align: middle;
}
.chat-side-item .chat-ava {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff); color: #4f46e5; font-weight: 700; font-size: 15px;
}
.chat-side-item .chat-ava-general { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1d4ed8; }
.chat-side-item .news-counter {
    flex: 0 0 auto; background: #ef4444; color: #fff; border-radius: 999px;
    min-width: 20px; height: 20px; line-height: 20px; text-align: center;
    font-size: 11px; font-weight: 700; padding: 0 6px;
}

/* Скелетон загрузки */
.chat-side-skeleton { padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.chat-side-skeleton span { height: 42px; border-radius: 12px; background: linear-gradient(90deg,#f1f5f9,#e2e8f0,#f1f5f9); background-size: 200% 100%; animation: chatSkel 1.2s ease-in-out infinite; }
@keyframes chatSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Панель переписки */
.chat-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.chat-shell .chat-messages {
    flex: 1 1 auto; overflow-y: auto; margin: 0; list-style: none;
    display: flex; flex-direction: column; gap: 10px; padding: 14px 12px;
    -webkit-overflow-scrolling: touch;
}
/* Прижимаем сообщения к низу (к полю ввода): когда их мало, пустое место
   уходит наверх, а не образует большой зазор перед формой — как в мессенджерах.
   Когда сообщений много, margin-top схлопывается и работает обычная прокрутка. */
.chat-shell .chat-messages > .chats-messages-item:first-child { margin-top: auto; }
.chat-shell .chat-empty { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); pointer-events: none; }
.chat-pane { position: relative; }
.chat-shell .chat-form { flex: 0 0 auto; margin: 0; padding: 8px 10px; border-top: 1px solid #eef0f3; background: #fff; }

/* Слайд-панель + затемнение (мобильный режим) */
.chat-sidebar-backdrop {
    display: none; position: absolute; inset: 0; z-index: 40;
    background: rgba(15,23,42,.4); opacity: 0; transition: opacity .2s ease;
}
.chat-sidebar-backdrop.show { opacity: 1; }

@media (max-width: 820px) {
    .chat-shell { margin: 0; }
    #chatSidebarToggle { display: inline-flex; }
    .chat-sidebar {
        position: absolute; z-index: 50; top: 0; bottom: 0; left: 0;
        width: 86%; max-width: 330px; flex-basis: auto;
        transform: translateX(-102%); transition: transform .24s ease;
        box-shadow: 0 12px 40px rgba(0,0,0,.22);
    }
    .chat-sidebar.open { transform: translateX(0); }
    .chat-sidebar-backdrop { display: block; }
    .chat-sidebar-backdrop:not(.show) { pointer-events: none; }
}
@media (min-width: 821px) {
    #chatSidebarToggle { display: none; }
    .chat-sidebar-backdrop { display: none !important; }
}

/* Тёмная тема */
@media (prefers-color-scheme: dark) {
    .chat-shell, .chat-topbar, .chat-sidebar-head, .chat-pane, .chat-shell .chat-form { background: #0b1220; }
    .chat-topbar, .chat-sidebar-head, .chat-shell .chat-form { border-color: #1e293b; }
    .chat-sidebar { background: #0f172a; border-color: #1e293b; }
    .chat-topbar-title, .chat-side-title, .chat-sidebar-title { color: #e5e7eb; }
    .chat-icon-btn { background: #1e293b; color: #cbd5e1; }
    .chat-icon-btn:hover { background: #334155; }
    .chat-search input { background: #0b1220; border-color: #1e293b; color: #e5e7eb; }
    .chat-side-item { color: #e5e7eb; }
    .chat-side-item:hover { background: #1e293b; }
    .chat-side-item.active { background: #1e3a8a; }
    .chat-side-sub, .chat-side-group { color: #64748b; }
}

/* Явная подсказка про вставку скриншота из буфера */
.ru-drop-hint {
    display: block; margin-top: 10px; max-width: 360px;
    font-size: 11.5px; line-height: 1.45; color: #98a2b3;
}
.ru-drop-hint i { color: #3b82f6; margin-right: 3px; }
@media (prefers-color-scheme: dark) { .ru-drop-hint { color: #94a3b8; } }