/*
 * Модуль чата (/communicating) — базовые стили под разметку из коммита «refactoring».
 * Временное решение: дополняет правила .com-* из dist/css/styles.css и должен
 * подключаться после него.
 */

:root {
    --com-accent: #826fc0;
    --com-accent-soft: #ede9ff;
    --com-border: #e2e2e2;
    --com-muted: #8d8d8d;
    --com-sidebar-width: 300px;
    /* Высота шапки сайта над чатом — поправить, если чат не влезает в экран */
    --com-top-offset: 120px;
}

/* ---------- Каркас ---------- */

.com-wrapper {
    position: relative;
    align-items: stretch;
    height: calc(100vh - var(--com-top-offset));
    min-height: 420px;
    overflow: hidden;
}

.com-tree {
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--com-sidebar-width);
    background: #fff;
    border-right: 1px solid var(--com-border);
}

.com-content {
    min-width: 0;
}

/* ---------- Вкладки «Чаты / Контакты» ---------- */

.com-left-tabs {
    flex: none;
    border-bottom: 1px solid var(--com-border);
}

.com-left-tab {
    position: relative;
    flex: 1;
    padding: 12px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: var(--com-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    user-select: none;
}

.com-left-tab:hover {
    color: var(--com-accent);
}

.com-left-tab.active {
    color: var(--com-accent);
    border-bottom-color: var(--com-accent);
}

.com-left-tab .counter {
    top: 6px;
    right: 8px;
}

/* ---------- Панели вкладок ---------- */

.com-tree__wrapper.com-left-pane {
    display: none;
    flex: 1;
    flex-direction: column;
    height: auto;
    min-height: 0;
}

.com-tree__wrapper.com-left-pane.active {
    display: flex;
}

.com-tree__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ---------- Список чатов ---------- */

.com-chat-list {
    padding: 6px 0;
}

.com-chat-list .com-room {
    margin: 2px 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: none;
}

.com-chat-list .com-room:hover {
    background: #f3f3f3;
}

.com-chat-list .com-room.active {
    background: var(--com-accent-soft);
}

.com-chat-list .com-room__name span:first-child {
    padding-right: 6px;
}

.com-chat-list .com-room__name .last-message__date {
    padding-right: 0;
}

.com-chat-list .last-message {
    padding-right: 24px;
}

.com-chat-list .com-room .counter {
    top: auto;
    right: 10px;
    bottom: 10px;
    border-radius: 10px;
}

.com-room__create {
    position: static;
    flex: none;
    width: auto;
    margin: 10px;
    border-radius: 6px;
    background: var(--com-accent);
}

.com-room__create:hover {
    opacity: 0.9;
}

/* ---------- Контакты ---------- */

.com-contacts-list {
    padding: 8px 10px;
}

/* Вся строка с человеком открывает чат (см. chat-module.js), отдельная ссылка не нужна */
.com-contacts-list .chat-from-tree {
    display: none;
}

.com-contacts-list .structure.last {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.com-contacts-list .structure.last:hover {
    background: var(--com-accent-soft);
}

.com-contacts-list .structure.last .user-more {
    cursor: pointer;
    text-decoration: none;
}

/* ---------- Окно переписки ---------- */

.com-room__header {
    padding: 14px 16px 0;
    font-size: 14px;
}

.com-room__write {
    padding: 0 10px 10px;
}

.com-room__write textarea {
    flex: 1;
    min-height: 38px;
    max-height: 160px;
    padding: 9px 12px;
    border: 1px solid var(--com-border);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
    resize: none;
    outline: none;
}

.com-room__write textarea:focus {
    border-color: var(--com-accent);
}

.com-room__write .com-send__message {
    display: inline-block;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0 0 0 8px;
    padding: 0;
    line-height: 38px;
    border-radius: 8px;
    background: var(--com-accent);
    color: #fff;
}

.com-room__write .com-send__message:hover {
    opacity: 0.9;
}

/* ---------- Кнопка меню (только мобильные) ---------- */

.com-sidebar-toggle {
    display: none;
}

@media (max-width: 768px) {

    .com-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 20;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 1px solid var(--com-border);
        border-radius: 8px;
        background: #fff;
        color: #555;
        cursor: pointer;
    }

    .com-tree {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 10;
        width: 100%;
        padding-top: 52px;
        border-right: none;
    }

    .com-tree.active {
        display: flex;
    }

    .com-content {
        width: 100%;
    }

    .com-room__header {
        padding-left: 56px;
        min-height: 36px;
    }
}