/* Каркас и оформление страницы чата в стиле Telegram Desktop (ночная тема).
   Загружается ТОЛЬКО в chat.php. Правила сообщений скоупятся через .chat-app,
   чтобы перебить ретро-стили из chat.css и не задеть login/register/admin. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body.chat-app-body {
    --tg-bg:        #0e1621; /* фон ленты за пузырями */
    --tg-panel:     #17212b; /* сайдбар / топбар / композер */
    --tg-panel-2:   #212c38; /* поле ввода */
    --tg-hover:     #202b36;
    --tg-active:    #2b5278; /* выбранный чат / исходящий пузырь */
    --tg-bubble-in: #1d2b39; /* входящее сообщение */
    --tg-bubble-out:#2b5278; /* исходящее сообщение */
    --tg-text:      #e9edf0;
    --tg-muted:     #efefef; /* даты, вторичный текст */
    --tg-accent:    #6ab7d8; /* ссылки, активный текст */
    --tg-accent-2:  #a7d3f0; /* ссылки/время в исходящем */
    --tg-divider:   #0b131b;

    background: var(--tg-bg);
    color: var(--tg-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PT Sans", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.3;
    overflow: hidden; /* страница целиком не скроллится */
    -webkit-font-smoothing: antialiased;
}

/* ---------- СВЕТЛАЯ ТЕМА (переключается атрибутом data-theme на <html>) ---------- */
html[data-theme="light"] body.chat-app-body {
    --tg-bg:        #d7e0ea; /* фон ленты за пузырями */
    --tg-panel:     #ffffff; /* сайдбар / топбар / композер */
    --tg-panel-2:   #f1f3f5; /* поле ввода */
    --tg-hover:     #eef1f4;
    --tg-active:    #2ca5e0; /* выбранный чат / исходящий пузырь */
    --tg-bubble-in: #ffffff; /* входящее сообщение */
    --tg-bubble-out:#addeff; /* исходящее сообщение */
    --tg-text:      #131a22;
    --tg-muted:     #282828; /* даты, вторичный текст */
    --tg-accent:    #2a6db5; /* ссылки, активный текст */
    --tg-accent-2:  #1c6bb0; /* ссылки/время в исходящем */
    --tg-divider:   #e4e6e9;
}

.chat-app {
    display: flex;
    /* «зум браузера ~80%» по умолчанию: всё рисуем на 125% и сжимаем в 0.8.
       Компенсация 125vw/125dvh*0.8 = 100% экрана. Уменьшается всё пропорционально. */
    width: 125vw;
    height: 125vh;
    height: 125dvh;
    transform: scale(0.8);
    transform-origin: 0 0;
}

/* ---------- Тонкие скроллбары, как в приложении ---------- */
.chat-app * { scrollbar-width: thin; scrollbar-color: #3a4a5a transparent; }
.chat-app *::-webkit-scrollbar { width: 6px; }
.chat-app *::-webkit-scrollbar-thumb { background: #3a4a5a; border-radius: 6px; }
.chat-app *::-webkit-scrollbar-track { background: transparent; }

/* ---------- Боковая колонка тем (выездная панель, закладка слева) ---------- */
.tg-side {
    position: fixed;
    z-index: 40;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    max-width: 84%;
    display: flex;
    flex-direction: column;
    background: var(--tg-panel);
    border-right: 1px solid var(--tg-divider);
    transform: translateX(-100%);
    transition: transform .25s ease;
}
.chat-app.side-open .tg-side {
    transform: translateX(0);
    box-shadow: 0 0 30px rgba(0, 0, 0, .6);
}

/* Ручка изменения ширины панели (активна только на десктопе) */
.tg-side-resizer { display: none; }

/* Десктоп: панель открыта по умолчанию колонкой (как раньше), можно убрать —
   тогда у левого края появляется закладка, чтобы вернуть. Ширину можно тянуть
   за правую грань; она сохраняется в cookie. */
@media (min-width: 821px) {
    .tg-side {
        position: relative;
        transform: none;
        flex: 0 0 var(--side-w, 320px);
        width: var(--side-w, 320px);
        max-width: none;
    }
    .chat-app.side-open .tg-side { box-shadow: none; }
    .chat-app.side-closed .tg-side { display: none; }
    .tg-side-scrim { display: none !important; }
    .tg-side-tab { display: none; }
    .chat-app.side-closed .tg-side-tab { display: inline-flex; }
    .tg-side-resizer {
        display: block;
        position: absolute;
        top: 0; right: -3px;
        width: 7px; height: 100%;
        cursor: col-resize;
        z-index: 50;
        background: transparent;
    }
    .tg-side-resizer::after {
        content: "";
        position: absolute; top: 0; left: 2px;
        width: 2px; height: 100%;
        background: transparent;
        transition: background .15s;
    }
    .tg-side-resizer:hover::after,
    .tg-side-resizer.active::after { background: var(--tg-accent); }
    .chat-app.side-resizing { cursor: col-resize; }
    .chat-app.side-resizing * { user-select: none !important; }
}
.tg-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    flex: 0 0 auto;
}
.tg-side-brand {
    color: var(--tg-text); text-decoration: none;
    font-weight: 700; font-size: 1.05rem; letter-spacing: .3px;
}
.tg-side-close {
    display: inline-block;
    background: none; border: none; color: var(--tg-muted);
    font-size: 24px; line-height: 1; cursor: pointer;
}
.tg-side-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 8px;
}
.tg-side-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 2px 0;
    color: var(--tg-text);
    text-decoration: none;
    border-radius: 10px;
}
.tg-side-item:hover { background: var(--tg-hover); }
.tg-side-item.active { background: var(--tg-active); color: #fff; }
.tg-side-item.active .tg-side-name { color: #fff; }
.tg-avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.15rem;
    text-transform: uppercase; user-select: none;
}
.tg-side-name {
    flex: 1 1 auto;
    font-size: .9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: bold;
}
.tg-badge {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #696969;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Упомянули вас в непрочитанном — кружок становится красным. */
.tg-badge-mention { background: #e53935; }

.tg-side-foot {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-top: 1px solid var(--tg-divider);
    font-size: .85rem; color: var(--tg-muted);
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.tg-side-foot a { color: var(--tg-accent); text-decoration: none; }
.tg-side-user { color: var(--tg-text); font-weight: 700; }
/* Шестерёнка личного кабинета — справа в футере. */
.tg-side-gear {
    margin-left: auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: var(--tg-panel-2);
    color: var(--tg-muted);
    font-size: 17px; line-height: 1;
    transition: background .15s, color .15s, transform .2s;
}
.tg-side-gear:hover { background: var(--tg-hover); color: var(--tg-text); transform: rotate(30deg); }

/* Закладка у левого края — открывает панель тем (вместо ☰). */
.tg-side-tab {
    position: fixed;
    z-index: 41;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 26px; height: 96px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tg-panel);
    color: var(--tg-accent);
    border: 1px solid var(--tg-divider);
    border-left: none;
    border-radius: 0 12px 12px 0;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
    cursor: pointer;
    font-size: 18px; line-height: 1;
    transition: background .15s, color .15s;
}
.tg-side-tab:hover { background: var(--tg-accent); color: #fff; }
.chat-app.side-open .tg-side-tab { display: none; }

/* ---------- Основная область ---------- */
.tg-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}
/* Плавающая стрелка «к последним» — над композером, справа. */
.tg-tobottom {
    position: absolute;
    right: 16px;
    bottom: 96px;
    z-index: 20;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-panel);
    color: var(--tg-accent);
    border: 1px solid var(--tg-divider);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .1s ease;
}
.tg-tobottom[hidden] { display: none; }
.tg-tobottom:hover { background: var(--tg-accent); color: #fff; }
.tg-tobottom:active { transform: scale(.92); }
.tg-tobottom svg { width: 22px; height: 22px; display: block; }
.tg-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--tg-panel);
    border-bottom: 1px solid var(--tg-divider);
    min-height: 52px;
}
/* Стрелка слева: открывает/закрывает левую панель tg-side */
.tg-topbar-menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: none; border: none;
    color: var(--tg-muted);
    font-size: 20px; line-height: 1;
    cursor: pointer;
    border-radius: 9px;
}
.tg-topbar-menu:hover { background: var(--tg-hover); color: var(--tg-text); }
.tg-menu-btn {
    display: none;
    background: none; border: none; color: var(--tg-muted);
    font-size: 22px; line-height: 1; cursor: pointer;
}
.tg-topbar-id { min-width: 0; }
.tg-topbar-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-weight: 700; color: var(--tg-text); font-size: 0.9rem;
}
.tg-topbar-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Количество сообщений в текущей теме — глухая подпись рядом с названием */
.tg-topbar-count {
    flex: 0 0 auto;
    font-weight: 400;
    font-size: .82rem;
    color: var(--tg-muted);
    opacity: .8;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tg-topbar-sub { color: var(--tg-muted); font-size: .82rem; }
.tg-topbar-right { margin-left: auto; font-size: .9rem; color: var(--tg-muted); display: inline-flex; align-items: center; gap: 12px; }
.tg-topbar-right a { color: var(--tg-accent); text-decoration: none; }
.tg-theme-toggle {
    background: none; border: none; cursor: pointer;
    color: var(--tg-muted); font-size: 19px; line-height: 1;
    padding: 5px 7px; border-radius: 9px;
}
.tg-theme-toggle:hover { background: var(--tg-hover); color: var(--tg-text); }
/* Иконка поиска в шапке — в тон переключателю темы */
.tg-search-toggle {
    background: none; border: none; cursor: pointer;
    color: var(--tg-muted);
    width: 32px; height: 32px; display: inline-flex;
    align-items: center; justify-content: center;
    padding: 0; border-radius: 9px;
}
.tg-search-toggle svg { width: 19px; height: 19px; }
.tg-search-toggle:hover { background: var(--tg-hover); color: var(--tg-text); }

/* ---------- Панель поиска по теме (оверлей под шапкой) ---------- */
.tg-search {
    position: absolute;
    left: 0; right: 0; top: 52px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    max-height: 70%;
    background: var(--tg-panel);
    border-bottom: 1px solid var(--tg-divider);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.tg-search[hidden] { display: none; }
.tg-search-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--tg-divider);
}
.tg-search-ico { width: 18px; height: 18px; color: var(--tg-muted); flex: 0 0 auto; }
.tg-search-input {
    flex: 1 1 auto; min-width: 0;
    background: transparent; border: none; outline: none;
    color: var(--tg-text); font: inherit; font-size: .95rem;
}
.tg-search-input::placeholder { color: var(--tg-muted); }
.tg-search-x {
    flex: 0 0 auto;
    background: none; border: none; cursor: pointer;
    color: var(--tg-muted); font-size: 22px; line-height: 1;
    width: 30px; height: 30px; border-radius: 8px;
}
.tg-search-x:hover { background: var(--tg-hover); color: var(--tg-text); }
.tg-search-count {
    padding: 6px 16px;
    font-size: .8rem; color: var(--tg-muted);
    border-bottom: 1px solid var(--tg-divider);
}
.tg-search-count:empty { display: none; }
.tg-search-results { overflow-y: auto; flex: 1 1 auto; padding: 4px 0; }

.tg-sr {
    padding: 8px 16px; cursor: pointer;
    border-left: 3px solid transparent;
}
.tg-sr:hover, .tg-sr:focus { background: var(--tg-hover); outline: none; }
.tg-sr.active { background: var(--tg-hover); border-left-color: var(--tg-accent); }
.tg-sr-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.tg-sr-name { font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-sr-date { flex: 0 0 auto; font-size: .76rem; color: var(--tg-muted); }
.tg-sr-snip {
    font-size: .85rem; color: var(--tg-text); opacity: .9;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2;
}
.tg-sr-snip mark, .tg-mark {
    background: var(--tg-accent); color: #fff;
    border-radius: 3px; padding: 0 1px; font-weight: 600;
}

.tg-flash { padding: 0; }
.tg-flash:empty { display: none; }

/* Индикатор автоподгрузки истории — тонкая полоса над лентой */
.chat-app .feed-loader {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: 8px;
    text-align: center;
    background: var(--tg-panel);
    color: var(--tg-muted);
    font-size: .82rem;
    border-bottom: 1px solid var(--tg-divider);
}
.chat-app .feed-loader[hidden] { display: none; }

/* Лента — внутренний скролл, растягивается на всю высоту */
.chat-app .chat-feed {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border: none;
    /* обои ленты как в Telegram: фон фиксирован к окну ленты, пузыри поверх */
    background-color: var(--tg-bg);
    background-image: url('/img/Background_dark.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: scroll;
    padding: 12px 16px 18px;
}
.chat-app .chat-hint { color: var(--tg-muted); text-align: center; margin: 24px 0; }

/* ---------- Перегородка «Непрочитанные сообщения» ---------- */
.chat-app .tg-unread-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 8px;
    color: var(--tg-accent);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.3px;
}
.chat-app .tg-unread-divider span { white-space: nowrap; }
.chat-app .tg-unread-divider::before,
.chat-app .tg-unread-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--tg-accent);
    opacity: .45;
}

/* ---------- Разделитель дня в ленте (пилюля по центру) ---------- */
.chat-app .tg-day-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 8px 6px;
    pointer-events: none;
}
.chat-app .tg-day-divider span {
    padding: 3px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .30);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .2px;
    white-space: nowrap;
}

/* ---------- Плавающая дата: прижата к верху ленты, поверх сообщений ---------- */
.tg-day-sticky {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 75px;
    z-index: 8;
    padding: 4px 13px;
    border-radius: 13px;
    background: rgba(0, 0, 0, .40);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .2px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    transition: opacity .18s ease;
}
.tg-day-sticky[hidden] { display: none; }

/* ---------- Движение: мягкое, ненавязчивое ---------- */
@keyframes tg-msg-in     { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-divider-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tg-pop        { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
/* Появление сообщения: только прозрачность — не трогаем геометрию,
   чтобы не сбивать расчёт якоря/прокрутки. */
.chat-app .tg-msg { animation: tg-msg-in .2s ease-out; }
.chat-app .tg-unread-divider { animation: tg-divider-in .35s ease-out; }
.tg-tobottom:not([hidden]) { animation: tg-pop .2s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .chat-app .tg-msg,
    .chat-app .tg-unread-divider,
    .tg-tobottom,
    .chat-app .tg-msg.tg-jump-target > .tg-bubble { animation: none !important; }
}

/* ---------- Сообщения: пузыри, как в Telegram ---------- */
.chat-app .tg-msg {
    display: block;
    text-align: left;
    margin: 10px 0;
    /* нейтрализуем просачивающийся «бокс» из общего chat.css */
    border: none;
    background: transparent;
    color: var(--tg-text);
    padding: 0;
}
.chat-app .tg-msg.out { text-align: right; }

.chat-app .tg-bubble {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    position: relative;
    max-width: min(72%, 560px);
    padding: 6px 12px 8px;
    border-radius: 14px;
    font-size: 18px;
    line-height: 1.314;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.chat-app .tg-msg.in  .tg-bubble { background: var(--tg-bubble-in);  border-bottom-left-radius: 5px; padding-bottom: 20px;}
.chat-app .tg-msg.out .tg-bubble { background: var(--tg-bubble-out); border-bottom-right-radius: 5px; padding-bottom: 20px;}

/* Широкий экран (по правилу замера ленты): исходящие тоже прижимаем влево */
.chat-app .chat-feed.all-left .tg-msg.out { text-align: left; }

/* Медиа внутри пузыря: картинка / видео / гифка / стикер / аудио / файл */
.chat-app .tg-media {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 2px 0 4px;
    border-radius: 10px;
    background: rgba(0, 0, 0, .22);
}
.chat-app .tg-media.tg-sticker { width: auto; max-width: 300px; background: transparent; }
.chat-app audio.tg-media { width: 300px; max-width: 100%; height: 40px; background: transparent; }
.chat-app .tg-media-file {
    display: inline-block;
    margin: 2px 0 4px;
    color: var(--tg-accent);
    text-decoration: none;
}
.chat-app .tg-msg.out .tg-media-file { color: var(--tg-accent-2); }
.chat-app .tg-media-file:hover { text-decoration: underline; }

/* Пузырь с медиа: поля меньше, медиа прижато к верхним углам (как в Telegram) */
.chat-app .tg-bubble.has-media { padding: 4px; }
.chat-app .tg-bubble.has-media .tg-user  { padding: 2px 8px 0; }
.chat-app .tg-bubble.has-media .tg-reply { margin: 0 8px; padding-left: 7px; }
.chat-app .tg-bubble.has-media .tg-media { margin: 0; border-radius: 10px; }
.chat-app .tg-bubble.has-media .tg-body  { padding: 3px 46px 4px 8px; }

/* Галерея вложений одного сообщения: один элемент — во всю ширину, много — сеткой */
.chat-app .tg-gallery { display: block; }
.chat-app .tg-gallery .tg-media-cell { position: relative; }
.chat-app .tg-gallery .tg-media-cell > .tg-media { margin: 0; border-radius: 10px; }
.chat-app .tg-gallery .tg-media-cell:not(:first-child) { margin-top: 3px; }
.chat-app .tg-gallery.tg-gallery-multi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}
.chat-app .tg-gallery.tg-gallery-multi .tg-media-cell:not(:first-child) { margin-top: 0; }
.chat-app .tg-gallery.tg-gallery-multi .tg-media-cell > .tg-media { width: 100%; height: 100%; object-fit: cover; }
/* Первый, если он один на строку (например, 3 вложения), растягиваем на две колонки */
.chat-app .tg-gallery.tg-gallery-multi .tg-media-cell:nth-last-child(1):nth-child(odd) { grid-column: 1 / -1; }
.chat-app .tg-gallery.tg-gallery-multi .tg-media-cell:nth-last-child(1):nth-child(odd) > .tg-media { height: auto; max-height: 320px; object-fit: contain; }

/* Имя автора — цвет из палитры (класс nc0..nc9 задаётся в PHP).
   Двойная палитра: на светлом фоне имена темнее, чтобы не терялся контраст. */
.chat-app .tg-user {
    font-weight: 700;
    margin-bottom: 1px;
    cursor: default;
}
.chat-app .tg-user.nc0 { color: #ff7d7d; }
.chat-app .tg-user.nc1 { color: #ff9d60; }
.chat-app .tg-user.nc2 { color: #ffce6b; }
.chat-app .tg-user.nc3 { color: #9ad66c; }
.chat-app .tg-user.nc4 { color: #6fd39a; }
.chat-app .tg-user.nc5 { color: #63c3e8; }
.chat-app .tg-user.nc6 { color: #5aa9ff; }
.chat-app .tg-user.nc7 { color: #8f9bff; }
.chat-app .tg-user.nc8 { color: #c98bff; }
.chat-app .tg-user.nc9 { color: #ff86c8; }
html[data-theme="light"] .chat-app .tg-user.nc0 { color: #d14d52; }
html[data-theme="light"] .chat-app .tg-user.nc1 { color: #d1833a; }
html[data-theme="light"] .chat-app .tg-user.nc2 { color: #a8842a; }
html[data-theme="light"] .chat-app .tg-user.nc3 { color: #5f9e3a; }
html[data-theme="light"] .chat-app .tg-user.nc4 { color: #3a9a6a; }
html[data-theme="light"] .chat-app .tg-user.nc5 { color: #2a90b0; }
html[data-theme="light"] .chat-app .tg-user.nc6 { color: #2f7fd1; }
html[data-theme="light"] .chat-app .tg-user.nc7 { color: #5a63d1; }
html[data-theme="light"] .chat-app .tg-user.nc8 { color: #9a4fd1; }
html[data-theme="light"] .chat-app .tg-user.nc9 { color: #d14f9a; }

/* Время — в правом нижнем углу пузыря */
.chat-app .tg-time {
    position: absolute;
    right: 10px;
    bottom: 6px;
    font-size: 11px;
    line-height: 1;
    color: var(--tg-muted);
    user-select: none;
    pointer-events: none;
}
.chat-app .tg-msg.out .tg-time { color: var(--tg-accent-2); }
.chat-app .tg-body { padding-right: 46px; }

/* Цитата ответа — цветная черточка слева, имя + кусочек текста на отдельном фоне */
.chat-app .tg-reply {
    border-left: 2px solid var(--tg-accent);
    margin: 2px 0 4px;
    font-size: .85rem;
    max-height: 4.6em;
    overflow: hidden;
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, .06);
    padding: 3px 8px;
}
.chat-app .tg-reply-name {
    display: block;
    color: var(--tg-accent);
    font-weight: 700;
    line-height: 1.2;
}
.chat-app .tg-reply-snippet {
    display: block;
    color: var(--tg-muted);
    font-weight: 400;
    font-size: .82rem;
    line-height: 1.25;
    margin-top: 1px;
    max-height: 2.5em;
    overflow: hidden;
}
.chat-app .tg-msg.out .tg-reply { border-left-color: var(--tg-accent-2); background: rgba(255, 255, 255, .09); }
.chat-app .tg-msg.out .tg-reply-name { color: var(--tg-accent-2); }

/* Цитата кликабельна — переход к цитируемому сообщению */
.chat-app .tg-reply-link { cursor: pointer; transition: background .12s ease; }
.chat-app .tg-reply-link:hover { background: rgba(255, 255, 255, .12); }
.chat-app .tg-reply-link:focus-visible { outline: 2px solid var(--tg-accent); outline-offset: 1px; }
.chat-app .tg-msg.out .tg-reply-link:hover { background: rgba(255, 255, 255, .15); }

/* Подсветка сообщения-цели после перехода по цитате */
@keyframes tg-jump-flash {
    0%   { background: rgba(90, 169, 255, 0); }
    16%  { background: rgba(90, 169, 255, .38); }
    100% { background: rgba(90, 169, 255, 0); }
}
.chat-app .tg-msg.tg-jump-target > .tg-bubble { animation: tg-jump-flash 1.6s ease-out; }

/* Текст и ссылки */
.chat-app .tg-body { text-align: left; word-break: break-word; }
.chat-app .tg-body a { overflow-wrap: anywhere; word-break: break-all; text-decoration: underline; }
.chat-app .tg-msg.in  .tg-body a { color: var(--tg-accent); }
.chat-app .tg-msg.out .tg-body a { color: var(--tg-accent-2); }

/* Служебные кнопки модератора — маленькая корзинка в правом верхнем углу пузыря.
   Контейнер .tg-tools рассчитан на несколько кнопок (потом докинем). */
.chat-app .tg-tools {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s ease;
}
.chat-app .tg-msg:hover .tg-tools { opacity: 1; }
.chat-app .tg-tool-form { display: inline-flex; margin: 0; }
.chat-app .tg-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, .30);
    color: #d7dbe0;
    cursor: pointer;
}
.chat-app .tg-tool:hover { background: rgba(0, 0, 0, .55); color: #fff; }
.chat-app .tg-tool.del:hover { background: #c0392b; color: #fff; }
.chat-app .tg-tool svg { width: 15px; height: 15px; display: block; }
/* на тач-устройствах без наведения — показываем всегда */
@media (hover: none) {
    .chat-app .tg-tools { opacity: .9; }
}

/* ---------- Поле ввода ---------- */
.tg-composer-wrap {
    flex: 0 0 auto;
    background: var(--tg-panel);
    padding: 8px 16px 12px;
}
.chat-app .chat-composer { margin-top: 0; }
.chat-app .chat-composer form { display: flex; flex-direction: column; gap: 6px; }
.chat-app .chat-composer textarea {
    flex: 1 1 auto;
    width: 100%;
    min-height: 40px;
    max-height: 200px;
    resize: none;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 9px 14px;
    background: var(--tg-panel-2);
    color: var(--tg-text);
    border: none;
    border-radius: 14px;
    font: inherit;
    font-size: 18px;
}
.chat-app .chat-composer textarea::placeholder { color: var(--tg-muted); }
.chat-app .chat-composer textarea:focus { outline: none; }
.chat-app .chat-composer button#send-btn {
    flex: 0 0 auto;
    align-self: flex-end;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--tg-active);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.chat-app .chat-composer button#send-btn:hover { background: #3a6ea5; }
.chat-app .chat-composer button#send-btn svg { width: 22px; height: 22px; display: block; }

/* Обёртка поля: textarea + ряд кнопок + поповеры (позиционируются от неё) */
.chat-app .tg-composer-field { position: relative; display: flex; gap: 8px; align-items: flex-end; }
.chat-app .tg-composer-actions { display: flex; gap: 2px; align-items: center; }
.chat-app .tg-cbtn {
    flex: 0 0 auto;
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--tg-muted);
    border: none; border-radius: 50%; cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.chat-app .tg-cbtn:hover { background: var(--tg-hover); color: var(--tg-text); }
.chat-app .tg-cbtn svg { width: 50px; height: 50px; display: block; }
.chat-app .tg-cbtn.tg-send-btn { background: var(--tg-active); color: #fff; }
.chat-app .tg-cbtn.tg-send-btn:hover { background: #3a6ea5; }

/* Поповеры эмодзи / стикеров */
.chat-app .tg-popover {
    position: absolute; bottom:58px; right: 0; z-index: 50;
    max-height: 240px; overflow-y: auto;
    background: var(--tg-panel-2); border: 1px solid var(--tg-divider);
    border-radius: 14px; padding: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.chat-app .tg-popover[hidden] { display: none; }
.chat-app .tg-emoji {
    font-size: 22px; line-height: 1; padding: 4px;
    background: none; border: none; border-radius: 8px; cursor: pointer;
}
.chat-app .tg-emoji:hover { background: var(--tg-hover); }
.chat-app .tg-pop-stickers { grid-template-columns: repeat(4, 1fr); }
.chat-app .tg-stk {
    padding: 4px; background: none; border: none; border-radius: 10px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.chat-app .tg-stk:hover { background: var(--tg-hover); }
.chat-app .tg-stk img { width: 60px; height: 60px; object-fit: contain; display: block; }

/* Превью выбранного стикера над полем */
.chat-app .tg-sticker-preview {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px; background: var(--tg-panel-2); border-radius: 12px;
}
.chat-app .tg-sticker-preview[hidden] { display: none; }
.chat-app .tg-sticker-preview img { width: 56px; height: 56px; object-fit: contain; }
.chat-app .tg-stk-cap { font-size: .82rem; color: var(--tg-muted); }
.chat-app .tg-stk-x {
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer;
    font-size: 16px; line-height: 1;
}
.chat-app .tg-stk-x:hover { background: #c0392b; }

/* Стикер в ленте — компактный, как в Telegram */
.chat-app .tg-msg .tg-media.tg-sticker { width: auto; max-width: 160px; max-height: 160px; background: transparent; }

/* Чип имени прикреплённого файла (пустой — не показываем) */
.chat-app .tg-attach-name:empty { display: none; }
.chat-app .tg-attach-name {
    align-self: flex-start;
    margin-top: 6px;
    max-width: 100%;
    padding: 3px 10px;
    background: var(--tg-panel-2);
    color: var(--tg-muted);
    border-radius: 10px;
    font-size: .82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-app .composer-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 16px;
    background: var(--tg-panel-2);
    color: var(--tg-muted);
    border: none;
    border-radius: 16px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    font-size: 15px;
}
.chat-app .composer-lock:hover { color: var(--tg-accent); }

/* Всплывающие уведомления (flash) */
.chat-app .tg-flash > div {
    margin: 8px 16px 0;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: .9rem;
    text-align: center;
}
.chat-app .tg-err  { background: #3a2323; color: #ff9a9a; }
.chat-app .tg-warn { background: #3a3320; color: #ffd98a; }
.chat-app .tg-ok   { background: #1f3a2a; color: #93e6b0; }
.chat-app .tg-info { background: #1f3040; color: #9fd0ef; }

/* Затемнение под боковой панелью (все размеры) */
.tg-side-scrim { display: none; }
.chat-app.side-open .tg-side-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 30;
}

/* ---------- Мобильные точечные правки ---------- */
@media (max-width: 820px) {
    .tg-side-tab { height: 72px; }
    .chat-app .tg-bubble { max-width: 86%; }
}

/* ---------- Светлая тема: точечные правки ---------- */
html[data-theme="light"] .chat-app * { scrollbar-color: #c3ccd6 transparent; }
html[data-theme="light"] .chat-app *::-webkit-scrollbar-thumb { background: #c3ccd6; }
html[data-theme="light"] .chat-app .chat-feed { background-image: url('/img/Background_light.jpg'); }
html[data-theme="light"] .chat-app .tg-tool { background: rgba(0, 0, 0, .14); color: #5a636b; }
html[data-theme="light"] .chat-app .tg-tool:hover { background: rgba(0, 0, 0, .30); color: #fff; }
html[data-theme="light"] .chat-app .tg-err  { background: #fdecec; color: #b02a2a; }
html[data-theme="light"] .chat-app .tg-warn { background: #fdf3d9; color: #8a6d1f; }
html[data-theme="light"] .chat-app .tg-ok   { background: #e5f6ec; color: #1f7a44; }
html[data-theme="light"] .chat-app .tg-info { background: #e5f0fb; color: #1c6bb0; }
html[data-theme="light"] .chat-app .tg-day-divider span { background: rgba(0, 0, 0, .10); color: #333c46; }
html[data-theme="light"] .tg-day-sticky { background: rgba(0, 0, 0, .20); color: #fff; }

/* ---------- Лайтбокс: картинка разворачивается поверх ---------- */
.chat-app .chat-feed img.tg-media { cursor: zoom-in; }
.tg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.tg-lightbox.open { display: flex; animation: tg-lb-fade .18s ease-out; }
.tg-lightbox-img {
    max-width: 92vw;
    max-height: 92vh;
    width: auto;
    height: auto;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 12px 44px rgba(0, 0, 0, .6);
    cursor: zoom-out;
    animation: tg-lb-zoom .2s cubic-bezier(.2, .8, .2, 1);
}
.tg-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.tg-lightbox-close:hover { background: rgba(255, 255, 255, .28); }
body.tg-lightbox-on { overflow: hidden; }
@keyframes tg-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-lb-zoom { from { opacity: .4; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .tg-lightbox.open,
    .tg-lightbox-img { animation: none; }
}

/* ---------- КОНТЕКСТНОЕ МЕНЮ СООБЩЕНИЯ (вне .chat-app, координаты экрана) ---------- */
.tg-ctx {
    position: fixed;
    z-index: 1000;
    min-width: 168px;
    padding: 4px;
    background: var(--tg-panel);
    border: 1px solid var(--tg-divider);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
    font-size: 15px;
}
.tg-ctx[hidden] { display: none; }
.tg-ctx-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--tg-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.tg-ctx-item:hover { background: var(--tg-hover); }
.tg-ctx-del { color: #ff6b6b; }
.tg-ctx-del:hover { background: #3a1f24; }
html[data-theme="light"] .tg-ctx-del { color: #d94848; }
html[data-theme="light"] .tg-ctx-del:hover { background: #fbe3e3; }
/* Неактивный пункт (нельзя удалить — чужое сообщение для не-админа). */
.tg-ctx-item:disabled,
.tg-ctx-item.tg-ctx-off {
    opacity: .38;
    cursor: default;
    pointer-events: none;
}

/* ---------- ЧИП ОТВЕТА В КОМПОЗЕРЕ ---------- */
.tg-replybar {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 0 10px 6px;
    padding: 6px 8px 6px 0;
    background: var(--tg-panel-2);
    border-radius: 8px;
}
.tg-replybar[hidden] { display: none; }
.tg-replybar-bar {
    flex: 0 0 3px;
    border-radius: 3px;
    background: var(--tg-accent);
}
.tg-replybar-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tg-replybar-name { color: var(--tg-accent); font-weight: 600; font-size: 13px; }
.tg-replybar-sub {
    color: var(--tg-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tg-replybar-x {
    flex: 0 0 auto;
    align-self: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--tg-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.tg-replybar-x:hover { background: var(--tg-hover); color: var(--tg-text); }

/* ================= АУДИО: кнопка в сообщении ================= */
.tg-audio-btn {
    display: inline-flex; align-items: center; gap: 10px;
    max-width: 100%; min-width: 160px;
    padding: 9px 14px; margin: 2px 0;
    background: var(--tg-panel-2); color: var(--tg-text);
    border: 1px solid var(--tg-divider); border-radius: 12px;
    cursor: pointer; text-align: left; font: inherit;
    transition: border-color .15s, background .15s;
}
.tg-audio-btn:hover { border-color: var(--tg-accent); }
.tg-audio-btn.active { border-color: var(--tg-accent); background: var(--tg-hover); }
.tg-audio-ico {
    position: relative; flex: 0 0 auto; width: 0; height: 0;
    border-left: 12px solid var(--tg-accent);
    border-top: 8px solid transparent; border-bottom: 8px solid transparent;
}
.tg-audio-btn.playing .tg-audio-ico {
    width: 4px; height: 16px;
    border-left: 4px solid var(--tg-accent); border-right: 4px solid var(--tg-accent);
    border-top: none; border-bottom: none;
}
.tg-audio-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--tg-text); font-size: .9rem;
}

/* ================= ПОСТОЯННИЙ НИЖНИЙ ПЛЕЕР ================= */
.tg-dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--tg-panel); border-top: 1px solid var(--tg-divider);
    box-shadow: 0 -2px 12px rgba(0,0,0,.28);
    padding: 8px 14px; box-sizing: border-box;
}
.tg-dock-main { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin: 0 auto; }
.tg-dock-play {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    border: none; cursor: pointer; font-size: 15px; line-height: 1;
    background: var(--tg-accent); color: #fff;
}
.tg-dock-play:hover { filter: brightness(1.1); }
.tg-dock-meta { flex: 1 1 auto; min-width: 0; }
.tg-dock-name {
    font-size: .88rem; color: var(--tg-text); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px;
}
.tg-dock-seek { position: relative; height: 5px; border-radius: 3px; background: var(--tg-hover); cursor: pointer; }
.tg-dock-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: var(--tg-accent); }
.tg-dock-time { flex: 0 0 auto; font-size: .78rem; color: var(--tg-muted); font-variant-numeric: tabular-nums; }
.tg-dock-close {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: none; color: var(--tg-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.tg-dock-close:hover { background: var(--tg-hover); color: var(--tg-text); }
/* Композер приподнимаем, чтобы плеер его не закрывал. */
body.tg-dock-on .tg-composer-wrap { padding-bottom: 62px; }
body.tg-dock-on .tg-tobottom { bottom: 74px; }
@media (max-width: 560px) {
    .tg-dock-time { display: none; }
    .tg-audio-btn { min-width: 0; }
}