/* ============================================================
   Muhabbetci — katmanlı kullanıcı paneli stilleri
   Kamera Açanlar · Özel Sohbet katlanır başlıkları
   ============================================================ */

.layer-bar {
  display: flex; align-items: center; gap: 9px;
  width: auto;
  margin: 6px 10px 0;
  padding: 9px 11px;
  border-radius: var(--r-sm);
  background: linear-gradient(120deg, rgba(79,140,255,.10), rgba(123,92,255,.06));
  border: 1px solid var(--line);
  color: var(--txt);
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s;
}
.layer-bar:hover {
  border-color: rgba(79,140,255,.5);
  background: linear-gradient(120deg, rgba(79,140,255,.17), rgba(123,92,255,.1));
}
.layer-bar:active { transform: scale(.985); }

.layer-bar.open {
  border-color: rgba(79,140,255,.6);
  background: linear-gradient(120deg, rgba(79,140,255,.2), rgba(123,92,255,.12));
}

.layer-ico { font-size: 14px; flex: 0 0 auto; }
.layer-txt { flex: 1 1 auto; min-width: 0; }

.layer-count {
  font-size: 10.5px; font-weight: 800;
  min-width: 20px; padding: 2px 6px;
  border-radius: 12px;
  text-align: center;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--txt-mute);
  flex: 0 0 auto;
}
.layer-bar.has-unread .layer-count {
  background: rgba(255,59,92,.2);
  border-color: rgba(255,59,92,.5);
  color: #ff8095;
}

.layer-arrow {
  font-size: 11px;
  color: var(--txt-mute);
  transition: transform .22s ease;
  flex: 0 0 auto;
}
.layer-bar.open .layer-arrow { transform: rotate(180deg); }

/* ---- katman gövdesi ---- */
.layer-body {
  margin: 4px 10px 0;
  padding: 4px;
  border-radius: var(--r-sm);
  background: rgba(10,14,22,.6);
  border: 1px solid var(--line);
  animation: layerDrop .2s ease;
}
.layer-body.hidden { display: none; }

@keyframes layerDrop {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.layer-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px;
  max-height: 220px;
  overflow-y: auto;
}

.layer-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .14s, border-color .14s;
  animation: layerIn .18s ease;
}
.layer-item:hover {
  background: rgba(79,140,255,.12);
  border-color: rgba(79,140,255,.32);
}
.layer-item.active {
  background: rgba(79,140,255,.16);
  border-color: rgba(79,140,255,.45);
}
.layer-item.unread { background: rgba(255,59,92,.09); }

@keyframes layerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.layer-av {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
}

.layer-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.layer-name {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layer-name i { font-style: normal; color: var(--txt-mute); font-size: 10.5px; }
.layer-sub {
  font-size: 10px; color: var(--txt-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.layer-live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2fd07a;
  box-shadow: 0 0 0 3px rgba(47,208,122,.2);
  flex: 0 0 auto;
  animation: pulseLive 1.5s ease-in-out infinite;
}
@keyframes pulseLive {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47,208,122,.2); }
  50%      { box-shadow: 0 0 0 5px rgba(47,208,122,.05); }
}

.layer-badge {
  font-size: 10px; font-weight: 800;
  min-width: 18px; padding: 2px 6px;
  border-radius: 10px; text-align: center;
  background: #ff3b5c; color: #fff;
  flex: 0 0 auto;
}
.layer-go {
  font-size: 12px; opacity: .5; flex: 0 0 auto;
}
.layer-item:hover .layer-go { opacity: 1; }

.layer-empty {
  padding: 12px 10px;
  font-size: 11.5px;
  color: var(--txt-mute);
  text-align: center;
  line-height: 1.5;
}

/* ---- hızlı kamera penceresi ---- */
.cam-quick {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 300px;
  border-radius: 14px;
  background: #0b1018;
  border: 1px solid rgba(79,140,255,.4);
  box-shadow: 0 18px 48px rgba(0,0,0,.6);
  z-index: 900;
  overflow: hidden;
  display: none;
  animation: layerDrop .2s ease;
}
.cam-quick.open { display: block; }

.cam-quick-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px;
  background: rgba(79,140,255,.12);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700;
}
.cam-quick-x {
  font-size: 17px; line-height: 1;
  color: var(--txt-mute);
  padding: 0 3px;
}
.cam-quick-x:hover { color: #fff; }

.cam-quick-body {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #06090f;
}
.cam-quick-body video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: none;
}
.cam-quick-body video.on { display: block; }
.cam-quick-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: #fff;
}

.cam-quick-foot {
  padding: 7px 11px;
  font-size: 10.5px;
  color: var(--txt-mute);
  text-align: center;
  border-top: 1px solid var(--line);
}

/* ---- mobil ---- */
@media (max-width: 620px) {
  .layer-bar { margin: 5px 8px 0; padding: 8px 10px; font-size: 12px; }
  .layer-body { margin: 4px 8px 0; }
  .layer-list { max-height: 180px; }
  .layer-item { padding: 8px; }
  .cam-quick {
    right: 8px; left: 8px; bottom: 8px;
    width: auto;
  }
}