@charset "UTF-8";

#page-chat {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--head-h, 70px) - var(--tabs-h, 60px));
    background: #232326;
    padding: 0;
    overflow: hidden;
}

#page-chat.page-active {
    height: calc(100vh - var(--head-h, 70px) - var(--tabs-h, 60px));
}

#chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}

#chat-messages::-webkit-scrollbar { width: 6px; }
#chat-messages::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }

.msg {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 14px;
    word-wrap: break-word;
    font-size: 0.95em;
    line-height: 1.35;
}

.msg-mine {
    background: #475e73;
    color: #fff;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.msg-them {
    background: #3a3a3d;
    color: #e4e5e5;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

/* Подсветка новых сообщений админа, полученных пока чат был скрыт.
   Плавно угасает при снятии класса (transition). */
.msg {
    transition: box-shadow 0.6s ease, background-color 0.6s ease;
}
.msg-them.msg-unseen {
    background: #40525f;
    box-shadow: 0 0 0 2px #74c0fc inset, 0 0 8px rgba(116, 192, 252, 0.5);
}

.msg-sys {
    align-self: center;
    background: transparent;
    color: #888;
    font-style: italic;
    font-size: 0.85em;
    padding: 4px 8px;
    max-width: 90%;
    text-align: center;
}

.msg-author {
    font-size: 0.78em;
    font-weight: 600;
    opacity: 0.75;
    margin-bottom: 2px;
}

.msg-body {
    white-space: pre-wrap;
}

.msg-time {
    font-size: 0.7em;
    opacity: 0.6;
    text-align: right;
    margin-top: 2px;
}

#chat-typing {
    min-height: 18px;
    padding: 0 14px;
    color: #999;
    font-style: italic;
    font-size: 0.85em;
}

#chat-form {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #1a1a1d;
    border-top: 1px solid #3a3a3a;
    align-items: center;
}

/* Поле выбора файла прячем жёстко: глобальное `form input {display:block}` из contact.css
   перебивает браузерный [hidden] (см. также общий фикс в record.css). */
#chat-file {
    display: none !important;
}

#chat-input {
    flex: 1 1 auto;
    min-width: 0;            /* иначе длинный плейсхолдер распирает строку на узком экране */
    padding: 10px 14px;
    border-radius: 20px;
    background: #2c2c2f;
    color: #e4e5e5;
    border: 1px solid #3a3a3a;
    font-size: 1em;
    outline: none;
    transition: border-color 0.2s;
}

#chat-input:focus {
    border-color: #74c0fc;
}

#chat-form button {
    background: #475e73;
    color: #fff;
    border: none;
    flex: 0 0 auto;
    font-size: 1rem;         /* гасим унаследованный от contact.css `form button {font-size:1.5em}` */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    padding: 0;
    margin: 0;
}

#chat-form button:hover {
    background: #5a7790;
}

#chat-form button:active {
    transform: scale(0.92);
}

#chat-form button > svg {
    display: block;
    flex: 0 0 auto;
}

/* Узкий экран смартфона: кнопки и отступы ужимаются, поле ввода остаётся читаемым.
   16px у поля — чтобы iOS не зумил страницу при фокусе. */
@media (max-width: 480px) {
    #chat-form {
        gap: 6px;
        padding: 6px;
    }
    #chat-form button {
        width: 34px;
        height: 34px;
    }
    #chat-form button.chat-attach {
        width: 32px;
        height: 32px;
    }
    #chat-form button > svg {
        width: 18px;
        height: 18px;
    }
    #chat-form button.chat-attach > svg {
        width: 20px;
        height: 20px;
    }
    #chat-input {
        padding: 8px 12px;
        font-size: 16px;
    }
}

/* ---------- Вложения ---------- */
/* Скрепка — та же кнопка формы, но без синего круга (правила выше задают его всем button). */
#chat-form button.chat-attach {
    background: transparent;
    color: #a0a3a6;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
}

#chat-form button.chat-attach:hover {
    background: #2c2c2f;
    color: #e4e5e5;
}

#chat-form button.chat-attach:disabled {
    opacity: .45;
    cursor: default;
}

/* Полоса прогресса загрузки над полем ввода */
.chat-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #1a1a1d;
    border-top: 1px solid #3a3a3a;
    font-size: 0.8em;
    color: #a0a3a6;
}

.chat-upload-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-upload-size {
    flex: 0 0 auto;
    opacity: .75;
}

/* Отмена выбранного файла (до отправки).
   margin/padding задаём явно: в contact.css есть глобальное `button {margin-top:10px; padding:5px}`. */
.chat-upload-cancel {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #a0a3a6;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}

.chat-upload-cancel:hover {
    background: #2c2c2f;
    color: #ff6b6b;
}

.chat-upload-bar {
    flex: 0 0 90px;
    height: 4px;
    border-radius: 2px;
    background: #3a3a3a;
    overflow: hidden;
}

/* Скрепка подсвечена, пока файл выбран, но ещё не отправлен */
#chat-form button.chat-attach.has-file {
    color: #74c0fc;
    background: #2c2c2f;
}

.chat-upload-bar > i {
    display: block;
    height: 100%;
    width: 0;
    background: #74c0fc;
    transition: width .15s linear;
}

/* Пузырь с файлом */
.msg-file {
    margin-top: 4px;
}

.msg-file-img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    border-radius: 10px;
    cursor: pointer;
}

.msg-file-doc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: #e4e5e5;
    text-decoration: none;
    max-width: 240px;
}

.msg-file-doc:hover {
    background: rgba(255, 255, 255, .12);
}

.msg-file-ico {
    flex: 0 0 auto;
    font-size: 1.2em;
}

.msg-file-meta {
    min-width: 0;
}

.msg-file-name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-file-size {
    display: block;
    font-size: 0.8em;
    color: #a0a3a6;
}

/* Пометка вместо удалённого автором файла */
.msg-file-del {
    margin-top: 4px;
    font-size: 0.85em;
    font-style: italic;
    opacity: .7;
}

/* Иконка удаления своего файла — в строке времени, рядом с галочкой статуса.
   margin/padding/font-weight задаём явно: contact.css глобально стилизует все button. */
.msg-del {
    margin: 0 0 0 6px;
    padding: 0 2px;
    background: none;
    border: none;
    color: inherit;
    opacity: .6;
    font-size: 1.1em;
    font-weight: 400;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}

.msg-del:hover {
    opacity: 1;
    color: #ffb3b3;
}

@media (min-width: 768px) {
    .msg { max-width: 60%; }
}

/* ===== Модалка для ввода имени ===== */
.chat-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-modal {
    background: #2c2c2f;
    color: #e4e5e5;
    padding: 18px;
    border-radius: 14px;
    min-width: 280px;
    max-width: 90vw;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .6);
}

.chat-modal-title {
    font-size: 1.05em;
    margin-bottom: 12px;
}

.chat-modal-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 8px;
    background: #1a1a1d;
    color: #e4e5e5;
    border: 1px solid #3a3a3a;
    font-size: 1em;
    outline: none;
    margin-bottom: 14px;
}

.chat-modal-input:focus {
    border-color: #74c0fc;
}

.chat-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.chat-modal-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: .95em;
}

.chat-modal-cancel {
    background: #3a3a3d;
    color: #cfd2d6;
}

.chat-modal-ok {
    background: #475e73;
    color: #fff;
}

.chat-modal-ok:hover {
    background: #5a7790;
}

/* ===== Индикация непрочитанных на табе «Чат» ===== */
#bottom-tabs button.tab-unread {
    color: #ffd43b;
}

#bottom-tabs button.tab-unread::after {
    content: "";
    position: absolute;
    top: 6px;
    right: calc(50% - 16px);
    width: 8px;
    height: 8px;
    background: #ff6b6b;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--tabs-bg);
}

/* ===== Кнопка «Показать предыдущие» ===== */
#chat-load-more {
    align-self: center;
    margin: 6px auto;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #555;
    color: #cfd2d6;
    border-radius: 14px;
    cursor: pointer;
    font-size: .85em;
}

#chat-load-more:hover {
    background: #2c2c2f;
}

/* ===== Маркер статуса своего сообщения ===== */
.msg-status {
    opacity: .6;
}