.watch-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.watch-main { min-width: 0; }
body.has-room .site-header__inner { max-width: 1680px; }
.watch-page.is-room { max-width: 1680px; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.watch-page.is-room .screen { max-width: calc((100dvh - var(--header-h) - 150px) * 16 / 9); }

.room {
    position: sticky; top: calc(var(--header-h) + 16px);
    height: calc(100dvh - var(--header-h) - 40px); min-height: 460px;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    animation: roomIn .45s var(--ease);
}
@keyframes roomIn { from { opacity: 0; transform: translateX(16px); } }
.room__head { padding: 16px 16px 12px; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid var(--line); }
.room__title { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.room__count { font: 700 13px var(--font); color: var(--text-3); margin-left: 4px; }
.room__sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.room__badge {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
    font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: rgba(255, 232, 214, .07); color: var(--text-2);
}
.room__badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.room__badge.is-auto { color: var(--ok); background: rgba(95, 211, 141, .1); }
.room__badge.is-manual { color: var(--gold); background: rgba(255, 213, 79, .1); }
.room__badge.is-off { color: var(--danger); background: rgba(255, 107, 107, .1); }

.people { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); max-height: 132px; overflow-y: auto; }
.person {
    display: flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border-radius: 999px;
    background: rgba(255, 232, 214, .05); font-size: 13px; font-weight: 700; max-width: 100%;
    animation: msgIn .25s var(--ease);
}
.person__ava {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; color: #1a0e08; background: hsl(var(--h) 75% 70%);
    transition: box-shadow .12s;
}
.person.is-speaking .person__ava { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ok); }
.person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.person.is-me .person__name::after { content: ' (вы)'; color: var(--text-3); font-weight: 600; }
.person__host { color: var(--gold); display: flex; }
.person__mic { color: var(--text-3); display: flex; }
.person__mic.is-muted { color: var(--danger); }

.voice { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.voice__note { font-size: 12px; color: var(--text-3); flex-basis: 100%; }
.voice__note:empty { display: none; }
.btn.is-on { background: var(--accent-soft); border-color: rgba(255, 87, 34, .45); }
.btn.is-muted { color: var(--danger); }

.remote { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.remote__time { font: 700 15px var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.remote__btns { display: flex; gap: 6px; margin-left: auto; }
.remote__hint { flex-basis: 100%; font-size: 12px; color: var(--text-3); }
.remote__hint:empty { display: none; }

.chat { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat__empty { margin: auto; text-align: center; color: var(--text-3); font-size: 13px; max-width: 28ch; }
.msg { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; animation: msgIn .25s var(--ease); }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } }
.msg__name { font-weight: 800; color: hsl(var(--h) 75% 72%); margin-right: 6px; }
.msg__time { color: var(--text-3); font-size: 11px; margin-left: 6px; }
.msg--system { color: var(--text-3); font-size: 12px; text-align: center; }
.chat__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--bg-2); }
.chat__input {
    flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-sm);
    background: var(--surface); border: 1px solid var(--line-2); color: var(--text); font: 500 16px var(--font);
}
.chat__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.chat__form .btn { --h: 40px; }

.party-dialog { max-width: 480px; }
.party-dialog p { color: var(--text-2); font-size: 14px; margin-top: 10px; }
.party-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.party-actions .btn--primary { flex: 1; }
.invite-row { display: flex; gap: 8px; }
.danger-link { background: none; border: 0; color: var(--text-3); font: 600 13px var(--font); cursor: pointer; margin-top: 18px; padding: 0; }
.danger-link:hover { color: var(--danger); }

.toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 1100; max-width: calc(100vw - 32px);
    transform: translate(-50%, 20px); opacity: 0; pointer-events: none; text-align: center;
    background: var(--surface-2); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 999px;
    font-size: 14px; font-weight: 600; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    transition: opacity .25s, transform .3s var(--ease);
}
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) {
    .watch-page.is-room { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .room { position: static; height: 72dvh; min-height: 440px; animation-name: msgIn; }
}
@media (max-width: 640px) {
    .watch-head__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .watch-head .watch-head__actions .btn { width: auto; min-width: 0; }
    .room { border-radius: 0; border-left: 0; border-right: 0; height: 78dvh; }
    .person__name { max-width: 96px; }
}