/* SharePanel — share с URL+QR + public-toggle. */

.share-panel {
  margin-top: 8px;
  padding: 22px;
  background-color: var(--panel-solid);
  background-image: var(--grad-success);
  border: 1px solid rgba(var(--success-rgb), 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
  animation: pop var(--t-std) ease;
  -webkit-backdrop-filter: var(--blur-heavy);
          backdrop-filter: var(--blur-heavy);
}
.share-panel[hidden] { display: none; }
.share-panel h2 { margin: 0 0 14px; }
.share-panel .qr-wrap { margin: 14px auto; }

/* URL-строка с input + copy-кнопка. */
.room-url-row {
  display: flex; gap: 8px;
  margin: 0 0 14px;
}
.room-url-row input {
  flex: 1; min-width: 0; padding: 10px 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: 14px/1.4 ui-monospace, SFMono-Regular, monospace;
  outline: none;
}

/* QR-обёртка под канвас. */
.qr-wrap {
  display: flex; align-items: center; justify-content: center;
  margin: 14px 0; padding: 14px;
  background: var(--panel-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qr-wrap canvas { display: block; image-rendering: pixelated; max-width: 100%; height: auto; }

/* === Public-toggle (тогглер «Публичная игра») === */
.public-toggle-row {
  display: flex; align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.public-toggle-row[hidden] { display: none; }

.public-toggle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  user-select: none;
}
.public-toggle input { position: absolute; opacity: 0; pointer-events: none; }

/* Лочим тоггл когда комната уже публичная — нельзя выключить. */
.public-toggle-row.locked .public-toggle {
  cursor: default;
  pointer-events: none;
}
.public-toggle-row.locked .public-switch { opacity: 0.7; }

.public-number {
  flex: 0 0 auto;
  height: 30px;
  display: inline-flex; align-items: center;
  padding: 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  background: var(--grad-gold-solid);
  color: #0a0d14;
  border-radius: 100px;
  font-variant-numeric: tabular-nums;
}
.public-number[hidden] { display: none; }

/* === Иконка слева во всех плашках (.public-toggle): глобус 🌐, Twitch SVG, OBS PNG ===
   Единый размер 28×28 для всех трёх вариантов, чтобы визуально совпадали:
   - эмодзи (🌐) рендерится по font-size родителя — задаём 26px.
   - SVG/PNG — переопределяем размеры через CSS (атрибуты width/height в HTML могут быть 20×20). */
.public-icon-block {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
}
.public-icon-block svg { display: block; width: 26px; height: 26px; }
/* Для зрителя твич-комнаты переключатель публичности не нужен — это инфо-строка. */
.public-toggle-row.stream .public-switch { display: none; }
.public-toggle-row.stream #public-sub { display: none; }
.public-toggle-row.stream .public-toggle { cursor: default; }

/* Золотой овал в стрим-режиме: аватарка + ник вместо «#N». */
.public-toggle-row.stream .public-number {
  gap: 6px; padding: 0 12px 0 6px; letter-spacing: 0;
}
.public-number .pn-ava {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
  background: rgba(0,0,0,0.12);
}
.public-number .pn-ava-ph {
  display: inline-flex; align-items: center; justify-content: center;
  color: #0a0d14;
}
.public-number .pn-ava-ph svg { width: 64%; height: 64%; display: block; }
.public-number .pn-name {
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Square-кнопка копирования в room-url-row. */
.share-copy-btn {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.share-copy-btn svg { display: block; }

/* ===== OBS-оверлей: визуальный 1:1 клон твич-плашки (.public-toggle-row.stream),
   но clickable весь row → копирует ссылку. Внутренний .obs-toggle расширяет .public-toggle
   (flex/gap:12px/cursor/user-select). Sub-text скрыт как у .stream; правый элемент —
   та же золотая пилюль .public-number, только с иконкой копирования вместо аватарки. ===== */
.public-toggle-row.obs-row { cursor: pointer; }
.public-toggle-row.obs-row .obs-toggle { cursor: pointer; }
.public-toggle-row.obs-row:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.public-toggle-row.obs-row .public-text .muted { display: none; }
.public-toggle-row.obs-row .obs-icon-img { width: 26px; height: 26px; object-fit: contain; display: block; }
/* Симметричный padding (нет аватарки слева, как у .stream варианта). */
.public-toggle-row.obs-row .obs-pill { padding: 0 10px; color: #0a0d14; }
.public-toggle-row.obs-row .obs-pill svg { display: block; }

@media (max-width: 480px) {
  .share-panel { padding: 18px; }
}