/* ========================================
   ! CHAT MOBILE — visual language borrowed from translater-mobile-panel
   Только мобилка (≤768px), только .chat-panel и .chat-header.
   Сообщения (.message), инпут (.chat-input-wrap) НЕ трогаем.
   append to style.css (после существующего @media (max-width:768px) блока,
   т.к. переопределяет часть его правил) ИЛИ отдельным <link>, подключённым
   после style.css.
   ======================================== */

@media (max-width: 768px) {

    /* ---------- Panel shell: рамка + "жёсткая" тень, как у
       .translater-mobile-panel (заезжает справа, край заякорен) ---------- */
    .chat-panel {
        border-left: 3px solid var(--m-dark);
        box-shadow: -8px 0 0 var(--m-dark);
    }

    /* ---------- Header → titlebar ---------- */
    .chat-header {
        background: var(--m-dark);
        color: var(--m-yellow);
        border-bottom: 2px solid var(--m-dark);
        padding: 14px 16px;
        padding-top: max(14px, env(safe-area-inset-top));
        gap: 10px;
    }

    /* Убираем полосатую подложку из десктопной темы шапки —
       у translater-заголовков сплошной цвет, без градиента-штрихкода */
    .chat-header::after {
        display: none;
    }

    .chat-header,
    .chat-header * {
        letter-spacing: .5px;
    }

    /* Кнопки внутри шапки (пример: doDbStats/settings) — как
       .translater-mobile-close: круглые, обводка жёлтая, hover — розовый */
    .chat-header button:not(.back-btn) {
        border: 2px solid var(--m-yellow);
        border-radius: 50%;
        color: var(--m-yellow);
        background: none;
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .12s, color .12s, border-color .12s;
    }
    .chat-header button:not(.back-btn):hover,
    .chat-header button:not(.back-btn):active {
        background: var(--m-pink);
        border-color: var(--m-pink);
        color: #fff;
    }

    /* Back-button ("←") — та же круглая титлбар-кнопка */
    .chat-header .back-btn {
        border: 2px solid var(--m-yellow);
        border-radius: 50%;
        background: none;
        color: var(--m-yellow);
        width: 30px;
        height: 30px;
        min-width: 30px;
        font-size: 15px;
        padding: 0;
        margin-right: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .12s, color .12s, border-color .12s;
    }
    .chat-header .back-btn:hover,
    .chat-header .back-btn:active {
        background: var(--m-pink);
        border-color: var(--m-pink);
        color: #fff;
    }
}