/* Виджет «Играть на своём TikTok-стриме» (вкладка TikTok в /search + лендинг). */

.tt-lb {
  background: var(--surface, rgba(255,255,255,0.06));
  border-radius: 12px;
  margin: 10px 0;
  overflow: hidden;
}

.tt-lb-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: none; background: transparent;
  color: var(--text);
  font: inherit; font-weight: 700; font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.tt-lb-toggle:hover { background: var(--surface-hover, rgba(255,255,255,0.08)); }
.tt-lb-chevron { margin-left: auto; color: var(--muted); transition: transform 160ms ease; }
.tt-lb.expanded .tt-lb-chevron { transform: rotate(180deg); }

/* :not([hidden]) обязателен: голый `display:flex` перебивает браузерный `[hidden]`
   (display:none) — тогда body.hidden=true визуально игнорируется и виджет «не сворачивается». */
.tt-lb-body:not([hidden]) {
  padding: 2px 14px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

.tt-lb-field {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 8px 12px;
}
.tt-lb-at { color: var(--muted); font-weight: 700; }
.tt-lb-input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  color: var(--text); font: inherit; font-size: 15px;
}

.tt-lb-card:not([hidden]) { display: flex; align-items: center; gap: 10px; }
.tt-lb-ava {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--surface, rgba(255,255,255,0.06));
}
.tt-lb-name { font-weight: 700; }

.tt-lb-linkrow:not([hidden]) {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface, rgba(255,255,255,0.06));
  border-radius: 10px;
  padding: 8px 12px;
}
.tt-lb-link {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.tt-lb-copy {
  flex: 0 0 auto;
  border: none; background: var(--surface-strong, rgba(255,255,255,0.12));
  border-radius: 8px; padding: 6px 10px;
  color: var(--text); font-size: 14px; cursor: pointer;
}
.tt-lb-copy:hover { background: var(--surface-hover, rgba(255,255,255,0.16)); }

.tt-lb-preview { color: var(--accent, #7aa2ff); text-decoration: none; font-weight: 600; font-size: 14px; }
.tt-lb-preview:hover { text-decoration: underline; }

.tt-lb-help { display: flex; flex-direction: column; gap: 3px; line-height: 1.45; }
.tt-lb-help a { color: var(--accent, #7aa2ff); text-decoration: none; }
.tt-lb-help a:hover { text-decoration: underline; }

/* Логотип TikTok (нота) в таб-баре — вертикальное выравнивание с текстом. */
.tt-logo { display: inline-block; vertical-align: -2px; }