/* ========================================================================
   main.css — общие стили приложения (Мессенджер)
   Все стили, которые были в base.html. Кэшируется браузером.
   ======================================================================== */

:root {
    --wa-green-dark: #2A6E9E;
    --wa-green: #3D8FC9;
    --wa-green-light: #4A9EDB;
    --wa-teal: #4A9EDB;
    --wa-bg: #E9EFF5;
    --wa-panel: #FFFFFF;
    --wa-chat-bg: #E9EFF5;
    --wa-bubble-out: #D6EAF9;
    --wa-bubble-in: #FFFFFF;
    --wa-tick-blue: #4A9EDB;
    --wa-tick-gray: #8696A0;
    --wa-text: #111B21;
    --wa-text-muted: #667781;
    --wa-border: #E9EDEF;
    --wa-hover: #F5F6F6;
    --wa-danger: #DC3545;
    --wa-header-h: 60px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--wa-bg);
    color: var(--wa-text);
    font-size: 15px;
    overflow: hidden;
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

a { color: var(--wa-green); text-decoration: none; }

button {
    font-family: inherit;
    font-size: 15px;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    background: var(--wa-green);
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    transition: opacity 0.15s;
}
button:active { opacity: 0.75; }
button.gray   { background: #8696A0; }
button.danger { background: var(--wa-danger); }
button.success{ background: var(--wa-green-light); }

input, textarea, select {
    font-family: inherit;
    font-size: 15px;
}

.wa-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--wa-green-dark);
    color: #fff;
    padding: 8px 12px;
    height: var(--wa-header-h);
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 10;
}
.wa-header h1 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-header .header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.wa-header .icon-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    text-decoration: none;
    /* Подпись под значком выходит за границы кнопки (см. ниже) — обрезать её
       нельзя, иначе от подписи останутся верхушки букв. */
    overflow: visible;
}
.wa-header .icon-btn:hover { background: rgba(255,255,255,0.1); }
.wa-header .icon-btn.green { background: var(--wa-green-light); }
.wa-header .icon-btn.green:hover { background: #1ebe5a; }

/*
 * Подпись под значком — по просьбе владельца: раньше смысл значка был только в
 * подсказке `title`, а на телефоне подсказки не видно вовсе.
 *
 * Подпись вынесена из потока (`position: absolute`), поэтому она **не меняет
 * размер кнопки и не двигает шапку**: места в шапке мало, и обычная подпись
 * растянула бы её или сломала выравнивание. Размер 8 точек — читается, но не
 * спорит с содержимым.
 */
.wa-header .icon-btn[data-label]::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    margin-top: -4px;
}
/* Кнопка должна быть точкой отсчёта для подписи. */
.wa-header .icon-btn[data-label] { position: relative; }

.wa-header .avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #ccc;
    flex: 0 0 auto;
}
.wa-header .avatar-sm.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: var(--wa-green);
    font-size: 15px;
}

.wa-header .header-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wa-header .header-title {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-header .header-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wa-header .header-sub.online { color: #a8e6b8; }

.wa-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.wa-content.wa-scroll-page {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/*
 * Фон чатов и списков.
 *
 * Картинку прислал владелец и просил поставить её фоном. Раньше здесь был
 * серый цвет с узором-ромбиками. Лёгкая белая плёнка сверху оставлена: без неё
 * текст поверх фотографии читается хуже, особенно на светлых участках.
 */
.wa-bg-chat {
    background:
        linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
        url("/static/chat-bg.jpg") center / cover no-repeat;
    background-attachment: fixed;
}

.wa-flash {
    padding: 10px 14px;
    font-size: 14px;
    text-align: center;
    position: absolute;
    top: calc(var(--wa-header-h) + 8px);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 8px;
    z-index: 50;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    max-width: 90%;
    animation: flashIn 0.2s ease-out;
}
@keyframes flashIn {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.wa-flash.error { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.wa-flash.ok    { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }

.wa-empty {
    text-align: center;
    color: var(--wa-text-muted);
    padding: 40px 20px;
    font-size: 14px;
}

.wa-panel {
    background: var(--wa-panel);
    margin: 10px;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.wa-panel h2 {
    font-size: 15px;
    margin: 0 0 12px;
    color: var(--wa-text);
}

.auth-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, var(--wa-green-dark), var(--wa-green));
}
.auth-card {
    background: #fff;
    border-radius: 14px;
    padding: 26px 22px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.auth-card .logo {
    text-align: center;
    font-size: 40px;
    margin-bottom: 8px;
}
.auth-card h1 {
    font-size: 20px;
    text-align: center;
    margin: 0 0 6px;
    color: var(--wa-green-dark);
}
.auth-card .sub {
    text-align: center;
    font-size: 13px;
    color: var(--wa-text-muted);
    margin-bottom: 20px;
}
.auth-card label {
    display: block;
    font-size: 13px;
    color: var(--wa-text-muted);
    margin: 12px 0 5px;
}
.auth-card input[type="text"],
.auth-card input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--wa-border);
    border-radius: 10px;
    font-size: 15px;
    background: #f9fafb;
    transition: border-color 0.15s;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--wa-green-light);
    background: #fff;
}
.auth-card button[type="submit"] {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--wa-green-light);
}
.auth-card .hint {
    font-size: 12px;
    color: var(--wa-text-muted);
    text-align: center;
    margin-top: 16px;
}

.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    background: #ccc;
    flex: 0 0 auto;
    border: none;
}
.avatar.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    background: var(--wa-green);
    font-size: 20px;
    text-transform: uppercase;
}
.avatar.big { width: 96px; height: 96px; font-size: 36px; }

.online-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wa-green-light);
    border: 2px solid #fff;
    position: absolute;
    bottom: 0;
    right: 0;
}
.avatar-wrap {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
}

.ticks {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    margin-left: 4px;
    color: var(--wa-tick-gray);
    letter-spacing: -3px;
}
.ticks.read { color: var(--wa-tick-blue); }
.ticks.single { letter-spacing: 0; }

.wa-content::-webkit-scrollbar,
.messages-scroll::-webkit-scrollbar { width: 6px; }
.wa-content::-webkit-scrollbar-thumb,
.messages-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

@media (min-width: 700px) {
    body { max-width: 900px; margin: 0 auto; border-left: 1px solid var(--wa-border); border-right: 1px solid var(--wa-border); }
}

/* ==========================================================================
   Подписи под кнопками-значками — общее правило.

   Владелец просил: «в андроиде есть надписи под кнопками настройки и т.д.,
   а в веб-версии нет — надо тоже надписи». Раньше смысл значка был только в
   подсказке  itle, а на телефоне подсказки не видно.

   Подпись вынесена из потока (position: absolute), поэтому она **не меняет
   размер кнопки** и не ломает разметку. Размер 8 точек — читается, но не
   спорит с содержимым.

   Цвет подписи — тёмный со светлым ореолом ( ext-shadow): так она видна и на
   светлом фоне внизу переписки, и на тёмной шапке.
   ========================================================================== */
[data-label] { position: relative; }

[data-label]::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    line-height: 1;
    white-space: nowrap;
    /* ЧЁТКАЯ подпись без свечения.
       Сначала здесь было  свечение в три слоя — им я пытался сделать подпись
       читаемой и на светлом фоне, и на тёмной шапке. Владелец сказал: «надписи
       размытые прям». Свечение и было причиной: буквы высотой 8 точек, а вокруг
       каждой — мутный ореол.

       Теперь подпись рисуется обычно, без теней. На тёмной шапке её цвет
       переопределён отдельным правилом ниже (там белый). */
    color: #54656f;
    pointer-events: none;
    margin-top: -3px;
    font-weight: 500;
}