/*
  Yüzen pencere (istek 7 ve 16, davranış 39-yuzen.js): telsiz kartının araç satırındaki Yüzen Pencere düğmesi
  (.float-tool), görüntü yedeğinin görünmeyen kaynak öğeleri (.float-pip-source) ve yüzen belgenin kendisi
  (body.float-body: başlık, kendi paylaşımının satırı, kameralar veya avatarlar, kontroller).
  Yüzen belge açan sayfanın bütün stil dosyalarını yükler, bu yüzden avatar, konuşma halesi (.is-speaking > .avatar)
  ve kamera görüntüsü (.cam-video) kuralları components.css ve radio.css'ten gelir. Konuşan kişinin halkası
  --live belirteciyle çizilir. Masaüstünde pencere çerçevesizdir, başlık sürükleme alanıdır (-webkit-app-region).
  Durum öznitelikleri: body[data-mode="desktop" | "document"], body[data-kind="cams" | "avatars" | "share"],
  .float-cams[data-count="1" ... "4"], .float-tile.is-speaking, .float-mic.is-off.
  Kurallar: renkler yalnızca var(--...), grid, flex gap, clamp, :is, :where, aspect-ratio ve inset yok.
*/

/* =========================================================
   1. Telsiz kartındaki düğme
   ========================================================= */

/* Yalnızca simge (adı aria-label ve title'da): araç satırında Büyüt ve Telsiz DJ'nin yanında dar kalır, büyümez.
   Satırın sarılması, düğmelerin aralığı ve kalan genişliği paylaşması radio.css .radio-tools kurallarındadır. Bu
   dosya araç satırının bütün çocuklarına kural yazmaz: oyun.css'ten sonra yüklendiği için aynı özgüllükteki bir
   kural telefonda etiketi gizli Oyun düğmesinin büyümeme kuralını (.radio-tools > .game-tool) ezerdi. */
.radio-tools > .radio-tool.float-tool {
  flex: none;
  width: 2.75rem;
  padding: 0;
}

.radio-tool.float-tool > .radio-tool-icon {
  margin-right: 0;
}

.float-tool[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--live);
  background-color: var(--live-bg);
  color: var(--live);
}

/* Görüntü yedeği: tuval ve kaynak görüntü öğeleri belgede durur ama görünmez */
.float-pip-source {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   2. Yüzen belge
   ========================================================= */

.float-body {
  display: flex;
  flex-direction: column;
  font-size: var(--text-sm);
}

/* Uygulamanın arka plan parıltısı yüzen pencerede çizilmez */
.float-body::before {
  display: none;
}

.float-head {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 2rem;
  padding: 0.25rem 0.625rem;
  border-bottom: var(--border-width) solid var(--line);
  background-color: var(--surface-1);
  -webkit-user-select: none;
  user-select: none;
}

.float-body[data-mode="desktop"] .float-head {
  -webkit-app-region: drag;
}

.float-body[data-mode="desktop"] button {
  -webkit-app-region: no-drag;
}

.float-head .cast-led {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
}

.float-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Kendi ekranını paylaşan kişi: "Ekranınız yayında" ve Durdur */
.float-share-bar {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0.25rem 0.625rem;
  border-bottom: var(--border-width) solid var(--line);
  background-color: var(--danger-bg);
}

.float-share-bar .cast-led {
  margin-right: 0.5rem;
}

.float-share-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.float-share-stop {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: 0.5rem;
  padding: 0.125rem 0.625rem;
  border: var(--border-width) solid var(--danger);
  border-radius: var(--radius-pill);
  background-color: var(--surface-1);
  color: var(--danger);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.float-share-stop .icon {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: 0.25rem;
}

/* Görüntü alanı: kameralar üstte, avatar şeridi altta. Kamera yoksa avatarlar ortada. */
.float-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.25rem;
  overflow: hidden;
}

.float-cams {
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-height: 0;
}

.float-tile.is-cam {
  position: relative;
  flex: none;
  width: 100%;
  height: 100%;
  padding: 0.1875rem;
}

.float-cams[data-count="2"] .float-tile.is-cam {
  width: 50%;
}

.float-cams[data-count="3"] .float-tile.is-cam,
.float-cams[data-count="4"] .float-tile.is-cam {
  width: 50%;
  height: 50%;
}

.float-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: var(--border-width) solid var(--line);
  border-radius: var(--radius-card);
  background-color: var(--surface-2);
}

.float-tile.is-cam.is-speaking .float-frame {
  border-color: var(--live);
  box-shadow: 0 0 0 2px var(--live);
}

.float-frame .cam-video {
  border-radius: 0;
}

.float-frame .float-avatar.avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.125rem;
}

.float-tile.is-cam .float-name,
.float-share .float-name {
  position: absolute;
  left: 0.5rem;
  bottom: 0.5rem;
  z-index: 3;
  max-width: calc(100% - 1rem);
  overflow: hidden;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--viewer-bg);
  color: var(--on-viewer);
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Kameraların altındaki küçük avatar şeridi: adlar yalnızca ekran okuyucuda */
.float-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0.375rem 0 0.125rem;
  overflow: hidden;
}

.float-strip .float-tile {
  position: relative;
  flex: none;
  margin: 0 0.3125rem;
}

.float-strip .float-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Kamera yokken avatarlar ve adları */
.float-avatars {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.float-avatars .float-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 4.75rem;
  margin: 0.375rem 0.125rem;
}

.float-avatars .float-avatar.avatar {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.25rem;
}

.float-avatars .float-name {
  max-width: 100%;
  margin-top: 0.375rem;
  overflow: hidden;
  color: var(--text-2);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Konuşan kişinin halkası her temada canlı renkte (istek 7: "konuşunca etrafında yeşil işaret"). Temaların kendi
   halesi (ör. Arcade'in degrade parıltısı) yüzen pencerede çizilmez. */
body.float-body .float-tile.is-speaking > .avatar.has-face .avatar-face {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--live), 0 0 6px 4px var(--halo-1);
}

body.float-body .float-tile.is-speaking > .avatar.has-face::before {
  content: none;
}

.float-tile.is-speaking .float-name {
  color: var(--live);
}

.float-more {
  align-self: center;
  flex: none;
  margin: 0 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-2);
  color: var(--text-2);
  font-size: var(--text-xs);
  white-space: nowrap;
}

/* İzlenen ekran paylaşımı */
.float-share {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--viewer-bg);
}

.float-share-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Kontroller: Mikrofon, Uygulamaya Dön, Kapat */
.float-controls {
  display: flex;
  align-items: center;
  flex: none;
  padding: 0.375rem 0.5rem;
  border-top: var(--border-width) solid var(--line);
  background-color: var(--surface-1);
}

.float-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-control);
  background-color: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-weight: var(--weight-strong);
  cursor: pointer;
}

.float-button + .float-button {
  margin-left: 0.375rem;
}

.float-button:hover {
  background-color: var(--surface-hover);
}

.float-button .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.float-back {
  flex: 1 1 auto;
  min-width: 0;
}

.float-back .icon {
  margin-right: 0.375rem;
}

.float-button-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.float-mic.is-off {
  border-color: var(--danger);
  color: var(--danger);
}