/* TALKCHAT_SHELL_BRAND_ACTIVE_MEMBERS_V3160 */
/* TALKCHAT_LOGO_TABS_DYNAMIC_MICS_V3170 */
/* TALKCHAT_MOBILE_LAYOUT_HOTFIX_V3171 */
/* TALKCHAT_MOBILE_LOGO_SPLIT_SEND_V3172 */

#siteBrandV3160 {
  width: 181px;
  flex: 0 0 181px;
  justify-content: flex-start;
  overflow: hidden;
  padding: 4px 10px;
}

#siteBrandV3160 #brandName {
  overflow: hidden;
  color: #75ddff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-brand-logo-v3160 {
  display: block;
  width: auto;
  max-width: 158px;
  height: 32px;
  max-height: 32px;
  object-fit: contain;
  object-position: left center;
}

.right.drawer {
  position: relative;
}

.active-members-drawer-v3160 {
  position: absolute;
  inset: 8px;
  z-index: 25;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #1c779e;
  border-radius: 8px;
  background:
    radial-gradient(circle at 100% 0, #5333a63d, transparent 36%),
    linear-gradient(160deg, #0b2940, #041522 68%);
  box-shadow: 0 14px 36px #000b, inset 0 0 0 1px #41c7fa18;
}

.active-members-drawer-v3160 > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 10px;
  border-bottom: 1px solid #1d6788;
  background: linear-gradient(90deg, #123d5b, #171d48);
}

.active-members-drawer-v3160 > header div {
  min-width: 0;
}

.active-members-drawer-v3160 > header b,
.active-members-drawer-v3160 > header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-members-drawer-v3160 > header b {
  color: #79ddff;
  font-size: 13px;
}

.active-members-drawer-v3160 > header small {
  margin-top: 3px;
  color: #93aabd;
  font-size: 9px;
}

#activeMembersCloseV3160 {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  padding: 0;
  border: 1px solid #347a99;
  border-radius: 7px;
  background: #15364b;
  color: #eaf8ff;
  font-size: 21px;
  line-height: 1;
}

.active-members-tools-v3160 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid #174b65;
  background: #061b2a;
}

#activeMembersSearchV3160 {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid #236b8b;
  border-radius: 6px;
  outline: none;
  background: #03131f;
  color: #eefaff;
  font-size: 10px;
}

#activeMembersSearchV3160:focus {
  border-color: #48c9f5;
  box-shadow: 0 0 0 2px #28b9ed22;
}

#activeMembersRefreshV3160 {
  padding: 0;
  border: 1px solid #256f91;
  border-radius: 6px;
  background: linear-gradient(#174865, #09283d);
  font-size: 16px;
}

.active-members-list-v3160 {
  min-height: 0;
  padding: 7px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #297fa3 #061521;
}

.active-member-row-v3160 {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
  padding: 7px;
  border: 1px solid #1b506b;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d2b40, #0a2133);
}

.active-member-row-v3160.is-self {
  border-color: #7a53cb;
  background: linear-gradient(135deg, #17364d, #282052);
}

.active-member-avatar-v3160 {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  isolation: isolate;
  border: 2px solid #3bbde9;
  border-radius: 50%;
  background: linear-gradient(135deg, #1c5a7b, #49358a);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.active-member-avatar-v3160.female {
  border-color: #f472b6;
  background: linear-gradient(135deg, #7e2258, #9b38c5);
}

.active-member-info-v3160 {
  min-width: 0;
}

.active-member-info-v3160 b,
.active-member-info-v3160 small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-member-info-v3160 b {
  color: #eaf8ff;
  font-size: 11px;
}

.active-member-info-v3160 small {
  margin-top: 3px;
  color: #8fa9bc;
  font-size: 9px;
}

.active-member-online-v3160 {
  color: #33e786;
  font-size: 13px;
  text-shadow: 0 0 8px #20d977;
}

.active-members-empty-v3160 {
  margin: 0;
  padding: 28px 12px;
  color: #8fa6b8;
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.active-members-drawer-v3160 > footer {
  padding: 8px;
  border-top: 1px solid #174b65;
  background: #04131f;
  color: #738da0;
  font-size: 8px;
  text-align: center;
}

@media (max-width: 860px) {
  #siteBrandV3160 {
    width: 137px;
    flex-basis: 137px;
    padding-inline: 7px;
  }

  .site-brand-logo-v3160 {
    max-width: 123px;
    height: 29px;
    max-height: 29px;
  }

  .active-members-drawer-v3160 {
    inset: 6px;
  }

  .active-member-row-v3160 {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    padding: 8px;
  }

  .active-member-avatar-v3160 {
    width: 44px;
    height: 44px;
  }

  .active-member-info-v3160 b {
    font-size: 12px;
  }

  .active-member-info-v3160 small {
    font-size: 10px;
  }
}

/* Logo belirginliği: düşük maliyetli, yumuşak ve erişilebilir parlama. */
#siteBrandV3160 {
  position: relative;
  isolation: isolate;
  border-right-color: #35cfff8f;
  background:
    radial-gradient(circle at 28% 50%, #36d7ff22, transparent 48%),
    linear-gradient(90deg, #071d31a8, #0d18309c);
  box-shadow:
    inset 0 0 0 1px #77e7ff18,
    0 0 12px #18bffb1f;
}

#siteBrandV3160::before {
  content: "";
  position: absolute;
  inset: 5px 9px;
  z-index: 0;
  border-radius: 8px;
  background: linear-gradient(90deg, #27d4ff24, #8b5cf628 55%, #f43f8a1c);
  filter: blur(6px);
  opacity: .72;
  animation: talkchat-brand-breathe-v3170 3.8s ease-in-out infinite;
  pointer-events: none;
}

#siteBrandV3160 > * {
  position: relative;
  z-index: 1;
}

.site-brand-logo-v3160 {
  filter:
    drop-shadow(0 0 3px #dffaff)
    drop-shadow(0 0 7px #22c8ff99)
    drop-shadow(0 0 11px #8b5cf65c);
  transition: filter .2s ease, transform .2s ease;
}

#siteBrandV3160:hover .site-brand-logo-v3160,
#siteBrandV3160:focus-visible .site-brand-logo-v3160 {
  filter:
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 9px #30d5ffcc)
    drop-shadow(0 0 14px #a855f799);
  transform: translateY(-1px);
}

@keyframes talkchat-brand-breathe-v3170 {
  0%,100% { opacity: .5; transform: scaleX(.96); }
  50% { opacity: .88; transform: scaleX(1.02); }
}

/* Oda mic_limit değerinden üretilen 1-20 yuvalık masaüstü mikrofon alanı. */
.left.dynamic-mics-v3170 {
  grid-template-rows: var(--desktop-mic-height,82px) 29px minmax(0,1fr) 58px 48px 30px !important;
}

#featuredMics[data-dynamic-mics="v3.17.0"],
#featuredMics:has(.dynamic-mic-v3170) {
  grid-template-columns: repeat(var(--desktop-mic-columns,3),minmax(0,1fr));
  grid-template-rows: repeat(var(--desktop-mic-rows,1),minmax(0,1fr));
  align-items: center;
  justify-items: center;
  gap: 3px 5px;
  min-height: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  border-bottom-color: #4d40a34d;
  background:
    radial-gradient(circle at 15% 18%,#29d5ff1c,transparent 38%),
    radial-gradient(circle at 86% 80%,#a855f71b,transparent 42%),
    #ffffff20;
  scrollbar-width: thin;
  scrollbar-color: #6753b7 #ffffff2b;
}

#featuredMics .dynamic-mic-v3170 {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  outline: 0;
  background: transparent;
  opacity: 1;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}

#featuredMics .dynamic-mic-v3170:hover,
#featuredMics .dynamic-mic-v3170:focus-visible {
  background: #ffffff42;
  box-shadow: inset 0 0 0 1px #23cafa70;
}

#featuredMics .desktop-mic-icon-v3170,
#featuredMics .dynamic-mic-v3170 > .mic-slot-avatar {
  width: var(--desktop-mic-size,50px) !important;
  height: var(--desktop-mic-size,50px) !important;
  max-width: 72px;
  max-height: 72px;
}

#featuredMics .desktop-mic-icon-v3170 {
  overflow: visible;
  filter: drop-shadow(0 2px 3px #20154b55);
}

.desktop-mic-halo-v3170 {
  fill: #f4f2ff;
  stroke: #7965b8;
  stroke-width: 2;
}

.desktop-mic-capsule-v3170 {
  fill: #1db9ec;
  stroke: #096f9b;
  stroke-width: 2;
}

.desktop-mic-cradle-v3170 {
  fill: none;
  stroke: #493b77;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.desktop-mic-shine-v3170 {
  fill: none;
  stroke: #e8fbff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .85;
}

#featuredMics .dynamic-mic-v3170:not(.occupied):hover .desktop-mic-icon-v3170,
#featuredMics .dynamic-mic-v3170:not(.occupied):focus-visible .desktop-mic-icon-v3170 {
  transform: translateY(-1px) scale(1.04);
  filter: drop-shadow(0 0 7px #22c8ffb8);
}

#featuredMics .dynamic-mic-v3170 > .mic-slot-avatar {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: visible !important;
  border: 2px solid #1ec8f5 !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,#174e83,#713bc6);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 0 8px #21c8f58a;
  transform: scale(var(--desktop-mic-scale,1));
  transition: transform .1s linear, box-shadow .16s ease;
}

#featuredMics .dynamic-mic-v3170.female > .mic-slot-avatar {
  border-color: #f45aa8 !important;
  box-shadow: 0 0 8px #f45aa877;
}

#featuredMics .dynamic-mic-v3170.voice-active > .mic-slot-avatar {
  box-shadow:
    0 0 var(--desktop-mic-glow,13px) #19c9ff,
    0 0 9px #7c3aed;
}

#featuredMics .dynamic-mic-v3170.female.voice-active > .mic-slot-avatar {
  box-shadow:
    0 0 var(--desktop-mic-glow,13px) #ff4fa3,
    0 0 9px #a855f7;
}

#featuredMics .dynamic-mic-v3170 > .mic-slot-avatar .avatar-image,
#featuredMics .dynamic-mic-v3170 > .mic-slot-avatar .avatar-fallback {
  border-radius: 50% !important;
}

#featuredMics .dynamic-mic-v3170 > small {
  display: none !important;
}

@media (max-width: 860px) {
  .left.dynamic-mics-v3170 {
    grid-template-rows: var(--desktop-mic-height,82px) 29px minmax(0,1fr) 58px 48px 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #siteBrandV3160::before { animation: none; }
  .site-brand-logo-v3160,
  #featuredMics .dynamic-mic-v3170,
  #featuredMics .dynamic-mic-v3170 > .mic-slot-avatar { transition: none; }
}

/*
 * v3.17.1 mobil düzeltme:
 * - masaüstü dinamik mikrofon satırları mobil kullanıcı çekmecesine taşınmaz,
 * - logo esnek kalır, hesap/yenile/çıkış grubu sağa yaslanır,
 * - mobil başlık daha az dikey alan kullanır.
 */
@media (max-width: 860px) {
  :root {
    --mobile-header: 56px;
    --mobile-tabs: 44px;
  }

  .topbar {
    height: var(--mobile-header);
    min-height: var(--mobile-header);
    padding-inline: 8px;
  }

  #siteBrandV3160 {
    width: auto !important;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto !important;
    justify-content: flex-start;
    padding: 0 6px;
  }

  #siteBrandV3160::before {
    inset: 5px 6px;
  }

  .site-brand-logo-v3160 {
    width: auto;
    max-width: min(128px,100%);
    height: 28px;
    max-height: 28px;
  }

  .topnav {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 5px;
    margin-left: auto;
    padding: 0;
    overflow: visible;
  }

  .topnav > #mobileAccountBtn,
  .topnav > #refreshBtn,
  .topnav > #exitBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 11px;
  }

  .topnav > #mobileAccountBtn > span {
    width: 31px;
    height: 31px;
    font-size: 15px;
  }

  .topnav > #refreshBtn::before {
    font-size: 23px;
  }

  .topnav > #exitBtn::before {
    font-size: 29px;
  }

  .mobile-account-menu {
    top: 58px;
  }

  .left.dynamic-mics-v3170 {
    grid-template-rows: 36px minmax(0,1fr) !important;
  }

  .left.dynamic-mics-v3170 > .featured,
  .left.dynamic-mics-v3170 > .mic-state,
  .left.dynamic-mics-v3170 > .talk,
  .left.dynamic-mics-v3170 > footer {
    display: none !important;
  }

  .left.dynamic-mics-v3170 > .panel-title {
    grid-row: 1;
    min-height: 36px;
  }

  .left.dynamic-mics-v3170 > .members {
    grid-row: 2;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-view-users .left.dynamic-mics-v3170 .member {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-header: 50px;
    --mobile-tabs: 42px;
  }

  .topbar {
    padding-inline: 6px;
  }

  #siteBrandV3160 {
    padding-inline: 4px;
  }

  #siteBrandV3160::before {
    inset: 4px;
    filter: blur(5px);
  }

  .site-brand-logo-v3160 {
    max-width: min(120px,100%);
    height: 25px;
    max-height: 25px;
  }

  .topnav {
    gap: 4px;
  }

  .topnav > #mobileAccountBtn,
  .topnav > #refreshBtn,
  .topnav > #exitBtn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 10px;
  }

  .topnav > #mobileAccountBtn > span {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .topnav > #refreshBtn::before {
    font-size: 21px;
  }

  .topnav > #exitBtn::before {
    font-size: 27px;
  }

  .mobile-account-menu {
    top: 52px;
  }

  .mobile-tabs button {
    font-size: 10px;
  }
}

/* TALKCHAT_CDN_GIF_LIBRARY_V430 */
.room-gif-toolbar-v430 {
  flex: 0 0 auto;
  padding: 7px 8px;
  border-bottom: 1px solid #20374c;
  background: #091827f2;
}

.room-gif-toolbar-v430 input {
  width: 100%;
  height: 31px;
  padding: 0 10px;
  border: 1px solid #31536e;
  border-radius: 8px;
  outline: 0;
  background: #04101d;
  color: #eefaff;
  font-size: 11px;
}

.room-gif-toolbar-v430 input:focus {
  border-color: #4fdff4;
  box-shadow: 0 0 0 2px #32cae72b;
}

.room-gif-pager-v430 {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 34px;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  padding: 4px 8px;
  border-top: 1px solid #20374c;
  background: #091827f2;
}

.room-gif-pager-v430 button {
  width: 32px;
  height: 27px;
  padding: 0;
  border: 1px solid #31536e;
  border-radius: 7px;
  background: #10283c;
  color: #fff;
  font-weight: 900;
}

.room-gif-pager-v430 button:disabled { opacity: .38; }
.room-gif-pager-v430 span { color: #b9d7e8; font-size: 10px; font-weight: 850; text-align: center; }
.room-gif-picker-v3150 .room-gif-message-v3150 { min-height: 23px; padding-block: 5px; }
.room-gif-picker-v3150 .room-gif-grid-v3150 { grid-auto-rows: 104px; }
.room-gif-picker-v3150 .gif-choice { height: 104px; grid-template-rows: minmax(0,76px) 18px; }
.room-gif-picker-v3150 .gif-choice img { height: 76px; }

/*
 * v3.17.2:
 * - mobil logonun etrafındaki dekoratif kareyi kaldırır ve doğal oranını korur,
 * - gönderim hedefi okunu ana gönder düğmesiyle tek bir split-button yapar.
 */
.broadcast-split-v3172 {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr);
  overflow: hidden;
  border-left: 1px solid #1b2535;
  background: linear-gradient(#263345,#080e17);
}

.composer.staff-broadcast-enabled-v1 {
  grid-template-columns: minmax(0,1fr) 118px !important;
}

.composer.staff-broadcast-enabled-v1 > .broadcast-split-v3172 {
  grid-template-columns: minmax(0,1fr) 30px;
}

.composer > .broadcast-split-v3172 > button {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.composer > .broadcast-split-v3172 > button[type="submit"] {
  padding: 0 7px !important;
  overflow: hidden;
  color: #fff;
  font-size: 12px !important;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer > .broadcast-split-v3172 > .staff-broadcast-arrow-v1 {
  position: static !important;
  width: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-left: 1px solid rgba(255,255,255,.2) !important;
  color: #dff6ff !important;
  font-size: 9px !important;
}

.composer > .broadcast-split-v3172 > button:hover,
.composer > .broadcast-split-v3172 > button:focus-visible,
.composer > .broadcast-split-v3172 > .staff-broadcast-arrow-v1.active {
  background: rgba(255,255,255,.1) !important;
  filter: none;
}

.staff-broadcast-menu-v1 button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
}

.staff-broadcast-menu-v1 button.selected-v3172::after {
  content: "✓";
  color: #56dcff;
  font-size: 12px;
  font-weight: 900;
}

@media (max-width: 860px) {
  #siteBrandV3160 {
    isolation: auto;
    overflow: hidden;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #siteBrandV3160::before {
    content: none !important;
    display: none !important;
  }

  #siteBrandV3160 .site-brand-logo-v3160 {
    width: auto !important;
    height: auto !important;
    max-width: min(122px,100%) !important;
    max-height: 27px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
    transform: none !important;
  }

  #siteBrandV3160:hover .site-brand-logo-v3160,
  #siteBrandV3160:focus-visible .site-brand-logo-v3160 {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.55)) !important;
    transform: none !important;
  }

  .composer > .broadcast-split-v3172 {
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(145deg,#1c2854,#09112e);
    box-shadow: 0 4px 10px #121a3d38;
  }

  .composer.staff-broadcast-enabled-v1 {
    grid-template-columns: minmax(0,1fr) 102px !important;
  }

  .composer.staff-broadcast-enabled-v1 > .broadcast-split-v3172 {
    grid-template-columns: minmax(0,1fr) 29px;
  }

  .composer > .broadcast-split-v3172 > .staff-broadcast-arrow-v1 {
    width: 29px !important;
    min-width: 29px !important;
  }
}

@media (max-width: 430px) {
  #siteBrandV3160 .site-brand-logo-v3160 {
    max-width: min(116px,100%) !important;
    max-height: 25px !important;
  }

  .composer.staff-broadcast-enabled-v1 {
    grid-template-columns: minmax(0,1fr) 98px !important;
  }

  .composer.staff-broadcast-enabled-v1 > .broadcast-split-v3172 {
    grid-template-columns: minmax(0,1fr) 27px;
  }

  .composer > .broadcast-split-v3172 > button[type="submit"] {
    padding-inline: 5px !important;
    font-size: 11px !important;
  }

  .composer > .broadcast-split-v3172 > .staff-broadcast-arrow-v1 {
    width: 27px !important;
    min-width: 27px !important;
  }
}

/* TALKCHAT_GIF_DENSE_SCROLL_V431 */
.room-gif-picker-v3150 .room-gif-grid-v3150 {
  grid-template-columns: repeat(8,minmax(0,1fr)) !important;
  grid-auto-rows: 56px !important;
  gap: 4px !important;
  padding: 6px !important;
  align-content: start;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.room-gif-picker-v3150 .gif-choice {
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  min-height: 56px !important;
  display: grid !important;
  grid-template: minmax(0,1fr) / minmax(0,1fr) !important;
  place-items: center;
  gap: 0 !important;
  padding: 2px !important;
  border-radius: 5px !important;
}

.room-gif-picker-v3150 .gif-choice img {
  width: 100% !important;
  height: 50px !important;
  max-width: 100% !important;
  max-height: 50px !important;
  object-fit: contain !important;
  background: transparent !important;
}

.room-gif-picker-v3150 .gif-choice small { display: none !important; }
.room-gif-picker-v3150 .room-gif-message-v3150 { min-height: 25px; padding: 6px 8px; }
.room-gif-picker-v3150 .room-gif-pager-v430 { display: none !important; }

@media (max-width: 860px) {
  .room-gif-picker-v3150 .room-gif-grid-v3150 {
    grid-auto-rows: 49px !important;
    gap: 3px !important;
    padding: 5px !important;
  }

  .room-gif-picker-v3150 .gif-choice {
    height: 49px !important;
    min-height: 49px !important;
    padding: 1px !important;
  }

  .room-gif-picker-v3150 .gif-choice img {
    height: 45px !important;
    max-height: 45px !important;
  }
}