/* ============================================================
   T?MARHANE FM v2 - TEMA ?Y?LE?T?RME
   Eski sitenin hissini korur, daha temiz ve modern g?r?n?m
   Sadece CSS/layout de?i?iklikleri ? fonksiyonellik dokunulmad?
   ============================================================ */

/* ??????????????????????????????????????????????????????????
   0. CSS DE???KENLER? (renk paleti ? eski siteden t?retildi)
   ?????????????????????????????????????????????????????????? */
:root {
  --primary: #667eea;
  --primary-dark: #5a6fd8;
  --primary-light: #e7eeff;
  --secondary: #764ba2;
  --accent: #007bff;
  --accent-dark: #0056b3;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;

  /* Arka plan */
  --bg-body: #e8f4fd;
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-lighter: #f1f5f9;

  /* Metin */
  --text-main: #333333;
  --text-muted: #666666;
  --text-light: #999999;

  /* S?n?r */
  --border: #e0e0e0;
  --border-light: #eef2f7;

  /* G?lge */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);

  /* Header */
  --header-h: 48px;

  /* WhatsApp teal ?suit? ? header + composers (one source of truth) */
  --wa-teal: #075e54;
  --wa-teal-mid: #128c7e;
  --wa-teal-bright: #25d366;
  --wa-teal-deep: #054c44;
  --wa-fabric: var(--wa-teal);
  --wa-chip: #ffffff;
  --wa-chip-hover: #f0f2f5;
  --wa-chip-fg: #075e54;
  --wa-online-num: #39ff14; /* Neon ye?il ? online saya? her yerde */
  --wa-title: #ffffff;
  --wa-muted: rgba(255, 255, 255, 0.78);

  /* Ge?i? */
  --ease: 0.2s ease;
}

/* Mobilde header kompakt tek sat?r */
@media (max-width: 767px) {
  :root {
    --header-h: 38px;
  }
}

/* ??????????????????????????????????????????????????????????
   1. BODY & GLOBAL
   ?????????????????????????????????????????????????????????? */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  background-color: var(--bg-body);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
}

/* T?m scrollbarlar? iyile?tir */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-lighter);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: #c4cdd6;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #9eaab5;
}

/* ??????????????????????????????????????????????????????????
   2. HEADER
   ?????????????????????????????????????????????????????????? */
header {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  max-height: var(--header-h) !important;
}

.channel-header-bar {
  background: var(--wa-fabric) !important;
  border-bottom: 1px solid var(--wa-teal-deep) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12) !important;
  padding: 6px 14px !important;
  gap: 10px;
  color: var(--wa-title);
  position: relative !important;
}

/* Mesaj Kutusu header slot — konum/stil dosya sonunda kesin override ile gelir */

/* App title butonu ? ana sayfa */
.app-title-button {
  font-size: 15px;
  font-weight: 700;
  color: var(--wa-title);
  padding: 5px 10px;
  border-radius: 8px;
  transition: background var(--ease), color var(--ease);
  background: transparent;
}
.app-title-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--wa-title);
}
.app-title-button i {
  color: var(--wa-title);
}

/* Kanal ba?l?k butonu */
.channel-title-clickable {
  border-radius: 8px !important;
  transition: opacity var(--ease);
}
.channel-title-clickable:hover {
  opacity: 0.9;
}

.channel-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--wa-title);
}

/* Kanallar butonu ? teal suit: white chip */
.channels-button {
  font-size: 13px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  background: var(--wa-chip) !important;
  color: var(--wa-chip-fg) !important;
  border: none !important;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
  box-shadow: none !important;
}
.channels-button:hover {
  background: var(--wa-chip-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.channels-button--secondary {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
}
.channels-button--secondary:hover {
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: none !important;
}

/* Online saya? ? siyah pill + neon ye?il + ?N baloncuk */
.online-count-badge,
.online-users-counter,
.online-users-count,
.online-users-badge {
  position: relative !important;
  width: auto !important;
  min-width: var(--hdr-btn-size, 34px) !important;
  height: var(--hdr-btn-size, 34px) !important;
  border-radius: 999px !important;
  background: #000000 !important;
  border: 1px solid rgba(57, 255, 20, 0.35) !important;
  color: #39ff14 !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.18) !important;
  font-weight: 700 !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  overflow: visible !important;
}
.online-live-dot {
  display: none !important;
}
.online-count-value,
.counter-number,
.online-users-counter .counter-number,
.online-users-badge .online-count,
.channel-header-bar .online-users-counter .counter-number {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #39ff14 !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.65) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.online-users-counter .counter-circle {
  display: contents;
}

/* ?N u?an baloncuk */
.online-float-layer {
  position: absolute;
  left: 50%;
  top: -2px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
}
.online-float-chip {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  animation: online-float-up 1.05s ease-out forwards;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
}
.online-float-up {
  color: #39ff14;
}
.online-float-down {
  color: #ff5a5a;
}
@keyframes online-float-up {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(4px) scale(0.85);
  }
  15% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-22px) scale(1);
  }
}

/* Header buton grubu */
.header-buttons-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Header kullan?c? alan? */
.user-info-container {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ??????????????????????????????????????????????????????????
   3. ANA SAYFA ? KANAL L?STES?
   ?????????????????????????????????????????????????????????? */
.channel-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  padding: 20px;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.channel-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  will-change: transform;
  min-height: 150px;
  display: block;
  text-decoration: none;
  color: inherit;
  pointer-events: auto;
  z-index: 2;
}
.channel-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: border-color var(--ease);
  pointer-events: none;
  z-index: 3;
}

/* Kapak resmi ? k??e metinleri i?in ?st+alt okunabilirlik */
.channel-card[style*="background-image"] {
  display: block;
  min-height: 175px;
}
.channel-card[style*="background-image"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.12) 42%,
    rgba(0, 0, 0, 0.12) 58%,
    rgba(0, 0, 0, 0.62) 100%
  );
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.channel-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border);
}
.channel-card:hover::after {
  border-color: var(--primary);
}
.channel-card:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Sol ?st: kanal ad? (+%50) */
.channel-card-name {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 52px;
  z-index: 2;
  margin: 0;
  font-size: 1.65rem !important;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sa? ?st: online */
.channel-card .online-users-badge,
.channel-card .online-count-badge.online-users-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  z-index: 2;
  height: 28px !important;
  min-height: 28px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
}

/* Sol alt: a??klama */
.channel-card-desc {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 42%;
  z-index: 2;
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

/* Sa? alt: g?r?n?rl?k */
.channel-view-access {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: auto;
  max-width: 48%;
  z-index: 2;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: right;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.channel-view-access.is-restricted {
  color: #ffb4b4;
}
.channel-card:not([style*="background-image"]) .channel-view-access.is-restricted {
  color: #c62828;
}
.channel-card:not([style*="background-image"]) .channel-view-access.is-open {
  color: #2e7d32;
}

/* Kanal kart? online ? ortak siyah/neon kurallar .online-count-badge'te */
.online-users-badge .online-icon {
  display: none !important;
}

.channel-card[style*="background-image"] .channel-card-name,
.channel-card[style*="background-image"] .channel-card-desc,
.channel-card[style*="background-image"] .channel-view-access {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6);
}

/* Y?kleme durumu */
.channel-list-page .container.main-content > p {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/*
  Desktop kanal listesi ? YouTube thumbnail grid
  K?K NEDEN (?nceki fix yetmedi):
  1) SW CSS'i cache-first tutuyordu (ayn? ?v= ile eski kurallar kal?yordu)
  2) Sadece kolon say?s? vard?; kartlarda aspect-ratio yoktu ? i?erik
     kart? dikey ?erit gibi uzat?yordu
  3) <a.channel-card> + flex parent zinciri i?in height/aspect kilidi ?art
*/
html.channel-list-page body.channel-list-page .container.main-content.channel-list-page,
body.channel-list-page .container.main-content.channel-list-page,
.container.main-content.channel-list-page {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}

.channel-list,
body.channel-list-page .channel-list,
.container.channel-list-page .channel-list,
.main-content.channel-list-page .channel-list,
html.channel-list-page .channel-list {
  display: grid !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
  align-content: start !important;
}

html.channel-list-page body.channel-list-page .container.main-content.channel-list-page,
body.channel-list-page .container.main-content.channel-list-page,
.container.main-content.channel-list-page {
  min-height: 0 !important;
}

@media (min-width: 768px) {
  .channel-list,
  body.channel-list-page .channel-list,
  .container.channel-list-page .channel-list,
  .main-content.channel-list-page .channel-list,
  html.channel-list-page .channel-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 24px !important;
    align-content: start !important;
  }

  /* YouTube kart?: sabit 16:9; k??e yerle?imi */
  body.channel-list-page .channel-card,
  .channel-list .channel-card,
  a.channel-card {
    display: block !important;
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: inherit !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  body.channel-list-page .channel-card[style*="background-image"],
  .channel-list .channel-card[style*="background-image"],
  a.channel-card[style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  body.channel-list-page .channel-card .channel-card-name,
  .channel-list .channel-card .channel-card-name {
    font-size: 1.5rem !important;
    top: 12px !important;
    left: 14px !important;
    right: 52px !important;
  }

  body.channel-list-page .channel-card .channel-card-desc,
  .channel-list .channel-card .channel-card-desc {
    font-size: 0.85rem !important;
    left: 14px !important;
    bottom: 12px !important;
    right: 42% !important;
  }

  body.channel-list-page .channel-card .channel-view-access,
  .channel-list .channel-card .channel-view-access {
    font-size: 0.7rem !important;
    right: 12px !important;
    bottom: 12px !important;
    max-width: 46% !important;
  }

  body.channel-list-page .channel-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--shadow-lg) !important;
  }
}

@media (min-width: 1024px) {
  .channel-list,
  body.channel-list-page .channel-list,
  .container.channel-list-page .channel-list,
  .main-content.channel-list-page .channel-list,
  html.channel-list-page .channel-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .channel-list,
  body.channel-list-page .channel-list,
  .container.channel-list-page .channel-list,
  .main-content.channel-list-page .channel-list,
  html.channel-list-page .channel-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Mobil kanal listesi ? mevcut dikey kart hali korunur (aspect kilidi YOK) */
@media (max-width: 767px) {
  .channel-list,
  body.channel-list-page .channel-list,
  .container.channel-list-page .channel-list,
  .main-content.channel-list-page .channel-list,
  html.channel-list-page .channel-list {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px !important;
    padding-bottom: 24px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.channel-list-page .channel-card,
  .channel-list .channel-card,
  a.channel-card {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 150px;
  }

  .channel-header h3 {
    font-size: 1.05rem !important;
  }
}

/* ??????????????????????????????????????????????????????????
   4. KANAL SAYFASI ? GENEL YAPI
   ?????????????????????????????????????????????????????????? */

/* Web g?r?n?m? ana row */
.yt-main-row {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  height: calc(100vh - var(--header-h));
  overflow: hidden;
  box-sizing: border-box;
}

/* Sol kolon: video + kontroller + kuyruk */
.yt-video-col {
  flex: 5 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}

/* Sa? kolon: sohbet */
.yt-chat-col {
  flex: 4 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ??????????????????????????????????????????????????????????
   5. YOUTUBE PLAYER
   ?????????????????????????????????????????????????????????? */
.v2-player-wrap,
#timarhane-player-container {
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #000;
}

/* Progress bar */
#web-neon-progress-container,
#mobile-neon-progress-container {
  height: 4px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin: 0;
}
#web-neon-progress-fill,
#mobile-neon-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  border-radius: 2px;
  transition: width 0.8s linear;
  width: 0%;
}

/* Canl? yay?n badge */
.live-badge {
  background: #e74c3c !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 3px 7px !important;
  border-radius: 3px !important;
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* ??????????????????????????????????????????????????????????
   6. WEB KONTROL BUTONLARI
   ?????????????????????????????????????????????????????????? */
.web-all-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.web-all-controls button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}
.web-all-controls button:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}
.web-all-controls button:active {
  transform: translateY(0);
}
.web-all-controls button.live-active {
  background: #fef2f2;
  border-color: #e74c3c;
  color: #e74c3c;
}
.web-all-controls button.muted {
  background: #fff8e1;
  border-color: var(--warning);
  color: #856404;
}
/* Skip butonu ?ne ??kar */
.web-all-controls .web-skip-btn,
.web-all-controls #universalSkipBtn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  border-color: transparent;
}
.web-all-controls .web-skip-btn:hover,
.web-all-controls #universalSkipBtn:hover {
  background: linear-gradient(135deg, var(--primary-dark), #6a4190);
  color: #fff;
  border-color: transparent;
}
/* Ses seviyesi g?stergesi */
.web-all-controls .volume-display {
  background: var(--bg-lighter);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 48px;
  text-align: center;
}

/* Web: kontroller üst header'da (oyuncu altı gizli) */
.web-view .yt-video-col .web-all-controls {
  display: none !important;
}

.web-header-controls-mount {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
@media (min-width: 768px) {
  .channel-header-bar .web-header-controls-mount {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 52%;
    margin: 0 4px 0 6px;
  }
}
.web-header-controls-mount::-webkit-scrollbar {
  display: none;
}
.web-header-controls-rail {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}

/* Mobil sohbet — sağ dikey kontrol şeridi */
.mobile-view .chat-main-stack,
.mobile-chat-container .chat-main-stack,
#mobile-chat-container .chat-main-stack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  display: flex;
  height: auto !important;
  overflow: hidden;
}
.mobile-view .chat-main-stack .chat-messages,
.mobile-chat-container .chat-main-stack .chat-messages,
#mobile-chat-container .chat-main-stack .chat-messages {
  flex: 1;
  min-width: 0;
  padding-right: 40px;
  box-sizing: border-box;
}
.chat-action-rail {
  position: absolute;
  right: 3px;
  top: 4px;
  /* Sabit composer (56px + safe area) altına binmesin */
  bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  width: 34px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 0;
  z-index: 8 !important;
  pointer-events: none;
  padding-bottom: 0;
  box-sizing: border-box;
  height: auto !important;
}
.chat-action-rail-top,
.chat-action-rail-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 100%;
}
.chat-action-rail-spacer {
  flex: 1 1 auto;
  min-height: 8px;
  width: 100%;
  pointer-events: none;
}
.chat-action-rail .overlay-btn,
.chat-action-rail .volume-btn,
.chat-action-rail .volume-level-display {
  pointer-events: auto;
}

/* Ortak yuvarlak kontrol butonları (mobil şerit + web header) — WhatsApp yeşili + beyaz outline */
.chat-action-rail .overlay-btn,
.web-header-controls-rail .overlay-btn,
.chat-action-rail .volume-btn,
.web-header-controls-rail .volume-btn,
.chat-action-rail .volume-level-display,
.web-header-controls-rail .volume-level-display {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: var(--wa-fabric, #075e54) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.92) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 9px !important;
  font-weight: 700;
  line-height: 1;
  transition: background var(--ease), transform var(--ease), border-color var(--ease);
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-action-rail .overlay-btn svg,
.web-header-controls-rail .overlay-btn svg,
.chat-action-rail .volume-btn svg,
.web-header-controls-rail .volume-btn svg {
  width: 16px !important;
  height: 16px !important;
}
.chat-action-rail .overlay-btn svg path,
.web-header-controls-rail .overlay-btn svg path,
.chat-action-rail .volume-btn svg path,
.web-header-controls-rail .volume-btn svg path,
.chat-action-rail .overlay-btn svg line,
.web-header-controls-rail .overlay-btn svg line,
.chat-action-rail .overlay-btn svg circle,
.web-header-controls-rail .overlay-btn svg circle {
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Yıldız — açık mavi */
.chat-action-rail .toggle-btn svg path,
.web-header-controls-rail .toggle-btn svg path {
  fill: #7dd3fc !important;
  stroke: #7dd3fc !important;
}
/* Skip — kırmızı ikon, yeşil zemin */
.chat-action-rail .universal-skip-btn svg path,
.web-header-controls-rail .universal-skip-btn svg path,
#mobile-chat-container #mobileSkipBtn svg path {
  fill: #ef4444 !important;
  stroke: none !important;
}
.chat-action-rail .volume-btn.muted,
.web-header-controls-rail .volume-btn.muted {
  border-color: #fbbf24 !important;
}
.chat-action-rail .youtube-live-btn.is-refreshing,
.web-header-controls-rail .youtube-live-btn.is-refreshing {
  animation: youtube-live-refresh 0.7s ease-in-out infinite;
  border-color: #ff0033 !important;
  background: #c4302b !important;
}
@keyframes youtube-live-refresh {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 51, 0.55);
  }
  50% {
    transform: scale(1.12);
    box-shadow: 0 0 0 8px rgba(255, 0, 51, 0);
  }
}
/* Canlı yayındayken (başlangıç animasyonu bittikten sonra) ikonun beyaz hatları neon kırmızı yanıp söner */
.chat-action-rail .youtube-live-btn svg path,
.web-header-controls-rail .youtube-live-btn svg path {
  fill: none !important;
  stroke: #fff;
  stroke-width: 1.75 !important;
}
.chat-action-rail .youtube-live-btn.is-live:not(.is-refreshing) svg path,
.web-header-controls-rail .youtube-live-btn.is-live:not(.is-refreshing) svg path {
  animation: youtube-live-neon-stroke 1.15s ease-in-out infinite;
}
@keyframes youtube-live-neon-stroke {
  0%,
  100% {
    stroke: #ffffff;
    filter: drop-shadow(0 0 0 transparent);
  }
  50% {
    stroke: #ff0033;
    filter: drop-shadow(0 0 3px #ff0033) drop-shadow(0 0 7px #ff1a4d);
  }
}
.chat-action-rail .overlay-btn:hover,
.web-header-controls-rail .overlay-btn:hover,
.chat-action-rail .volume-btn:hover,
.web-header-controls-rail .volume-btn:hover {
  background: #0a6e63 !important;
  transform: scale(1.05);
}
.chat-action-rail .universal-skip-btn,
.chat-action-rail .toggle-btn,
.web-header-controls-rail .universal-skip-btn,
#mobile-chat-container #mobileSkipBtn,
.web-header-controls-rail #universalSkipBtn {
  background: var(--wa-fabric, #075e54) !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  z-index: 8 !important;
  position: relative !important;
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}
.web-header-controls-rail #universalSkipBtn .skip-text {
  display: none !important;
}
.mobile-view .chat-main-stack .message-time,
.mobile-view .chat-main-stack .msg-time,
.mobile-chat-container .chat-main-stack .message-time,
.mobile-chat-container .chat-main-stack .msg-time {
  margin-right: 0 !important;
}

@media (max-width: 767px) {
  .web-header-controls-mount {
    display: none !important;
  }

  /* Composer sabit; şerit onun ÜSTÜNDE bitsin, gönderin üzerine binmesin */
  #mobile-chat-container .chat-main-stack {
    height: auto !important;
    overflow: hidden !important;
  }
  #mobile-chat-container .chat-action-rail {
    top: 4px !important;
    right: 3px !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    height: auto !important;
    z-index: 8 !important;
  }
  #mobile-chat-container .chat-input,
  .mobile-view .chat-input,
  .mobile-chat-container .chat-input {
    z-index: 60 !important;
  }
  #mobile-chat-container #sendButton {
    position: relative;
    z-index: 61 !important;
  }
}

/* ??????????????????????????????????????????????????????????
   7. KUYRUK L?STES? (WEB)
   ?????????????????????????????????????????????????????????? */
.web-request-queue-container {
  flex-shrink: 0;
}
.web-request-queue-container .request-queue-container {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.web-request-queue-container .request-queue-list {
  max-height: 220px;
  overflow-y: auto;
}
/* Kuyruk sat?r? */
.request-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--ease);
  font-size: 13px;
}
.request-queue-item:last-child {
  border-bottom: none;
}
.request-queue-item:hover {
  background: var(--primary-light);
}
.request-queue-item.is-playing {
  background: color-mix(in srgb, var(--primary-light) 70%, transparent);
}
.song-status-playing,
.request-item-status.song-status-playing {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #0a7a3e;
  text-transform: lowercase;
}
.request-number {
  flex-shrink: 0;
  width: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  text-align: center;
}
.request-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border-light);
}
.request-user {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.request-username {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.request-song {
  flex: 1;
  min-width: 0;
}
.request-song .song-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.request-song .song-duration {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
/* Bo? kuyruk */
.request-queue-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
}

/* ??????????????????????????????????????????????????????????
   8. SOHBET PANEL?
   ?????????????????????????????????????????????????????????? */
.chat-container {
  display: flex;
  flex-direction: column;
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

/* Mesajlar alan? */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 6px;
  background: var(--bg-white);
  min-height: 0;
}

/* Mesaj sat?r? ? v2-msg */
.chat-message.v2-msg {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background var(--ease);
}
.chat-message.v2-msg:hover {
  background: var(--bg-lighter);
}

/* Avatar */
.chat-message.v2-msg .message-avatar {
  float: none !important;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 1px;
}
.chat-message.v2-msg .message-avatar img {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border-light);
  display: block;
}

/* Onaylı hesap rozeti — admin paneliyle aynı görünüm (chat sayfasında admin.css yok) */
.chat-message.v2-msg .message-avatar.verified-avatar-wrap {
  position: relative;
  overflow: visible !important;
}
.chat-message.v2-msg .verified-account-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  font-size: 7px;
  line-height: 11px;
  text-align: center;
  font-weight: 700;
  border: 1px solid #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* Mesaj i?eri?i */
.chat-message.v2-msg .message-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  line-height: 1.4;
}
.chat-message.v2-msg .msg-user,
.chat-message.v2-msg .username-clickable {
  font-weight: 700;
  font-size: 0.82rem;
  /* Uyeler: tam siyah */
  color: #000 !important;
  text-shadow: none;
  cursor: pointer;
  margin-right: 5px;
}
.chat-message.v2-msg .msg-user:hover,
.chat-message.v2-msg .username-clickable:hover {
  color: #000 !important;
  text-decoration: underline;
}
.chat-message.v2-msg .role-emoji-inline {
  margin-left: 2px;
  font-weight: 400;
  text-shadow: none;
  font-size: 0.9em;
  font-family: "Noto Sans Bamum", "Segoe UI Historic", "Segoe UI Symbol", system-ui, sans-serif;
}
.chat-message.v2-msg.is-guest .role-emoji-inline,
.chat-message.v2-msg[data-provider='guest'] .role-emoji-inline,
.chat-message.v2-msg[data-role='guest'] .role-emoji-inline {
  font-weight: 700;
  font-size: 1em;
  opacity: 0.9;
}
/* Misafir ? uyelerden biraz daha acik gri-siyah */
.chat-message.v2-msg.is-guest .msg-user,
.chat-message.v2-msg.is-guest .username-clickable,
.chat-message.v2-msg[data-provider='guest'] .msg-user,
.chat-message.v2-msg[data-provider='guest'] .username-clickable,
.chat-message.v2-msg[data-role='guest'] .msg-user,
.chat-message.v2-msg[data-role='guest'] .username-clickable {
  color: #6e6e6e !important;
  opacity: 1;
  font-weight: 500;
  text-shadow: none;
}
.chat-message.v2-msg.is-guest .msg-user:hover,
.chat-message.v2-msg.is-guest .username-clickable:hover,
.chat-message.v2-msg[data-provider='guest'] .msg-user:hover,
.chat-message.v2-msg[data-provider='guest'] .username-clickable:hover,
.chat-message.v2-msg[data-role='guest'] .msg-user:hover,
.chat-message.v2-msg[data-role='guest'] .username-clickable:hover {
  color: #5a5a5a !important;
}
.chat-message.v2-msg.is-guest .message-text {
  opacity: 0.72;
}
.chat-message.v2-msg.is-yt-bot .msg-user.is-yt-bot-nick {
  cursor: default;
  text-decoration: none !important;
  font-weight: 400;
  color: inherit !important;
  margin-right: 6px;
}
.chat-message.v2-msg.is-yt-bot .yt-bot-play {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  line-height: 0;
}
.chat-message.v2-msg.is-yt-bot .yt-bot-play svg {
  width: 100%;
  height: 100%;
  display: block;
}

.user-avatar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-avatar-wrap .avatar,
.user-avatar-wrap .profile-avatar {
  display: block;
}
.user-role-emoji {
  position: absolute;
  right: -4px;
  bottom: -4px;
  font-size: 11px;
  line-height: 1;
  background: rgba(20, 24, 28, 0.85);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
  font-family: "Noto Sans Bamum", "Segoe UI Historic", "Segoe UI Symbol", system-ui, sans-serif;
}
.profile-avatar-wrap .user-role-emoji {
  width: 22px;
  height: 22px;
  font-size: 14px;
  right: -2px;
  bottom: -2px;
}
.channel-header-bar .user-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chat-message.v2-msg .message-text {
  font-size: 0.88rem;
  color: var(--text-main);
  word-break: break-word;
}
.chat-message.v2-msg .message-text-mentionable {
  cursor: pointer;
}
a.chat-autolink {
  color: #5B9FFF;
  text-decoration: underline;
  word-break: break-all;
  cursor: pointer;
}
a.chat-autolink:hover {
  color: #64B5F6;
}
.pinned-message-text a.chat-autolink {
  color: #5B9FFF;
  text-decoration: underline;
  font-weight: 600;
}
.dm-bubble a.chat-autolink {
  color: #5B9FFF;
  text-decoration: underline;
  font-weight: 600;
  word-break: break-all;
}
/* Mention: yaln?zca etiketlenmi? kullan?c?da sar? arka plan */
.chat-message.v2-msg.is-mentioned-for-me {
  background: #fff8c6 !important;
  border-color: rgba(234, 179, 8, 0.35);
}
.chat-message.v2-msg.is-mentioned-for-me:hover {
  background: #fff3a0 !important;
}
.chat-message.v2-msg .msg-time,
.chat-message.v2-msg .message-time {
  font-size: 0.68rem;
  color: var(--text-light);
  margin-left: 6px;
  white-space: nowrap;
}

/* Sistem mesaj? ? sol hizal? (normal mesaj ritmi), g?rsel ayr?m korunur */
.chat-system-line {
  text-align: left;
  color: var(--text-light);
  font-size: 0.78rem;
  font-style: italic;
  padding: 5px 8px;
  margin: 2px 0;
  background: var(--bg-lighter);
  border-radius: 6px;
  overflow: hidden;
  max-height: 6rem;
  transform: translateY(0);
  transition: opacity 0.38s ease, max-height 0.38s ease, margin 0.38s ease,
    padding 0.38s ease, transform 0.38s ease;
}
.chat-system-line.is-ephemeral {
  max-height: 4rem;
}
.chat-system-line.is-fading {
  opacity: 0;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Sabit (pinned) mesaj */
.pinned-message-container {
  margin: 6px 8px;
  border-radius: 10px;
  border-left: 4px solid #ffd700 !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%) !important;
  color: #fff !important;
  font-size: 13px;
  box-shadow: var(--shadow-sm);
}

/* Sohbet input alan? ? teal fabric (matches header) */
.chat-input {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-top: 1px solid var(--wa-teal-deep);
  background: var(--wa-fabric);
  flex-shrink: 0;
}

/* Composer action buttons: emoji / GIF / send ? shared chat + DM */
:root {
  --composer-btn: 39px;
  --composer-btn-gap: 4px;
  --composer-btn-icon: 21px;
  --composer-btn-bg: var(--wa-chip);
  --composer-btn-bg-hover: var(--wa-chip-hover);
  --composer-btn-fg: var(--wa-chip-fg);
}

/* Desktop/web: composer height (?25% from 96px; mobile overlay unchanged) */
@media (min-width: 768px) {
  .web-view .chat-input,
  .web-view #webChatInput {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 9px;
    gap: var(--composer-btn-gap, 4px);
    align-items: center;
  }
  .web-view .chat-input .input-wrapper,
  .web-view #webChatInput .input-wrapper {
    min-height: 54px;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  }
  .web-view .chat-input .input-wrapper:focus-within,
  .web-view #webChatInput .input-wrapper:focus-within {
    background: #ffffff !important;
    border-color: #c8c8c8 !important;
  }
  .web-view .chat-input input[type="text"],
  .web-view #webMessageInput {
    min-height: 54px;
    padding: 12px 24px 12px 12px !important;
    border-radius: 16px;
    background: transparent !important;
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
  }
  .web-view .chat-input input[type="text"]::placeholder,
  .web-view #webMessageInput::placeholder {
    color: var(--text-light) !important;
    opacity: 1 !important;
  }
  /* Compact composer actions ? same size for emoji / GIF / send */
  .web-view .chat-input button:not(.chat-attach-item):not(.voice-rec-btn),
  .web-view #webChatInput button:not(.chat-attach-item):not(.voice-rec-btn),
  .web-view .chat-input [id$="EmojiButton"],
  .web-view .chat-input [id$="GifButton"],
  .web-view .chat-input [id$="SendButton"],
  .web-view #dmEmojiButton,
  .web-view #dmGifButton,
  .web-view #dmSendButton {
    width: var(--composer-btn, 39px);
    height: var(--composer-btn, 39px);
    min-width: var(--composer-btn, 39px);
    min-height: var(--composer-btn, 39px);
    font-size: var(--composer-btn-icon, 21px);
    padding: 0;
  }
  .web-view .chat-input button svg,
  .web-view #webChatInput button svg,
  .web-view #sendButton svg,
  .web-view #webSendButton svg,
  .web-view #dmSendButton svg,
  .web-view #emojiButton svg,
  .web-view #gifButton svg,
  .web-view #webEmojiButton svg,
  .web-view #webGifButton svg,
  .web-view #dmEmojiButton svg,
  .web-view #dmGifButton svg {
    width: var(--composer-btn-icon, 21px);
    height: var(--composer-btn-icon, 21px);
  }
  /* Channel split DM + home drawer on desktop: match chat composer height */
  .web-view .dm-panel .chat-input.dm-compose,
  .dm-panel.dm-drawer .chat-input.dm-compose {
    height: 72px;
    min-height: 72px;
    max-height: 72px;
    padding: 9px;
    gap: var(--composer-btn-gap, 4px);
    align-items: center;
  }
  .web-view .dm-panel .chat-input.dm-compose .input-wrapper,
  .dm-panel.dm-drawer .chat-input.dm-compose .input-wrapper {
    min-height: 54px;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  }
  .web-view .dm-panel .chat-input.dm-compose .input-wrapper:focus-within,
  .dm-panel.dm-drawer .chat-input.dm-compose .input-wrapper:focus-within {
    background: #ffffff !important;
    border-color: #c8c8c8 !important;
  }
  .web-view .dm-panel #dmMessageInput,
  .dm-panel.dm-drawer #dmMessageInput {
    min-height: 54px;
    background: transparent !important;
    color: var(--text-main) !important;
    -webkit-text-fill-color: var(--text-main) !important;
  }
  .web-view .dm-panel #dmMessageInput::placeholder,
  .dm-panel.dm-drawer #dmMessageInput::placeholder {
    color: var(--text-light) !important;
    opacity: 1 !important;
  }
}

/* Chat input'taki input-wrapper ? white pill on teal fabric */
.chat-input .input-wrapper {
  background: var(--wa-chip) !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0 12px !important;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 36px;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.chat-input .input-wrapper:focus-within {
  border-color: transparent !important;
  background: var(--wa-chip) !important;
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.35) !important;
}
.chat-input .input-wrapper input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 13px;
  color: var(--text-main);
  outline: none;
  flex: 1;
  min-width: 0;
}
.chat-input .input-wrapper input::placeholder {
  color: var(--text-light);
  font-size: 13px;
}

/* Sohbet butonlar? (emoji, gif, g?nder) ? chat + DM ayn? boyut / siyah + beyaz outline */
.chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger),
.chat-input [id$="EmojiButton"],
.chat-input [id$="GifButton"],
.chat-input [id$="SendButton"],
#emojiButton, #gifButton, #sendButton,
#webEmojiButton, #webGifButton, #webSendButton,
#dmEmojiButton, #dmGifButton, #dmSendButton {
  width: var(--composer-btn);
  height: var(--composer-btn);
  min-width: var(--composer-btn);
  min-height: var(--composer-btn);
  max-width: var(--composer-btn);
  max-height: var(--composer-btn);
  border: none;
  border-radius: 50%;
  background: var(--composer-btn-bg, #1a1a1a) !important;
  color: var(--composer-btn-fg, #fff) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--composer-btn-icon);
  line-height: 1;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  transition: background var(--ease), transform var(--ease);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: none !important;
}
.chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger):hover,
#emojiButton:hover, #gifButton:hover, #sendButton:hover,
#webEmojiButton:hover, #webGifButton:hover, #webSendButton:hover,
#dmEmojiButton:hover, #dmGifButton:hover, #dmSendButton:hover {
  background: var(--composer-btn-bg-hover, #2e2e2e) !important;
  color: var(--composer-btn-fg, #fff) !important;
  transform: scale(1.08);
  box-shadow: none !important;
}
.chat-input button svg,
#emojiButton svg, #gifButton svg, #sendButton svg,
#webEmojiButton svg, #webGifButton svg, #webSendButton svg,
#dmEmojiButton svg, #dmGifButton svg, #dmSendButton svg {
  width: var(--composer-btn-icon) !important;
  height: var(--composer-btn-icon) !important;
  display: block;
  flex-shrink: 0;
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  stroke: currentColor;
  fill: none;
}
#emojiButton svg text,
#gifButton svg text,
#webEmojiButton svg text,
#webGifButton svg text,
#dmEmojiButton svg text,
#dmGifButton svg text {
  fill: currentColor;
  stroke: none;
}
#dmSendButton:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Karakter sayac? ? readable on teal composer */
#characterCount, #webCharacterCount {
  font-size: 11px;
  color: var(--wa-muted);
  pointer-events: none;
  flex-shrink: 0;
  padding-right: 2px;
}

/* Emoji/GIF picker */
.v2-emoji-picker,
.v2-gif-picker {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 12000;
}

/* ??????????????????????????????????????????????????????????
   9. MOB?L G?R?N?M
   ?????????????????????????????????????????????????????????? */
@media (max-width: 767px) {
  /* Mobil player container */
  #mobile-player-slot {
    width: 100%;
    position: relative;
  }
  #timarhane-player-container {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Mobil progress bar */
  #mobile-neon-progress-container {
    height: 3px;
    margin: 0;
    border-radius: 0;
  }

  /* Mobil overlay kontroller */
  .overlay-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .overlay-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--ease), transform var(--ease);
    flex-shrink: 0;
  }
  .overlay-btn:hover,
  .overlay-btn:active {
    background: rgba(102,126,234,0.8) !important;
    transform: scale(1.05);
  }
  /* Skip = A grubu ile ayn?; mavi ?zel stil yok */
  .universal-skip-btn {
    background: rgba(0,0,0,0.55) !important;
    border-color: rgba(255,255,255,0.3) !important;
  }

  /* Sa? ?st k??e: y?ld?z + skip */
  .overlay-corner-stack {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100010;
    pointer-events: auto;
  }
  .overlay-corner-stack .overlay-btn {
    margin: 0 !important;
  }

  /* Ses kontrolleri ? sa? alt yatay: ? % + mute (skip ?stte kal?r) */
  .overlay-volume-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    max-width: calc(100% - 20px);
  }
  .volume-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.55) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    color: #fff !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background var(--ease);
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
  }
  .volume-btn:hover {
    background: rgba(102,126,234,0.8) !important;
  }
  .volume-level-display {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 10px !important;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.55) !important;
    border: 1.5px solid rgba(255,255,255,0.3) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  }

  /* Mobil overlay ?ark? bilgisi */
  .overlay-song-info {
    padding: 4px 8px;
    background: rgba(0,0,0,0.5);
  }
  .song-main-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .song-main-line .song-title {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .song-main-line .requester-avatar {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .song-main-line .requester-name {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .song-main-line .separator {
    color: rgba(255,255,255,0.5);
    margin: 0 2px;
  }
  .song-times {
    display: flex;
    gap: 2px;
    align-items: center;
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .time-separator {
    opacity: 0.6;
    margin: 0 1px;
  }

  /* Mobil overlay kuyruk */
  .overlay-request-queue {
    max-height: 120px;
    overflow-y: auto;
    background: rgba(0,0,0,0.3);
  }
  .request-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    transition: background var(--ease);
  }
  .request-item:hover {
    background: rgba(255,255,255,0.08);
  }
  .request-item-order {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
  }
  .request-item .requester-avatar {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .request-item-info {
    flex: 1;
    min-width: 0;
  }
  .request-item-title {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .request-item-details {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    display: flex;
    gap: 4px;
  }

  /* Mobil sohbet alan? */
  .mobile-view .chat-container {
    flex: 1;
    min-height: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: none;
  }

  /* Mobil chat input */
  .mobile-view .chat-input {
    padding: 5px 6px;
    gap: 4px;
  }
  .mobile-view .chat-input .input-wrapper {
    min-height: 34px;
    border-radius: 18px !important;
  }
  .mobile-view #messageInput {
    font-size: 14px !important;
  }
  .mobile-view .chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger),
  .mobile-view .chat-input [id$="EmojiButton"],
  .mobile-view .chat-input [id$="GifButton"],
  .mobile-view .chat-input [id$="SendButton"],
  .mobile-view #emojiButton,
  .mobile-view #gifButton,
  .mobile-view #sendButton {
    width: var(--composer-btn, 36px);
    height: var(--composer-btn, 36px);
    min-width: var(--composer-btn, 36px);
    min-height: var(--composer-btn, 36px);
    max-width: var(--composer-btn, 36px);
    max-height: var(--composer-btn, 36px);
    font-size: var(--composer-btn-icon, 20px);
    background: var(--composer-btn-bg, #1a1a1a) !important;
    color: var(--composer-btn-fg, #fff) !important;
  }
  .mobile-view .chat-input button svg,
  .mobile-view #emojiButton svg,
  .mobile-view #gifButton svg,
  .mobile-view #sendButton svg {
    width: var(--composer-btn-icon, 20px) !important;
    height: var(--composer-btn-icon, 20px) !important;
  }
}

/* ??????????????????????????????????????????????????????????
   10. OTOMAT?K ?ALMA L?STES?
   ?????????????????????????????????????????????????????????? */
.v2-auto-playlist-list {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--bg-light);
  overflow: hidden;
}
.v2-playlist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-white);
  transition: background var(--ease);
}
.v2-playlist-item:last-child {
  border-bottom: none;
}
.v2-playlist-item:hover {
  background: var(--primary-light);
}
.v2-playlist-pos {
  width: 26px;
  height: 22px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-playlist-thumb {
  width: 52px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #eee;
  cursor: pointer;
  transition: opacity var(--ease);
}
.v2-playlist-thumb:hover {
  opacity: 0.85;
}
.v2-playlist-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.v2-playlist-details {
  flex: 1;
  min-width: 0;
}
.v2-playlist-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-playlist-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  gap: 5px;
}
.v2-playlist-del {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: #fde8e8;
  color: #c0392b;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--ease);
}
.v2-playlist-del:hover {
  background: #f5c6c6;
}

/* ?ark? iste ? arama sonu? sat?r? aksiyonlar? */
.v2-playlist-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.v2-playlist-act {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  transition: background var(--ease), opacity var(--ease);
}
.v2-playlist-act:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.v2-playlist-act--add {
  background: #e6f7ed;
  color: #1e7e34;
}
.v2-playlist-act--add:hover:not(:disabled) {
  background: #c8edd6;
}
.v2-playlist-act--auto {
  background: var(--primary-light);
  color: var(--primary);
}
.v2-playlist-act--auto:hover:not(:disabled) {
  background: #d6e8ff;
}
.v2-playlist-act--ban {
  background: #fde8e8;
  color: #c0392b;
}
.v2-playlist-act--ban:hover:not(:disabled) {
  background: #f5c6c6;
}
.v2-request-search-list {
  margin-top: 12px;
}

/* Liste panelleri (ge?mi? / oto / yasakl?) ? mobil + web */
.v2-list-panel-body {
  padding: 0 16px 20px;
}
.v2-list-stats {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.v2-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.v2-list-tool-btn {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-white);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.v2-list-tool-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.v2-list-tool-btn:hover:not(:disabled) {
  background: var(--primary-light);
}
.v2-list-tool-danger {
  background: #fde8e8;
  border-color: #f5c6c6;
  color: #c0392b;
}
.v2-list-tool-danger:hover:not(:disabled) {
  background: #f5c6c6;
}
.v2-list-scroll {
  max-height: min(48vh, 420px);
  overflow: auto;
  margin-top: 12px;
  -webkit-overflow-scrolling: touch;
}
.v2-playlist-item--clickable {
  cursor: pointer;
}
.v2-playlist-item--clickable:active {
  background: var(--primary-light);
}
.v2-playlist-pos--ban {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  font-size: 12px;
}
.v2-song-menu-title {
  margin: 0 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.v2-song-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-song-menu-actions .login-btn {
  min-height: 44px;
  width: 100%;
  touch-action: manipulation;
}
@media (max-width: 768px) {
  .v2-list-panel-body {
    padding: 0 12px 16px;
  }
  .v2-list-scroll {
    max-height: min(52vh, 380px);
  }
  .v2-playlist-item {
    padding: 10px 10px;
    gap: 8px;
  }
  .v2-playlist-del {
    width: 36px;
    height: 36px;
  }
  .v2-playlist-act {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }
  .v2-list-tool-btn {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
  }
}

/* Yasakl? liste kuyruk sat?r? */
.v2-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  border-radius: 0;
  transition: background var(--ease);
}
.v2-queue-item:hover {
  background: var(--bg-lighter);
}
.v2-queue-pos {
  width: 18px;
  font-size: 12px;
  color: var(--text-light);
  flex-shrink: 0;
  text-align: center;
}
.v2-queue-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-main);
}
.v2-queue-by {
  font-size: 11px;
  color: var(--text-muted);
}
.v2-queue-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--text-light);
  text-align: center;
}

/* ??????????????????????????????????????????????????????????
   11. GE?M?? ?ARKILAR
   ?????????????????????????????????????????????????????????? */
.song-history-list,
.history-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.history-item,
.song-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background var(--ease);
  font-size: 13px;
}
.history-item:hover,
.song-history-item:hover {
  background: var(--primary-light);
}
.history-item img,
.song-history-item img {
  width: 44px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: #eee;
}
.history-item-info,
.song-history-info {
  flex: 1;
  min-width: 0;
}
.history-item-title,
.song-history-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item-meta,
.song-history-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ??????????????????????????????????????????????????????????
   12. DM (?ZEL MESAJ) PANEL?
   ?????????????????????????????????????????????????????????? */
.dm-overlay {
  z-index: 200000 !important;
}
/* Desktop drawer: sa? kenar, header alt?ndan tam y?kseklik */
.dm-panel {
  border-radius: 0 !important;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.14) !important;
  border: none !important;
  border-left: 1px solid var(--border-light) !important;
  top: var(--header-h) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(400px, 100vw) !important;
  max-height: none !important;
  z-index: 200001 !important;
}
/* Channel split: reset fixed drawer chrome so DM shares main row ground */
.dm-panel.dm-embedded {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid var(--border-light) !important;
  z-index: 1 !important;
  animation: none !important;
}
/* Desktop: YouTube : Chat : DM = 4 : 3 : 2 of main content row; closed ? 5 : 4 */
@media (min-width: 769px) {
  .web-view .yt-main-row .yt-video-col {
    flex: 5 1 0% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .web-view .yt-main-row .yt-chat-col {
    flex: 4 1 0% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex-direction: column !important;
  }
  .web-view .yt-main-row.dm-split-open .yt-video-col {
    flex: 4 1 0% !important;
  }
  .web-view .yt-main-row.dm-split-open .yt-chat-col {
    flex: 3 1 0% !important;
  }
  .web-view .yt-main-row.dm-split-open .channel-dm-pane {
    flex: 2 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
  }
}
@media (max-width: 767px) {
  .dm-panel {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: none !important;
    box-shadow: none !important;
  }
  /* Mobile fullscreen DM: match mobile chat composer controls */
  .dm-panel .chat-input.dm-compose {
    padding: 5px 6px;
    gap: 4px;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .dm-panel .chat-input.dm-compose .input-wrapper {
    min-height: 34px;
    border-radius: 18px !important;
  }
  .dm-panel #dmMessageInput {
    min-height: 0;
    font-size: 14px !important;
  }
  .dm-panel #dmEmojiButton,
  .dm-panel #dmGifButton,
  .dm-panel #dmSendButton {
    width: var(--composer-btn, 36px) !important;
    height: var(--composer-btn, 36px) !important;
    min-width: var(--composer-btn, 36px) !important;
    min-height: var(--composer-btn, 36px) !important;
    max-width: var(--composer-btn, 36px) !important;
    max-height: var(--composer-btn, 36px) !important;
    font-size: var(--composer-btn-icon, 20px) !important;
    padding: 0 !important;
    background: var(--composer-btn-bg, #1a1a1a) !important;
    color: var(--composer-btn-fg, #fff) !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .dm-panel #dmEmojiButton svg,
  .dm-panel #dmGifButton svg,
  .dm-panel #dmSendButton svg {
    width: var(--composer-btn-icon, 20px) !important;
    height: var(--composer-btn-icon, 20px) !important;
  }
}
.dm-panel-header {
  background: var(--wa-fabric, #075e54) !important;
  color: #fff !important;
  padding: 10px 12px !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.dm-panel-header * {
  color: #fff !important;
}
/* Chip icons: dark teal on white (beat * { color:#fff } on fa-gear) */
.dm-panel-header .modern-close-btn,
.dm-panel-header .modern-close-btn *,
.dm-panel-header .dm-header-icon-btn,
.dm-panel-header .dm-header-icon-btn *,
.dm-panel-header .dm-header-back,
.dm-panel-header .dm-header-back * {
  color: var(--wa-chip-fg, #075e54) !important;
}
.dm-panel-header .modern-close-btn,
.dm-panel-header .dm-header-icon-btn,
.dm-panel-header .dm-header-back {
  background: var(--wa-chip) !important;
  border: 2px solid rgba(7, 94, 84, 0.42) !important;
  color: var(--wa-chip-fg) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18) !important;
  transition: background var(--ease), transform var(--ease) !important;
}
.dm-panel-header .modern-close-btn i,
.dm-panel-header .dm-header-back i {
  font-size: 20px !important;
  font-weight: 900 !important;
}
.dm-panel-header .modern-close-btn:hover,
.dm-panel-header .dm-header-icon-btn:hover,
.dm-panel-header .dm-header-back:hover {
  background: var(--wa-chip-hover) !important;
  color: var(--wa-chip-fg) !important;
}
.dm-panel-header-left,
.dm-panel-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.dm-panel-header-actions {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.dm-panel-header-left {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
/* Mobile after base header rules so 44px / thread chrome win */
@media (max-width: 767px) {
  .dm-panel-header {
    min-height: 56px !important;
    padding: 6px 10px !important;
    gap: 12px !important;
  }
  .dm-panel-header-actions {
    gap: 10px !important;
  }
  .dm-panel-header .dm-panel-title {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .dm-panel-header .modern-close-btn,
  .dm-panel-header .dm-header-icon-btn,
  .dm-panel-header .dm-header-back {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
  }
  .dm-panel.dm-mobile-thread .dm-peer {
    background: var(--wa-fabric, #075e54) !important;
    border-bottom: none !important;
    min-height: 56px !important;
    color: #fff !important;
  }
  .dm-panel.dm-mobile-thread .dm-peer-name,
  .dm-panel.dm-mobile-thread .dm-back,
  .dm-panel.dm-mobile-thread .dm-peer-menu-btn,
  .dm-panel.dm-mobile-thread .dm-peer-action-btn {
    color: #fff !important;
  }
  .dm-panel.dm-mobile-thread .dm-back,
  .dm-panel.dm-mobile-thread .dm-peer-menu-btn,
  .dm-panel.dm-mobile-thread .dm-peer-action-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  .dm-panel.dm-mobile-thread .dm-back {
    background: #fff !important;
    color: #075e54 !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22) !important;
  }
  .dm-panel.dm-mobile-thread .dm-back i {
    color: #075e54 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
  }
  .dm-panel.dm-mobile-thread .dm-peer-menu-btn {
    background: #25d366 !important;
    color: #fff !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28) !important;
  }
}
.dm-search {
  border-radius: 20px !important;
  border: none !important;
  padding: 10px 14px !important;
  font-size: 13px;
  background: #f0f2f5 !important;
  transition: box-shadow var(--ease);
}
.dm-search:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(18, 140, 126, 0.25);
  border-color: transparent !important;
}
.dm-row {
  border-radius: 0;
  padding: 10px 14px !important;
  transition: background var(--ease);
}
.dm-row:hover {
  background: #f5f6f6 !important;
}
.dm-row-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}
.dm-row-preview {
  font-size: 13px;
  color: #667781;
}
.dm-peer {
  background: #f0f2f5 !important;
  border-bottom: 1px solid #e9edef !important;
}
.dm-bubble.own {
  background: #dcf8c6 !important;
  color: #111 !important;
  border-radius: 8px 2px 8px 8px !important;
}
.dm-bubble.other {
  background: #fff !important;
  border-radius: 2px 8px 8px 8px !important;
  color: var(--text-main) !important;
}
.dm-ticks--sent,
.dm-ticks--delivered {
  color: #8696a0 !important;
}
.dm-ticks--read {
  color: #53bdeb !important;
}
.dm-panel .chat-input.dm-compose {
  border-top: 1px solid var(--wa-teal-deep);
  background: var(--wa-fabric);
}
.dm-panel .chat-input.dm-compose .input-wrapper input,
.dm-panel #dmMessageInput {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--text-main) !important;
  -webkit-text-fill-color: var(--text-main) !important;
  -webkit-user-modify: read-write !important;
  user-modify: read-write !important;
}
.dm-panel #dmMessageInput::placeholder {
  color: var(--text-light) !important;
  font-style: normal !important;
  opacity: 1 !important;
}
.dm-bell-btn {
  color: var(--wa-chip-fg, #075e54);
  font-size: calc(var(--hdr-btn-size, 34px) - 6px);
  transition: color var(--ease), background var(--ease);
}
.dm-bell-btn:hover {
  color: var(--wa-teal-mid, #128c7e);
}
.dm-bell-btn .fa-whatsapp {
  line-height: 1;
  font-size: inherit;
}
.dm-badge {
  background: var(--danger) !important;
  font-size: 9px !important;
  min-width: 15px;
  height: 15px;
}
.dm-avatar-rail {
  display: none !important;
}
.dm-settings-toggle input[type='checkbox'] {
  accent-color: #25d366;
}

/* ??????????????????????????????????????????????????????????
   13. KANAL AYARLARI MODAL — WhatsApp
   ?????????????????????????????????????????????????????????? */
.channel-settings-overlay .channel-info-modal-panel,
.channel-settings-overlay .channel-settings-panel {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
  background: #ece5dd !important;
  max-width: 440px !important;
  width: min(96vw, 440px) !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.channel-settings-overlay .channel-settings-header {
  background: #075e54 !important;
  color: #fff !important;
  padding: 10px 12px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 48px !important;
  flex-shrink: 0 !important;
}
.channel-settings-overlay .channel-settings-heading {
  min-width: 0;
  flex: 1;
}
.channel-settings-overlay .channel-settings-kicker {
  display: block;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.2;
}
.channel-settings-overlay .channel-settings-header .modal-title {
  margin: 2px 0 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-settings-overlay .channel-settings-header .modern-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #075e54 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  border: none !important;
  flex-shrink: 0 !important;
  transform: none !important;
}
.channel-settings-overlay .channel-settings-header .modern-close-btn:hover {
  background: #e8f5e9 !important;
  transform: none !important;
}
.channel-settings-overlay .modal-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 8px 10px !important;
  background: #fff !important;
  border-bottom: 1px solid #d1d7db !important;
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0 !important;
}
.channel-settings-overlay .tab-btn {
  border: 1px solid #d1d7db !important;
  background: #fff !important;
  border-radius: 8px !important;
  padding: 7px 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #54656f !important;
  line-height: 1.2 !important;
  min-height: 32px !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-settings-overlay .tab-btn:hover {
  background: #f0f2f5 !important;
  border-color: #075e54 !important;
  color: #075e54 !important;
}
.channel-settings-overlay .tab-btn.active {
  background: #075e54 !important;
  border-color: #075e54 !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.channel-settings-overlay .channel-settings-body {
  padding: 10px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: #ece5dd !important;
}
.channel-settings-overlay .channel-settings-hint,
.channel-settings-overlay .auth-note.channel-settings-hint {
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  background: #fff !important;
  border-radius: 8px !important;
  color: #54656f !important;
}
.channel-settings-overlay .channel-info-section,
.channel-settings-overlay .list-container,
.channel-settings-overlay .channel-background,
.channel-settings-overlay .channel-settings,
.channel-settings-overlay .live-settings-section {
  background: #fff !important;
  border-radius: 10px !important;
  padding: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.channel-settings-overlay .info-group {
  margin-bottom: 10px !important;
}
.channel-settings-overlay .info-group:last-child {
  margin-bottom: 0 !important;
}
.channel-settings-overlay .info-group label {
  font-size: 11px !important;
  color: #667781 !important;
  margin-bottom: 4px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}
.channel-settings-overlay .info-value {
  font-size: 14px !important;
  color: #111b21 !important;
  line-height: 1.35 !important;
  background: #f0f2f5 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}
.channel-settings-overlay .info-slug-row {
  display: flex !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.channel-settings-overlay .info-slug-prefix {
  padding: 8px 8px !important;
  font-size: 12px !important;
  color: #667781 !important;
  border-right: 1px solid #d1d7db !important;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.channel-settings-overlay .info-slug-row input {
  flex: 1 !important;
  border: none !important;
  background: transparent !important;
  color: #111b21 !important;
  padding: 8px 10px !important;
  min-width: 0 !important;
  font-size: 14px !important;
  outline: none !important;
}
.channel-settings-overlay .bg-preview-frame {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid #d1d7db !important;
  overflow: hidden !important;
  background: #f0f2f5 !important;
  box-sizing: border-box !important;
}
.channel-settings-overlay .bg-preview-media {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
.channel-settings-overlay .bg-preview-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #667781;
  font-size: 13px;
}
.channel-settings-overlay .bg-preview-actions,
.channel-settings-overlay .background-settings-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
.channel-settings-overlay .bg-action-meta {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #667781;
  text-align: center;
}
.channel-settings-overlay .bg-action-btn,
.channel-settings-overlay .background-action-btn,
.channel-settings-overlay .settings-save-btn,
.channel-settings-overlay .settings-default-btn,
.channel-settings-overlay .unban-btn,
.channel-settings-overlay .unkick-btn,
.channel-settings-overlay .role-btn {
  width: 100% !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}
.channel-settings-overlay .bg-action-primary,
.channel-settings-overlay .settings-save-btn,
.channel-settings-overlay .background-action-btn.active {
  background: #075e54 !important;
  color: #fff !important;
  border: 1px solid #075e54 !important;
}
.channel-settings-overlay .bg-action-danger {
  background: #fff !important;
  color: #dc2626 !important;
  border: 1px solid #f1a8a8 !important;
}
.channel-settings-overlay .background-action-btn,
.channel-settings-overlay .settings-default-btn {
  background: #fff !important;
  color: #075e54 !important;
  border: 1px solid #075e54 !important;
}
.channel-settings-overlay .channel-settings-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border-top: 1px solid #d1d7db;
  flex-shrink: 0;
}
.channel-settings-overlay .channel-settings-footer.is-single {
  grid-template-columns: 1fr;
}
.channel-settings-overlay .user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}
.channel-settings-overlay .user-item:last-child {
  border-bottom: none;
}
.channel-settings-overlay .user-actions {
  margin-left: auto;
  min-width: 88px;
}
.channel-settings-overlay .banned-list-note,
.channel-settings-overlay .empty-list-note,
.channel-settings-overlay .filter-description,
.channel-settings-overlay .manual-save-info {
  font-size: 12px !important;
  color: #667781 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  line-height: 1.4 !important;
}
.channel-settings-overlay .channel-settings h4,
.channel-settings-overlay .settings-group h4,
.channel-settings-overlay .settings-section h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #075e54 !important;
  margin: 0 0 8px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.channel-settings-overlay .settings-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0f2f5;
}
.channel-settings-overlay .duration-filter-card {
  background: #f0f2f5 !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
  border: none !important;
}
.channel-settings-overlay .upload-area {
  border: 1px dashed #075e54 !important;
  background: #e8f5e9 !important;
  border-radius: 8px !important;
}
.channel-settings-overlay .compact-permissions-table th,
.channel-settings-overlay .compact-permissions-table th.role-column {
  background: #075e54 !important;
}
.channel-settings-overlay .role-row--editable:hover td,
.channel-settings-overlay .role-row--editable:hover td.role-name-cell {
  background: #e8f5e9 !important;
}
.channel-settings-overlay .number-input-container input:focus {
  border-color: #075e54 !important;
}
.channel-settings-overlay button.perm-badge--toggle:focus-visible {
  outline-color: #075e54 !important;
}
.channel-settings-overlay .role-acc-req-chip {
  background: #e8f5e9 !important;
  color: #075e54 !important;
}
.channel-settings-overlay .role-acc-card.is-open .role-acc-header {
  background: #f0f2f5 !important;
}
.channel-settings-overlay .role-acc-switch input:checked + .role-acc-switch-ui {
  background: #25d366 !important;
}
.channel-settings-overlay .role-acc-perm-hint {
  color: #667781 !important;
}
.channel-settings-overlay .live-status-line {
  font-size: 14px;
  margin: 0 0 8px;
  color: #111b21;
}
.channel-settings-overlay .live-start-option {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e9edef;
}
.channel-settings-overlay .settings-btn-sm {
  width: auto !important;
  min-height: 30px !important;
  padding: 4px 24px !important;
  font-size: 12px !important;
}
.channel-settings-overlay .live-sync-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.channel-settings-overlay .live-sync-check {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: #111b21;
  cursor: pointer;
  user-select: none;
}
.channel-settings-overlay .live-sync-check input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #075e54;
  cursor: pointer;
  margin: 0;
}
.channel-settings-overlay .live-start-option .settings-text-input {
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
  padding: 8px 10px;
  border: 1px solid #d1d7db;
  border-radius: 8px;
}
.channel-settings-overlay .ai-bot-callnames-card,
.channel-settings-overlay .ai-bot-avatar-card {
  margin-top: 12px !important;
}
.channel-settings-overlay .ai-bot-callnames-input {
  width: 100% !important;
  box-sizing: border-box !important;
  border: 1px solid #d1d7db !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111b21 !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  min-height: 42px !important;
  outline: none !important;
  box-shadow: none !important;
}
.channel-settings-overlay .ai-bot-callnames-input:focus {
  border-color: #075e54 !important;
  box-shadow: 0 0 0 2px rgba(7, 94, 84, 0.12) !important;
}
.channel-settings-overlay .ai-bot-callnames-hint {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}
.channel-settings-overlay .ai-bot-callnames-hint code {
  background: #f0f2f5;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}
.channel-settings-overlay .ai-bot-avatar-uploader {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.channel-settings-overlay .ai-bot-avatar-preview-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px !important;
  background: #f0f2f5 !important;
  border-radius: 10px !important;
}
.channel-settings-overlay .ai-bot-avatar-preview-lg {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.channel-settings-overlay .ai-bot-avatar-preview-caption {
  font-size: 11px !important;
  color: #667781 !important;
  font-weight: 600 !important;
}
.channel-settings-overlay .ai-bot-avatar-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

/* Bot avatar crop modal */
.bot-avatar-crop-overlay .bot-avatar-crop-panel {
  max-width: 520px !important;
  width: min(96vw, 520px) !important;
}
.bot-avatar-crop-body {
  padding: 10px 12px 12px !important;
  background: #ece5dd !important;
}
.bot-avatar-crop-layout {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: start !important;
}
.bot-avatar-crop-viewport {
  position: relative !important;
  width: 280px !important;
  height: 280px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: #111b21 !important;
  touch-action: none !important;
  cursor: grab !important;
}
.bot-avatar-crop-viewport:active {
  cursor: grabbing !important;
}
.bot-avatar-crop-image {
  position: absolute !important;
  max-width: none !important;
  transform-origin: center center !important;
  user-select: none !important;
  pointer-events: none !important;
}
.bot-avatar-crop-ring {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  pointer-events: none !important;
}
.bot-avatar-crop-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 96px !important;
}
.bot-avatar-crop-side-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #667781 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.bot-avatar-crop-chat-preview {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}
.bot-avatar-crop-zoom-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
  font-size: 11px !important;
  color: #54656f !important;
  font-weight: 600 !important;
}
.bot-avatar-crop-zoom-label input[type='range'] {
  width: 100% !important;
}
.bot-avatar-crop-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 12px !important;
}
@media (max-width: 520px) {
  .bot-avatar-crop-layout {
    grid-template-columns: 1fr !important;
  }
  .bot-avatar-crop-viewport {
    width: min(280px, 100%) !important;
    height: min(280px, 72vw) !important;
  }
}
@media (max-width: 768px) {
  .channel-settings-overlay .channel-info-modal-panel,
  .channel-settings-overlay .channel-settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  .channel-settings-overlay .bg-preview-frame {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ??????????????????????????????????????????????????????????
   13b. KANAL MODALLARI — WhatsApp (liste, geçmiş, kullanıcı menüsü)
   ?????????????????????????????????????????????????????????? */
.channel-wa-modal-overlay.modern-login-modal .modern-login-content {
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
  background: #ece5dd !important;
  max-width: 440px !important;
  width: min(96vw, 440px) !important;
  max-height: 92vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.channel-wa-modal-overlay.modern-login-modal .modern-login-content.v2-list-panel {
  max-width: 560px !important;
  width: min(94vw, 560px) !important;
}
.channel-wa-modal-overlay .modal-header {
  background: #075e54 !important;
  color: #fff !important;
  padding: 10px 12px !important;
  border-bottom: none !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  min-height: 48px !important;
  flex-shrink: 0 !important;
}
.channel-wa-modal-overlay .modal-title {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #fff !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-wa-modal-overlay .modern-close-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #075e54 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  border: none !important;
  flex-shrink: 0 !important;
  transform: none !important;
}
.channel-wa-modal-overlay .modern-close-btn:hover {
  background: #e8f5e9 !important;
  transform: none !important;
}
.channel-wa-modal-overlay .v2-list-panel-body {
  padding: 10px 12px 12px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  background: #ece5dd !important;
}
.channel-wa-modal-overlay .modern-login-content > div:not(.modal-header):not(.v2-list-panel-body) {
  padding: 10px 12px 12px !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: #ece5dd !important;
}
.channel-wa-modal-overlay .v2-list-panel-body .modern-form,
.channel-wa-modal-overlay .v2-list-panel-body .v2-list-stats,
.channel-wa-modal-overlay .v2-list-panel-body .v2-list-toolbar {
  flex-shrink: 0 !important;
}
.channel-wa-modal-overlay .v2-list-scroll {
  flex: 1 1 auto !important;
  min-height: 120px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain !important;
}
.channel-wa-modal-overlay .v2-list-stats {
  font-size: 12px !important;
  color: #667781 !important;
  margin-bottom: 8px !important;
}
.channel-wa-modal-overlay .auth-note {
  margin: 0 0 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  background: #fff !important;
  border-radius: 8px !important;
  color: #54656f !important;
  line-height: 1.4 !important;
}
.channel-wa-modal-overlay .v2-list-tool-btn {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border: 1px solid #d1d7db !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #54656f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.channel-wa-modal-overlay .v2-list-tool-btn:hover:not(:disabled) {
  background: #f0f2f5 !important;
  border-color: #075e54 !important;
  color: #075e54 !important;
}
.channel-wa-modal-overlay .v2-list-tool-danger {
  background: #fff !important;
  border-color: #f1a8a8 !important;
  color: #dc2626 !important;
}
.channel-wa-modal-overlay .v2-list-tool-danger:hover:not(:disabled) {
  background: #fde8e8 !important;
}
.channel-wa-modal-overlay .input-wrapper {
  border: 1px solid #d1d7db !important;
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.channel-wa-modal-overlay .input-wrapper:focus-within {
  border-color: #075e54 !important;
  box-shadow: 0 0 0 2px rgba(7, 94, 84, 0.12) !important;
}
.channel-wa-modal-overlay .input-wrapper input {
  color: #111b21 !important;
}
.channel-wa-modal-overlay .modern-submit-btn {
  background: #075e54 !important;
  color: #fff !important;
  border: 1px solid #075e54 !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
}
.channel-wa-modal-overlay .modern-submit-btn:hover:not(:disabled) {
  background: #054c44 !important;
  transform: none !important;
  box-shadow: none !important;
}
.channel-wa-modal-overlay .v2-auto-playlist-list {
  border: none !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.channel-wa-modal-overlay .v2-playlist-item {
  border-bottom: 1px solid #f0f2f5 !important;
  background: #fff !important;
}
.channel-wa-modal-overlay .v2-playlist-item:hover,
.channel-wa-modal-overlay .v2-playlist-item--clickable:active {
  background: #f0f2f5 !important;
}
.channel-wa-modal-overlay .v2-playlist-pos {
  background: #075e54 !important;
  color: #fff !important;
}
.channel-wa-modal-overlay .v2-playlist-pos--ban {
  background: #dc2626 !important;
}
.channel-wa-modal-overlay .v2-playlist-title {
  color: #111b21 !important;
}
.channel-wa-modal-overlay .v2-playlist-meta {
  color: #667781 !important;
}
.channel-wa-modal-overlay .v2-playlist-del {
  background: #fde8e8 !important;
  color: #dc2626 !important;
  border-radius: 8px !important;
}
.channel-wa-modal-overlay .v2-playlist-del:hover {
  background: #f5c6c6 !important;
}
.channel-wa-modal-overlay .v2-song-menu-actions .login-btn,
.channel-wa-modal-overlay .v2-song-menu-actions .guest-btn {
  background: #fff !important;
  color: #075e54 !important;
  border: 1px solid #075e54 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.channel-wa-modal-overlay .v2-song-menu-actions .login-btn:hover:not(:disabled),
.channel-wa-modal-overlay .v2-song-menu-actions .guest-btn:hover:not(:disabled) {
  background: #e8f5e9 !important;
}

/* Kullanıcı menüsü popup */
.channel-wa-modal-overlay.user-simple-modal-overlay .user-simple-modal {
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
  background: #ece5dd !important;
  overflow: hidden !important;
  max-width: min(360px, 92vw) !important;
}
.channel-wa-modal-overlay .user-simple-modal-close {
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #075e54 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.channel-wa-modal-overlay .user-simple-modal-close:hover {
  background: #e8f5e9 !important;
}
.channel-wa-modal-overlay .user-simple-modal-title {
  margin: 0 !important;
  padding: 12px 44px 12px 12px !important;
  background: #075e54 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-align: left !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions {
  padding: 10px !important;
  gap: 6px !important;
  background: #ece5dd !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button {
  width: 100% !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid #d1d7db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: #fff !important;
  color: #54656f !important;
  text-align: left !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button:hover {
  background: #f0f2f5 !important;
  border-color: #075e54 !important;
  color: #075e54 !important;
  filter: none !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button.ok {
  background: #075e54 !important;
  border-color: #075e54 !important;
  color: #fff !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button.ok:hover {
  background: #054c44 !important;
  color: #fff !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button.warn {
  background: #fff !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button.danger {
  background: #fff !important;
  border-color: #f1a8a8 !important;
  color: #dc2626 !important;
}
.channel-wa-modal-overlay .user-simple-modal-actions button.danger:hover {
  background: #fde8e8 !important;
  color: #dc2626 !important;
}
.channel-wa-modal-overlay .mod-submenu {
  background: #fff !important;
  border: 1px solid #d1d7db !important;
  border-radius: 8px !important;
  padding: 6px !important;
}

/* Profil paneli */
.channel-wa-modal-overlay.user-profile-panel-overlay .user-profile-panel {
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
  background: #ece5dd !important;
  overflow: hidden !important;
}
.channel-wa-modal-overlay .user-profile-panel-close {
  position: absolute !important;
  right: 10px !important;
  top: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #075e54 !important;
  font-size: 22px !important;
  z-index: 3 !important;
}
.channel-wa-modal-overlay .user-profile-panel-hero {
  margin: 0 !important;
  padding: 14px 44px 14px 14px !important;
  background: #075e54 !important;
}
.channel-wa-modal-overlay .user-profile-panel-name {
  color: #fff !important;
}
.channel-wa-modal-overlay .user-profile-panel-global {
  color: rgba(255, 255, 255, 0.85) !important;
}
.channel-wa-modal-overlay .user-profile-panel-avatar {
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.channel-wa-modal-overlay .user-profile-panel-section,
.channel-wa-modal-overlay .user-profile-panel-footer {
  padding-left: 12px !important;
  padding-right: 12px !important;
  background: #ece5dd !important;
  border-color: #d1d7db !important;
}
.channel-wa-modal-overlay .user-profile-panel-section h3 {
  color: #075e54 !important;
}
.channel-wa-modal-overlay .user-profile-panel-full {
  background: #075e54 !important;
  color: #fff !important;
  border: 1px solid #075e54 !important;
  border-radius: 8px !important;
}

/* Moderasyon sihirbazları */
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard {
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ece5dd !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
}
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard h3 {
  margin: 0 !important;
  padding: 12px 14px !important;
  background: #075e54 !important;
  color: #fff !important;
  font-size: 15px !important;
}
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard > .auth-note,
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard > textarea,
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-timed,
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-actions {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-actions {
  padding-bottom: 12px !important;
}
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-actions button {
  min-height: 40px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  border: 1px solid #d1d7db !important;
  background: #fff !important;
  color: #54656f !important;
}
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-actions button.ok,
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-actions button.danger {
  background: #075e54 !important;
  border-color: #075e54 !important;
  color: #fff !important;
}
.channel-wa-modal-overlay.mod-wizard-overlay .mod-wizard-actions button.danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

/* Rol değiştir modal */
.channel-wa-modal-overlay.role-modal .role-modal-content {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #ece5dd !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28) !important;
}
.channel-wa-modal-overlay.role-modal .role-modal-header {
  background: #075e54 !important;
  color: #fff !important;
  padding: 10px 12px !important;
}
.channel-wa-modal-overlay.role-modal .role-modal-header h3 {
  color: #fff !important;
  font-size: 15px !important;
}
.channel-wa-modal-overlay.role-modal .role-modal-header .close {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #075e54 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.channel-wa-modal-overlay.role-modal .role-modal-body {
  padding: 10px !important;
  background: #ece5dd !important;
}
.channel-wa-modal-overlay.role-modal .role-option {
  background: #fff !important;
  border: 1px solid #d1d7db !important;
  border-radius: 8px !important;
  color: #54656f !important;
}
.channel-wa-modal-overlay.role-modal .role-option:hover,
.channel-wa-modal-overlay.role-modal .role-option.active {
  background: #075e54 !important;
  border-color: #075e54 !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .channel-wa-modal-overlay.modern-login-modal .modern-login-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
}

/* ??????????????????????????????????????????????????????????
   14. PROF?L SAYFASI
   ?????????????????????????????????????????????????????????? */
.profile-card {
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border-light);
  max-width: 640px;
  margin: 20px auto;
  overflow: hidden;
}
.profile-hero {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  padding: 28px 22px 22px !important;
  margin-bottom: 0 !important;
  color: #fff;
  border-radius: 0;
}
.profile-avatar {
  width: 80px !important;
  height: 80px !important;
  border: 3px solid rgba(255,255,255,0.8) !important;
  border-radius: 50% !important;
  object-fit: cover;
  box-shadow: var(--shadow-sm);
}
.profile-hero .username,
.profile-hero h2 {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 4px;
}
.profile-role {
  color: rgba(255,255,255,0.8) !important;
  font-size: 13px !important;
  margin: 0 !important;
}
.profile-body {
  padding: 18px 22px;
}
.profile-bio {
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
  font-size: 14px;
}
.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* Admin UI owned by /css/admin.css ? do not override here */

/* ??????????????????????????????????????????????????????????
   16. LOGIN / MOD MODAL
   ?????????????????????????????????????????????????????????? */
.modern-login-content {
  border-radius: 20px !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  border-radius: 20px 20px 0 0;
}
.modern-submit-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
  border-radius: 12px !important;
}
.modern-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102,126,234,0.4) !important;
}
.input-wrapper {
  border-radius: 12px !important;
  border: 2px solid var(--border) !important;
}
.input-wrapper:focus-within {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.1) !important;
}

/* ??????????????????????????????????????????????????????????
   17. BA?LANTI DURUM BADGE'?
   ?????????????????????????????????????????????????????????? */
.connection-badge,
.v2-connected-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(40,167,69,0.12);
  color: var(--success);
  border: 1px solid rgba(40,167,69,0.25);
  font-weight: 600;
}
.v2-disconnected-badge {
  background: rgba(220,53,69,0.12);
  color: var(--danger);
  border-color: rgba(220,53,69,0.25);
}

/* ??????????????????????????????????????????????????????????
   18. BO?LUK/Y?KLEN?YOR DURUMLARI
   ?????????????????????????????????????????????????????????? */
.v2-queue-empty,
.request-queue-empty,
.v2-empty-state {
  padding: 20px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
}
.v2-empty-state::before {
  content: '??';
  display: block;
  font-size: 24px;
  margin-bottom: 6px;
}

/* Loading spinner */
.v2-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 8px;
  color: var(--text-muted);
  font-size: 14px;
}
.v2-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ??????????????????????????????????????????????????????????
   19. CONTEXT MEN? & MOD MEN?S?
   ?????????????????????????????????????????????????????????? */
.context-menu,
.mod-menu,
.v2-context-menu {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  min-width: 160px;
}
.context-menu-item,
.mod-menu-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
}
.context-menu-item:hover,
.mod-menu-item:hover {
  background: var(--primary-light);
}
.context-menu-item.danger,
.mod-menu-item.danger {
  color: var(--danger);
}
.context-menu-item.danger:hover,
.mod-menu-item.danger:hover {
  background: #fef2f2;
}

/* ??????????????????????????????????????????????????????????
   20. GE??? AN?MASYONLARI
   ?????????????????????????????????????????????????????????? */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-message.v2-msg {
  animation: slideUp 0.15s ease-out;
}

/* ??????????????????????????????????????????????????????????
   21. G?ZL?L?K SAYFASI
   ?????????????????????????????????????????????????????????? */
.gizlilik-content,
.privacy-content {
  max-width: 760px;
  margin: 24px auto;
  padding: 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-main);
}
.gizlilik-content h1,
.privacy-content h1 {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 16px;
}
.gizlilik-content h2,
.privacy-content h2 {
  font-size: 1.15rem;
  margin-top: 24px;
  margin-bottom: 8px;
  color: var(--text-main);
}

/* ??????????????????????????????????????????????????????????
   22. K???K EKRAN EK D?ZELTMELER? (<400px)
   ?????????????????????????????????????????????????????????? */
@media (max-width: 400px) {
  .channels-button {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }
  .login-btn {
    padding: 7px 12px !important;
    font-size: 12px !important;
  }
  .channel-header h3 {
    font-size: 1rem !important;
  }
  .overlay-btn {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ??????????????????????????????????????????????????????????
   23. AUTO-PLAYLIST AN?MASYON (eski sitedeki gibi)
   ?????????????????????????????????????????????????????????? */
.auto-playlist-animation {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  flex-shrink: 0;
  animation: autoPulse 1.5s ease-in-out infinite;
}
@keyframes autoPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* ??????????????????????????????????????????????????????????
   24. KANAL SAYFASI MOB?L PANEL SIRASI
   ?????????????????????????????????????????????????????????? */
@media (max-width: 767px) {
  /* Panel s?ras?: oyuncu > progress > kontroller > kuyruk > sohbet */
  .mobile-view {
    display: flex !important;
    flex-direction: column;
    height: calc(100vh - var(--header-h));
    overflow: hidden;
  }
  #mobile-player-slot {
    flex-shrink: 0;
  }
  #mobile-neon-progress-container {
    flex-shrink: 0;
  }
  .mobile-controls {
    flex-shrink: 0;
  }
  .mobile-view .chat-container {
    flex: 1;
    min-height: 0;
  }
}

/* ??????????????????????????????????????????????????????????
   25. HEADER ?KON/BUTON BOYUT STANDARD?ZASYONU
   Kanal ?st? bar?ndaki t?m ikon butonlar, metin butonlar? ve
   kullan?c? avatar? web + mobilde tutarl? boyutlarda olsun.
   ?????????????????????????????????????????????????????????? */
:root {
  --hdr-btn-size: 34px;
  --hdr-icon-font: 16px;
}
@media (max-width: 767px) {
  :root {
    --hdr-btn-size: 26px;
    --hdr-icon-font: 13px;
  }
}

/* Yuvarlak ikon-only butonlar: online saya?, kanal y?netimi, kanal arama, DM zili */
.channel-header-bar .online-users-counter,
.channel-header-bar .channel-mgmt-icon-btn,
.channel-header-bar .channel-search-button,
.channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header) {
  width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  min-width: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-width: var(--hdr-btn-size) !important;
  max-height: var(--hdr-btn-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: var(--hdr-icon-font) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
/* Online + DM: ?er?eve ayn?, i?erik ince bo?lukla dolu */
.channel-header-bar .online-users-counter {
  font-size: calc(var(--hdr-btn-size) - 6px) !important;
}
.channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header) {
  font-size: calc(var(--hdr-btn-size) - 6px) !important;
}
.channel-header-bar .channel-mgmt-icon-btn {
  background: var(--wa-chip) !important;
  border: none !important;
  color: var(--wa-chip-fg) !important;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.channel-header-bar .channel-mgmt-icon-btn:hover {
  background: var(--wa-chip-hover) !important;
  transform: translateY(-1px);
}

/* Ba?lant?lar hamburger + soldan drawer */
.channel-header-bar .baglantilar-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}
.channel-header-bar .baglantilar-btn {
  width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  min-width: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: var(--wa-chip) !important;
  border: none !important;
  color: var(--wa-chip-fg) !important;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.channel-header-bar .baglantilar-btn:hover {
  background: var(--wa-chip-hover) !important;
  transform: translateY(-1px);
}
.baglantilar-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 16px;
}
.baglantilar-icon span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: currentColor;
}
.baglantilar-drawer-root {
  position: fixed;
  inset: 0;
}
.baglantilar-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}
.baglantilar-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: linear-gradient(180deg, #0f2a33 0%, #0a1c24 100%);
  color: #fff;
  box-shadow: 8px 0 28px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  animation: baglantilarSlideIn 0.22s ease-out;
}
@keyframes baglantilarSlideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
.baglantilar-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.baglantilar-drawer-head h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}
.baglantilar-drawer-close {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.baglantilar-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  overflow: auto;
}
.baglantilar-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
.baglantilar-drawer-item:hover {
  background: rgba(255, 255, 255, 0.12);
}
.baglantilar-drawer-item .istek-yt-icon,
.baglantilar-drawer-item i {
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.baglantilar-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.baglantilar-emoji {
  width: 22px;
  text-align: center;
}

.channel-header-bar .admin-panel-icon-btn {
  width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  min-width: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-width: var(--hdr-btn-size) !important;
  max-height: var(--hdr-btn-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: var(--hdr-icon-font) !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  background: var(--wa-chip) !important;
  border: none !important;
  color: var(--wa-chip-fg) !important;
  cursor: pointer;
  transition: background var(--ease), transform var(--ease);
}
.channel-header-bar .admin-panel-icon-btn:hover {
  background: var(--wa-chip-hover) !important;
  transform: translateY(-1px);
}

/* YouTube ?stek ? brand-side (channel-info), same mark on web + mobile */
.channel-header-bar .istek-yt-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}
.channel-header-bar .istek-yt-btn {
  width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  min-width: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-width: var(--hdr-btn-size) !important;
  max-height: var(--hdr-btn-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  background: var(--wa-chip) !important;
  border: none !important;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.channel-header-bar .istek-yt-btn:hover {
  background: var(--wa-chip-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.channel-header-bar .istek-yt-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
/* Desktop: same branded SVG as mobile ? larger mark, not a washed utility chip */
@media (min-width: 768px) {
  .channel-header-bar .istek-yt-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    background: var(--wa-chip) !important;
    border: none !important;
  }
  .channel-header-bar .istek-yt-icon {
    width: 22px;
    height: 22px;
  }
}
.channel-header-bar .istek-yt-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  z-index: 10060;
  min-width: 180px;
  max-width: min(280px, 80vw);
  padding: 6px;
  border-radius: 10px;
  background: #1a1f2e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.channel-header-bar .istek-yt-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #e8ecf4;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-header-bar .istek-yt-menu-item:hover {
  background: rgba(255, 0, 0, 0.14);
}

/* ?oklu panel se?ici ? header overflow'dan ba??ms?z modal */
.istek-picker-content .istek-picker-list {
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.istek-picker-hint {
  margin: 0 0 4px;
}
.istek-picker-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.istek-picker-item-row.is-recording-row {
  gap: 0;
}
.istek-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.istek-picker-item:hover {
  background: rgba(255, 0, 0, 0.12);
  border-color: rgba(255, 0, 0, 0.35);
  transform: translateY(-1px);
}
.istek-picker-item-row .istek-picker-item {
  flex: 1;
  min-width: 0;
}
.istek-picker-item.istek-picker-item-recording {
  cursor: default;
  transform: none;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.22);
}
.istek-picker-item.istek-picker-item-recording:hover {
  background: rgba(127, 29, 29, 0.22);
  border-color: rgba(248, 113, 113, 0.45);
  transform: none;
}
.istek-picker-item .istek-yt-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.istek-picker-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}
.istek-picker-status {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 7px;
  border-radius: 6px;
  line-height: 1.2;
  text-transform: none;
}
.istek-picker-status.is-open {
  color: #0a7a3e;
  background: rgba(34, 197, 94, 0.18);
}
.istek-picker-status.is-closed {
  color: #b42318;
  background: rgba(239, 68, 68, 0.16);
}
.istek-picker-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.istek-picker-mic {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(15, 23, 42, 0.55);
  color: #e5e7eb;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.istek-picker-mic:hover {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.38);
  transform: translateY(-1px);
}
.istek-picker-mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.istek-picker-mic.is-recording,
.channel-header-bar .istek-voice-btn.is-recording {
  background: rgba(239, 68, 68, 0.18) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #fecaca !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}
.istek-voice-rec-wrap {
  margin-top: 6px;
}
.istek-voice-rec-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: min(240px, 72vw);
  padding: 4px 6px;
  border-radius: 10px;
  background: rgba(127, 29, 29, 0.4);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fecaca;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}
.istek-picker-item-recording .istek-voice-rec-inline {
  width: auto;
  flex: 0 1 auto;
  max-width: none;
  margin: 0;
}
.istek-picker-item-recording .istek-picker-name {
  margin-left: auto;
  max-width: 42%;
  font-size: 13px;
  opacity: 0.92;
}
.istek-picker-content .istek-voice-rec-bar .voice-rec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f87171;
  animation: voice-pulse 1s infinite;
  flex-shrink: 0;
}
.istek-picker-content .istek-voice-rec-bar .voice-rec-timer {
  min-width: 28px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.istek-picker-content .istek-voice-rec-bar .voice-rec-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 6px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.istek-picker-content .istek-voice-rec-bar .voice-rec-btn.voice-rec-send {
  background: rgba(16, 185, 129, 0.55) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
}

.channel-header-bar .online-users-counter .counter-circle {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Metin butonu (Kanallar) - ikon butonlarla ayn? y?kseklikte, white chip */
.channel-header-bar .channels-button {
  height: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  background: var(--wa-chip) !important;
  color: var(--wa-chip-fg) !important;
}

/* Giri? (Google G + renkli metin) ? header buton y?ksekli?i */
.channel-header-bar .login-btn,
.channel-header-bar .google-login-btn {
  display: inline-flex !important;
  align-items: center !important;
  height: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-width: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  font-size: 12px !important;
  padding: 0 14px !important;
  line-height: 1 !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.channel-header-bar .google-login-btn .google-login-label {
  display: inline-flex !important;
  align-items: center !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
}
.channel-header-bar .google-login-btn .google-login-letter {
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1 !important;
}
.channel-header-bar .google-login-btn .google-login-space {
  width: 0.28em;
  display: inline-block;
}

/* Kullan?c? avatar? + ad? - tutarl? boyut */
.channel-header-bar .user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.channel-header-bar .user-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: inherit !important;
}
.channel-header-bar .user-profile img.avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}
.channel-header-bar .user-profile .username {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--wa-title) !important;
}
.channel-header-bar .header-logout-btn {
  height: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  background: var(--wa-chip) !important;
  color: var(--wa-chip-fg) !important;
  border: none !important;
}

/* ??????????????????????????????????????????????????????????
   26. MOB?L HEADER ? TEK SATIR KOMPAKT TOOLBAR
   Sadece max-width:767px. Masa?st?ne dokunma.
   K?k neden: sabit header + 3 sat?r kanal ad? + flex-shrink:0
   ? elemanlar ta?ar / ?st ?ste biner.
   ?????????????????????????????????????????????????????????? */
@media (max-width: 767px) {
  header {
    overflow: hidden !important;
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    max-height: var(--header-h) !important;
  }

  header .header {
    height: 100% !important;
    overflow: hidden !important;
  }

  .channel-header-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    padding: 4px 6px !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .channel-header-bar .channel-info {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
    order: 0 !important;
  }

  /* Kanal ad?: web gibi metin boyuna s?? ? flex-grow ile sa?a uzamas?n */
  .channel-header-bar .channel-title-clickable {
    flex: 0 1 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    max-width: min(42vw, 160px) !important;
    width: fit-content !important;
    min-height: 0 !important;
    height: var(--hdr-btn-size) !important;
    padding: 0 6px !important;
    margin: 0 !important;
    order: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-radius: 6px !important;
  }

  .channel-header-bar .channel-title {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .channel-header-bar .channels-button {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    height: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    max-height: var(--hdr-btn-size) !important;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    order: 0 !important;
  }

  .channel-header-bar .header-buttons-group {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    order: 0 !important;
  }

  .channel-header-bar .user-info-container {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    order: 0 !important;
    overflow: hidden !important;
  }

  .channel-header-bar .online-users-counter,
  .channel-header-bar .channel-mgmt-icon-btn,
  .channel-header-bar .channel-search-button,
  .channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header) {
    width: var(--hdr-btn-size) !important;
    height: var(--hdr-btn-size) !important;
    min-width: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    max-width: var(--hdr-btn-size) !important;
    max-height: var(--hdr-btn-size) !important;
    margin: 0 !important;
    font-size: var(--hdr-icon-font) !important;
  }

  .channel-header-bar .istek-yt-btn {
    width: var(--hdr-btn-size) !important;
    height: var(--hdr-btn-size) !important;
    min-width: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    max-width: var(--hdr-btn-size) !important;
    max-height: var(--hdr-btn-size) !important;
    margin: 0 !important;
  }

  .channel-header-bar .istek-yt-icon {
    width: 16px;
    height: 16px;
  }

  /* Admin: same size as neighboring header icon buttons */
  .channel-header-bar .admin-panel-icon-btn {
    width: var(--hdr-btn-size) !important;
    height: var(--hdr-btn-size) !important;
    min-width: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    max-width: var(--hdr-btn-size) !important;
    max-height: var(--hdr-btn-size) !important;
    font-size: var(--hdr-icon-font) !important;
    margin: 0 !important;
  }

  /* DM (WhatsApp) ? daire ayn?; ikon ince bo?lukla doldurur */
  .channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header) {
    width: var(--hdr-btn-size) !important;
    height: var(--hdr-btn-size) !important;
    min-width: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    max-width: var(--hdr-btn-size) !important;
    max-height: var(--hdr-btn-size) !important;
    font-size: calc(var(--hdr-btn-size) - 6px) !important;
  }

  .channel-header-bar .online-users-counter {
    width: var(--hdr-btn-size) !important;
    height: var(--hdr-btn-size) !important;
    border-width: 0 !important;
  }

  .channel-header-bar .counter-number,
  .channel-header-bar .online-users-counter .counter-number {
    font-size: calc(var(--hdr-btn-size) - 6px) !important;
  }

  .online-users-badge {
    width: auto !important;
    height: 26px !important;
    min-width: 0 !important;
    min-height: 26px !important;
    padding: 0 9px !important;
  }
  .online-users-badge .online-count {
    font-size: 11px !important;
  }

  .channel-header-bar .user-profile {
    gap: 3px !important;
  }

  .channel-header-bar .user-profile-link {
    gap: 0 !important;
  }

  .channel-header-bar .user-profile .username {
    display: none !important;
  }

  .channel-header-bar .user-profile img.avatar {
    width: 26px !important;
    height: 26px !important;
    border: 1px solid #eee !important;
    margin: 0 !important;
  }

  .header-dm-center {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 4px !important;
  }

  .header-dm-center .dm-bell-btn--header {
    padding: 0 10px 0 3px !important;
    gap: 5px !important;
  }

  .header-dm-center .dm-bell-label {
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .channel-header-bar .header-logout-btn {
    height: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    padding: 0 6px !important;
    margin: 0 !important;
    font-size: 10px !important;
    border-radius: 6px !important;
  }

  /* Mobil: G ikonu + ?Giri? Yap? birlikte (icon-only / font-size:0 yok) */
  .channel-header-bar .user-info-container {
    overflow: visible !important;
  }

  .channel-header-bar .login-btn,
  .channel-header-bar .google-login-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: var(--hdr-btn-size) !important;
    min-height: var(--hdr-btn-size) !important;
    max-height: var(--hdr-btn-size) !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 11px !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .channel-header-bar .google-login-btn .google-g {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }

  .channel-header-bar .google-login-btn .google-login-label {
    display: inline-flex !important;
    font-size: 11px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .channel-header-bar .google-login-btn .google-login-letter {
    font-size: 11px !important;
  }
}

/* Marka logosu ? header */
.app-title-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.app-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

/* PWA indirme bandı — ana sayfa, üst bant ile kanal kartları arası */
.pwa-home-install-slot:empty {
  display: none;
}
.pwa-home-install-slot:not(:empty) {
  display: block;
  width: 100%;
  padding: 10px 12px 8px;
  box-sizing: border-box;
}
.pwa-install-banner {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  color: #f9fafb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: pwa-banner-in 0.35s ease;
}
@keyframes pwa-banner-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.pwa-install-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.pwa-install-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.95;
}
.pwa-install-banner-text strong {
  font-size: 13px;
  font-weight: 700;
}
.pwa-install-banner-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pwa-install-primary {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #fbbf24;
  color: #111827;
}
.pwa-install-dismiss {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #f9fafb;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.pwa-choice-label {
  display: block;
  text-align: center;
  line-height: 1.35;
  font-size: 15px;
  white-space: normal;
}
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: #1f2937;
}
.modern-login-content .pwa-install-steps,
.modern-login-content .pwa-install-steps strong {
  color: #1f2937;
}
.modern-login-content > div {
  color: #1f2937;
}
@media (min-width: 901px) {
  .pwa-install-banner {
    display: none;
  }
}

/* Overlay gizle/goster (eski toggleAllOverlays) ? boyut/expand YOK, sadece UI chrome */
body.v2-overlays-hidden .overlay-request-queue,
body.v2-overlays-hidden .web-request-queue-container,
body.v2-overlays-hidden .mobile-request-queue,
body.v2-overlays-hidden .overlay-song-info,
body.v2-overlays-hidden .web-overlay-song-info,
body.v2-overlays-hidden .overlay-volume-controls,
body.v2-overlays-hidden .overlay-controls,
body.v2-overlays-hidden .overlay-corner-stack #mobileSkipBtn {
  display: none !important;
}

/* Yildiz sag ustte her zaman gorunur kalsin; player boyutu degismesin */
body.v2-overlays-hidden .overlay-corner-stack {
  display: flex !important;
}
body.v2-overlays-hidden #overlayToggleBtn {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* =========================================================
   Composer actions ? final unified sizes (chat + DM)
   Desktop 39px / mobile 36px; gap 4px / 3px
   Chrome: black bg; content is ?? / GIF / ? (no SVG)
   Button box sizes are fixed ? only glyph/text font-size may vary
   ========================================================= */
.chat-input,
.chat-input.dm-compose,
.dm-panel .chat-input.dm-compose,
.web-view .chat-input,
.web-view #webChatInput {
  gap: var(--composer-btn-gap, 4px) !important;
  align-items: center !important;
}
.chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger),
.chat-input [id$="EmojiButton"],
.chat-input [id$="GifButton"],
.chat-input [id$="SendButton"],
#emojiButton, #gifButton, #sendButton,
#webEmojiButton, #webGifButton, #webSendButton,
#dmEmojiButton, #dmGifButton, #dmSendButton {
  width: var(--composer-btn, 39px) !important;
  height: var(--composer-btn, 39px) !important;
  min-width: var(--composer-btn, 39px) !important;
  min-height: var(--composer-btn, 39px) !important;
  max-width: var(--composer-btn, 39px) !important;
  max-height: var(--composer-btn, 39px) !important;
  font-size: var(--composer-btn-icon, 21px) !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: var(--composer-btn-bg, #1a1a1a) !important;
  color: var(--composer-btn-fg, #fff) !important;
  box-shadow: none !important;
}
.chat-input button svg,
#emojiButton svg, #gifButton svg, #sendButton svg,
#webEmojiButton svg, #webGifButton svg, #webSendButton svg,
#dmEmojiButton svg, #dmGifButton svg, #dmSendButton svg,
.chat-input button[type="submit"] svg {
  width: var(--composer-btn-icon, 21px) !important;
  height: var(--composer-btn-icon, 21px) !important;
  display: block !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  stroke: currentColor !important;
  fill: none !important;
  color: inherit !important;
}
.chat-input button svg text,
#emojiButton svg text, #gifButton svg text,
#webEmojiButton svg text, #webGifButton svg text,
#dmEmojiButton svg text, #dmGifButton svg text {
  fill: currentColor !important;
  stroke: none !important;
}

/* Composer content: Unicode / plain text ? button box sizes unchanged */
#emojiButton, #webEmojiButton, #dmEmojiButton {
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
#gifButton, #webGifButton, #dmGifButton {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0.04em !important;
  color: var(--composer-btn-fg, var(--wa-chip-fg)) !important;
  line-height: 1 !important;
}
#sendButton, #webSendButton, #dmSendButton {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

@media (max-width: 767px) {
  :root {
    --composer-btn: 39px;
    --composer-btn-gap: 4px;
    --composer-btn-icon: 21px;
  }
  .chat-input,
  .chat-input.dm-compose,
  .dm-panel .chat-input.dm-compose,
  .mobile-view .chat-input,
  .mobile-chat-container .chat-input {
    gap: 4px !important;
  }
  .chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger),
  .chat-input [id$="EmojiButton"],
  .chat-input [id$="GifButton"],
  .chat-input [id$="SendButton"],
  #emojiButton, #gifButton, #sendButton,
  #webEmojiButton, #webGifButton, #webSendButton,
  #dmEmojiButton, #dmGifButton, #dmSendButton,
  .mobile-view .chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger),
  .mobile-view .chat-input button#emojiButton,
  .mobile-view .chat-input button#gifButton,
  .mobile-view .chat-input button#sendButton,
  .mobile-chat-container .chat-input button:not(.chat-attach-item):not(.voice-rec-btn):not(.chat-attach-trigger),
  .mobile-chat-container .chat-input button#emojiButton,
  .mobile-chat-container .chat-input button#gifButton,
  .mobile-chat-container .chat-input button#sendButton,
  .dm-panel #dmEmojiButton,
  .dm-panel #dmGifButton,
  .dm-panel #dmSendButton {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    min-height: 39px !important;
    max-width: 39px !important;
    max-height: 39px !important;
    background: var(--composer-btn-bg, var(--wa-chip, #fff)) !important;
    color: var(--composer-btn-fg, var(--wa-chip-fg, #075e54)) !important;
  }
  .chat-input button svg,
  #emojiButton svg, #gifButton svg, #sendButton svg,
  #webEmojiButton svg, #webGifButton svg, #webSendButton svg,
  #dmEmojiButton svg, #dmGifButton svg, #dmSendButton svg,
  .mobile-view .chat-input button svg,
  .mobile-chat-container .chat-input button svg,
  .mobile-view .chat-input button#sendButton svg,
  .mobile-chat-container .chat-input button#sendButton svg {
    width: 21px !important;
    height: 21px !important;
  }
  /* Mobile: glyph/text ? web ile ayn? */
  .mobile-view .chat-input button#emojiButton,
  .mobile-chat-container .chat-input button#emojiButton,
  .mobile-view .chat-input button#webEmojiButton,
  .dm-panel #dmEmojiButton,
  #emojiButton, #webEmojiButton, #dmEmojiButton {
    font-size: 18px !important;
  }
  .mobile-view .chat-input button#gifButton,
  .mobile-chat-container .chat-input button#gifButton,
  .mobile-view .chat-input button#webGifButton,
  .dm-panel #dmGifButton,
  #gifButton, #webGifButton, #dmGifButton {
    font-size: 10px !important;
    font-weight: 700 !important;
  }
  .mobile-view .chat-input button#sendButton,
  .mobile-chat-container .chat-input button#sendButton,
  .mobile-view .chat-input button#webSendButton,
  .dm-panel #dmSendButton,
  #sendButton, #webSendButton, #dmSendButton {
    font-size: 16px !important;
  }
}

/* Desktop glyph sizes ? high specificity; do not touch width/height */
.web-view .chat-input button#webEmojiButton,
.web-view #webChatInput button#webEmojiButton,
.web-view .chat-input button#emojiButton,
.web-view #dmEmojiButton {
  font-size: 18px !important;
}
.web-view .chat-input button#webGifButton,
.web-view #webChatInput button#webGifButton,
.web-view .chat-input button#gifButton,
.web-view #dmGifButton {
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0.04em !important;
  color: var(--composer-btn-fg, var(--wa-chip-fg)) !important;
}
.web-view .chat-input button#webSendButton,
.web-view #webChatInput button#webSendButton,
.web-view .chat-input button#sendButton,
.web-view #dmSendButton {
  font-size: 16px !important;
}

/* =========================================================
   WhatsApp teal ?suit? ? final cohesion (header + composers)
   Equal white circular chips on teal fabric; web + mobile
   ========================================================= */
.channel-header-bar .online-users-counter,
.channel-header-bar .channel-mgmt-icon-btn,
.channel-header-bar .channel-search-button,
.channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header),
.channel-header-bar .admin-panel-icon-btn,
.channel-header-bar .istek-yt-btn,
.channel-header-bar .install-icon,
.channel-header-bar #pwa-install-btn {
  background: var(--wa-chip) !important;
  border: none !important;
  color: var(--wa-chip-fg) !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
.channel-header-bar .online-users-counter {
  width: auto !important;
  min-width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  border-radius: 999px !important;
  padding: 0 11px !important;
  gap: 7px !important;
  background: #000000 !important;
  color: #39ff14 !important;
  border: 1px solid rgba(57, 255, 20, 0.35) !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.18) !important;
}
.channel-header-bar .install-icon.install-text-btn,
.channel-header-bar #pwa-install-btn.install-text-btn {
  width: auto !important;
  min-width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  max-width: none !important;
  max-height: var(--hdr-btn-size) !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: lowercase !important;
  line-height: 1 !important;
  color: var(--wa-chip-fg, #075e54) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14) !important;
}
.channel-header-bar .online-users-counter:hover,
.channel-header-bar .channel-mgmt-icon-btn:hover,
.channel-header-bar .channel-search-button:hover,
.channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header):hover,
.channel-header-bar .admin-panel-icon-btn:hover,
.channel-header-bar .istek-yt-btn:hover,
.channel-header-bar .install-icon:hover,
.channel-header-bar #pwa-install-btn:hover {
  background: var(--wa-chip-hover) !important;
}
.channel-header-bar .install-icon.install-text-btn:hover,
.channel-header-bar #pwa-install-btn.install-text-btn:hover {
  background: #f0f2f5 !important;
  color: #054c44 !important;
}
.channel-header-bar .online-users-counter:hover {
  background: #0a0a0a !important;
}
.channel-header-bar .online-users-counter,
.channel-header-bar .online-users-counter .counter-number,
.channel-header-bar .online-users-counter .online-count-value {
  color: #39ff14 !important;
  font-weight: 800 !important;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.65) !important;
  box-shadow: none !important;
}
.channel-header-bar .online-users-counter .counter-number,
.channel-header-bar .online-users-counter .online-count-value {
  font-size: 13px !important;
}
.channel-header-bar .install-icon,
.channel-header-bar #pwa-install-btn {
  width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  min-width: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-width: var(--hdr-btn-size) !important;
  max-height: var(--hdr-btn-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--hdr-icon-font) !important;
}
.channel-header-bar .install-icon.install-text-btn,
.channel-header-bar #pwa-install-btn.install-text-btn {
  width: auto !important;
  max-width: none !important;
  padding: 0 12px !important;
  font-size: 12px !important;
}
.channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header) {
  font-size: calc(var(--hdr-btn-size) - 6px) !important;
  color: var(--wa-chip-fg) !important;
}
.channel-header-bar .dm-bell-btn .fa-whatsapp {
  color: var(--wa-chip-fg) !important;
  font-size: inherit !important;
  line-height: 1 !important;
  width: 1em !important;
  height: 1em !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.channel-header-bar .dm-bell-btn:not(.dm-bell-btn--header).is-open {
  background: var(--wa-chip-hover) !important;
}
.channel-header-bar .user-profile img.avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}
.channel-header-bar .google-login-btn {
  background: var(--wa-chip) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.channel-header-bar .header-logout-btn:hover {
  background: var(--wa-chip-hover) !important;
  color: var(--wa-chip-fg) !important;
}

/* Composer + DM footer: always teal fabric + white equal circles */
.chat-input,
.chat-input.dm-compose,
.dm-panel .chat-input.dm-compose,
.web-view .chat-input,
.web-view #webChatInput,
.mobile-view .chat-input,
.mobile-chat-container .chat-input {
  background: var(--wa-fabric) !important;
  border-top-color: var(--wa-teal-deep) !important;
}
.chat-input button,
.chat-input [id$="EmojiButton"],
.chat-input [id$="GifButton"],
.chat-input [id$="SendButton"],
#emojiButton, #gifButton, #sendButton,
#webEmojiButton, #webGifButton, #webSendButton,
#dmEmojiButton, #dmGifButton, #dmSendButton {
  background: var(--composer-btn-bg, var(--wa-chip)) !important;
  color: var(--composer-btn-fg, var(--wa-chip-fg)) !important;
  border-radius: 50% !important;
  border: none !important;
}
.chat-input button:hover,
#emojiButton:hover, #gifButton:hover, #sendButton:hover,
#webEmojiButton:hover, #webGifButton:hover, #webSendButton:hover,
#dmEmojiButton:hover, #dmGifButton:hover, #dmSendButton:hover {
  background: var(--composer-btn-bg-hover, var(--wa-chip-hover)) !important;
  color: var(--composer-btn-fg, var(--wa-chip-fg)) !important;
}
#gifButton, #webGifButton, #dmGifButton,
.mobile-view .chat-input button#gifButton,
.mobile-chat-container .chat-input button#gifButton,
.dm-panel #dmGifButton,
.web-view .chat-input button#webGifButton,
.web-view .chat-input button#gifButton,
.web-view #dmGifButton {
  color: var(--composer-btn-fg, var(--wa-chip-fg)) !important;
}

/* DM header chips already on teal ? solid white circles */
.dm-panel-header .modern-close-btn,
.dm-panel-header .dm-header-icon-btn,
.dm-panel-header .dm-header-back {
  background: var(--wa-chip) !important;
  color: var(--wa-chip-fg, #075e54) !important;
}
.dm-panel-header .modern-close-btn *,
.dm-panel-header .dm-header-icon-btn *,
.dm-panel-header .dm-header-back * {
  color: var(--wa-chip-fg, #075e54) !important;
}
.dm-panel-header .modern-close-btn:hover,
.dm-panel-header .dm-header-icon-btn:hover,
.dm-panel-header .dm-header-back:hover {
  background: var(--wa-chip-hover) !important;
  color: var(--wa-chip-fg, #075e54) !important;
}
.dm-panel-header .modern-close-btn:hover *,
.dm-panel-header .dm-header-icon-btn:hover *,
.dm-panel-header .dm-header-back:hover * {
  color: var(--wa-chip-fg, #075e54) !important;
}

@media (max-width: 767px) {
  .dm-panel.dm-mobile-thread .dm-back {
    background: #fff !important;
    color: #075e54 !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22) !important;
  }
  .dm-panel.dm-mobile-thread .dm-peer-menu-btn {
    background: #25d366 !important;
    color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28) !important;
  }
}

/* Online users panel (desktop DM slot) */
.online-users-panel .online-panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}
.online-panel-list {
  overflow: auto;
  flex: 1;
  padding: 4px 0 12px;
}
.online-panel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.online-panel-avatar {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.online-panel-meta {
  min-width: 0;
  flex: 1;
}
.online-panel-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.online-panel-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.25;
  color: #111;
}
.online-panel-role-btn {
  border: 1px solid rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.04);
  color: #222;
  font-size: 11px;
  line-height: 1.2;
  padding: 3px 7px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.online-panel-role-btn:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}
.online-panel-role-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.online-panel-channel {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: left;
  opacity: 0.65;
  color: #333;
  cursor: pointer;
}
button.online-panel-channel:disabled {
  cursor: default;
  opacity: 0.65;
  color: #333;
}
button.online-panel-channel:not(:disabled):hover,
button.online-panel-channel:not(:disabled):focus-visible {
  opacity: 0.85;
}
.online-panel-count {
  font-weight: 500;
  opacity: 0.85;
}
.online-users-counter.is-passive {
  opacity: 0.55;
  cursor: default !important;
  pointer-events: none;
}

/* Mobile channel chat: web ile ayn? composer (teal + beyaz pill + saya? i?eride) */
@media (max-width: 767px) {
  :root {
    --composer-btn: 39px;
    --composer-btn-gap: 4px;
    --composer-btn-icon: 21px;
  }
  .mobile-view .chat-input:not(.dm-compose) .input-wrapper,
  #mobile-chat-container .chat-input:not(.dm-compose) .input-wrapper,
  .mobile-chat-container .chat-input:not(.dm-compose) .input-wrapper {
    background: var(--wa-chip) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    padding: 0 12px !important;
    min-height: 40px !important;
    overflow: hidden;
    align-items: center;
  }
  .mobile-view .chat-input:not(.dm-compose) .input-wrapper:focus-within,
  #mobile-chat-container .chat-input:not(.dm-compose) .input-wrapper:focus-within,
  .mobile-chat-container .chat-input:not(.dm-compose) .input-wrapper:focus-within {
    background: var(--wa-chip) !important;
    box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.35) !important;
  }
  .mobile-view .chat-input:not(.dm-compose) #messageInput,
  #mobile-chat-container .chat-input:not(.dm-compose) #messageInput,
  .mobile-view .chat-input:not(.dm-compose) input[type="text"],
  #mobile-chat-container .chat-input:not(.dm-compose) input[type="text"],
  .mobile-chat-container .chat-input:not(.dm-compose) input[type="text"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 10px 28px 10px 2px !important;
    min-height: 40px !important;
    height: auto !important;
    width: 100% !important;
    -webkit-appearance: none;
    appearance: none;
  }
  .mobile-view .chat-input:not(.dm-compose) #messageInput:focus,
  #mobile-chat-container .chat-input:not(.dm-compose) #messageInput:focus,
  .mobile-view .chat-input:not(.dm-compose) input[type="text"]:focus,
  #mobile-chat-container .chat-input:not(.dm-compose) input[type="text"]:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .mobile-view .chat-input:not(.dm-compose) #characterCount,
  #mobile-chat-container .chat-input:not(.dm-compose) #characterCount,
  .mobile-chat-container .chat-input:not(.dm-compose) #characterCount {
    top: 50% !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    font-size: 11px !important;
    color: rgba(7, 94, 84, 0.55) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 3 !important;
  }
}

/* Moderasyon: kirmizi sistem satiri + wizard + kick gate */
.chat-system-line.chat-system-mod {
  color: #ff1744 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  background: rgba(255, 23, 68, 0.12) !important;
  border-left: 4px solid #ff1744 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  margin: 6px 0 !important;
  text-shadow: none !important;
}
.mod-submenu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: #fff5f5;
  border-radius: 10px;
  border: 1px solid #ffc9c9;
}
.mod-wizard-overlay,
.kick-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.mod-wizard,
.kick-gate-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.mod-wizard h3,
.kick-gate-card h2 {
  margin: 0 0 12px;
}
.mod-wizard-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.mod-wizard-timed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mod-wizard-timed label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 600;
  font-size: 13px;
}
.kick-gate-overlay {
  background: rgba(80, 0, 0, 0.92);
}
.kick-gate-card {
  text-align: center;
  border: 2px solid #ff1744;
}
.kick-gate-emoji {
  font-size: 42px;
  margin-bottom: 8px;
}
.kick-gate-reason {
  color: #b71c1c;
  font-weight: 600;
}
.kick-gate-home {
  margin-top: 16px;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: #ff1744;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* Attach menu ? must beat .chat-input button !important rules */
.chat-input .chat-compose-extras .chat-attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 196px;
  z-index: 90;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f172a;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}
.chat-input .chat-compose-extras button.chat-attach-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 40px !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
  box-shadow: none !important;
  transform: none !important;
  flex-shrink: 0 !important;
  cursor: pointer;
}
.chat-input .chat-compose-extras button.chat-attach-item.is-soon {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}
.chat-input .chat-compose-extras button.chat-attach-item:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: none !important;
}
.chat-input .chat-compose-extras button.chat-attach-trigger {
  width: var(--composer-btn, 39px) !important;
  height: var(--composer-btn, 39px) !important;
  min-width: var(--composer-btn, 39px) !important;
  min-height: var(--composer-btn, 39px) !important;
  max-width: var(--composer-btn, 39px) !important;
  max-height: var(--composer-btn, 39px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(15, 23, 42, 0.85) !important;
  color: #e2e8f0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* M??teri Yapay Zeka Botu paneli */
.member-ai-bot-page {
  min-height: 100dvh;
  background: #0b1220;
  color: #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  box-sizing: border-box;
}
.member-ai-bot-page--frame {
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  gap: 0;
}
.member-ai-bot-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background: #111827;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.member-ai-bot-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #0b1220;
}
.member-ai-bot-msg {
  margin: 0;
  text-align: center;
  max-width: 420px;
  line-height: 1.45;
}
.member-ai-bot-link {
  color: #93c5fd;
  text-decoration: none;
  font-size: 14px;
}
.member-ai-bot-link:hover {
  text-decoration: underline;
}

/* Görünen ad onay modalı (Google giriş çakışma / küfür) */
.display-name-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.display-name-modal {
  background: #1e1e2e;
  color: #f1f5f9;
  border-radius: 14px;
  padding: 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.display-name-modal h2 {
  margin: 0 0 12px;
  font-size: 1.2rem;
}
.display-name-modal-hint {
  margin: 0 0 8px;
  color: #fbbf24;
  line-height: 1.45;
}
.display-name-modal-sub {
  margin: 0 0 16px;
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.4;
}
.display-name-label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: #cbd5e1;
}
.display-name-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #0f172a;
  color: #f8fafc;
  font-size: 1rem;
}
.display-name-error {
  margin: 10px 0 0;
  color: #f87171;
  font-size: 0.9rem;
}
.display-name-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}
.display-name-btn.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  cursor: pointer;
}
.display-name-btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* WhatsApp-style DM voice/video call — must beat .dm-panel (200001) */
.dm-call-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 20px
    calc(28px + env(safe-area-inset-bottom, 0px));
  background: radial-gradient(120% 80% at 50% 0%, #1c3d38 0%, #0b141a 55%, #000 100%);
  color: #fff;
  font-family: inherit;
  pointer-events: auto !important;
}
.dm-call-overlay.is-video {
  background: #000;
}
.dm-call-remote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.dm-call-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    transparent 28%,
    transparent 62%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}
.dm-call-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 24px;
}
.dm-call-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  margin-bottom: 16px;
}
.dm-call-top.is-corner {
  align-self: flex-start;
  flex-direction: row;
  gap: 8px;
  margin-top: 0;
  text-align: left;
  align-items: center;
}
.dm-call-top.is-corner .dm-call-avatar {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  border-width: 2px;
}
.dm-call-id {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.dm-call-top.is-corner .dm-call-id {
  align-items: flex-start;
}
.dm-call-top.is-corner .dm-call-status {
  margin-top: 0;
  font-size: 12px;
}
.dm-call-name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
.dm-call-status {
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.78);
}
.dm-call-local-pip {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 112px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  z-index: 4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.38);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dm-call-local-pip.is-custom {
  right: auto;
  top: auto;
}
.dm-call-local-pip.is-dragging {
  cursor: grabbing;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.72);
}
.dm-call-local-pip .dm-call-local-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.dm-call-local-pip.is-front .dm-call-local-video {
  transform: scaleX(-1);
}
.dm-call-local-pip-hint {
  position: absolute;
  left: 6px;
  top: 6px;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  pointer-events: none;
}
.dm-call-local-pip.is-dragging .dm-call-local-pip-hint {
  opacity: 0.35;
}
.dm-call-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 12px;
}
.dm-call-btn {
  width: 64px;
  height: 64px;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.dm-call-btn span {
  display: none;
}
.dm-call-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 76px;
}
.dm-call-action-wrap > span {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.dm-call-btn-accept {
  background: #25d366;
}
.dm-call-btn-reject,
.dm-call-btn-hangup {
  background: #e53935;
}
.dm-call-btn-mute,
.dm-call-btn-cam,
.dm-call-btn-flip,
.dm-call-btn-speaker {
  background: rgba(255, 255, 255, 0.16);
}
.dm-call-btn-flip.is-busy {
  opacity: 0.55;
  cursor: wait;
}
.dm-call-btn-speaker.is-on {
  background: #fff;
  color: #111;
}
.dm-call-btn.is-off {
  background: #fff;
  color: #111;
}
.dm-call-overlay[role='dialog'] .dm-call-btn-accept,
.dm-call-overlay[role='dialog'] .dm-call-btn-reject {
  width: 72px;
  height: 72px;
}
@media (max-width: 767px) {
  .dm-call-local-pip {
    width: 96px;
    height: 136px;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
  }
  .dm-call-actions {
    gap: 16px;
    flex-wrap: wrap;
    max-width: 100%;
  }
  .dm-call-action-wrap {
    min-width: 64px;
  }
  .dm-call-action-wrap > span {
    font-size: 11px;
  }
}

/* =========================================================
   Mesaj Kutusu — header orta slot (mobil + web, son söz)
   Sol küme (logo/kanal/multimedya) ile online sayacı arasında
   kalan boşluğun tam ortası. Eski daire/max-width kuralları ezilir.
   ========================================================= */
.channel-header-bar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
.channel-header-bar .channel-info {
  flex: 0 1 auto !important;
  min-width: 0 !important;
}
.channel-header-bar .web-header-controls-mount {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(46vw, 520px) !important;
}
.channel-header-bar .header-buttons-group {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.channel-header-bar .user-info-container {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}
.channel-header-bar .header-dm-center {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 8px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  z-index: 6 !important;
  overflow: visible !important;
}
.channel-header-bar .header-dm-center > .dm-bell-btn--header {
  pointer-events: auto !important;
}
.channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header,
.channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header:hover,
.channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header.is-open {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-height: var(--hdr-btn-size) !important;
  border-radius: 999px !important;
  padding: 0 14px 0 4px !important;
  margin: 0 !important;
  gap: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--wa-chip, #fff) !important;
  color: var(--wa-chip-fg, #075e54) !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14) !important;
  overflow: visible !important;
  flex: 0 1 auto !important;
}
.channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header:hover,
.channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header.is-open {
  background: var(--wa-chip-hover, #f0f2f5) !important;
}
.channel-header-bar .header-dm-center .dm-bell-icon {
  position: relative !important;
  flex: 0 0 var(--hdr-btn-size) !important;
  width: var(--hdr-btn-size) !important;
  height: var(--hdr-btn-size) !important;
  min-width: var(--hdr-btn-size) !important;
  min-height: var(--hdr-btn-size) !important;
  max-width: var(--hdr-btn-size) !important;
  max-height: var(--hdr-btn-size) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: calc(var(--hdr-btn-size) - 6px) !important;
  line-height: 1 !important;
}
.channel-header-bar .header-dm-center .dm-bell-label {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--wa-chip-fg, #075e54) !important;
  line-height: 1 !important;
  padding-right: 2px !important;
  max-width: 140px;
}
.channel-header-bar .header-dm-center .dm-bell-btn--header .fa-whatsapp {
  font-size: inherit !important;
  line-height: 1 !important;
  color: var(--wa-chip-fg, #075e54) !important;
}
.channel-header-bar .header-dm-center .dm-bell-btn--header .dm-badge {
  top: -2px !important;
  right: -2px !important;
}
@media (max-width: 767px) {
  .channel-header-bar .header-dm-center {
    padding: 0 4px !important;
  }
  .channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header,
  .channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header:hover,
  .channel-header-bar .header-dm-center .dm-bell-btn.dm-bell-btn--header.is-open {
    padding: 0 10px 0 3px !important;
    gap: 5px !important;
  }
  .channel-header-bar .header-dm-center .dm-bell-label {
    font-size: 11px !important;
    max-width: 96px;
  }
}