* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* #Mobildekal - Bazı Android tarayıcılarında/eski cihazlarda dokunmadan
   sonra oluşan ~300ms'lik gecikmeyi ve yanlışlıkla çift-dokunma
   yakınlaştırmasını (zoom) önler — dokunmalar her cihazda daha tutarlı ve
   hızlı tepki verir. */
button, a, .glow-btn, .comp-icon, [role="button"] {
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  overflow: hidden;
  overscroll-behavior: none;
}

.phone {
  width: 100%;
  height: calc(var(--app-vh, 1vh) * 100);
  height: 100dvh;
  position: relative;
  background: #ffffff;
  overflow: hidden;
  overscroll-behavior: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  /* iPhone'u yan çevirince çentik/köşeler içeriği kesmesin (dikeyde 0'dır) */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* #Mobildekal - Klavye açıkken home çubuğu payı gereksiz: klavyenin hemen üstünde
   boşluk/karartı kalmasın. */
html.kb-open .phone {
  padding-bottom: 0;
}

/* #Mobildekal - iPhone: yazı alanı 16px'den küçükse Safari odaklanınca sayfayı
   kendiliğinden yakınlaştırır ve düzen bozulur (kararma/kayma). Bu yüzden iOS'ta tüm
   yazı alanları en az 16px olur. */
@supports (-webkit-touch-callout: none) {
  input[type="text"],
  input[type="password"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input:not([type]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================================
   ORTAK EKRAN DAVRANIŞI (3 ekran aynı kutunun içinde geçiş yapar)
   ============================================================ */
.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: none;
}

.screen.active {
  display: flex;
  flex-direction: column;
  animation: fadeIn .25s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   YILDIZLI GECE ARKA PLANI (rumuz + cinsiyet ekranları ortak)
   ============================================================ */
.sky-screen {
  position: absolute;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* #Mobildekal - İçeriği dikey ortalayan boşluklar. Ekran yeterince yüksekse
   panel eskisi gibi ortada durur; klavye açılıp alan daralınca boşluklar küçülür ve
   ekran kaydırılabilir olur (eskiden panel/yazı kutusu klavyenin altında kalıp
   erişilemiyordu). */
.sky-screen::before,
.sky-screen::after {
  content: "";
  flex: 1 0 0;
  min-height: 0;
}

.sky {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, #2c1f4a 0%, #1a1030 45%, #0c0818 100%);
  z-index: 0;
}

.stars {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 24% 8%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 35% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 48% 6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 62% 15%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 74% 5%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 84% 20%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 92% 10%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 6% 34%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 18% 42%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 30% 48%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 44% 36%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 56% 44%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 70% 38%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 82% 46%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 95% 34%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 10% 58%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 26% 62%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 40% 55%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 66% 60%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 88% 58%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 15% 72%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 33% 78%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 50% 68%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 58% 82%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 72% 74%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 86% 80%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 96% 70%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 8% 90%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 94%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 38% 88%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 54% 92%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 96%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 90%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 92% 94%, #fff, transparent);
  opacity: .9;
  z-index: 1;
  animation: starsTwinkle 4.5s ease-in-out infinite alternate;
}

.stars::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-image:
    radial-gradient(0.8px 0.8px at 20% 25%, rgba(255,255,255,.7), transparent),
    radial-gradient(0.7px 0.7px at 45% 15%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.9px 0.9px at 65% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(0.7px 0.7px at 85% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 30% 55%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.9px 0.9px at 55% 65%, rgba(255,255,255,.7), transparent),
    radial-gradient(0.7px 0.7px at 75% 75%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.8px 0.8px at 10% 80%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.9px 0.9px at 90% 85%, rgba(255,255,255,.7), transparent);
}

@keyframes starsTwinkle {
  0% { opacity: .75; }
  100% { opacity: 1; }
}

.sky-glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 65%;
  background: radial-gradient(ellipse at 50% 0%, rgba(210, 215, 255, .22), rgba(210, 215, 255, .05) 45%, transparent 70%);
  z-index: 1;
}

/* ============================================================
   CAM PANELLER (rumuz + cinsiyet ekranı ortak kutu görünümü)
   ============================================================ */
.glass-panel {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 400px;
  background: rgba(30, 32, 38, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  color: #fff;
}

/* ---- Rumuz paneli ---- */
.brand-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #1a0f2e;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  box-shadow: 0 0 24px rgba(180, 60, 230, .55);
}

.brand-badge svg {
  width: 26px;
  height: 26px;
}

.brand-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
  text-align: center;
}

.rule-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: rgba(245, 197, 66, .08);
  border: 1px solid rgba(245, 197, 66, .35);
  border-radius: 10px;
}

.rule-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #f5c542;
}

.rule-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5c542;
}

/* Rumuz ekranı: panelin altındaki karşılama yazısı (ekran zaten dikey/ortalı diziliyor) */
.welcome-note {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 400px;
  margin-top: 8px;
  padding: 0 6px;
  text-align: center;
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* Kısa ekranlarda (ör. küçük telefonlar) yazı biraz küçülür ki panele sığsın */
@media (max-height: 640px) {
  .welcome-note {
    font-size: 11.5px;
    line-height: 1.4;
    margin-top: 10px;
  }
}

.glass-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .28);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 16px;
  outline: none;
  margin-bottom: 4px;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.glass-input.shake {
  animation: shake .3s;
  border-color: #e97575;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.field-hint {
  min-height: 14px;
  font-size: 12px;
  color: #f1a2a2;
  margin-bottom: 6px;
}

.glow-btn {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7b3cf0, #a239ea 45%, #d63bd6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(163, 57, 234, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}

.glow-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(163, 57, 234, .55);
}

.glow-btn:active {
  transform: translateY(0);
}

.glow-btn svg {
  width: 18px;
  height: 18px;
}

.glow-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.3);
}

.glow-btn:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ---- Kullanıcı sözleşmesi onay kutusu ---- */
.terms-check-row,
.terms-check-corner {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 16px;
  cursor: pointer;
  user-select: none;
}

.terms-check-corner {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 5;
  max-width: 220px;
  margin: 0;
}

.terms-check-corner .terms-check-text {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
}

.terms-check-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  margin: 10px 0 4px;
  cursor: pointer;
  user-select: none;
}

.terms-check-centered input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.terms-check-centered .terms-check-box {
  width: 17px;
  height: 17px;
  margin-top: 0;
  flex-shrink: 0;
}

.terms-check-centered .terms-link-btn {
  font-size: 13px;
  font-weight: 700;
  display: inline;
  width: auto;
  text-align: left;
  margin-top: 0;
  padding: 0;
}

.terms-check-row input[type="checkbox"],
.terms-check-corner input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.terms-check-box {
  flex-shrink: 0;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}

.terms-check-row input:checked ~ .terms-check-box,
.terms-check-corner input:checked ~ .terms-check-box,
.terms-check-centered input:checked ~ .terms-check-box {
  background: linear-gradient(135deg, #7b3cf0, #a239ea);
  border-color: transparent;
}

.terms-check-row input:checked ~ .terms-check-box::after,
.terms-check-corner input:checked ~ .terms-check-box::after,
.terms-check-centered input:checked ~ .terms-check-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.terms-check-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}

.terms-link-btn {
  display: inline;
  width: auto;
  color: #d9a9ff;
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
}

/* ---- Kullanıcı sözleşmesi modalı ---- */
.terms-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.terms-modal-backdrop.active {
  display: flex;
}

.terms-modal {
  width: 100%;
  max-width: 420px;
  max-height: 78vh;
  max-height: calc(var(--app-vh, 1vh) * 78);
  background: #171b2e;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.terms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.terms-modal-header h2 {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.terms-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
  padding: 4px;
}

.terms-modal-close svg {
  width: 18px;
  height: 18px;
}

.terms-modal-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

.terms-modal-body p {
  margin-bottom: 10px;
}

.terms-modal-body strong {
  color: #fff;
}

.link-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 6px;
  padding: 2px;
}

.login-box {
  display: none;
  flex-direction: column;
  margin-top: 8px;
  padding-top: 8px;
}

.login-box.active {
  display: flex;
}

.member-signup-form {
  display: none;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.member-signup-form.active {
  display: flex;
}

.member-signup-form .glass-input {
  background: rgba(0, 0, 0, .04);
  border-color: #e2ded1;
  color: #1c1c1c;
}

.member-signup-form .glass-input::placeholder {
  color: #9a978c;
}

.panel-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
}

/* ---- Cinsiyet paneli ---- */
.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: linear-gradient(135deg, #7b3cf0, #a239ea);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 7px;
  cursor: pointer;
  margin-bottom: 18px;
}

.back-btn svg {
  width: 15px;
  height: 15px;
}

.gender-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.gender-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
}

.gender-row input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  flex-shrink: 0;
  position: relative;
}

.gender-row input:checked + .radio-dot {
  border-color: #b968f0;
}

.gender-row input:checked + .radio-dot::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  inset: 3px;
  border-radius: 50%;
  background: #b968f0;
}

.gender-icon {
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, .85);
  flex-shrink: 0;
}

.gender-label {
  font-size: 15px;
  font-weight: 600;
}

.glow-btn.full {
  margin-top: 2px;
}

/* ============================================================
   SOHBET EKRANI (bir önceki ekranla birebir aynı tasarım)
   ============================================================ */
.chat-screen {
  background: #efe7d8;
}

.status-space {
  display: none;
}

.topbar {
  position: relative;
  z-index: 5;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 14px;
  border-bottom: 1px solid #e7e2d8;
}

.topbar-left {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/* ---- Özel mesaj anlık bildirimi (toast) ---- */
.dm-toast {
  position: absolute;
  top: 8px;
  left: 50%;
  width: calc(100% - 24px);
  max-width: 400px;
  transform: translate(-50%, -140%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1c1c1c;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  cursor: pointer;
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

.dm-toast.active {
  transform: translate(-50%, 0);
  opacity: 1;
}

.dm-toast-icon {
  flex-shrink: 0;
  display: flex;
  color: #6fb6ff;
}

.dm-toast-icon svg {
  width: 18px;
  height: 18px;
}

.dm-toast-text {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Özel mesaj gelen kutusu (konuşma listesi) ---- */
.dm-list {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px;
}

.dm-list-row {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: #fff;
  padding: 13px 6px;
  border-bottom: 1px solid #f1efe6;
  text-align: left;
  transition: background .12s ease;
}

.dm-list-row .dm-list-open-btn,
.dm-list-row .dm-list-meta {
  transition: transform .18s ease;
}

.dm-list-row.swiped .dm-list-open-btn,
.dm-list-row.swiped .dm-list-meta {
  transform: translateX(-160px);
}

.dm-swipe-actions {
  position: absolute;
  right: -164px;
  top: 0;
  bottom: 0;
  width: 160px;
  display: flex;
  transition: right .18s ease;
}

.dm-list-row.swiped .dm-swipe-actions {
  right: 0;
}

.dm-swipe-btn {
  flex: 1;
  border: none;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.dm-swipe-save { background: #dce8fb; color: #2a6fdb; }
.dm-swipe-delete { background: #fbdcdc; color: #c0392b; }

.dm-inbox-section-title {
  padding: 12px 8px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #a9a48f;
}

.dm-inbox-saved-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #2a6fdb;
}

.dm-inbox-saved-count {
  font-size: 11px;
  font-weight: 700;
  color: #a9a48f;
  letter-spacing: 0;
}

.dm-list-row-saved {
  background: #f3f7fd;
  border-left: 3px solid #2a6fdb;
  padding-left: 3px;
}

.dm-inbox-saved-empty {
  padding: 6px 8px 14px;
  font-size: 12.5px;
  color: #a9a48f;
}

.dm-list-desktop-actions {
  display: none;
}

@media (min-width: 860px) {
  .dm-list-desktop-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dm-list-row.swiped .dm-list-open-btn,
  .dm-list-row.swiped .dm-list-meta {
    transform: none;
  }
  .dm-list-row.swiped .dm-swipe-actions {
    right: -164px;
  }
}

.dm-list-desktop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: #eeece4;
  color: #8a877a;
  cursor: pointer;
  padding: 0;
}

.dm-list-desktop-btn svg {
  width: 13px;
  height: 13px;
}

.dm-list-desktop-save:hover { background: #dce8fb; color: #2a6fdb; }
.dm-list-desktop-delete:hover { background: #fbdcdc; color: #c0392b; }

.dm-list-row:active {
  background: #f7f4ea;
}

.dm-list-open-btn {
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.dm-list-open-btn .user-row-avatar {
  width: 52px;
  height: 52px;
}

.dm-list-open-btn .user-row-avatar svg {
  width: 32px;
  height: 32px;
}

.dm-list-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.dm-list-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dm-list-name {
  font-size: 15.5px;
  font-weight: 800;
  color: #171717;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-list-name-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2a6fdb;
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
}

.dm-list-preview {
  font-size: 13.5px;
  font-weight: 500;
  color: #6b6858;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

.dm-list-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.dm-list-time {
  font-size: 11.5px;
  color: #a9a48f;
}

.dm-list-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2a6fdb;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.dm-list-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dm-list-remove-btn,
.dm-list-archive-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: #eeece4;
  color: #8a877a;
  cursor: pointer;
  padding: 0;
}

.dm-list-remove-btn svg,
.dm-list-archive-btn svg {
  width: 13px;
  height: 13px;
}

.dm-list-archive-btn.active {
  background: #fde8c9;
  color: #b8860b;
}

/* ---- Bildirimler: Aramalar / İstekler listeleri ---- */
.notif-list {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px;
}

.notif-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid #f1efe6;
}

.notif-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #eceae3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a978c;
}

.notif-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notif-row-avatar svg {
  width: 22px;
  height: 22px;
}

.notif-row-body {
  flex: 1;
  min-width: 0;
}

.notif-row-title {
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-row-sub {
  font-size: 12.5px;
  color: #9a978c;
  margin-top: 2px;
}

.notif-row-action {
  flex-shrink: 0;
  border: 1px solid #2a6fdb;
  background: #eaf2fd;
  color: #2a6fdb;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.notif-row-action.done {
  border-color: #d9d3c4;
  background: #eceae3;
  color: #6b6b6b;
  cursor: default;
}

.notif-row-icon {
  flex-shrink: 0;
  color: #9a978c;
}

.notif-row-icon.missed { color: #e63946; }
.notif-row-icon svg { width: 18px; height: 18px; }

/* ============================================================
   HEDİYE SİSTEMİ
   ============================================================ */
.gift-recipient-row {
  margin-bottom: 14px;
}

.gift-recipient-row label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #8a8778;
  margin-bottom: 6px;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.gift-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  border-radius: 12px;
  padding: 14px 6px;
  cursor: pointer;
}

.gift-card:hover {
  background: #f1efe6;
}

.gift-card-emoji {
  font-size: 30px;
  line-height: 1;
}

.gift-card-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #1c1c1c;
  text-align: center;
}

.gift-card-price {
  font-size: 11.5px;
  font-weight: 700;
  color: #2a6fdb;
}

.gift-card:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---- Genel sohbette herkesin gördüğü kayan hediye bandı (TikTok tarzı) ---- */
.gift-banner-layer {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  pointer-events: none;
}

.gift-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  background: linear-gradient(90deg, #3b1f5c 0%, #7b2ff7 45%, #ff7ac6 100%);
  color: #fff;
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  box-shadow: 0 10px 26px rgba(123, 47, 247, .35), 0 2px 6px rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.35);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-30px) scale(.85);
  animation: giftBannerPop 4s cubic-bezier(.2,.9,.25,1) forwards;
}

/* Bandın üzerinden kayan parlak ışık şeridi (parıltı efekti) */
.gift-banner::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  animation: giftBannerShine 2.2s ease-in-out infinite;
  animation-delay: .5s;
}

.gift-banner-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid rgba(255,255,255,.8);
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

.gift-banner-avatar img,
.gift-banner-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gift-banner-body {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gift-banner-emoji {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
  animation: giftBannerBounce .9s ease-in-out infinite;
}

.gift-banner-text {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-banner-text b {
  color: #ffe066;
  font-weight: 800;
}

@keyframes giftBannerPop {
  0% { opacity: 0; transform: translateY(-30px) scale(.85); }
  10% { opacity: 1; transform: translateY(0) scale(1.06); }
  16% { transform: translateY(0) scale(1); }
  88% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-16px) scale(.94); }
}

@keyframes giftBannerShine {
  0% { left: -60%; }
  100% { left: 130%; }
}

@keyframes giftBannerBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-8deg); }
}

/* ---- Özel mesajda hediye balonu ---- */
.dm-gift-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #fff7e0, #ffe9c7) !important;
  border: 1px solid #f0d99a !important;
}

.dm-gift-emoji {
  font-size: 40px;
  line-height: 1;
  animation: giftBannerBounce 1.1s ease-in-out infinite;
}

.dm-gift-text {
  font-size: 12.5px;
  font-weight: 700;
  color: #7a5b1e;
  text-align: center;
}

/* ---- Sohbetteki animasyonlu sticker'lar (kendi çizdiğimiz, telifsiz) ---- */
.msg-sticker {
  display: inline-block;
  font-size: 40px;
  line-height: 1;
  animation-duration: 1.1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* ---- Yetkili giriş bildirimi ("umut Owner katıldı" tarzı, gösterişli) ---- */
.staff-join-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  font-size: 13.5px;
  padding: 5px 12px;
  border: 1.5px solid;
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  animation: staffJoinGlow 1.8s ease-in-out infinite;
}

@keyframes staffJoinGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50% { box-shadow: 0 0 10px 1px currentColor; }
}

/* ============================================================
   YETKİLİ GİRİŞ ANİMASYONU — tam ekranı kaplayan, birkaç saniyelik
   gösterişli kutlama (TikTok hediye animasyonu mantığı).
   ============================================================ */
.staff-join-overlay {
  --sjo-color: #b3261e;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--sjo-color) 35%, #0a0a12) 0%, rgba(6,6,12,.92) 55%, rgba(6,6,12,.98) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.staff-join-overlay.active {
  opacity: 1;
}

.sjo-rays {
  position: absolute;
  width: 220vw;
  height: 220vw;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sjo-color) 55%, transparent) 0deg 4deg, transparent 4deg 16deg);
  opacity: .35;
  animation: sjoRaysSpin 9s linear infinite;
}

@keyframes sjoRaysSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sjo-particles {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

.sjo-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  animation: sjoParticleBurst 1.6s ease-out both;
  animation-delay: var(--delay, 0s);
}

@keyframes sjoParticleBurst {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}

.sjo-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  transform: scale(.7);
  opacity: 0;
  animation: sjoContentIn .6s cubic-bezier(.2,1.4,.4,1) forwards;
}

@keyframes sjoContentIn {
  0% { transform: scale(.4) translateY(30px); opacity: 0; }
  60% { transform: scale(1.08) translateY(-4px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.sjo-ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  border: 3px solid var(--sjo-color);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--sjo-color) 18%, transparent), 0 0 40px 6px color-mix(in srgb, var(--sjo-color) 55%, transparent);
  animation: sjoRingPulse 1.4s ease-in-out infinite;
  background: radial-gradient(circle, color-mix(in srgb, var(--sjo-color) 25%, #14141c) 0%, #0e0e16 100%);
}

@keyframes sjoRingPulse {
  0%, 100% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--sjo-color) 18%, transparent), 0 0 40px 6px color-mix(in srgb, var(--sjo-color) 55%, transparent); }
  50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--sjo-color) 10%, transparent), 0 0 60px 12px color-mix(in srgb, var(--sjo-color) 70%, transparent); }
}

.sjo-avatar-wrap {
  width: 70px;
  height: 70px;
  animation: sjoStarSpin 2.6s ease-in-out infinite;
}

.sjo-avatar-wrap svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 10px var(--sjo-color));
}

@keyframes sjoStarSpin {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.12); }
}

.sjo-text {
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  letter-spacing: .3px;
  text-shadow: 0 0 14px var(--sjo-color), 0 0 28px var(--sjo-color);
  max-width: 86vw;
  animation: sjoTextShimmer 1.6s ease-in-out infinite;
}

@keyframes sjoTextShimmer {
  0%, 100% { text-shadow: 0 0 10px var(--sjo-color), 0 0 22px var(--sjo-color); }
  50% { text-shadow: 0 0 20px var(--sjo-color), 0 0 44px var(--sjo-color); }
}

/* ---- Hediye kutlamasının iki satırlı premium metni ---- */
.sjo-gift-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sjo-color);
  margin-bottom: 6px;
  text-shadow: none;
}

.sjo-gift-main {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.sjo-gift-main b {
  color: var(--sjo-color);
  font-weight: 900;
}

.sticker-pop {
  animation-name: stickerPop;
  animation-iteration-count: 1;
  animation-duration: .5s;
}

.sticker-pulse { animation-name: stickerPulse; }
.sticker-spin { animation-name: stickerSpin; animation-timing-function: linear; }
.sticker-flicker { animation-name: stickerFlicker; }
.sticker-bounce { animation-name: stickerBounce; }
.sticker-wobble { animation-name: stickerWobble; }
.sticker-wave { animation-name: stickerWave; }

@keyframes stickerPop {
  0% { transform: scale(.4); opacity: 0; }
  40% { transform: scale(1.15); opacity: 1; }
  70% { transform: scale(.95); }
  100% { transform: scale(1); }
}
@keyframes stickerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.25); }
}
@keyframes stickerSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes stickerFlicker {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.1) translateY(-2px); }
}
@keyframes stickerBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes stickerWobble {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}
@keyframes stickerWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(18deg); }
  75% { transform: rotate(-10deg); }
}

.sticker-btn {
  border: none;
  background: none;
  font-size: 30px;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
}

.sticker-btn:hover {
  background: #f1efe6;
}

.room-title-btn {
  display: block;
  max-width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.room-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #1c1c1c;
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-underline {
  position: absolute;
  left: 16px;
  bottom: 0;
  margin: 0;
  height: 2px;
  width: 113px;
  background: #8b3cf0;
  opacity: 0;
  transition: opacity .15s ease;
}

.tab-underline.active {
  opacity: 1;
}

/* ---- Üst bar: koyu lacivert/mor tema, ince (outline) ikonlar ---- */

.topbar-icons {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

/* ---- Canlı kullanıcı sayısı (yanıp sönen yeşil rozet) ---- */
.live-count-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(64,199,120,.6);
  background: rgba(64,199,120,.14);
  border-radius: 999px;
  padding: 4px 10px 4px 8px;
  cursor: default;
  line-height: 1;
  animation: liveCountPillGlow 1.6s ease-in-out infinite;
}

.live-count-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cbb17;
  flex-shrink: 0;
  animation: liveCountDotBlink 1.2s ease-in-out infinite;
}

.live-count-number {
  font-size: 12.5px;
  font-weight: 700;
  color: #4cbb17;
  font-variant-numeric: tabular-nums;
  min-width: 10px;
  text-align: left;
  transition: transform .18s ease;
}

.live-count-number.live-count-bump {
  animation: liveCountNumberBump .32s ease;
}

@keyframes liveCountDotBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76,187,23,.55); }
  50% { opacity: .35; box-shadow: 0 0 0 4px rgba(76,187,23,0); }
}

@keyframes liveCountPillGlow {
  0%, 100% { border-color: rgba(64,199,120,.6); background: rgba(64,199,120,.14); }
  50% { border-color: rgba(64,199,120,.95); background: rgba(64,199,120,.22); }
}

@keyframes liveCountNumberBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.icon-btn {
  position: relative;
  background: none;
  border: none;
  color: #5c5a66;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  min-width: 20px;
  padding: 2px 0;
  gap: 4px;
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.icon-btn .icon-filled {
  display: none;
}

.icon-btn.active .icon-outline {
  display: none;
}

.icon-btn.active .icon-filled {
  display: block;
}

/* #Mobildekal - Rozet artık ikonun altında normal akışta duruyor (mutlak
   konumlu değil). Bu sayede buton kendi yüksekliğine rozeti de dahil eder
   ve üst barın "align-items:center" özelliği ikon+rozet ikilisini beyaz
   çerçevenin İÇİNDE, tam ortalanmış şekilde konumlandırır — taşma olmaz. */
.icon-btn[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 14px;
  color: #3a382f;
  background: #eceae3;
  border-radius: 8px;
  padding: 1px 6px;
  min-width: 14px;
  text-align: center;
  white-space: nowrap;
}

/* ---- Sohbetler ikonunda okunmamış özel mesaj sayısı: aynı rozet, vurgulu ---- */
.icon-btn.has-unread[data-badge]::after {
  background: #e63946;
  color: #ffffff;
}

.icon-btn.active {
  color: #17171a;
}

/* #Mobildekal - ÖNEMLİ DÜZELTME: Bu çizgi eskiden ikon+rozet kutusunun
   ALT kenarına göre (bottom:-4px) konumlanıyordu; rozet akışa girince
   kutunun yüksekliği değişti, bu da mesaj gelip rozet güncellenince
   çizginin aşağı zıplayıp üst barın "bozulmuş" görünmesine sebep
   oluyordu. Artık ikonun (her zaman 17px) hemen altında SABİT bir
   noktaya (top:21px) göre duruyor — rozet olsun olmasın yeri değişmez.*/
.icon-btn.active::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 21px;
  transform: translateX(-50%);
  width: 26px;
  height: 2px;
  background: #17171a;
}

/* ============================================================
   SEKME PANELLERİ (sohbet / kullanıcılar / mesajlar / bildirim / profil)
   ============================================================ */
.app-body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.tab-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: none;
  flex-direction: column;
  background: #ffffff;
}

.tab-panel.active {
  display: flex;
}

.tab-panel[data-panel="chat"] {
  background: transparent;
}

.chat-area {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background-color: #efe7d8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23e0d5bd' stroke-width='1.4'%3E%3Ccircle cx='30' cy='30' r='10'/%3E%3Cpath d='M60 20 Q70 10 80 20 T100 20'/%3E%3Crect x='120' y='15' width='18' height='14' rx='2'/%3E%3Cpath d='M170 15 l10 12 l-10 12 l-10 -12 z'/%3E%3Ccircle cx='20' cy='80' r='6'/%3E%3Cpath d='M55 70 l14 20 M69 70 l-14 20'/%3E%3Cpath d='M100 65 q10 -12 20 0 q10 12 20 0'/%3E%3Crect x='150' y='65' width='16' height='22' rx='2'/%3E%3Cpath d='M20 130 h20 M30 120 v20'/%3E%3Ccircle cx='75' cy='130' r='9'/%3E%3Cpath d='M110 120 l10 20 l10 -20'/%3E%3Cpath d='M160 115 q8 15 -8 20'/%3E%3Ccircle cx='30' cy='180' r='7'/%3E%3Cpath d='M65 170 l16 18'/%3E%3Cpath d='M65 188 l16 -18'/%3E%3Crect x='105' y='170' width='16' height='16' rx='8'/%3E%3Cpath d='M150 165 q15 5 15 20'/%3E%3Cpath d='M185 46c-2-3-6-3-8 0-1-2-4-2-6 0-2 3-1 6 2 8l6 5 6-5c3-2 4-5 2-8z'/%3E%3Cpath d='M45 98l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Ccircle cx='130' cy='152' r='3.5'/%3E%3Cpath d='M133.5 152v-16l7-2v15'/%3E%3Cpath d='M180 135h12v8a6 6 0 0 1-6 6 6 6 0 0 1-6-6z'/%3E%3Cpath d='M192 138h3a2.5 2.5 0 0 1 0 5h-3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-repeat: repeat;
}

.attach-round-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
  cursor: pointer;
  z-index: 3;
}

.attach-round-btn svg {
  width: 20px;
  height: 20px;
}

.messages {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 70px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ---- Sohbete düşen bildirimler (yetkili girişi, susturma/ban, "X sohbete katıldı"...) ----
   Referanstaki gibi: açık gri yarı saydam çubuk, iki yanda YAY şeklinde siyah köşeler "( )",
   solda giriş + cihaz (mobil/PC) simgesi, rumuz koyu/kalın, yanındaki yazı grimsi.
   - Sola yaslı bildirimler (ban/susturma) mesaj balonlarıyla AYNI hizadan başlar
     (avatar 26px + boşluk 8px = 34px içeriden).
   - Sağdaki 3'lü dikey menünün (48px) altına/üstüne asla taşmaz. */
.system-line,
.system-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 12px;
  background: rgba(238, 236, 231, .94);
  border-left: 2.5px solid #2b2b2b;
  border-right: 2.5px solid #2b2b2b;
  border-top: 0;
  border-bottom: 0;
  border-radius: 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  color: #77746b;
  font-size: 12.5px;
  line-height: 1.3;
}

.system-line {
  align-self: flex-start;
  margin-left: 34px;
  text-align: left;
  max-width: calc(100% - 74px);
}

.system-pill-row {
  align-self: flex-start;
  margin-left: 34px;
  max-width: calc(100% - 74px);
}

.system-pill-row-center {
  align-self: center;
  margin-left: 0;
  max-width: calc(100% - 80px);
}

/* Sol taraftaki simgeler: giriş oku + cihaz (telefon / bilgisayar) */
.system-pill-icons {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4a4a47;
}

.system-pill-icons svg {
  width: 16px;
  height: 16px;
  display: block;
}

.system-pill-text {
  color: #77746b;
  font-size: 12.5px;
  line-height: 1.3;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Rumuz: koyu ve kalın */
.system-pill-text strong,
.system-line strong {
  color: #1c1c1c;
  font-weight: 800;
}

body.dark-theme .system-line,
body.dark-theme .system-pill { background: rgba(48, 47, 56, .95); border-left-color: #cfcdd6; border-right-color: #cfcdd6; box-shadow: none; color: #a7a5b0; }
body.dark-theme .system-pill-icons { color: #b6b4bd; }
body.dark-theme .system-pill-text { color: #a7a5b0; }
body.dark-theme .system-pill-text strong, body.dark-theme .system-line strong { color: #f2f1f7; }

.gift-chat-line {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: giftLinePop .3s ease;
}

.gift-chat-line-emoji {
  font-size: 22px;
  line-height: 1;
}

.gift-chat-line-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.35;
  color: #1c1c1c;
}

.gift-chat-line-text b {
  color: #b8860b;
  font-weight: 700;
}

@keyframes giftLinePop {
  0% { opacity: 0; transform: scale(.85); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { transform: scale(1); }
}

.msg-bubble {
  max-width: 75%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: break-word;
}

.msg-bubble.out {
  align-self: flex-end;
  background: linear-gradient(135deg, #4f5bd5, #8134d6);
  color: #ffffff;
  border-bottom-right-radius: 5px;
  position: relative;
  padding-bottom: 16px;
}

.dm-msg-tick {
  position: absolute;
  right: 10px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,.65);
}

.dm-msg-tick.read {
  color: #4fc3f7;
}

.dm-msg-tick svg {
  width: 100%;
  height: 100%;
}

.msg-bubble.in {
  align-self: flex-start;
  background: #eef1f5;
  color: #1c1c1c;
  border-bottom-left-radius: 5px;
  position: relative;
  padding-bottom: 16px;
}

.dm-msg-time {
  position: absolute;
  bottom: 4px;
  font-size: 10px;
  opacity: .75;
}

.msg-bubble.out .dm-msg-time {
  right: 30px;
  color: rgba(255, 255, 255, .8);
}

.msg-bubble.in .dm-msg-time {
  right: 10px;
  color: #8a8778;
}

.dm-guest-note {
  align-self: center;
  max-width: 80%;
  text-align: center;
  font-size: 13px;
  color: #8a8778;
  background: #eef1f5;
  padding: 10px 16px;
  border-radius: 12px;
  margin-top: 20px;
}

.side-menu {
  position: absolute;
  right: 0;
  top: 56%;
  /* Menüye 4. öğe (galeri) eklenince menü 30px uzadı; ortalı olduğu için üstteki 3 öğenin kaymaması
     için 15px (=30/2) telafi edilir. */
  transform: translateY(calc(-50% - 75px + 15px));
  background: #ffffff;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
  z-index: 4;
}

.side-item {
  position: relative;
  border: none;
  background: none;
  width: 40px;
  padding: 7px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #2b2b2b;
  cursor: pointer;
}

.side-item svg {
  width: 15px;
  height: 15px;
}

.hash-icon {
  font-size: 13px;
  font-weight: 700;
  line-height: 15px;
}

.side-item[data-badge]:not([data-badge=""])::after {
  content: attr(data-badge);
  font-size: 10px;
  color: #6b6b6b;
  background: #eceae3;
  border-radius: 8px;
  padding: 0 6px;
  line-height: 14px;
}

.side-divider {
  width: 70%;
  height: 1px;
  background: #ece7da;
}

/* Güvenlik ağı: Sohbet dışındaki sekmelerde (Mesajlar, Kullanıcılar, Bildirimler,
   Profil) ana sohbetin "Mesaj yaz" çubuğu hiçbir koşulda görünmez. */
body:has(.tab-panel.active:not([data-panel="chat"])) .composer {
  display: none !important;
}

.composer {
  position: relative;
  flex-shrink: 0;
  background: #ffffff;
  border-top: 1px solid #e7e2d8;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Emoji seçici ---- */
.emoji-picker {
  display: none;
  flex-direction: column;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 280px;
  background: #ffffff;
  border-top: 1px solid #e7e2d8;
  box-shadow: 0 -4px 14px rgba(0,0,0,.1);
  z-index: 16;
}

.emoji-picker.active {
  display: flex;
}

.emoji-picker-tabs {
  flex-shrink: 0;
  display: flex;
  border-bottom: 1px solid #eee9dc;
}

.emoji-tab {
  flex: 1;
  border: none;
  background: none;
  padding: 11px 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #9a978c;
  cursor: pointer;
}

.emoji-tab.active {
  color: #1c1c1c;
  box-shadow: inset 0 -2px 0 #1c1c1c;
}

.emoji-picker-body {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.emoji-grid {
  display: none;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 10px;
  height: 100%;
  overflow-y: auto;
  align-content: flex-start;
}

.emoji-grid.active {
  display: grid;
}

.emoji-btn {
  border: none;
  background: none;
  font-size: 23px;
  line-height: 1;
  padding: 6px 0;
  border-radius: 8px;
  cursor: pointer;
}

.emoji-btn:hover {
  background: #f1efe6;
}

/* ---- Ücretsiz/telifsiz klasik piksel emoticon'lar (Pixel Emotes paketi) ---- */
.pixel-emote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pixel-emote-btn img {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}

.msg-pixelemote {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  image-rendering: pixelated;
}

.emoji-gif-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13px;
  color: #9a978c;
  padding: 30px 16px;
  line-height: 1.5;
}

.comp-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9d3c4;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 16px;
  outline: none;
  background: #fdfcf9;
  /* #Mobildekal - artık <textarea>: tek satır input gibi görünsün diye.
     iPhone'da (Safari) "rows" özelliğine dayalı otomatik yükseklik
     güvenilmez davranıp kutuyu tamamen gizleyebiliyordu — bu yüzden
     yüksekliği SABİT veriyoruz, tarayıcının hesaplamasına bırakmıyoruz. */
  height: 38px;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1.2;
  display: block;
}

.comp-icon {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #6b6b6b;
  width: 21px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.comp-icon svg {
  width: 19px;
  height: 19px;
}

/* ---- Radyo butonu ve paneli ---- */
.radio-toggle-btn {
  position: relative;
}

.radio-toggle-btn[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: #2a9df4;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.radio-body {
  display: flex;
  flex-direction: column;
}

.radio-now-playing {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #eaf2fd;
  border: 1px solid #bcd6f7;
  border-radius: 12px;
}

.radio-now-playing.active {
  display: flex;
}

.radio-now-playing-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.radio-station-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.radio-status {
  font-size: 12px;
  color: #2a6fdb;
}

.radio-playpause-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #2a9df4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.radio-playpause-btn svg {
  width: 19px;
  height: 19px;
}

.radio-station-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radio-station-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #2b2b2b;
  cursor: pointer;
  text-align: left;
}

.radio-station-row:hover {
  background: #f1efe6;
}

.radio-station-row.active {
  background: #eaf2fd;
  border-color: #bcd6f7;
  color: #2a6fdb;
}

.radio-dot-icon {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c9c4b4;
}

.radio-station-row.active .radio-dot-icon {
  background: #2a9df4;
  box-shadow: 0 0 0 3px rgba(42, 157, 244, .22);
}

/* ---- Duvar kağıdı paneli ---- */
.wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.wallpaper-swatch {
  position: relative;
  height: 78px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  background-size: 90px 90px;
}

.wallpaper-swatch.active {
  border-color: #2a9df4;
}

.wallpaper-swatch-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2a9df4;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}

.wallpaper-swatch.active .wallpaper-swatch-check {
  display: flex;
}

.wallpaper-swatch-check svg {
  width: 11px;
  height: 11px;
}

.wallpaper-swatch-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 3px 6px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(0,0,0,.32);
}

.send-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #2a9df4;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.send-btn svg {
  width: 18px;
  height: 18px;
}

.comp-input:disabled,
.send-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ---- Özel mesaj (DM) ekranı ---- */
.dm-hint {
  font-size: 12px !important;
  color: #b9b6ab !important;
  max-width: 220px;
}

.dm-conversation {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

.dm-conversation.active {
  display: flex;
}

/* #Mobildekal - özel mesaj ekranı: sağ kenara sabit iki kısayol butonu
   (üstte: özel mesajlar/kayıtlı listesine dön, altta: odadaki kullanıcılar) */
.dm-side-shortcuts {
  position: absolute;
  right: 0;
  top: 44%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
}

.dm-side-shortcut-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 9px 0 0 9px;
  background: #ffffff;
  color: #12151a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, .15);
  cursor: pointer;
  opacity: .94;
}

.dm-side-shortcut-btn svg {
  width: 16px;
  height: 16px;
}

.dm-side-shortcut-btn:active {
  opacity: .7;
}

body.dark-theme .dm-side-shortcut-btn {
  background: #242832;
  color: #e8e6e3;
}

.dm-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #eee9dc;
  background: #fff;
}

.dm-back {
  border: none;
  background: none;
  color: #1c1c1c;
  display: flex;
  cursor: pointer;
  padding: 2px;
}

.dm-back svg {
  width: 20px;
  height: 20px;
}

.dm-name-wrap {
  flex: 1;
  min-width: 0;
}

.dm-name {
  font-size: 15px;
  font-weight: 700;
  color: #1c1c1c;
}

.dm-status-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #9a978c;
  margin-top: 1px;
}

.dm-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dm-header-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: #f1efe6;
  color: #3a382f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.dm-header-btn svg {
  width: 17px;
  height: 17px;
}

/* ---- Sohbette gönderilen fotoğraf / video / ses ---- */
/* ---- Tek kullanımlık fotoğraf/video (DM) ---- */
.dm-once-media {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.05);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #3f3d35;
  max-width: 220px;
}

.dm-once-media svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.dm-once-media-viewed {
  cursor: default;
  opacity: .6;
}

.dm-once-media-locked-self {
  cursor: default;
}

.dm-once-media-opening {
  opacity: .6;
  pointer-events: none;
}

/* ---- DM medya gönderme onay ekranı ---- */
.dm-media-confirm-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 210;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.dm-media-confirm-overlay.active {
  display: flex;
}

.dm-media-confirm-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dm-media-confirm-preview {
  max-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1efe6;
  border-radius: 12px;
  overflow: hidden;
}

.dm-media-confirm-preview img,
.dm-media-confirm-preview video {
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.dm-media-once-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.dm-media-once-toggle input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.dm-media-once-toggle strong {
  display: block;
  font-size: 14px;
  color: #1c1c1c;
}

.dm-media-once-toggle small {
  display: block;
  font-size: 12px;
  color: #7a776c;
  margin-top: 2px;
}

.dm-media-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.once-media-viewer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px 16px;
}

.once-media-viewer.active {
  display: flex;
}

.once-media-viewer-body {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.once-media-viewer-close {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.chat-media-img {
  max-width: 220px;
  max-height: 280px;
  border-radius: 12px;
  cursor: pointer;
  display: block;
}

.chat-media-video {
  max-width: 240px;
  max-height: 300px;
  border-radius: 12px;
  display: block;
  background: #000;
}

.chat-media-audio {
  max-width: 230px;
  display: block;
}

/* ---- Ses kaydı düğmesi: kayıt sırasında ---- */
.comp-icon.recording {
  color: #e63946;
  animation: micPulse 1s ease-in-out infinite;
}

@keyframes micPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* ============================================================
   SESLİ SOHBET ODASI (grup konuşma)
   ============================================================ */

/* ---- Oda tam ekran açılır (esohbet.net referansındaki gibi) ---- */
#voiceRoomSheet.voice-room-fullscreen-sheet {
  height: 100%;
  max-height: none;
  border-radius: 0;
  background: #fdfcf9;
}

#voiceRoomSheet.voice-room-fullscreen-sheet .sheet-body {
  display: flex;
  flex-direction: column;
}

#voiceRoomSheet.voice-room-fullscreen-sheet .voice-room-participants {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#voiceRoomSheet.voice-room-fullscreen-sheet .vr-bottom-bar {
  flex-shrink: 0;
  margin-top: 14px;
}

/* ---- "Sese Bağlan" ön kutusu: küçük, sohbetin üstünde ---- */
.voice-room-prompt-sheet .vr-prompt-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 20px 24px;
  gap: 16px;
}

.vr-prompt-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vr-prompt-bars {
  color: #4cbb17;
  display: flex;
}

.vr-prompt-bars svg {
  width: 20px;
  height: 20px;
}

.vr-prompt-title {
  font-size: 15px;
  font-weight: 800;
  color: #1c1c1c;
}

.vr-connect-btn {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #2f7dea;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(47,125,234,.35);
}

.vr-connect-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

body.dark-theme .vr-prompt-title { color: #f2f1f7; }

.voice-room-participants {
  margin-bottom: 18px;
  min-height: 20px;
}

.vr-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vr-section-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #6b6858;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.vr-view-toggle {
  display: flex;
  gap: 4px;
  background: #f1efe6;
  border-radius: 8px;
  padding: 3px;
}

.vr-view-btn {
  border: none;
  background: none;
  color: #9a978c;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.vr-view-btn svg {
  width: 15px;
  height: 15px;
}

.vr-view-btn.active {
  background: #fff;
  color: #6a5cf5;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.voice-room-empty-note {
  font-size: 13px;
  color: #9a978c;
  width: 100%;
  text-align: center;
  padding: 6px 0;
}

body.dark-theme .voice-room-empty-note { color: #83828a; }

/* ---- Sesli oda durum uyarısı (mikrofon bağlandı/açıldı/kapandı) ---- */
.vr-connected-toast {
  position: absolute;
  top: 62px;
  left: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #4cbb17;
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(76,187,23,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: transform .2s ease, opacity .2s ease, background .15s ease, box-shadow .15s ease;
  font-size: 13.5px;
  font-weight: 700;
}

.vr-connected-toast.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.vr-connected-toast.vr-toast-danger {
  background: #e63946;
  box-shadow: 0 6px 18px rgba(230,57,70,.35);
}

.vr-connected-toast svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ---- Yayıncılar: ızgara görünümü (varsayılan) ---- */
.vr-broadcasters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 10px;
  margin-bottom: 20px;
}

.vr-broadcaster-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
}

.vr-broadcaster-name {
  font-size: 11.5px;
  font-weight: 700;
  color: #1c1c1c;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 72px;
}

.vr-broadcaster-role {
  font-size: 10px;
  color: #9a978c;
  text-align: center;
}

/* ---- Yayıncılar: liste görünümü (görünüm değiştirici ile) ---- */
.vr-broadcasters-grid.vr-list-mode {
  flex-direction: column;
  gap: 8px;
}

.vr-broadcasters-grid.vr-list-mode .vr-broadcaster-card {
  flex-direction: row;
  align-items: center;
  width: 100%;
  gap: 10px;
  background: #fbfaf6;
  border: 1px solid #eee9dc;
  border-radius: 10px;
  padding: 8px 12px;
}

.vr-broadcasters-grid.vr-list-mode .vr-broadcaster-name {
  max-width: none;
  text-align: left;
}

.vr-broadcasters-grid.vr-list-mode .vr-broadcaster-role {
  margin-left: auto;
}

.voice-room-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #eceae3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a978c;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.voice-room-avatar.speaking {
  border-color: #6a5cf5;
  animation: vrSpeakPulse 1.1s ease-in-out infinite;
}

@keyframes vrSpeakPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(106,92,245,.55); }
  50% { box-shadow: 0 0 0 3px rgba(106,92,245,.12); }
}

.voice-room-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-room-avatar svg {
  width: 28px;
  height: 28px;
}

.voice-room-mic-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e63946;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.voice-room-mic-badge.muted {
  display: flex;
}

.voice-room-mic-badge svg {
  width: 9px;
  height: 9px;
}

/* ---- Yayıncı o an konuşuyorsa: mavi hoparlör rozeti (esohbet.net'teki gibi) ---- */
/* ---- Yayıncıyı SADECE bende susturan küçük buton (herkesi etkilemez) ---- */
.vr-local-mute-btn {
  position: absolute;
  top: -3px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  color: #6b6858;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  z-index: 3;
}

.vr-local-mute-btn svg {
  width: 12px;
  height: 12px;
}

.vr-local-mute-btn .vr-local-mute-slash {
  opacity: 0;
}

.vr-local-mute-btn.unmuted {
  background: #4cbb17;
  color: #fff;
}

.vr-local-mute-btn.muted {
  background: #e63946;
  color: #fff;
}

.vr-local-mute-btn.muted .vr-local-mute-slash {
  opacity: 1;
}

/* ---- Dinleyiciler: "N kişi dinliyor" + arama, referanstaki gibi aynı satırda ---- */
.vr-listeners-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.vr-listeners-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #eee9dc;
  background: #fbfaf6;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}

.vr-listeners-toggle-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f1efe6;
  color: #6b6858;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vr-listeners-toggle-icon svg {
  width: 14px;
  height: 14px;
}

.vr-listeners-toggle-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.vr-listeners-count {
  font-size: 12.5px;
  font-weight: 800;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-listeners-sub {
  font-size: 10.5px;
  color: #9a978c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-listeners-body {
  margin-top: 0;
}

.vr-listeners-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.vr-listeners-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #9a978c;
  pointer-events: none;
}

.vr-listeners-search {
  width: 100%;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  color: #1c1c1c;
  border-radius: 8px;
  padding: 10px 12px 10px 36px;
  font-size: 13px;
  outline: none;
}

.vr-listeners-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vr-listener-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 2px;
}

.vr-listener-avatar {
  width: 40px;
  height: 40px;
}

.vr-listener-avatar svg {
  width: 20px;
  height: 20px;
}

.vr-listener-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.vr-listener-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vr-listener-role {
  font-size: 11px;
  color: #9a978c;
}

.vr-listener-mic-off {
  flex-shrink: 0;
  color: #c9c6ba;
  display: flex;
}

.vr-listener-more-btn {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #9a978c;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}

.vr-listener-more-btn:hover {
  background: #f1efe6;
}

.vr-listener-more-btn svg {
  width: 15px;
  height: 15px;
}

body.dark-theme .vr-listener-more-btn:hover { background: #2a2933; }

.vr-listener-mic-off svg {
  width: 17px;
  height: 17px;
}

body.dark-theme .vr-section-title { color: #9c9aa2; }
body.dark-theme .vr-view-toggle { background: #2a2933; }
body.dark-theme .vr-view-btn { color: #83828a; }
body.dark-theme .vr-view-btn.active { background: #38363f; color: #a89cff; }
body.dark-theme .vr-listeners-toggle,
body.dark-theme .vr-broadcasters-grid.vr-list-mode .vr-broadcaster-card { background: #201f27; border-color: #38363f; }
body.dark-theme .vr-listeners-toggle-icon { background: #2a2933; color: #b6b4bd; }
body.dark-theme .vr-listeners-count,
body.dark-theme .vr-broadcaster-name,
body.dark-theme .vr-listener-name { color: #f2f1f7; }
body.dark-theme .vr-listeners-search { background: #201f27; border-color: #38363f; color: #f2f1f7; }

/* ---- Alt buton çubuğu: Mikrofon İste / Mikrofonu Kapat / Sesten Ayrıl ---- */
.vr-bottom-bar {
  display: flex;
  gap: 10px;
}

.vr-bottom-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid #d8d4c6;
  background: #ffffff;
  color: #1c1c1c;
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px 8px;
  border-radius: 10px;
  cursor: pointer;
}

.vr-bottom-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.vr-bottom-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* #Mobildekal - "Mikrofon İste": fıstık yeşili dolgu */
.vr-bottom-btn-request {
  background: #4cbb17;
  border-color: #4cbb17;
  color: #ffffff;
}

/* #Mobildekal - "Sesten Ayrıl": dolgulu kırmızı */
.vr-bottom-btn-danger {
  background: #e63946;
  border-color: #e63946;
  color: #ffffff;
}

body.dark-theme .vr-bottom-btn { background: #201f27; border-color: #38363f; color: #f2f1f7; }
body.dark-theme .vr-bottom-btn-request { background: #4cbb17; border-color: #4cbb17; color: #ffffff; }
body.dark-theme .vr-bottom-btn-danger { background: #e63946; border-color: #e63946; color: #ffffff; }

/* ---- Yetkililer için: bekleyen 'konuşma isteği' listesi ---- */
.voice-room-requests-panel {
  border: 1px solid #f0d9b8;
  background: #fff8ec;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.voice-room-requests-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #a3660b;
  margin-bottom: 8px;
}

.voice-room-requests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-room-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1px solid #f0d9b8;
  border-radius: 8px;
  padding: 8px 10px;
}

.voice-room-request-name {
  font-size: 13px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-room-request-actions {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
}

.voice-room-request-approve,
.voice-room-request-deny {
  border: none;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 11px;
  cursor: pointer;
}

.voice-room-request-approve {
  background: #eaf7de;
  color: #2f7a0e;
  border: 1px solid #bde6a0;
}

.voice-room-request-deny {
  background: #fdecea;
  color: #b3261e;
  border: 1px solid #f6c9c5;
}

.voice-room-live-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.dm-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: #f1e9db;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23e3d6bd' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 24h26a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6H32l-6 6v-6h-6a6 6 0 0 1-6-6V30a6 6 0 0 1 6-6z'/%3E%3Cpath d='M92 30c-4-6-13-4-13 3 0 7 13 15 13 15s13-8 13-15c0-7-9-9-13-3z'/%3E%3Cpath d='M140 20l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Ccircle cx='195' cy='34' r='13'/%3E%3Cpath d='M195 27v7l5 4'/%3E%3Cpath d='M232 20l6 8h-4v10h-4V28h-4z'/%3E%3Crect x='15' y='75' width='20' height='16' rx='2'/%3E%3Cpath d='M15 79l10 6 10-6'/%3E%3Cpath d='M70 70c8-6 20-6 24 3 3 7-3 13-12 18-9-5-15-11-12-18 2-5 6-6 0-3z'/%3E%3Cpath d='M115 68a12 9 0 1 0 0 18 12 9 0 1 0 0-18z'/%3E%3Cpath d='M115 68v14M105 77l20-14M105 68l20 14'/%3E%3Cpath d='M165 65v20M175 62v26M185 68v14'/%3E%3Cpath d='M225 68c0 8-8 10-8 18M217 86h0'/%3E%3Cpath d='M12 120a10 10 0 1 0 20 0 10 10 0 1 0-20 0zM18 116h8v8'/%3E%3Cpath d='M55 118h18v12H55zM60 130l4 5 4-5'/%3E%3Cpath d='M100 112c6-4 14 0 14 7 0 8-14 14-14 14s-14-6-14-14c0-7 8-11 14-7z'/%3E%3Cpath d='M145 110v18h16M153 110v9'/%3E%3Cpath d='M195 112a11 11 0 1 0 0 22 11 11 0 1 0 0-22zM195 106v6M195 128v6M189 117h-6M201 117h6'/%3E%3Cpath d='M20 165l8 14 8-14M28 179v-14'/%3E%3Cpath d='M62 160c0 8 16 8 16 16s-16 8-16 16'/%3E%3Cpath d='M105 160h18v20a9 9 0 0 1-9 9 9 9 0 0 1-9-9z'/%3E%3Cpath d='M150 165a10 10 0 1 1 0 20 10 10 0 1 1 0-20zM144 175h12'/%3E%3Cpath d='M190 158h18l-4 10 4 10h-18z'/%3E%3Cpath d='M225 162v20M219 168l6-6 6 6M219 176l6 6 6-6'/%3E%3Cpath d='M15 210h18v14H15zM24 210v-6a5 5 0 0 1 10 0v6'/%3E%3Cpath d='M60 205c5-5 13-5 13 2 0 6-13 13-13 13s-13-7-13-13c0-7 8-7 13-2z'/%3E%3Cpath d='M105 205l5 12 5-12M110 217v-12'/%3E%3Cpath d='M150 202a12 9 0 1 0 0 18 12 9 0 1 0 0-18z'/%3E%3Cpath d='M195 200v20M203 204v12'/%3E%3Cpath d='M232 205a9 9 0 1 0 0 18 9 9 0 1 0 0-18zM232 209v9l6 3'/%3E%3Ccircle cx='45' cy='45' r='2'/%3E%3Ccircle cx='245' cy='95' r='2'/%3E%3Ccircle cx='45' cy='140' r='2'/%3E%3Ccircle cx='245' cy='185' r='2'/%3E%3Ccircle cx='45' cy='235' r='2'/%3E%3Cg stroke-width='1' opacity='.8'%3E%3Ccircle cx='11.8' cy='11.8' r='1.54'/%3E%3Crect x='42.0' y='2.8' width='18.0' height='18.0' rx='3.6' transform='rotate(135 51.0 11.8)'/%3E%3Cpath d='M74.2 7.0l4.85 9.7 4.85 -9.7' transform='rotate(90 79.0 11.8)'/%3E%3Cpath d='M114.8 11.8h6.8M118.2 8.4v6.8' transform='rotate(45 118.2 11.8)'/%3E%3Cpath d='M142.7 11.8h7.2' transform='rotate(0 146.3 11.8)'/%3E%3Cpath d='M165.3 11.8q4.5-9.0 9.0 0t9.0 0' transform='rotate(135 174.3 11.8)'/%3E%3Cpath d='M208.0 13.7c0-6.5 10.9 -6.5 10.9 0' transform='rotate(90 213.4 11.8)'/%3E%3Ccircle cx='241.6' cy='11.8' r='2.86'/%3E%3Cpath d='M13.3 48.0l3 6.0 3 -6.0' transform='rotate(135 16.3 51.0)'/%3E%3Cpath d='M42.6 51.0h3.6M44.4 49.2v3.6' transform='rotate(90 44.4 51.0)'/%3E%3Cpath d='M67.9 51.0h31.2' transform='rotate(45 83.5 51.0)'/%3E%3Cpath d='M105.3 51.0q3.1-6.3 6.3 0t6.3 0' transform='rotate(0 111.5 51.0)'/%3E%3Cpath d='M147.3 52.1c0-4.1 6.8 -4.1 6.8 0' transform='rotate(135 150.7 51.0)'/%3E%3Ccircle cx='178.8' cy='51.0' r='1.54'/%3E%3Crect x='197.8' y='42.0' width='18.0' height='18.0' rx='3.6' transform='rotate(45 206.8 51.0)'/%3E%3Cpath d='M241.1 46.1l4.85 9.7 4.85 -9.7' transform='rotate(0 245.9 51.0)'/%3E%3Cpath d='M9.7 79.0h21.8' transform='rotate(90 20.6 79.0)'/%3E%3Cpath d='M44.9 79.0q1.9-3.9 3.9 0t3.9 0' transform='rotate(45 48.8 79.0)'/%3E%3Cpath d='M75.0 79.6c0-2.2 3.6 -2.2 3.6 0' transform='rotate(0 76.8 79.0)'/%3E%3Ccircle cx='116.0' cy='79.0' r='6.60'/%3E%3Crect x='137.8' y='72.8' width='12.6' height='12.6' rx='2.5' transform='rotate(90 144.1 79.0)'/%3E%3Cpath d='M180.2 76.0l3 6.0 3 -6.0' transform='rotate(45 183.2 79.0)'/%3E%3Cpath d='M209.4 79.0h3.6M211.3 77.3v3.6' transform='rotate(0 211.3 79.0)'/%3E%3Cpath d='M223.8 79.0h31.2' transform='rotate(135 239.3 79.0)'/%3E%3Cpath d='M6.3 120.8c0-9.4 15.6 -9.4 15.6 0' transform='rotate(45 14.1 118.2)'/%3E%3Ccircle cx='53.1' cy='118.2' r='4.62'/%3E%3Crect x='77.3' y='114.3' width='7.8' height='7.8' rx='1.6' transform='rotate(135 81.3 118.2)'/%3E%3Cpath d='M107.8 116.6l1.6 3.2 1.6 -3.2' transform='rotate(90 109.3 118.2)'/%3E%3Cpath d='M140.6 118.2h15.6M148.4 110.4v15.6' transform='rotate(45 148.4 118.2)'/%3E%3Cpath d='M165.7 118.2h21.8' transform='rotate(0 176.6 118.2)'/%3E%3Cpath d='M211.8 118.2q1.9-3.9 3.9 0t3.9 0' transform='rotate(135 215.7 118.2)'/%3E%3Cpath d='M241.9 118.8c0-2.2 3.6 -2.2 3.6 0' transform='rotate(90 243.8 118.2)'/%3E%3Crect x='16.3' y='144.2' width='4.2' height='4.2' rx='0.8' transform='rotate(0 18.4 146.3)'/%3E%3Cpath d='M39.6 139.3l6.9 13.8 6.9 -13.8' transform='rotate(135 46.5 146.3)'/%3E%3Cpath d='M80.2 146.3h10.9M85.7 140.8v10.9' transform='rotate(90 85.7 146.3)'/%3E%3Cpath d='M107.0 146.3h13.6' transform='rotate(45 113.8 146.3)'/%3E%3Cpath d='M139.8 146.3q1.1-2.1 2.1 0t2.1 0' transform='rotate(0 141.8 146.3)'/%3E%3Cpath d='M173.1 148.8c0-9.4 15.6 -9.4 15.6 0' transform='rotate(135 180.9 146.3)'/%3E%3Ccircle cx='209.1' cy='146.3' r='4.62'/%3E%3Crect x='244.3' y='142.3' width='7.8' height='7.8' rx='1.6' transform='rotate(45 248.2 146.3)'/%3E%3Cpath d='M8.4 174.3h6.8M11.8 170.9v6.8' transform='rotate(135 11.8 174.3)'/%3E%3Cpath d='M47.4 174.3h7.2' transform='rotate(90 51.0 174.3)'/%3E%3Cpath d='M70.0 174.3q4.5-9.0 9.0 0t9.0 0' transform='rotate(45 79.0 174.3)'/%3E%3Cpath d='M112.7 176.2c0-6.5 10.9 -6.5 10.9 0' transform='rotate(0 118.2 174.3)'/%3E%3Ccircle cx='146.3' cy='174.3' r='2.86'/%3E%3Crect x='172.3' y='172.3' width='4.2' height='4.2' rx='0.8' transform='rotate(90 174.3 174.3)'/%3E%3Cpath d='M206.5 167.4l6.9 13.8 6.9 -13.8' transform='rotate(45 213.4 174.3)'/%3E%3Cpath d='M236.1 174.3h10.9M241.6 168.9v10.9' transform='rotate(0 241.6 174.3)'/%3E%3Cpath d='M9.9 213.4q3.1-6.3 6.3 0t6.3 0' transform='rotate(90 16.3 213.4)'/%3E%3Cpath d='M41.0 214.6c0-4.1 6.8 -4.1 6.8 0' transform='rotate(45 44.4 213.4)'/%3E%3Ccircle cx='83.5' cy='213.4' r='1.54'/%3E%3Crect x='102.5' y='204.4' width='18.0' height='18.0' rx='3.6' transform='rotate(135 111.5 213.4)'/%3E%3Cpath d='M145.8 208.6l4.85 9.7 4.85 -9.7' transform='rotate(90 150.7 213.4)'/%3E%3Cpath d='M175.3 213.4h6.8M178.8 210.0v6.8' transform='rotate(45 178.8 213.4)'/%3E%3Cpath d='M203.3 213.4h7.2' transform='rotate(0 206.8 213.4)'/%3E%3Cpath d='M236.9 213.4q4.5-9.0 9.0 0t9.0 0' transform='rotate(135 245.9 213.4)'/%3E%3Ccircle cx='20.6' cy='241.6' r='6.60'/%3E%3Crect x='42.5' y='235.3' width='12.6' height='12.6' rx='2.5' transform='rotate(0 48.8 241.6)'/%3E%3Cpath d='M73.8 238.6l3 6.0 3 -6.0' transform='rotate(135 76.8 241.6)'/%3E%3Cpath d='M114.2 241.6h3.6M116.0 239.8v3.6' transform='rotate(90 116.0 241.6)'/%3E%3Cpath d='M128.5 241.6h31.2' transform='rotate(45 144.1 241.6)'/%3E%3Cpath d='M176.8 241.6q3.1-6.3 6.3 0t6.3 0' transform='rotate(0 183.2 241.6)'/%3E%3Cpath d='M207.8 242.7c0-4.1 6.8 -4.1 6.8 0' transform='rotate(135 211.3 241.6)'/%3E%3Ccircle cx='239.3' cy='241.6' r='1.54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  background-repeat: repeat;
}

.dm-block-note {
  flex-shrink: 0;
  background: #ffe2e0;
  color: #8a1c14;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 14px;
  text-align: center;
  border: 2px solid #e63946;
  border-radius: 10px;
  margin: 8px;
}

body.dark-theme .dm-block-note {
  background: #3a1c1a;
  color: #ff9d94;
  border-color: #b3261e;
}

.dm-composer {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid #e7e2d8;
  background: #fff;
}

/* ---- Boş durum (mesaj / bildirim / kullanıcı listesi) ---- */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px 30px;
  text-align: center;
}

.empty-state svg {
  width: 46px;
  height: 46px;
  color: #b9b6ab;
}

.empty-state p {
  font-size: 14px;
  color: #9a978c;
}

.empty-state p strong {
  color: #6f6c62;
}

/* ---- Bildirimler sekmesi ---- */
.notif-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 12px 0;
}

.notif-tab {
  flex: 1;
  border: 1px solid #e7e2d8;
  background: #fbfaf6;
  color: #6b6b6b;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.notif-tab.active {
  background: #efedE6;
  color: #1c1c1c;
  border-color: #d9d3c4;
}

.notif-body {
  position: relative;
  flex: 1;
}

.notif-view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  display: none;
  flex-direction: column;
}

.notif-view.active {
  display: flex;
}

/* ---- Kullanıcılar paneli: Favori / Takip / Herkes üç sekmeli şerit ---- */
.users-subtabs {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 12px 12px 0;
}

.users-subtab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e7e2d8;
  background: #fbfaf6;
  color: #6b6b6b;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 6px;
  border-radius: 8px;
  cursor: pointer;
}

.users-subtab.active {
  background: #efedE6;
  color: #1c1c1c;
  border-color: #d9d3c4;
}

.users-subtab-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #8a877c;
  background: #ffffff;
  border: 1px solid #e2ded1;
  border-radius: 6px;
  padding: 1px 6px;
}

.users-subtab.active .users-subtab-count {
  color: #1c1c1c;
  border-color: #d9d3c4;
}

.users-subview {
  position: relative;
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.users-subview.active {
  display: flex;
}

/* ---- Profil paneli ---- */
.profile-box {
  position: relative;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 30px;
}

/* ---- Hediye puanı sayacı (profilin üst köşesinde) ---- */
.gift-points-badge {
  position: absolute;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #ffe066, #ffb703);
  color: #4a2e00;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(255, 183, 3, .4);
}

.gift-points-badge-icon {
  font-size: 15px;
}

body.dark-theme .gift-points-badge {
  box-shadow: 0 3px 10px rgba(255, 183, 3, .25);
}

.profile-avatar-wrap {
  position: relative;
  margin-bottom: 14px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #eeece4;
  border: 1px solid #e2ded1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #a9a48f;
}

.profile-avatar svg {
  width: 60px;
  height: 60px;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gender-chip {
  position: absolute;
  top: 2px;
  right: -2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2ded1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gender-chip svg {
  width: 15px;
  height: 15px;
}

.avatar-edit-btn {
  position: absolute;
  bottom: -2px;
  right: 28px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #2a9df4;
  border: 2px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.avatar-edit-btn svg {
  width: 13px;
  height: 13px;
}

.profile-name {
  font-size: 19px;
  font-weight: 800;
  color: #1c1c1c;
}

.profile-status {
  font-size: 13px;
  color: #9a978c;
  margin-bottom: 4px;
}

.profile-vip-stars {
  font-size: 10px;
  letter-spacing: -1.5px;
  color: #c9a227;
  margin-bottom: 4px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.profile-vip-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #c9a227;
  margin-bottom: 10px;
}

.profile-admin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto 18px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(230,57,70,.4);
  background: rgba(230,57,70,.08);
  color: #e63946;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.profile-admin-btn svg {
  width: 15px;
  height: 15px;
}

.profile-jeton-balance {
  font-size: 13.5px;
  font-weight: 700;
  color: #2a6fdb;
  margin-bottom: 18px;
}

/* ---- Yetkili Paneli (yıldıza göre kademeli açılan grid) ---- */
.staff-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 4px 0 14px;
}

.staff-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 6px;
  border-radius: 14px;
  border: none;
  background: #e63946;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.staff-tile svg {
  width: 24px;
  height: 24px;
}

.staff-tile.locked {
  background: #dcd8cd;
  color: #8a877c;
  cursor: not-allowed;
}

.staff-tile.locked::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8a877c url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4"><rect x="5" y="11" width="14" height="9" rx="2"></rect><path d="M8 11V7a4 4 0 0 1 8 0v4"></path></svg>') center / 9px 9px no-repeat;
}

/* ---- Yetkili Paneli: madde detay görünümleri (liste yönetimi / ayarlar) ---- */
.staff-manage-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.staff-manage-add-row input {
  flex: 1;
  border: 1px solid #e2ded1;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fbfaf6;
}

.staff-select {
  border: 1px solid #e2ded1;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  background: #fbfaf6;
  color: #1c1c1c;
}

.staff-manage-add-row button {
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  padding: 13px 18px;
  background: #17171a;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  min-height: 46px;
}

/* #Mobildekal - Yetkili Paneli > Rütbeler: fiyatı elle değiştirme kutusu */
.staff-rank-price-edit {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: #1c1c1c;
}

.staff-rank-price-edit input {
  width: 78px;
  border: 1px solid #e2ded1;
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 14px;
  text-align: right;
  background: #fbfaf6;
  color: #1c1c1c;
  font-weight: 700;
}

.staff-settings-field {
  margin-bottom: 16px;
}

.staff-settings-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #3a382f;
  margin-bottom: 6px;
}

.staff-settings-field textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid #e2ded1;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  background: #fbfaf6;
  resize: vertical;
}

.staff-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e2ded1;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.staff-toggle-row .staff-toggle-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #2b2b2b;
}

.staff-toggle-row .staff-toggle-desc {
  font-size: 12px;
  color: #9a978c;
  margin-top: 2px;
}

.staff-toggle-btn {
  flex-shrink: 0;
  border: 1px solid #d9d3c4;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  background: #eceae3;
  color: #6b6b6b;
  cursor: pointer;
}

.staff-toggle-btn.on {
  background: #4cbb17;
  border-color: #4cbb17;
  color: #fff;
}

.staff-remove-x {
  border: none;
  background: none;
  color: #b3261e;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 4px;
}

.profile-actions {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  color: #3a382f;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 22px;
  cursor: pointer;
  transition: background .15s ease;
}

.profile-btn:hover {
  background: #f1efe6;
}

.profile-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.profile-note {
  min-height: 18px;
  margin-top: 16px;
  font-size: 12.5px;
  color: #8a8778;
  text-align: center;
  max-width: 320px;
}

/* ============================================================
   OVERLAY ORTAK ARKA PLAN (ayarlar / kanallar / gruplar)
   ============================================================ */
.overlay-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: rgba(20, 18, 12, .45);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.overlay-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Ayarlar alt sayfası (bottom sheet) ---- */
.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 62%;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  z-index: 21;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .25s ease;
  box-shadow: 0 -4px 18px rgba(0,0,0,.18);
}

.bottom-sheet.active {
  transform: translateY(0);
}

.sheet-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid #eee9dc;
}

.sheet-header svg {
  width: 20px;
  height: 20px;
  color: #1c1c1c;
}

.sheet-back {
  border: none;
  background: none;
  color: #1c1c1c;
  display: flex;
  cursor: pointer;
  padding: 0;
}

.sheet-header h3 {
  font-size: 17px;
  font-weight: 800;
  color: #1c1c1c;
}

.sheet-body {
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.sheet-row {
  width: 100%;
  text-align: left;
  border: 1px solid #e7e2d8;
  background: #fbfaf6;
  color: #2b2b2b;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 16px;
  border-radius: 10px;
  cursor: pointer;
}

.sheet-row:hover {
  background: #f1efe6;
}

.sheet-note {
  min-height: 16px;
  font-size: 12.5px;
  color: #8a8778;
  padding: 2px 2px 0;
}

/* ---- Ayarlar: çok adımlı sayfa geçişleri ---- */
.sheet-view {
  display: none;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.sheet-view.active {
  display: flex;
}

/* ---- Tercihlerim ---- */
.pref-row {
  padding: 12px 0;
  border-bottom: 1px solid #f1efe6;
}

.pref-row h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: #2a6fdb;
  margin-bottom: 2px;
}

.pref-row p {
  font-size: 12.5px;
  color: #8a8778;
  margin-bottom: 8px;
}

.pref-select {
  width: 100%;
  border: 1px solid #e2ded1;
  background: #fbfaf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a6fdb' stroke-width='2'%3E%3Cpath d='M7 8l5 5 5-5M7 16l5-5 5 5' stroke='%232a6fdb' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px;
  color: #2b2b2b;
  font-size: 16px;
  padding: 11px 34px 11px 12px;
  border-radius: 8px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* ---- Profil Bilgilerim / Şifremi Değiştir ortak form stilleri ---- */
.form-label {
  font-size: 13px;
  font-weight: 700;
  color: #4a4740;
  margin: 14px 0 6px;
}

.form-label:first-child {
  margin-top: 4px;
}

.light-input {
  width: 100%;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  color: #1c1c1c;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 16px;
  outline: none;
}

.light-input::placeholder {
  color: #a9a48f;
}

.photo-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.photo-upload-row .profile-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.photo-upload-row .profile-avatar svg {
  width: 40px;
  height: 40px;
}

.photo-upload-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed #d9d3c4;
  background: #fbfaf6;
  color: #2b2b2b;
  font-size: 13.5px;
  font-weight: 700;
  padding: 14px 10px;
  border-radius: 10px;
  cursor: pointer;
}

.photo-upload-btn svg {
  width: 17px;
  height: 17px;
}

.password-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.password-actions .glow-btn {
  flex: 1;
}

.cancel-btn {
  border: none;
  background: none;
  color: #8a8778;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .02em;
  cursor: pointer;
  padding: 10px 6px;
}
/* ---- Sistem Durumu ---- */
/* ---- Yetki Satın Al: paket listesi ---- */
.vip-package-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.vip-package-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  padding: 13px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
}

.vip-package-row:hover {
  background: #f1efe6;
}

.vip-package-row.vip-package-locked {
  cursor: not-allowed;
  opacity: .6;
  background: #f1efe6;
}

.vip-package-row.vip-package-locked:hover {
  background: #f1efe6;
}

.vip-package-row.vip-package-locked .vip-price {
  color: #9a978c;
  font-weight: 600;
}

.vip-stars {
  flex: 1;
  font-size: 16px;
  letter-spacing: -2px;
  line-height: 1;
}

.vip-price {
  font-size: 14.5px;
  font-weight: 800;
  color: #1c1c1c;
  flex-shrink: 0;
}

.vip-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #9a978c;
}

/* ---- Yetki Satın Al: ödeme bilgileri ---- */
.payment-package-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 16px;
}

.payment-field {
  margin-bottom: 14px;
}

.payment-field-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #8a8778;
  margin-bottom: 5px;
}

.payment-field-value-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  border-radius: 8px;
  padding: 10px 12px;
}

.payment-field-value {
  flex: 1;
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1c;
  word-break: break-word;
}

.payment-copy-btn {
  flex-shrink: 0;
  border: 1px solid #bcd6f7;
  background: #eaf2fd;
  color: #2a6fdb;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.payment-copy-btn:hover {
  background: #ddeafd;
}

.payment-warning {
  font-size: 12.5px;
  color: #b3261e;
  background: #fdecea;
  border: 1px solid #f6c9c5;
  border-radius: 8px;
  padding: 10px 12px;
  line-height: 1.5;
}

/* ============================================================
   SESLİ / GÖRÜNTÜLÜ ARAMA EKRANI
   ============================================================ */
.call-overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: #14161c;
  z-index: 60;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 30px 20px;
  overflow: hidden;
}

.call-overlay.active {
  display: flex;
}

/* ---- Banlandı ekranı ---- */
/* ---- Susturuldu uyarı bandı: kırmızı, kısa süreli, tam ekranı kaplamaz ---- */
.mute-warning-banner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #e63946;
  color: #fff;
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 6px 18px rgba(230,57,70,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: transform .2s ease, opacity .2s ease;
  font-size: 13px;
  font-weight: 700;
}

.mic-granted-banner {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #4cbb17;
  color: #fff;
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 6px 18px rgba(76,187,23,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: transform .2s ease, opacity .2s ease;
  font-size: 13px;
  font-weight: 700;
}

.mic-granted-banner.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mic-granted-banner svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mute-warning-banner.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.mute-warning-banner svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.mute-warning-banner span {
  flex: 1;
}

.mute-warning-close {
  flex-shrink: 0;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.ban-overlay {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: #1c1c1c;
  z-index: 70;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #ffffff;
  padding: 40px 30px;
  text-align: center;
}

.ban-overlay.active {
  display: flex;
}

.ban-overlay svg {
  width: 54px;
  height: 54px;
  color: #e63946;
  margin-bottom: 6px;
}

/* #Mobildekal - Sunucu Sahibi'nin yönetici panelinden gönderdiği tam ekran duyuru */
.broadcast-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 80;
  background: #ffffff;
  flex-direction: column;
}

.broadcast-overlay.active {
  display: flex;
}

.broadcast-overlay-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
  border-bottom: 1px solid #eee9dc;
}

.broadcast-overlay-back {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #d9d3c4;
  background: none;
  color: #4a4636;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.broadcast-overlay-back svg {
  width: 20px;
  height: 20px;
}

.broadcast-overlay-title {
  font-size: 19px;
  font-weight: 700;
  color: #4a4636;
}

.broadcast-overlay-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
}

.broadcast-overlay-text {
  font-size: 17px;
  line-height: 1.5;
  color: #6b6558;
  margin: 0 0 22px;
}

.broadcast-overlay-card {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px dashed #c9c2ae;
  border-radius: 14px;
  padding: 14px 16px;
}

.broadcast-overlay-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: #eee9dc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7b0a0;
}

.broadcast-overlay-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.broadcast-overlay-avatar svg {
  width: 60%;
  height: 60%;
}

.broadcast-overlay-info {
  min-width: 0;
}

.broadcast-overlay-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.broadcast-overlay-name {
  font-size: 17px;
  font-weight: 800;
  color: #1c1c1c;
}

.broadcast-overlay-badge {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.broadcast-overlay-role {
  font-size: 13px;
  color: #8a8778;
  margin-top: 1px;
}

.broadcast-overlay-stars {
  font-size: 16px;
  color: #c9a227;
  margin-top: 4px;
  line-height: 1;
}

body.dark-theme .broadcast-overlay {
  background: #16161a;
}

body.dark-theme .broadcast-overlay-header {
  border-bottom-color: #2a2a32;
}

body.dark-theme .broadcast-overlay-title,
body.dark-theme .broadcast-overlay-name {
  color: #e8e6e3;
}

body.dark-theme .broadcast-overlay-back {
  border-color: #3a3a44;
  color: #e8e6e3;
}

body.dark-theme .broadcast-overlay-card {
  border-color: #3a3a44;
}

body.dark-theme .broadcast-overlay-avatar {
  background: #242832;
}

.ban-overlay h2 {
  font-size: 19px;
  font-weight: 800;
}

.ban-overlay p {
  font-size: 14px;
  color: #cfcbc4;
  max-width: 320px;
}

.ban-overlay .glow-btn {
  margin-top: 14px;
  max-width: 260px;
}

.call-videos {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  z-index: 0;
}

.call-remote-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: #14161c;
}

.call-remote-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.call-local-video {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 96px;
  height: 130px;
  border-radius: 12px;
  overflow: hidden;
  background: #23262f;
  border: 2px solid rgba(255,255,255,.25);
  z-index: 2;
}

.call-local-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.call-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.call-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #2a2d38;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #8a8fa3;
  border: 3px solid rgba(255,255,255,.15);
}

.call-avatar svg {
  width: 54px;
  height: 54px;
}

.call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-peer-name {
  font-size: 19px;
  font-weight: 800;
}

.call-status {
  font-size: 13.5px;
  color: #cfd3e0;
}

.call-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.call-btn {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.15);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

.call-btn svg {
  width: 26px;
  height: 26px;
}

.call-btn.call-btn-accept {
  background: #4cbb17;
}

.call-btn.call-btn-decline,
.call-btn.call-btn-hangup {
  background: #e63946;
}

.call-btn.call-btn-toggle-off {
  background: #ffffff;
  color: #14161c;
}

.call-btn-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #cfd3e0;
}


.status-group-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #1c1c1c;
  margin: 14px 0 8px;
  flex-shrink: 0;
}

/* ---- Sistem Durumu: Yetki sahipleri (rütbe) listesi ---- */
.staff-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}

.staff-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
}

.staff-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #eceae3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9a978c;
}

.staff-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.staff-avatar-img svg {
  width: 24px;
  height: 24px;
}

.staff-gender-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2ded1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
}

.staff-gender-badge svg {
  width: 9px;
  height: 9px;
}

.staff-online-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2a9df4;
  border: 2px solid #fbfaf6;
}

.staff-body {
  flex: 1;
  min-width: 0;
}

.staff-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 14.5px;
  color: #1c1c1c;
}

.staff-verified {
  color: #2a9df4;
  flex-shrink: 0;
}

.staff-verified svg {
  width: 14px;
  height: 14px;
}

.staff-title {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
}

.staff-stars {
  margin-top: 4px;
  letter-spacing: -2px;
  font-size: 13px;
}

.status-group-title:first-child {
  margin-top: 4px;
}

.status-box {
  border: 1px solid #e2ded1;
  border-radius: 10px;
  flex-shrink: 0;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #2b2b2b;
}

.status-row + .status-row {
  border-top: 1px solid #f1efe6;
}

.status-row:last-child {
  border-bottom: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.status-row strong {
  font-weight: 700;
  color: #1c1c1c;
}

/* ---- Engellediğim kullanıcılar / kullanıcı satırı ortak ---- */
.blocked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid #f1efe6;
}

.blocked-row .user-row-avatar {
  width: 36px;
  height: 36px;
}

.blocked-row-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blocked-row-unblock {
  flex-shrink: 0;
  border: 1px solid #e2ded1;
  background: #fff;
  color: #d9534f;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.blocked-row-unblock:hover {
  background: #fdf1f0;
}

/* ---- Sağdan açılan çekmeceler (kanallar / gruplar) ---- */
.side-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 66%;
  min-width: 240px;
  background: #ffffff;
  z-index: 21;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  box-shadow: -3px 0 14px rgba(0,0,0,.18);
}

.side-drawer.active {
  transform: translateX(0);
}

.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 14px;
  border-bottom: 1px solid #eee9dc;
}

.drawer-header svg {
  width: 19px;
  height: 19px;
  color: #1c1c1c;
}

.drawer-header h3 {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: #1c1c1c;
}

.drawer-close {
  border: none;
  background: none;
  color: #6b6b6b;
  display: flex;
  cursor: pointer;
  padding: 2px;
}

.drawer-close svg {
  width: 16px;
  height: 16px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
}

.room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 4px;
  border-bottom: 1px solid #f1efe6;
}

.room-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.room-name {
  font-size: 14.5px;
  font-weight: 700;
  color: #2a6fdb;
}

.room-desc {
  font-size: 12px;
  color: #9a978c;
}

.room-gear {
  border: none;
  background: none;
  color: #9a978c;
  cursor: pointer;
  display: flex;
  padding: 4px;
  flex-shrink: 0;
}

.room-gear svg {
  width: 17px;
  height: 17px;
}

.drawer-footer {
  flex-shrink: 0;
  padding: 10px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #f1efe6;
}

.drawer-btn {
  width: 100%;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.drawer-btn.outline {
  border: 1px solid #2a6fdb;
  background: #fff;
  color: #2a6fdb;
}

.drawer-btn.outline:hover {
  background: #eef4fd;
}

.drawer-btn.solid {
  border: none;
  background: #2a6fdb;
  color: #fff;
  flex-shrink: 0;
}

.new-room-form {
  display: none;
  gap: 8px;
  margin-top: 2px;
}

.new-room-form.active {
  display: flex;
}

.new-room-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9d3c4;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 16px;
  outline: none;
}

/* ---- Gruplar çekmecesi: arama + kullanıcı listesi ---- */
.drawer-search {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #eee9dc;
}

.drawer-search svg {
  width: 17px;
  height: 17px;
  color: #9a978c;
  flex-shrink: 0;
}

.drawer-search input {
  flex: 1;
  min-width: 0;
  border: 1px solid #d9d3c4;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 16px;
  outline: none;
  background: #fbfaf6;
}

.user-list {
  display: flex;
  flex-direction: column;
}

.user-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid #f1efe6;
}

.user-row-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #eeece4;
  color: #a9a48f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

/* ---- Aktif/çevrimiçi kullanıcı göstergesi: yeşil, yanıp sönen nokta ---- */
.avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #4cbb17;
  border: 2px solid #fff;
  animation: onlineDotPulse 1.4s ease-in-out infinite;
}

.offline-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9a978c;
  border: 2px solid #fff;
}

@keyframes onlineDotPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(76,187,23,.55); }
  50% { opacity: .55; box-shadow: 0 0 0 4px rgba(76,187,23,0); }
}

.user-row-avatar svg {
  width: 26px;
  height: 26px;
}

.user-row-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Özel mesajlarda okunmamış kişinin avatarı mavi çerçeveli görünür ---- */
.dm-avatar-unread {
  box-shadow: 0 0 0 2.5px #2a6fdb;
}

.user-row-info {
  flex: 1;
  min-width: 0;
}

.user-row-name {
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-row-status {
  font-size: 12px;
  color: #9a978c;
}

.user-row-rank {
  font-size: 12px;
  font-weight: 800;
  margin-top: 1px;
}

.user-row-stars {
  font-size: 11px;
  letter-spacing: -2.5px;
  line-height: 1;
  margin-top: 2px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

.user-row-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: #9a978c;
}

.user-row-icons svg {
  width: 16px;
  height: 16px;
}

.user-row-more {
  border: none;
  background: none;
  color: #9a978c;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  margin-left: -6px; /* gender/cihaz ikonlarına yakınlaşsın diye satırın 10px'lik genel boşluğunu daraltır */
}

.user-row-more svg {
  width: 17px;
  height: 17px;
}

.user-row-menu {
  position: absolute;
  right: 10px;
  top: 44px;
  background: #fff;
  border: 1px solid #e7e2d8;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  overflow: hidden;
  z-index: 5;
  display: none;
  flex-direction: column;
  min-width: 150px;
}

.user-row-menu.active {
  display: flex;
}

.user-row-menu button {
  border: none;
  background: none;
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  color: #2b2b2b;
  cursor: pointer;
}

.user-row-menu button:hover {
  background: #f5f3ec;
}

.empty-user-note {
  padding: 30px 16px;
  text-align: center;
  font-size: 13px;
  color: #9a978c;
}

#groupsNote {
  flex-shrink: 0;
  padding: 8px 14px 12px;
}

/* ---- Genel sohbette isim tıklama ---- */
.msg-sender-name {
  font-weight: 700;
  color: #1c1c1c;
  cursor: pointer;
  word-break: break-word;
  overflow-wrap: anywhere;
  -webkit-user-select: none;
  user-select: none;
}

.msg-sender-name:hover {
  text-decoration: underline;
}

/* ---- Yetkili ünvan rozeti (artık ismin ÜSTÜNDE, ayrı satırda) ---- */
.msg-sender-title {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  padding: 2px 6px;
  margin-bottom: 2px;
  border: 1px solid;
  border-radius: 999px;
  vertical-align: middle;
  background: rgba(255,255,255,.5);
  align-self: flex-start;
}

/* ---- "Yazıyor..." göstergesi ----
   - Yazı kutusunun hemen üstündeki sabit şeritte durur; mesajların üstüne asla binmez.
   - Çerçeve yazıya SIFIR gibi yakın (küçük iç boşluk), soluk gri, yazı beyaz ve DÜZ (eğik değil).
   - Son mesaj, çerçevenin hemen üstünde biter (aradaki boşluk ~2px).
   - Üç nokta WhatsApp'taki gibi sırayla yukarı-aşağı dalgalanır. */
.typing-strip {
  position: relative;
  z-index: 3;
  flex: 0 0 16px; /* çerçeve yüksekliği (15.2px) kadar: hem son mesaja hem yazı kutusuna sıfır */
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: none;
  visibility: hidden;
  scrollbar-width: none;
}

.typing-strip::-webkit-scrollbar {
  display: none;
}

.typing-strip.active {
  visibility: visible;
}

.typing-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(110, 110, 112, .40);
  border: 0;
  border-radius: 8px;
  padding: 1px 6px 1px 7px;
  color: #ffffff;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.2;
  text-shadow: 0 0 2px rgba(0, 0, 0, .25);
}

.typing-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 7px;
}

.typing-dots i {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  opacity: .6;
  animation: typingWave 1.2s infinite ease-in-out;
}

.typing-dots i:nth-child(2) { animation-delay: .16s; }
.typing-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes typingWave {
  0%, 60%, 100% { transform: translateY(0); opacity: .6; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* ---- Profil sayfası: Engelle/Engeli kaldır bildirimi (yeşil toast) ---- */
.pv-block-toast {
  position: absolute;
  top: 62px;
  left: 10px;
  right: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #4cbb17;
  color: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 6px 18px rgba(76,187,23,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: transform .2s ease, opacity .2s ease;
}

.pv-block-toast.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.pv-block-toast-icon {
  flex-shrink: 0;
  display: flex;
}

.pv-block-toast-icon svg {
  width: 18px;
  height: 18px;
}

.pv-block-toast-text {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.pv-block-toast-close {
  flex-shrink: 0;
  border: none;
  background: rgba(255,255,255,.2);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.pv-block-toast-close svg {
  width: 13px;
  height: 13px;
}

/* ---- Kullanıcı profili sayfası ---- */
.profile-view-sheet {
  max-height: none;
  height: 100%;
  border-radius: 0;
  background: #fdfcf9;
}

.profile-view-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px;
}

.profile-view-header .sheet-back,
.profile-view-header .profile-view-more {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e2ded1;
  background: #fff;
  color: #8a877a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-view-status {
  font-size: 13px;
  font-weight: 700;
  color: #4a4740;
  text-align: center;
  line-height: 1.3;
}

.profile-view-more {
  border: none;
  background: none;
  color: #6b6b6b;
  display: flex;
  cursor: pointer;
  padding: 4px;
}

.profile-view-header .sheet-back svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.profile-view-more svg {
  width: 18px;
  height: 18px;
}

.profile-view-body {
  align-items: center;
  padding: 28px 24px 24px;
  gap: 2px;
}

.profile-view-avatar-wrap {
  position: relative;
  margin-bottom: 8px;
}

.profile-view-avatar {
  width: 108px;
  height: 108px;
}

.profile-view-avatar svg {
  width: 64px;
  height: 64px;
}

.profile-view-gender {
  top: 4px;
  right: 0;
}

.device-chip {
  position: absolute;
  top: 4px;
  left: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2ded1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
}

.device-chip svg {
  width: 14px;
  height: 14px;
}

.profile-view-actions {
  width: 100%;
  max-width: 320px;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.profile-view-actions .profile-btn {
  flex: 1;
}

/* ---- Profil sayfası: Takip Et / Favori satırı ---- */
.profile-view-row-2 {
  width: 100%;
  max-width: 340px;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.pv-pill-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  color: #3a382f;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 10px;
  border-radius: 20px;
  cursor: pointer;
}

.pv-pill-btn:hover {
  background: #f1efe6;
}

.pv-pill-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.pv-pill-btn.pv-active {
  background: #eaf2fd;
  border-color: #bcd6f7;
  color: #2a6fdb;
}

/* ---- Profil sayfası: Sustur / Banla (sadece yetki hiyerarşisi uygunsa görünür) ---- */
.pv-mod-row {
  margin-top: 10px;
}

.pv-mod-btn {
  border-color: #e8c9c9;
  background: #fdf4f4;
  color: #b3261e;
}

.pv-mod-btn:hover {
  background: #fbe8e8;
}

.pv-mod-btn.pv-active {
  background: #b3261e;
  border-color: #b3261e;
  color: #ffffff;
}

.pv-mod-btn.pv-mod-danger.pv-active {
  background: #7a1712;
  border-color: #7a1712;
}

.pv-mod-hint {
  color: #b3261e;
  font-weight: 600;
}

/* ---- Profil sayfası: Engelle / Görüntülü / Sesli / Mesaj satırı — referans
   tasarımdaki gibi hepsi TEK bir kutu içinde, aralarında ince ayraç çizgisi ---- */
.profile-view-row-4 {
  width: 100%;
  max-width: 340px;
  display: flex;
  margin-top: 14px;
  border: 1px solid #e2ded1;
  border-radius: 10px;
  background: #fbfaf6;
  overflow: hidden;
}

.pv-icon-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: none;
  border-right: 1px solid #e2ded1;
  background: none;
  color: #3a382f;
  padding: 12px 4px;
  cursor: pointer;
}

.pv-icon-btn:last-child {
  border-right: none;
}

.pv-icon-btn:hover {
  background: #f1efe6;
}

.pv-icon-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.pv-icon-btn svg {
  width: 19px;
  height: 19px;
}

.pv-icon-btn span {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* ---- Profil sayfası: Katıldığı Odalar ---- */
.profile-view-rooms {
  width: 100%;
  max-width: 340px;
  margin-top: 18px;
  border: 1px solid #e2ded1;
  border-radius: 10px;
  overflow: hidden;
}

.pv-rooms-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  color: #2b2b2b;
  border-bottom: 1px solid #f1efe6;
  background: #fbfaf6;
}

.pv-rooms-header svg {
  width: 16px;
  height: 16px;
  color: #6b6b6b;
}

.pv-room-row {
  padding: 11px 14px;
  font-size: 13.5px;
  color: #2a6fdb;
  font-weight: 600;
  border-bottom: 1px solid #f1efe6;
}

.pv-room-row:last-child {
  border-bottom: none;
}

/* ---- Genel sohbette mesaj satırı (avatar + isim + metin) ---- */
.msg-row {
  align-self: flex-start;
  max-width: 82%;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* ---- Karşılama mesajı: sabit duvar kağıdı ikonunun yanında başlar,
   sonra konuşma aktıkça normal bir mesaj gibi yukarı doğru kayar. ---- */
.welcome-msg-row {
  margin-top: -48px;
  margin-left: 50px;
  margin-bottom: 18px;
}

.msg-avatar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #eeece4;
  color: #a9a48f;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msg-avatar svg {
  width: 15px;
  height: 15px;
}

.msg-content {
  background: #ffffff;
  border-radius: 12px;
  border-bottom-left-radius: 3px;
  padding: 5px 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.msg-content .msg-sender-name {
  font-size: 11.5px;
}

.msg-text {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #1c1c1c;
  word-break: break-word;
  -webkit-user-select: none;
  user-select: none;
}

.msg-time {
  align-self: flex-end;
  font-size: 10px;
  color: #a9a48f;
  margin-top: 1px;
}

.home-indicator {
  flex-shrink: 0;
  height: 20px;
  background: #fff;
  position: relative;
}

.home-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: #1c1c1c;
}

/* ============================================================
   GENİŞ EKRAN (TABLET/MASAÜSTÜ) GÖRÜNÜMÜ
   Uygulama HER ZAMAN, hangi cihazdan girilirse girilsin, tüm
   ekranı/pencereyi doldurur (yukarıdaki .phone kuralı zaten
   width:100% height:100vh). Bu blok SADECE geniş ekranlarda iç
   yerleşimi değiştirir: "Kullanıcılar/Sohbetler/Bildirimler/
   Profil" artık sohbetin yanında sabit dar bir şerit olarak
   durur, tam ekranı kaplayan ayrı bir sayfa gibi açılmaz.
   Telefon genişliğinde (860px altı) hiçbir şey değişmez.
   ============================================================ */
@media (min-width: 860px) {
  .home-indicator,
  .status-space {
    display: none;
  }

  /* ---- Sohbet solda sabit, sağda TEK bir dar şerit — o şeritte
     Kullanıcılar/Sohbetler/Bildirimler/Profil'den hangisi seçiliyse
     o gösterilir. Hiçbiri sohbetin üstüne taşıp tüm ekranı kaplamaz. ---- */
  .app-body {
    display: flex;
    flex-direction: row;
  }

  .tab-panel[data-panel="chat"] {
    position: static;
    flex: 1;
    min-width: 0;
    display: flex !important;
  }

  .tab-panel[data-panel="users"],
  .tab-panel[data-panel="messages"],
  .tab-panel[data-panel="notifications"],
  .tab-panel[data-panel="profile"] {
    position: static;
    flex-shrink: 0;
    width: 280px;
    display: none;
    flex-direction: column;
    border-left: 1px solid #e7e2d8;
    background: #ffffff;
  }

  /* Sayfa ilk açıldığında (henüz hiçbir üst ikona basılmadıysa)
     varsayılan olarak Kullanıcılar listesi görünsün. */
  .tab-panel[data-panel="users"] {
    display: flex;
  }

  /* Sohbetler/Bildirimler/Profil'den biri seçilince, o dar şeritte
     Kullanıcılar'ın yerine geçer. */
  .tab-panel[data-panel="messages"].active,
  .tab-panel[data-panel="notifications"].active,
  .tab-panel[data-panel="profile"].active {
    display: flex;
  }

  .app-body:has(.tab-panel[data-panel="messages"].active) .tab-panel[data-panel="users"],
  .app-body:has(.tab-panel[data-panel="notifications"].active) .tab-panel[data-panel="users"],
  .app-body:has(.tab-panel[data-panel="profile"].active) .tab-panel[data-panel="users"] {
    display: none;
  }

  .tab-panel[data-panel="users"] .empty-state {
    padding: 20px;
  }

  .tab-panel[data-panel="users"] .drawer-body.user-list {
    padding: 10px 12px;
  }

  /* ---- Ayarlar/Kanallar/Gruplar hızlı erişim menüsü — mobilde sohbetin
     ortasında dikey bir kutu olarak duruyordu; masaüstünde referans
     aldığın esohbet gibi en üstte, yatay bir şerit olsun. ---- */
  .side-menu {
    top: 8px;
    right: 14px;
    bottom: auto;
    left: auto;
    transform: none;
    flex-direction: row;
  }

  .side-divider {
    width: 1px;
    height: 60%;
  }
}

/* ============================================================
   BAĞLAM MENÜSÜ (sağ tık / iki parmakla dokunma) — sadece Web'de
   ============================================================ */
.context-menu {
  display: none;
  position: fixed;
  z-index: 300;
  min-width: 190px;
  background: #ffffff;
  border: 1px solid #e2ded1;
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
  padding: 6px;
}

.context-menu.active {
  display: block;
}

.context-menu-header {
  padding: 8px 12px 6px;
  font-size: 12px;
  font-weight: 800;
  color: #8a8778;
  border-bottom: 1px solid #f1efe6;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.context-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  color: #1c1c1c;
  cursor: pointer;
  white-space: nowrap;
}

.context-menu-item:hover {
  background: #f1efe6;
}

/* ============================================================
   MESAJ YANITLAMA (WhatsApp/Instagram tarzı alıntı)
   ============================================================ */
/* ============================================================
   ODA KARARI UYARI BANNER'I (örn. "Sadece yöneticiler ses gönderebilir")
   Composer'ın hemen üstünde durur, X ile kapatılabilir.
   ============================================================ */
.room-rule-banner {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  margin: 8px 10px 0;
  padding: 12px 14px;
  background: #e0453c;
  color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(224,69,60,.35);
}

.room-rule-banner.active {
  display: flex;
}

.room-rule-banner-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.room-rule-banner-text {
  flex: 1;
  min-width: 0;
}

.room-rule-banner-main {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
}

.room-rule-banner-sub {
  font-size: 12px;
  font-style: italic;
  opacity: .9;
  margin-top: 2px;
}

.room-rule-banner-close {
  flex-shrink: 0;
  border: none;
  background: rgba(255,255,255,.18);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.room-rule-banner-close svg {
  width: 13px;
  height: 13px;
}

.reply-preview-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1efe6;
  border-top: 1px solid #e7e2d8;
  border-left: 3px solid #b7b0a0;
  padding: 8px 12px;
}

.reply-preview-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reply-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: #7a7563;
}

.reply-preview-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #1c1c1c;
}

.reply-preview-text {
  font-size: 12px;
  color: #6b6b6b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reply-preview-close {
  flex-shrink: 0;
  border: none;
  background: none;
  color: #8a8778;
  font-size: 15px;
  cursor: pointer;
  padding: 4px;
}

.msg-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 3px solid #b7b0a0;
  background: #efece3;
  border-radius: 8px;
  padding: 6px 9px;
  margin-bottom: 4px;
}

.msg-quote-name {
  font-size: 12px;
  font-weight: 800;
  color: #4a4636;
}

.msg-quote-text {
  font-size: 12.5px;
  color: #6b6558;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* ============================================================
   KARANLIK TEMA ANAHTARI (Profil ekranındaki switch) — herkes,
   üye olsun olmasın kullanabilir, tercih tarayıcıda saklanır.
   ============================================================ */
.theme-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  border-radius: 14px;
  cursor: pointer;
}

.theme-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: #3a382f;
}

.theme-toggle-label svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch-slider {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
  background: #d9d3c4;
  border-radius: 999px;
  transition: background .2s ease;
}

.theme-switch-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s ease;
}

.theme-switch input:checked + .theme-switch-slider {
  background: #7b2ff7;
}

.theme-switch input:checked + .theme-switch-slider::before {
  transform: translateX(18px);
}

/* ============================================================
   KARANLIK TEMA — body.dark-theme aktifken tüm uygulamaya uygulanır.
   Not: tam kapsam hedeflenmiştir; birebir her köşe yerine en çok
   görülen ekranlar (sohbet, DM, profil, ayarlar, kullanıcı listesi)
   önceliklendirildi.
   ============================================================ */
body.dark-theme { background: #0f0f11; }

body.dark-theme .tab-panel { background: #16161a; color: #e8e6e3; }
body.dark-theme .tab-panel[data-panel="chat"] { background: transparent; }

body.dark-theme .topbar {
  background: #1a1a1e;
  border-bottom-color: #2a2a30;
  color: #e8e6e3;
}
body.dark-theme .room-title { color: #e8e6e3; }
body.dark-theme .live-count-pill { background: #24242a; color: #e8e6e3; }

body.dark-theme .chat-screen {
  background: #0f0f11;
}

body.dark-theme .chat-bg {
  background-color: #1a1710;
  filter: brightness(.55) invert(1) hue-rotate(180deg);
  opacity: .12;
}

body.dark-theme .msg-content {
  background: #232327;
  box-shadow: 0 1px 1px rgba(0,0,0,.3);
}
body.dark-theme .msg-content .msg-text,
body.dark-theme .msg-sender-name {
  color: #ececec;
}
body.dark-theme .msg-time {
  color: #83828a;
}
body.dark-theme .msg-content.out {
  background: linear-gradient(135deg, #3a5fb8, #2b4b9e);
}

body.dark-theme .composer,
body.dark-theme .dm-composer {
  background: #1a1a1e;
  border-top-color: #2a2a30;
}
body.dark-theme .comp-input {
  background: #232327;
  border-color: #34343a;
  color: #ececec;
}
body.dark-theme .comp-input::placeholder { color: #83828a; }
body.dark-theme .comp-icon { color: #b8b6bd; }

body.dark-theme .emoji-picker {
  background: #1a1a1e;
  border-top-color: #2a2a30;
}
body.dark-theme .emoji-picker-tabs { border-bottom-color: #2a2a30; }
body.dark-theme .emoji-tab { color: #8b8990; }

body.dark-theme .bottom-sheet {
  background: #1a1a1e;
  color: #e8e6e3;
}
body.dark-theme .sheet-header {
  border-bottom-color: #2a2a30;
}
body.dark-theme .sheet-header h3,
body.dark-theme .sheet-back,
body.dark-theme .sheet-header svg {
  color: #e8e6e3;
}
body.dark-theme .profile-view-header .sheet-back,
body.dark-theme .profile-view-header .profile-view-more {
  background: #232327;
  border-color: #34343a;
  color: #e8e6e3;
}
body.dark-theme .profile-view-status { color: #b8b6bd; }
body.dark-theme .sheet-row {
  background: #232327;
  border-color: #34343a;
  color: #e8e6e3;
}
body.dark-theme .sheet-row:hover { background: #2b2b31; }
body.dark-theme .sheet-note { color: #9c9aa2; }

body.dark-theme .profile-box { color: #e8e6e3; }
body.dark-theme .profile-avatar {
  background: #232327;
  border-color: #34343a;
  color: #6b6970;
}
body.dark-theme .profile-name { color: #e8e6e3; }
body.dark-theme .profile-status { color: #9c9aa2; }
body.dark-theme .theme-toggle-row {
  background: #232327;
  border-color: #34343a;
}
body.dark-theme .theme-toggle-label { color: #e8e6e3; }
body.dark-theme .profile-btn {
  background: #232327;
  border-color: #34343a;
  color: #e8e6e3;
}
body.dark-theme .profile-btn:hover { background: #2b2b31; }

body.dark-theme .dm-header {
  background: #1a1a1e;
  border-bottom-color: #2a2a30;
}
body.dark-theme .dm-back,
body.dark-theme .dm-name { color: #e8e6e3; }
body.dark-theme .dm-status-label { color: #9c9aa2; }
body.dark-theme .dm-header-btn {
  background: #232327;
  color: #e8e6e3;
}
body.dark-theme .dm-messages {
  background-color: #20242b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%232c313b' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 24h26a6 6 0 0 1 6 6v10a6 6 0 0 1-6 6H32l-6 6v-6h-6a6 6 0 0 1-6-6V30a6 6 0 0 1 6-6z'/%3E%3Cpath d='M92 30c-4-6-13-4-13 3 0 7 13 15 13 15s13-8 13-15c0-7-9-9-13-3z'/%3E%3Cpath d='M140 20l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Ccircle cx='195' cy='34' r='13'/%3E%3Cpath d='M195 27v7l5 4'/%3E%3Cpath d='M232 20l6 8h-4v10h-4V28h-4z'/%3E%3Crect x='15' y='75' width='20' height='16' rx='2'/%3E%3Cpath d='M15 79l10 6 10-6'/%3E%3Cpath d='M70 70c8-6 20-6 24 3 3 7-3 13-12 18-9-5-15-11-12-18 2-5 6-6 0-3z'/%3E%3Cpath d='M115 68a12 9 0 1 0 0 18 12 9 0 1 0 0-18z'/%3E%3Cpath d='M115 68v14M105 77l20-14M105 68l20 14'/%3E%3Cpath d='M165 65v20M175 62v26M185 68v14'/%3E%3Cpath d='M225 68c0 8-8 10-8 18M217 86h0'/%3E%3Cpath d='M12 120a10 10 0 1 0 20 0 10 10 0 1 0-20 0zM18 116h8v8'/%3E%3Cpath d='M55 118h18v12H55zM60 130l4 5 4-5'/%3E%3Cpath d='M100 112c6-4 14 0 14 7 0 8-14 14-14 14s-14-6-14-14c0-7 8-11 14-7z'/%3E%3Cpath d='M145 110v18h16M153 110v9'/%3E%3Cpath d='M195 112a11 11 0 1 0 0 22 11 11 0 1 0 0-22zM195 106v6M195 128v6M189 117h-6M201 117h6'/%3E%3Cpath d='M20 165l8 14 8-14M28 179v-14'/%3E%3Cpath d='M62 160c0 8 16 8 16 16s-16 8-16 16'/%3E%3Cpath d='M105 160h18v20a9 9 0 0 1-9 9 9 9 0 0 1-9-9z'/%3E%3Cpath d='M150 165a10 10 0 1 1 0 20 10 10 0 1 1 0-20zM144 175h12'/%3E%3Cpath d='M190 158h18l-4 10 4 10h-18z'/%3E%3Cpath d='M225 162v20M219 168l6-6 6 6M219 176l6 6 6-6'/%3E%3Cpath d='M15 210h18v14H15zM24 210v-6a5 5 0 0 1 10 0v6'/%3E%3Cpath d='M60 205c5-5 13-5 13 2 0 6-13 13-13 13s-13-7-13-13c0-7 8-7 13-2z'/%3E%3Cpath d='M105 205l5 12 5-12M110 217v-12'/%3E%3Cpath d='M150 202a12 9 0 1 0 0 18 12 9 0 1 0 0-18z'/%3E%3Cpath d='M195 200v20M203 204v12'/%3E%3Cpath d='M232 205a9 9 0 1 0 0 18 9 9 0 1 0 0-18zM232 209v9l6 3'/%3E%3Ccircle cx='45' cy='45' r='2'/%3E%3Ccircle cx='245' cy='95' r='2'/%3E%3Ccircle cx='45' cy='140' r='2'/%3E%3Ccircle cx='245' cy='185' r='2'/%3E%3Ccircle cx='45' cy='235' r='2'/%3E%3Cg stroke-width='1' opacity='.8'%3E%3Ccircle cx='11.8' cy='11.8' r='1.54'/%3E%3Crect x='42.0' y='2.8' width='18.0' height='18.0' rx='3.6' transform='rotate(135 51.0 11.8)'/%3E%3Cpath d='M74.2 7.0l4.85 9.7 4.85 -9.7' transform='rotate(90 79.0 11.8)'/%3E%3Cpath d='M114.8 11.8h6.8M118.2 8.4v6.8' transform='rotate(45 118.2 11.8)'/%3E%3Cpath d='M142.7 11.8h7.2' transform='rotate(0 146.3 11.8)'/%3E%3Cpath d='M165.3 11.8q4.5-9.0 9.0 0t9.0 0' transform='rotate(135 174.3 11.8)'/%3E%3Cpath d='M208.0 13.7c0-6.5 10.9 -6.5 10.9 0' transform='rotate(90 213.4 11.8)'/%3E%3Ccircle cx='241.6' cy='11.8' r='2.86'/%3E%3Cpath d='M13.3 48.0l3 6.0 3 -6.0' transform='rotate(135 16.3 51.0)'/%3E%3Cpath d='M42.6 51.0h3.6M44.4 49.2v3.6' transform='rotate(90 44.4 51.0)'/%3E%3Cpath d='M67.9 51.0h31.2' transform='rotate(45 83.5 51.0)'/%3E%3Cpath d='M105.3 51.0q3.1-6.3 6.3 0t6.3 0' transform='rotate(0 111.5 51.0)'/%3E%3Cpath d='M147.3 52.1c0-4.1 6.8 -4.1 6.8 0' transform='rotate(135 150.7 51.0)'/%3E%3Ccircle cx='178.8' cy='51.0' r='1.54'/%3E%3Crect x='197.8' y='42.0' width='18.0' height='18.0' rx='3.6' transform='rotate(45 206.8 51.0)'/%3E%3Cpath d='M241.1 46.1l4.85 9.7 4.85 -9.7' transform='rotate(0 245.9 51.0)'/%3E%3Cpath d='M9.7 79.0h21.8' transform='rotate(90 20.6 79.0)'/%3E%3Cpath d='M44.9 79.0q1.9-3.9 3.9 0t3.9 0' transform='rotate(45 48.8 79.0)'/%3E%3Cpath d='M75.0 79.6c0-2.2 3.6 -2.2 3.6 0' transform='rotate(0 76.8 79.0)'/%3E%3Ccircle cx='116.0' cy='79.0' r='6.60'/%3E%3Crect x='137.8' y='72.8' width='12.6' height='12.6' rx='2.5' transform='rotate(90 144.1 79.0)'/%3E%3Cpath d='M180.2 76.0l3 6.0 3 -6.0' transform='rotate(45 183.2 79.0)'/%3E%3Cpath d='M209.4 79.0h3.6M211.3 77.3v3.6' transform='rotate(0 211.3 79.0)'/%3E%3Cpath d='M223.8 79.0h31.2' transform='rotate(135 239.3 79.0)'/%3E%3Cpath d='M6.3 120.8c0-9.4 15.6 -9.4 15.6 0' transform='rotate(45 14.1 118.2)'/%3E%3Ccircle cx='53.1' cy='118.2' r='4.62'/%3E%3Crect x='77.3' y='114.3' width='7.8' height='7.8' rx='1.6' transform='rotate(135 81.3 118.2)'/%3E%3Cpath d='M107.8 116.6l1.6 3.2 1.6 -3.2' transform='rotate(90 109.3 118.2)'/%3E%3Cpath d='M140.6 118.2h15.6M148.4 110.4v15.6' transform='rotate(45 148.4 118.2)'/%3E%3Cpath d='M165.7 118.2h21.8' transform='rotate(0 176.6 118.2)'/%3E%3Cpath d='M211.8 118.2q1.9-3.9 3.9 0t3.9 0' transform='rotate(135 215.7 118.2)'/%3E%3Cpath d='M241.9 118.8c0-2.2 3.6 -2.2 3.6 0' transform='rotate(90 243.8 118.2)'/%3E%3Crect x='16.3' y='144.2' width='4.2' height='4.2' rx='0.8' transform='rotate(0 18.4 146.3)'/%3E%3Cpath d='M39.6 139.3l6.9 13.8 6.9 -13.8' transform='rotate(135 46.5 146.3)'/%3E%3Cpath d='M80.2 146.3h10.9M85.7 140.8v10.9' transform='rotate(90 85.7 146.3)'/%3E%3Cpath d='M107.0 146.3h13.6' transform='rotate(45 113.8 146.3)'/%3E%3Cpath d='M139.8 146.3q1.1-2.1 2.1 0t2.1 0' transform='rotate(0 141.8 146.3)'/%3E%3Cpath d='M173.1 148.8c0-9.4 15.6 -9.4 15.6 0' transform='rotate(135 180.9 146.3)'/%3E%3Ccircle cx='209.1' cy='146.3' r='4.62'/%3E%3Crect x='244.3' y='142.3' width='7.8' height='7.8' rx='1.6' transform='rotate(45 248.2 146.3)'/%3E%3Cpath d='M8.4 174.3h6.8M11.8 170.9v6.8' transform='rotate(135 11.8 174.3)'/%3E%3Cpath d='M47.4 174.3h7.2' transform='rotate(90 51.0 174.3)'/%3E%3Cpath d='M70.0 174.3q4.5-9.0 9.0 0t9.0 0' transform='rotate(45 79.0 174.3)'/%3E%3Cpath d='M112.7 176.2c0-6.5 10.9 -6.5 10.9 0' transform='rotate(0 118.2 174.3)'/%3E%3Ccircle cx='146.3' cy='174.3' r='2.86'/%3E%3Crect x='172.3' y='172.3' width='4.2' height='4.2' rx='0.8' transform='rotate(90 174.3 174.3)'/%3E%3Cpath d='M206.5 167.4l6.9 13.8 6.9 -13.8' transform='rotate(45 213.4 174.3)'/%3E%3Cpath d='M236.1 174.3h10.9M241.6 168.9v10.9' transform='rotate(0 241.6 174.3)'/%3E%3Cpath d='M9.9 213.4q3.1-6.3 6.3 0t6.3 0' transform='rotate(90 16.3 213.4)'/%3E%3Cpath d='M41.0 214.6c0-4.1 6.8 -4.1 6.8 0' transform='rotate(45 44.4 213.4)'/%3E%3Ccircle cx='83.5' cy='213.4' r='1.54'/%3E%3Crect x='102.5' y='204.4' width='18.0' height='18.0' rx='3.6' transform='rotate(135 111.5 213.4)'/%3E%3Cpath d='M145.8 208.6l4.85 9.7 4.85 -9.7' transform='rotate(90 150.7 213.4)'/%3E%3Cpath d='M175.3 213.4h6.8M178.8 210.0v6.8' transform='rotate(45 178.8 213.4)'/%3E%3Cpath d='M203.3 213.4h7.2' transform='rotate(0 206.8 213.4)'/%3E%3Cpath d='M236.9 213.4q4.5-9.0 9.0 0t9.0 0' transform='rotate(135 245.9 213.4)'/%3E%3Ccircle cx='20.6' cy='241.6' r='6.60'/%3E%3Crect x='42.5' y='235.3' width='12.6' height='12.6' rx='2.5' transform='rotate(0 48.8 241.6)'/%3E%3Cpath d='M73.8 238.6l3 6.0 3 -6.0' transform='rotate(135 76.8 241.6)'/%3E%3Cpath d='M114.2 241.6h3.6M116.0 239.8v3.6' transform='rotate(90 116.0 241.6)'/%3E%3Cpath d='M128.5 241.6h31.2' transform='rotate(45 144.1 241.6)'/%3E%3Cpath d='M176.8 241.6q3.1-6.3 6.3 0t6.3 0' transform='rotate(0 183.2 241.6)'/%3E%3Cpath d='M207.8 242.7c0-4.1 6.8 -4.1 6.8 0' transform='rotate(135 211.3 241.6)'/%3E%3Ccircle cx='239.3' cy='241.6' r='1.54'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 150px 150px;
  background-repeat: repeat;
}
body.dark-theme .dm-list-row { background: #16161a; border-bottom-color: #2a2a30; }
body.dark-theme .dm-list-row-saved { background: #1c2433; border-left-color: #4a86e0; }
body.dark-theme .dm-inbox-section-title { color: #83828a; }
body.dark-theme .dm-inbox-saved-count { color: #83828a; }
body.dark-theme .dm-inbox-saved-empty { color: #83828a; }

body.dark-theme .user-row { border-bottom-color: #2a2a30; }
body.dark-theme .user-row-avatar { background: #232327; color: #6b6970; }
body.dark-theme .user-row-name { color: #e8e6e3; }
body.dark-theme .user-row-status { color: #9c9aa2; }

body.dark-theme .overlay-backdrop { background: rgba(0,0,0,.6); }

body.dark-theme .gift-card,
body.dark-theme .vip-package-row,
body.dark-theme .jeton-package-row {
  background: #232327;
  border-color: #34343a;
  color: #e8e6e3;
}


/* ============================================================
   SESLİ ODA: KAMERA (görüntülü yayın)
   ============================================================ */
/* Video alanı: her sayfada EN FAZLA 8 kişi (4 sütun x 2 satır). Kutu boyutu kişi sayısına
   bağlı DEĞİL — 1-2 kişi de olsa 8 kişi de olsa aynı küçük boyutta kalır. 8'den fazla kişi
   olursa yana kaydırılan sonraki sayfalara geçer (kişi sınırı yok). */
.vr-video-stage {
  display: grid;
  grid-auto-rows: auto;
  grid-auto-columns: calc((100% - 18px) / 4); /* 4 sütun: 3 boşluk (6px) düşülür */
  gap: 6px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vr-video-stage::-webkit-scrollbar {
  display: none;
}

/* Son sayfa dolu olmasa bile kaydırma alanı tam sayfa olsun (sayfa hizası bozulmasın).
   Konumu JS'ten (--vr-last-col) gelir. */
.vr-video-stage::after {
  content: "";
  grid-row: 1;
  grid-column: var(--vr-last-col, 1);
  pointer-events: none;
}

.vr-video-tile {
  position: relative;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
}

/* 3:4 oran (aspect-ratio bilmeyen eski cihazlarda da çalışan yöntem) */
.vr-video-tile::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}

.vr-video-tile[data-page-start] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.vr-video-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  inset: 0;
}

.vr-video-box video {
  object-fit: cover;
}

.vr-video-name {
  position: absolute;
  left: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

/* Sayfa noktaları (8'den fazla kamera olunca görünür) */
.vr-video-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 12px;
}

.vr-video-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cfcabb;
  cursor: pointer;
}

.vr-video-dot.active {
  width: 18px;
  border-radius: 999px;
  background: #6a5cf5;
}

.vr-video-count {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a8778;
}

/* Kamera düğmesi: sadece simge, mikrofon/ayrıl düğmelerinin arasında */
.vr-bottom-btn.vr-bottom-btn-camera {
  flex: 0 0 54px;
  padding: 13px 0;
}

.vr-bottom-btn.vr-bottom-btn-camera svg {
  width: 21px;
  height: 21px;
}

.vr-bottom-btn.vr-bottom-btn-camera.on {
  /* Kırmızı "Sesten Ayrıl" ile karışmasın diye mor: kamera AÇIK */
  background: #6a5cf5;
  border-color: #6a5cf5;
  color: #ffffff;
}

}

/* Çok dar ekranlarda (iPhone SE 1. nesil, katlanabilirlerin dış ekranı) yazı kutusu daralıp
   kullanışsız kalmasın: boşluklar ve iç dolgu biraz azalır. */
@media (max-width: 350px) {
  .composer {
    padding-left: 6px;
    padding-right: 6px;
    gap: 5px;
  }
  .comp-input {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ============================================================
   ODA YÖNETİMİ (Ayarlar > Oda Üye Listesi / Oda Kayıtları / Oda Ayarları)
   ============================================================ */
.sheet-header-action {
  margin-left: auto;
  flex-shrink: 0;
  width: 46px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d3c4;
  border-radius: 8px;
  background: #ffffff;
  color: #1d9bf0;
  cursor: pointer;
}

.sheet-header-action svg {
  width: 21px;
  height: 21px;
  color: #1d9bf0;
}

/* ---- Oda Üye Listesi ---- */
.room-member-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e2d8;
  border-radius: 12px;
  background: #fbfaf6;
  cursor: pointer;
  text-align: left;
}

.room-member-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: #eceae3;
}

.room-member-avatar img,
.room-member-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-member-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.room-member-name {
  font-size: 15px;
  font-weight: 800;
  color: #1c1c1c;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-member-sub {
  font-size: 12.5px;
  color: #8a8778;
}

/* ---- Oda Kayıtları ---- */
.room-logs-view {
  overflow: hidden;
}

.room-logs-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #eee9dc;
}

.room-logs-toolbar input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 1px solid #d9d3c4;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 16px;
  outline: none;
  background: #ffffff;
}

.room-logs-btn {
  flex-shrink: 0;
  width: 46px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d9d3c4;
  border-radius: 8px;
  background: #ffffff;
  color: #5b5647;
  cursor: pointer;
}

.room-logs-btn svg {
  width: 20px;
  height: 20px;
}

.room-logs-btn.primary,
.room-logs-btn.active {
  border-color: #1d9bf0;
  color: #1d9bf0;
}

.room-logs-body {
  gap: 0;
  padding: 0 12px 8px;
}

.room-log-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 4px;
  border-bottom: 1px solid #eee9dc;
}

.room-log-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e2ded1;
  background: #f4f2ec;
}

.room-log-avatar img,
.room-log-avatar svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.room-log-main {
  min-width: 0;
  flex: 1;
}

.room-log-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #2b2b2b;
  overflow-wrap: anywhere;
}

.room-log-time {
  margin-top: 4px;
  text-align: right;
  font-size: 12px;
  color: #a19e92;
}

.rl-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 7px;
  background: #eaf2fd;
  color: #2a6fdb;
  font-weight: 700;
}

.room-logs-pager {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  border-top: 1px solid #e2ded1;
  background: #f7f5ef;
  overflow-x: auto;
}

.rl-page-btn {
  flex: 1 0 auto;
  min-width: 44px;
  height: 46px;
  padding: 0 10px;
  border: none;
  border-right: 1px solid #e2ded1;
  background: transparent;
  color: #5b5647;
  font-size: 20px;
  cursor: pointer;
}

.rl-page-btn.active {
  background: #dcd8cd;
  color: #1c1c1c;
  font-weight: 700;
}

/* ---- Oda Ayarları ---- */
.room-settings-body {
  gap: 4px;
  padding-bottom: 28px;
}

.rs-group {
  margin-bottom: 16px;
}

.rs-label {
  display: block;
  color: #1d9bf0;
  font-size: 19px;
  font-weight: 800;
}

.rs-desc {
  margin: 2px 0 8px;
  color: #8a8778;
  font-size: 13.5px;
  line-height: 1.35;
}

.rs-general-note {
  margin: 0 0 14px;
}

.rs-section {
  margin: 8px 0 12px;
  font-size: 20px;
  font-weight: 800;
  color: #444;
}

.rs-field {
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 12px 14px;
  border: 1px solid #d9d3c4;
  border-radius: 8px;
  background: #ffffff;
  color: #1c1c1c;
  font-size: 16px;
  outline: none;
}

.rs-field:disabled {
  background: #f4f2ec;
  color: #8a8778;
}

body.dark-theme .sheet-header-action,
body.dark-theme .room-logs-btn,
body.dark-theme .room-logs-toolbar input,
body.dark-theme .rs-field { background: #232327; border-color: #34343a; color: #e8e6e3; }
body.dark-theme .room-member-row { background: #232327; border-color: #34343a; }
body.dark-theme .room-member-name, body.dark-theme .room-log-text { color: #e8e6e3; }
body.dark-theme .rl-chip { background: #22324a; color: #8db6f2; }
body.dark-theme .room-logs-pager { background: #202024; border-top-color: #34343a; }
body.dark-theme .rl-page-btn { color: #cfcdd6; border-right-color: #34343a; }
body.dark-theme .rl-page-btn.active { background: #34343a; color: #fff; }

/* Oda ekranları uzun listeler/formlar içerdiği için ayarlar penceresi neredeyse tam boy açılır */
#settingsSheet[data-current-view="roomlogs"],
#settingsSheet[data-current-view="roomsettings"],
#settingsSheet[data-current-view="roommembers"] {
  height: 92%;
  max-height: 92%;
}

/* Sohbet mesajları listenin ALTINA hizalanır: sohbet kısa olsa bile son mesaj, hemen altındaki
   "yazıyor..." çerçevesine ve yazı kutusuna yakın durur. Karşılama mesajı ve giriş bildirimleri ise
   KENDİ yerinde, yukarıda kalır. Boşluk, ilk sohbet mesajının margin-top:auto değeriyle oluşur
   (justify-content:flex-end kullanılmaz; liste uzayınca yukarı kaydırma bozulmasın). */
.msg-row.first-chat-msg {
  margin-top: auto; /* ilk sohbet mesajından ÖNCEKİLER (karşılama, giriş bildirimleri) yukarıda kalır */
}

/* Kapalı alt pencerelerin (sheet) yukarı sızan gölgesi ekranın altında koyu bir bant oluşturup
   "yazıyor" kutusunu ve yazı kutusunun üstünü kararttığı için, sadece AÇIKKEN gölge gösterilir. */
.bottom-sheet:not(.active) {
  box-shadow: none;
}

/* Yetkili girişi: [yuvarlak fotoğraf] Unvan @rumuz giriş yaptı. — mesaj balonuyla aynı hizada.
   Sol alan (fotoğraf ya da simgeler) HER İKİ durumda da aynı yükseklikte: fotoğraf sonradan
   gelse bile bildirim büyüyüp altındaki mesajları kaydırmaz. */
.system-pill-staff {
  min-height: 28px;
}

.system-pill-lead {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 20px;
}

.notice-avatar {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: #d9d6cc;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.notice-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* @rumuz: referanstaki gibi soluk gri kutucuk içinde, koyu ve kalın */
.system-pill-mention {
  display: inline-block;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .07);
  color: #2b2b2b;
  font-weight: 800;
}

body.dark-theme .system-pill-mention { background: rgba(255, 255, 255, .12); color: #f2f1f7; }

/* Tek mesaj silinince görünen kişi adı: diğer bildirimlerdeki rumuzlardan biraz daha koyu ve kalın */
.system-pill-text .notice-nick-strong {
  color: #000000;
  font-weight: 900;
  text-shadow: 0 0 .5px rgba(0, 0, 0, .55);
}

body.dark-theme .system-pill-text .notice-nick-strong { color: #ffffff; text-shadow: 0 0 .5px rgba(255, 255, 255, .5); }

/* Sol üstteki galeri simgesi artık sadece GÖRSEL (gerçek düğme yan menüde): tıklamayı/kaydırmayı engellemez */
.attach-round-deco {
  pointer-events: none;
  cursor: default;
}

/* ============================================================
   GİRİŞ EKRANI ALT BİLGİSİ: Sözleşme | Kurallar | Gizlilik
   ============================================================ */
/* order:1 → yıldız gökyüzü ekranındaki alt boşluk elemanının (::after, order 0) SONUNA düşer, yani ekranın en altında durur */
.legal-footer {
  order: 1;
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  display: flex;
  width: calc(100% + 36px);
  margin: 8px -18px -14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 10, 16, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.legal-footer-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 4px;
  border: none;
  border-right: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.legal-footer-btn:last-child {
  border-right: none;
}

.legal-footer-btn:active {
  background: rgba(255, 255, 255, .08);
  color: #ffffff;
}

.terms-modal-body .legal-updated {
  margin-top: 14px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .45);
}

/* ============================================================
   ÜYE OL: [tik][Kullanıcı Sözleşmesi] (tik bağlantıya bitişik)
   ============================================================ */
.signup-terms-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 2px 0;
  cursor: pointer;
  user-select: none;
}

.signup-terms-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.signup-terms-box {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #b9b3a3;
  background: #ffffff;
  transition: background .15s ease, border-color .15s ease;
}

.signup-terms-row input:checked ~ .signup-terms-box {
  background: linear-gradient(135deg, #7b3cf0, #a239ea);
  border-color: transparent;
}

.signup-terms-row input:checked ~ .signup-terms-box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2.5px;
  width: 5px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

.signup-terms-row input:focus-visible ~ .signup-terms-box {
  outline: 2px solid #a239ea;
  outline-offset: 2px;
}

.signup-terms-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #7b3cf0;
  text-decoration: underline;
  cursor: pointer;
}

body.dark-theme .signup-terms-box { background: #232327; border-color: #55555c; }
body.dark-theme .signup-terms-link { color: #c9a2ff; }

/* ============================================================
   KARŞILAMA MESAJININ YANINDAKİ GALERİ SİMGESİ (sadece görsel, yazıya ortalı)
   ============================================================ */
.welcome-msg-row {
  position: relative;
}

.welcome-deco {
  position: absolute;
  left: -50px;            /* satırın sol boşluğu 50px: simge 42px + 8px aralık */
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b6b6b;
  pointer-events: none;
}

.welcome-deco svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   KİŞİLER LİSTESİNDE İNCE CİNSİYET ÇERÇEVESİ (erkek: mavi, kadın: pembe)
   ============================================================ */
.user-row-avatar.ring-m {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3.5px #6ba8ee;
}

.user-row-avatar.ring-f {
  box-shadow: 0 0 0 1.5px #ffffff, 0 0 0 3.5px #ee8fbb;
}

/* ============================================================
   KİBAR GERİ DÖN DÜĞMESİ (ayarlar, kanallar ve gruplar panelleri)
   Boşluğa (karartılmış alana) basmak zaten geri çıkarır; bu düğme de aynı işi yapar.
   ============================================================ */
.panel-back-fab {
  position: absolute;
  z-index: 4;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: linear-gradient(135deg, #4a9bf5, #2f7fe8);
  box-shadow: 0 4px 12px rgba(47, 127, 232, .38), 0 1px 3px rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: .94;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

/* Profil sekmesi: sohbete dönme butonu (üst tarafa sabit, sekme içeriğiyle akışta) */
.profile-tab-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: #2f7fe8;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 16px 0;
  margin: 0;
  cursor: pointer;
}

.profile-tab-back-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.profile-tab-back-btn:active {
  opacity: .7;
}

.panel-back-fab svg {
  width: 18px;
  height: 18px;
}

.panel-back-fab:active {
  transform: scale(.92);
  opacity: 1;
}

/* Çekmeceler: kenara yarı yarıya oturur (referanstaki gibi), alt köşeye yakın */
.panel-back-fab-side {
  left: -26px;
  bottom: 16px;
}

/* Ayarlar penceresi: üst kenarın tam ortasında, yarısı dışarıda (sağdaki yan menüye binmesin) */
.panel-back-fab-sheet {
  left: calc(50% - 19px);
  top: -19px;
}

/* Panel kapalıyken (ekran dışında beklerken) düğme görünmesin */
.side-drawer:not(.active) .panel-back-fab,
.bottom-sheet:not(.active) .panel-back-fab {
  display: none;
}

body.dark-theme .user-row-avatar.ring-m { box-shadow: 0 0 0 1.5px #1c1c1f, 0 0 0 3.5px #6ba8ee; }
body.dark-theme .user-row-avatar.ring-f { box-shadow: 0 0 0 1.5px #1c1c1f, 0 0 0 3.5px #ee8fbb; }

/* Yetkili giriş bildirimi ("Sunucu Sahibi @Poyraz giriş yaptı."): diğer bildirimlerden biraz daha büyük
   (yazı, çerçeve, fotoğraf); yine de fazla büyük değil ve normal telefon genişliklerinde tek satıra sığar.
   Sol alan (fotoğraf / simgeler) hep aynı boyutta olduğu için fotoğraf sonradan gelse bile bildirim
   büyüyüp altındaki mesajları kaydırmaz. */
.system-pill-staff {
  min-height: 32px;
  padding: 5px 12px;
  gap: 6px;
  font-size: 13.5px;
  border-left-width: 3px;
  border-right-width: 3px;
  border-radius: 16px;
}

.system-pill-staff .system-pill-text {
  font-size: 13.5px;
}

.system-pill-staff .system-pill-lead {
  height: 22px;
}

.system-pill-staff .notice-avatar {
  width: 22px;
  height: 22px;
}

.system-pill-staff .system-pill-icons {
  gap: 4px;
}

.system-pill-staff .system-pill-icons svg {
  width: 17px;
  height: 17px;
}

.system-pill-staff .system-pill-mention {
  padding: 0 5px;
  border-radius: 7px;
}

/* Çok dar ekranlarda biraz daha küçük ki satıra sığsın */
@media (max-width: 340px) {
  .system-pill-staff,
  .system-pill-staff .system-pill-text {
    font-size: 13px;
  }
}

/* ============================================================
   YAZI KUTUSU: odaklanınca uzar (sadece telefon genişliğinde)
   Hediye / ses / galeri / radyo / sesli oda düğmeleri gizlenir, emoji ve gönder kalır.
   Kutu kapanınca (odak gidince) ya da mesaj gönderilince eski haline döner.
   ============================================================ */
@media (max-width: 859.98px) {
  .composer.composer-expanded > .comp-icon:not(#emojiToggleBtn),
  .dm-composer.composer-expanded > .comp-icon:not(#dmEmojiToggleBtn) {
    display: none;
  }
}

/* Klavye açıkken uygulama klavyeyle BİR BÜTÜN olur: yazı kutusunun altındaki sahte "ev çubuğu"
   (beyaz/siyah boşluk) gizlenir, yazı kutusu doğrudan klavyenin üstünde durur. */
html.kb-open .home-indicator {
  display: none;
}

/* ============================================================
   KAYDIRARAK ALINTILAMA (WhatsApp gibi) + ÖZEL MESAJ ALINTI BLOĞU
   ============================================================ */
/* Yatay hareketler JS'e kalır, dikey kaydırma tarayıcıda çalışmaya devam eder */
.msg-row,
.msg-bubble {
  touch-action: pan-y;
}

.msg-row.swiping,
.msg-bubble.swiping {
  will-change: transform;
}

#messages,
#dmMessages {
  position: relative;
  overflow-x: hidden; /* kaydırılan mesaj yatay kaydırma çubuğu oluşturmasın */
}

.swipe-reply-icon {
  position: absolute;
  left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(107, 107, 107, .18);
  color: #5b5b5b;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.swipe-reply-icon svg {
  width: 17px;
  height: 17px;
}

.swipe-reply-icon.ready {
  background: #2a9df4;
  color: #ffffff;
}

/* Özel mesaj balonlarındaki alıntı bloğu: açık zeminli, böylece hem gelen hem giden (mor) balonda,
   yetki renkleriyle de okunur */
.dm-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(255, 255, 255, .92);
  border-left: 3px solid #b7b0a0;
  border-radius: 8px;
  padding: 5px 9px;
  margin-bottom: 6px;
  color: #1c1c1c;
}

.dm-quote-name {
  font-size: 12px;
  font-weight: 800;
  color: #4a4636;
}

.dm-quote-text {
  font-size: 12.5px;
  color: #5b5b5b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.msg-bubble .dm-msg-body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   PROFİL FOTOĞRAFI BÜYÜTME (lightbox)
   ============================================================ */
.photo-lightbox {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .92);
  padding: 24px;
  cursor: zoom-out;
}

.photo-lightbox.active {
  display: flex;
}

.photo-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.photo-lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

/* Büyütülebilen fotoğraflarda küçük bir imleç ipucu */
.profile-avatar.has-photo,
.profile-view-avatar.has-photo {
  cursor: zoom-in;
}

/* ============================================================
   ŞİFRESİZ GİRİŞ (rumuz kayıtlı bir üyeye aitse şifre yerine
   otomatik numaralı misafir rumuzuyla devam etme seçeneği)
   ============================================================ */
.or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
}

.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, .18);
}

.glow-btn.ghost {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .28);
  color: #ffffff;
}

/* ============================================================
   ŞİFRE ALANLARI: type="password" YERİNE metin gizleme (nokta)
   ============================================================
   type="password" kullanınca Chrome, klavyenin ÜSTÜNE kendi otomatik
   doldurma çubuğunu (anahtar/kart/konum simgeleri) koyuyor ve bu site
   tarafından KAPATILAMIYOR. Bunun yerine alan hep type="text" kalıyor,
   görünüşte noktalarla gizleniyor — Chrome bunu artık "şifre alanı"
   saymadığı için o çubuğu hiç göstermiyor. */
.pw-mask {
  -webkit-text-security: disc;
  text-security: disc;
}

/* ============================================================
   #Mobildekal - SOHBET LİSTESİ ÜST ÜSTE BİNME DÜZELTMESİ
   .dm-list dikey bir flex kutusu; içindeki satırlar varsayılan olarak
   "sıkışabilir" (flex-shrink: 1) olduğu için sohbet sayısı arttıkça
   ekrana sığsın diye eziliyor, avatarlar birbirinin üstüne taşıyordu.
   Artık satırlar asla sıkışmıyor; liste uzadıkça aşağı doğru kayıyor.
   ============================================================ */
.dm-list {
  min-height: 0;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.dm-list > *,
#dmInboxDrawerList > * {
  flex-shrink: 0;
}

.dm-list-row {
  min-height: 80px;
  padding: 12px 6px;
}

/* ============================================================
   #Mobildekal - DAHA BÜYÜK VE NET PROFİL FOTOĞRAFLARI
   ============================================================ */
.dm-list-open-btn .user-row-avatar {
  width: 58px;
  height: 58px;
}

.dm-list-open-btn .user-row-avatar svg {
  width: 36px;
  height: 36px;
}

.user-row {
  flex-shrink: 0;
}

.user-row .user-row-avatar {
  width: 48px;
  height: 48px;
}

.user-row .user-row-avatar svg {
  width: 30px;
  height: 30px;
}

.profile-view-avatar {
  width: 132px;
  height: 132px;
}

.profile-view-avatar svg {
  width: 78px;
  height: 78px;
}

.user-row-avatar img,
.profile-avatar img {
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ============================================================
   #Mobildekal - DM: "Fotoğraf Çek / Galeriden Seç" seçim ekranı
   ============================================================ */
.dm-media-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 209;
  background: rgba(0, 0, 0, .5);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.dm-media-pick-overlay.active {
  display: flex;
  animation: dmPickFade .15s ease;
}

.dm-media-pick-sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: dmPickUp .2s ease;
}

.dm-media-pick-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #dcd8cc;
  margin: 2px auto 8px;
}

.dm-media-pick-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  border: none;
  background: #f7f5ee;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  color: #1c1c1c;
}

.dm-media-pick-btn:active {
  background: #eeebe0;
}

.dm-media-pick-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dm-media-pick-icon svg {
  width: 23px;
  height: 23px;
}

.dm-media-pick-icon-camera { background: #fde6e6; color: #d6453d; }
.dm-media-pick-icon-gallery { background: #dce8fb; color: #2a6fdb; }

.dm-media-pick-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dm-media-pick-text strong {
  font-size: 15px;
  font-weight: 800;
}

.dm-media-pick-text small {
  font-size: 12.5px;
  color: #8a877a;
}

.dm-media-pick-cancel {
  margin-top: 4px;
  border: none;
  background: none;
  padding: 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: #8a877a;
  cursor: pointer;
}

@keyframes dmPickFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dmPickUp { from { transform: translateY(24px); } to { transform: translateY(0); } }

body.dark-theme .dm-media-pick-sheet { background: #1c1c1f; }
body.dark-theme .dm-media-pick-handle { background: #3a3a40; }
body.dark-theme .dm-media-pick-btn { background: #26262b; color: #ececec; }
body.dark-theme .dm-media-pick-btn:active { background: #2f2f35; }
body.dark-theme .dm-media-pick-text small,
body.dark-theme .dm-media-pick-cancel { color: #8f8e96; }

/* #Mobildekal - Bilgisayarda DM mesajına tıklayınca "Alıntıla" menüsü açılır */
@media (hover: hover) and (pointer: fine) {
  #dmMessages .msg-bubble { cursor: pointer; }
  #dmMessages .msg-bubble img,
  #dmMessages .msg-bubble video,
  #dmMessages .msg-bubble audio { cursor: auto; }
}

/* ============================================================
   #Mobildekal - ALINTILAR: mesajın TAMAMI görünsün (kesilmesin)
   ============================================================ */
.msg-quote-text,
.dm-quote-text {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.msg-quote,
.dm-quote {
  max-width: 100%;
  min-width: 0;
}

/* Yazı kutusunun üstündeki "Yanıtlanıyor" çubuğu: metnin tamamı görünür;
   çok uzunsa çubuk ekranı kaplamasın diye kendi içinde kayar. */
.reply-preview-text {
  white-space: pre-wrap;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.reply-preview-info {
  max-height: 32vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.reply-preview-bar {
  align-items: flex-start;
}

/* ============================================================
   #Mobildekal - AKICILIK / DONMA-KASMA DÜZELTMELERİ
   ============================================================ */
/* Mesaj listeleri dikey flex kutusu: satırlar sıkışıp üst üste binmesin,
   liste uzadıkça normal şekilde kaysın. */
.messages > *,
.dm-messages > * {
  flex-shrink: 0;
}

.messages,
.dm-messages,
.dm-list,
.drawer-body {
  overflow-anchor: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* Ekranda görünmeyen liste satırları çizilmez (uzun listelerde büyük kazanç) */
.user-row,
.dm-list-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 80px;
}

/* Çevrimiçi noktası: her karede gölge yeniden çizmek yerine sadece saydamlık
   (ekran kartıyla yapılır, işlemciyi yormaz). */
.online-dot {
  animation: onlineDotPulseLite 1.6s ease-in-out infinite;
  will-change: opacity;
}

@keyframes onlineDotPulseLite {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Yetkili giriş çubuğunun parlaması birkaç kez yanıp dursun (sürekli yeniden çizim olmasın) */
.staff-join-badge {
  animation-iteration-count: 4;
}

/* ============================================================
   #Mobildekal - GÖRÜŞMEYİ KÜÇÜLTME (yüzen, sürüklenebilir balon)
   ============================================================ */
.call-minimize-btn {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.call-minimize-btn svg {
  width: 24px;
  height: 24px;
}

.call-mini {
  display: none;
}

.call-overlay.call-minimized {
  position: fixed;
  inset: auto;
  right: auto;
  bottom: auto;
  width: 92px;
  height: 92px;
  padding: 0;
  border-radius: 50%;
  z-index: 500;
  justify-content: center;
  align-items: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .38), 0 0 0 3px #4cbb17;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.call-overlay.call-minimized.call-type-video {
  width: 112px;
  height: 160px;
  border-radius: 16px;
}

.call-overlay.call-minimized .call-info,
.call-overlay.call-minimized .call-controls,
.call-overlay.call-minimized .call-minimize-btn,
.call-overlay.call-minimized .call-local-video {
  display: none !important;
}

.call-overlay.call-minimized .call-videos,
.call-overlay.call-minimized .call-videos * {
  pointer-events: none;
}

.call-overlay.call-minimized .call-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.call-mini-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: #2a2d38;
  color: #8a8fa3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.call-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-mini-avatar svg {
  width: 30px;
  height: 30px;
}

.call-mini-time {
  font-size: 11.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* Görüntülü görüşmede balonda karşı tarafın görüntüsü görünür; avatar gizlenir,
   süre altta küçük bir etiket olarak durur. */
.call-overlay.call-minimized.call-type-video .call-mini {
  justify-content: flex-end;
  padding-bottom: 8px;
}

.call-overlay.call-minimized.call-type-video .call-mini-avatar {
  display: none;
}

.call-overlay.call-minimized.call-type-video .call-mini-time {
  background: rgba(0, 0, 0, .45);
  padding: 2px 8px;
  border-radius: 999px;
}

.call-overlay.call-minimized:active {
  cursor: grabbing;
}

/* ============================================================
   #Mobildekal - Görüşme ekranı: küçültme tuşu mor-mavi, dokununca
   isim/süre/tuşlar gizlenir-gösterilir, görüntülüde büyük avatar yok
   ============================================================ */
.call-minimize-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
  box-shadow: 0 4px 16px rgba(99, 102, 241, .55);
  border: 1.5px solid rgba(255, 255, 255, .35);
}

.call-minimize-btn:active {
  transform: scale(.94);
}

/* Görüntülü görüşme bağlanınca: ortadaki büyük avatar kalkar, isim ve süre
   üstte küçük ve sade durur — karşı tarafın görüntüsünü kapatmaz. */
.call-overlay.call-type-video.call-connected .call-avatar {
  display: none;
}

.call-overlay.call-type-video.call-connected .call-info {
  margin-top: 4px;
  gap: 2px;
  align-self: center;
  background: rgba(0, 0, 0, .28);
  padding: 6px 14px;
  border-radius: 14px;
}

.call-overlay.call-type-video.call-connected .call-peer-name {
  font-size: 15px;
}

.call-overlay.call-type-video.call-connected .call-status {
  font-size: 12px;
}

.call-overlay .call-info,
.call-overlay .call-controls,
.call-overlay .call-minimize-btn {
  transition: opacity .2s ease;
}

.call-overlay.call-ui-hidden .call-info,
.call-overlay.call-ui-hidden .call-controls,
.call-overlay.call-ui-hidden .call-minimize-btn {
  opacity: 0;
  pointer-events: none;
}

/* #Mobildekal - Katıldığı Odalar: şu an bulunduğu oda vurgulu */
.pv-room-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pv-room-live {
  background: #eef8f1;
}
.pv-room-live-tag {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: #2fae66;
}
.pv-room-empty {
  color: #a9a48f;
  font-weight: 500;
}
body.dark-theme .pv-room-live { background: #1d2a22; }

/* #Mobildekal - DM'deki kullanıcılar ikonu, ana sohbetteki Gruplar ikonuyla aynı boyutta */
#dmShortcutUsersBtn svg {
  width: 15px;
  height: 15px;
}

/* ============================================================
   #Mobildekal - Profil: yaş/şehir ve takipçi satırları (esohbet gibi)
   ============================================================ */
.pv-info-line,
.pv-followers {
  margin: 4px 0 0;
  font-size: 15px;
  color: #8a877a;
  text-align: center;
  line-height: 1.4;
}
.pv-info-line { margin-top: 12px; }
.pv-info-line strong,
.pv-followers strong {
  color: #6b6858;
  font-weight: 800;
}
body.dark-theme .pv-info-line,
body.dark-theme .pv-followers { color: #8f8e96; }
body.dark-theme .pv-info-line strong,
body.dark-theme .pv-followers strong { color: #c9c7cf; }

.pv-rooms-header { justify-content: flex-start; }
.pv-rooms-count {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 600;
  color: #a9a48f;
}

/* ============================================================
   #Mobildekal - Çevrimiçi yeşil nokta SABİT (yanıp sönmez)
   ============================================================ */
.online-dot {
  animation: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
  will-change: auto;
}

/* ============================================================
   #Mobildekal - Daha büyük profil fotoğrafları
   ============================================================ */
.profile-view-avatar {
  width: 160px;
  height: 160px;
}
.profile-view-avatar svg {
  width: 92px;
  height: 92px;
}
.dm-list-open-btn .user-row-avatar {
  width: 62px;
  height: 62px;
}
.dm-list-open-btn .user-row-avatar svg {
  width: 38px;
  height: 38px;
}
.dm-list-row {
  min-height: 84px;
}
.user-row,
.dm-list-row {
  contain-intrinsic-size: auto 86px;
}
.dm-list-open-btn .online-dot,
.dm-list-open-btn .offline-dot {
  width: 13px;
  height: 13px;
}

/* ============================================================
   #Mobildekal - DM BALONU: SAAT VE TİK ASLA BİRBİRİNE GİRMESİN
   Kısa mesajlarda (tek nokta, "..", "Slm") balon çok daralıyor ve
   köşedeki saat alt alta kırılıp ("1 / 6") tikin ve metnin üstüne
   biniyordu. Artık saat hiç kırılmaz ve balonun, saat + tik sığacak
   kadar en az bir genişliği vardır; metin kısa da olsa düzgün durur.
   ============================================================ */
.dm-msg-time {
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0;
}

.dm-msg-tick {
  flex-shrink: 0;
  line-height: 0;
}

#dmMessages .msg-bubble {
  box-sizing: border-box;
}

#dmMessages .msg-bubble.in {
  min-width: 66px;
  padding-bottom: 18px;
}

#dmMessages .msg-bubble.out {
  min-width: 90px;
  padding-bottom: 18px;
}

#dmMessages .msg-bubble.out .dm-msg-time {
  right: 28px;
  bottom: 5px;
}

#dmMessages .msg-bubble.in .dm-msg-time {
  right: 12px;
  bottom: 5px;
}

#dmMessages .msg-bubble.out .dm-msg-tick {
  right: 10px;
  bottom: 4px;
}

/* Kısa metin balonun solunda dursun, saatle aynı hizaya kaymasın */
#dmMessages .msg-bubble .dm-msg-body {
  display: block;
  min-width: 0;
}

/* ============================================================
   #Mobildekal - PROFİL FOTOĞRAFI KIRPMA EKRANI
   ============================================================ */
.avatar-crop-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: #0d0e12;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.avatar-crop-overlay.active { display: flex; }

.avatar-crop-top {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
}
.avatar-crop-title { font-size: 16px; font-weight: 800; }
.avatar-crop-textbtn {
  border: none;
  background: none;
  color: #cfd3e0;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 8px;
  cursor: pointer;
}
.avatar-crop-save {
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  border-radius: 999px;
  padding: 9px 18px;
}

.avatar-crop-stage {
  position: relative;
  width: min(86vw, 360px);
  height: min(86vw, 360px);
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  touch-action: none;
  cursor: grab;
}
.avatar-crop-stage:active { cursor: grabbing; }
.avatar-crop-stage img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  max-height: none;
  transform-origin: 0 0;
  pointer-events: none;
  will-change: transform;
}
.avatar-crop-mask {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .58);
  border: 2px solid rgba(255, 255, 255, .9);
  pointer-events: none;
}
.avatar-crop-hint {
  margin: 0;
  font-size: 12.5px;
  color: #9aa0b4;
  text-align: center;
}
.avatar-crop-zoom {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(86vw, 360px);
  font-size: 20px;
  color: #cfd3e0;
}
.avatar-crop-zoom input[type="range"] {
  flex: 1;
  accent-color: #8b5cf6;
}

/* #Mobildekal - Yetkili Paneli: 📢 Duyuru kartı ve yazma alanı */
.staff-tile-announce {
  color: #6d28d9;
}
.staff-announce-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 100px;
  resize: vertical;
  border: 1px solid #e2ded1;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14.5px;
  margin-top: 8px;
  background: #fff;
  color: #1c1c1c;
}
.staff-announce-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.staff-announce-footer span { font-size: 12px; color: #a9a48f; }
.staff-announce-send { width: auto; max-width: 220px; margin: 0; }
body.dark-theme .staff-announce-input { background: #1c1c1f; color: #ececec; border-color: #2f2f35; }
body.dark-theme .staff-tile-announce { color: #a78bfa; }

/* ============================================================
   #Mobildekal - "@rumuz" bahsetme bildirimi (yeşil, 5 sn)
   ============================================================ */
.mention-toast {
  position: fixed;
  left: 50%;
  top: calc(64px + env(safe-area-inset-top, 0px));
  z-index: 450;
  width: min(92vw, 420px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  text-align: left;
  box-shadow: 0 10px 28px rgba(22, 163, 74, .38);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -16px);
  transition: opacity .22s ease, transform .22s ease;
}
.mention-toast.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mention-toast-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .7);
}
.mention-toast-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-toast-avatar svg { width: 24px; height: 24px; }
.mention-toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mention-toast-title { font-size: 14.5px; font-weight: 600; }
.mention-toast-title strong { font-weight: 800; }
.mention-toast-text {
  font-size: 12.5px;
  opacity: .92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bildirime dokununca ilgili mesaj kısa süre parlasın */
.msg-row.mention-flash .msg-content {
  animation: mentionFlash 1.8s ease;
}
@keyframes mentionFlash {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px rgba(34, 197, 94, .7); }
}

/* #Mobildekal - "@rumuz" etiketi: kalın ve kırmızı (yetki rengi ne olursa olsun) */
.msg-mention {
  color: #e11d2e !important;
  font-weight: 800;
}
.msg-bubble.out .msg-mention {
  color: #ffd1d5 !important; /* mor balonda okunaklı kalsın */
}
body.dark-theme .msg-mention { color: #ff5a67 !important; }
.mention-toast-title em {
  font-style: normal;
  font-weight: 800;
}


/* ============================================================
   #Mobildekal - PROFİL SAYFASI "KESİK / YARIM" GÖRÜNME DÜZELTMESİ
   Profil gövdesi kaydırılabilir dikey bir esnek kutu; içindekiler
   varsayılan olarak "sıkışabilir" olduğu için içerik ekrana sığmayınca
   Engelle/Mesaj satırı ve Katıldığı Odalar kutusu eziliyor, yazılar
   yarım kalıyor, ikonlar noktaya dönüşüyordu. Artık hiçbir parça
   sıkışmaz; içerik uzunsa sayfa normal şekilde aşağı kayar.
   ============================================================ */
.profile-view-body > * {
  flex-shrink: 0;
}

.profile-view-row-4,
.profile-view-rooms,
.pv-mod-row,
.profile-view-row-2 {
  flex-shrink: 0;
  min-height: min-content;
}

.pv-icon-btn svg,
.pv-pill-btn svg,
.pv-rooms-header svg,
.pv-mod-row svg {
  flex-shrink: 0;
  min-width: 19px;
  min-height: 19px;
}

.pv-icon-btn {
  min-width: 0;
  min-height: 68px;
  justify-content: center;
}

.pv-icon-btn span {
  white-space: nowrap;
}

.profile-view-rooms {
  overflow: visible;
}

.pv-rooms-body {
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.pv-room-row {
  flex-shrink: 0;
  min-height: 44px;
}

/* ============================================================
   #Mobildekal - Kişiler: cinsiyet filtresi (Tümü / Erkek / Bayan)
   ============================================================ */
.user-gender-filter {
  flex-shrink: 0;
  display: flex;
  gap: 6px;
  padding: 8px 12px 4px;
}

.ugf-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e2ded1;
  background: #fbfaf6;
  color: #5b5848;
  border-radius: 999px;
  padding: 7px 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.ugf-btn.active {
  background: #1c1c1c;
  border-color: #1c1c1c;
  color: #fff;
}

.ugf-btn[data-gender-filter="erkek"].active {
  background: #2f7be5;
  border-color: #2f7be5;
}

.ugf-btn[data-gender-filter="kadin"].active {
  background: #e0529b;
  border-color: #e0529b;
}

.ugf-count {
  font-size: 11.5px;
  font-weight: 700;
  opacity: .75;
}

body.dark-theme .ugf-btn {
  background: #1c1c1f;
  border-color: #2f2f35;
  color: #c9c7cf;
}

body.dark-theme .ugf-btn.active {
  background: #ececec;
  border-color: #ececec;
  color: #111;
}

/* ============================================================
   #Mobildekal - Profil sayfası açıkken alttaki "Mesaj yaz..." çubuğu
   görünmesin (profil tam ekran olsun).
   ============================================================ */
body:has(#userProfileSheet.active) .composer {
  display: none !important;
}

/* ============================================================
   #Mobildekal - ÖZEL MESAJ TAM EKRAN (telefonda)
   Bir özel sohbet açıkken üstteki uygulama çubuğu (#Mobildekal, sayaç,
   sekme ikonları) gizlenir; sohbet ekranın tamamını kullanır. Geri
   okuna basınca çubuk geri gelir. Bilgisayar düzeninde değişiklik yok.
   ============================================================ */
@media (max-width: 859px) {
  body:has(.tab-panel.active[data-panel="messages"] #dmConversation.active) .topbar {
    display: none !important;
  }
  body:has(.tab-panel.active[data-panel="messages"] #dmConversation.active) .dm-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
}

/* ============================================================
   #Mobildekal - "@" kişi önerisi listesi (yazı kutusunun üstünde)
   ============================================================ */
.mention-suggest {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 6px);
  z-index: 40;
  display: none;
  flex-direction: column;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid #e2ded1;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
  padding: 4px;
}
.mention-suggest.active { display: flex; }
.mention-suggest-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  padding: 7px 10px;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  color: #1c1c1c;
}
.mention-suggest-item.active,
.mention-suggest-item:hover { background: #f1efe6; }
.mention-suggest-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #eeece4;
  color: #a9a48f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mention-suggest-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mention-suggest-avatar svg { width: 20px; height: 20px; }
.mention-suggest-name {
  font-size: 14.5px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mention-suggest-rank {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
}
body.dark-theme .mention-suggest { background: #1c1c1f; border-color: #2f2f35; }
body.dark-theme .mention-suggest-item { color: #ececec; }
body.dark-theme .mention-suggest-item.active,
body.dark-theme .mention-suggest-item:hover { background: #26262b; }

/* Bildirimler sekmesinde "seni etiketledi" satırı */
.notif-row-mention { border-left: 3px solid #22c55e; }
.notif-row-mention .notif-row-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   #Mobildekal - Sesli sohbet bilgi balonu (esohbet gibi)
   ============================================================ */
.vr-hint-pill {
  --vr-arrow-right: 60px;
  position: absolute;
  right: 12px;
  bottom: calc(100% + 12px);
  z-index: 38;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 14px;
  padding: 10px 16px;
  background: #e3efff;
  color: #2f6fe0;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(47, 111, 224, .22);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.vr-hint-pill.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.vr-hint-pill::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: var(--vr-arrow-right);
  width: 12px;
  height: 12px;
  background: #e3efff;
  transform: rotate(45deg);
  border-radius: 2px;
}
.vr-hint-pill svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
body.dark-theme .vr-hint-pill,
body.dark-theme .vr-hint-pill::after {
  background: #1d2b44;
  color: #8ab4ff;
}

/* Etiket bildirimi: mesajın tamamına yakını görünsün (2 satır) */
.mention-toast-text {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-row-mention .notif-row-sub {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   #Mobildekal - Mikrofon izni alındı (kırmızı, 5 sn) + "İzni Al" düğmesi
   ============================================================ */
.mic-revoked-banner {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 720;
  width: min(92vw, 440px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(220, 38, 38, .42);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -14px);
  transition: opacity .22s ease, transform .22s ease;
}
.mic-revoked-banner.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mic-revoked-banner svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.vr-revoke-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
  border: 1px solid #f5c2c2;
  background: #fdecec;
  color: #c62828;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.vr-revoke-mic-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.vr-revoke-mic-btn:active { transform: scale(.95); }
.vr-list-mode .vr-revoke-mic-btn { margin-top: 0; margin-left: auto; }
body.dark-theme .vr-revoke-mic-btn {
  background: #3a1c1a;
  border-color: #5a2522;
  color: #ff8a80;
}

/* #Mobildekal - Sesli sohbet balonu: dikeyde biraz daha ince, zarif (genişlik aynı) */
.vr-hint-pill {
  padding: 6px 16px;
  font-size: 14px;
  border-radius: 12px;
  gap: 7px;
  line-height: 1.2;
}
.vr-hint-pill svg {
  width: 15px;
  height: 15px;
}
.vr-hint-pill::after {
  width: 10px;
  height: 10px;
  bottom: -5px;
}

/* #Mobildekal - Sesli oda: yayıncıya dokununca menü; "Mikrofon İznini Al" kırmızı */
.vr-card-tappable { cursor: pointer; }
.vr-card-tappable:active .voice-room-avatar { transform: scale(.96); }
.context-menu-item-danger {
  color: #c62828 !important;
  font-weight: 800;
}
body.dark-theme .context-menu-item-danger { color: #ff8a80 !important; }

/* ============================================================
   #Mobildekal - ASIL DUVAR KAĞIDI (ana sohbet + özel mesaj)
   Başka bir duvar kağıdı seçilmediyse her zaman bu görsel görünür.
   ============================================================ */
.chat-bg,
.dm-messages {
  background-color: #e6ddd4;
  background-image: url("chat-wallpaper.png");
  background-size: 643px auto;
  background-repeat: repeat;
  background-position: center top;
}

/* ============================================================
   #Mobildekal - Klasik animasyonlu ifadeler (Eski / Gif sekmeleri)
   ============================================================ */
.classic-emote-grid {
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}
.classic-emote-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px;
}
.classic-emote-btn img {
  height: 30px;
  width: auto;
  max-width: 64px;
  image-rendering: auto;
  pointer-events: none;
}
.msg-classic-emote {
  height: 26px;
  width: auto;
  vertical-align: -7px;
  margin: 0 1px;
}