:root {
  --accent: #2e7d5b;
  --bg: #f7f7f5;
  --surface: #fff;
  --surface-2: #f0f0ee;
  --border: #e2e2df;
  --text: #1c1c1a;
  --muted: #767672;
  --err: #b3261e;
  --ok: #1d6b3f;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); position: relative; }
body.modal-open { overflow: hidden; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; position: relative; z-index: 1; }
.wrap.narrow { max-width: 640px; }
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { height: 40px; width: auto; display: block; }
.headline { font-size: 22px; font-weight: 700; margin: 0; }
@media (max-width: 640px) { .headline { font-size: 17px; } }
.who { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.who button { font-size: 12px; }
.who-account-inner { display: inline-flex; align-items: center; gap: 8px; }

.mobile-menu-btn { display: none; width: 38px; height: 38px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); font-size: 18px; line-height: 1; }
.mobile-account { display: none; }
.mobile-menu-backdrop { display: none; position: fixed; inset: 0; background: rgba(20,18,14,.4); z-index: 998; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
/* Панель чата — слегка прозрачная (а не сплошной .card), чтобы водяной знак
   и плывущие иконки из .chat-bg просвечивали в пустых местах между
   сообщениями, даже когда лента уже заполнена и прокручена — сами пузыри
   сообщений (.msg, фон var(--surface-2)) остаются полностью непрозрачными,
   текст не страдает. */
#panel.card { background: rgba(255,255,255,.92); position: relative; z-index: 1; }
.layout { display: grid; grid-template-columns: 1fr 280px; gap: 14px; align-items: start; }
/* У grid/flex-элементов min-width по умолчанию = auto: любой блок с
   white-space:nowrap (панель «Ответ …», цитата, закреп) растягивал колонку
   чата шире её доли и уводил сайдбар за правый край с горизонтальной
   прокруткой. Разрешаем колонкам и таким блокам сжиматься. */
.layout > * { min-width: 0; }
.main .card, .msg, .msg-body { min-width: 0; overflow-wrap: anywhere; }
.reply-edit-inner, .reply-quote-body, .pinned-text, .live-embed-title { min-width: 0; flex: 1 1 auto; }
@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .desktop-account { display: none; }
  .side { display: none; }
  .side.mobile-menu-open {
    display: grid; position: fixed; top: 0; right: 0; height: 100%; width: 86%; max-width: 340px;
    background: var(--bg); padding: 16px; overflow-y: auto; z-index: 999;
    box-shadow: -8px 0 30px rgba(0,0,0,.2); animation: side-in .2s ease-out;
  }
  .side.mobile-menu-open .mobile-account {
    display: block; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted);
  }
  .mobile-menu-backdrop:not([hidden]) { display: block; }
  @keyframes side-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
}
.tabs { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.tabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab-desc { min-height: 18px; margin-bottom: 10px; }
/* Базовое правило .side стоит ПОСЛЕ медиа-запроса выше, поэтому перебивало
   его display:none — сайдбар показывался под чатом на телефоне. Медиа-версия
   ниже с !important — чтобы порядок объявлений больше на это не влиял. */
.side { display: grid; gap: 12px; align-content: start; }
.side a, .side button { display: block; text-align: left; }
@media (max-width: 860px) {
  .side:not(.mobile-menu-open) { display: none !important; }
}

/* --- «Поделиться» под чатом на телефоне (только иконки мессенджеров и
   копирование ссылки — остальное содержимое сайдбара там уже есть в ☰-меню) --- */
.mobile-share { display: none; }
@media (max-width: 860px) { .mobile-share { display: block; margin-top: 12px; } }

/* --- шапка: вкладки чатов + значки (анонс с датами недели, поиск, вложения, участники) --- */
.top { row-gap: 8px; }
.top-bar { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.top-bar .tabs { margin-bottom: 0; flex: 1 1 auto; }
.top-icons { display: flex; align-items: center; gap: 6px; flex: none; }
.top-icon { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; min-width: 34px; padding: 0 9px;
  justify-content: center; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 15px; line-height: 1; }
.top-icon[hidden], .top-chip[hidden] { display: none; }
.top-icon-label { font-size: 12px; font-weight: 600; white-space: nowrap; }
.top-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 10px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13px; color: var(--muted); white-space: nowrap; }
.events-fab-dot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%;
  background: #e53935; animation: live-blink 1.2s ease-in-out infinite; }
.events-fab-dot[hidden] { display: none; }
@media (max-width: 860px) {
  .top { flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
  .top .who { display: none; }
  .brand { order: 0; }
  .brand .headline { display: none; }
  .brand-logo, .top .brand-logo { height: 26px; }
  .mobile-menu-btn { order: 1; flex: none; }
  .top-bar { display: contents; }
  .top-bar .tabs { order: 2; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .top-bar .tabs::-webkit-scrollbar { display: none; }
  .top-bar .tabs button { flex: none; white-space: nowrap; padding: 5px 12px; }
  .top-icons { order: 3; flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 640px) { .brand { display: none; } }
.tab-desc { display: none; }

/* --- сайдбар: тексты и кнопки по центру --- */
.side a, .side button { text-align: center; }
/* <button class="btn-block"> при display:block не растягивается на ширину
   карточки, как <a>, — стоит слева; принудительно во всю ширину */
.side button.btn-block, #askBtn { width: 100%; display: block; margin-left: auto; margin-right: auto; text-align: center; }
.side .card.framed, .side .share-card, .mobile-share, .side .promo-card, .side .review-card { text-align: center; }
.share-row { justify-content: center; }
.test-badge { display: inline-block; background: var(--err); color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; letter-spacing: .04em; }

.framed { border: 2px solid var(--accent) !important; }

/* --- отзыв дня --- */
.review-card { display: grid; }
.review-title { font-weight: 700; margin-bottom: 4px; }
.review-body { line-height: 1.4; }
.review-more { font-style: italic; font-size: 15px; color: var(--text); margin-top: 10px; }

.btn-block { display: block; text-align: center; padding: 9px 14px; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--surface); color: var(--accent); font-weight: 600;
  text-decoration: none; margin-top: 8px; }
.btn-block.primary { background: var(--accent); color: #fff; }

/* --- анонсы / акция --- */
.announce-block + .announce-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.announce-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.announce-title { font-weight: 600; margin: 2px 0 4px; }
.promo-card { border: 1px dashed var(--accent); }
.promo-title { font-weight: 700; margin-bottom: 4px; }

/* --- поделиться (иконки как на сайтах отзывов) --- */
.share-row { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn { width: 38px; height: 38px; border-radius: 50%; border: 0; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; transition: transform .15s, filter .15s; }
.share-btn svg { width: 19px; height: 19px; }
.share-btn:hover { transform: translateY(-2px); }
.share-btn.share-tg, .share-btn.share-vk, .share-btn.share-max { background: transparent; padding: 0; overflow: hidden; }
.share-btn.share-tg img, .share-btn.share-vk img, .share-btn.share-max img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-btn.share-tg:hover, .share-btn.share-vk:hover, .share-btn.share-max:hover { filter: brightness(1.08); }
.share-btn.share-copy { background: var(--surface-2); color: var(--text); padding: 0; margin: 0; line-height: 0;
  display: inline-flex; align-items: center; justify-content: center; }
.share-btn.share-copy svg { display: block; width: 19px; height: 19px; margin: 0; }
.share-btn.share-copy:hover { background: var(--accent); color: #fff; }

/* --- глазок «показать пароль» --- */
.pw-field { position: relative; }
.pw-field input { padding-right: 38px; }
.pw-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.pw-toggle:hover { color: var(--text); }

.mod-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.mod-controls button { font-size: 11px; padding: 3px 8px; }
.hidden-msg { opacity: .6; border: 1px dashed var(--border); }
.log-danger td { color: var(--err); }

.admin-pill { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .03em; margin-left: 6px; }
.tabs button.tab-admin { border-color: var(--accent); }

.crosspost-group { margin-bottom: 12px; }
.crosspost-group-title { font-weight: 700; font-size: 12px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.crosspost-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; }
.crosspost-item input { width: auto; }
.admin-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.admin-add-row input { max-width: 130px; }

/* --- каталог --- */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-items: stretch; }
.catalog-card { display: flex; flex-direction: column; height: 100%; }
.catalog-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; margin-bottom: 8px; background: var(--surface-2); }
.catalog-title { font-weight: 700; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalog-desc { font-size: 13px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* кнопки действий (видео + «в каталог») — друг под другом (в ряд не
   помещаются по тексту, наезжали друг на друга), группа прижата книзу
   карточки, чтобы совпадать по высоте у всех товаров в ряду вне зависимости
   от длины названия/описания */
.catalog-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.catalog-actions .btn-block { margin-top: 0; }

/* --- вложения в сообщениях (фото/видео/кружочек) --- */
#composer { position: relative; }
.composer-box { display: flex; align-items: flex-end; gap: 2px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 24px; padding: 4px 5px; }
.composer-box:focus-within { border-color: var(--accent); }
.composer-box textarea { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none; resize: none; background: transparent;
  padding: 9px 6px; max-height: 200px; line-height: 1.35; border-radius: 0; }
.composer-clip, .composer-send { flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; }
.composer-clip { background: transparent; border: 0; color: var(--muted); }
.composer-clip:hover { color: var(--accent); background: var(--surface-2); }
.composer-send { background: var(--accent); border: 0; color: #fff; }
.composer-send .ico-check { display: none; }
.composer-send.is-edit .ico-plane { display: none; }
.composer-send.is-edit .ico-check { display: block; }
.composer-send:disabled { opacity: .5; }
.clip-menu { position: absolute; left: 4px; bottom: calc(100% - 6px); z-index: 20; min-width: 230px; display: grid; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.clip-menu[hidden] { display: none; }
.clip-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; cursor: pointer; font-size: 14px;
  background: transparent; border: 0; color: var(--text); text-align: left; width: 100%; }
.clip-item:hover { background: var(--surface-2); }
.msg-attach-audio { display: block; margin-top: 6px; max-width: 100%; }
.rate-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.rate-box[hidden] { display: none; }
.stars { display: inline-flex; gap: 2px; }
.star { background: transparent; border: 0; padding: 0 2px; font-size: 26px; line-height: 1; color: #cfc6b0; cursor: pointer; }
.star.on { color: #e9a400; }
.star:hover { color: #f3b71a; }
.tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; font-size: 16px; }
button.tool-btn { color: var(--text); }
.attach-preview-box { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.msg-attach-img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; margin-top: 6px; object-fit: cover; }
.msg-attach-video { max-width: 260px; border-radius: 10px; display: block; margin-top: 6px; }
.msg-attach-round { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; margin-top: 6px; border: 3px solid var(--accent); }
.round-recorder-preview { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 3px solid var(--err); margin: 0 auto; display: block; transform: scaleX(-1); }

.reaction-row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 6px; position: relative; }
.reaction-btn { padding: 2px 8px; font-size: 13px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.reaction-btn.active { background: var(--surface-2); border-color: var(--accent); }
.reaction-add-btn { width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.reaction-picker { position: absolute; top: 30px; left: 0; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap;
  max-width: min(320px, calc(100vw - 60px)); background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 4px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.reaction-picker .reaction-btn { border: 0; font-size: 17px; padding: 2px 4px; background: transparent; }
.reaction-picker .reaction-btn:hover { background: var(--surface-2); }

/* --- «+ Админ» на сообщении: сначала кнопка, по клику — выбор роли --- */
.promote-wrap { position: relative; display: inline-block; }
.promote-picker { position: absolute; bottom: 100%; left: 0; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap;
  max-width: 260px; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }

/* --- Администрирование → Админы: примечание о ролях --- */
.role-legend { display: grid; gap: 4px; margin-bottom: 10px; padding: 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.role-legend b { display: inline-block; min-width: 130px; }
.views-count { font-size: 12px; margin-left: auto; white-space: nowrap; }

/* --- баннеры (уведомления / установка на экран) --- */
.mini-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; flex-wrap: wrap; }
.mini-banner .row { display: flex; gap: 8px; }
.notif-toggle { font-size: 12px; }

button { cursor: pointer; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 14px; }
button.ghost { background: transparent; color: var(--text); border-color: var(--border); }
button:disabled { opacity: .5; cursor: default; }
button:hover:not(:disabled) { filter: brightness(1.06); }
button.ghost:hover:not(:disabled) { background: var(--surface-2); }
button:active:not(:disabled) { transform: scale(.97); filter: brightness(.96); }
button { transition: transform .08s ease, filter .12s ease, background-color .12s ease; }
.err { color: var(--err); font-size: 13px; min-height: 18px; }
.ok-msg { color: var(--ok); font-size: 13px; margin: 8px 0; }
.muted { color: var(--muted); font-size: 13px; }
textarea, input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 14px; }
.msg-search-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.msg-search-bar input { flex: 1; min-width: 140px; }
.msg-search-bar .pill { cursor: pointer; white-space: nowrap; }
.msg-list-wrap { position: relative; }
.msg-list { max-height: 440px; overflow-y: auto; display: grid; gap: 8px; margin-bottom: 10px; }
.msg { padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.msg.staff { background: #e1f1e7; }
.msg[data-unread="1"] { box-shadow: inset 3px 0 0 var(--accent); }
.msg.flash-highlight { animation: msg-flash 1.2s ease-out; }
@keyframes msg-flash { 0% { background: var(--accent); } 100% { background: var(--surface-2); } }
.msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- граница «непрочитанные» и «пилюля» новых сообщений внизу чата --- */
.unread-divider { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--err); margin: 4px 0; }
.unread-divider::before, .unread-divider::after { content: ""; flex: 1; height: 1px; background: var(--err); opacity: .35; }
.new-msg-pill { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; background: var(--accent); color: #fff; border: 0;
  font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; z-index: 2; }

/* --- значок непрочитанных на вкладке комнаты --- */
.unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 999px; background: var(--err); color: #fff; font-size: 10px; font-weight: 700; vertical-align: 2px; }
.tabs button.active .unread-badge { background: #fff; color: var(--accent); }

/* --- цитата ответа внутри сообщения --- */
.reply-quote { border-left: 3px solid var(--accent); padding: 3px 8px; margin-bottom: 5px; border-radius: 4px;
  background: rgba(0,0,0,.03); font-size: 12.5px; cursor: pointer; overflow: hidden; }
.reply-quote-author { font-weight: 700; margin-right: 6px; }
.reply-quote-body { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- планка «ответ на / редактирование» над полем ввода --- */
.reply-edit-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; font-size: 13px; }
.reply-edit-inner { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread { display: grid; gap: 8px; margin: 12px 0; }
.ticket-attach-label { font-size: 12px; color: var(--muted); }
.ticket-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ticket-attach-chip { display: inline-block; font-size: 12px; padding: 3px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); color: var(--accent); text-decoration: none; }
.ticket-attach-chip:hover { background: var(--accent); color: #fff; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: left; }
tr.row-clickable { cursor: pointer; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); font-size: 12px; }
.pill.ok { background: #e1f1e7; color: var(--ok); }
.pill.warn { background: #fdecc8; color: #8a5a00; font-weight: 600; }

.ticket-registry { display: grid; gap: 8px; }
.ticket-row { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid transparent; cursor: pointer; }
.ticket-row:hover { border-color: var(--accent); }
.ticket-row-open { border-color: #e0ad2a; background: #fff8ea; box-shadow: inset 3px 0 0 #e0ad2a; }
.ticket-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.ticket-row-subject { font-weight: 700; font-size: 14px; }
.ticket-row-q { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row-a { font-size: 13px; color: var(--ok); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- видео товара во всплывающем окне (не уводим пользователя на видеохостинг) --- */
.video-embed-wrap { position: relative; width: 100%; padding-top: 56.25%; height: 0; background: #000; border-radius: 8px; overflow: hidden; }
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- модалки --- */
.modal { position: fixed; inset: 0; background: rgba(20,18,14,.45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.modal-card { position: relative; width: 480px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.modal-card.wide { width: 640px; }
.close { position: absolute; top: 8px; right: 8px; padding: 2px 10px; }
[hidden] { display: none !important; }

/* --- FAQ: контент из старой системы + кнопка «задать вопрос», открывается после прокрутки --- */
.faq-scroll { max-height: 360px; overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; margin: 10px 0; }
.faq-content { padding: 14px 16px; }
.faq-content h2 { font-size: 16px; margin: 18px 0 8px; }
.faq-content h2:first-child { margin-top: 0; }
.faq-content details { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface-2); }
.faq-content summary { cursor: pointer; font-weight: 600; }
.faq-content details p { margin: 8px 0 2px; line-height: 1.5; }
.faq-content a { color: var(--accent); }
#faqAskGate { padding: 14px; text-align: center; }
.reveal-btn { opacity: .35; pointer-events: none; transition: opacity .3s; }
.reveal-btn.revealed { opacity: 1; pointer-events: auto; }

/* --- вход: воздушная модалка --- */
.login-overlay { position: fixed; inset: 0; background: rgba(20,18,14,.35); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 1000; }
.login-card { position: relative; max-width: 360px; width: 100%; display: block;
  box-shadow: 0 20px 60px rgba(0,0,0,.18); border-radius: 18px; border: none;
  padding: 28px 24px 22px; animation: login-in .35s ease-out; }
@keyframes login-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.login-card h2 { text-align: center; font-size: 19px; margin: 0 0 6px; }
.auth-lock { width: 56px; height: 56px; border-radius: 50%; background: var(--surface-2); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.auth-lock svg { width: 26px; height: 26px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height: 1.5; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 5px; font-size: 13.5px; }
.btn-full { width: 100%; text-align: center; padding: 11px 14px; }
.msg.err { background: rgba(179,38,30,.1); color: var(--err); padding: 10px 12px; border-radius: 10px;
  font-size: 13.5px; margin-bottom: 12px; }
.auth-restore { display: block; text-align: center; margin-top: 14px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-decoration: none; }
.auth-restore:hover { color: var(--accent); }

/* --- фон чата: логотип-водяной знак + плывущие иконки товаров витрины ---
   position:fixed на .chat-bg держит и логотип, и иконки привязанными к экрану,
   а не к высоте страницы — поэтому водяной знак остаётся виден, даже когда
   лента сообщений уже длинная и .wrap выше окна. */
.chat-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bg-logo { position: absolute; top: 50%; left: 50%; width: 60vmax; max-width: 900px;
  transform: translate(-50%, -50%); opacity: .05; }

.shop-icons-bg { position: absolute; inset: 0; overflow: hidden; }
.shop-icon { position: absolute; top: 0; left: 0; border-radius: 14px; object-fit: cover;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); opacity: 0; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .shop-icons-bg { display: none; }
}

/* --- sakura-фон (только бинар) --- */
.sakura-logo { position: absolute; top: 50%; left: 50%; width: 60vmax; max-width: 900px;
  transform: translate(-50%, -50%); opacity: .05; }
.sakura-petal { position: absolute; width: 26px; height: 26px; opacity: .5;
  animation: sakura-fall linear infinite; }
@keyframes sakura-fall {
  0%   { transform: translate(0, -10vh) rotate(0deg); }
  100% { transform: translate(6vw, 110vh) rotate(220deg); }
}
.sakura-petal.p0  { left: 3%;  animation-duration: 26s; animation-delay: 0s; }
.sakura-petal.p1  { left: 10%; animation-duration: 32s; animation-delay: 3s; width: 18px; height: 18px; }
.sakura-petal.p2  { left: 18%; animation-duration: 24s; animation-delay: 6s; }
.sakura-petal.p3  { left: 26%; animation-duration: 34s; animation-delay: 1s; width: 20px; height: 20px; }
.sakura-petal.p4  { left: 34%; animation-duration: 28s; animation-delay: 9s; }
.sakura-petal.p5  { left: 42%; animation-duration: 30s; animation-delay: 4s; width: 22px; height: 22px; }
.sakura-petal.p6  { left: 50%; animation-duration: 25s; animation-delay: 7s; }
.sakura-petal.p7  { left: 58%; animation-duration: 33s; animation-delay: 2s; width: 18px; height: 18px; }
.sakura-petal.p8  { left: 66%; animation-duration: 27s; animation-delay: 10s; }
.sakura-petal.p9  { left: 74%; animation-duration: 31s; animation-delay: 5s; width: 22px; height: 22px; }
.sakura-petal.p10 { left: 82%; animation-duration: 29s; animation-delay: 8s; }
.sakura-petal.p11 { left: 90%; animation-duration: 35s; animation-delay: 0s; width: 20px; height: 20px; }
.sakura-petal.p12 { left: 96%; animation-duration: 23s; animation-delay: 12s; }
.sakura-petal.p13 { left: 55%; animation-duration: 38s; animation-delay: 14s; width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .sakura-petal { animation: none; opacity: .2; }
}

/* --- мобильная адаптация --- */
@media (max-width: 640px) {
  .wrap { padding: 12px; }
  .card { padding: 12px; }
  .modal-card { max-height: 94vh; }
  .faq-scroll iframe { height: 320px; }
  .share-row { justify-content: center; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
  td { border: 0; padding: 2px 0; }
}

/* --- аватар перед именем в сообщении --- */
.msg-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.msg-head .meta { margin-bottom: 0; }
.msg-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; }
.msg-avatar-fallback { display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }

/* --- ссылки внутри текста сообщения --- */
.msg-link { color: #1a63c9; text-decoration: underline; word-break: break-all; }

/* --- панель инструментов комнаты (Вложения / Выбрать) --- */
.room-toolbar { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

/* --- закреплённое сообщение --- */
.pinned-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 8px;
  border-radius: 8px; background: rgba(46,125,91,.08); border: 1px solid var(--accent); cursor: pointer; font-size: 13px; }
.pinned-ico { flex: none; }
.pinned-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinned-pill { background: rgba(46,125,91,.15); color: var(--accent); }

/* --- выбор нескольких сообщений --- */
.msg-select-cb { display: none; width: auto; flex: none; margin: 0; }
.msg-list.select-mode .msg-select-cb { display: inline-block; }
.select-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }

/* --- анонс мероприятий: кнопка вверху чата + всплывающее окно со списком
   (раньше был отдельной колонкой сетки .layout — из-за конфликта медиа-запросов
   ломало мобильную вёрстку, поэтому вынесено в модалку, вне .layout совсем) --- */
.event-week-btn { margin-bottom: 8px; }
.events-list { display: grid; gap: 6px; }
.event-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2); cursor: pointer; font-size: 13px; }
.event-row:hover { filter: brightness(0.97); }
.event-row.disabled { cursor: default; }
.event-time { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); min-width: 46px; }
.event-title { overflow: hidden; text-overflow: ellipsis; }
.event-row.event-past { opacity: .5; }
.event-row.event-next { border: 1px solid var(--accent); background: rgba(46,125,91,.08); }
.event-row.event-next .event-time { color: var(--accent); }
.event-row.event-live { color: #fff; background-size: 200% 100%; cursor: pointer;
  background-image: linear-gradient(120deg, var(--accent) 30%, #4fae82 50%, var(--accent) 70%);
  animation: event-shimmer 1.8s linear infinite, event-pulse 1.8s ease-in-out infinite; }
.event-row.event-live .event-time, .event-row.event-live .event-title { color: #fff; }
@keyframes event-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes event-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(46,125,91,.4); } 50% { box-shadow: 0 0 0 6px rgba(46,125,91,0); } }

.event-row.event-stream:not(.event-live) .event-title { font-weight: 600; }

/* --- встроенная трансляция вверху чата (плеер ВК в момент начала мероприятия) --- */
.live-embed { padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--accent); }
.live-embed-head { display: flex; align-items: center; gap: 8px; }
.live-embed-title { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #e53935;
  animation: live-blink 1.2s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(229,57,53,.5); } 50% { opacity: .6; box-shadow: 0 0 0 5px rgba(229,57,53,0); } }
.live-embed-frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; margin-top: 8px;
  background: #000; border-radius: 8px; overflow: hidden; }
.live-embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rec-dot { flex: none; font-size: 11px; font-weight: 700; color: #fff; background: #e53935;
  border-radius: 999px; padding: 2px 8px; letter-spacing: .02em; }

/* --- Администрирование → Мероприятия (настройка ссылок и трансляции) --- */
.admin-events { display: grid; gap: 10px; }
.admin-event { padding: 10px; border-radius: 8px; background: var(--surface-2); display: grid; gap: 6px; border: 2px solid var(--border); }
.admin-event-wd-1 { border-color: #4C6EF5; }
.admin-event-wd-2 { border-color: #12B886; }
.admin-event-wd-3 { border-color: #F59F00; }
.admin-event-wd-4 { border-color: #7048E8; }
.admin-event-wd-5 { border-color: #E64980; }
.admin-event-wd-6 { border-color: #FA5252; }
.admin-event-wd-7 { border-color: #495057; }
.wd-field-wrap { display: flex; align-items: center; gap: 6px; }
.wd-dot { display: inline-block; vertical-align: middle; width: 11px; height: 11px; border-radius: 50%; flex: none; cursor: help; }
.wd-dot-1 { background: #4C6EF5; }
.wd-dot-2 { background: #12B886; }
.wd-dot-3 { background: #F59F00; }
.wd-dot-4 { background: #7048E8; }
.wd-dot-5 { background: #E64980; }
.wd-dot-6 { background: #FA5252; }
.wd-dot-7 { background: #495057; }
.admin-event-head { font-size: 14px; }
.admin-event-field { display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.admin-event-field input { width: 100%; font-size: 13px; }
.admin-event-short input { max-width: 120px; }
.admin-event-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.admin-event-check input { width: auto; margin: 0; }
.admin-event-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface-2); margin: 4px -10px -10px; padding: 8px 10px;
  border-top: 1px solid var(--border); border-radius: 0 0 8px 8px;
}
.admin-event-grid { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.admin-event-title { flex: 1 1 200px; }
.admin-event-hidden { opacity: .6; }
.admin-event-today { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; background: var(--accent);
  border-radius: 999px; padding: 2px 9px; margin-bottom: 4px; letter-spacing: .02em; }
.admin-add-event { display: grid; gap: 6px; padding: 10px; margin: 10px 0; border-radius: 8px; border: 1px dashed var(--border); }
.admin-live { padding: 10px; margin-bottom: 10px; border-radius: 8px; border: 1px solid var(--accent); background: rgba(46,125,91,.06); display: grid; gap: 6px; }
.admin-live-title { font-weight: 700; }
.admin-live select, .admin-live input:not([type=checkbox]) { width: 100%; font-size: 13px; }
.live-admin-on { display: flex; align-items: center; gap: 8px; }
.live-keys { display: grid; gap: 6px; }
.live-key-row { display: flex; gap: 6px; align-items: center; }
.live-key-row input { flex: 1; min-width: 0; }

/* --- редактор описания товара (Quill) и его вывод в карточке --- */
.cf-desc-editor { min-height: 140px; background: var(--surface); border-radius: 0 0 8px 8px; }
.cf-desc-editor .ql-editor { min-height: 120px; font-family: inherit; font-size: 14px; }
.catalog-desc.ql-content img { max-width: 100%; height: auto; border-radius: 6px; }
.catalog-desc.ql-content p { margin: 0 0 6px; }
.catalog-desc.ql-content ul, .catalog-desc.ql-content ol { padding-left: 18px; margin: 4px 0; }
.catalog-desc.ql-content a { color: #1a63c9; }

/* --- контекстное меню правой кнопкой мыши / долгим тапом на сообщении --- */
.ctx-menu { position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px; display: grid; min-width: 170px; }
.ctx-menu button { text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 6px;
  font-size: 14px; color: var(--text); cursor: pointer; }
.ctx-menu button:hover { background: var(--surface-2); }

/* --- «Переслать» --- */
.fwd-list { display: grid; gap: 6px; }

/* --- «Друзья» --- */
.friends-section { margin-bottom: 14px; }
.friend-row { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 8px; border-radius: 8px; background: var(--surface-2); margin-top: 6px; font-size: 13px; }
.friend-row.row-clickable { cursor: pointer; }

/* --- модалка «Вложения» --- */
.attach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.attach-thumb { aspect-ratio: 1; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface-2); }
.attach-thumb img, .attach-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-list { display: grid; gap: 6px; }
.attach-list-row { padding: 6px 8px; border-radius: 8px; background: var(--surface-2); cursor: pointer;
  font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.composer-login{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;padding:6px 0}
.composer-login button{padding:8px 22px;border-radius:10px;cursor:pointer}

/* --- вкладки-значки в одну строку (только шапка); у активной — с названием --- */
.top-bar .tabs { flex-wrap: nowrap; overflow: hidden; gap: 4px; }
.top-bar .tabs button { position: relative; display: inline-flex; align-items: center; gap: 5px; flex: 1 1 0; min-width: 0; justify-content: center; padding: 6px 8px; }
.top-bar .tabs button.active { flex: 0 0 auto; padding: 6px 12px; }
.tabs .tab-ic { font-size: 17px; line-height: 1; }
.tabs .tab-tx { display: none; white-space: nowrap; }
.tabs button.active .tab-tx { display: inline; }
.tabs .unread-badge { position: absolute; top: -4px; right: -2px; }
.top-bar .tabs button.tab-admin { flex: 0 0 auto; }

/* --- окна (админ-панель, вложения): аккуратные вкладки и кнопки --- */
.modal .tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.modal .tabs button { flex: 0 0 auto; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.modal .tabs button:not(.active) { background: var(--surface-2); color: var(--text); border-color: transparent; }
.modal .tabs button:not(.active):hover { border-color: var(--accent); }
.modal button.sm, .modal button.ghost.sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; font-weight: 600; }
.modal button.danger, .modal button.ghost.danger { background: transparent; color: #d64545; border-color: #d64545; }
.modal td button, .modal .admin-event-actions button, .modal .admin-add-row button { white-space: nowrap; }
.modal td { vertical-align: middle; }
.modal .admin-event-actions { gap: 8px; }
.modal .admin-add-row input { max-width: 160px; }

/* --- «Поделиться»: одна компактная строка; шапка и эта строка всегда на виду --- */
.mobile-share { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 4px 10px; border-radius: 0; background: var(--surface, #fff); }
.wrap { padding-bottom: 52px; }
.share-line { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.share-line .share-label { font-size: 13px; white-space: nowrap; }
.share-line .share-btn { width: 28px; height: 28px; flex: none; }
.share-line .share-btn svg { width: 15px; height: 15px; }
.share-line .share-msg { font-size: 11px; }
.wrap > .top { position: sticky; top: 0; z-index: 30; background: var(--bg, inherit); }
@media (max-width: 860px) {
  .top-bar .tabs { overflow: hidden !important; }
  .top-bar .tabs button { flex: 1 1 0; padding: 5px 6px; }
  .top-bar .tabs button.active { flex: 0 0 auto; padding: 5px 10px; }
  .modal .tabs button { padding: 7px 11px; }
  .share-line .share-label { font-size: 12px; }
  .share-line { gap: 6px; }
}

.maint-banner { position: fixed; inset: 0; z-index: 200; background: rgba(20,20,25,.72); display: flex; align-items: center; justify-content: center; padding: 16px; }
.maint-banner[hidden] { display: none; }
.maint-card { max-width: 380px; background: var(--surface, #fff); color: var(--text, #222); border-radius: 16px; padding: 24px 22px; text-align: center; }
.maint-ic { font-size: 40px; }
.maint-card h2 { margin: 6px 0; }
.maint-card button { margin-top: 10px; padding: 9px 26px; border-radius: 10px; cursor: pointer; }

/* окно эфира не уезжает при прокрутке чата: прилипает под шапкой; убрать можно только кнопкой «Свернуть» */
.live-embed { position: sticky; top: var(--top-h, 56px); z-index: 25; background: var(--surface, #fff); }
.live-embed-frame { max-height: 46vh; aspect-ratio: 16 / 9; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .live-embed-frame { max-height: 34vh; } }
.live-embed-head .ghost.sm { padding: 5px 10px; font-size: 12px; white-space: nowrap; }

/* баннер мероприятия до начала эфира: счётчик — маленькая плашка в углу, картинка почти не закрыта */
.live-poster { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 46vh; margin: 8px auto 0; border-radius: 10px;
  background: #222 center / cover no-repeat; overflow: hidden; }
.live-poster-plain { background: linear-gradient(135deg, var(--accent), #1f2937); display: flex; align-items: center; justify-content: center; }
.live-poster-title { color: #fff; font-weight: 700; font-size: clamp(16px, 3vw, 26px); text-align: center; padding: 0 16px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.live-poster-count { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; line-height: 1.3;
  color: #fff; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.live-poster-count b { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .live-poster { max-height: 34vh; } .live-poster-count { font-size: 11px; padding: 2px 8px; } }

.admin-event-aud { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }

/* эфир развёрнут: видео закреплено в самом верху, шапка скрыта */
body.live-open .wrap > .top { display: none; }
body.live-open .live-embed { top: 0; border-radius: 0 0 10px 10px; }

/* прозрачный слой поверх эфира для зрителей: клики не доходят до Jitsi */
#jitsiMount { position: relative; }
.live-shield { position: absolute; inset: 0; z-index: 5; background: transparent; cursor: default; }

.admin-event-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.banner-thumb { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.banner-thumb[hidden] { display: none; }
.banner-upload-btn { display: inline-block; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); cursor: pointer; font-size: 12px; font-weight: 600; }

/* баннер мероприятия — в рамках плеера (16:9, как окно эфира), картинка целиком без обрезки */
.live-poster:not(.live-poster-plain) { height: auto; max-height: none; aspect-ratio: 16 / 9; width: min(100%, calc((100vh - 110px) * 16 / 9));
  width: min(100%, calc((100dvh - 110px) * 16 / 9)); background-color: #000; background-size: contain; background-position: center; background-repeat: no-repeat; }
.live-poster { width: min(100%, calc((100dvh - 110px) * 16 / 9)); max-height: none; }

/* окно эфира строго 16:9 (без обрезки видео и демонстрации экрана); по высоте не выше экрана */
.live-embed-frame { width: min(100%, calc((100vh - 110px) * 16 / 9)); width: min(100%, calc((100dvh - 110px) * 16 / 9));
  max-height: none; aspect-ratio: 16 / 9; margin: 8px auto 0; }
@media (max-width: 860px) { .live-embed-frame { max-height: none; } }

/* эфир развёрнут: остаётся в колонке чата (в рамках плеера), закреплён вверху; ширина по колонке, 16:9 */
body.live-open .wrap { padding-top: 0; }

/* --- идёт эфир: остаётся только видео и чат. Компьютер — видео слева, чат справа; телефон — видео сверху, чат под ним.
   Шапка, боковая колонка, «Поделиться» скрыты; «Свернуть» возвращает обычный вид --- */
body.live-open .side, body.live-open #tabDesc, body.live-open #bannerArea { display: none !important; }
@media (min-width: 861px) {
  body.live-open { overflow: hidden; }
  body.live-open .wrap { max-width: none; margin: 0; padding: 0 !important; }
  body.live-open .layout { display: block; }
  body.live-open .live-embed { position: fixed; left: 0; top: 0; bottom: 0; right: 400px; width: auto; margin: 0; padding: 8px 12px;
    display: flex; flex-direction: column; background: #000; border: 0; border-radius: 0; box-shadow: none; z-index: 60; }
  body.live-open .live-embed .live-embed-frame, body.live-open .live-embed .live-poster {
    flex: none; width: min(100%, calc((100vh - 76px) * 16 / 9)); max-height: none; margin: auto; }
  body.live-open #panel.card { position: fixed; right: 0; top: 0; bottom: 0; width: 400px; margin: 0; border-radius: 0; z-index: 61;
    overflow-y: auto; box-sizing: border-box; }
}

body.live-open .live-embed-head { flex-wrap: wrap; row-gap: 6px; }
@media (min-width: 861px) {
  body.live-open .live-embed .live-embed-title { color: #fff; }
  body.live-open .live-embed .ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
  body.live-open .live-embed .ghost:hover:not(:disabled) { background: rgba(255,255,255,.12); }
}

.live-connecting { position: absolute; inset: 0; z-index: 4; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* во время эфира строка «Поделиться» остаётся внизу: на компьютере — под чатом в правой колонке */
@media (min-width: 861px) {
  body.live-open .mobile-share { left: auto; right: 0; width: 400px; box-sizing: border-box; z-index: 70; }
  body.live-open #panel.card { bottom: 46px; }
}