/* ===== Chat ===== */

.chat-toggle {
    position: fixed;
    top: calc((var(--hdr-h) - 1rem) / 2);
    right: max(1rem, env(safe-area-inset-right));
    z-index: 56;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-sizing: border-box;
    min-width: 7.14rem;
    height: 2.29rem;
    margin: 0 0.86rem 0 0;
    padding: 0 1rem;
    background: transparent;
    border: 1px solid var(--fg-4);
    border-radius: 2px;
    color: var(--fg-2);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity var(--t-med),
        color var(--t-fast),
        border-color var(--t-fast),
        background var(--t-fast),
        box-shadow var(--t-fast);
}

/* Кнопка всегда в одном месте (строчка приложения справа) — только смена chat/close, без переезда top/right. */

.chat-toggle-stack {
    display: grid;
    place-items: center;
}

.chat-toggle-pane {
    grid-area: 1 / 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.57rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 180ms cubic-bezier(.2, .6, .2, 1),
        visibility 0s linear 180ms;
}

.chat-toggle:not(.is-open) .chat-toggle-pane--idle {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 180ms cubic-bezier(.2, .6, .2, 1),
        visibility 0s linear 0s;
}

.chat-toggle.is-open .chat-toggle-pane--open {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 180ms cubic-bezier(.2, .6, .2, 1),
        visibility 0s linear 0s;
}

.app[data-mode="room"] .chat-toggle {
    opacity: 1;
    pointer-events: auto;
}

.chat-toggle:hover,
.chat-toggle:focus-visible {
    color: var(--fg);
    border-color: var(--fg-2);
    outline: none;
}

.chat-toggle.is-open {
    color: var(--fg);
    border-color: rgba(230, 230, 232, 0.32);
    background: rgba(16, 16, 18, 0.88);
}

.chat-toggle-icon-svg {
    width: 1rem;
    height: 1rem;
}

.chat-toggle-icon-svg path {
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vector-effect: non-scaling-stroke;
}

.chat-toggle-icon-svg circle.chat-toggle-dot {
    fill: currentColor;
    stroke: none;
}

.chat-toggle-label {
    font-size: 0.79rem;
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    white-space: nowrap;
    line-height: 1;
}

.chat-toggle-badge {
    pointer-events: none;
    display: none;
    position: absolute;
    top: -3px;
    right: -3px;
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 6px rgba(200, 200, 204, 0.55);
}

.chat-toggle.has-unread .chat-toggle-badge {
    display: block;
}

.chat-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--chat-panel-w);
    max-width: calc(100vw - 2.29rem);
    right: calc(-1 * var(--chat-panel-w) - 3.14rem);
    z-index: 46;
    box-sizing: border-box;
    padding-top: max(var(--chat-v-inset), env(safe-area-inset-top));
    padding-bottom: max(var(--chat-v-inset), env(safe-area-inset-bottom));
    opacity: 0;
    margin: 0.57rem 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition:
        opacity var(--t-med),
        right 380ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear var(--t-med);
}

.chat-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    right: max(1.14rem, env(safe-area-inset-right));
    transition:
        opacity var(--t-med),
        right 380ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 0s;
}

.chat-panel-inner {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Фон выровнен с панелью настроек (.settings-panel). */
    background: rgba(16, 16, 18, 0.96);
    border: 1px solid var(--fg-4);
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.chat-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0 1rem;
    padding-right: calc(1rem + 7.86rem);
    border-bottom: 1px solid var(--fg-4);
    color: var(--fg-2);
    font-size: 0.79rem;
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    height: 3.57rem;
    box-sizing: border-box;
    flex-shrink: 0;
}

.chat-title {
    line-height: 1;
}

.chat-messages {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.86rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.71rem;
}

.chat-messages::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--fg-3);
    border-radius: 2px;
    border-right: 2px solid transparent;
    background-clip: padding-box;
}

.chat-messages::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-button,
.chat-messages::-webkit-scrollbar-corner {
    background: transparent;
    display: none;
    height: 0;
}

@supports (-moz-appearance: none) {
    .chat-messages {
        scrollbar-width: thin;
        scrollbar-color: var(--fg-3) transparent;
    }
}

.chat-jump-bottom {
    position: absolute;
    z-index: 3;
    left: 50%;
    right: auto;
    bottom: 5.71rem;
    width: 2.57rem;
    height: 2.57rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--fg-4);
    border-radius: 2px;
    background: rgba(22, 22, 26, 0.88);
    color: rgba(230, 230, 232, 0.92);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0.86rem);
    pointer-events: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition:
        opacity var(--t-med),
        transform var(--t-med),
        visibility 0s linear var(--t-med),
        border-color var(--t-fast),
        color var(--t-fast),
        background var(--t-fast);
}

.chat-jump-bottom.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
    transition:
        opacity var(--t-med),
        transform var(--t-med),
        visibility 0s linear 0s,
        border-color var(--t-fast),
        color var(--t-fast),
        background var(--t-fast);
}

.chat-jump-bottom:hover {
    border-color: var(--fg-2);
    color: var(--fg);
}

.chat-jump-bottom svg {
    width: 1.07rem;
    height: 1.07rem;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.chat-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: var(--fg-4);
    font-size: 0.79rem;
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
    transition: opacity var(--t-fast);
}

.chat-panel.has-messages .chat-empty {
    opacity: 0;
}

.chat-msg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    max-width: 88%;
    padding: 0.43rem 0.71rem 0.57rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.57rem;
    animation: chat-msg-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Бейдж реакций выезжает за нижний край бабла — даём дополнительный
   нижний отступ, иначе цепляется за соседнее сообщение. */
.chat-msg.has-reactions {
    margin-bottom: 0.57rem;
}

.chat-msg.chat-msg-self {
    align-self: flex-end;
    background: rgba(230, 230, 232, 0.07);
    border-color: rgba(230, 230, 232, 0.13);
}

@keyframes chat-msg-in {
    from {
        opacity: 0;
        transform: translateY(0.43rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.chat-msg-head {
    display: flex;
    align-items: baseline;
    gap: 0.57rem;
    margin-bottom: 0.29rem;
    color: var(--fg-3);
    font-size: 0.71rem;
    letter-spacing: var(--tracking-wide);
    text-transform: lowercase;
}

.chat-msg-nick {
    color: var(--fg-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 11.43rem;
}

.chat-msg-self .chat-msg-nick {
    color: var(--fg);
}

.chat-msg-time {
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.chat-msg-body {
    font-size: 0.93rem;
    line-height: 1.45;
    color: var(--fg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.chat-msg-link {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--fg-3);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--t-fast);
}

.chat-msg-link:hover {
    text-decoration-color: var(--fg);
}

/* ===== Реакции (лайки / дизлайки) =====
   Два бейджа-стопки (♥ и серые разбитые ♥) в обёртке .chat-msg-reactions,
   выезжающей за нижний край бабла. Без цифры — количество читается визуально.
   Cap = 10 (максимум юзеров в чате — совпадает с MAX_ROOM_USERS). */
.chat-msg-reactions {
    position: absolute;
    bottom: -0.71rem;
    right: 0.57rem;
    display: flex;
    align-items: center;
    gap: 0.29rem;
    z-index: 1;
}

/* Self-msg выровнен вправо — переносим обёртку на левую сторону, чтобы
   она не утыкалась в правый край панели. */
.chat-msg-self .chat-msg-reactions {
    right: auto;
    left: 0.57rem;
}

.chat-msg-likes,
.chat-msg-dislikes {
    display: inline-flex;
    align-items: center;
    height: 1.29rem;
    padding: 0 0.43rem;
    background: rgba(20, 20, 22, 0.96);
    border: 1px solid var(--fg-4);
    border-radius: 999px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transform-origin: 50% 50%;
    animation: like-badge-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition:
        border-color var(--t-fast),
        background var(--t-fast);
}

@keyframes like-badge-in {
    0%   { opacity: 0; transform: scale(0.4) translateY(2px); }
    60%  { opacity: 1; transform: scale(1.12) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Пульс на изменение счётчика — короткая «дрожь» без overshoot, чтобы не
   перебивала like-badge-in при быстрой серии реакций. */
.chat-msg-likes.is-pulsing,
.chat-msg-dislikes.is-pulsing {
    animation: like-badge-pulse 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes like-badge-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.chat-msg-likes:hover,
.chat-msg-dislikes:hover {
    border-color: var(--fg-2);
}

/* Иконка 11×11. Сосед заезжает на ~30% слева — margin-left отрицательный на
   каждую КРОМЕ первой. z-index растёт по DOM-порядку (поздние сверху). */
.chat-msg-likes-heart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.79rem;
    height: 0.79rem;
    color: #e26b7a;
    margin-left: -3px;
    position: relative;
    z-index: 1;
}

.chat-msg-likes-heart:first-child {
    margin-left: 0;
}

.chat-msg-likes-heart:nth-child(2)  { z-index: 2; }
.chat-msg-likes-heart:nth-child(3)  { z-index: 3; }
.chat-msg-likes-heart:nth-child(4)  { z-index: 4; }
.chat-msg-likes-heart:nth-child(5)  { z-index: 5; }
.chat-msg-likes-heart:nth-child(6)  { z-index: 6; }
.chat-msg-likes-heart:nth-child(7)  { z-index: 7; }
.chat-msg-likes-heart:nth-child(8)  { z-index: 8; }
.chat-msg-likes-heart:nth-child(9)  { z-index: 9; }
.chat-msg-likes-heart:nth-child(10) { z-index: 10; }

.chat-msg-likes-heart svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.chat-msg-likes.is-mine {
    border-color: rgba(226, 107, 122, 0.45);
    background: rgba(50, 22, 28, 0.96);
}

/* Дизлайк — «противоположность» лайка: серое разбитое сердечко. Тело залито
   серым (наследует color), .bh-crack — «разрез» цветом фона бейджа (иллюзия
   трещины на залитом теле). is-mine НЕ меняет фон (иначе разрез разъедется по
   цвету) — только бордер. */
.chat-msg-dislikes .chat-msg-likes-heart {
    color: var(--fg-3);
}

.chat-msg-dislikes .bh-crack {
    fill: none;
    stroke: rgba(20, 20, 22, 0.96);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chat-msg-dislikes.is-mine {
    border-color: rgba(230, 230, 232, 0.3);
}

/* ===== Контекстное меню сообщений (ПКМ / long-press) =====
   Dropdown-рецепт из VOID_STYLE_GUIDE.md §5: bg --bg-1, border --fg-4,
   item hover bg --bg-2. Пункты зависят от типа объекта (текст/картинка/
   ссылка/файл) — собираются в chat.js:buildContextMenuItems. */
.chat-ctx-menu {
    position: fixed;
    z-index: 80;
    min-width: 11rem;
    padding: 0.29rem;
    background: var(--bg-1);
    border: 1px solid var(--fg-4);
    border-radius: 3px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.29rem) scale(0.98);
    transform-origin: top left;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.chat-ctx-menu.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.chat-ctx-item {
    display: flex;
    align-items: center;
    gap: 0.71rem;
    width: 100%;
    padding: 0.5rem 0.64rem;
    background: transparent;
    border: none;
    border-radius: 2px;
    color: var(--fg-2);
    font: inherit;
    font-size: 0.79rem;
    letter-spacing: var(--tracking);
    text-transform: lowercase;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}

.chat-ctx-item:hover,
.chat-ctx-item:focus-visible {
    background: var(--bg-2);
    color: var(--fg);
    outline: none;
}

.chat-ctx-item:disabled {
    cursor: default;
    color: var(--fg-3);
}

.chat-ctx-item-icon {
    flex-shrink: 0;
    width: 1.14rem;
    height: 1.14rem;
    display: inline-flex;
    color: var(--fg-3);
}

.chat-ctx-item-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1.4;
    fill: none;
}

/* Сердце (лайк) — залитое, как и бейдж-стопка под сообщением. */
.chat-ctx-item-icon.is-like svg {
    fill: currentColor;
    stroke: none;
    color: #e26b7a;
}


.chat-ctx-divider {
    height: 1px;
    margin: 0.29rem 0.36rem;
    background: var(--fg-4);
}