:root {
  --accent: #7c5cff;
  --accent-rgb: 124, 92, 255;
  --green: #27c6a5;
  --danger: #ff5574;
  --warning: #ffb547;
  --bg: #0e1016;
  --bg-soft: #13161e;
  --panel: #181b24;
  --panel-2: #1d202b;
  --panel-3: #242834;
  --panel-hover: #292d3a;
  --text: #f5f6fb;
  --text-2: #b6bbc9;
  --muted: #747b8d;
  --line: rgba(255, 255, 255, 0.075);
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.32);
  --radius: 18px;
  --font-display: "Manrope", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
}

/* Mikrofon/kamera isteği: yalnızca boya katmanında çalışan, 30 saniyelik uyarı. */
.voice-user.permission-requested {
  animation: voice-permission-request-flash 750ms ease-in-out 40 alternate;
  will-change: box-shadow, border-color, background-color;
}

.voice-user.permission-requested .voice-permission-button.requested {
  color: #1b1607 !important;
  background: #ffd166 !important;
  border-color: #ffe29a !important;
  animation: voice-permission-button-flash 750ms ease-in-out 40 alternate;
}

@keyframes voice-permission-request-flash {
  from {
    border-color: rgba(255, 209, 102, 0.34);
    background-color: rgba(255, 209, 102, 0.025);
    box-shadow: 0 0 0 rgba(255, 209, 102, 0);
  }
  to {
    border-color: rgba(255, 209, 102, 0.98);
    background-color: rgba(255, 209, 102, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.16), 0 0 22px rgba(255, 209, 102, 0.24);
  }
}

@keyframes voice-permission-button-flash {
  from { box-shadow: 0 0 0 rgba(255, 209, 102, 0); }
  to { box-shadow: 0 0 16px rgba(255, 209, 102, 0.72); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-user.permission-requested,
  .voice-user.permission-requested .voice-permission-button.requested {
    animation: none;
    border-color: #ffd166 !important;
    box-shadow: 0 0 0 2px rgba(255, 209, 102, 0.18);
  }
}

/* Katılımcı yönetimi: altı araç iki dengeli dikey grup halinde görünür. */
.voice-dock:not(.collapsed) .voice-user .voice-user-permissions,
.voice-dock:not(.collapsed).has-cameras .voice-user .voice-user-permissions,
.voice-dock:not(.collapsed):not(.has-cameras) .voice-user .voice-user-permissions {
  display: grid !important;
  grid-template-rows: repeat(2, 28px) !important;
  grid-template-columns: repeat(3, 28px) !important;
  grid-auto-flow: row !important;
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  gap: 3px 5px !important;
  padding: 4px !important;
}

.voice-dock:not(.collapsed) .voice-user .voice-user-permissions:empty {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.voice-dock:not(.collapsed) .voice-user .voice-user-permissions > button.voice-permission-button.icon-action,
.voice-dock:not(.collapsed).has-cameras .voice-user .voice-user-permissions > button.voice-permission-button.icon-action {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
}

/* Mobil yönetim merkezi: masaüstündeki oda ve market işlemleri telefonda da erişilebilir. */
.mobile-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.mobile-management-grid button {
  display: grid;
  min-height: 76px;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  background: linear-gradient(145deg, rgba(35, 216, 169, 0.09), rgba(255, 255, 255, 0.018));
  border: 1px solid #30434d;
  border-radius: 13px;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.mobile-management-grid button:hover,
.mobile-management-grid button:focus-visible {
  transform: translateY(-1px);
  background: linear-gradient(145deg, rgba(35, 216, 169, 0.16), rgba(255, 255, 255, 0.025));
  border-color: rgba(43, 220, 175, 0.55);
  outline: none;
}

.mobile-management-grid button > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #34ddb3;
  font-style: normal;
  background: rgba(35, 216, 169, 0.1);
  border: 1px solid rgba(35, 216, 169, 0.24);
  border-radius: 11px;
}

.mobile-management-grid button > i .ui-icon {
  width: 17px;
  height: 17px;
}

.mobile-management-grid button > span,
.mobile-management-grid button strong,
.mobile-management-grid button small {
  display: block;
  min-width: 0;
}

.mobile-management-grid button strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-management-grid button small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.35;
}

/* Ses paneli küçültüldüğünde radyo gibi taşınabilir tek bir bağlantı ikonuna dönüşür. */
.voice-dock.collapsed {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
  border-radius: 17px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(43, 220, 175, 0.15);
}

.voice-dock.collapsed .voice-dock-head {
  width: 54px;
  height: 54px;
  min-height: 54px;
  justify-content: center;
  padding: 0;
  cursor: grab;
  background: radial-gradient(circle, rgba(43, 220, 175, 0.2), rgba(14, 26, 31, 0.98));
  border: 0;
  border-radius: inherit;
  touch-action: none;
}

.voice-dock.collapsed .voice-dock-head > div,
.voice-dock.collapsed #voice-collapse {
  display: none;
}

.voice-dock.collapsed .voice-dock-head .signal-bars {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 12px;
  box-shadow: 0 0 22px rgba(43, 220, 175, 0.18);
}

@media (max-width: 680px) {
  .header-actions [data-action="room-settings"] {
    display: grid !important;
  }

  .mobile-management-modal {
    max-height: min(82dvh, 680px) !important;
  }

  .mobile-management-modal .modal-body {
    padding-bottom: 16px;
  }

  .mobile-management-grid {
    grid-template-columns: 1fr;
  }

  .mobile-management-grid button {
    min-height: 64px;
  }

  .voice-dock,
  .voice-dock-head {
    touch-action: none;
  }

  .voice-dock:not(.collapsed) {
    min-width: 250px;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 76px);
  }

  .voice-dock:not(.collapsed) .voice-dock-head {
    cursor: grab;
    touch-action: none;
  }

  .voice-resize-handle {
    display: block;
    width: 24px;
    height: 24px;
  }
}

/* Ses katılımcısı araçları: kompakt, dengeli ve dokunmatik uyumlu. */
.voice-dock .voice-user-permissions,
.voice-dock:not(.has-cameras) .voice-user-permissions,
.voice-dock.has-cameras .voice-user-permissions {
  width: max-content !important;
  max-width: 104px !important;
  padding: 4px !important;
  gap: 3px !important;
  background: rgba(8, 22, 28, .72) !important;
  border: 1px solid rgba(68, 103, 115, .42) !important;
  border-radius: 12px !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button.icon-action {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  transition: transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button.icon-action:hover { transform: translateY(-1px); }
.voice-dock .voice-permission-button.icon-action.timeout { color: #f4c86a !important; border-color: rgba(225, 174, 64, .36) !important; }

/* Kasa ekranı v2: sabit hover, eksiksiz görseller ve kaydırmasız responsive yerleşim. */
.game-hub.game-view-caseOpening:not(.is-collapsed) {
  height: min(540px, calc(100dvh - 54px));
  min-height: 390px;
}

.game-view-caseOpening .game-hub-content {
  overflow: hidden;
  scrollbar-width: none;
}

.game-view-caseOpening .game-hub-content::-webkit-scrollbar {
  display: none;
}

.game-view-caseOpening .game-active {
  height: 100%;
  min-height: 0;
  padding: 7px 10px 9px;
  overflow: hidden;
}

.game-view-caseOpening .game-active-top {
  min-height: 34px;
  margin-bottom: 5px;
}

.game-view-caseOpening .game-active-top > button {
  height: 32px;
}

.game-view-caseOpening .game-active-top .game-active-art {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  padding: 3px;
}

.game-view-caseOpening .game-active-art img,
.game-tile-caseOpening .game-tile-art img,
.game-tile-caseOpening:hover .game-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.88);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .34));
}

.game-view-caseOpening .case-hero-art img {
  width: auto !important;
  height: clamp(112px, 26dvh, 190px) !important;
  max-width: 92%;
  max-height: none;
  object-fit: contain;
}

.game-tile:hover,
.game-tile:hover .game-tile-art,
.case-picker:hover,
.case-picker.selected {
  transform: none;
}

.game-view-caseOpening .game-stage-shell,
.game-view-caseOpening .case-opening-stage {
  min-height: 0;
  height: 100%;
}

.game-view-caseOpening .case-opening-stage {
  grid-template-rows: 44px minmax(174px, 1fr) auto;
  gap: 6px;
  overflow: hidden;
}

.game-view-caseOpening .case-picker-row {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  overflow: visible;
  padding: 0;
}

.game-view-caseOpening .case-picker {
  min-width: 0;
  height: 44px;
  grid-template-columns: 48px minmax(0, 1fr);
  padding: 3px 6px;
  overflow: hidden;
  scroll-snap-align: none;
}

.game-view-caseOpening .case-picker img {
  width: 48px;
  height: 36px;
  object-fit: contain;
}

.game-view-caseOpening .case-opening-main {
  min-height: 0;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) clamp(165px, 18vw, 215px);
}

.game-view-caseOpening .case-opening-showcase {
  min-height: 0;
  height: 100%;
}

.game-view-caseOpening .case-hero-art {
  width: min(520px, 88%);
  height: 100%;
  max-height: 206px;
}

.game-view-caseOpening .case-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.88);
}

.game-view-caseOpening .case-opening-main > aside {
  min-height: 0;
  padding: 12px 15px;
}

.game-view-caseOpening .case-opening-main > aside h3 {
  margin-block: 3px;
  font-size: 15px;
}

.game-view-caseOpening .case-opening-main > aside p {
  margin-bottom: 7px;
  line-height: 1.35;
}

.game-view-caseOpening .case-opening-main > aside > strong {
  margin-bottom: 7px;
  font-size: 15px;
}

.game-view-caseOpening .case-opening-main > aside > button {
  min-height: 35px;
}

.game-view-caseOpening .case-content {
  min-height: 0;
  padding: 6px 7px;
}

.game-view-caseOpening .case-content > header {
  margin-bottom: 4px;
}

.game-view-caseOpening .case-content > header h3 {
  margin-top: 1px;
  font-size: 9px;
}

.game-view-caseOpening .case-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 4px;
  overflow: hidden;
  padding: 0;
}

.game-view-caseOpening .case-content-grid .case-reward-card {
  min-width: 0;
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-bottom-width: 2px;
}

.game-view-caseOpening .case-content-grid .case-reward-visual {
  width: 34px;
  height: 34px;
}

.game-view-caseOpening .case-content-grid .case-reward-visual b {
  font-size: 17px;
}

.game-view-caseOpening .case-roulette {
  inset: 8px;
}

@media (max-width: 900px) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: min(520px, calc(100dvh - 16px));
    min-height: 340px;
  }

  .game-view-caseOpening .case-opening-stage {
    grid-template-rows: 42px minmax(158px, 1fr) auto;
  }

  .game-view-caseOpening .case-picker {
    height: 42px;
    grid-template-columns: 38px minmax(0, 1fr);
    padding-inline: 4px;
  }

  .game-view-caseOpening .case-picker img {
    width: 38px;
    height: 32px;
  }

  .game-view-caseOpening .case-picker small,
  .game-view-caseOpening .case-picker b {
    font-size: 5.5px;
  }

  .game-view-caseOpening .case-opening-main {
    grid-template-columns: minmax(0, 1fr) 155px;
  }

  .game-view-caseOpening .case-opening-main > aside {
    padding: 9px 10px;
  }

  .game-view-caseOpening .case-content-grid {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
  }

  .game-view-caseOpening .case-content-grid .case-reward-card {
    grid-template-columns: 28px minmax(0, 1fr);
    min-height: 45px;
  }

  .game-view-caseOpening .case-content-grid .case-reward-visual {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 680px) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: calc(100dvh - 8px);
    min-height: 310px;
  }

  .game-view-caseOpening .game-active {
    padding: 5px;
  }

  .game-view-caseOpening .game-active-top {
    min-height: 31px;
    margin-bottom: 3px;
  }

  .game-view-caseOpening .game-active-top .game-active-art {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .game-view-caseOpening .case-opening-stage {
    grid-template-rows: 38px minmax(144px, 1fr) auto;
    gap: 4px;
  }

  .game-view-caseOpening .case-picker-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3px;
    overflow: visible;
  }

  .game-view-caseOpening .case-picker {
    width: auto;
    min-width: 0;
    height: 38px;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 2px;
    padding: 2px;
  }

  .game-view-caseOpening .case-picker img {
    width: 30px;
    height: 27px;
  }

  .game-view-caseOpening .case-picker strong {
    font-size: 6px;
  }

  .game-view-caseOpening .case-picker small {
    font-size: 4.5px;
  }

  .game-view-caseOpening .case-picker b {
    display: none;
  }

  .game-view-caseOpening .case-opening-main {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 120px;
  }

  .game-view-caseOpening .case-opening-showcase {
    min-height: 0;
  }

  .game-view-caseOpening .case-hero-art {
    height: 100%;
    max-height: 170px;
  }

  .game-view-caseOpening .case-opening-main > aside {
    min-height: 0;
    padding: 7px;
    border-top: 0;
    border-left: 1px solid rgba(82, 112, 123, .35);
  }

  .game-view-caseOpening .case-opening-main > aside h3 {
    font-size: 11px;
  }

  .game-view-caseOpening .case-opening-main > aside p {
    display: none;
  }

  .game-view-caseOpening .case-opening-main > aside > strong {
    position: static;
    margin: 3px 0 5px;
    font-size: 11px;
  }

  .game-view-caseOpening .case-opening-main > aside > button {
    min-height: 30px;
    padding: 0 4px;
    font-size: 6px;
  }

  .game-view-caseOpening .case-content {
    padding: 4px;
  }

  .game-view-caseOpening .case-content > header {
    display: none;
  }

  .game-view-caseOpening .case-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 2px;
    overflow: hidden;
  }

  .game-view-caseOpening .case-content-grid .case-reward-card {
    min-width: 0;
    min-height: 36px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 2px;
    padding: 2px;
  }

  .game-view-caseOpening .case-content-grid .case-reward-visual {
    width: 24px;
    height: 24px;
  }

  .game-view-caseOpening .case-content-grid .case-reward-card small,
  .game-view-caseOpening .case-content-grid .case-reward-card em {
    display: none;
  }

  .game-view-caseOpening .case-content-grid .case-reward-card strong {
    font-size: 5.5px;
  }

  .game-view-caseOpening .case-roulette {
    inset: 4px;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: calc(100dvh - 70px);
    min-height: 480px;
  }

  .game-view-caseOpening .case-opening-stage {
    grid-template-rows: 38px minmax(228px, 1fr) auto;
  }

  .game-view-caseOpening .case-picker {
    grid-template-columns: 1fr;
    place-items: center;
  }

  .game-view-caseOpening .case-picker span {
    display: none;
  }

  .game-view-caseOpening .case-picker img {
    width: 44px;
    height: 31px;
  }

  .game-view-caseOpening .case-opening-main {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(140px, 1fr) 82px;
  }

  .game-view-caseOpening .case-hero-art img {
    height: 132px !important;
  }

  .game-view-caseOpening .case-opening-main > aside {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 6px 8px;
    border-top: 1px solid rgba(82, 112, 123, .35);
    border-left: 0;
  }

  .game-view-caseOpening .case-opening-main > aside > small,
  .game-view-caseOpening .case-opening-main > aside h3 {
    grid-column: 1;
  }

  .game-view-caseOpening .case-opening-main > aside > strong {
    grid-column: 1;
  }

  .game-view-caseOpening .case-opening-main > aside > button {
    grid-row: 1 / 4;
    grid-column: 2;
    min-width: 105px;
  }
}

/* CS tarzı kasa açma oyunu */
.game-hub.game-view-caseOpening:not(.is-collapsed) {
  height: min(720px, 76dvh);
}

.game-tile-caseOpening {
  border-color: rgba(104, 193, 255, .36);
  background: radial-gradient(circle at 15% 50%, rgba(72, 189, 255, .14), transparent 38%), linear-gradient(145deg, rgba(27, 45, 59, .92), rgba(17, 29, 40, .98));
}

.game-tile-caseOpening .game-tile-art {
  background: radial-gradient(circle, rgba(65, 205, 255, .24), rgba(10, 27, 38, .92));
  border-color: rgba(91, 213, 255, .42);
}

.game-tile-caseOpening .game-tile-art img {
  transform: scale(1.22);
}

.case-opening-stage {
  --case-accent: #42d69e;
  --case-glow: rgba(66, 214, 158, .2);
  display: grid;
  gap: 12px;
  padding-bottom: 3px;
}

.case-theme-blue { --case-accent: #429cff; --case-glow: rgba(66, 156, 255, .2); }
.case-theme-purple { --case-accent: #b468ff; --case-glow: rgba(180, 104, 255, .2); }
.case-theme-gold { --case-accent: #ffbd3f; --case-glow: rgba(255, 189, 63, .22); }
.case-theme-diamond { --case-accent: #77e9ff; --case-glow: rgba(119, 233, 255, .22); }

.case-picker-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.case-picker {
  display: grid;
  min-width: 0;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  cursor: pointer;
  color: #dce8eb;
  text-align: left;
  background: rgba(13, 29, 38, .84);
  border: 1px solid rgba(79, 108, 120, .5);
  border-radius: 10px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.case-picker:hover,
.case-picker.selected {
  background: linear-gradient(145deg, var(--case-glow), rgba(14, 29, 38, .95));
  border-color: color-mix(in srgb, var(--case-accent) 68%, #314752);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--case-accent) 18%, transparent);
  transform: translateY(-1px);
}

.case-picker:disabled { cursor: wait; opacity: .65; }
.case-picker img { width: 54px; height: 39px; object-fit: contain; filter: drop-shadow(0 5px 5px rgba(0,0,0,.38)); }
.case-picker span { display: grid; min-width: 0; gap: 1px; }
.case-picker small { color: var(--case-accent); font-size: 6px; font-weight: 950; letter-spacing: .08em; }
.case-picker strong { overflow: hidden; color: #f1f7f8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.case-picker b { color: #a8bac0; font-size: 7px; }

.case-opening-main {
  display: grid;
  min-height: 242px;
  grid-template-columns: minmax(0, 1fr) 220px;
  overflow: hidden;
  background: radial-gradient(circle at 38% 52%, var(--case-glow), transparent 38%), linear-gradient(145deg, rgba(7, 18, 27, .97), rgba(13, 25, 34, .98));
  border: 1px solid color-mix(in srgb, var(--case-accent) 30%, #334a55);
  border-radius: 14px;
}

.case-opening-showcase {
  display: grid;
  position: relative;
  min-width: 0;
  min-height: 240px;
  place-items: center;
  overflow: hidden;
}

.case-hero-art {
  display: grid;
  position: relative;
  width: min(570px, 92%);
  height: 220px;
  place-items: center;
}

.case-hero-art > span {
  position: absolute;
  right: 16%;
  bottom: 16px;
  left: 16%;
  height: 24px;
  background: var(--case-accent);
  border-radius: 50%;
  opacity: .18;
  filter: blur(18px);
}

.case-hero-art img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.44));
  animation: case-idle 3s ease-in-out infinite;
}

@keyframes case-idle {
  0%, 100% { transform: translateY(2px) scale(1); }
  50% { transform: translateY(-4px) scale(1.012); }
}

.case-opening-main > aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--case-accent) 8%, rgba(18, 34, 43, .98)), rgba(10, 23, 30, .98));
  border-left: 1px solid rgba(82, 112, 123, .35);
}

.case-opening-main > aside > small { color: var(--case-accent); font-size: 7px; font-weight: 950; letter-spacing: .14em; }
.case-opening-main > aside h3 { margin: 5px 0; color: #f4f9fa; font-size: 18px; }
.case-opening-main > aside p { margin: 0 0 12px; color: #8da1aa; font-size: 8px; line-height: 1.5; }
.case-opening-main > aside > strong { margin-bottom: 10px; color: #f2cf77; font-size: 18px; }
.case-opening-main > aside > strong span { font-size: 9px; }
.case-opening-main > aside > button {
  display: inline-flex;
  min-height: 41px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  color: #061b19;
  font: 950 9px/1 inherit;
  background: linear-gradient(145deg, color-mix(in srgb, var(--case-accent) 88%, white), color-mix(in srgb, var(--case-accent) 78%, #0d6f61));
  border: 1px solid color-mix(in srgb, var(--case-accent) 75%, white);
  border-radius: 10px;
  box-shadow: 0 12px 25px var(--case-glow);
}
.case-opening-main > aside > button:disabled { cursor: wait; opacity: .62; }
.case-opening-main > aside > button .game-svg { width: 15px; height: 15px; }

.case-content {
  padding: 10px;
  background: rgba(9, 22, 29, .75);
  border: 1px solid rgba(67, 96, 108, .46);
  border-radius: 13px;
}
.case-content > header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8px; }
.case-content > header small { color: var(--case-accent); font-size: 6px; font-weight: 950; letter-spacing: .12em; }
.case-content > header h3 { margin: 2px 0 0; color: #eaf2f3; font-size: 11px; }
.case-content > header > span { padding: 4px 7px; color: #8ea3ab; font-size: 7px; background: #132831; border-radius: 999px; }
.case-content-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 6px; }

.case-reward-card {
  --rarity: #75909a;
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px;
  overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--rarity) 10%, #152a33), #0c1d24);
  border: 1px solid color-mix(in srgb, var(--rarity) 42%, #304751);
  border-bottom: 3px solid var(--rarity);
  border-radius: 9px;
}
.case-rarity-uncommon { --rarity: #48d29c; }
.case-rarity-rare { --rarity: #4597ff; }
.case-rarity-epic { --rarity: #b66cff; }
.case-rarity-legendary { --rarity: #ffbc3e; }
.case-reward-visual { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; color: var(--rarity); background: rgba(4, 13, 18, .42); border-radius: 8px; }
.case-reward-visual img { width: 100%; height: 100%; object-fit: contain; }
.case-reward-visual b { font-size: 21px; }
.case-reward-card > div { display: grid; min-width: 0; gap: 2px; }
.case-reward-card small { color: var(--rarity); font-size: 6px; font-weight: 950; letter-spacing: .08em; }
.case-reward-card strong { overflow: hidden; color: #edf4f5; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.case-reward-card em { color: #82979f; font-size: 7px; font-style: normal; }

.case-roulette { position: absolute; inset: 17px 12px; overflow: hidden; background: rgba(3, 12, 18, .72); border: 1px solid rgba(89, 130, 145, .48); border-radius: 12px; }
.case-roulette::before,
.case-roulette::after { position: absolute; z-index: 3; top: 0; bottom: 0; width: 70px; content: ""; pointer-events: none; }
.case-roulette::before { left: 0; background: linear-gradient(90deg, #07131a, transparent); }
.case-roulette::after { right: 0; background: linear-gradient(-90deg, #07131a, transparent); }
.case-roulette-marker { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 2px; background: #ffe29b; box-shadow: 0 0 12px #ffc349; transform: translateX(-1px); }
.case-roulette-marker::before,
.case-roulette-marker::after { position: absolute; left: 50%; width: 0; height: 0; content: ""; border-right: 7px solid transparent; border-left: 7px solid transparent; transform: translateX(-50%); }
.case-roulette-marker::before { top: 0; border-top: 9px solid #ffd064; }
.case-roulette-marker::after { bottom: 0; border-bottom: 9px solid #ffd064; }
.case-roulette-track { display: flex; position: absolute; top: 50%; left: 50%; gap: 10px; will-change: transform; transform: translate(8px, -50%); }
.case-roulette.is-spinning .case-roulette-track { animation: case-roulette-roll 5s cubic-bezier(.08,.63,.12,1) forwards; }
.case-roulette.has-landed .case-roulette-track { transform: translate(calc((var(--case-stop-index) * -136px) - 63px + var(--case-jitter)), -50%); }
@keyframes case-roulette-roll {
  0% { transform: translate(8px, -50%); }
  100% { transform: translate(calc((var(--case-stop-index) * -136px) - 63px + var(--case-jitter)), -50%); }
}
.case-reward-card.is-roulette-item { width: 126px; height: 142px; flex: 0 0 126px; grid-template-columns: 1fr; grid-template-rows: 86px auto; padding: 8px; text-align: center; }
.case-reward-card.is-roulette-item .case-reward-visual { width: 100%; height: 86px; }
.case-reward-card.is-roulette-item .case-reward-visual b { font-size: 35px; }
.case-reward-card.is-roulette-item.is-winner { box-shadow: 0 0 0 2px var(--rarity), 0 0 28px color-mix(in srgb, var(--rarity) 55%, transparent); animation: case-winner-pulse .8s ease-in-out infinite alternate; }
@keyframes case-winner-pulse { to { transform: scale(1.035); } }

.case-win-card { position: absolute; z-index: 8; inset: 26px auto auto 50%; width: min(260px, 70%); padding: 12px; text-align: center; background: rgba(6, 18, 25, .96); border: 1px solid var(--rarity); border-radius: 13px; box-shadow: 0 18px 45px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--rarity) 25%, transparent); transform: translateX(-50%); animation: game-result-in .35s ease both; }
.case-win-card > span { color: var(--rarity); font-size: 7px; font-weight: 950; letter-spacing: .15em; }
.case-win-card > div { display: grid; width: 70px; height: 58px; margin: 4px auto; place-items: center; }
.case-win-card img { width: 100%; height: 100%; object-fit: contain; }
.case-win-card b { color: var(--rarity); font-size: 34px; }
.case-win-card h3 { margin: 3px 0; color: #f6fafb; font-size: 13px; }
.case-win-card p { margin: 0; color: #8ca0a8; font-size: 7px; }

/* Site sahibi kasa editörü */
.case-admin-section { grid-column: 1 / -1; margin-top: 7px; padding: 10px; background: rgba(8, 20, 28, .84); border: 1px solid rgba(90, 141, 160, .4); border-radius: 12px; }
.case-admin-section > header { margin-bottom: 9px; }
.case-admin-section > header span { color: #72e4ca; font-size: 7px; font-weight: 950; letter-spacing: .12em; }
.case-admin-section > header h3 { margin: 3px 0; color: #eef7f6; font-size: 13px; }
.case-admin-section > header p { margin: 0; color: #8399a2; font-size: 8px; }
.case-admin-grid { display: grid; gap: 9px; }
.case-admin-card { --case-accent: #42d69e; --case-glow: rgba(66,214,158,.2); padding: 9px; background: linear-gradient(145deg, var(--case-glow), rgba(15,31,39,.95) 38%); border: 1px solid color-mix(in srgb, var(--case-accent) 38%, #344b55); border-radius: 11px; }
.case-admin-card > header { display: grid; grid-template-columns: 80px minmax(140px, 1fr) 170px; align-items: center; gap: 9px; }
.case-admin-card > header > img { width: 80px; height: 55px; object-fit: contain; }
.case-admin-card > header > div { display: grid; gap: 3px; }
.case-admin-card > header > div span,
.case-admin-card > header > label > span { color: var(--case-accent); font-size: 6px; font-weight: 950; letter-spacing: .1em; }
.case-admin-card > header > div input { min-width: 0; padding: 6px 8px; color: #edf6f7; font: 850 11px/1 inherit; background: #0b1d25; border: 1px solid #38505a; border-radius: 7px; }
.case-admin-card > header > label { display: grid; gap: 3px; }
.case-admin-rewards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; margin-top: 8px; }
.case-admin-reward { --rarity: #75909a; display: grid; min-width: 0; grid-template-columns: 37px minmax(0,1fr) 86px 28px; align-items: center; gap: 6px; padding: 5px; background: rgba(6,18,24,.72); border: 1px solid color-mix(in srgb, var(--rarity) 38%, #304650); border-left: 3px solid var(--rarity); border-radius: 8px; }
.case-admin-reward-icon { display: grid; width: 37px; height: 34px; place-items: center; overflow: hidden; color: var(--rarity); font-size: 17px; background: rgba(255,255,255,.03); border-radius: 6px; }
.case-admin-reward-icon img { width: 100%; height: 100%; object-fit: contain; }
.case-admin-reward > div { display: grid; min-width: 0; gap: 2px; }
.case-admin-reward strong { overflow: hidden; color: #e8f1f2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.case-admin-reward small { color: #8298a1; font-size: 6px; }
.case-admin-reward label { display: grid; gap: 2px; color: #7f959e; font-size: 6px; }
.case-admin-reward input { min-width: 0; width: 100%; padding: 5px; color: #ecf5f5; font: 800 8px/1 inherit; background: #0a1a21; border: 1px solid #334b54; border-radius: 6px; }
.case-admin-reward > button { display: grid; width: 28px; height: 28px; place-items: center; cursor: pointer; color: #ef8998; background: rgba(161,42,62,.16); border: 1px solid rgba(222,82,103,.32); border-radius: 7px; }
.case-admin-reward > button .game-svg { width: 13px; height: 13px; }
.case-admin-add { display: grid; grid-template-columns: minmax(150px,1fr) auto 8px 100px auto; gap: 6px; margin-top: 7px; }
.case-admin-add select,
.case-admin-add input { min-width: 0; height: 32px; padding: 0 8px; color: #dfecee; font: 750 8px/1 inherit; background: #0a1c23; border: 1px solid #334b55; border-radius: 7px; }
.case-admin-add button { min-height: 32px; padding: 0 9px; cursor: pointer; color: #08231d; font: 900 7px/1 inherit; background: var(--case-accent); border: 0; border-radius: 7px; }

@media (max-width: 900px) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) { height: min(780px, 82dvh); }
  .case-picker { grid-template-columns: 44px minmax(0,1fr); padding-inline: 4px; }
  .case-picker img { width: 44px; }
  .case-picker b { display: none; }
  .case-opening-main { grid-template-columns: minmax(0,1fr) 180px; }
  .case-admin-rewards { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) { height: min(820px, 86dvh); }
  .game-view-caseOpening .game-active { padding: 7px; }
  .case-opening-stage { gap: 7px; }
  .case-picker-row { display: flex; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; scroll-snap-type: x proximity; }
  .case-picker-row::-webkit-scrollbar { display: none; }
  .case-picker { min-width: 116px; flex: 0 0 116px; grid-template-columns: 43px minmax(0,1fr); scroll-snap-align: start; }
  .case-opening-main { min-height: 360px; grid-template-columns: 1fr; }
  .case-opening-showcase { min-height: 225px; }
  .case-opening-main > aside { min-height: 128px; padding: 11px 13px; border-top: 1px solid rgba(82,112,123,.35); border-left: 0; }
  .case-opening-main > aside h3 { font-size: 14px; }
  .case-opening-main > aside p { margin-bottom: 7px; }
  .case-opening-main > aside > strong { position: absolute; right: 18px; margin-top: 5px; font-size: 14px; }
  .case-opening-main > aside > button { min-height: 35px; }
  .case-hero-art { height: 205px; }
  .case-content-grid { display: flex; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
  .case-content-grid .case-reward-card { min-width: 132px; flex: 0 0 132px; }
  .case-roulette { inset: 12px 6px; }
  .case-win-card { top: 18px; }
  .case-admin-card > header { grid-template-columns: 60px minmax(0,1fr); }
  .case-admin-card > header > img { width: 60px; height: 45px; }
  .case-admin-card > header > label { grid-column: 1 / -1; }
  .case-admin-reward { grid-template-columns: 34px minmax(0,1fr) 74px 28px; }
  .case-admin-add { grid-template-columns: 1fr auto; }
  .case-admin-add > span { display: none; }
  .case-admin-add select { grid-column: 1 / -1; }
}

/* Kesin UI düzeltmesi: katılımcı araçları iki düzenli satırda kalır. */
.voice-dock:not(.collapsed) .voice-user .voice-user-permissions,
.voice-dock:not(.collapsed).has-cameras .voice-user .voice-user-permissions,
.voice-dock:not(.collapsed):not(.has-cameras) .voice-user .voice-user-permissions {
  display: grid !important;
  grid-template: repeat(2, 28px) / repeat(3, 28px) !important;
  grid-auto-flow: row !important;
  width: 102px !important;
  min-width: 102px !important;
  max-width: 102px !important;
  gap: 4px 5px !important;
  padding: 5px !important;
  align-items: center !important;
  justify-content: center !important;
}

.voice-dock:not(.collapsed) .voice-user .voice-user-permissions:empty {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.voice-dock:not(.collapsed) .voice-user .voice-user-permissions > button.voice-permission-button.icon-action {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
}

/* Küçük ses balonunda yalnızca bağlantı göstergesi görünür. */
.voice-dock.collapsed .voice-head-manage,
.voice-dock.collapsed .voice-head-leave,
.voice-dock.collapsed #voice-collapse,
.voice-dock.collapsed .voice-dock-head > div {
  display: none !important;
}

/* Açılır DM: gönderen sağda, karşı taraf solda. */
.floating-dm-messages .message-row:not(.own) {
  justify-content: flex-start !important;
}

.floating-dm-messages .message-row.own {
  justify-content: flex-end !important;
}

.channel-room-entry { display: grid; min-width: 0; }
.channel-voice-preview {
  display: grid;
  min-width: 0;
  grid-template-columns: 17px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 7px 37px;
  color: #78909a;
  background: transparent;
  border: 0;
}
.channel-voice-preview:hover { color: #dffbf3; }
.channel-voice-preview > .ui-icon { width: 13px; height: 13px; color: #3fd9b1; }
.channel-voice-preview > span { display: flex; min-width: 0; gap: 5px; overflow: hidden; }
.channel-voice-preview i { overflow: hidden; font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.channel-voice-preview i.speaking { color: #46e4b9; }
.channel-voice-preview > b { display: grid; min-width: 18px; height: 18px; place-items: center; font-size: 8px; background: #18303a; border-radius: 999px; }

.voice-preview-list { display: grid; max-height: min(52vh, 430px); gap: 7px; overflow: auto; }
.voice-preview-user { display: grid; grid-template-columns: 42px minmax(0, 1fr) 34px; align-items: center; gap: 9px; padding: 8px; background: #13262f; border: 1px solid #29434d; border-radius: 11px; }
.voice-preview-user > span { display: grid; min-width: 0; gap: 2px; }
.voice-preview-user strong { overflow: hidden; color: #edf7f7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.voice-preview-user small { color: #6f8b95; font-size: 8px; }
.voice-preview-user > button { display: grid; width: 34px; height: 34px; place-items: center; color: #48dfb9; background: rgba(43, 220, 175, .1); border: 1px solid rgba(43, 220, 175, .3); border-radius: 9px; }
.voice-preview-user > button .ui-icon { width: 15px; height: 15px; }
.voice-preview-empty { display: grid; min-height: 170px; place-content: center; place-items: center; gap: 6px; color: #78919b; text-align: center; }
.voice-preview-empty .ui-icon { width: 28px; height: 28px; color: #3fd9b1; }
.voice-preview-empty strong { color: #e9f5f5; }

.custom-role-panel { padding: 14px; margin: 12px 0; background: #101f27; border: 1px solid #2a424c; border-radius: 15px; }
.custom-role-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.custom-role-panel > header span { color: #45ddb7; font-size: 9px; font-weight: 900; letter-spacing: .7px; }
.custom-role-panel > header h3 { margin: 3px 0; color: #f0f7f8; font-size: 17px; }
.custom-role-panel > header p { margin: 0; color: #8299a2; font-size: 10px; }
.custom-role-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.custom-role-list > span { display: grid; grid-template-columns: auto auto; gap: 1px 6px; padding: 7px 10px; color: var(--custom-role-color); background: #142730; border: 1px solid color-mix(in srgb, var(--custom-role-color) 35%, #29414b); border-radius: 10px; }
.custom-role-list > span > button { grid-column: 1 / -1; margin-top: 5px; padding: 5px 8px; color: #ff9caf; font-size: 8px; font-weight: 800; background: rgba(255, 85, 116, .08); border: 1px solid rgba(255, 85, 116, .28); border-radius: 7px; cursor: pointer; }
.custom-role-list i { grid-row: 1 / 3; align-self: center; font-style: normal; }
.custom-role-list b { font-size: 10px; }
.custom-role-list small { color: #718a94; font-size: 7px; }
.custom-role-list > p { margin: 0; color: #718a94; font-size: 9px; }

@media (max-width: 680px) {
  .custom-role-panel > header { align-items: stretch; flex-direction: column; }
  .custom-role-panel > header button { width: 100%; }
}

/* Independent screen + camera feeds and ephemeral video messages. */
.remote-video-wrap > #remote-screen-video {
  z-index: 2;
  object-fit: contain !important;
  background: #020609;
  cursor: zoom-in;
}

.remote-video-wrap > #remote-video.call-camera-pip {
  z-index: 3;
  inset: auto 22px 150px auto;
  width: min(250px, 24vw);
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  background: #081218;
  border: 2px solid rgba(43, 220, 175, 0.82);
  border-radius: 16px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.48);
}

.local-screen-video {
  position: absolute;
  z-index: 5;
  top: 86px;
  left: 22px;
  width: min(260px, 25vw);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #02070a;
  border: 1px solid rgba(43, 220, 175, 0.64);
  border-radius: 14px;
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.44);
}

.voice-user-media > video[data-voice-screen],
.voice-user-media > video[data-voice-camera] {
  display: none !important;
}

.voice-user.has-live-camera:not(.has-live-screen) .voice-user-media > video[data-voice-camera],
.voice-user.has-live-screen .voice-user-media > video[data-voice-screen] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.voice-user.has-live-screen .voice-user-media > video[data-voice-screen] {
  z-index: 2;
  object-fit: contain !important;
  background: #020609 !important;
}

.voice-user.has-live-screen.has-live-camera .voice-user-media > video[data-voice-camera] {
  z-index: 4;
  inset: auto 8px 8px auto;
  display: block !important;
  width: clamp(76px, 28%, 150px);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  border: 2px solid #2bdcaf;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.46);
}

.voice-screen-badge {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 7px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  color: #c9fff2;
  background: rgba(3, 18, 17, 0.78);
  border: 1px solid rgba(43, 220, 175, 0.42);
  border-radius: 999px;
  font-size: 7px;
  font-weight: 850;
  backdrop-filter: blur(8px);
}

.voice-screen-badge .ui-icon {
  width: 10px;
  height: 10px;
}

.voice-user.has-live-screen .voice-screen-badge {
  display: inline-flex;
}

.message-media.video-media {
  position: relative;
  width: min(520px, 100%);
  background: #02070a;
}

.message-media.video-media video {
  display: block;
  width: 100%;
  max-height: min(520px, 65vh);
  object-fit: contain;
  background: #020609;
}

/* Oda duvar kağıtları: oda ayarından seçilir ve bütün cihazlarda aynı uygulanır. */
.messages-column {
  --room-wallpaper-base: #071217;
  --room-wallpaper-glow-a: rgba(0, 168, 132, 0.08);
  --room-wallpaper-glow-b: rgba(53, 92, 112, 0.08);
  background-color: var(--room-wallpaper-base) !important;
  background-image:
    radial-gradient(circle at 16% 8%, var(--room-wallpaper-glow-a), transparent 36%),
    radial-gradient(circle at 88% 86%, var(--room-wallpaper-glow-b), transparent 38%) !important;
}

.messages-column::before {
  opacity: 0.5 !important;
  background-image: url("/assets/chat-doodle.svg") !important;
  background-position: center top !important;
  background-size: 270px 270px !important;
}

.messages-column[data-room-background="doodle"] {
  --room-wallpaper-base: #040c10;
  --room-wallpaper-glow-a: rgba(0, 91, 79, 0.035);
  --room-wallpaper-glow-b: rgba(17, 44, 52, 0.04);
}

.messages-column[data-room-background="aurora"] {
  --room-wallpaper-base: #071218;
  background-image: none !important;
}

.messages-column[data-room-background="ocean"] {
  --room-wallpaper-base: #06131d;
  background-image: none !important;
}

.messages-column[data-room-background="sunset"] {
  --room-wallpaper-base: #160d17;
  background-image: none !important;
}

.messages-column[data-room-background="night"] {
  --room-wallpaper-base: #070c16;
  background-image: none !important;
}

.messages-column[data-room-background="aurora"]::before,
.messages-column[data-room-background="ocean"]::before,
.messages-column[data-room-background="sunset"]::before,
.messages-column[data-room-background="night"]::before {
  opacity: 1 !important;
  background-position: center, center top, center !important;
  background-repeat: no-repeat, repeat, no-repeat !important;
  background-size: auto, 270px 270px, cover !important;
  background-blend-mode: normal, soft-light, normal;
}

.messages-column[data-room-background="aurora"]::before {
  background-image:
    linear-gradient(180deg, rgba(2, 8, 12, 0.68), rgba(2, 8, 12, 0.82)),
    url("/assets/chat-doodle.svg"),
    url("/assets/wallpapers/wallpaper-aurora.webp") !important;
}

.messages-column[data-room-background="ocean"]::before {
  background-image:
    linear-gradient(180deg, rgba(2, 8, 12, 0.68), rgba(2, 8, 12, 0.82)),
    url("/assets/chat-doodle.svg"),
    url("/assets/wallpapers/wallpaper-ocean.webp") !important;
}

.messages-column[data-room-background="sunset"]::before {
  background-image:
    linear-gradient(180deg, rgba(5, 5, 10, 0.72), rgba(5, 5, 10, 0.84)),
    url("/assets/chat-doodle.svg"),
    url("/assets/wallpapers/wallpaper-sunset.webp") !important;
}

.messages-column[data-room-background="night"]::before {
  background-image:
    linear-gradient(180deg, rgba(2, 7, 11, 0.62), rgba(2, 7, 11, 0.78)),
    url("/assets/chat-doodle.svg"),
    url("/assets/wallpapers/wallpaper-night.webp") !important;
}

.messages-column[data-room-background="minimal"] {
  --room-wallpaper-base: #04090c;
  --room-wallpaper-glow-a: rgba(14, 37, 42, 0.022);
  --room-wallpaper-glow-b: rgba(8, 24, 28, 0.018);
}

.messages-column[data-room-background="minimal"]::before {
  opacity: 0.025 !important;
  background-size: 300px 300px !important;
}

.room-background-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  background: #101c23;
  border: 1px solid #2a3d48;
  border-radius: 12px;
}

.room-background-picker-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.room-background-picker-heading span {
  color: #d8e4e9;
  font-size: 10px;
  font-weight: 850;
}

.room-background-picker-heading small {
  color: #7f96a1;
  font-size: 8px;
  font-weight: 650;
}

.room-background-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.room-background-choice {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 7px;
  color: #cbd9df;
  text-align: left;
  background: #15232b;
  border: 1px solid #304550;
  border-radius: 10px;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.room-background-choice:hover {
  background: #192a33;
  border-color: #43616c;
  transform: translateY(-1px);
}

.room-background-choice.active {
  color: #effffb;
  background: rgba(0, 168, 132, 0.13);
  border-color: #18c9a3;
  box-shadow: 0 0 0 1px rgba(24, 201, 163, 0.1);
}

.room-background-choice > i {
  display: block;
  width: 52px;
  height: 38px;
  background-color: #061116;
  background-image: url("/assets/chat-doodle.svg");
  background-position: center;
  background-size: 72px 72px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
}

.room-background-choice [data-background-preview="aurora"] {
  background-color: #071218;
  background-image: linear-gradient(rgba(2, 8, 12, 0.52), rgba(2, 8, 12, 0.68)), url("/assets/wallpapers/wallpaper-aurora.webp");
  background-size: cover;
}

.room-background-choice [data-background-preview="ocean"] {
  background-color: #06131d;
  background-image: linear-gradient(rgba(2, 8, 12, 0.52), rgba(2, 8, 12, 0.68)), url("/assets/wallpapers/wallpaper-ocean.webp");
  background-size: cover;
}

.room-background-choice [data-background-preview="sunset"] {
  background-color: #160d17;
  background-image: linear-gradient(rgba(5, 5, 10, 0.58), rgba(5, 5, 10, 0.72)), url("/assets/wallpapers/wallpaper-sunset.webp");
  background-size: cover;
}

.room-background-choice [data-background-preview="night"] {
  background-color: #070c16;
  background-image: linear-gradient(rgba(2, 7, 11, 0.44), rgba(2, 7, 11, 0.62)), url("/assets/wallpapers/wallpaper-night.webp");
  background-size: cover;
}

.room-background-choice [data-background-preview="minimal"] {
  background-color: #04090c;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.012), transparent);
}

.room-background-choice > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.room-background-choice > span strong {
  overflow: hidden;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-background-choice > span small {
  overflow: hidden;
  color: #7f96a1;
  font-size: 7px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-background-choice > b {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: transparent;
  background: #0b171d;
  border: 1px solid #344a54;
  border-radius: 999px;
}

.room-background-choice.active > b {
  color: #06110e;
  background: #25d6ad;
  border-color: #25d6ad;
}

.room-background-choice > b .ui-icon {
  width: 11px;
  height: 11px;
}

@media (max-width: 900px) {
  .room-background-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .messages-column::before {
    background-size: 235px 235px !important;
  }

  .messages-column[data-room-background="aurora"]::before,
  .messages-column[data-room-background="ocean"]::before,
  .messages-column[data-room-background="sunset"]::before,
  .messages-column[data-room-background="night"]::before {
    background-size: auto, 235px 235px, cover !important;
  }

  .room-background-picker-heading {
    display: grid;
    gap: 3px;
  }

  .room-background-options {
    grid-template-columns: 1fr;
  }
}

.message-media.media-load-failed {
  min-height: 84px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-2));
}

.media-load-error {
  color: var(--danger);
  font-size: 12px;
  font-weight: 800;
}

.video-capture-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(4, 10, 14, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
}

.video-review-shell video {
  display: block;
  width: 100%;
  max-height: min(62vh, 520px);
  object-fit: contain;
  background: #020609;
}

@media (max-width: 680px) {
  .remote-video-wrap > #remote-video.call-camera-pip {
    right: 10px;
    bottom: 142px;
    width: 112px;
    border-radius: 12px;
  }

  .local-screen-video {
    top: 78px;
    left: 10px;
    width: 118px;
    border-radius: 11px;
  }

  .voice-user.has-live-screen.has-live-camera .voice-user-media > video[data-voice-camera] {
    right: 6px;
    bottom: 6px;
    width: 30%;
    min-width: 70px;
    border-radius: 8px;
  }

  .message-media.video-media video {
    max-height: 58vh;
  }
}

/* Screen sharing: camera and desktop sources share one efficient WebRTC video
   sender. Desktop content is never cropped and remains readable on phones. */
#call-screen.active,
#voice-screen.active {
  color: #061914 !important;
  background: linear-gradient(135deg, #35e2bb, #00b58c) !important;
  border-color: #2bdcaf !important;
  box-shadow: 0 0 0 3px rgba(43, 220, 175, 0.12) !important;
}

.local-video.screen-preview {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #02070a;
  transform: none;
}

.call-overlay.remote-screen-sharing .remote-video-wrap > video,
.call-overlay .screen-share-video {
  object-fit: contain !important;
  background: #020609;
}

.voice-dock .voice-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.voice-user.is-screen-share {
  grid-column: 1 / -1 !important;
  min-height: clamp(190px, 34vh, 440px) !important;
  background: #070d12 !important;
  border-color: rgba(43, 220, 175, 0.48) !important;
}

.voice-user.is-screen-share .voice-user-media,
.voice-user.is-screen-share video,
.voice-camera-pip.is-screen-share video {
  object-fit: contain !important;
  background: #020609 !important;
}

.voice-user.is-screen-share .voice-camera-badge {
  color: #071b16;
  background: #35dfb4;
}

@media (max-width: 680px) {
  .voice-dock .voice-actions {
    position: sticky !important;
    bottom: 0;
    z-index: 8;
    gap: 5px !important;
    padding: 7px !important;
    background: rgba(12, 21, 27, 0.97);
  }

  .voice-dock .voice-actions button {
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 5px 2px !important;
  }

  .voice-dock .voice-actions button span {
    max-width: 100%;
    overflow: hidden;
    font-size: 6.5px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .voice-user.is-screen-share {
    min-height: min(42vh, 330px) !important;
  }

  .local-video.screen-preview {
    width: min(150px, 42vw);
    aspect-ratio: 16 / 9;
  }
}

/* Davetli oyunlar */
.multiplayer-home {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(70, 190, 166, 0.22);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(18, 55, 58, 0.72), rgba(21, 32, 43, 0.92));
}

.multiplayer-home > header,
.multiplayer-home > header > div,
.multiplayer-tile,
.multiplayer-invite,
.multiplayer-lobby-lead,
.duel-player,
.multiplayer-turn,
.multiplayer-result {
  display: flex;
  align-items: center;
}

.multiplayer-home > header {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.multiplayer-home > header > div { gap: 10px; }
.multiplayer-home > header > div > span,
.multiplayer-lobby-lead > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #43dfbc;
  border: 1px solid rgba(67, 223, 188, 0.3);
  border-radius: 12px;
  background: rgba(13, 112, 95, 0.2);
}

.multiplayer-home > header strong,
.multiplayer-home > header small { display: block; }
.multiplayer-home > header strong { color: #63e5c6; font-size: 11px; letter-spacing: 0.12em; }
.multiplayer-home > header small { margin-top: 3px; color: #91a9b2; font-size: 10px; }
.multiplayer-home > header > b {
  padding: 5px 8px;
  color: #c8fff1;
  font-size: 9px;
  letter-spacing: 0.08em;
  border: 1px solid rgba(67, 223, 188, 0.26);
  border-radius: 999px;
  background: rgba(21, 124, 105, 0.18);
}

.multiplayer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.multiplayer-tile {
  min-width: 0;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(88, 128, 143, 0.3);
  border-radius: 13px;
  background: rgba(10, 25, 32, 0.72);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.multiplayer-tile:hover {
  border-color: rgba(67, 223, 188, 0.48);
  background: rgba(15, 46, 49, 0.88);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.multiplayer-tile > span,
.multiplayer-art {
  display: grid;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  place-items: center;
  color: #65e8ca;
  border: 1px solid rgba(83, 221, 190, 0.3);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(31, 142, 120, 0.31), rgba(37, 67, 91, 0.32));
}

.multiplayer-tile > div { min-width: 0; flex: 1; }
.multiplayer-tile strong { display: block; color: #efffff; font-size: 11px; }
.multiplayer-tile p { margin: 3px 0 0; color: #8ea8b2; font-size: 9px; line-height: 1.35; }
.multiplayer-tile > button,
.multiplayer-invite button,
.word-chain-input button,
.multiplayer-result button {
  min-height: 34px;
  color: #dffff7;
  font-weight: 800;
  font-size: 9px;
  border: 1px solid rgba(67, 223, 188, 0.36);
  border-radius: 9px;
  background: rgba(15, 119, 100, 0.24);
}
.multiplayer-tile > button { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; }
.multiplayer-tile .game-svg,
.multiplayer-home .game-svg { width: 17px; height: 17px; }

.multiplayer-invite {
  gap: 11px;
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid rgba(148, 114, 255, 0.46);
  border-radius: 13px;
  background: linear-gradient(100deg, rgba(82, 56, 144, 0.3), rgba(14, 44, 48, 0.9));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.multiplayer-invite > span { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; color: #bba5ff; border-radius: 11px; background: rgba(105, 74, 183, 0.25); }
.multiplayer-invite > div:nth-child(2) { min-width: 0; flex: 1; }
.multiplayer-invite small,
.multiplayer-invite strong,
.multiplayer-invite p { display: block; margin: 0; }
.multiplayer-invite small { color: #a893f3; font-size: 8px; letter-spacing: 0.1em; }
.multiplayer-invite strong { margin-top: 2px; color: #fff; font-size: 12px; }
.multiplayer-invite p { color: #9fb1ba; font-size: 9px; }
.multiplayer-invite > div:last-child { display: flex; gap: 6px; }
.multiplayer-invite button { padding: 0 11px; }
.multiplayer-invite button:last-child { color: #05241e; background: #42d9b6; }

.multiplayer-lobby,
.multiplayer-match {
  min-height: 260px;
  padding: 14px;
  border: 1px solid rgba(68, 112, 126, 0.33);
  border-radius: 16px;
  background: rgba(9, 24, 31, 0.87);
}
.multiplayer-lobby-lead { gap: 12px; margin-bottom: 13px; }
.multiplayer-lobby-lead small { color: #52d8b9; font-size: 8px; letter-spacing: 0.12em; }
.multiplayer-lobby-lead h3 { margin: 2px 0; color: #f4ffff; font-size: 16px; }
.multiplayer-lobby-lead p { margin: 0; color: #8ca5af; font-size: 10px; }
.multiplayer-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow: auto; }
.multiplayer-people > button {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 54px;
  gap: 9px;
  padding: 8px;
  text-align: left;
  border: 1px solid rgba(67, 104, 117, 0.35);
  border-radius: 12px;
  background: #12232b;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.multiplayer-people > button:hover { border-color: rgba(67, 223, 188, 0.55); background: #16343a; }
.multiplayer-people > button > span,
.duel-player > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  color: #061f1a;
  font-weight: 900;
  border-radius: 11px;
  background: var(--player-color, #48d9bb);
}
.multiplayer-people > button > div { min-width: 0; flex: 1; }
.multiplayer-people strong,
.multiplayer-people small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multiplayer-people strong { color: #eafffa; font-size: 10px; }
.multiplayer-people small { margin-top: 3px; color: #78959f; font-size: 8px; }
.multiplayer-people .game-svg { width: 15px; color: #5bdcbc; }
.multiplayer-empty { display: grid; min-height: 120px; grid-column: 1 / -1; place-items: center; place-content: center; gap: 5px; color: #78939d; text-align: center; }
.multiplayer-empty .game-svg { width: 28px; }
.multiplayer-empty strong { color: #d8e8e8; }

.multiplayer-match > header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid rgba(77, 116, 130, 0.25); }
.duel-player { min-width: 0; gap: 8px; }
.duel-player:last-child { flex-direction: row-reverse; text-align: right; }
.duel-player > span { color: #fff; background: linear-gradient(145deg, #8763f4, #4f42bb); }
.duel-player:last-child > span { background: linear-gradient(145deg, #ff668a, #bf3a68); }
.duel-player small,
.duel-player strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel-player small { color: #76939d; font-size: 8px; }
.duel-player strong { color: #eafffb; font-size: 10px; }
.duel-status { min-width: 132px; text-align: center; }
.duel-status > * { display: block; }
.duel-status small { color: #51dbbc; font-size: 8px; letter-spacing: 0.11em; }
.duel-status strong { margin: 3px 0; color: #fff; font-size: 13px; }
.duel-status span { color: #6f8a94; font-size: 8px; }
.multiplayer-board-wrap { display: grid; min-height: 230px; place-items: center; padding: 16px 8px; }

.tic-board { display: grid; width: min(270px, 88vw); aspect-ratio: 1; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.tic-board button { color: #56ddbd; font-size: clamp(28px, 5vw, 48px); font-weight: 900; border: 1px solid rgba(80, 133, 145, 0.42); border-radius: 13px; background: #142832; }
.tic-board button.mark-O { color: #ff7899; }
.tic-board button:not(:disabled):hover { border-color: #59dfc0; background: #19363b; }

.connect-board { display: grid; width: min(390px, 92vw); aspect-ratio: 7 / 6; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 8px; border: 1px solid #297b78; border-radius: 15px; background: linear-gradient(155deg, #155b62, #132f43); }
.connect-board button { display: grid; min-width: 0; padding: 0; place-items: center; border: 0; background: transparent; }
.connect-board i { width: 84%; aspect-ratio: 1; border: 1px solid rgba(102, 155, 166, 0.45); border-radius: 50%; background: #091c24; box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45); }
.connect-board .disc-R i { border-color: #ff6888; background: #f04a73; box-shadow: inset 0 3px 8px rgba(255, 255, 255, 0.25); }
.connect-board .disc-Y i { border-color: #ffd563; background: #eebd38; box-shadow: inset 0 3px 8px rgba(255, 255, 255, 0.25); }

.target31-board { width: min(380px, 92vw); padding: 22px; text-align: center; border: 1px solid rgba(65, 221, 186, 0.35); border-radius: 22px; background: radial-gradient(circle at 50% 30%, rgba(29, 151, 128, 0.24), rgba(12, 27, 35, 0.94) 65%); }
.target31-board > span { color: #5bdfc0; font-size: 9px; letter-spacing: 0.15em; }
.target31-board > strong { display: block; margin: 8px 0 14px; color: #fff; font-size: clamp(58px, 10vw, 86px); line-height: 1; text-shadow: 0 0 28px rgba(54, 218, 183, 0.28); }
.target31-board > div { display: flex; justify-content: center; gap: 9px; }
.target31-board button { width: 58px; height: 46px; color: #dffff6; font-weight: 900; border: 1px solid rgba(68, 220, 188, 0.38); border-radius: 12px; background: rgba(35, 134, 115, 0.25); }
.target31-board > small { display: block; margin-top: 12px; color: #7897a0; }

.word-chain-board { width: min(650px, 100%); }
.word-chain-board > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border: 1px solid rgba(76, 121, 134, 0.32); border-radius: 11px; background: #13252d; }
.word-chain-board > header span { color: #87a2ab; font-size: 9px; }
.word-chain-board > header strong { color: #54dfbe; font-size: 22px; }
.word-chain-list { display: flex; min-height: 90px; flex-wrap: wrap; align-content: center; gap: 7px; padding: 12px 0; }
.word-chain-list > span { padding: 7px 10px; color: #afc2c7; font-size: 10px; border: 1px solid rgba(76, 113, 126, 0.32); border-radius: 999px; background: #11242c; }
.word-chain-list > span.latest { color: #062a22; border-color: #4de0bf; background: #4de0bf; }
.word-chain-list > small { margin: auto; color: #718c96; }
.word-chain-input { display: flex; gap: 7px; }
.word-chain-input input { min-width: 0; min-height: 44px; flex: 1; padding: 0 13px; color: #effffc; font-size: 16px; border: 1px solid rgba(78, 126, 140, 0.38); border-radius: 11px; outline: none; background: #142831; }
.word-chain-input input:focus { border-color: #4adcb9; box-shadow: 0 0 0 3px rgba(74, 220, 185, 0.11); }
.word-chain-input button { display: inline-flex; align-items: center; gap: 6px; padding: 0 15px; }

.multiplayer-turn,
.multiplayer-result { min-height: 48px; gap: 9px; padding-top: 11px; border-top: 1px solid rgba(77, 116, 130, 0.25); }
.multiplayer-turn i { width: 8px; height: 8px; border-radius: 50%; background: #758d95; }
.multiplayer-turn.is-mine i { background: #48dcbc; box-shadow: 0 0 0 5px rgba(72, 220, 188, 0.1); }
.multiplayer-turn span { flex: 1; color: #a5b8bd; font-size: 9px; }
.multiplayer-turn button { min-height: 32px; padding: 0 10px; color: #ff8ca5; font-size: 9px; border: 1px solid rgba(255, 88, 126, 0.3); border-radius: 8px; background: rgba(106, 31, 52, 0.2); }
.multiplayer-result { justify-content: space-between; }
.multiplayer-result strong,
.multiplayer-result small { display: block; }
.multiplayer-result strong { color: #fff; font-size: 12px; }
.multiplayer-result small { margin-top: 3px; color: #879da5; font-size: 9px; }
.multiplayer-result button { padding: 0 13px; }

/* Animasyon sırasında bütün paneli yeniden boyamadan kararlı katmanlar kullan. */
.game-stage-shell,
.slot-reels,
.dice-wrap,
.lottery-machine,
.wheel-stage,
.treasure-stage,
.color-stage {
  contain: layout paint;
}
.slot-reel,
.slot-reel-track,
.dice-face,
.lottery-ball,
.lucky-wheel,
.flip-coin,
.number-card,
.treasure-chest,
.color-panel {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.slot-reel-track,
.dice-wrap.is-rolling .dice-face,
.lucky-wheel.is-spinning,
.flip-coin.is-flipping,
.number-card.is-flipping {
  will-change: transform;
}

@media (max-width: 1050px) {
  .multiplayer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multiplayer-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .multiplayer-home { padding: 10px; border-radius: 13px; }
  .multiplayer-home > header { align-items: flex-start; }
  .multiplayer-home > header > b { display: none; }
  .multiplayer-grid,
  .multiplayer-people { grid-template-columns: 1fr; }
  .multiplayer-tile { flex-wrap: wrap; }
  .multiplayer-tile > button { width: 100%; min-height: 42px; justify-content: center; }
  .multiplayer-invite { align-items: flex-start; flex-wrap: wrap; }
  .multiplayer-invite > div:last-child { width: 100%; }
  .multiplayer-invite button { min-height: 42px; flex: 1; }
  .multiplayer-lobby,
  .multiplayer-match { min-height: 0; padding: 10px; }
  .multiplayer-match > header { grid-template-columns: minmax(0, 1fr) minmax(92px, auto) minmax(0, 1fr); gap: 6px; }
  .duel-player { display: block; text-align: left; }
  .duel-player:last-child { display: block; text-align: right; }
  .duel-player > span { width: 31px; height: 31px; margin-bottom: 4px; }
  .duel-player:last-child > span { margin-left: auto; }
  .duel-status { min-width: 0; }
  .duel-status strong { font-size: 11px; }
  .multiplayer-board-wrap { min-height: 205px; padding: 12px 0; }
  .tic-board { width: min(245px, 78vw); }
  .connect-board { width: min(350px, 88vw); gap: 3px; padding: 6px; }
  .word-chain-input { flex-direction: column; }
  .word-chain-input button { min-height: 44px; justify-content: center; }
  .multiplayer-result { align-items: stretch; flex-direction: column; }
  .multiplayer-result button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .multiplayer-tile,
  .multiplayer-people > button { transition-duration: 1ms; }
}

/* Canlı radyo sırası */
.radio-queue {
  display: grid;
  gap: 10px;
  padding: 12px;
  margin-top: 12px;
  background: rgba(8, 22, 28, 0.72);
  border: 1px solid rgba(59, 105, 116, 0.42);
  border-radius: 14px;
}

.radio-queue > header,
.radio-queue > header > div,
.radio-queue-list article,
.radio-queue-list article > span {
  display: flex;
}

.radio-queue > header { align-items: center; justify-content: space-between; gap: 10px; }
.radio-queue > header > div,
.radio-queue-list article > span { min-width: 0; flex-direction: column; }
.radio-queue > header strong { color: #f2f8fa; font-size: 13px; }
.radio-queue > header small,
.radio-queue-list small { color: #78909b; font-size: 10px; }
.radio-queue > header button,
.radio-queue-add button { min-height: 36px; color: #55e2bd; background: rgba(21, 88, 73, .2); border: 1px solid rgba(52, 221, 179, .3); border-radius: 10px; }
.radio-queue-add { display: grid; grid-template-columns: .8fr 1.2fr auto; gap: 8px; }
.radio-queue-add input { min-width: 0; min-height: 40px; padding: 0 11px; color: #e9f3f5; background: #13232b; border: 1px solid #2d424c; border-radius: 10px; }
.radio-queue-list { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; }
.radio-queue-list article { align-items: center; gap: 9px; min-height: 46px; padding: 7px 9px; background: rgba(24, 40, 48, .88); border: 1px solid rgba(62, 88, 100, .5); border-radius: 10px; }
.radio-queue-list article > b { display: grid; width: 26px; height: 26px; place-items: center; color: #55e2bd; background: rgba(52, 221, 179, .1); border-radius: 8px; }
.radio-queue-list article > span { flex: 1; }
.radio-queue-list article > span strong { overflow: hidden; color: #edf6f7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.radio-queue-list article > button { width: 32px; height: 32px; color: #ff8ca0; background: rgba(255, 70, 99, .08); border: 0; border-radius: 8px; }
.radio-queue-list > p { margin: 4px; color: #78909b; font-size: 11px; text-align: center; }

/* Site Sahibi rol-yetki matrisi */
.role-capability-panel { padding: 14px; margin: 12px 0; background: #101f26; border: 1px solid #2b414b; border-radius: 15px; }
.role-capability-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.role-capability-panel > header span { color: #48ddb8; font-size: 9px; font-weight: 900; letter-spacing: .8px; }
.role-capability-panel > header h3 { margin: 3px 0; color: #f2f7f8; font-size: 17px; }
.role-capability-panel > header p { max-width: 680px; margin: 0; color: #8da1aa; font-size: 11px; line-height: 1.5; }
.role-capability-table { overflow-x: auto; border: 1px solid #263b45; border-radius: 12px; }
.role-capability-head,
.role-capability-row { display: grid; min-width: max(1480px, calc(190px + var(--capability-count, 13) * 92px)); grid-template-columns: 190px repeat(var(--capability-count, 13), minmax(92px, 1fr)); align-items: stretch; }
.role-capability-head { position: sticky; top: 0; z-index: 3; min-height: 54px; background: #16272f; }
.role-capability-head > strong,
.role-capability-head > span { display: grid; place-items: center; padding: 8px; color: #9eb0b8; font-size: 9px; text-align: center; border-right: 1px solid #2b4049; }
.role-capability-head > strong { position: sticky; left: 0; z-index: 4; color: #eaf3f5; background: #16272f; }
.role-capability-row { min-height: 58px; border-top: 1px solid #263b45; }
.role-capability-row > strong { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: var(--cap-role-color); background: #13232b; border-right: 1px solid #2b4049; }
.role-capability-row > strong > i { font-style: normal; font-size: 18px; }
.role-capability-row > strong > span { display: flex; min-width: 0; flex-direction: column; font-size: 11px; }
.role-capability-row > strong small { color: #718791; font-size: 8px; }
.role-capability-row > label { display: grid; place-items: center; border-right: 1px solid rgba(43, 64, 73, .7); cursor: pointer; }
.role-capability-row input { position: absolute; opacity: 0; pointer-events: none; }
.role-capability-row label > span { position: relative; width: 38px; height: 22px; background: #243740; border: 1px solid #38505b; border-radius: 999px; transition: .2s ease; }
.role-capability-row label > span::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; content: ""; background: #758891; border-radius: 50%; transition: .2s ease; }
.role-capability-row input:checked + span { background: rgba(37, 202, 159, .22); border-color: #25ca9f; box-shadow: 0 0 14px rgba(37, 202, 159, .12); }
.role-capability-row input:checked + span::after { left: 19px; background: #46e1b9; }

/* Kamera görünümünde kartlar hiçbir boyutta üst üste binmez. */
.voice-dock.has-cameras .voice-users {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 8px !important;
  overflow: auto !important;
}

.voice-dock.has-cameras .voice-user {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.voice-dock.has-cameras .voice-users.camera-focus-mode .voice-user.is-focused {
  grid-column: 1 / -1 !important;
  min-height: clamp(220px, 48vh, 480px) !important;
}

.voice-dock.has-cameras .voice-users.camera-focus-mode .voice-user:not(.is-focused) {
  min-height: 78px !important;
}

@media (max-width: 680px) {
  .radio-queue-add { grid-template-columns: 1fr; }
  .role-capability-panel { padding: 10px; }
  .role-capability-panel > header { align-items: stretch; flex-direction: column; }
  .role-capability-panel > header button { width: 100%; }
  .voice-dock.has-cameras .voice-users { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .voice-dock.has-cameras .voice-users.camera-focus-mode .voice-user.is-focused { min-height: min(52vh, 390px) !important; }
}

/* Ses paneli son düzeltme: kamerasız kullanıcılar kompakt satırda kalır. */
.voice-dock .voice-dock-head {
  touch-action: none;
}

.voice-dock .voice-head-leave {
  color: #ff91a4;
  border-color: rgba(255, 91, 119, 0.28);
  background: rgba(255, 70, 101, 0.08);
}

.voice-dock .voice-head-leave:hover {
  color: #fff;
  background: rgba(255, 70, 101, 0.2);
}

.voice-dock.collapsed .voice-head-leave {
  display: none !important;
}

.voice-dock:not(.has-cameras):not(.collapsed) .voice-users {
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
}

.voice-dock:not(.has-cameras):not(.collapsed) .voice-user {
  display: grid !important;
  min-width: 0 !important;
  min-height: 52px !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 6px 7px !important;
  overflow: hidden !important;
}

.voice-dock:not(.has-cameras) .voice-user-media {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  aspect-ratio: 1 !important;
  border-radius: 10px !important;
}

.voice-dock:not(.has-cameras) .voice-user-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.voice-dock:not(.has-cameras) .voice-user-copy strong,
.voice-dock:not(.has-cameras) .voice-user-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.voice-dock:not(.has-cameras) .voice-user-permissions {
  display: grid !important;
  width: auto !important;
  max-width: 110px !important;
  grid-template-columns: repeat(2, minmax(0, 52px)) !important;
  gap: 3px !important;
  margin: 0 !important;
}

.voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button {
  width: 52px !important;
  min-width: 0 !important;
  max-width: 52px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  font-size: 7px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.voice-dock.has-cameras .voice-user-permissions {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

.voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  font-size: 7px !important;
}

@media (max-width: 680px) {
  .voice-dock:not(.has-cameras):not(.collapsed) .voice-user {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding-inline: 6px !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-media {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-permissions {
    max-width: 98px !important;
    grid-template-columns: repeat(2, minmax(0, 47px)) !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button {
    width: 47px !important;
    max-width: 47px !important;
    font-size: 6.5px !important;
  }
}

/* Son kamera sahnesi: boyut seçimi, odak görünümü ve taşmayan izin kontrolleri. */
.voice-camera-toolbar {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  color: #cce1e4;
  background: rgba(8, 25, 31, 0.96);
  border-bottom: 1px solid rgba(76, 111, 122, 0.34);
}

.voice-dock.collapsed .voice-camera-toolbar {
  display: none !important;
}

.voice-camera-toolbar > span {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 1px 6px;
}

.voice-camera-toolbar > span .ui-icon {
  width: 16px;
  height: 16px;
  grid-row: 1 / 3;
  align-self: center;
  color: #38dfb5;
}

.voice-camera-toolbar > span b {
  overflow: hidden;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-camera-toolbar > span small {
  overflow: hidden;
  color: #718994;
  font-size: 7px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-camera-toolbar > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 4px;
}

.voice-camera-toolbar button,
.voice-camera-toolbar > div > strong {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  padding: 0 7px;
  color: #d7e6e8;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  background: #16262e;
  border: 1px solid #2c414b;
  border-radius: 8px;
}

.voice-camera-toolbar button:not(:disabled):hover {
  color: #071a16;
  background: #35deb3;
  border-color: #35deb3;
}

.voice-camera-toolbar button:disabled {
  cursor: default;
  opacity: 0.38;
}

.voice-camera-toolbar > div > strong {
  min-width: 54px;
  color: #87aaa7;
  font-size: 7px;
}

#voice-camera-focus-clear {
  display: flex;
  min-width: 82px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #ffbdc8;
  background: rgba(123, 39, 57, 0.34);
  border-color: rgba(231, 83, 111, 0.38);
}

#voice-camera-focus-clear .ui-icon {
  width: 13px;
  height: 13px;
}

#voice-camera-focus-clear em {
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
}

.voice-dock[data-camera-size="0"] .voice-users {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
}

.voice-dock[data-camera-size="1"] .voice-users {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important;
}

.voice-dock[data-camera-size="2"] .voice-users {
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)) !important;
}

.voice-dock[data-camera-size="0"] .voice-user {
  min-height: 112px !important;
}

.voice-dock[data-camera-size="2"] .voice-user {
  min-height: 188px !important;
}

.voice-user.is-camera-tile .voice-user-media {
  cursor: zoom-in;
}

.voice-dock[data-camera-size] .voice-users.camera-focus-mode {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.voice-users.camera-focus-mode .voice-user.is-focused {
  min-height: 270px;
  grid-column: 1 / -1;
  order: -10;
  background: rgba(18, 40, 47, 0.98);
  border-color: rgba(52, 224, 179, 0.68);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(52, 224, 179, 0.12);
}

.voice-users.camera-focus-mode .voice-user.is-focused .voice-user-media {
  aspect-ratio: 16 / 9;
  cursor: zoom-out;
}

.voice-dock .voice-user-permissions {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 5px !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 31px !important;
  padding: 5px 4px !important;
  overflow: hidden !important;
  font-size: 7px !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-overflow: ellipsis;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .voice-camera-toolbar {
    min-height: 52px;
    padding: 7px;
  }

  .voice-camera-toolbar > span small {
    display: none;
  }

  .voice-camera-toolbar > span .ui-icon {
    grid-row: 1;
  }

  .voice-camera-toolbar button,
  .voice-camera-toolbar > div > strong {
    min-width: 34px;
    height: 34px;
  }

  #voice-camera-focus-clear {
    min-width: 34px;
    padding: 0;
  }

  #voice-camera-focus-clear em {
    display: none;
  }

  .voice-dock[data-camera-size="0"] .voice-users {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .voice-dock[data-camera-size="1"] .voice-users,
  .voice-dock[data-camera-size="2"] .voice-users {
    grid-template-columns: 1fr !important;
  }

  .voice-dock[data-camera-size] .voice-users.camera-focus-mode {
    grid-template-columns: 1fr !important;
  }

  .voice-users.camera-focus-mode .voice-user.is-focused {
    min-height: 230px;
  }
}

/* Kamera izinleri: genel buton teması bu küçük oda kontrollerini beyaza çevirmesin. */
.voice-dock .voice-user-permissions > button.voice-permission-button {
  min-width: 66px !important;
  min-height: 29px !important;
  padding: 5px 7px !important;
  color: #052019 !important;
  -webkit-text-fill-color: #052019 !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  background: #2bdcaf !important;
  border: 1px solid #55e8c3 !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 14px rgba(43, 220, 175, 0.12) !important;
  opacity: 1 !important;
  white-space: nowrap;
}

.voice-dock .voice-user-permissions > button.voice-permission-button.camera {
  color: #dff7ff !important;
  -webkit-text-fill-color: #dff7ff !important;
  background: #15516c !important;
  border-color: #2f9bc5 !important;
  box-shadow: 0 5px 14px rgba(47, 155, 197, 0.12) !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button.revoke {
  color: #fff0f3 !important;
  -webkit-text-fill-color: #fff0f3 !important;
  background: #5f2330 !important;
  border-color: #c7495f !important;
  box-shadow: 0 5px 14px rgba(199, 73, 95, 0.13) !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button:hover {
  filter: brightness(1.1);
}

/* Oyun ayarları: başlık ve kaydet alanı sabit, tüm oyun listesi son satıra kadar kayar. */
.game-hub.has-settings-open:not(.is-collapsed) {
  overflow: hidden;
}

.game-admin-panel {
  display: grid;
  height: calc(100% - 60px);
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.game-admin-list {
  min-height: 0;
  max-height: none;
  padding: 0 3px 12px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.game-admin-panel > footer {
  position: relative;
  z-index: 2;
  padding-top: 10px;
  background: linear-gradient(180deg, rgba(9, 22, 28, 0), rgba(9, 22, 28, 0.98) 18%);
}

/* Oda ses ve kamera sahnesi */
.voice-dock .voice-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voice-user-media {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  overflow: hidden;
  background: #0a171d;
  border-radius: 10px;
}

.voice-user-media > video {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #071117;
}

.voice-user-media > .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.voice-user.has-live-video .voice-user-media > video {
  display: block;
}

.voice-user.has-live-video .voice-user-media > .avatar {
  opacity: 0;
}

.voice-camera-badge {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: 4px;
  display: none;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #eafff9;
  background: rgba(5, 20, 25, 0.76);
  border: 1px solid rgba(93, 238, 200, 0.55);
  border-radius: 7px;
  backdrop-filter: blur(8px);
}

.voice-user.has-live-video .voice-camera-badge {
  display: grid;
}

.voice-camera-badge .ui-icon {
  width: 11px;
  height: 11px;
}

.voice-user-copy {
  min-width: 0;
}

.voice-user-permissions {
  display: flex;
  min-width: 0;
  gap: 5px;
  margin-left: auto;
}

.voice-user-permissions:empty {
  display: none;
}

.voice-user > .voice-user-permissions > button.voice-permission-button {
  min-width: 66px;
  min-height: 29px;
  padding: 4px 6px;
  font-size: 7px;
}

.voice-dock.has-cameras:not(.collapsed) {
  min-width: min(360px, calc(100vw - 16px));
}

.voice-dock.has-cameras .voice-users {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  padding: 9px;
}

.voice-dock.has-cameras .voice-user {
  display: grid;
  min-width: 0;
  min-height: 138px;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 6px;
  overflow: hidden;
}

.voice-dock.has-cameras .voice-user-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}

.voice-user-media > .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}

.voice-dock.has-cameras .voice-user-media > .avatar {
  width: 50px !important;
  height: 50px !important;
  margin: calc((100% - 50px) / 2) auto 0;
}

.voice-dock.has-cameras .voice-user-copy {
  display: grid;
  gap: 2px;
  padding-inline: 2px;
}

.voice-dock.has-cameras .voice-user-permissions {
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
}

.voice-dock.has-cameras .voice-user-permissions > button {
  flex: 1 1 66px;
}

.voice-camera-pip {
  display: none;
}

.voice-dock.collapsed.has-cameras {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 122px !important;
  min-height: 122px !important;
  max-height: 122px !important;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(61, 224, 184, 0.18);
}

.voice-dock.collapsed.has-cameras .voice-dock-head {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 7px;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  background: rgba(4, 18, 23, 0.78) !important;
  border: 1px solid rgba(70, 229, 191, 0.3) !important;
  border-radius: 11px !important;
  backdrop-filter: blur(10px);
}

.voice-dock.collapsed.has-cameras .voice-dock-head .signal-bars {
  display: flex !important;
  width: 20px !important;
  height: 20px !important;
}

.voice-dock.collapsed.has-cameras .voice-camera-pip {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  background: #071117;
}

.voice-camera-pip > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-camera-pip > span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  overflow: hidden;
  color: #f5fffc;
  font-size: 8px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(3, 14, 18, 0.86), rgba(3, 14, 18, 0.42));
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.voice-camera-pip > span i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: #2de0ad;
  border-radius: 50%;
  box-shadow: 0 0 10px #2de0ad;
}

@media (max-width: 680px) {
  .game-admin-panel {
    height: calc(100% - 54px);
  }

  .game-admin-list {
    max-height: none;
  }

  .voice-dock.has-cameras:not(.collapsed) {
    min-width: min(300px, calc(100vw - 16px)) !important;
  }

  .voice-dock.has-cameras .voice-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .voice-dock.collapsed.has-cameras {
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
    cursor: pointer;
    touch-action: manipulation !important;
  }

  .voice-dock.has-cameras:not(.collapsed) {
    width: min(360px, calc(100vw - 16px)) !important;
    height: min(560px, calc(100dvh - 84px)) !important;
    min-width: min(300px, calc(100vw - 16px)) !important;
    min-height: 300px !important;
  }

  .voice-dock.has-cameras .voice-users {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  /* Kamera ve ekran iki ayrı video etiketidir. has-live-video ile ikisini birden
     açmak, boş kamera etiketini ekran paylaşımının üstünde siyah perdeye
     dönüştürüyordu. Yalnız gerçekten aktif kaynağı görünür tut. */
  .voice-dock .voice-user.has-live-camera:not(.has-live-screen) .voice-user-media > video[data-voice-camera],
  .voice-dock .voice-user.has-live-screen .voice-user-media > video[data-voice-screen],
  .voice-dock .voice-user.has-live-screen.has-live-camera .voice-user-media > video[data-voice-camera],
  .voice-dock.collapsed.has-cameras .voice-camera-pip > video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .voice-dock .voice-user:not(.has-live-camera) .voice-user-media > video[data-voice-camera],
  .voice-dock .voice-user:not(.has-live-screen) .voice-user-media > video[data-voice-screen] {
    display: none !important;
  }

  .voice-dock.collapsed.has-cameras .voice-camera-pip {
    display: block !important;
    pointer-events: none !important;
  }

  .voice-dock:not(.collapsed) #voice-collapse {
    display: grid !important;
    touch-action: manipulation !important;
  }
}

/* Oda ses izinleri: kartı kaplamayan, okunaklı mikro kontroller. */
.voice-dock .voice-user-permissions,
.voice-dock.has-cameras .voice-user-permissions {
  display: flex !important;
  width: auto !important;
  max-width: 146px !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button,
.voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
  width: auto !important;
  min-width: 58px !important;
  max-width: 70px !important;
  min-height: 25px !important;
  height: 25px !important;
  padding: 3px 6px !important;
  flex: 0 0 auto !important;
  font-size: 7px !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
}

@media (max-width: 680px) {
  .voice-dock .voice-user-permissions,
  .voice-dock.has-cameras .voice-user-permissions {
    max-width: 132px !important;
  }

  .voice-dock .voice-user-permissions > button.voice-permission-button,
  .voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
    min-width: 54px !important;
    max-width: 64px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding-inline: 4px !important;
    font-size: 6.5px !important;
  }
}

/* Kesin ses paneli düzeni: geç yüklenen eski kuralları da ezer. */
.voice-dock .voice-head-leave {
  color: #ff91a4;
  border-color: rgba(255, 91, 119, 0.28);
  background: rgba(255, 70, 101, 0.08);
}

.voice-dock.collapsed .voice-head-leave {
  display: none !important;
}

.voice-dock:not(.has-cameras):not(.collapsed) .voice-users {
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
}

.voice-dock:not(.has-cameras):not(.collapsed) .voice-user {
  display: grid !important;
  min-width: 0 !important;
  min-height: 52px !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 6px 7px !important;
  overflow: hidden !important;
}

.voice-dock:not(.has-cameras) .voice-user-media {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  aspect-ratio: 1 !important;
  border-radius: 10px !important;
}

.voice-dock:not(.has-cameras) .voice-user-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.voice-dock:not(.has-cameras) .voice-user-copy strong,
.voice-dock:not(.has-cameras) .voice-user-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.voice-dock:not(.has-cameras) .voice-user-permissions {
  display: grid !important;
  width: auto !important;
  max-width: 110px !important;
  grid-template-columns: repeat(2, minmax(0, 52px)) !important;
  gap: 3px !important;
  margin: 0 !important;
}

.voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button {
  width: 52px !important;
  min-width: 0 !important;
  max-width: 52px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  flex: 0 0 auto !important;
  font-size: 7px !important;
}

.voice-dock.has-cameras .voice-user-permissions {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

.voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  flex: 0 0 auto !important;
  font-size: 7px !important;
}

@media (max-width: 680px) {
  .voice-dock:not(.has-cameras):not(.collapsed) .voice-user {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding-inline: 6px !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-media {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-permissions {
    max-width: 98px !important;
    grid-template-columns: repeat(2, minmax(0, 47px)) !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button {
    width: 47px !important;
    max-width: 47px !important;
    font-size: 6.5px !important;
  }
}

/* --------------------------------------------------------------------------
   #Oyun odası: sohbetin üstünde çalışan koyu, kompakt Game Hub
   -------------------------------------------------------------------------- */

.game-hub-root {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
  padding: 10px 14px 0;
  background: linear-gradient(180deg, rgba(7, 18, 24, 0.98), rgba(7, 18, 24, 0.86));
}

.game-hub-root.hidden {
  display: none !important;
}

.messages-column.has-game-hub .messages-scroll {
  border-top: 1px solid rgba(77, 107, 120, 0.34);
}

.game-hub {
  display: flex;
  height: clamp(330px, 41dvh, 420px);
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  color: #edf7f7;
  background:
    radial-gradient(circle at 12% -12%, rgba(0, 168, 132, 0.2), transparent 34%),
    radial-gradient(circle at 88% 0%, rgba(104, 87, 204, 0.14), transparent 31%),
    linear-gradient(145deg, rgba(17, 32, 39, 0.98), rgba(12, 25, 32, 0.99));
  border: 1px solid rgba(73, 112, 124, 0.58);
  border-radius: 15px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
  transition: height 220ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.game-hub.has-active-game:not(.is-collapsed) {
  height: clamp(360px, 46dvh, 470px);
}

.game-hub.is-collapsed {
  height: 60px;
}

.game-svg {
  display: block;
  width: 20px;
  height: 20px;
}

.game-svg .svg-soft {
  fill: currentColor;
  opacity: 0.14;
}

.game-svg .svg-label {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-display, sans-serif);
  font-weight: 900;
  text-anchor: middle;
}

.game-svg .svg-label-21 {
  font-size: 6.4px;
}

.game-svg .svg-label-coin {
  font-size: 4.4px;
}

.game-svg .svg-label-seven {
  font-size: 9px;
}

.game-svg .svg-pointer {
  fill: currentColor;
  stroke-width: 1.1;
}

.game-hub-header {
  display: grid;
  min-height: 60px;
  grid-template-columns: minmax(190px, 1fr) auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  background: rgba(13, 28, 35, 0.85);
  border-bottom: 1px solid rgba(69, 101, 114, 0.45);
}

.game-hub-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-hub-tool {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 9px;
  cursor: pointer;
  color: #9bb0b8;
  font: 800 8px/1 inherit;
  background: rgba(20, 38, 46, 0.86);
  border: 1px solid #304750;
  border-radius: 9px;
}

.game-hub-tool:hover,
.game-hub-tool.active {
  color: #70e4ca;
  background: rgba(22, 69, 65, 0.72);
  border-color: rgba(70, 220, 184, 0.5);
}

.game-hub-tool .game-svg {
  width: 15px;
  height: 15px;
}

.game-admin-panel {
  box-sizing: border-box;
  padding: 14px;
  background: linear-gradient(180deg, rgba(13, 29, 36, 0.98), rgba(9, 22, 28, 0.99));
}

.game-admin-panel > header,
.game-admin-panel > footer,
.game-admin-limit,
.game-admin-row {
  display: flex;
  align-items: center;
}

.game-admin-panel > header {
  justify-content: space-between;
  gap: 15px;
  padding: 4px 2px 13px;
}

.game-admin-panel > header span {
  color: #55dfbd;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.game-admin-panel > header h3 {
  margin: 4px 0 3px;
  color: #f1f8f7;
  font-size: 15px;
}

.game-admin-panel > header p,
.game-admin-panel > footer small,
.game-admin-limit small,
.game-admin-game small {
  margin: 0;
  color: #8ca2ab;
  font-size: 8px;
}

.game-admin-panel > header button {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  cursor: pointer;
  color: #a7bbc1;
  background: #192b33;
  border: 1px solid #30464f;
  border-radius: 9px;
}

.game-admin-limit {
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  padding: 11px 12px;
  background: rgba(30, 52, 61, 0.72);
  border: 1px solid rgba(91, 133, 147, 0.36);
  border-radius: 11px;
}

.game-admin-limit > div,
.game-admin-game,
.game-admin-card-note,
.game-admin-row label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.game-admin-limit strong,
.game-admin-game strong {
  color: #e8f3f2;
  font-size: 10px;
}

.game-admin-list {
  display: grid;
  max-height: 340px;
  gap: 6px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.game-admin-row {
  min-width: 0;
  gap: 9px;
  padding: 8px;
  background: rgba(21, 39, 47, 0.78);
  border: 1px solid rgba(63, 91, 102, 0.55);
  border-radius: 10px;
}

.game-admin-row > img {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: cover;
  border-radius: 9px;
}

.game-admin-game {
  width: min(180px, 24vw);
  margin-right: auto;
}

.game-admin-row label,
.game-admin-card-note {
  width: 125px;
  flex: 0 0 125px;
}

.game-admin-row label > span:first-child,
.game-admin-card-note span {
  color: #8fa5ad;
  font-size: 7px;
  font-weight: 800;
}

.game-admin-card-note b {
  color: #b9c8cc;
  font-size: 8px;
}

.game-admin-input {
  display: flex;
  height: 34px;
  align-items: center;
  overflow: hidden;
  background: #0b1b22;
  border: 1px solid #334b54;
  border-radius: 8px;
}

.game-admin-input input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 8px;
  color: #f0f7f6;
  font: 850 10px/1 inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.game-admin-input b {
  padding-right: 8px;
  color: #57d9bc;
  font-size: 8px;
}

.game-admin-panel > footer {
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
}

.game-admin-panel > footer button {
  min-height: 38px;
  padding: 0 16px;
  cursor: pointer;
  color: #06251e;
  font: 950 9px/1 inherit;
  background: #43d9b4;
  border: 0;
  border-radius: 9px;
}

.game-hub.is-collapsed .game-hub-header {
  border-bottom: 0;
}

.game-hub-brand,
.game-hub-balance,
.game-active-top > div {
  display: flex;
  min-width: 0;
  align-items: center;
}

.game-hub-brand {
  gap: 10px;
}

.game-hub-brand > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #71ead0;
  background: linear-gradient(145deg, rgba(0, 168, 132, 0.22), rgba(70, 108, 124, 0.16));
  border: 1px solid rgba(57, 216, 179, 0.36);
  border-radius: 11px;
}

.game-hub-brand > div,
.game-active-top > div > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.game-hub-brand strong {
  color: #f4fbfa;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.game-hub-brand small {
  overflow: hidden;
  color: #8fa7b1;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-hub-balance {
  min-width: 145px;
  grid-template-columns: auto 1fr;
  gap: 0 8px;
  padding: 7px 11px;
  background: rgba(7, 20, 26, 0.7);
  border: 1px solid rgba(236, 188, 88, 0.32);
  border-radius: 10px;
}

.game-hub-balance > span {
  grid-row: 1 / 3;
  color: #f2c66d;
}

.game-hub-balance small {
  color: #8c9ea6;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.game-hub-balance strong {
  color: #f8d586;
  font-size: 11px;
  font-weight: 850;
}

.game-hub-balance strong b {
  font-size: 13px;
}

.game-hub-collapse,
.game-active-top > button,
.game-tile > button,
.game-bet-control > button,
.game-result-actions button,
.blackjack-actions button,
.game-choice-row button,
.number-grid button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: #dbe8eb;
  font-family: inherit;
  font-weight: 820;
  background: #1b2c34;
  border: 1px solid #344a54;
  border-radius: 9px;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.game-hub-collapse:hover,
.game-active-top > button:hover,
.game-tile > button:hover,
.game-result-actions button:hover,
.blackjack-actions button:hover,
.game-choice-row button:hover,
.number-grid button:hover {
  color: #ffffff;
  background: #243942;
  border-color: rgba(89, 216, 186, 0.48);
}

.game-hub-collapse:active,
.game-tile > button:active,
.game-bet-control > button:active,
.game-choice-row button:active {
  transform: scale(0.97);
}

.game-hub-collapse {
  min-width: 88px;
  height: 36px;
  padding: 0 10px;
  font-size: 9px;
}

.game-hub-collapse .game-svg {
  width: 16px;
  height: 16px;
}

.game-hub-content {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-color: #3b5660 transparent;
  scrollbar-width: thin;
}

.game-hub-home {
  padding: 12px;
}

.game-hub-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}

.game-hub-intro span,
.game-active-top > div > div > small {
  color: #51d8b9;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.game-hub-intro h2 {
  margin: 3px 0 2px;
  color: #f4f9fa;
  font-size: 15px;
  line-height: 1.2;
}

.game-hub-intro p,
.game-hub-intro > small {
  margin: 0;
  color: #91a5ae;
  font-size: 9px;
}

.game-hub-intro > small {
  flex: 0 0 auto;
  padding: 6px 9px;
  background: rgba(10, 23, 29, 0.68);
  border: 1px solid rgba(67, 94, 106, 0.46);
  border-radius: 999px;
}

.game-hub-intro > small b {
  color: #d7e6e9;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.game-tile {
  display: grid;
  min-width: 0;
  min-height: 102px;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px;
  background: linear-gradient(145deg, rgba(29, 47, 56, 0.82), rgba(18, 34, 41, 0.94));
  border: 1px solid rgba(72, 100, 112, 0.48);
  border-radius: 11px;
  transition: transform 170ms ease, border-color 170ms ease, background 170ms ease;
}

.game-tile:hover {
  background: linear-gradient(145deg, rgba(34, 57, 65, 0.92), rgba(19, 38, 45, 0.97));
  border-color: rgba(73, 210, 180, 0.48);
  transform: translateY(-2px);
}

.game-tile-art {
  display: block;
  position: relative;
  width: 62px;
  height: 62px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(83, 225, 196, 0.16), transparent 68%),
    linear-gradient(145deg, rgba(12, 30, 37, 0.96), rgba(24, 42, 51, 0.82));
  border: 1px solid rgba(72, 214, 181, 0.26);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px rgba(0, 0, 0, 0.22);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.game-tile-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 34%);
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.game-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.06);
  filter: drop-shadow(0 7px 8px rgba(0, 0, 0, 0.28));
  transition: transform 190ms ease, filter 190ms ease;
}

.game-tile:hover .game-tile-art {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 11px 26px rgba(38, 204, 169, 0.14);
  transform: translateY(-1px) scale(1.04);
}

.game-tile:hover .game-tile-art img {
  transform: scale(1.13) rotate(-1deg);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3)) saturate(1.08);
}

.game-tile-slots .game-tile-art,
.game-tile-highLow .game-tile-art,
.game-tile-treasure .game-tile-art {
  background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.13), transparent 34%), rgba(125, 95, 218, 0.16);
  border-color: rgba(156, 127, 239, 0.26);
}

.game-tile-coinFlip .game-tile-art,
.game-tile-luckyNumber .game-tile-art {
  background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.13), transparent 34%), rgba(221, 169, 72, 0.14);
  border-color: rgba(234, 186, 95, 0.24);
}

.game-tile-blackjack .game-tile-art {
  background: radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.14), transparent 34%), rgba(223, 59, 99, 0.14);
  border-color: rgba(255, 105, 141, 0.28);
}

.game-tile-luckyWheel .game-tile-art {
  background: conic-gradient(from 35deg, rgba(83, 225, 196, 0.2), rgba(127, 97, 232, 0.18), rgba(238, 172, 77, 0.17), rgba(83, 225, 196, 0.2));
  border-color: rgba(83, 225, 196, 0.3);
}

.game-tile-colorMatch .game-tile-art {
  background: conic-gradient(from 45deg, rgba(91, 136, 255, 0.2), rgba(222, 77, 130, 0.18), rgba(57, 209, 163, 0.19), rgba(142, 104, 238, 0.2));
  border-color: rgba(123, 188, 233, 0.3);
}

.game-tile > div {
  min-width: 0;
}

.game-tile strong {
  display: block;
  overflow: hidden;
  color: #eff7f7;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-tile p {
  display: -webkit-box;
  overflow: hidden;
  margin: 4px 0 0;
  color: #8298a2;
  font-size: 8px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.game-tile > button {
  height: 31px;
  padding: 0 8px;
  color: #bff7e9;
  font-size: 8px;
  background: rgba(0, 168, 132, 0.14);
  border-color: rgba(44, 200, 163, 0.32);
}

.game-tile > button .game-svg {
  width: 13px;
  height: 13px;
}

.game-active {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 10px 12px 12px;
}

.game-active-top {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.game-active-top > button {
  height: 34px;
  padding: 0 9px;
  font-size: 8px;
}

.game-active-top > button .game-svg {
  width: 14px;
  height: 14px;
}

.game-active-top > div {
  gap: 8px;
}

.game-active-top > div > span {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #63dfc2;
  background: rgba(0, 168, 132, 0.12);
  border: 1px solid rgba(61, 207, 171, 0.24);
  border-radius: 10px;
}

.game-active-top .game-active-art {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  background: radial-gradient(circle, rgba(71, 219, 185, 0.16), rgba(13, 30, 37, 0.9));
  border-radius: 13px;
}

.game-active-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.07);
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.28));
}

.game-active-top > div > div > strong {
  color: #f3f9f9;
  font-size: 12px;
}

.game-active-top > div > div > small {
  max-width: 430px;
  overflow: hidden;
  color: #879ca5;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-bet-control {
  display: flex;
  min-height: 64px;
  flex: 0 0 auto;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.game-bet-control label {
  display: flex;
  width: min(260px, 56%);
  flex-direction: column;
  gap: 4px;
  color: #9db0b8;
  font-size: 8px;
  font-weight: 800;
}

.game-bet-input {
  display: flex;
  height: 34px;
  align-items: center;
  overflow: hidden;
  background: rgba(8, 20, 26, 0.78);
  border: 1px solid #3a505a;
  border-radius: 9px;
}

.game-bet-input:focus-within {
  border-color: #2fcda8;
  box-shadow: 0 0 0 2px rgba(47, 205, 168, 0.11);
}

.game-bet-input input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  color: #f2f8f8;
  font: 800 12px/1 inherit;
  background: transparent;
  border: 0;
  outline: 0;
}

.game-bet-input b {
  padding-right: 10px;
  color: #e4c274;
  font-size: 9px;
}

.game-bet-control label > small {
  color: #718790;
  font-size: 7px;
}

.game-bet-control > button {
  min-width: 150px;
  height: 34px;
  padding: 0 13px;
  color: #06261f;
  font-size: 8px;
  background: linear-gradient(145deg, #31d8b0, #12b68f);
  border-color: #49dec0;
  box-shadow: 0 8px 24px rgba(0, 168, 132, 0.18);
}

.game-bet-control > button:hover {
  color: #031c17;
  background: linear-gradient(145deg, #4be5c1, #20c89f);
}

.game-bet-control > button:disabled,
.blackjack-actions button:disabled,
.treasure-chest:disabled {
  cursor: wait;
  opacity: 0.56;
}

.game-bet-control > button .game-svg {
  width: 14px;
  height: 14px;
}

.blackjack-table,
.slots-machine,
.coin-flip-stage,
.dice-stage,
.high-low-stage,
.lucky-number-stage,
.wheel-stage,
.treasure-stage,
.color-stage {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: rgba(8, 22, 28, 0.7);
  border: 1px solid rgba(61, 92, 104, 0.48);
  border-radius: 13px;
}

/* Blackjack */
.blackjack-table {
  display: grid;
  min-height: 190px;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 100%, rgba(0, 168, 132, 0.18), transparent 50%),
    linear-gradient(145deg, rgba(14, 48, 43, 0.88), rgba(8, 29, 31, 0.96));
}

.blackjack-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: left;
}

.blackjack-ready .table-mark {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  color: rgba(108, 231, 201, 0.88);
  font-size: 30px;
  font-weight: 950;
  border: 1px solid rgba(86, 218, 184, 0.42);
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px rgba(58, 177, 148, 0.08);
}

.blackjack-ready strong {
  display: block;
  color: #f0f8f6;
  font-size: 13px;
}

.blackjack-ready p {
  margin: 5px 0 0;
  color: #86a29f;
  font-size: 9px;
}

.blackjack-divider {
  width: 1px;
  margin: 4px 12px;
  background: linear-gradient(transparent, rgba(105, 170, 155, 0.46), transparent);
}

.blackjack-hand {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.blackjack-hand header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #8ea9a5;
  font-size: 8px;
  letter-spacing: 0.1em;
}

.blackjack-hand header b {
  display: grid;
  min-width: 27px;
  height: 27px;
  place-items: center;
  color: #dff8f1;
  font-size: 11px;
  background: rgba(3, 19, 17, 0.42);
  border: 1px solid rgba(90, 175, 155, 0.33);
  border-radius: 8px;
}

.blackjack-hand > div {
  display: flex;
  min-height: 82px;
  align-items: center;
  padding-left: 13px;
}

.playing-card {
  position: relative;
  display: block;
  width: 55px;
  height: 78px;
  flex: 0 0 55px;
  margin-left: -13px;
  color: #18252c;
  background: linear-gradient(145deg, #f7faf8, #dbe5e2);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 7px;
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.25);
  transform: rotate(calc((var(--card-index) - 1) * 2deg));
}

.playing-card b,
.playing-card small {
  position: absolute;
  left: 6px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.playing-card b { top: 5px; }
.playing-card small { right: 6px; bottom: 5px; left: auto; transform: rotate(180deg); }

.playing-card .card-suit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.playing-card.suit-heart,
.playing-card.suit-diamond { color: #c63d55; }

.playing-card.suit-club,
.playing-card.suit-spade { color: #26343a; }

.playing-card.suit-heart .card-suit {
  border-radius: 8px 8px 2px;
}

.playing-card.suit-heart .card-suit::before,
.playing-card.suit-heart .card-suit::after {
  position: absolute;
  width: 14px;
  height: 14px;
  content: "";
  background: currentColor;
  border-radius: 50%;
}

.playing-card.suit-heart .card-suit::before { top: -7px; left: 0; }
.playing-card.suit-heart .card-suit::after { top: 0; left: -7px; }

.playing-card.suit-club .card-suit {
  border-radius: 50%;
  box-shadow: -7px 4px 0 -1px currentColor, 7px 4px 0 -1px currentColor;
}

.playing-card.suit-spade .card-suit {
  border-radius: 2px 9px 9px;
}

.card-back {
  display: grid;
  place-items: center;
  color: #7ecfbd;
  background: repeating-linear-gradient(45deg, #193e40 0 5px, #245052 5px 10px);
  border: 4px solid #d7e3df;
}

.blackjack-table.is-dealing .playing-card:last-child {
  animation: game-card-deal 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes game-card-deal {
  from { opacity: 0; transform: translate3d(28px, -42px, 0) rotate(17deg) scale(0.74); }
  to { opacity: 1; transform: rotate(calc((var(--card-index) - 1) * 2deg)) scale(1); }
}

.blackjack-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
}

.blackjack-actions button {
  min-width: 90px;
  height: 33px;
  font-size: 9px;
}

.blackjack-actions button:first-child {
  color: #05261f;
  background: #2fd0aa;
  border-color: #43dfbc;
}

.blackjack-actions span {
  margin-left: 8px;
  color: #869da5;
  font-size: 8px;
}

.blackjack-actions span b { color: #e4c678; }

/* Slots */
.slots-machine {
  width: min(520px, 100%);
  min-height: 190px;
  margin-inline: auto;
  padding: 18px 24px;
  background: linear-gradient(145deg, #172632, #101b24);
  border-color: rgba(136, 112, 210, 0.44);
  box-shadow: inset 0 0 45px rgba(104, 76, 196, 0.08);
}

.slots-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #9c88dc;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.slots-top i {
  width: 36px;
  height: 4px;
  background: #2fcda8;
  border-radius: 9px;
  box-shadow: 0 0 15px rgba(47, 205, 168, 0.6);
}

.slot-reels {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.slot-reel {
  position: relative;
  display: grid;
  height: 110px;
  place-items: center;
  overflow: hidden;
  color: #b6a4ec;
  background: linear-gradient(180deg, #0b151c, #1b2a34 50%, #0b151c);
  border: 1px solid #3d4b5b;
  border-radius: 9px;
}

.slot-reel::before,
.slot-reel::after {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 25%;
  content: "";
  pointer-events: none;
}

.slot-reel::before {
  top: 0;
  background: linear-gradient(#071116, transparent);
}

.slot-reel::after {
  bottom: 0;
  background: linear-gradient(transparent, #071116);
}

.slot-symbol {
  width: 50px;
  height: 50px;
}

.symbol-diamond { color: #66dff0; }
.symbol-bar { color: #d8e2e5; }
.symbol-ring { color: #edc575; }
.symbol-lightning { color: #b895ff; }
.symbol-crown { color: #f0bc62; }

.slot-reel-track {
  position: absolute;
  top: -430px;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  animation: slot-track-spin calc(780ms + var(--reel-index) * 180ms) linear infinite;
}

.slot-reel.has-landed {
  border-color: rgba(81, 224, 190, 0.58);
  box-shadow: inset 0 0 24px rgba(67, 211, 177, 0.1), 0 0 16px rgba(67, 211, 177, 0.12);
  animation: slot-reel-land 360ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

.slot-reel.has-landed > .slot-symbol {
  animation: slot-symbol-land 360ms cubic-bezier(0.2, 0.9, 0.25, 1.2) both;
}

@keyframes slot-track-spin {
  to { transform: translateY(390px); }
}

@keyframes slot-reel-land {
  0% { transform: translateY(-8px); filter: blur(2px); }
  65% { transform: translateY(4px); filter: blur(0); }
  100% { transform: translateY(0); }
}

@keyframes slot-symbol-land {
  0% { opacity: 0; transform: scale(0.7) translateY(-18px); }
  70% { opacity: 1; transform: scale(1.12) translateY(3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.slots-payline {
  position: absolute;
  top: 50%;
  right: 15px;
  left: 15px;
  height: 1px;
  pointer-events: none;
  background: rgba(79, 229, 191, 0.46);
  box-shadow: 0 0 10px rgba(63, 218, 179, 0.42);
}

/* Coin flip */
.coin-flip-stage,
.dice-stage,
.lucky-number-stage,
.treasure-stage,
.color-stage {
  display: flex;
  min-height: 180px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
}

.coin-air-shell {
  position: relative;
  width: 112px;
  height: 118px;
  perspective: 700px;
}

.flip-coin {
  --coin-final-rotation: 2160deg;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 12px;
  width: 88px;
  height: 88px;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.2, 0.85, 0.25, 1.15);
}

.flip-coin.target-tails {
  --coin-final-rotation: 1980deg;
}

.flip-coin.tails:not(.is-flipping) {
  transform: rotateY(180deg);
}

.coin-face {
  position: absolute;
  display: flex;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  color: #203038;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.75), transparent 16%),
    linear-gradient(145deg, #ffe9a5, #c28a30 76%);
  border: 5px solid #ffe8a6;
  border-radius: 50%;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3), inset 0 0 0 5px rgba(105, 65, 13, 0.2);
  backface-visibility: hidden;
}

.coin-face::after {
  position: absolute;
  inset: 8px;
  content: "";
  border: 1px dashed rgba(80, 51, 15, 0.5);
  border-radius: 50%;
}

.coin-face b {
  font-size: 30px;
  font-weight: 950;
  line-height: 0.95;
}

.coin-face small {
  font-size: 6px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.coin-tails {
  color: #173439;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.75), transparent 16%),
    linear-gradient(145deg, #f9d984, #a87428 76%);
  transform: rotateY(180deg);
}

.coin-edge {
  position: absolute;
  z-index: -1;
  top: 5px;
  right: -4px;
  bottom: 5px;
  width: 8px;
  background: repeating-linear-gradient(#efc36c 0 3px, #99631e 3px 5px);
  border-radius: 50%;
  transform: translateZ(-3px);
}

.coin-ground-shadow {
  position: absolute;
  right: 20px;
  bottom: 5px;
  left: 20px;
  height: 15px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  filter: blur(6px);
  transform: scaleX(1);
}

.flip-coin.is-flipping {
  animation: coin-air 1.62s cubic-bezier(0.18, 0.72, 0.2, 1) both;
}

.coin-air-shell.is-flipping .coin-ground-shadow {
  animation: coin-shadow 1.62s ease-in-out both;
}

@keyframes coin-air {
  0% { transform: translateY(0) rotateY(0deg) rotateZ(0deg) scale(1); }
  20% { transform: translateY(-35px) rotateY(540deg) rotateZ(-3deg) scale(1.04); }
  50% { transform: translateY(-61px) rotateY(1080deg) rotateZ(3deg) scale(1.1); }
  78% { transform: translateY(-30px) rotateY(1620deg) rotateZ(-2deg) scale(1.04); }
  92% { transform: translateY(3px) rotateY(calc(var(--coin-final-rotation) - 60deg)) rotateZ(1deg) scale(0.98); }
  100% { transform: translateY(0) rotateY(var(--coin-final-rotation)) rotateZ(0deg) scale(1); }
}

@keyframes coin-shadow {
  0%, 100% { opacity: 0.65; transform: scaleX(1); }
  50% { opacity: 0.18; transform: scaleX(0.52); }
}

.coin-flip-stage p,
.dice-stage p,
.treasure-stage > p,
.color-stage > p {
  margin: 0;
  color: #8499a2;
  font-size: 8px;
}

.game-choice-row {
  display: flex;
  gap: 7px;
}

.game-choice-row button {
  min-width: 98px;
  height: 31px;
  padding: 0 11px;
  font-size: 8px;
}

.game-choice-row button.selected,
.number-grid button.selected {
  color: #06251e;
  background: #36d7b0;
  border-color: #57e4c3;
  box-shadow: 0 0 0 2px rgba(54, 215, 176, 0.12);
}

/* Dice */
.dice-wrap {
  position: relative;
  perspective: 500px;
}

.dice-face {
  display: grid;
  width: 86px;
  height: 86px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 14px;
  background: linear-gradient(145deg, #e9efee, #aebfbe);
  border: 1px solid #f5ffff;
  border-radius: 18px;
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.3), inset -8px -9px 15px rgba(48, 70, 72, 0.22);
  transform: rotateX(8deg) rotateY(-9deg);
}

.dice-face i {
  display: none;
  width: 12px;
  height: 12px;
  place-self: center;
  background: #183036;
  border-radius: 50%;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.48);
}

.face-1 i[data-dot="5"],
.face-2 i[data-dot="1"], .face-2 i[data-dot="9"],
.face-3 i[data-dot="1"], .face-3 i[data-dot="5"], .face-3 i[data-dot="9"],
.face-4 i[data-dot="1"], .face-4 i[data-dot="3"], .face-4 i[data-dot="7"], .face-4 i[data-dot="9"],
.face-5 i[data-dot="1"], .face-5 i[data-dot="3"], .face-5 i[data-dot="5"], .face-5 i[data-dot="7"], .face-5 i[data-dot="9"],
.face-6 i[data-dot="1"], .face-6 i[data-dot="3"], .face-6 i[data-dot="4"], .face-6 i[data-dot="6"], .face-6 i[data-dot="7"], .face-6 i[data-dot="9"] { display: block; }

.dice-wrap.is-rolling .dice-face {
  animation: dice-roll 460ms cubic-bezier(0.35, 0.05, 0.65, 0.95) infinite;
}

@keyframes dice-roll {
  0% { transform: translateY(0) rotateX(8deg) rotateY(-9deg) rotateZ(0deg) scale(1); }
  26% { transform: translateY(-20px) rotateX(118deg) rotateY(82deg) rotateZ(24deg) scale(0.9); }
  58% { transform: translateY(-8px) rotateX(246deg) rotateY(188deg) rotateZ(-18deg) scale(1.06); }
  82% { transform: translateY(-24px) rotateX(324deg) rotateY(279deg) rotateZ(13deg) scale(0.96); }
  100% { transform: translateY(0) rotateX(368deg) rotateY(351deg) rotateZ(0deg) scale(1); }
}

.dice-shadow {
  position: absolute;
  z-index: -1;
  right: 8px;
  bottom: -10px;
  left: 8px;
  height: 12px;
  background: rgba(0, 0, 0, 0.36);
  border-radius: 50%;
  filter: blur(5px);
}

.dice-wrap.is-rolling .dice-shadow {
  animation: dice-shadow-pulse 460ms ease-in-out infinite;
}

.dice-wrap.has-landed .dice-face {
  animation: dice-land 300ms cubic-bezier(0.18, 0.88, 0.24, 1.25) both;
}

@keyframes dice-shadow-pulse {
  0%, 100% { opacity: 0.7; transform: scaleX(1); }
  50% { opacity: 0.25; transform: scaleX(0.62); }
}

@keyframes dice-land {
  0% { transform: translateY(-15px) rotateX(18deg) rotateY(-18deg) scale(0.94); }
  72% { transform: translateY(3px) rotateX(5deg) rotateY(-6deg) scale(1.05); }
  100% { transform: translateY(0) rotateX(8deg) rotateY(-9deg) scale(1); }
}

.dice-stage > strong {
  color: #dce8e9;
  font-size: 10px;
}

/* High / Low */
.high-low-stage {
  display: grid;
  min-height: 184px;
  grid-template-columns: minmax(100px, 170px) 34px minmax(100px, 170px);
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 13px;
  perspective: 900px;
}

.high-low-stage > .game-svg {
  color: #667d87;
}

.number-card {
  position: relative;
  display: flex;
  height: 125px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: #e8f3f2;
  background: linear-gradient(145deg, #24373f, #162831);
  border: 1px solid #40555e;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
  transform-style: preserve-3d;
}

.number-card-side {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(145deg, #24373f, #162831);
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.number-card-back {
  color: #d5c7ff;
  background: linear-gradient(145deg, #332d55, #172932);
  transform: rotateY(180deg);
}

.number-card small {
  color: #8298a0;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.number-card strong {
  font-size: 40px;
  line-height: 1;
}

.number-card.next {
  color: #d5c7ff;
  border-color: rgba(145, 116, 220, 0.45);
}

.number-card.is-flipping {
  animation: card-flip 780ms cubic-bezier(0.22, 0.72, 0.2, 1) forwards;
}

@keyframes card-flip {
  0% { transform: translateY(0) rotateY(0deg) scale(1); filter: brightness(1); }
  38% { transform: translateY(-4px) rotateY(78deg) scale(0.985); filter: brightness(1.12); }
  62% { transform: translateY(-5px) rotateY(126deg) scale(0.98); filter: brightness(0.96); }
  88% { transform: translateY(-1px) rotateY(174deg) scale(1.01); filter: brightness(1.06); }
  100% { transform: translateY(0) rotateY(180deg) scale(1); filter: brightness(1); }
}

.number-card.has-landed {
  border-color: rgba(111, 226, 199, 0.6);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.28), 0 0 20px rgba(81, 219, 185, 0.14);
  transform: rotateY(180deg);
  animation: card-land-glow 300ms ease-out both;
}

@keyframes card-land-glow {
  0% { box-shadow: 0 12px 25px rgba(0, 0, 0, 0.28), 0 0 0 rgba(81, 219, 185, 0); }
  55% { box-shadow: 0 12px 25px rgba(0, 0, 0, 0.28), 0 0 28px rgba(81, 219, 185, 0.34); }
  100% { box-shadow: 0 12px 25px rgba(0, 0, 0, 0.28), 0 0 20px rgba(81, 219, 185, 0.14); }
}

.high-low-stage .game-choice-row {
  grid-column: 1 / -1;
  justify-content: center;
}

/* Lucky number */
.lucky-number-stage {
  display: grid;
  grid-template-columns: 110px minmax(210px, 360px);
  flex-direction: initial;
  gap: 18px;
}

.lottery-ball {
  position: relative;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  color: #ecfbf7;
  background:
    radial-gradient(circle at 33% 26%, rgba(255, 255, 255, 0.26), transparent 24%),
    linear-gradient(145deg, #1bd0a6, #087f6e);
  border: 5px solid #234f4e;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #36dcb5, 0 15px 26px rgba(0, 0, 0, 0.28);
}

.lottery-ball span {
  font-size: 32px;
  font-weight: 950;
}

.lottery-ball.is-drawing {
  animation: lottery-pulse 260ms ease-in-out infinite alternate;
}

@keyframes lottery-pulse {
  from { transform: translateY(2px) scale(0.96) rotate(-4deg); filter: brightness(0.92); }
  to { transform: translateY(-7px) scale(1.08) rotate(5deg); filter: brightness(1.22); }
}

.lottery-ball > i {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(68, 224, 187, 0.35);
  border-radius: 50%;
  opacity: 0;
}

.lottery-ball.is-drawing > i {
  animation: lottery-ring 520ms ease-out infinite;
}

.lottery-ball.has-landed {
  animation: game-value-land 300ms ease-out both;
}

@keyframes lottery-ring {
  from { opacity: 0.65; transform: scale(0.75); }
  to { opacity: 0; transform: scale(1.28); }
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(34px, 1fr));
  gap: 6px;
}

.number-grid button {
  min-width: 0;
  height: 38px;
  font-size: 9px;
}

/* Lucky wheel */
.wheel-stage {
  display: grid;
  width: min(310px, 100%);
  min-height: 210px;
  margin-inline: auto;
  place-items: center;
  overflow: visible;
  background: transparent;
  border: 0;
}

.lucky-wheel {
  position: relative;
  width: 190px;
  height: 190px;
  background: repeating-conic-gradient(from -15deg, #225967 0deg 30deg, #3b2f68 30deg 60deg, #1f3945 60deg 90deg, #775529 90deg 120deg);
  border: 7px solid #172931;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #3f6670, 0 18px 34px rgba(0, 0, 0, 0.36), inset 0 0 0 3px rgba(255, 255, 255, 0.07);
  transform: rotate(var(--wheel-rotation));
}

.lucky-wheel.is-spinning {
  animation: lucky-wheel-spin 1.65s cubic-bezier(0.12, 0.62, 0.08, 1) both;
}

@keyframes lucky-wheel-spin {
  from { transform: rotate(var(--wheel-start)); }
  to { transform: rotate(var(--wheel-rotation)); }
}

.lucky-wheel > span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 36px;
  height: 14px;
  place-items: center;
  color: #eaf3f3;
  font-size: 6.5px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(var(--segment-angle)) translateY(-69px);
  transform-origin: center;
}

.lucky-wheel > span b {
  display: grid;
  min-width: 30px;
  min-height: 15px;
  padding: 2px 4px;
  place-items: center;
  border-radius: 999px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

.lucky-wheel > span.is-selected b {
  color: #06221c;
  background: #64f0ca;
  box-shadow: 0 0 0 2px rgba(6, 34, 28, 0.82), 0 0 15px rgba(82, 224, 189, 0.95);
}

.wheel-pointer {
  position: absolute;
  top: -1px;
  z-index: 4;
  width: 0;
  height: 0;
  border-right: 12px solid transparent;
  border-left: 12px solid transparent;
  border-top: 23px solid #52e0bd;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.38));
}

.wheel-stage.is-spinning .wheel-pointer {
  transform-origin: 50% 0;
  animation: wheel-pointer-tick 92ms ease-in-out infinite alternate;
}

.wheel-stage.has-landed .wheel-pointer {
  animation: wheel-pointer-land 360ms cubic-bezier(0.18, 0.88, 0.24, 1.25) both;
}

@keyframes wheel-pointer-tick {
  from { transform: rotate(-8deg); }
  to { transform: rotate(8deg); }
}

@keyframes wheel-pointer-land {
  0% { transform: rotate(-14deg) scale(1.18); filter: drop-shadow(0 0 9px rgba(82, 224, 189, 0.7)); }
  55% { transform: rotate(6deg) scale(1.05); }
  100% { transform: rotate(0) scale(1); }
}

.wheel-center {
  position: absolute;
  display: grid;
  width: 49px;
  height: 49px;
  place-items: center;
  color: #9eebdb;
  background: #10242c;
  border: 3px solid #4ccdaf;
  border-radius: 50%;
  box-shadow: 0 5px 13px rgba(0, 0, 0, 0.3);
}

/* Treasure */
.treasure-stage {
  min-height: 185px;
}

.treasure-grid {
  display: grid;
  width: min(580px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.treasure-chest {
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  cursor: pointer;
  color: #d6b26d;
  background: linear-gradient(145deg, #28333a, #1a252c);
  border: 1px solid #4b5150;
  border-radius: 11px;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.treasure-chest:hover,
.treasure-chest.selected {
  color: #f0ca7d;
  background: linear-gradient(145deg, #3b3b34, #242a2b);
  border-color: rgba(227, 181, 91, 0.58);
  transform: translateY(-3px);
}

.treasure-chest span {
  display: grid;
  width: 55px;
  height: 55px;
  place-items: center;
  background: rgba(203, 153, 63, 0.1);
  border-radius: 12px;
  transform-origin: bottom;
}

.treasure-chest .game-svg {
  width: 36px;
  height: 36px;
}

.treasure-chest b {
  font-size: 8px;
  letter-spacing: 0.06em;
}

.treasure-chest.opened span {
  animation: chest-open 420ms ease both;
}

.treasure-chest.checking {
  color: #ffe2a2;
  border-color: rgba(255, 204, 107, 0.85);
  box-shadow: 0 0 22px rgba(231, 176, 64, 0.2);
  animation: chest-check 210ms ease both;
}

@keyframes chest-check {
  0% { transform: translateY(0) scale(0.96); filter: brightness(0.9); }
  65% { transform: translateY(-6px) scale(1.04); filter: brightness(1.3); }
  100% { transform: translateY(-3px) scale(1); filter: brightness(1.08); }
}

.treasure-chest.opened:not(.winner) {
  color: #657880;
  filter: saturate(0.35);
}

.treasure-chest.winner {
  color: #ffd477;
  border-color: #dba94b;
  box-shadow: 0 0 0 2px rgba(229, 179, 76, 0.14), 0 0 24px rgba(227, 177, 72, 0.24);
}

@keyframes chest-open {
  0% { transform: translateY(0) rotateX(0) scale(1); filter: brightness(1); }
  42% { transform: translateY(-8px) rotateX(-24deg) scale(0.92); filter: brightness(1.2); }
  72% { transform: translateY(-4px) rotateX(8deg) scale(1.08); }
  100% { transform: translateY(-3px) rotateX(0) scale(1); filter: brightness(1); }
}

/* Color match */
.color-stage {
  min-height: 184px;
}

.color-grid {
  display: grid;
  width: min(600px, 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.color-panel {
  display: flex;
  min-height: 105px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  color: #cbd9dc;
  background: #16272f;
  border: 1px solid #3a4c55;
  border-radius: 11px;
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease, background 130ms ease;
}

.color-panel span {
  width: 47px;
  height: 47px;
  background: var(--panel-color);
  border: 5px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.12);
}

.color-panel b {
  font-size: 8px;
  letter-spacing: 0.05em;
}

.color-purple { --panel-color: #7657d6; }
.color-red { --panel-color: #cc4962; }
.color-green { --panel-color: #20a979; }
.color-blue { --panel-color: #377dc3; }

.color-panel.selected {
  border-color: var(--panel-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel-color) 30%, transparent);
  transform: translateY(-2px);
}

.color-panel.highlight {
  background: color-mix(in srgb, var(--panel-color) 28%, #16272f);
  border-color: color-mix(in srgb, var(--panel-color) 75%, white);
  box-shadow: 0 0 24px color-mix(in srgb, var(--panel-color) 38%, transparent);
  transform: scale(1.035);
}

.color-stage.is-running .color-panel.highlight span {
  animation: color-energy 230ms ease-out both;
}

.color-stage.has-landed .color-panel.highlight {
  animation: color-result-land 420ms cubic-bezier(0.16, 0.86, 0.2, 1.2) both;
}

@keyframes color-energy {
  from { transform: scale(0.72) rotate(-8deg); filter: brightness(1.6); }
  to { transform: scale(1) rotate(0); filter: brightness(1); }
}

@keyframes color-result-land {
  0% { transform: scale(0.88); box-shadow: 0 0 0 transparent; }
  58% { transform: scale(1.08); box-shadow: 0 0 34px color-mix(in srgb, var(--panel-color) 65%, transparent); }
  100% { transform: scale(1.035); }
}

@keyframes game-value-land {
  0% { opacity: 0.7; transform: translateY(-8px) scale(0.9); }
  68% { opacity: 1; transform: translateY(2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Round result */
.game-active {
  position: relative;
}

.game-stage-shell {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.game-active.has-result .game-stage-shell {
  pointer-events: none;
}

.game-active.has-result .game-bet-control,
.game-active.has-result .blackjack-actions {
  visibility: hidden;
  opacity: 0;
}

.game-result {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 10px;
  left: 12px;
  display: grid;
  min-height: 78px;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  background: rgba(8, 21, 27, 0.94);
  border: 1px solid rgba(74, 199, 167, 0.48);
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(13px);
  animation: game-result-in 260ms ease both;
}

.game-result-loss {
  border-color: rgba(234, 80, 102, 0.42);
}

.game-result-push {
  border-color: rgba(221, 177, 83, 0.38);
}

@keyframes game-result-in {
  from { opacity: 0; transform: translateY(7px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.game-result-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #5ee0bd;
  background: rgba(33, 197, 154, 0.12);
  border: 1px solid rgba(59, 210, 171, 0.38);
  border-radius: 13px;
}

.game-result-loss .game-result-icon {
  color: #ff6f82;
  background: rgba(222, 62, 85, 0.11);
  border-color: rgba(234, 80, 102, 0.35);
}

.game-result-push .game-result-icon {
  color: #e5c16f;
  background: rgba(204, 158, 62, 0.1);
  border-color: rgba(221, 177, 83, 0.32);
}

.game-result-icon .game-svg {
  width: 23px;
  height: 23px;
}

.game-result > div:nth-child(2) small {
  color: #80969e;
  font-size: 8px;
  font-weight: 850;
}

.game-result h3 {
  display: inline;
  margin: 0 8px 0 0;
  color: #eaf8f4;
  font-size: 12px;
}

.game-result > div:nth-child(2) > strong {
  display: inline;
  color: #5ee0bd;
  font-size: 15px;
}

.game-result-loss > div:nth-child(2) > strong { color: #ff6f82; }
.game-result-push > div:nth-child(2) > strong { color: #e5c16f; }

.game-result p {
  display: inline;
  margin: 0 7px;
  color: #8ca0a8;
  font-size: 8px;
}

.game-result > div:nth-child(2) > b {
  display: block;
  margin-top: 3px;
  color: #c7d6d9;
  font-size: 9px;
}

.game-result-copy {
  min-width: 0;
}

.game-wallet-flow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
}

.game-wallet-flow > span {
  display: grid;
  min-width: 82px;
  gap: 1px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(117, 144, 154, 0.2);
  border-radius: 7px;
}

.game-wallet-flow > span.final {
  background: rgba(47, 210, 172, 0.09);
  border-color: rgba(71, 224, 191, 0.3);
}

.game-wallet-flow small {
  color: #748a93 !important;
  font-size: 6px !important;
  letter-spacing: 0.45px;
}

.game-wallet-flow b {
  color: #dce9e8;
  font-size: 9px;
  white-space: nowrap;
}

.game-wallet-flow .final b,
.game-wallet-flow .final em {
  color: #5ee0bd;
  font-style: normal;
}

.game-wallet-flow > i {
  color: #577079;
  font-size: 10px;
  font-style: normal;
}

.game-result-actions {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

.game-result-actions button {
  min-width: 102px;
  height: 32px;
  padding: 0 8px;
  font-size: 8px;
}

.game-result-actions button:first-child {
  color: #07251f;
  background: #31d2ac;
  border-color: #47e0bf;
}

.game-result-actions .game-svg {
  width: 14px;
  height: 14px;
}

/* +18 giriş kapısı */
.game-age-modal {
  width: min(440px, calc(100vw - 28px));
  border-color: rgba(70, 190, 161, 0.42);
  animation: game-age-modal-in 220ms ease both;
}

@keyframes game-age-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.game-age-modal .modal-header {
  background: linear-gradient(145deg, rgba(21, 43, 49, 0.98), rgba(16, 30, 38, 0.98));
}

.game-age-gate {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 5px 4px 7px;
  text-align: center;
}

.game-age-icon {
  display: grid;
  width: 66px;
  height: 66px;
  margin-bottom: 14px;
  place-items: center;
  color: #69e4c7;
  background: radial-gradient(circle, rgba(0, 168, 132, 0.2), rgba(0, 168, 132, 0.07));
  border: 1px solid rgba(67, 216, 181, 0.36);
  border-radius: 19px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}

.game-age-icon .ui-icon {
  width: 31px;
  height: 31px;
}

.game-age-gate > strong {
  color: #f1f8f8;
  font-size: 17px;
}

.game-age-gate > p {
  max-width: 340px;
  margin: 8px 0 18px;
  color: #8fa4ac;
  font-size: 10px;
  line-height: 1.55;
}

.game-age-actions {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.game-age-actions button {
  min-height: 40px;
  justify-content: center;
}

.game-age-actions .small-button {
  color: #07231d;
  background: #31d4ad;
}

@media (min-width: 1450px) {
  .game-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .game-tile {
    min-height: 88px;
  }
}

@media (min-width: 681px) and (max-width: 1100px) {
  .game-hub-root {
    padding: 8px 10px 0;
  }

  .game-hub {
    height: clamp(320px, 43dvh, 390px);
  }

  .game-hub.has-settings-open {
    height: clamp(430px, 62dvh, 620px);
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-hub-header {
    grid-template-columns: minmax(145px, 1fr) 125px auto auto;
  }

  .game-hub-tool span {
    display: none;
  }

  .game-hub-tool {
    width: 36px;
    padding-inline: 0;
  }

  .game-admin-row {
    flex-wrap: wrap;
  }

  .game-admin-game {
    width: calc(100% - 58px);
  }

  .game-admin-row label,
  .game-admin-card-note {
    width: calc(50% - 5px);
    flex-basis: calc(50% - 5px);
  }

  .game-tile {
    min-height: 88px;
  }

  .blackjack-table {
    min-height: 180px;
  }
}

@media (max-width: 680px) {
  .game-hub-root {
    padding: 5px 5px 0;
  }

  .game-hub {
    height: clamp(285px, 44dvh, 365px);
    border-radius: 11px;
  }

  .game-hub.has-active-game:not(.is-collapsed) {
    height: clamp(330px, 52dvh, 430px);
  }

  .game-hub.has-settings-open:not(.is-collapsed) {
    height: clamp(430px, 70dvh, 590px);
  }

  .game-hub.is-collapsed {
    height: 54px;
  }

  .game-hub-header {
    min-height: 54px;
    grid-template-columns: minmax(94px, 1fr) auto auto auto;
    gap: 5px;
    padding: 6px;
  }

  .game-hub-tools {
    gap: 3px;
  }

  .game-hub-tool {
    width: 32px;
    min-height: 32px;
    padding: 0;
  }

  .game-hub-tool span {
    display: none;
  }

  .game-hub-brand {
    gap: 6px;
  }

  .game-hub-brand > span {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .game-hub-brand strong {
    font-size: 9px;
  }

  .game-hub-brand small {
    display: none;
  }

  .game-hub-balance {
    min-width: 0;
    gap: 0 4px;
    padding: 5px 7px;
  }

  .game-hub-balance > span,
  .game-hub-balance small {
    display: none;
  }

  .game-hub-balance strong {
    font-size: 8px;
    white-space: nowrap;
  }

  .game-hub-balance strong b {
    font-size: 10px;
  }

  .game-hub-collapse {
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
  }

  .game-admin-panel {
    height: calc(100% - 54px);
    padding: 9px;
    overflow: hidden;
  }

  .game-admin-panel > header h3 {
    font-size: 13px;
  }

  .game-admin-panel > header p {
    display: none;
  }

  .game-admin-limit {
    align-items: flex-start;
    flex-direction: column;
    padding: 9px;
  }

  .game-admin-limit > .game-admin-input {
    width: 100%;
  }

  .game-admin-list {
    max-height: calc(100% - 225px);
  }

  .game-admin-row {
    flex-wrap: wrap;
  }

  .game-admin-row > img {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .game-admin-game {
    width: calc(100% - 48px);
  }

  .game-admin-row label,
  .game-admin-card-note {
    width: calc(50% - 5px);
    flex-basis: calc(50% - 5px);
  }

  .game-admin-panel > footer {
    align-items: stretch;
    flex-direction: column;
    gap: 7px;
  }

  .game-admin-panel > footer small {
    display: none;
  }

  .game-hub-collapse span {
    display: none;
  }

  .game-hub-home,
  .game-active {
    padding: 8px;
  }

  .game-hub-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
  }

  .game-hub-intro h2 {
    font-size: 13px;
  }

  .game-hub-intro > small {
    display: none;
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .game-tile {
    min-height: 106px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
  }

  .game-tile-art {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .game-tile > button {
    height: 28px;
    grid-column: 1 / -1;
  }

  .game-active-top {
    gap: 7px;
  }

  .game-active-top > button {
    width: 34px;
    padding: 0;
    font-size: 0;
  }

  .game-active-top .game-active-art {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .game-active-top > div > div > small {
    max-width: 48vw;
  }

  .game-bet-control {
    min-height: 58px;
    gap: 6px;
    padding-top: 6px;
  }

  .game-bet-control label {
    width: 55%;
  }

  .game-bet-control label > small {
    display: none;
  }

  .game-bet-control > button {
    min-width: 0;
    width: 45%;
    padding: 0 7px;
  }

  .blackjack-table,
  .slots-machine,
  .coin-flip-stage,
  .dice-stage,
  .high-low-stage,
  .lucky-number-stage,
  .wheel-stage,
  .treasure-stage,
  .color-stage {
    min-height: 160px;
  }

  .blackjack-table {
    padding: 7px;
  }

  .blackjack-divider {
    margin-inline: 5px;
  }

  .playing-card {
    width: 43px;
    height: 62px;
    flex-basis: 43px;
    margin-left: -10px;
  }

  .blackjack-hand > div {
    min-height: 66px;
    padding-left: 10px;
  }

  .blackjack-actions button {
    min-width: 68px;
  }

  .blackjack-actions span {
    display: none;
  }

  .slots-machine {
    min-height: 165px;
    padding: 12px;
  }

  .slot-reel {
    height: 90px;
  }

  .slot-symbol {
    width: 39px;
    height: 39px;
  }

  .flip-coin,
  .dice-face {
    width: 72px;
    height: 72px;
  }

  .game-choice-row button {
    min-width: 82px;
  }

  .high-low-stage {
    grid-template-columns: minmax(80px, 1fr) 23px minmax(80px, 1fr);
    gap: 7px;
    padding: 8px;
  }

  .number-card {
    height: 100px;
  }

  .number-card strong {
    font-size: 31px;
  }

  .lucky-number-stage {
    grid-template-columns: 76px minmax(150px, 1fr);
    gap: 9px;
  }

  .lottery-ball {
    width: 68px;
    height: 68px;
  }

  .lottery-ball span {
    font-size: 24px;
  }

  .number-grid {
    grid-template-columns: repeat(4, minmax(28px, 1fr));
    gap: 4px;
  }

  .number-grid button {
    height: 29px;
  }

  .lucky-wheel {
    width: 150px;
    height: 150px;
  }

  .lucky-wheel > span {
    width: 31px;
    font-size: 5.5px;
    transform: translate(-50%, -50%) rotate(var(--segment-angle)) translateY(-53px);
  }

  .treasure-grid,
  .color-grid {
    gap: 5px;
  }

  .treasure-chest,
  .color-panel {
    min-height: 88px;
  }

  .treasure-chest span {
    width: 40px;
    height: 40px;
  }

  .treasure-chest .game-svg {
    width: 28px;
    height: 28px;
  }

  .color-panel span {
    width: 34px;
    height: 34px;
  }

  .game-result {
    right: 7px;
    bottom: 6px;
    left: 7px;
    min-height: 104px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
  }

  .game-result-icon {
    width: 40px;
    height: 40px;
  }

  .game-result-icon .game-svg {
    width: 21px;
    height: 21px;
  }

  .game-result h3 {
    font-size: 11px;
  }

  .game-result > div:nth-child(2) > strong {
    font-size: 13px;
  }

  .game-result-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 5px;
  }

  .game-result-actions button {
    min-width: 0;
    flex: 1;
  }

  .game-wallet-flow {
    gap: 4px;
  }

  .game-wallet-flow > span {
    min-width: 0;
    flex: 1;
    padding: 4px 5px;
  }

  .game-wallet-flow b {
    font-size: 8px;
  }

  .game-age-actions {
    grid-template-columns: 1fr;
  }
}

/* Dokunmatik tarayıcılarda 16px altı form yazıları otomatik sayfa yakınlaştırması başlatmaz. */
@media (max-width: 1366px), (hover: none) and (pointer: coarse) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}

@supports (-webkit-touch-callout: none) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
  textarea,
  select {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}

@media (max-width: 420px) {
  .game-grid {
    grid-template-columns: 1fr;
  }

  .treasure-grid,
  .color-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-hub *,
  .game-age-modal {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Tablet düzeni: 7–11 inç ekranlarda eksiksiz, ferah ve dokunmatik kullanım. */
.tablet-members-button {
  display: none;
}

@media (min-width: 681px) and (max-width: 1100px) {
  .chat-app {
    grid-template-columns: 58px clamp(188px, 23vw, 228px) minmax(0, 1fr);
  }

  .room-rail {
    width: 58px;
    padding-inline: 7px;
  }

  .rail-brand,
  .rail-room,
  .rail-button {
    width: 42px;
    height: 42px;
  }

  .channel-panel {
    min-width: 0;
  }

  .channel-brand {
    min-height: 64px;
    padding-inline: 12px;
  }

  .channel-scroll {
    padding-inline: 8px;
  }

  .conversation-header {
    height: 64px;
    min-height: 64px;
    gap: 6px;
    padding: 0 8px;
  }

  .header-channel-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .header-title {
    width: clamp(92px, 14vw, 142px);
    flex-basis: clamp(92px, 14vw, 142px);
  }

  .header-title strong {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-title span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-navigation {
    min-width: 0;
  }

  .top-links {
    display: none;
  }

  .top-social-tabs {
    width: clamp(205px, 29vw, 270px);
    flex-basis: clamp(205px, 29vw, 270px);
  }

  .top-social-tabs .top-icon {
    min-width: 38px;
    padding-inline: 2px;
  }

  .top-social-tabs .top-icon > span {
    font-size: 16px;
  }

  .conversation-header > .header-actions {
    order: 4;
    display: flex;
    flex: 0 0 auto;
  }

  .conversation-header > .header-actions .header-search {
    display: none;
  }

  .header-actions button,
  .tablet-members-button {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
  }

  .tablet-members-button b {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    place-items: center;
    color: #fff;
    font-size: 7px;
    background: #ff4964;
    border: 2px solid #202c33;
    border-radius: 999px;
  }

  .conversation-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-panel {
    top: 64px;
    bottom: 0;
    width: min(370px, 48vw);
    height: auto;
    border-left: 1px solid #32434d;
    box-shadow: -22px 0 60px rgba(0, 0, 0, 0.48);
    transform: translateX(105%);
  }

  .member-panel.open {
    transform: translateX(0);
  }

  .status-panel-title {
    min-height: 54px;
  }

  .member-search {
    min-height: 48px;
    margin-inline: 10px;
  }

  .member-list .member-item {
    min-height: 64px;
    margin-block: 4px;
  }

  .messages-scroll {
    padding: 12px clamp(12px, 2.2vw, 28px) 8px;
  }

  .messages-scroll .message-content,
  .messages-scroll .message-row.own .message-content {
    max-width: min(720px, calc(100vw - 330px));
  }

  .composer {
    min-height: 62px;
    gap: 7px;
    padding: 9px 10px;
  }

  .composer-button,
  .send-button {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .composer textarea,
  #message-input {
    min-height: 42px;
    font-size: 16px;
  }

  .modal {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
  }

  .mobile-management-modal .mobile-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 780px) {
  .chat-app {
    grid-template-columns: 54px 184px minmax(0, 1fr);
  }

  .room-rail {
    width: 54px;
    padding-inline: 6px;
  }

  .rail-brand,
  .rail-room,
  .rail-button {
    width: 40px;
    height: 40px;
  }

  .header-channel-icon {
    display: none;
  }

  .header-title {
    width: 88px;
    flex-basis: 88px;
  }

  .header-title span {
    display: none;
  }

  .top-social-tabs {
    width: 190px;
    flex-basis: 190px;
  }

  .top-social-tabs .top-icon {
    min-width: 36px;
  }

  .header-actions button,
  .tablet-members-button {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .member-panel {
    width: min(350px, 56vw);
  }

  .messages-scroll .message-content,
  .messages-scroll .message-row.own .message-content {
    max-width: calc(100vw - 286px);
  }
}

/* Sistem erişim engeli */
.access-ban-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  color: #f7fbff;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 49, 87, .18), transparent 34%),
    linear-gradient(145deg, #080d12 0%, #0a1117 55%, #100a0e 100%);
}

.access-ban-overlay.hidden { display: none; }

.access-ban-grid {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.access-ban-card {
  position: relative;
  width: min(680px, 100%);
  padding: clamp(32px, 6vw, 64px);
  text-align: center;
  border: 1px solid rgba(255, 78, 105, .46);
  border-radius: 30px;
  background: rgba(15, 25, 32, .94);
  box-shadow: 0 35px 100px rgba(0,0,0,.55), 0 0 70px rgba(255,49,87,.09);
  backdrop-filter: blur(20px);
}

.access-ban-icon {
  display: grid;
  place-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto 24px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 27px;
  background: linear-gradient(145deg, #ff3157, #b91f44);
  box-shadow: 0 18px 40px rgba(255,49,87,.28);
}

.access-ban-icon .ui-icon { width: 34px; height: 34px; }
.access-ban-kicker { display: block; color: #ff6b82; font-size: 11px; font-weight: 900; letter-spacing: .18em; }
.access-ban-card h2 { margin: 12px 0 10px; font-size: clamp(38px, 7vw, 72px); line-height: 1; letter-spacing: -.045em; }
.access-ban-card > p { max-width: 520px; margin: 0 auto 28px; color: #aebdc7; font-size: clamp(15px, 2vw, 18px); line-height: 1.65; }
.access-ban-reason { padding: 17px 20px; text-align: left; border: 1px solid #30424d; border-radius: 15px; background: #101b22; }
.access-ban-reason span { display: block; margin-bottom: 5px; color: #7f929e; font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.access-ban-reason strong { color: #fff; font-size: 14px; line-height: 1.5; }
#access-ban-exit { width: 100%; min-height: 50px; margin-top: 18px; color: #fff; font-weight: 850; border: 0; border-radius: 14px; background: #ff3157; cursor: pointer; }
#access-ban-exit:hover { background: #ff4969; transform: translateY(-1px); }

.system-ban-section { margin-top: 16px; padding: 14px; border: 1px solid #2b3d47; border-radius: 15px; background: rgba(8,17,23,.34); }
.system-ban-list { display: grid; gap: 9px; margin-top: 9px; }
.system-ban-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(255,49,87,.34); border-radius: 13px; background: rgba(255,49,87,.07); }
.system-ban-card.device { border-color: rgba(255,160,78,.32); background: rgba(255,160,78,.06); }
.system-ban-symbol { display: grid; place-items: center; width: 42px; height: 42px; color: #ff6b82; border-radius: 12px; background: rgba(255,49,87,.12); }
.system-ban-card.device .system-ban-symbol { color: #ffae61; background: rgba(255,160,78,.12); }
.system-ban-symbol .ui-icon { width: 19px; height: 19px; }
.system-ban-card div { min-width: 0; }
.system-ban-card strong, .system-ban-card small, .system-ban-card p, .system-ban-card time { display: block; }
.system-ban-card strong { overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.system-ban-card small { margin-top: 2px; color: #8fa2ae; font-size: 11px; }
.system-ban-card p { margin: 6px 0 0; color: #c2ced5; font-size: 11px; line-height: 1.45; }
.system-ban-card time { margin-top: 5px; color: #718590; font-size: 10px; }
.system-ban-card button { min-height: 36px; padding: 0 13px; color: #ff8699; font-size: 11px; font-weight: 850; border: 1px solid rgba(255,73,105,.4); border-radius: 10px; background: rgba(255,49,87,.08); cursor: pointer; }
.system-ban-card button:hover { color: #fff; background: #d92d4d; }

@media (max-width: 680px) {
  .access-ban-overlay { padding: 12px; }
  .access-ban-card { padding: 34px 20px 22px; border-radius: 23px; }
  .access-ban-icon { width: 72px; height: 72px; border-radius: 23px; }
  .system-ban-card { grid-template-columns: 38px minmax(0,1fr); }
  .system-ban-card button { grid-column: 1 / -1; width: 100%; }
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

button,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

button[data-profile-id] {
  padding: 0;
  cursor: pointer;
  color: inherit;
  background: transparent;
}

button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.78);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(160, 166, 185, 0.22);
  border: 3px solid transparent;
  border-radius: 20px;
  background-clip: padding-box;
}

.hidden {
  display: none !important;
}

.auth-screen {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: minmax(460px, 1.18fr) minmax(420px, 0.82fr);
  background: #11131a;
}

.auth-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 42px 7.5vw;
  background:
    radial-gradient(circle at 12% 8%, rgba(124, 92, 255, 0.32), transparent 31%),
    radial-gradient(circle at 86% 82%, rgba(39, 198, 165, 0.2), transparent 30%),
    linear-gradient(145deg, #171526 0%, #11141d 54%, #111d20 100%);
}

.auth-visual::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom right, black, transparent 70%);
}

.auth-orb {
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(1px);
}

.auth-orb-one {
  top: 14%;
  right: 7%;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 50px rgba(124, 92, 255, 0.08),
    0 0 90px rgba(124, 92, 255, 0.1);
}

.auth-orb-two {
  right: 30%;
  bottom: -90px;
  width: 260px;
  height: 260px;
  background: rgba(39, 198, 165, 0.06);
  border: 1px solid rgba(39, 198, 165, 0.12);
}

.auth-brand,
.auth-mobile-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

.brand-mark,
.rail-brand {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent),
    var(--accent);
  border-radius: 12px 12px 12px 4px;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.3);
}

.auth-copy {
  position: absolute;
  top: 50%;
  left: 7.5vw;
  width: min(620px, 76%);
  transform: translateY(-52%);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  color: #cac4ff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.3px;
}

.eyebrow i {
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.auth-copy .auth-hero-title {
  margin: 0;
  color: white;
  font-family: var(--font-display);
  font-size: clamp(58px, 6.4vw, 98px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -6px;
}

.auth-copy .auth-hero-title em {
  color: transparent;
  font-style: normal;
  background: linear-gradient(110deg, #a995ff 10%, #70e2c7 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.auth-copy > p {
  max-width: 530px;
  margin: 30px 0 32px;
  color: #aeb4c4;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.65;
}

.auth-proof {
  display: flex;
  align-items: center;
  gap: 16px;
}

.proof-avatars {
  display: flex;
}

.proof-avatars span {
  display: grid;
  width: 37px;
  height: 37px;
  margin-left: -9px;
  place-items: center;
  color: white;
  font-weight: 800;
  background: var(--avatar);
  border: 3px solid #171923;
  border-radius: 50%;
}

.proof-avatars span:first-child {
  margin-left: 0;
}

.auth-proof strong,
.auth-proof small {
  display: block;
}

.auth-proof strong {
  color: #e8eaf2;
  font-size: 13px;
}

.auth-proof small {
  margin-top: 3px;
  color: #7f8799;
  font-size: 11px;
}

.floating-chat {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  background: rgba(29, 32, 43, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  animation: float 6s ease-in-out infinite;
}

.chat-one {
  right: 6%;
  bottom: 18%;
}

.chat-two {
  top: 19%;
  right: 18%;
  animation-delay: -2.5s;
}

.floating-chat strong,
.floating-chat span {
  display: block;
}

.floating-chat strong {
  font-size: 12px;
}

.floating-chat span {
  margin-top: 2px;
  color: #949bad;
  font-size: 10px;
}

.live-dot {
  width: 11px;
  height: 11px;
  margin: 0 5px 0 2px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(39, 198, 165, 0.12);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.auth-panel {
  display: grid;
  min-width: 0;
  padding: 34px clamp(30px, 6vw, 92px);
  place-items: center;
  background: #f7f8fb;
  color: #20232e;
}

.auth-card {
  width: min(100%, 410px);
}

.auth-mobile-brand {
  display: none;
  margin-bottom: 32px;
  color: #20232e;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
  padding: 4px;
  background: #ebeef4;
  border-radius: 12px;
}

.auth-tab {
  min-width: 0;
  padding: 8px 15px;
  cursor: pointer;
  color: #7b8190;
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border-radius: 9px;
}

.auth-tab.active {
  color: #20232e;
  background: white;
  box-shadow: 0 4px 14px rgba(40, 45, 60, 0.08);
}

.auth-heading {
  margin: 29px 0 26px;
}

.auth-heading h2 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -1.2px;
}

.auth-heading p {
  margin: 0;
  color: #7b8190;
  font-size: 13px;
}

.field {
  display: block;
  margin-bottom: 17px;
}

.field > span {
  display: block;
  margin: 0 0 7px 2px;
  color: #575e6d;
  font-size: 11px;
  font-weight: 700;
}

.field > input,
.input-shell {
  width: 100%;
  background: white;
  border: 1px solid #e0e3e9;
  border-radius: 12px;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

.field > input {
  height: 50px;
  padding: 0 16px;
  color: #20232e;
}

.input-shell {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 13px;
}

.input-shell:focus-within,
.field > input:focus {
  border-color: rgba(var(--accent-rgb), 0.58);
  outline: 0;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
}

.input-shell b {
  color: #9ca2af;
  font-size: 14px;
}

.input-shell input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px;
  color: #20232e;
  background: transparent;
  border: 0;
  outline: 0;
}

.input-action {
  cursor: pointer;
  color: #9ca2af;
  background: transparent;
}

.form-error {
  min-height: 18px;
  margin: -4px 0 7px;
  color: #df3556;
  font-size: 11px;
}

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 50px;
  cursor: pointer;
  color: white;
  font-weight: 700;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent),
    var(--accent);
  border-radius: 12px;
  box-shadow: 0 13px 28px rgba(var(--accent-rgb), 0.24);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(var(--accent-rgb), 0.32);
}

.auth-submit {
  width: 100%;
}

.auth-submit b {
  font-size: 18px;
  font-weight: 400;
}

.auth-submit.loading span::after {
  display: inline-block;
  content: "•••";
  letter-spacing: 2px;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    opacity: 0.35;
  }
}

.tiny-avatar,
.avatar {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.23), transparent 55%),
    var(--avatar, var(--accent));
  border-radius: 36% 36% 36% 14%;
}

.tiny-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
}

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

.auth-note {
  margin: 19px 0 0;
  color: #a1a6b1;
  text-align: center;
  font-size: 10px;
}

/* App shell */

.chat-app {
  display: grid;
  width: 100vw;
  height: 100dvh;
  grid-template-columns: 74px 252px minmax(0, 1fr);
  background: var(--bg);
}

.room-rail {
  display: flex;
  z-index: 20;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  background: #101219;
  border-right: 1px solid var(--line);
}

.rail-brand {
  width: 45px;
  height: 45px;
  cursor: pointer;
  border-radius: 15px 15px 15px 6px;
}

.rail-separator {
  width: 31px;
  height: 1px;
  margin: 0 0 2px;
  background: var(--line);
}

.room-rail-list {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-y: auto;
  scrollbar-width: none;
}

.room-rail-list::-webkit-scrollbar {
  display: none;
}

.rail-room,
.rail-button {
  position: relative;
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
  color: #a8adba;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  background: var(--panel-2);
  border-radius: 50%;
  transition:
    color 0.18s,
    background 0.18s,
    border-radius 0.18s,
    transform 0.18s;
}

.rail-room:hover,
.rail-room.active {
  color: white;
  background: var(--room-color, var(--accent));
  border-radius: 14px 14px 14px 5px;
  transform: translateY(-1px);
}

.rail-room::before {
  position: absolute;
  top: 50%;
  left: -10px;
  width: 4px;
  height: 0;
  content: "";
  background: white;
  border-radius: 0 4px 4px 0;
  transform: translateY(-50%);
  transition: height 0.18s;
}

.rail-room.active::before {
  height: 25px;
}

.rail-room[data-count]::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  content: attr(data-count);
  color: white;
  font-family: var(--font-body);
  font-size: 8px;
  background: var(--danger);
  border: 3px solid #101219;
  border-radius: 20px;
}

.rail-button {
  color: var(--green);
  font-size: 21px;
}

.rail-button:hover {
  color: white;
  background: var(--green);
  border-radius: 14px 14px 14px 5px;
}

.rail-explore {
  margin-top: -2px;
  color: #8f97aa;
  font-size: 20px;
}

.channel-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.channel-brand {
  display: flex;
  height: 66px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--line);
}

.channel-brand strong,
.channel-brand span {
  display: block;
}

.channel-brand strong {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: -0.35px;
}

.channel-brand span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  background: transparent;
  border-radius: 10px;
}

.icon-button:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.channel-scroll {
  flex: 1;
  min-height: 0;
  padding: 14px 9px;
  overflow-y: auto;
}

.discovery-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 11px;
  cursor: pointer;
  color: #d8d9f5;
  text-align: left;
  background:
    linear-gradient(120deg, rgba(var(--accent-rgb), 0.21), rgba(39, 198, 165, 0.07)),
    var(--panel-2);
  border: 1px solid rgba(var(--accent-rgb), 0.19);
  border-radius: 13px;
}

.discovery-card:hover {
  border-color: rgba(var(--accent-rgb), 0.42);
}

.discovery-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: white;
  font-size: 17px;
  background: var(--accent);
  border-radius: 11px 11px 11px 4px;
}

.discovery-card > span:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.discovery-card strong,
.discovery-card small {
  display: block;
}

.discovery-card strong {
  font-size: 11px;
}

.discovery-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.discovery-card b {
  color: var(--accent);
  font-size: 15px;
}

.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  margin: 16px 0 7px;
  color: #6f7585;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.section-label button {
  cursor: pointer;
  color: #737a8a;
  font-size: 15px;
  background: transparent;
}

.section-label button:hover {
  color: var(--text);
}

.channel-nav {
  display: grid;
  gap: 2px;
}

.channel-item {
  position: relative;
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  cursor: pointer;
  color: #9399a9;
  text-align: left;
  background: transparent;
  border-radius: 9px;
}

.channel-item:hover,
.channel-item.active {
  color: #e6e8ef;
  background: var(--panel-hover);
}

.channel-item.active::before {
  position: absolute;
  left: 0;
  width: 3px;
  height: 16px;
  content: "";
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}

.channel-item > span {
  width: 19px;
  color: #737a8c;
  text-align: center;
  font-size: 17px;
}

.channel-item.active > span {
  color: var(--accent);
}

.channel-item b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-item small {
  color: var(--muted);
  font-size: 9px;
}

.channel-item i {
  display: none;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  color: white;
  font-size: 8px;
  font-style: normal;
  line-height: 17px;
  text-align: center;
  background: var(--danger);
  border-radius: 20px;
}

.channel-item i:not(:empty) {
  display: inline-block;
}

.private-lock {
  margin-left: auto;
  color: var(--muted);
  font-size: 9px;
}

.friend-mini-list {
  display: grid;
  gap: 3px;
}

.empty-mini {
  padding: 8px 9px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.friend-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  cursor: pointer;
  color: var(--text-2);
  background: transparent;
  border-radius: 9px;
}

.friend-mini:hover {
  background: var(--panel-hover);
}

.friend-mini > span:last-child {
  min-width: 0;
}

.friend-mini strong,
.friend-mini small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-mini strong {
  font-size: 10px;
}

.friend-mini small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.online-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  background: #606675;
  border: 2px solid var(--panel);
  border-radius: 50%;
}

.online-dot.online {
  background: var(--green);
}

.online-dot.busy {
  background: var(--danger);
}

.current-user-bar {
  display: flex;
  min-height: 62px;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  padding: 10px 9px 10px 12px;
  background: rgba(10, 12, 17, 0.34);
  border-top: 1px solid var(--line);
}

.current-user-bar .user-summary {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: inherit;
  text-align: left;
  background: transparent;
}

.current-user-bar .user-summary > div:last-child {
  min-width: 0;
}

.current-user-bar strong,
.current-user-bar small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-user-bar strong {
  font-size: 10px;
}

.current-user-bar small {
  margin-top: 2px;
  color: var(--green);
  font-size: 8px;
}

.user-bar-actions {
  display: flex;
}

.user-bar-actions button {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  background: transparent;
  border-radius: 8px;
}

.user-bar-actions button:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.conversation-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background:
    radial-gradient(circle at 42% 115%, rgba(var(--accent-rgb), 0.04), transparent 40%),
    var(--bg-soft);
}

.conversation-header {
  display: flex;
  height: 66px;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  padding: 0 18px;
  background: rgba(19, 22, 30, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(15px);
}

.header-channel-icon {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  color: var(--room-color, var(--accent));
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  background: rgba(var(--accent-rgb), 0.09);
  border-radius: 11px;
}

.header-title {
  min-width: 0;
}

.header-title strong,
.header-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-title strong {
  font-family: var(--font-display);
  font-size: 13px;
}

.header-title span {
  max-width: 400px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
}

.header-spacer {
  flex: 1;
}

.header-search {
  display: flex;
  width: min(220px, 22vw);
  height: 34px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.header-search input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 10px;
}

.header-actions {
  display: flex;
  gap: 3px;
}

.header-actions button {
  display: grid;
  width: 35px;
  height: 35px;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 16px;
  background: transparent;
  border-radius: 10px;
}

.header-actions button:hover,
.header-actions button.active {
  color: var(--text);
  background: var(--panel-hover);
}

.conversation-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 232px;
}

.messages-column {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.messages-scroll {
  flex: 1;
  min-height: 0;
  padding: 16px 15px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.new-messages-button {
  position: absolute;
  z-index: 24;
  right: 22px;
  bottom: 82px;
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  color: #eafff8;
  font-size: 11px;
  font-weight: 850;
  background: rgba(0, 168, 132, 0.96);
  border: 1px solid rgba(104, 238, 202, 0.42);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36), 0 0 18px rgba(0, 168, 132, 0.16);
  backdrop-filter: blur(12px);
  transition: transform 150ms ease, opacity 150ms ease, background 150ms ease;
}

.new-messages-button:hover {
  background: #00b894;
  transform: translateY(-2px);
}

.new-messages-button b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  color: #07352a;
  font-size: 9px;
  background: #a7f3d0;
  border-radius: 999px;
}

.new-messages-button .ui-icon {
  width: 15px;
  height: 15px;
}

.room-hero {
  position: relative;
  margin: 8px 4px 24px;
  padding: 25px 24px;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(var(--accent-rgb), 0.16), rgba(39, 198, 165, 0.045)),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.room-hero::after {
  position: absolute;
  top: -60px;
  right: -30px;
  width: 190px;
  height: 190px;
  content: "";
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 67%);
}

.room-hero-icon {
  display: grid;
  width: 45px;
  height: 45px;
  margin-bottom: 14px;
  place-items: center;
  color: white;
  font-size: 21px;
  background: var(--room-color, var(--accent));
  border-radius: 15px 15px 15px 6px;
  box-shadow: 0 10px 25px rgba(var(--accent-rgb), 0.2);
}

.room-hero h2 {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.5px;
}

.room-hero p {
  max-width: 550px;
  margin: 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.55;
}

.room-hero-meta {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 9px;
}

.date-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.date-divider::before,
.date-divider::after {
  flex: 1;
  height: 1px;
  content: "";
  background: var(--line);
}

.message-row {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 10px;
}

.message-row:hover {
  background: rgba(255, 255, 255, 0.025);
}

.message-row.compact {
  padding-top: 2px;
  padding-bottom: 2px;
}

.message-row.own {
  --bubble-color: rgba(var(--accent-rgb), 0.16);
}

.message-content {
  min-width: 0;
  flex: 1;
}

.message-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 2px;
}

.message-author {
  cursor: pointer;
  color: var(--author-color, var(--text));
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
}

.message-author:hover {
  text-decoration: underline;
}

.rank-chip {
  padding: 2px 5px;
  color: var(--accent);
  font-size: 7px;
  font-weight: 800;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.15);
  border-radius: 5px;
  text-transform: uppercase;
}

.message-time {
  color: #626979;
  font-size: 8px;
}

.message-edited {
  color: #555c6b;
  font-size: 7px;
}

.message-bubble {
  display: inline-block;
  max-width: min(720px, 90%);
  padding: 7px 10px;
  color: #d9dce5;
  font-size: 11px;
  line-height: 1.48;
  word-break: break-word;
  white-space: pre-wrap;
  background: var(--bubble-color, rgba(255, 255, 255, 0.035));
  border-radius: 4px 12px 12px 12px;
}

.message-bubble a {
  color: #75cfff;
}

.message-bubble .mention {
  padding: 1px 3px;
  color: #b5a8ff;
  background: rgba(var(--accent-rgb), 0.17);
  border-radius: 4px;
}

.message-bubble.deleted {
  color: var(--muted);
  font-style: italic;
}

.reply-quote {
  display: flex;
  max-width: 570px;
  gap: 7px;
  margin: 0 0 4px;
  padding: 5px 8px;
  color: #858c9c;
  font-size: 9px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--accent);
  border-radius: 0 7px 7px 0;
}

.message-media {
  display: block;
  max-width: min(520px, 86%);
  margin-top: 5px;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.message-media img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  cursor: zoom-in;
}

.message-media audio {
  display: block;
  width: min(340px, 80vw);
  height: 44px;
}

.message-actions {
  position: absolute;
  top: -18px;
  right: 10px;
  display: none;
  padding: 3px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.message-row:hover .message-actions {
  display: flex;
}

.message-actions button {
  display: grid;
  width: 26px;
  height: 24px;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  background: transparent;
  border-radius: 6px;
}

.message-actions button:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}

.reaction {
  padding: 3px 7px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.reaction.mine {
  color: #d7d1ff;
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.36);
}

.read-ticks {
  margin-left: 5px;
  color: #36c5f0;
  font-size: 9px;
}

.typing-indicator {
  height: 21px;
  flex: 0 0 auto;
  padding: 2px 22px 0;
  color: var(--muted);
  font-size: 9px;
}

.typing-indicator strong {
  color: var(--text-2);
}

.typing-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 3px;
}

.typing-dots i {
  width: 3px;
  height: 3px;
  background: var(--muted);
  border-radius: 50%;
  animation: type 1s infinite alternate;
}

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

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

@keyframes type {
  to {
    transform: translateY(-3px);
    opacity: 0.4;
  }
}

.reply-strip {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 10px;
  margin: 0 16px;
  padding: 8px 12px;
  color: var(--text-2);
  font-size: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 11px 11px 0 0;
}

.reply-strip strong {
  color: var(--accent);
}

.reply-strip span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reply-strip button {
  cursor: pointer;
  color: var(--muted);
  background: transparent;
}

.composer {
  display: flex;
  min-height: 63px;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 16px 13px;
}

.composer-input-wrap {
  display: flex;
  min-width: 0;
  min-height: 42px;
  flex: 1;
  align-items: flex-end;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

.composer-input-wrap:focus-within {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.05);
}

.composer textarea {
  width: 100%;
  min-width: 0;
  max-height: 120px;
  resize: none;
  padding: 12px 2px 10px 13px;
  overflow-y: auto;
  color: var(--text);
  font-size: 11px;
  line-height: 1.45;
  background: transparent;
  border: 0;
  outline: 0;
}

.composer textarea::placeholder {
  color: #666d7e;
}

.composer-inline {
  width: 38px;
  height: 40px;
  flex: 0 0 auto;
  cursor: pointer;
  color: #7f8696;
  font-size: 17px;
  background: transparent;
}

.composer-button,
.send-button {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 17px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.composer-button:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.composer-button.recording {
  color: white;
  background: var(--danger);
  animation: pulse 1.3s infinite;
}

.send-button {
  color: white;
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(var(--accent-rgb), 0.22);
}

.send-button:hover {
  filter: brightness(1.09);
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 7px rgba(255, 85, 116, 0.12);
  }
}

.member-panel {
  min-width: 0;
  background: rgba(24, 27, 36, 0.72);
  border-left: 1px solid var(--line);
}

.member-search {
  display: flex;
  height: 52px;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.member-search input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 10px;
}

.member-list {
  height: calc(100% - 52px);
  padding: 10px;
  overflow-y: auto;
}

.member-group-label {
  margin: 11px 7px 6px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.7px;
}

.member-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 7px;
  cursor: pointer;
  color: var(--text-2);
  text-align: left;
  background: transparent;
  border-radius: 10px;
}

.member-item:hover {
  background: var(--panel-hover);
}

.member-item.offline {
  opacity: 0.48;
}

.member-item > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.member-item strong,
.member-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-item strong {
  color: var(--member-color, var(--text-2));
  font-size: 10px;
}

.member-item small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.member-role {
  color: var(--accent);
  font-size: 10px;
}

.empty-state {
  display: grid;
  min-height: 280px;
  padding: 30px;
  place-items: center;
  text-align: center;
}

.empty-state > div {
  max-width: 360px;
}

.empty-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  place-items: center;
  color: var(--accent);
  font-size: 24px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 19px 19px 19px 7px;
}

.empty-state h3 {
  margin: 0 0 7px;
  font-family: var(--font-display);
  font-size: 16px;
}

.empty-state p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.small-button,
.ghost-button,
.danger-button {
  min-height: 34px;
  padding: 0 13px;
  cursor: pointer;
  color: white;
  font-size: 10px;
  font-weight: 700;
  background: var(--accent);
  border-radius: 9px;
}

.ghost-button {
  color: var(--text-2);
  background: var(--panel-3);
  border: 1px solid var(--line);
}

.danger-button {
  background: var(--danger);
}

.mobile-nav {
  display: none;
}

/* Modal system */

.modal-root:not(:empty) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  padding: 24px;
  place-items: center;
  background: rgba(6, 8, 12, 0.7);
  backdrop-filter: blur(6px);
}

.modal {
  width: min(580px, 100%);
  max-height: min(760px, calc(100dvh - 42px));
  overflow: hidden;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  animation: modal-in 0.2s ease-out;
}

.modal.wide {
  width: min(820px, 100%);
}

.modal.compact {
  width: min(430px, 100%);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
}

.modal-header {
  display: flex;
  min-height: 60px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}

.modal-header > div {
  flex: 1;
  min-width: 0;
}

.modal-header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
}

.modal-header p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 9px;
}

.modal-close {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 17px;
  background: var(--panel-2);
  border-radius: 9px;
}

.modal-body {
  max-height: calc(100dvh - 150px);
  padding: 18px;
  overflow-y: auto;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(8, 10, 14, 0.22);
  border-top: 1px solid var(--line);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.dark-field {
  display: block;
}

.dark-field > span {
  display: block;
  margin: 0 0 6px 2px;
  color: var(--text-2);
  font-size: 9px;
  font-weight: 700;
}

.dark-field input,
.dark-field textarea,
.dark-field select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: 0;
}

.dark-field textarea {
  min-height: 90px;
  resize: vertical;
}

.dark-field input:focus,
.dark-field textarea:focus,
.dark-field select:focus {
  border-color: rgba(var(--accent-rgb), 0.48);
}

.dark-field option {
  background: var(--panel-2);
}

.switch-row {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.switch-row > div {
  flex: 1;
  min-width: 0;
}

.switch-row strong,
.switch-row small {
  display: block;
}

.switch-row strong {
  font-size: 10px;
}

.switch-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
}

.switch-row input {
  accent-color: var(--accent);
}

.modal-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  overflow-x: auto;
  background: var(--panel-2);
  border-radius: 11px;
}

.modal-tabs button {
  min-height: 31px;
  padding: 0 12px;
  cursor: pointer;
  color: var(--muted);
  white-space: nowrap;
  background: transparent;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}

.modal-tabs button.active {
  color: var(--text);
  background: var(--panel-hover);
}

.profile-cover {
  position: relative;
  height: 105px;
  margin: -18px -18px 55px;
  background:
    radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.2), transparent 22%),
    linear-gradient(125deg, var(--profile-color, var(--accent)), #172334);
}

.profile-cover .avatar {
  position: absolute;
  bottom: -39px;
  left: 22px;
  width: 78px;
  height: 78px;
  font-size: 24px;
  border: 5px solid var(--panel);
  border-radius: 26px 26px 26px 10px;
}

.profile-cover .online-dot {
  right: 0;
  bottom: 0;
  width: 17px;
  height: 17px;
  border-width: 4px;
}

.profile-actions {
  position: absolute;
  right: 16px;
  bottom: -40px;
  display: flex;
  gap: 6px;
}

.profile-title {
  margin-bottom: 16px;
}

.profile-title h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 21px;
}

.profile-title p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.profile-section {
  padding: 13px;
  margin-top: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.profile-section > span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.profile-section p {
  margin: 0;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.55;
}

.profile-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-facts span {
  padding: 5px 8px;
  color: var(--text-2);
  font-size: 8px;
  background: var(--panel-3);
  border-radius: 7px;
}

.profile-room-section {
  padding: 12px;
}

.profile-room-links {
  display: grid;
  gap: 8px;
}

.profile-room-links button {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 22px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 8px 10px;
  gap: 10px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--profile-room-color) 12%, transparent), transparent 58%),
    var(--panel-3);
  border: 1px solid color-mix(in srgb, var(--profile-room-color) 38%, var(--line));
  border-radius: 12px;
  box-shadow: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.profile-room-links button:hover,
.profile-room-links button:focus-visible {
  transform: translateY(-1px);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--profile-room-color) 18%, transparent), transparent 68%),
    var(--panel-3);
  border-color: var(--profile-room-color);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--profile-room-color) 14%, transparent);
  outline: none;
}

.profile-room-links button > i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--text);
  font-size: 17px;
  font-style: normal;
  background: color-mix(in srgb, var(--profile-room-color) 22%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--profile-room-color) 42%, transparent);
  border-radius: 11px;
}

.profile-room-links button > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.profile-room-links button strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-room-links button small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
}

.profile-room-links button small .ui-icon,
.profile-room-links button > b .ui-icon {
  width: 13px;
  height: 13px;
}

.profile-room-links button > b {
  display: grid;
  place-items: center;
  color: var(--profile-room-color);
}

.room-access-denied {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px 16px 10px;
  text-align: center;
}

.room-access-denied > span {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  color: #ff6680;
  border: 1px solid rgba(255, 102, 128, .34);
  border-radius: 20px;
  background: rgba(255, 49, 87, .09);
}

.room-access-denied > span .ui-icon { width: 27px; height: 27px; }
.room-access-denied strong { color: var(--text); font-size: 17px; }
.room-access-denied p { max-width: 320px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.room-delete-button {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  gap: 6px;
}

.owner-coin-panel {
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 209, 102, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(255, 49, 87, 0.08), rgba(255, 209, 102, 0.04)),
    var(--panel-2);
  border-color: rgba(255, 209, 102, 0.3);
}

.owner-coin-control {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.owner-coin-control > i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: #ffd166;
  background: rgba(255, 209, 102, 0.12);
  border: 1px solid rgba(255, 209, 102, 0.25);
  border-radius: 11px;
}

.owner-coin-control > div {
  min-width: 0;
}

.owner-coin-control strong,
.owner-coin-control small {
  display: block;
}

.owner-coin-control strong {
  color: #ffe4a3;
  font-size: 13px;
  font-weight: 900;
}

.owner-coin-control small {
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-coin-control button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px;
  color: #16130b;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd166, #ffb347);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(255, 179, 71, 0.12);
}

.owner-coin-control button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.system-message.system-coin {
  border-color: rgba(255, 209, 102, 0.34);
  background: linear-gradient(90deg, rgba(255, 209, 102, 0.12), rgba(255, 179, 71, 0.035));
}

.system-message.system-coin > span,
.system-message.system-coin strong {
  color: #ffe4a3;
}

@media (max-width: 520px) {
  .owner-coin-control {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .owner-coin-control button {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }
}

.list-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  margin-bottom: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.list-card > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.list-card strong,
.list-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-card strong {
  font-size: 10px;
}

.list-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 8px;
  white-space: nowrap;
}

.list-card-actions {
  display: flex;
  gap: 5px;
}

.list-card-actions button {
  display: grid;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  place-items: center;
  cursor: pointer;
  color: var(--text-2);
  font-size: 9px;
  background: var(--panel-3);
  border-radius: 8px;
}

.list-card-actions button.positive {
  color: white;
  background: var(--green);
}

.list-card-actions button.negative {
  color: white;
  background: var(--danger);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.room-card {
  position: relative;
  min-height: 145px;
  padding: 15px;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.035), transparent),
    var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.room-card::after {
  position: absolute;
  top: -50px;
  right: -40px;
  width: 130px;
  height: 130px;
  content: "";
  background: radial-gradient(circle, var(--card-color), transparent 68%);
  opacity: 0.18;
}

.room-card-icon {
  display: grid;
  width: 35px;
  height: 35px;
  margin-bottom: 10px;
  place-items: center;
  color: white;
  background: var(--card-color);
  border-radius: 11px 11px 11px 4px;
}

.room-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
}

.room-card p {
  height: 29px;
  margin: 5px 0 10px;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.room-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 8px;
}

.room-card-footer button {
  min-height: 28px;
  padding: 0 9px;
  cursor: pointer;
  color: white;
  font-size: 8px;
  font-weight: 700;
  background: var(--card-color);
  border-radius: 8px;
}

.room-order-controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--card-color, var(--accent)) 24%, var(--line));
}

.room-order-controls button {
  display: inline-flex;
  min-width: 0;
  min-height: 31px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 7px;
  cursor: pointer;
  color: #c8d7df;
  font-size: 8px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(154, 181, 194, 0.18);
  border-radius: 8px;
  transition: 160ms ease;
}

.room-order-controls button:hover {
  color: white;
  background: color-mix(in srgb, var(--card-color, var(--accent)) 18%, var(--panel-2));
  border-color: color-mix(in srgb, var(--card-color, var(--accent)) 52%, var(--line));
  box-shadow: 0 5px 18px color-mix(in srgb, var(--card-color, var(--accent)) 14%, transparent);
}

.room-order-controls .ui-icon {
  width: 13px;
  height: 13px;
}

.room-order-top-icon,
.room-order-up-icon {
  transform: rotate(180deg);
}

.room-order-top-icon {
  filter: drop-shadow(0 -3px 0 currentColor);
}

.room-order-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
  align-items: center;
  gap: 14px;
  padding: 13px;
  background: linear-gradient(135deg, rgba(0, 168, 132, 0.1), rgba(124, 92, 255, 0.06));
  border: 1px solid rgba(46, 210, 169, 0.24);
  border-radius: 12px;
}

.room-order-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.room-order-panel > div:first-child > span {
  color: #4cddba;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.room-order-panel > div:first-child > strong {
  color: white;
  font-size: 12px;
}

.room-order-panel > div:first-child > small {
  color: var(--muted);
  font-size: 8px;
}

.room-order-panel .room-order-controls {
  margin: 0;
  padding: 0;
  border: 0;
}

@media (max-width: 680px) {
  .room-order-panel {
    grid-template-columns: 1fr;
  }

  .room-order-controls button {
    min-height: 38px;
    font-size: 9px;
  }
}

.notification-card {
  display: flex;
  gap: 10px;
  padding: 11px;
  margin-bottom: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.notification-card.unread {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.19);
}

.notification-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.11);
  border-radius: 10px;
}

.notification-card strong,
.notification-card p,
.notification-card time {
  display: block;
}

.notification-card strong {
  font-size: 10px;
}

.notification-card p {
  margin: 4px 0;
  color: var(--text-2);
  font-size: 9px;
}

.notification-card time {
  color: var(--muted);
  font-size: 7px;
}

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

.market-card {
  position: relative;
  padding: 16px;
  overflow: hidden;
  text-align: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.market-card.featured {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: inset 0 0 35px rgba(var(--accent-rgb), 0.06);
}

.market-card .plan-icon {
  display: grid;
  width: 43px;
  height: 43px;
  margin: 0 auto 10px;
  place-items: center;
  color: white;
  font-size: 18px;
  background: var(--plan-color);
  border-radius: 14px 14px 14px 5px;
}

.market-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 13px;
}

.market-card p {
  min-height: 43px;
  margin: 7px 0 12px;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5;
}

.market-price {
  margin-bottom: 10px;
  color: var(--warning);
  font-size: 10px;
  font-weight: 800;
}

.moderation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.moderation-grid button {
  min-height: 42px;
  padding: 8px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.moderation-grid button:hover {
  color: var(--text);
  border-color: rgba(var(--accent-rgb), 0.3);
}

.log-list {
  display: grid;
  gap: 5px;
}

.log-item {
  display: grid;
  grid-template-columns: 78px 1fr auto;
  gap: 9px;
  padding: 8px 10px;
  color: var(--text-2);
  font-size: 8px;
  background: var(--panel-2);
  border-radius: 8px;
}

.log-item b {
  color: var(--accent);
  text-transform: uppercase;
}

.log-item time {
  color: var(--muted);
}

/* Toasts, popovers */

.toast-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 2000;
  display: grid;
  width: min(340px, calc(100vw - 32px));
  gap: 8px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(33, 37, 49, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
  animation: toast-in 0.22s ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
}

.toast-icon {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  color: white;
  background: var(--toast-color, var(--accent));
  border-radius: 9px;
}

.toast > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.toast strong,
.toast span {
  display: block;
}

.toast strong {
  font-size: 10px;
}

.toast span {
  margin-top: 3px;
  color: var(--text-2);
  font-size: 8px;
}

.toast button {
  cursor: pointer;
  color: var(--muted);
  background: transparent;
}

.emoji-popover,
.context-menu {
  position: fixed;
  z-index: 1400;
  padding: 8px;
  background: var(--panel-3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.emoji-popover {
  display: grid;
  width: 230px;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.emoji-popover button {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
  background: transparent;
  border-radius: 7px;
}

.emoji-popover button:hover {
  background: var(--panel-hover);
  transform: scale(1.1);
}

.context-menu {
  min-width: 170px;
}

.context-menu button {
  display: flex;
  width: 100%;
  min-height: 33px;
  align-items: center;
  gap: 9px;
  padding: 0 9px;
  cursor: pointer;
  color: var(--text-2);
  text-align: left;
  font-size: 9px;
  background: transparent;
  border-radius: 8px;
}

.context-menu button:hover {
  color: var(--text);
  background: var(--panel-hover);
}

.context-menu button.danger {
  color: var(--danger);
}

/* Voice and calls */

.voice-dock {
  position: fixed;
  right: 250px;
  bottom: 18px;
  z-index: 700;
  width: 280px;
  overflow: hidden;
  background: rgba(28, 31, 42, 0.96);
  border: 1px solid rgba(39, 198, 165, 0.25);
  border-radius: 16px;
  box-shadow: 0 22px 65px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(15px);
}

.voice-dock.collapsed .voice-users,
.voice-dock.collapsed .voice-actions {
  display: none;
}

.voice-dock-head {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.signal-bars {
  display: flex;
  height: 22px;
  align-items: flex-end;
  gap: 2px;
}

.signal-bars i {
  width: 3px;
  background: var(--green);
  border-radius: 2px;
}

.signal-bars i:nth-child(1) {
  height: 7px;
}

.signal-bars i:nth-child(2) {
  height: 13px;
}

.signal-bars i:nth-child(3) {
  height: 19px;
}

.voice-dock-head > div {
  flex: 1;
}

.voice-dock-head strong,
.voice-dock-head small {
  display: block;
}

.voice-dock-head strong {
  color: var(--green);
  font-size: 10px;
}

.voice-dock-head small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 8px;
}

.voice-dock-head button {
  cursor: pointer;
  color: var(--muted);
  background: transparent;
}

.voice-users {
  display: flex;
  gap: 7px;
  padding: 11px 12px 5px;
}

.voice-user {
  position: relative;
}

.voice-user.muted::after {
  position: absolute;
  right: -3px;
  bottom: -1px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  content: "×";
  color: white;
  font-size: 9px;
  background: var(--danger);
  border: 2px solid var(--panel);
  border-radius: 50%;
}

.voice-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 12px 12px;
}

.voice-actions button {
  min-height: 38px;
  cursor: pointer;
  color: var(--text-2);
  font-size: 11px;
  background: var(--panel-3);
  border-radius: 9px;
}

.voice-actions button span {
  display: block;
  margin-top: 2px;
  font-size: 7px;
}

.voice-actions button.active {
  color: white;
  background: var(--green);
}

.voice-actions button.danger {
  color: white;
  background: rgba(255, 85, 116, 0.8);
}

#voice-audio-container {
  display: none;
}

.call-overlay {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  overflow: hidden;
  background: #090b0f;
  place-items: center;
}

.call-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb), 0.3), transparent 32%),
    radial-gradient(circle at 10% 100%, rgba(39, 198, 165, 0.13), transparent 30%);
}

.remote-video-wrap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.remote-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-avatar {
  display: grid;
  width: 128px;
  height: 128px;
  place-items: center;
  color: white;
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 800;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent),
    var(--call-color, var(--accent));
  border: 6px solid rgba(255, 255, 255, 0.1);
  border-radius: 42px 42px 42px 14px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.45);
}

.call-person {
  position: absolute;
  top: calc(50% + 90px);
  text-align: center;
}

.call-person strong,
.call-person span {
  display: block;
}

.call-person strong {
  font-family: var(--font-display);
  font-size: 19px;
}

.call-person span {
  margin-top: 5px;
  color: #a4a9b7;
  font-size: 10px;
}

.local-video {
  position: absolute;
  top: 18px;
  right: 18px;
  width: min(230px, 23vw);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--panel);
  border: 2px solid rgba(255, 255, 255, 0.13);
  border-radius: 17px;
  box-shadow: var(--shadow);
  transform: scaleX(-1);
}

.call-controls {
  position: absolute;
  bottom: 34px;
  left: 50%;
  display: flex;
  gap: 9px;
  padding: 9px;
  background: rgba(23, 26, 35, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

.call-controls button {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  cursor: pointer;
  color: white;
  font-size: 17px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.call-controls button.off {
  color: var(--danger);
  background: rgba(255, 85, 116, 0.14);
}

.call-controls .hangup {
  background: var(--danger);
  transform: rotate(135deg);
}

/* Light theme */

body.light {
  --bg: #eef1f6;
  --bg-soft: #f7f8fb;
  --panel: #ffffff;
  --panel-2: #f1f3f7;
  --panel-3: #e8ebf1;
  --panel-hover: #e8ebf1;
  --text: #252937;
  --text-2: #5f6676;
  --muted: #9097a5;
  --line: rgba(30, 36, 50, 0.09);
  --shadow: 0 22px 60px rgba(40, 46, 60, 0.14);
}

body.light .room-rail {
  background: #e7eaf0;
}

body.light .rail-room[data-count]::after {
  border-color: #e7eaf0;
}

body.light .conversation-header {
  background: rgba(247, 248, 251, 0.9);
}

body.light .channel-panel {
  box-shadow: 5px 0 20px rgba(25, 30, 45, 0.035);
}

body.light .message-bubble {
  color: #424858;
}

body.light .modal-root:not(:empty) {
  background: rgba(33, 38, 50, 0.46);
}

body.compact .message-row {
  padding-top: 2px;
  padding-bottom: 2px;
}

body.compact .message-bubble {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Responsive */

@media (max-width: 1100px) {
  .auth-copy {
    width: 78%;
  }

  .auth-copy .auth-hero-title {
    font-size: 68px;
  }

  .floating-chat {
    display: none;
  }

  .conversation-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-panel {
    position: fixed;
    top: 66px;
    right: 0;
    bottom: 0;
    z-index: 500;
    width: 260px;
    box-shadow: -20px 0 50px rgba(0, 0, 0, 0.25);
    transform: translateX(105%);
    transition: transform 0.2s;
  }

  .member-panel.open {
    transform: translateX(0);
  }

  .voice-dock {
    right: 18px;
  }
}

@media (max-width: 820px) {
  .auth-screen {
    grid-template-columns: 1fr;
  }

  .auth-visual {
    display: none;
  }

  .auth-panel {
    padding: 28px;
  }

  .auth-mobile-brand {
    display: flex;
  }

  .chat-app {
    grid-template-columns: 70px 240px minmax(0, 1fr);
  }

  .header-search {
    display: none;
  }
}

@media (max-width: 680px) {
  .chat-app {
    display: block;
    padding-bottom: calc(59px + env(safe-area-inset-bottom));
  }

  .room-rail,
  .channel-panel {
    position: fixed;
    top: 0;
    bottom: calc(59px + env(safe-area-inset-bottom));
  }

  .room-rail {
    left: 0;
    width: 68px;
    transform: translateX(-105%);
    transition: transform 0.2s;
  }

  .channel-panel {
    left: 0;
    z-index: 19;
    width: min(300px, 84vw);
    box-shadow: 20px 0 55px rgba(0, 0, 0, 0.36);
    transform: translateX(-105%);
    transition: transform 0.2s;
  }

  .chat-app.mobile-rooms .room-rail {
    transform: translateX(0);
  }

  .chat-app.mobile-rooms .channel-panel {
    transform: translateX(68px);
  }

  .conversation-panel {
    height: calc(100dvh - 59px - env(safe-area-inset-bottom));
  }

  .conversation-header {
    height: 58px;
    padding: 0 10px;
  }

  .header-title span {
    max-width: 170px;
  }

  .header-actions button {
    width: 32px;
  }

  .header-actions [data-action="room-radio"],
  .header-actions [data-action="room-settings"] {
    display: none;
  }

  .messages-scroll {
    padding-right: 7px;
    padding-left: 7px;
  }

  .room-hero {
    margin-right: 2px;
    margin-left: 2px;
    padding: 19px;
  }

  .message-row {
    gap: 8px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .message-row .avatar {
    width: 34px;
    height: 34px;
  }

  .message-bubble {
    max-width: 96%;
  }

  .message-actions {
    display: none !important;
  }

  .composer {
    gap: 5px;
    padding: 7px 8px 9px;
  }

  .composer-button,
  .send-button {
    width: 38px;
    height: 38px;
  }

  #record-button {
    display: none;
  }

  .member-panel {
    top: 58px;
    bottom: calc(59px + env(safe-area-inset-bottom));
    width: min(300px, 86vw);
  }

  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 800;
    display: grid;
    height: calc(59px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    grid-template-columns: repeat(4, 1fr);
    background: rgba(20, 23, 31, 0.97);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(18px);
  }

  .mobile-nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    color: var(--muted);
    font-size: 8px;
    background: transparent;
  }

  .mobile-nav button span {
    font-size: 17px;
  }

  .mobile-nav button.active {
    color: var(--accent);
  }

  .voice-dock {
    right: 10px;
    bottom: calc(69px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
  }

  .modal-root:not(:empty) {
    align-items: end;
    padding: 0;
  }

  .modal,
  .modal.wide,
  .modal.compact {
    width: 100%;
    max-height: min(88dvh, 780px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }

  .modal-body {
    max-height: calc(88dvh - 120px);
  }

  .form-grid,
  .room-grid,
  .market-grid {
    grid-template-columns: 1fr;
  }

  .local-video {
    top: 12px;
    right: 12px;
    width: 115px;
  }

  .call-controls {
    bottom: 28px;
  }

  .call-controls button {
    width: 43px;
    height: 43px;
  }

  .toast-stack {
    top: 10px;
    right: 10px;
    width: calc(100vw - 20px);
  }
}

/* Zorunlu cinsiyet seçimi ve cinsiyete göre kullanıcı görünümü */
.auth-gender-field {
  margin-bottom: 17px;
}

.auth-gender-options,
.required-gender-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.auth-gender-options button,
.required-gender-options button {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: #dce7eb;
  text-align: left;
  background: #17252c;
  border: 1px solid #30434c;
  border-radius: 12px;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-gender-options button > b,
.required-gender-options button > b {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  font-size: 19px;
  background: rgba(255, 255, 255, 0.055);
  border-radius: 50%;
}

.auth-gender-options button span,
.auth-gender-options button strong,
.auth-gender-options button small,
.required-gender-options button span,
.required-gender-options button strong,
.required-gender-options button small {
  display: block;
  min-width: 0;
}

.auth-gender-options button strong,
.required-gender-options button strong {
  font-size: 11px;
  font-weight: 900;
}

.auth-gender-options button small,
.required-gender-options button small {
  margin-top: 3px;
  color: #82969f;
  font-size: 8px;
  font-weight: 700;
}

.auth-gender-options button:hover,
.required-gender-options button:hover {
  transform: translateY(-1px);
}

.auth-gender-options .male.selected,
.required-gender-options .male:hover {
  color: #69edda;
  background: rgba(45, 198, 176, 0.13);
  border-color: #2dc6b0;
  box-shadow: 0 0 0 3px rgba(45, 198, 176, 0.08);
}

.auth-gender-options .female.selected,
.required-gender-options .female:hover {
  color: #ff9ac7;
  background: rgba(239, 114, 170, 0.13);
  border-color: #ef72aa;
  box-shadow: 0 0 0 3px rgba(239, 114, 170, 0.08);
}

.auth-gender-note {
  display: block;
  margin: 7px 2px 0;
  color: #72868f;
  font-size: 8px;
  line-height: 1.45;
}

.required-gender-modal .modal-close {
  display: none;
}

.required-gender-copy {
  display: grid;
  padding: 2px 8px 18px;
  place-items: center;
  text-align: center;
}

.required-gender-mark {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 11px;
  place-items: center;
  color: #42dfbc;
  font-size: 26px;
  background: rgba(45, 198, 176, 0.1);
  border: 1px solid rgba(45, 198, 176, 0.28);
  border-radius: 16px;
}

.required-gender-copy strong {
  font-size: 16px;
}

.required-gender-copy p {
  max-width: 330px;
  margin: 7px 0 0;
  color: #91a4ac;
  font-size: 9px;
  line-height: 1.55;
}

.member-list .member-item.member-gender-male,
.member-list .member-item.member-gender-male:hover,
.member-list .member-item.member-gender-male:focus,
.member-list .member-item.member-gender-male:active,
.member-list .member-item.member-gender-female,
.member-list .member-item.member-gender-female:hover,
.member-list .member-item.member-gender-female:focus,
.member-list .member-item.member-gender-female:active {
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--gender-color) 20%, #14232a), color-mix(in srgb, var(--gender-color) 8%, #14232a));
  border-color: color-mix(in srgb, var(--gender-color) 58%, #30424b);
}

.member-list .member-item.member-gender .avatar {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 55%),
    var(--gender-color);
  border-color: color-mix(in srgb, var(--gender-color) 72%, #23343c);
}

.member-list .member-item.member-gender strong {
  color: color-mix(in srgb, var(--gender-color) 72%, white);
}

.gender-person-icon {
  position: relative;
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: inherit;
  vertical-align: middle;
}

.gender-person-icon .ui-icon {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
}

.gender-person-icon.female::before {
  position: absolute;
  top: -1px;
  left: 1px;
  z-index: 2;
  width: 13px;
  height: 11px;
  pointer-events: none;
  content: "";
  border: 1.4px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 3px 3px;
}

.member-gender-female .member-icons,
.social-gender .gender-person-icon.female,
.gender-fact.female {
  color: #f49ac2;
}

.member-gender-male .member-icons,
.social-gender .gender-person-icon.male,
.gender-fact.male {
  color: #72dfd0;
}

.profile-facts .gender-fact {
  gap: 5px;
  font-weight: 800;
  background: color-mix(in srgb, currentColor 10%, var(--panel-3));
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

@media (max-width: 520px) {
  .auth-gender-options,
  .required-gender-options {
    grid-template-columns: 1fr;
  }

  .auth-gender-options button,
  .required-gender-options button {
    min-height: 56px;
  }
}

/* Sohbete Geç üçüncü nesil yerleşimi */
body,
button,
input,
textarea,
select {
  font-weight: 600;
}

strong,
h1,
h2,
h3,
h4,
.message-author,
.header-title strong {
  font-weight: 800;
}

.chat-app {
  display: block;
  width: 100vw;
  height: 100dvh;
}

.room-rail,
.channel-panel {
  display: none !important;
}

.conversation-panel {
  width: 100%;
  height: 100dvh;
  background: #0b141a;
}

.conversation-header {
  z-index: 30;
  height: 62px;
  min-height: 62px;
  gap: 10px;
  padding: 0 13px;
  background: #141f29;
  border-bottom: 1px solid #30404c;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.22);
}

.header-channel-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--room-color, #cbd8e0);
  font-size: 19px;
  background: #202e39;
  border-radius: 5px;
}

.header-title {
  width: 170px;
  flex: 0 0 170px;
}

.header-title strong {
  color: #f3f6f8;
  font-size: 13px;
}

.header-title span {
  max-width: 170px;
  color: #9cafbb;
  font-size: 8px;
}

.top-navigation {
  display: flex;
  min-width: 0;
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.top-navigation button {
  position: relative;
  height: 100%;
  cursor: pointer;
  color: #b7c5ce;
  background: transparent;
  border-left: 1px solid #293946;
  border-radius: 0;
}

.top-navigation button:hover,
.top-navigation button.active {
  color: white;
  background: #1b2934;
}

.top-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 15px;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.top-link.random {
  height: 38px !important;
  margin: 0 10px;
  color: #061b15;
  background: #18c89b;
  border: 0;
  border-radius: 13px;
}

.top-link.random:hover {
  color: #061b15;
  background: #26d5a8;
}

.top-icon,
.top-profile {
  display: grid;
  width: 52px;
  flex: 0 0 52px;
  place-items: center;
  font-size: 16px;
}

.top-icon b {
  position: absolute;
  right: 7px;
  bottom: 7px;
  min-width: 16px;
  padding: 2px 4px;
  color: #071015;
  font-size: 7px;
  background: #e8f1f5;
  border-radius: 5px;
}

.top-profile .avatar {
  width: 31px;
  height: 31px;
}

.header-actions.room-tools {
  gap: 2px;
  padding-left: 5px;
  border-left: 1px solid #30404c;
}

.header-actions.room-tools button {
  width: 32px;
}

.header-search {
  width: min(180px, 15vw);
  background: #0d1820;
  border-color: #2a3b47;
  border-radius: 7px;
}

.conversation-body {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) 356px;
}

.messages-column {
  min-width: 0;
  border-right: 1px solid #2b3b47;
}

.messages-scroll {
  padding: 12px 18px 8px 8px;
}

.room-hero {
  display: none;
}

.date-divider {
  margin: 7px 0 9px 43px;
  padding: 4px 9px;
  font-size: 8px;
}

.message-row,
.message-row.own {
  width: max-content;
  max-width: min(780px, calc(100% - 32px));
  min-height: 41px;
  align-items: flex-start;
  flex-direction: row;
  gap: 7px;
  padding: 3px 6px 3px 4px;
  margin: 2px 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 3px solid var(--role-color, #8da1ae);
  border-radius: 3px 8px 8px 3px;
}

.message-row.own {
  margin-right: 0;
  margin-left: 0;
}

.message-row:hover {
  background: rgba(29, 43, 53, 0.66);
}

.message-row > button[data-profile-id] {
  margin-top: 1px;
}

.message-row .avatar,
.member-item .avatar {
  overflow: hidden;
  border-radius: 50%;
}

.message-row .avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
  border: 1px solid #44535e;
}

.message-content,
.message-row.own .message-content {
  min-width: 78px;
  flex: 0 1 auto;
  text-align: left;
}

.message-meta,
.message-row.own .message-meta {
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 2px;
}

.message-author {
  color: var(--role-color, #e9edef);
  font-size: 11px;
  line-height: 1.15;
}

.rank-chip {
  padding: 2px 5px;
  font-size: 7px;
  font-weight: 900;
  border-radius: 3px;
}

.message-time {
  color: #9aabb6;
  font-size: 7px;
  font-weight: 700;
}

.message-bubble,
.message-row.own .message-bubble {
  max-width: min(690px, calc(100vw - 450px));
  padding: 5px 8px;
  color: #edf2f5;
  text-align: left;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.32;
  background: color-mix(in srgb, var(--role-color) 9%, #17242e);
  border: 1px solid color-mix(in srgb, var(--role-color) 22%, #2c3a44);
  border-radius: 4px 8px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);
}

.reply-quote {
  max-width: min(620px, calc(100vw - 470px));
  padding: 5px 7px;
  margin-bottom: 3px;
  color: #b8c6cf;
  font-size: 9px;
  font-weight: 700;
  background: #1c2a35;
  border-left-color: var(--role-color);
}

.message-actions {
  top: 0;
  right: auto;
  left: calc(100% + 4px);
  z-index: 15;
  display: flex;
  opacity: 0;
  background: #1c2a35;
  transition: opacity 0.12s;
}

.message-row:hover .message-actions,
.message-actions:focus-within {
  display: flex;
  opacity: 1;
}

.message-actions button {
  width: 27px;
  height: 27px;
  font-weight: 800;
}

.system-message {
  width: max-content;
  max-width: min(720px, calc(100% - 55px));
  min-height: 34px;
  padding: 7px 11px;
  margin: 5px 0 5px 42px;
  font-size: 10px;
  font-weight: 750;
  background: #17232c;
  border: 1px solid #31414c;
  border-left: 4px solid var(--role-color, #93a8b5);
  border-radius: 4px 8px 8px 4px;
}

.system-message.system-ban {
  color: #e5edf2;
  background: #1a2731;
  border-left-color: #9db1bd;
}

.system-message.system-ban > span,
.system-message.system-ban strong {
  color: #d8e3e9;
}

.composer {
  min-height: 53px;
  padding: 7px 9px;
  background: #202d38;
  border-top-color: #344550;
}

.composer-input-wrap {
  background: #2a3743;
  border: 1px solid #43535e;
  border-radius: 7px;
}

.composer textarea {
  font-size: 12px;
  font-weight: 650;
}

.composer-button,
.send-button {
  border-radius: 50%;
}

.composer-button.locked,
.composer-button:disabled {
  cursor: not-allowed;
  color: #566773;
  background: #17232c;
  opacity: 0.55;
}

.reply-strip {
  font-weight: 700;
  background: #17252f;
  border-top: 1px solid #31434f;
  border-left: 4px solid var(--accent);
}

.member-panel {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  display: flex;
  width: auto;
  min-width: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  background: #111e29;
  box-shadow: none;
  transform: none;
}

.status-panel-title {
  display: flex;
  height: 52px;
  flex: 0 0 52px;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  color: #cbd7df;
  border-bottom: 1px solid #2b3c48;
}

.status-panel-title span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: #a9b9c3;
  background: #1c2b36;
  border-radius: 50%;
}

.status-panel-title strong {
  font-size: 14px;
}

.status-panel-close {
  display: none;
}

.right-room-list {
  max-height: 280px;
  flex: 0 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid #2d3d49;
  scrollbar-color: #42535f transparent;
  scrollbar-width: thin;
}

.status-room {
  display: flex;
  width: 100%;
  min-height: 53px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  cursor: pointer;
  color: #e5edf1;
  text-align: left;
  background: transparent;
  border-bottom: 1px solid #263743;
}

.status-room:hover,
.status-room.active {
  background: #172733;
}

.status-room.active strong,
.status-room.active small {
  color: #15a9ff;
}

.status-room > span {
  min-width: 0;
  flex: 1;
}

.status-room strong,
.status-room small {
  display: block;
}

.status-room strong {
  overflow: hidden;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-room small {
  margin-top: 3px;
  color: #a8b8c2;
  font-size: 8px;
}

.status-room em {
  display: grid;
  min-width: 32px;
  height: 32px;
  place-items: center;
  color: #30b6ff;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  border: 1px solid #25aef5;
  border-radius: 8px;
}

.status-room i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #9aabb6;
  font-size: 11px;
  font-style: normal;
  background: #1b2a35;
  border: 1px solid #3a4a55;
  border-radius: 8px;
}

.member-search {
  height: 52px;
  flex: 0 0 52px;
  margin: 9px 10px 4px;
  padding: 0 11px;
  background: #111e29;
  border: 1px solid #3c4e5b;
  border-radius: 5px;
}

.member-search input {
  font-size: 10px;
  font-weight: 650;
}

.member-list {
  height: auto;
  min-height: 0;
  flex: 1;
  padding: 0 8px 12px;
  overflow-y: auto;
  scrollbar-color: #475864 transparent;
  scrollbar-width: thin;
}

.member-group-label {
  margin: 11px 7px 7px;
  font-size: 8px;
  font-weight: 850;
}

.member-item {
  min-height: 70px;
  gap: 10px;
  padding: 8px 4px;
  color: #e7eef2;
  background: transparent;
  border-bottom: 1px solid #2c3c47;
  border-left: 0;
  border-radius: 0;
}

.member-item:hover {
  background: #182935;
}

.member-item .avatar {
  width: 50px;
  height: 50px;
  font-size: 16px;
  border: 1px solid #50616c;
}

.member-item .online-dot {
  right: 0;
  bottom: 1px;
  width: 11px;
  height: 11px;
  background: #1fb5ff;
  border: 2px solid #111e29;
}

.member-copy {
  min-width: 0;
  flex: 1;
}

.member-item strong {
  color: var(--role-color, #e7eef2);
  font-size: 11px;
  font-weight: 850;
}

.member-item small {
  margin-top: 2px;
  color: #9babb5;
  font-size: 8px;
  font-weight: 650;
}

.member-icons {
  display: grid;
  width: 48px;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  color: #b8c5cd;
}

.member-icons i {
  font-size: 10px;
  font-style: normal;
  text-align: center;
}

.member-icons i:last-child {
  grid-column: 1 / -1;
  letter-spacing: 1px;
}

.context-menu {
  min-width: 190px;
  padding: 6px;
  background: #17242e;
  border-color: #3d4e5a;
  border-radius: 5px;
}

.context-menu button {
  min-height: 36px;
  font-size: 10px;
  font-weight: 750;
  border-radius: 4px;
}

.modal {
  display: flex;
  max-height: calc(100dvh - 28px);
  flex-direction: column;
}

.modal-body {
  min-height: 0;
  flex: 1;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  background: #14212b;
}

.modal.profile-modal {
  width: min(480px, calc(100vw - 24px));
  height: min(780px, calc(100dvh - 28px));
}

.profile-modal .modal-body {
  padding-bottom: 28px;
}

.profile-cover {
  height: 138px;
  margin: -18px -18px 62px;
  overflow: visible;
}

.profile-cover .avatar-wrap {
  position: absolute;
  bottom: -46px;
  left: 20px;
  width: 92px;
  height: 92px;
}

.profile-cover .avatar {
  position: static;
  width: 92px;
  height: 92px;
  font-size: 28px;
  border: 5px solid #111b21;
  border-radius: 50%;
}

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

.profile-cover .online-dot {
  right: 3px;
  bottom: 3px;
}

.profile-actions {
  right: 14px;
  bottom: -44px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.profile-title h2 {
  font-size: 22px;
  font-weight: 850;
}

.profile-section {
  border: 1px solid #30414d;
}

.profile-section > span,
.profile-section p,
.profile-facts span {
  font-weight: 650;
}

.profile-blocked-banner {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 14px;
  margin-top: 14px;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(255, 67, 91, 0.98), rgba(190, 29, 55, 0.96)),
    #db304d;
  border: 1px solid rgba(255, 153, 166, 0.62);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(188, 25, 51, 0.2);
}

.profile-blocked-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  background: rgba(20, 8, 12, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
}

.profile-blocked-icon .ui-icon {
  width: 22px;
  height: 22px;
  stroke-width: 2.4;
}

.profile-blocked-banner strong,
.profile-blocked-banner small {
  display: block;
}

.profile-blocked-banner strong {
  font-size: clamp(20px, 5vw, 27px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: 1.5px;
}

.profile-blocked-banner small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 9px;
  font-weight: 750;
}

.profile-blocked-banner button {
  min-height: 38px;
  padding: 0 13px;
  cursor: pointer;
  color: #fff;
  background: rgba(20, 8, 12, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 9px;
  font-size: 9px;
  font-weight: 850;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.profile-blocked-banner button:hover {
  background: rgba(20, 8, 12, 0.38);
  border-color: rgba(255, 255, 255, 0.56);
  transform: translateY(-1px);
}

.moderation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.moderation-grid button {
  min-height: 44px;
  padding: 8px;
  font-weight: 750;
  border: 1px solid #344651;
}

@media (max-width: 1280px) {
  .conversation-body {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .top-link {
    padding: 0 10px;
    font-size: 9px;
  }

  .top-link.random {
    margin: 0 5px;
  }

  .top-icon,
  .top-profile {
    width: 44px;
    flex-basis: 44px;
  }

  .header-search {
    display: none;
  }

  .message-bubble {
    max-width: min(650px, calc(100vw - 390px));
  }
}

@media (max-width: 960px) {
  .conversation-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .member-panel {
    position: fixed;
    top: 62px;
    right: 0;
    bottom: 0;
    z-index: 500;
    width: min(356px, 90vw);
    height: auto;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.4);
    transform: translateX(105%);
    transition: transform 0.2s ease;
  }

  .member-panel.open {
    transform: translateX(0);
  }

  .top-link {
    display: none;
  }

  .message-bubble,
  .reply-quote {
    max-width: min(680px, calc(100vw - 105px));
  }
}

@media (max-width: 680px) {
  .conversation-header {
    height: 58px;
    min-height: 58px;
    padding: 0 7px;
  }

  .header-channel-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .header-title {
    width: 115px;
    flex-basis: 115px;
  }

  .header-title span {
    max-width: 115px;
  }

  .top-navigation {
    justify-content: flex-end;
  }

  .top-icon {
    display: none;
  }

  .top-profile {
    width: 38px;
    flex-basis: 38px;
    border-left: 0 !important;
  }

  .room-tools button:not([data-action="toggle-members"]) {
    display: none;
  }

  .conversation-panel {
    height: calc(100dvh - 59px - env(safe-area-inset-bottom));
  }

  .member-panel {
    top: 58px;
    bottom: calc(59px + env(safe-area-inset-bottom));
  }

  .messages-scroll {
    padding: 7px 5px 5px;
  }

  .message-row,
  .message-row.own {
    width: max-content;
    max-width: calc(100% - 8px);
    gap: 5px;
  }

  .message-row .avatar {
    width: 31px;
    height: 31px;
  }

  .message-content {
    max-width: calc(100vw - 53px);
  }

  .message-bubble,
  .message-row.own .message-bubble,
  .reply-quote {
    max-width: calc(100vw - 70px);
    font-size: 11px;
  }

  .message-actions {
    position: static;
    align-self: flex-start;
    opacity: 1;
    padding: 1px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .message-actions button {
    display: none;
  }

  .message-actions button[data-message-action="reply"],
  .message-actions button[data-message-action="menu"] {
    display: grid;
  }

  .system-message {
    max-width: calc(100% - 45px);
    margin-left: 38px;
  }

  .composer {
    padding: 6px;
  }

  .composer-button,
  .send-button {
    width: 38px;
    height: 38px;
  }

  .profile-modal .modal-body {
    padding-bottom: 24px;
  }

  .profile-cover {
    height: 120px;
  }

  .profile-actions {
    max-width: calc(100% - 125px);
  }

  .profile-blocked-banner {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 0;
    padding: 13px;
  }

  .profile-blocked-icon {
    width: 42px;
    height: 42px;
  }

  .profile-blocked-banner button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .moderation-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 690px) and (min-width: 681px) {
  .auth-copy > p {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .auth-proof {
    display: none;
  }

  .auth-heading {
    margin-top: 20px;
    margin-bottom: 18px;
  }

  .field {
    margin-bottom: 12px;
  }
}

/* Full-screen image viewer */
[data-preview-image] {
  cursor: zoom-in;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #f5faf8;
  background:
    radial-gradient(circle at 50% 42%, rgba(26, 68, 62, 0.22), transparent 42%),
    rgba(2, 7, 10, 0.96);
  backdrop-filter: blur(14px);
  overscroll-behavior: none;
}

.image-viewer-head {
  z-index: 2;
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: max(12px, env(safe-area-inset-top)) 20px 12px;
  background: linear-gradient(180deg, rgba(4, 10, 14, 0.92), rgba(4, 10, 14, 0.42));
  border-bottom: 1px solid rgba(160, 210, 198, 0.14);
}

.image-viewer-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.image-viewer-head strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-viewer-head span {
  color: #8fa7a2;
  font-size: 9px;
}

.image-viewer-head button,
.image-viewer-controls button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #edf8f5;
  background: rgba(25, 42, 48, 0.82);
  border: 1px solid rgba(178, 218, 208, 0.2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

.image-viewer-head button {
  width: 42px;
  height: 42px;
  border-radius: 13px;
}

.image-viewer-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  place-items: center;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
}

.image-viewer-stage img {
  display: block;
  max-width: min(92vw, 1500px);
  max-height: calc(100dvh - 172px);
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  transform-origin: center;
  will-change: transform;
  -webkit-user-drag: none;
}

.image-viewer.zoomed .image-viewer-stage,
.image-viewer.zoomed .image-viewer-stage img {
  cursor: grab;
}

.image-viewer.zoomed .image-viewer-stage:active,
.image-viewer.zoomed .image-viewer-stage:active img {
  cursor: grabbing;
}

.image-viewer-controls {
  z-index: 2;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(4, 10, 14, 0.94), rgba(4, 10, 14, 0.42));
  border-top: 1px solid rgba(160, 210, 198, 0.14);
}

.image-viewer-controls button {
  width: 46px;
  height: 42px;
  font-size: 21px;
  font-weight: 800;
  border-radius: 13px;
}

.image-viewer-controls .image-viewer-scale {
  width: 84px;
  color: #4ee2bd;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.image-viewer-head button:hover,
.image-viewer-controls button:hover {
  color: #fff;
  background: rgba(39, 72, 70, 0.94);
  border-color: rgba(78, 226, 189, 0.45);
}

body.image-viewer-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .image-viewer-head {
    min-height: 58px;
    padding-inline: 13px;
  }

  .image-viewer-head span {
    display: none;
  }

  .image-viewer-stage img {
    max-width: 100vw;
    max-height: calc(100dvh - 138px);
    border-radius: 0;
  }

  .image-viewer-controls {
    min-height: 64px;
    padding-top: 7px;
  }

  .image-viewer-controls button {
    width: 48px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *:not([class*="cosmetic-"]):not(.profile-aura-layer *):not(.profile-scene-layer *):not(.profile-modal *):not(.profile-market-modal *),
  *:not([class*="cosmetic-"]):not(.profile-aura-layer *):not(.profile-scene-layer *):not(.profile-modal *):not(.profile-market-modal *)::before,
  *:not([class*="cosmetic-"]):not(.profile-aura-layer *):not(.profile-scene-layer *):not(.profile-modal *):not(.profile-market-modal *)::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Özel mesajlar: WhatsApp benzeri sağ/sol konuşma düzeni */
.messages-scroll .message-row.dm-message,
.messages-scroll .message-row.dm-message.own {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  align-items: flex-end;
  gap: 8px;
  padding: 3px 20px;
  margin: 0;
}

.messages-scroll .message-row.dm-message:not(.own) {
  justify-content: flex-start;
}

.messages-scroll .message-row.dm-message.own {
  justify-content: flex-end;
}

.messages-scroll .message-row.dm-message.own > button[data-profile-id] {
  display: none;
}

.messages-scroll .message-row.dm-message > button[data-profile-id] {
  flex: 0 0 34px;
  align-self: flex-end;
  margin-bottom: 2px;
}

.messages-scroll .message-row.dm-message .message-content,
.messages-scroll .message-row.dm-message.own .message-content {
  width: fit-content;
  max-width: min(72%, 720px);
  flex: 0 1 auto;
}

.messages-scroll .message-row.dm-message .message-card {
  min-width: 92px;
  padding: 7px 10px 8px;
  background: #202f38;
  border: 1px solid #354852;
  border-radius: 5px 14px 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.messages-scroll .message-row.dm-message .message-card::before {
  top: 9px;
  left: -6px;
  border-top: 5px solid transparent;
  border-right: 6px solid #354852;
  border-bottom: 5px solid transparent;
}

.messages-scroll .message-row.dm-message .message-card::after {
  top: 10px;
  left: -4px;
  border-top: 4px solid transparent;
  border-right: 5px solid #202f38;
  border-bottom: 4px solid transparent;
}

.messages-scroll .message-row.dm-message.own .message-card {
  color: #eafff8;
  background: linear-gradient(145deg, #075e54, #056558);
  border-color: #168477;
  border-radius: 14px 5px 14px 14px;
  box-shadow: 0 4px 15px rgba(0, 68, 58, 0.28);
}

.messages-scroll .message-row.dm-message.own .message-card::before {
  right: -6px;
  left: auto;
  border-right: 0;
  border-left: 6px solid #168477;
}

.messages-scroll .message-row.dm-message.own .message-card::after {
  right: -4px;
  left: auto;
  border-right: 0;
  border-left: 5px solid #056558;
}

.messages-scroll .message-row.dm-message.own .message-meta {
  display: none;
}

.messages-scroll .message-row.dm-message .message-meta {
  margin-bottom: 4px;
}

.messages-scroll .message-row.dm-message .message-author {
  font-size: 11px;
  font-weight: 850;
}

.messages-scroll .message-row.dm-message .message-bubble,
.messages-scroll .message-row.dm-message.own .message-bubble,
.messages-scroll .message-row.dm-message.staff-message .message-bubble,
.messages-scroll .message-row.dm-message.staff-message.own .message-bubble {
  padding: 0 47px 0 0;
  color: #e8f0f3;
  font-size: 13px;
  font-weight: 590;
  line-height: 1.42;
  text-align: left;
}

.messages-scroll .message-row.dm-message.own .message-bubble,
.messages-scroll .message-row.dm-message.staff-message.own .message-bubble {
  color: #f2fffb;
}

.messages-scroll .message-row.dm-message.own .message-actions {
  right: calc(100% + 6px);
  left: auto;
}

.messages-scroll .message-row.dm-message:not(.own) .message-actions {
  right: auto;
  left: calc(100% + 6px);
}

.messages-scroll .message-row.dm-message.own .message-stamp .message-time,
.messages-scroll .message-row.dm-message.own .message-stamp .read-ticks {
  color: #9be3d5;
}

/* Son konuşmalar */
.dm-conversation-list {
  width: min(760px, calc(100% - 36px));
  margin: 24px auto 36px;
  overflow: hidden;
  background: rgba(14, 26, 32, 0.94);
  border: 1px solid #2c414c;
  border-radius: 18px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.24);
}

.dm-conversation-list-head {
  display: grid;
  min-height: 72px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: linear-gradient(135deg, rgba(0, 168, 132, 0.14), rgba(17, 29, 36, 0.35));
  border-bottom: 1px solid #2c414c;
}

.dm-conversation-list-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #35d2b3;
  background: #123b37;
  border: 1px solid #1b6a60;
  border-radius: 13px;
}

.dm-conversation-list-head > span .ui-icon {
  width: 19px;
  height: 19px;
}

.dm-conversation-list-head strong,
.dm-conversation-list-head small {
  display: block;
}

.dm-conversation-list-head strong {
  color: #edf7f9;
  font-size: 15px;
  font-weight: 850;
}

.dm-conversation-list-head small {
  margin-top: 3px;
  color: #8ea1ab;
  font-size: 9px;
  font-weight: 650;
}

.dm-conversation-list-head em {
  padding: 6px 9px;
  color: #76dcca;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
  background: rgba(0, 168, 132, 0.1);
  border: 1px solid rgba(0, 168, 132, 0.28);
  border-radius: 999px;
}

.dm-conversation-items {
  display: grid;
  padding: 6px;
}

.dm-conversation-card {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 70px;
  grid-template-columns: 48px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 9px 11px;
  cursor: pointer;
  color: #e9f1f4;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 13px;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dm-conversation-card + .dm-conversation-card {
  border-top-color: rgba(53, 72, 82, 0.62);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.dm-conversation-card:hover {
  z-index: 1;
  background: #182a33;
  border-color: #36515d;
  transform: translateX(2px);
}

.dm-conversation-card.unread {
  background: linear-gradient(90deg, rgba(0, 168, 132, 0.13), rgba(0, 168, 132, 0.03));
}

.dm-conversation-card .avatar {
  width: 46px;
  height: 46px;
  font-size: 13px;
}

.dm-conversation-copy,
.dm-conversation-copy > span {
  display: block;
  min-width: 0;
}

.dm-conversation-copy > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dm-conversation-copy strong,
.dm-conversation-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dm-conversation-copy strong {
  color: #edf4f6;
  font-size: 12px;
  font-weight: 850;
}

.dm-conversation-copy time {
  flex: 0 0 auto;
  color: #81949e;
  font-size: 8px;
  font-weight: 700;
}

.dm-conversation-copy small {
  margin-top: 5px;
  color: #94a7b0;
  font-size: 10px;
  font-weight: 600;
}

.dm-conversation-unread,
.dm-conversation-arrow {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  justify-self: end;
  font-style: normal;
}

.dm-conversation-unread {
  color: #062a24;
  font-size: 9px;
  font-weight: 900;
  background: #2bd7b5;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(43, 215, 181, 0.09);
}

.dm-conversation-arrow {
  color: #647983;
}

.dm-conversation-arrow .ui-icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 680px) {
  .messages-scroll .message-row.dm-message,
  .messages-scroll .message-row.dm-message.own {
    gap: 6px;
    padding: 3px 8px;
  }

  .messages-scroll .message-row.dm-message .message-content,
  .messages-scroll .message-row.dm-message.own .message-content {
    max-width: 82%;
  }

  .messages-scroll .message-row.dm-message > button[data-profile-id] {
    flex-basis: 28px;
  }

  .messages-scroll .message-row.dm-message .avatar {
    width: 28px;
    height: 28px;
  }

  .messages-scroll .message-row.dm-message .message-card {
    min-width: 78px;
    padding: 7px 9px 8px;
    border-radius: 5px 12px 12px;
  }

  .messages-scroll .message-row.dm-message.own .message-card {
    border-radius: 12px 5px 12px 12px;
  }

  .messages-scroll .message-row.dm-message .message-bubble,
  .messages-scroll .message-row.dm-message.own .message-bubble {
    padding-right: 43px;
    font-size: 12px;
  }

  .dm-conversation-list {
    width: calc(100% - 16px);
    margin: 10px auto 24px;
    border-radius: 14px;
  }

  .dm-conversation-list-head {
    min-height: 64px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 11px;
  }

  .dm-conversation-list-head > span {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .dm-conversation-card {
    min-height: 66px;
    grid-template-columns: 44px minmax(0, 1fr) 25px;
    gap: 10px;
    padding: 8px;
  }

  .dm-conversation-card .avatar {
    width: 42px;
    height: 42px;
  }

  .dm-conversation-copy strong {
    font-size: 11px;
  }

  .dm-conversation-copy small {
    font-size: 9px;
  }
}

/* Normal tarayıcı etkileşimlerinde içerik seçme/kopyalama koruması. */
html,
body,
body * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

img,
svg,
video {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Sohbete Geç brand and search-friendly public landing content */
html:has(#auth-screen:not(.hidden)),
body:has(#auth-screen:not(.hidden)) {
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.auth-screen {
  grid-template-rows: minmax(100dvh, auto) auto;
}

.auth-visual,
.auth-panel {
  min-height: 100dvh;
}

.auth-copy .auth-hero-title {
  font-size: clamp(48px, 5.35vw, 82px);
  letter-spacing: -4.8px;
}

.brand-mark .ui-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.brand-word {
  font-style: normal;
  letter-spacing: -0.45px;
}

.brand-word em {
  color: #25d366;
  font-style: normal;
}

.channel-brand .brand-word em {
  margin-left: 1px;
}

.seo-home {
  grid-column: 1 / -1;
  color: #e9edef;
  background:
    radial-gradient(circle at 85% 5%, rgba(0, 168, 132, 0.12), transparent 28%),
    #081217;
  border-top: 1px solid #1f2c33;
}

.seo-home-inner {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 92px 0 30px;
}

.seo-intro {
  display: grid;
  max-width: 900px;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
  gap: 18px 70px;
  align-items: end;
}

.seo-kicker {
  display: block;
  margin-bottom: 14px;
  color: #36d9b4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.9px;
}

.seo-intro .seo-kicker {
  grid-column: 1 / -1;
  margin-bottom: -2px;
}

.seo-intro h1,
.seo-steps h2,
.seo-faq h2 {
  margin: 0;
  color: #f5f7f8;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -2px;
}

.seo-intro p {
  margin: 0;
  color: #aebac1;
  font-size: 16px;
  line-height: 1.75;
}

.seo-feature-grid {
  display: grid;
  margin-top: 70px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #25343c;
  border-bottom: 1px solid #25343c;
}

.seo-feature-grid article {
  min-width: 0;
  padding: 34px 25px 38px;
  border-left: 1px solid #25343c;
}

.seo-feature-grid article:first-child {
  border-left: 0;
}

@media (min-width: 1101px) {
  .seo-feature-grid article:nth-child(3n + 1) { border-left: 0; }
  .seo-feature-grid article:nth-child(n + 4) { border-top: 1px solid #25343c; }
}

.seo-feature-grid article > span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 22px;
  place-items: center;
  color: #31d5af;
  background: #0f2625;
  border: 1px solid #17453e;
  border-radius: 13px;
}

.seo-feature-grid .ui-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.seo-feature-grid h3 {
  margin: 0 0 10px;
  color: #eff3f4;
  font-family: var(--font-display);
  font-size: 17px;
}

.seo-feature-grid h3 a {
  color: inherit;
  text-decoration: none;
}

.seo-feature-grid h3 a:hover,
.seo-feature-grid h3 a:focus-visible {
  color: #36d9b4;
}

.seo-feature-grid p {
  margin: 0;
  color: #8fa0a9;
  font-size: 13px;
  line-height: 1.7;
}

.seo-steps {
  display: grid;
  margin: 100px 0;
  grid-template-columns: minmax(260px, 0.72fr) minmax(440px, 1.28fr);
  gap: 80px;
  align-items: start;
}

.seo-steps ol {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid #2a3941;
}

.seo-steps li {
  display: flex;
  gap: 22px;
  padding: 24px 4px;
  border-bottom: 1px solid #2a3941;
}

.seo-steps li > b {
  color: #36d9b4;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
}

.seo-steps strong,
.seo-steps small {
  display: block;
}

.seo-steps strong {
  color: #eef3f3;
  font-size: 15px;
}

.seo-steps small {
  margin-top: 5px;
  color: #8696a0;
  font-size: 12px;
}

.seo-faq {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(440px, 1.28fr);
  gap: 80px;
  padding: 72px 0;
  border-top: 1px solid #25343c;
}

.seo-faq details {
  border-bottom: 1px solid #2a3941;
}

.seo-faq summary {
  position: relative;
  padding: 22px 42px 22px 0;
  cursor: pointer;
  color: #e9edef;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}

.seo-faq summary::-webkit-details-marker {
  display: none;
}

.seo-faq summary::after {
  position: absolute;
  top: 20px;
  right: 3px;
  content: "+";
  color: #36d9b4;
  font-size: 20px;
  font-weight: 400;
}

.seo-faq details[open] summary::after {
  content: "−";
}

.seo-faq details p {
  max-width: 650px;
  padding: 0 40px 22px 0;
  margin: -5px 0 0;
  color: #91a1aa;
  font-size: 13px;
  line-height: 1.7;
}

.seo-footer {
  display: grid;
  padding-top: 28px;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  border-top: 1px solid #25343c;
}

.seo-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f5f7f8;
  font-family: var(--font-display);
  font-size: 18px;
  text-decoration: none;
}

.seo-logo .brand-mark {
  width: 34px;
  height: 34px;
}

.seo-footer p {
  margin: 0;
  color: #71828c;
  font-size: 11px;
}

.seo-footer nav {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 22px;
}

.seo-footer nav a {
  color: #aebac1;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.seo-footer nav a:hover,
.seo-footer nav a:focus-visible {
  color: #36d9b4;
}

@media (max-width: 1100px) {
  .auth-copy .auth-hero-title {
    font-size: 58px;
    letter-spacing: -3.8px;
  }

  .seo-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-feature-grid article:nth-child(2n + 1) {
    border-left: 0;
  }

  .seo-feature-grid article:nth-child(n + 3) {
    border-top: 1px solid #25343c;
  }
}

@media (max-width: 820px) {
  .auth-screen {
    grid-template-rows: auto auto;
  }

  .seo-home {
    grid-column: 1;
  }

  .seo-home-inner {
    width: min(calc(100% - 32px), 680px);
    padding-top: 70px;
  }

  .seo-intro,
  .seo-steps,
  .seo-faq {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .seo-intro .seo-kicker {
    grid-column: 1;
  }

  .seo-steps {
    margin: 78px 0;
  }

  .seo-faq {
    padding: 58px 0;
  }

  .seo-footer {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .seo-home-inner {
    width: calc(100% - 28px);
    padding-top: 58px;
  }

  .seo-intro h1,
  .seo-steps h2,
  .seo-faq h2 {
    font-size: 32px;
    letter-spacing: -1.4px;
  }

  .seo-intro p {
    font-size: 14px;
  }

  .seo-feature-grid {
    margin-top: 46px;
    grid-template-columns: 1fr;
  }

  .seo-feature-grid article,
  .seo-feature-grid article:nth-child(2),
  .seo-feature-grid article:nth-child(4) {
    padding: 28px 10px;
    border-top: 1px solid #25343c;
    border-left: 0;
  }

  .seo-feature-grid article:first-child {
    border-top: 0;
  }

  .seo-steps {
    margin: 64px 0;
  }

  .seo-footer nav {
    flex-wrap: wrap;
    gap: 12px 18px;
  }
}

/* Profil fotoğrafı görünür alan seçici */
.avatar-upload-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0, 168, 132, 0.1), rgba(18, 31, 38, 0.72));
  border: 1px solid rgba(69, 205, 174, 0.24);
  border-radius: 14px;
}

.guest-avatar-lock {
  display: grid;
  min-height: 78px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: #aebbc1;
  background:
    linear-gradient(110deg, rgba(142, 160, 169, 0.08), transparent 66%),
    #111d23;
  border: 1px solid #34444c;
  border-radius: 14px;
}

.guest-avatar-lock > span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #879aa3;
  background: #19282f;
  border: 1px solid #35474f;
  border-radius: 12px;
}

.guest-avatar-lock > span .ui-icon {
  width: 18px;
  height: 18px;
}

.guest-avatar-lock strong,
.guest-avatar-lock small {
  display: block;
}

.guest-avatar-lock strong {
  color: #dce5e9;
  font-size: 11px;
}

.guest-avatar-lock small {
  margin-top: 4px;
  color: #82959e;
  font-size: 9px;
  line-height: 1.45;
}

.guest-avatar-lock > b {
  padding: 5px 8px;
  color: #aebbc1;
  font-size: 7px;
  letter-spacing: 0.55px;
  background: #1c2a31;
  border: 1px solid #3b4b53;
  border-radius: 999px;
}

@media (max-width: 520px) {
  .guest-avatar-lock {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .guest-avatar-lock > b {
    display: none;
  }
}

.avatar-upload-current .avatar-wrap {
  width: 58px;
  height: 58px;
}

.avatar-upload-current .avatar {
  width: 58px;
  height: 58px;
  font-size: 18px;
  border: 2px solid rgba(100, 236, 204, 0.65);
  box-shadow: 0 0 0 4px rgba(0, 168, 132, 0.1);
}

.avatar-upload-current .online-dot {
  right: 0;
  bottom: 0;
}

.avatar-upload-copy {
  min-width: 0;
}

.avatar-upload-copy strong,
.avatar-upload-copy span {
  display: block;
}

.avatar-upload-copy strong {
  color: var(--text);
  font-size: 12px;
}

.avatar-upload-copy span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.avatar-picker-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  cursor: pointer;
  color: #04261f;
  font-size: 10px;
  font-weight: 900;
  background: #32d5af;
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.avatar-picker-button:hover {
  box-shadow: 0 8px 24px rgba(50, 213, 175, 0.2);
  transform: translateY(-1px);
}

.avatar-crop-editor {
  display: grid;
  grid-template-columns: minmax(270px, 1fr) minmax(220px, 0.78fr);
  gap: 18px;
  padding: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(46, 213, 173, 0.12), transparent 35%),
    #0b171d;
  border: 1px solid #294149;
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.avatar-crop-stage {
  display: grid;
  min-width: 0;
  place-items: center;
}

.avatar-crop-stage > p {
  margin: 11px 0 0;
  color: #8da2aa;
  font-size: 9px;
  font-weight: 750;
  text-align: center;
}

.avatar-crop-viewport {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: #071116;
  border: 4px solid #36dbb4;
  border-radius: 50%;
  box-shadow:
    0 0 0 8px rgba(54, 219, 180, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.38);
  user-select: none;
}

.avatar-crop-viewport.dragging {
  cursor: grabbing;
}

.avatar-crop-viewport > img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  pointer-events: none;
  transform-origin: center;
  will-change: width, height, transform;
}

.avatar-crop-guide {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.24);
}

.avatar-crop-guide::before,
.avatar-crop-guide::after {
  position: absolute;
  pointer-events: none;
  content: "";
  background: rgba(255, 255, 255, 0.14);
}

.avatar-crop-guide::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.avatar-crop-guide::after {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
}

.avatar-crop-controls {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
}

.avatar-crop-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-crop-title > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #43ddb8;
  background: rgba(50, 213, 175, 0.1);
  border: 1px solid rgba(50, 213, 175, 0.22);
  border-radius: 11px;
}

.avatar-crop-title strong,
.avatar-crop-title small {
  display: block;
}

.avatar-crop-title strong {
  font-size: 12px;
}

.avatar-crop-title small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.avatar-zoom-control {
  padding: 13px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid #263a42;
  border-radius: 12px;
}

.avatar-zoom-control > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #b8c6cb;
  font-size: 9px;
}

.avatar-zoom-control output {
  color: #47dfba;
  font-weight: 850;
}

.avatar-zoom-control input {
  width: 100%;
  accent-color: #32d5af;
}

.avatar-crop-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
}

.avatar-crop-actions button {
  min-height: 42px;
}

.avatar-change-link {
  align-self: center;
  padding: 3px;
  color: #8fa5ad;
  font-size: 9px;
  font-weight: 750;
}

.avatar-change-link:hover {
  color: #44ddb9;
}

.avatar-crop-ready {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #48e1bc;
  font-size: 9px;
  font-weight: 850;
}

.avatar-crop-editor.confirmed .avatar-crop-ready {
  display: flex;
}

.avatar-crop-editor.confirmed .avatar-crop-viewport {
  border-color: #6ef0d0;
  box-shadow:
    0 0 0 8px rgba(54, 219, 180, 0.12),
    0 0 30px rgba(54, 219, 180, 0.16);
}

@media (max-width: 680px) {
  .avatar-upload-field {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .avatar-picker-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .avatar-crop-editor {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .avatar-crop-viewport {
    width: min(280px, 78vw);
  }

  .avatar-crop-actions {
    grid-template-columns: 1fr;
  }
}

/* Sağ panel kullanıcı kartlarında kusursuz dairesel profil fotoğrafı */
.member-list .member-item .avatar-wrap {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  place-items: center;
  isolation: isolate;
}

.member-list .member-item .avatar {
  position: relative;
  inset: auto;
  width: 50px;
  height: 50px;
  padding: 0;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--role-color, #8696a0) 68%, #15242c);
  border-radius: 50%;
  box-sizing: border-box;
}

.member-list .member-item .avatar img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 50%;
  transform: scale(1.09);
}

.member-list .member-item .online-dot {
  right: 0;
  bottom: 0;
  z-index: 4;
  border: 2px solid #111b21;
}

/* WhatsApp esintili ikinci nesil koyu arayüz */
:root {
  --accent: #00a884;
  --accent-rgb: 0, 168, 132;
  --green: #25d366;
  --danger: #ff5b6e;
  --warning: #ffb85c;
  --bg: #0b141a;
  --bg-soft: #0d171d;
  --panel: #111b21;
  --panel-2: #182229;
  --panel-3: #202c33;
  --panel-hover: #26343d;
  --text: #e9edef;
  --text-2: #d1d7db;
  --muted: #8696a0;
  --line: #26343d;
  --shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
  --radius: 14px;
}

body {
  background: #071015;
}

.auth-screen {
  background: #071015;
}

.auth-visual {
  background:
    radial-gradient(circle at 20% 18%, rgba(0, 168, 132, 0.23), transparent 32%),
    radial-gradient(circle at 82% 84%, rgba(37, 211, 102, 0.11), transparent 35%),
    linear-gradient(145deg, #0a161a, #071015 58%, #0c1d1b);
}

.auth-visual::before {
  opacity: 0.24;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%238696a0' stroke-width='1.4' opacity='.32'%3E%3Cpath d='M18 28h26a8 8 0 0 1 8 8v10a8 8 0 0 1-8 8H32l-8 7 2-7h-8a8 8 0 0 1-8-8V36a8 8 0 0 1 8-8Z'/%3E%3Cpath d='M112 20c13 0 23 9 23 21s-10 21-23 21c-3 0-6 0-8-1l-12 7 4-12c-5-4-7-9-7-15 0-12 10-21 23-21Z'/%3E%3Cpath d='M37 116c0-9 7-16 16-16s16 7 16 16-7 16-16 16c-3 0-5-1-7-2l-9 5 3-9c-2-3-3-6-3-10Z'/%3E%3Cpath d='m126 111 6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2Z'/%3E%3Cpath d='M82 91h18m-9-9v18M15 86l13 7-13 7m140-14-13 7 13 7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 180px 180px;
  mask-image: linear-gradient(to bottom right, black, rgba(0, 0, 0, 0.2));
}

.auth-orb-one {
  box-shadow: inset 0 0 50px rgba(0, 168, 132, 0.1), 0 0 90px rgba(0, 168, 132, 0.15);
}

.brand-mark,
.primary-button,
.send-button {
  background: linear-gradient(135deg, #25d366, #00a884);
}

.auth-copy .auth-hero-title em,
.eyebrow,
.auth-copy .live-dot {
  color: #25d366;
}

.auth-panel {
  background: #0b141a;
  border-left: 1px solid #1f2c33;
  color: #e9edef;
}

.auth-card {
  width: min(430px, 100%);
  padding: 30px;
  background: #111b21;
  border: 1px solid #26343d;
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
}

.auth-tabs {
  padding: 4px;
  background: #0b141a;
  border: 1px solid #26343d;
  border-radius: 13px;
}

.auth-tab {
  border-radius: 10px;
}

.auth-tab.active {
  color: #071a15;
  background: #25d366;
}

.auth-heading h2 {
  color: #e9edef;
}

.auth-heading p,
.field > span {
  color: #aebac1;
}

.input-shell,
.field > input {
  background: #202c33;
  border-color: #2f3f48;
}

.input-shell input,
.field > input {
  color: #e9edef;
}

.input-shell input::placeholder,
.field > input::placeholder {
  color: #667781;
}

.input-shell:focus-within,
.field > input:focus {
  border-color: #00a884;
  box-shadow: 0 0 0 3px rgba(0, 168, 132, 0.12);
}

.guest-note {
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.guest-note strong {
  color: #25d366;
}

.auth-note {
  color: #8696a0;
}

.chat-app {
  background: #0b141a;
  grid-template-columns: 72px 252px minmax(0, 1fr);
}

.room-rail {
  background: #071015;
  border-color: #1e2c33;
}

.channel-panel,
.current-user-bar {
  background: #111b21;
}

.conversation-panel,
.conversation-header {
  background: #202c33;
}

.conversation-header {
  border-bottom-color: #26343d;
}

.conversation-body {
  grid-template-columns: minmax(0, 1fr) 286px;
}

.messages-column {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b141a;
}

.messages-column::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='230' viewBox='0 0 230 230'%3E%3Cg fill='none' stroke='%238696a0' stroke-width='1.2' opacity='.65'%3E%3Cpath d='M22 20h35a9 9 0 0 1 9 9v18a9 9 0 0 1-9 9H41L29 67l3-11H22a9 9 0 0 1-9-9V29a9 9 0 0 1 9-9Z'/%3E%3Cpath d='M154 15c17 0 30 12 30 27 0 7-3 13-8 18l5 16-17-9c-3 1-7 2-10 2-17 0-30-12-30-27s13-27 30-27Z'/%3E%3Ccircle cx='52' cy='151' r='21'/%3E%3Cpath d='M43 151h18m-9-9v18M101 112l9 18 20 3-15 14 4 20-18-9-18 9 4-20-15-14 20-3Z'/%3E%3Cpath d='M167 134h38v27h-20l-10 9 3-9h-11Z'/%3E%3Cpath d='M20 94c10-7 21-7 31 0M173 203c10-7 21-7 31 0M207 81l-11 11 11 11M13 205l11-11-11-11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 230px 230px;
}

.messages-scroll {
  padding: 12px clamp(10px, 3vw, 44px) 8px;
}

.room-hero {
  max-width: 720px;
  margin: 6px auto 20px;
  padding: 15px 18px;
  background: rgba(17, 27, 33, 0.91);
  border-color: #2a3942;
  border-radius: 13px;
  backdrop-filter: blur(5px);
}

.room-hero-icon {
  float: left;
  width: 38px;
  height: 38px;
  margin: 0 12px 0 0;
  border-radius: 12px;
}

.room-hero h2 {
  font-size: 15px;
}

.room-hero p {
  font-size: 10px;
}

.room-hero-meta {
  margin-top: 7px;
}

.date-divider {
  width: max-content;
  margin: 14px auto;
  padding: 5px 10px;
  color: #aebac1;
  background: #182229;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24);
}

.date-divider::before,
.date-divider::after {
  display: none;
}

.message-row {
  width: min(760px, 92%);
  gap: 8px;
  margin: 3px 0;
  padding: 2px 0 2px 7px;
  border-left: 3px solid var(--role-color, #8696a0);
  border-radius: 4px 10px 10px 4px;
}

.message-row.own {
  margin-left: auto;
  flex-direction: row-reverse;
  padding-right: 7px;
  padding-left: 0;
  border-right: 3px solid var(--role-color, #00a884);
  border-left: 0;
}

.message-row:hover {
  background: rgba(32, 44, 51, 0.42);
}

.message-row.own .message-content {
  text-align: right;
}

.message-row.own .message-meta {
  justify-content: flex-end;
}

.message-row.own .message-bubble {
  color: #e9edef;
  text-align: left;
  background: #005c4b;
  border-radius: 12px 4px 12px 12px;
}

.message-bubble {
  padding: 7px 10px;
  color: #e9edef;
  background: #202c33;
  border-radius: 4px 12px 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.message-author {
  color: var(--role-color, var(--author-color));
}

.rank-chip {
  color: var(--role-color);
  background: color-mix(in srgb, var(--role-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--role-color) 32%, transparent);
}

.system-message {
  display: flex;
  width: min(680px, 90%);
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  margin: 8px auto;
  color: #d1d7db;
  font-size: 10px;
  background: rgba(17, 27, 33, 0.94);
  border-left: 4px solid var(--role-color, #00a884);
  border-radius: 8px;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.2);
}

.system-message > span,
.system-message strong {
  color: var(--role-color, #00a884);
}

.system-message strong {
  flex: 1;
}

.system-message time {
  color: var(--muted);
  font-size: 8px;
}

.system-message.system-announcement strong {
  color: #e9edef;
}

.system-message .system-announcer {
  margin-right: 4px;
  color: var(--role-color, #00a884);
  font-weight: 900;
}

.composer {
  padding: 8px 12px 10px;
  background: #202c33;
  border-top: 1px solid #26343d;
}

.composer-input-wrap {
  background: #2a3942;
  border-color: transparent;
  border-radius: 12px;
}

.send-button {
  background: #00a884;
  box-shadow: none;
}

.member-panel {
  background: #111b21;
  border-left-color: #26343d;
}

.role-legend {
  display: flex;
  min-height: 49px;
  align-content: center;
  gap: 5px;
  padding: 8px 10px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}

.role-legend span {
  flex: 0 0 auto;
  align-self: center;
  padding: 4px 7px;
  color: var(--role);
  font-size: 7px;
  font-weight: 800;
  background: color-mix(in srgb, var(--role) 10%, #111b21);
  border: 1px solid color-mix(in srgb, var(--role) 35%, transparent);
  border-radius: 999px;
}

.member-search {
  height: 48px;
  background: #111b21;
}

.member-list {
  height: calc(100% - 97px);
}

.member-item {
  position: relative;
  min-height: 55px;
  padding: 7px 8px 7px 11px;
  border-left: 3px solid var(--role-color, transparent);
  border-radius: 5px 10px 10px 5px;
}

.member-item strong {
  color: var(--role-color, var(--text-2));
  font-size: 10px;
}

.member-item small {
  color: #8696a0;
}

.site-owner-coin-note {
  display: block;
  margin-bottom: 3px;
  overflow: hidden;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-role {
  color: var(--role-color);
}

.member-empty {
  display: grid;
  min-height: 230px;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.member-empty span {
  font-size: 30px;
}

.member-empty strong {
  color: var(--text-2);
  font-size: 10px;
}

.member-empty small {
  max-width: 170px;
  line-height: 1.5;
}

.member-item {
  content-visibility: auto;
  contain-intrinsic-size: 55px;
}

.member-load-more {
  display: grid;
  width: calc(100% - 16px);
  margin: 10px 8px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-hover);
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
}

.member-load-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.member-load-more small {
  margin-top: 2px;
  color: var(--muted);
}

.voice-dock {
  right: 304px;
  width: 320px;
  background: rgba(17, 27, 33, 0.98);
  border-color: rgba(37, 211, 102, 0.35);
}

.voice-users {
  display: grid;
  max-height: 260px;
  gap: 4px;
  padding: 8px 10px;
  overflow-y: auto;
}

.voice-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: #182229;
  border: 1px solid transparent;
  border-radius: 10px;
}

.voice-user.speaking {
  color: #25d366;
  background: rgba(37, 211, 102, 0.08);
  border-color: #25d366;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.12);
}

.voice-user.speaking .avatar {
  box-shadow: 0 0 0 3px #25d366;
}

.voice-user > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.voice-user strong,
.voice-user small {
  display: block;
}

.voice-user strong {
  font-size: 9px;
}

.voice-user small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 7px;
}

.voice-user > button {
  padding: 5px 7px;
  cursor: pointer;
  color: #071a15;
  font-size: 7px;
  font-weight: 800;
  background: #25d366;
  border-radius: 7px;
}

.voice-user.muted::after {
  display: none;
}

.voice-actions button.active {
  color: #071a15;
  background: #25d366;
}

.voice-actions button.requested {
  color: #ffb85c;
  background: rgba(255, 184, 92, 0.12);
}

.radio-stage {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 18px;
  margin-bottom: 14px;
  text-align: center;
  background: linear-gradient(145deg, rgba(0, 168, 132, 0.14), #111b21);
  border: 1px solid #2a3942;
  border-radius: 15px;
}

.radio-stage small {
  color: var(--muted);
}

.radio-disc {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #25d366;
  font-size: 24px;
  background: radial-gradient(circle at center, #111b21 0 14%, #26343d 15% 54%, #111b21 55%);
  border: 2px solid #00a884;
  border-radius: 50%;
}

.radio-disc.playing {
  animation: radio-spin 5s linear infinite;
}

@keyframes radio-spin {
  to {
    transform: rotate(360deg);
  }
}

.command-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}

.command-list code {
  padding: 5px 7px;
  color: #25d366;
  background: #0b141a;
  border: 1px solid #26343d;
  border-radius: 7px;
}

.muted-copy {
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 1100px) {
  .conversation-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .voice-dock {
    right: 18px;
  }
}

@media (max-width: 820px) {
  .auth-panel {
    background:
      radial-gradient(circle at 50% 0, rgba(0, 168, 132, 0.16), transparent 38%),
      #0b141a;
  }

  .auth-card {
    margin: auto;
  }
}

@media (max-width: 680px) {
  .chat-app {
    display: block;
    grid-template-columns: none;
  }

  .conversation-header {
    background: #111b21;
  }

  .messages-scroll {
    padding: 8px 7px 5px;
  }

  .message-row {
    width: 96%;
  }

  .message-row .avatar {
    width: 30px;
    height: 30px;
  }

  .room-hero {
    padding: 12px;
    margin-bottom: 14px;
  }

  .rank-chip {
    display: none;
  }

  .member-panel {
    top: 58px;
    background: #111b21;
  }

  .mobile-nav {
    background: rgba(17, 27, 33, 0.98);
  }

  .voice-dock {
    max-height: 56dvh;
  }

  .auth-panel {
    padding: 16px;
  }

  .auth-card {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .auth-tabs {
    gap: 2px;
  }

  .auth-tab {
    padding-right: 6px;
    padding-left: 6px;
    font-size: 11px;
  }
}

/* Keep every chat message in the left-side stream, including the sender's. */
.messages-scroll .message-row.own {
  margin-right: auto;
  margin-left: 0;
  padding-right: 0;
  padding-left: 7px;
  flex-direction: row;
  border-right: 0;
  border-left: 3px solid var(--role-color, #00a884);
}

.messages-scroll .message-row.own .message-content {
  text-align: left;
}

.messages-scroll .message-row.own .message-meta {
  justify-content: flex-start;
}

.messages-scroll .message-row.own .message-bubble {
  text-align: left;
  border-radius: 4px 12px 12px;
}

/* Referans üst sayaç şeridi */
.top-navigation {
  order: 3;
  overflow: hidden;
}

.conversation-header > .header-actions {
  order: 2;
}

.top-links {
  display: flex;
  min-width: 0;
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
}

.top-social-tabs {
  display: grid;
  width: 356px;
  height: 100%;
  flex: 0 0 356px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-left: 1px solid #2a3942;
}

.top-social-tabs .top-icon {
  position: relative;
  display: flex;
  width: auto;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  padding: 5px 3px 3px;
  color: #7f8e98;
  border-left: 0;
  border-right: 1px solid #26343d;
}

.top-social-tabs .top-icon > span {
  display: block;
  min-height: 20px;
  color: currentColor;
  font-size: 17px;
  font-weight: 900;
  line-height: 20px;
}

.top-social-tabs .top-icon > b {
  position: static;
  right: auto;
  bottom: auto;
  min-width: 22px;
  min-height: 14px;
  padding: 1px 4px;
  color: #1b252b;
  font-size: 8px;
  font-weight: 900;
  line-height: 12px;
  text-align: center;
  background: #e6e8e9;
  border-radius: 4px;
}

.top-social-tabs .top-icon > b:empty {
  visibility: hidden;
}

.top-social-tabs .top-icon > i {
  position: absolute;
  top: 7px;
  right: 8px;
  display: grid;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  place-items: center;
  color: white;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  background: #ff4d67;
  border: 2px solid #15222b;
  border-radius: 999px;
}

.top-social-tabs .top-icon:hover,
.top-social-tabs .top-icon.active {
  color: #ffffff;
  background: #17242d;
}

.top-social-tabs .top-icon.active::after {
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 2px;
  content: "";
  background: #e9edef;
  border-radius: 2px 2px 0 0;
}

.top-social-tabs .top-profile-edit > span {
  font-size: 18px;
}

/* Arkadaş / takip / herkes görünümü */
.social-hub {
  width: min(640px, calc(100% - 24px));
  min-height: 320px;
  margin: 12px auto 72px;
  overflow: hidden;
  background: #111b21;
  border: 1px solid #2a3942;
  border-radius: 12px;
}

.social-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 12px 12px 0;
  background: #111b21;
}

.social-tabs button {
  display: flex;
  min-width: 0;
  height: 37px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  color: #e9edef;
  font-size: 10px;
  background: transparent;
  border: 1px solid #30414d;
  border-right: 0;
}

.social-tabs button:first-child {
  border-radius: 9px 0 0 9px;
}

.social-tabs button:last-child {
  border-right: 1px solid #30414d;
  border-radius: 0 9px 9px 0;
}

.social-tabs button.active {
  background: #26343d;
}

.social-tabs button strong {
  overflow: hidden;
  font-weight: 850;
  text-overflow: ellipsis;
}

.social-tabs button span {
  color: #8fa2ad;
  font-size: 9px;
  font-weight: 800;
}

.social-request-title {
  padding: 15px 16px 7px;
  color: #8fa2ad;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.06em;
}

.social-request-list {
  padding: 0 12px 5px;
}

.social-user-list {
  padding: 7px 12px 18px;
}

.social-user-row {
  display: flex;
  min-height: 72px;
  align-items: center;
  gap: 11px;
  padding: 9px 4px;
  background: transparent;
  border-bottom: 1px solid #2a3942;
}

.social-user-row.request {
  padding-right: 9px;
  padding-left: 9px;
  background: #18252e;
  border: 1px solid #2e404b;
  border-radius: 10px;
}

.social-user-row .avatar-wrap {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.social-user-row .avatar {
  width: 52px;
  height: 52px;
  font-size: 16px;
  border: 1px solid #3b4d58;
  border-radius: 50%;
}

.social-user-copy {
  display: block;
  min-width: 0;
  flex: 1;
  padding: 8px 0;
  cursor: pointer;
  text-align: left;
  background: transparent;
}

.social-user-copy strong,
.social-user-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.social-user-copy strong {
  color: #f2f5f6;
  font-size: 11px;
  font-weight: 850;
}

.social-user-copy small {
  margin-top: 3px;
  color: #8fa2ad;
  font-size: 8px;
  font-weight: 700;
}

.social-gender {
  color: #e7edf0;
  font-size: 15px;
  font-weight: 900;
}

.social-row-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.social-row-actions button {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  cursor: pointer;
  color: #c8d3d9;
  font-size: 9px;
  font-weight: 900;
  background: transparent;
  border-radius: 7px;
}

.social-row-actions button:hover {
  color: white;
  background: #26343d;
}

.social-row-actions button.positive {
  color: white;
  background: #00a884;
}

.social-row-actions button.negative {
  color: white;
  background: #ff4d67;
}

.social-row-actions button.friend-remove {
  color: #ff7b8d;
  background: rgba(255, 77, 103, 0.08);
}

.social-row-actions button.friend-remove:hover {
  color: white;
  background: #ff4d67;
  box-shadow: 0 5px 14px rgba(255, 77, 103, 0.2);
}

.profile-actions .friend-remove-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ff8a9a;
  border-color: rgba(255, 77, 103, 0.38);
}

.profile-actions .friend-remove-button:hover {
  color: white;
  background: #d93d56;
  border-color: #ff5d73;
}

.profile-actions .friend-remove-button .ui-icon {
  width: 13px;
  height: 13px;
}

.social-empty {
  display: grid;
  min-height: 270px;
  place-items: center;
  align-content: center;
  gap: 7px;
  color: #7f8e98;
  text-align: center;
}

.social-empty > span {
  font-size: 36px;
}

.social-empty strong {
  color: #e9edef;
  font-size: 12px;
}

.social-empty small {
  max-width: 250px;
  font-size: 9px;
  line-height: 1.5;
}

/* DM ve bildirim satırları */
.notification-card {
  width: min(720px, calc(100% - 24px));
  min-height: 62px;
  margin: 8px auto;
  cursor: pointer;
  color: inherit;
  text-align: left;
}

.notification-card > div {
  min-width: 0;
  flex: 1;
}

.notification-card:hover {
  background: #1d2b34;
  border-color: #3a4d59;
}

.notification-person {
  margin-left: auto;
}

.notification-person .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

@media (max-width: 1280px) {
  .top-social-tabs {
    width: 320px;
    flex-basis: 320px;
  }
}

@media (max-width: 1100px) {
  .top-links {
    display: none;
  }

  .top-social-tabs {
    margin-left: auto;
  }
}

@media (max-width: 680px) {
  .top-navigation {
    display: none;
  }

  .mobile-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .mobile-nav button {
    position: relative;
    min-width: 0;
    font-size: 7px;
    font-weight: 750;
  }

  .mobile-nav button span {
    font-size: 16px;
  }

  .mobile-nav .mobile-random {
    color: #38dcb3;
  }

  .mobile-nav .mobile-random span {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    background: rgba(35, 216, 169, 0.1);
    border: 1px solid rgba(35, 216, 169, 0.22);
    border-radius: 9px;
  }

  .mobile-nav .mobile-random.active span {
    color: #061914;
    background: #2bdcaf;
    border-color: #2bdcaf;
  }

  .mobile-nav button i {
    position: absolute;
    top: 5px;
    left: 50%;
    display: grid;
    min-width: 14px;
    height: 14px;
    margin-left: 7px;
    padding: 0 3px;
    place-items: center;
    color: white;
    font-size: 6px;
    font-style: normal;
    font-weight: 900;
    background: #ff4d67;
    border: 2px solid #111b21;
    border-radius: 999px;
  }

  .mobile-nav button i:empty {
    display: none;
  }

  .social-hub {
    width: 100%;
    margin: 0 0 70px;
    border: 0;
    border-radius: 0;
  }

  .social-tabs {
    position: sticky;
    top: 0;
    z-index: 4;
    padding: 9px 4px 5px;
  }

  .social-user-list,
  .social-request-list {
    padding-right: 5px;
    padding-left: 5px;
  }

  .social-user-row {
    min-height: 66px;
    gap: 8px;
  }

  .social-user-row .avatar-wrap,
  .social-user-row .avatar {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .social-gender {
    display: none;
  }

  .notification-card {
    width: 100%;
    margin: 5px 0;
  }
}

/* Tek parça, tutarlı SVG ikon sistemi */
.svg-sprite {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-social-tabs .top-icon > span .ui-icon {
  width: 18px;
  height: 18px;
}

.header-actions .ui-icon,
.user-bar-actions .ui-icon,
.composer .ui-icon {
  width: 17px;
  height: 17px;
}

.status-panel-title .ui-icon,
.status-room .ui-icon,
.member-search .ui-icon {
  width: 15px;
  height: 15px;
}

.message-actions .ui-icon {
  width: 14px;
  height: 14px;
}

.read-ticks {
  display: inline-flex;
  margin-left: 2px;
}

.read-ticks .ui-icon {
  width: 9px;
  height: 9px;
  margin-left: -3px;
}

.profile-facts > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.presence-fact i {
  width: 7px;
  height: 7px;
  background: #667781;
  border-radius: 50%;
}

.presence-fact.online i {
  background: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}

.profile-facts .friend-count-fact {
  color: #c9fff1;
  background: rgba(0, 168, 132, 0.12);
  border: 1px solid rgba(51, 222, 179, 0.18);
}

.friend-count-fact .ui-icon {
  width: 12px;
  height: 12px;
  color: #39ddb4;
}

.friend-count-fact b {
  color: #ffffff;
  font-weight: 950;
}

.context-menu button {
  align-items: center;
  gap: 8px;
}

.context-menu button .ui-icon {
  width: 14px;
  height: 14px;
}

/* Üye kartları yetki rengine göre her zaman dolu görünür. */
.member-item {
  margin: 3px 0;
  padding-right: 8px;
  padding-left: 9px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--role-color, #8696a0) 32%, #142129),
      color-mix(in srgb, var(--role-color, #8696a0) 14%, #142129)
    );
  border: 1px solid color-mix(in srgb, var(--role-color, #8696a0) 55%, #26343d);
  border-left: 1px solid color-mix(in srgb, var(--role-color, #8696a0) 55%, #26343d);
  border-radius: 10px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.member-item:hover {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--role-color, #8696a0) 32%, #142129),
      color-mix(in srgb, var(--role-color, #8696a0) 14%, #142129)
    );
  border-color: color-mix(in srgb, var(--role-color, #8696a0) 55%, #26343d);
}

.member-list .member-item,
.member-list .member-item:hover,
.member-list .member-item:focus,
.member-list .member-item:active {
  background: color-mix(in srgb, var(--role-color, #8696a0) 14%, #111b21);
  border-color: color-mix(in srgb, var(--role-color, #8696a0) 55%, #26343d);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.02);
}

@media (hover: hover) and (pointer: fine) {
  .member-list .member-item:hover {
    filter: brightness(1.045);
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.035),
      0 0 0 1px color-mix(in srgb, var(--role-color, #8696a0) 13%, transparent),
      0 4px 12px rgba(0, 0, 0, 0.12);
  }
}

.member-item strong {
  color: color-mix(in srgb, var(--role-color, #e9edef) 78%, white);
}

.member-icons .ui-icon {
  width: 13px;
  height: 13px;
}

.member-icons i:last-child {
  letter-spacing: 0;
}

/* Yetkili mesaj metinleri doğrudan yetki rengiyle görünür. */
.messages-scroll .message-row,
.messages-scroll .message-row.own {
  width: max-content;
  max-width: min(790px, calc(100% - 14px));
  min-height: 36px;
  align-items: flex-start;
  gap: 7px;
  padding: 1px 0;
  margin: 1px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.messages-scroll .message-row:hover {
  background: transparent;
}

.message-row > button[data-profile-id] {
  margin-top: 1px;
}

.messages-scroll .message-row .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
  border: 1px solid #41515d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.38);
}

.messages-scroll .message-content,
.messages-scroll .message-row.own .message-content {
  position: relative;
  width: fit-content;
  max-width: min(720px, calc(100vw - 430px));
  min-width: 0;
  flex: 0 1 auto;
  text-align: left;
}

.message-card {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-width: 84px;
  padding: 5px 7px;
  color: #dce5ea;
  background: #17242e;
  border: 1px solid #2a3b47;
  border-radius: 4px 7px 7px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.message-card::before {
  position: absolute;
  top: 7px;
  left: -5px;
  width: 0;
  height: 0;
  content: "";
  border-top: 4px solid transparent;
  border-right: 5px solid #2a3b47;
  border-bottom: 4px solid transparent;
}

.message-card::after {
  position: absolute;
  top: 8px;
  left: -3px;
  width: 0;
  height: 0;
  content: "";
  border-top: 3px solid transparent;
  border-right: 4px solid #17242e;
  border-bottom: 3px solid transparent;
}

.messages-scroll .message-meta,
.messages-scroll .message-row.own .message-meta {
  min-height: 12px;
  justify-content: flex-start;
  gap: 4px;
  margin: 0 0 2px;
}

.messages-scroll .message-author {
  max-width: min(360px, 62vw);
  overflow: hidden;
  color: var(--role-color, var(--author-color, #b6c5ce));
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-scroll .rank-chip {
  display: none;
}

.messages-scroll .message-bubble,
.messages-scroll .message-row.own .message-bubble {
  display: block;
  max-width: 100%;
  padding: 0 39px 0 0;
  color: #c9d4da;
  text-align: left;
  font-size: 12px;
  font-weight: 580;
  line-height: 1.3;
  word-break: break-word;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.message-stamp {
  position: absolute;
  right: 6px;
  bottom: 4px;
  display: flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}

.message-stamp .message-time {
  color: #8fa2ae;
  font-size: 7px;
  font-weight: 750;
}

.message-stamp .message-edited {
  color: #748893;
  font-size: 6px;
  font-weight: 700;
}

.message-stamp .read-ticks {
  margin-left: 1px;
}

.messages-scroll .reply-quote {
  display: grid;
  max-width: 100%;
  gap: 1px;
  padding: 3px 6px 4px;
  margin: 2px 0 4px;
  overflow: hidden;
  color: #aebdc6;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.28;
  background: #1b2a35;
  border: 1px solid #40515d;
  border-left: 3px solid var(--role-color, #8fa3af);
  border-radius: 4px;
}

.messages-scroll .reply-quote strong {
  overflow: hidden;
  color: var(--role-color, #c6d2d9);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-scroll .reply-quote span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-card .message-media {
  width: min(420px, calc(100vw - 455px));
  max-width: 100%;
  margin: 4px 0 13px;
  border-color: #344651;
  border-radius: 7px;
}

.message-card .message-media audio {
  max-width: 100%;
}

.messages-scroll .reactions {
  margin-top: 2px;
  margin-left: 4px;
}

.messages-scroll .message-actions {
  top: 1px;
  right: auto;
  left: calc(100% + 4px);
}

.message-row.staff-message .message-card {
  background: color-mix(in srgb, var(--role-color) 9%, #17242e);
  border-color: color-mix(in srgb, var(--role-color) 34%, #2a3b47);
}

.message-row.staff-message .message-card::before {
  border-right-color: color-mix(in srgb, var(--role-color) 34%, #2a3b47);
}

.message-row.staff-message .message-card::after {
  border-right-color: color-mix(in srgb, var(--role-color) 9%, #17242e);
}

.message-row.staff-message .message-bubble,
.message-row.staff-message.own .message-bubble {
  color: color-mix(in srgb, var(--role-color) 88%, white);
  font-weight: 760;
  background: transparent;
  border: 0;
}

.message-row.staff-message .message-bubble a {
  color: color-mix(in srgb, var(--role-color) 70%, white);
}

@media (max-width: 960px) {
  .messages-scroll .message-content,
  .messages-scroll .message-row.own .message-content {
    max-width: calc(100vw - 70px);
  }

  .message-card .message-media {
    width: min(420px, calc(100vw - 90px));
  }
}

@media (max-width: 680px) {
  .messages-scroll .message-row,
  .messages-scroll .message-row.own {
    max-width: calc(100% - 2px);
    gap: 5px;
  }

  .messages-scroll .message-row .avatar {
    width: 30px;
    height: 30px;
  }

  .messages-scroll .message-content,
  .messages-scroll .message-row.own .message-content {
    max-width: calc(100vw - 49px);
  }

  .message-card {
    max-width: 100%;
    min-width: 78px;
    padding: 4px 6px 5px;
  }

  .messages-scroll .message-author {
    max-width: 58vw;
    font-size: 10px;
  }

  .messages-scroll .message-bubble,
  .messages-scroll .message-row.own .message-bubble {
    padding-right: 35px;
    font-size: 11px;
  }

  .message-card .message-media {
    width: min(330px, calc(100vw - 67px));
  }
}

/* Final tablet overrides: later legacy responsive rules cannot hide tablet tools. */
@media (min-width: 681px) and (max-width: 1100px) {
  .chat-app {
    grid-template-columns: 58px clamp(188px, 23vw, 228px) minmax(0, 1fr) !important;
  }

  .room-rail {
    width: 58px;
    padding-inline: 7px;
  }

  .rail-brand,
  .rail-room,
  .rail-button {
    width: 42px;
    height: 42px;
  }

  .channel-panel {
    min-width: 0;
  }

  .channel-brand,
  .conversation-header {
    min-height: 64px;
    height: 64px;
  }

  .conversation-header {
    gap: 6px;
    padding-inline: 8px;
  }

  .header-channel-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .header-title {
    width: clamp(92px, 14vw, 142px);
    flex-basis: clamp(92px, 14vw, 142px);
  }

  .header-title strong,
  .header-title span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top-links,
  .conversation-header .header-search {
    display: none !important;
  }

  .top-social-tabs {
    width: clamp(205px, 29vw, 270px);
    flex-basis: clamp(205px, 29vw, 270px);
  }

  .top-social-tabs .top-icon {
    min-width: 38px;
    padding-inline: 2px;
  }

  .conversation-header > .header-actions {
    order: 4;
    display: flex;
    flex: 0 0 auto;
  }

  .header-actions .tablet-members-button {
    position: relative;
    display: grid !important;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border-radius: 10px;
  }

  .tablet-members-button b {
    position: absolute;
    top: 1px;
    right: 1px;
    display: grid;
    min-width: 16px;
    height: 16px;
    padding-inline: 3px;
    place-items: center;
    color: #fff;
    font-size: 7px;
    background: #ff4964;
    border: 2px solid #202c33;
    border-radius: 999px;
  }

  .conversation-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .member-panel {
    position: fixed;
    top: 64px;
    right: 0;
    bottom: 0;
    z-index: 500;
    width: min(370px, 48vw);
    height: auto;
    border-left: 1px solid #32434d;
    box-shadow: -22px 0 60px rgba(0, 0, 0, 0.48);
    transform: translateX(105%);
    transition: transform 180ms ease;
  }

  .member-panel.open {
    transform: translateX(0);
  }

  .member-list .member-item {
    min-height: 64px;
    margin-block: 4px;
  }

  .messages-scroll {
    padding: 12px clamp(12px, 2.2vw, 28px) 8px;
  }

  .messages-scroll .message-content,
  .messages-scroll .message-row.own .message-content {
    max-width: min(720px, calc(100vw - 330px));
  }

  .composer {
    min-height: 62px;
    gap: 7px;
    padding: 9px 10px;
  }

  .composer textarea,
  #message-input {
    min-height: 42px;
    font-size: 16px !important;
  }

  .modal {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
  }

  .mobile-management-modal .mobile-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 681px) and (max-width: 780px) {
  .chat-app {
    grid-template-columns: 54px 184px minmax(0, 1fr) !important;
  }

  .room-rail {
    width: 54px;
  }

  .header-channel-icon,
  .header-title span {
    display: none;
  }

  .header-title {
    width: 88px;
    flex-basis: 88px;
  }

  .top-social-tabs {
    width: 190px;
    flex-basis: 190px;
  }

  .member-panel {
    width: min(350px, 56vw);
  }

  .messages-scroll .message-content,
  .messages-scroll .message-row.own .message-content {
    max-width: calc(100vw - 286px);
  }
}

@media (max-width: 680px), (min-width: 1101px) {
  .header-actions .tablet-members-button {
    display: none !important;
  }
}

/* Tablet sağ kenar hızlı menüsü: oda listesi ve rastgele sesli sohbet. */
.tablet-action-dock {
  display: none;
}

@media (min-width: 681px) and (max-width: 1100px) {
  .tablet-action-dock {
    position: fixed;
    top: 50%;
    right: 10px;
    z-index: 420;
    display: grid;
    width: 154px;
    max-height: calc(100dvh - 96px);
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px;
    scrollbar-width: none;
    transform: translateY(-50%);
  }

  .tablet-action-dock::-webkit-scrollbar {
    display: none;
  }

  .tablet-action-card {
    display: grid;
    min-height: 62px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    cursor: pointer;
    color: #eaf7f4;
    text-align: left;
    background: rgba(17, 31, 38, 0.94);
    border: 1px solid rgba(116, 148, 160, 0.32);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(16px);
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .tablet-action-card:hover,
  .tablet-action-card:focus-visible {
    border-color: rgba(62, 226, 184, 0.6);
    background: rgba(23, 43, 50, 0.98);
    transform: translateX(-3px);
  }

  .tablet-action-card:active {
    transform: translateX(-2px) scale(0.98);
  }

  .tablet-action-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #9fb4bd;
    background: #20323b;
    border: 1px solid #344a54;
    border-radius: 12px;
  }

  .tablet-action-icon .ui-icon {
    width: 19px;
    height: 19px;
  }

  .tablet-action-card.random .tablet-action-icon {
    color: #05221a;
    background: linear-gradient(145deg, #20d6aa, #39e7bb);
    border-color: #46e8c0;
    box-shadow: 0 7px 20px rgba(31, 214, 169, 0.25);
  }

  .tablet-action-card.authority .tablet-action-icon {
    color: #ffe18a;
    background: linear-gradient(145deg, #4a3920, #2c251b);
    border-color: rgba(255, 209, 94, 0.52);
  }

  .tablet-action-card.profile-market .tablet-action-icon {
    color: #d7c6ff;
    background: linear-gradient(145deg, #3a3158, #252338);
    border-color: rgba(176, 141, 255, 0.48);
  }

  .tablet-action-card.create-room .tablet-action-icon {
    color: #b9e7ff;
    background: linear-gradient(145deg, #233e4c, #1c2d36);
    border-color: rgba(105, 202, 255, 0.46);
  }

  .tablet-action-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
  }

  .tablet-action-copy strong {
    overflow: hidden;
    color: #f4fbf9;
    font-size: 11px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tablet-action-copy small {
    overflow: hidden;
    color: #8fa4ad;
    font-size: 8px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .member-panel .member-list {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }

  /* Tablet panelinde odalar ve kullanıcılar iki dengeli, bağımsız liste olarak kalır. */
  .member-panel .right-room-list {
    min-height: 205px;
    max-height: 290px;
    flex: 0 0 clamp(205px, 38dvh, 290px);
    overscroll-behavior: contain;
  }

  .member-panel .member-list {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .member-panel .status-panel-title {
    padding: 0;
  }

  .member-panel .status-panel-menu,
  .member-panel .status-panel-label {
    display: none;
  }

  .member-panel .status-panel-close {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    cursor: pointer;
    color: #dce8ed;
    text-align: left;
    background: transparent;
    border: 0;
    transition: color 160ms ease, background 160ms ease;
  }

  .member-panel .status-panel-close:hover,
  .member-panel .status-panel-close:focus-visible {
    color: #ffffff;
    background: #1a2a34;
  }

  .member-panel .status-panel-close .ui-icon {
    order: 2;
    width: 18px;
    height: 18px;
  }

  .member-panel .status-panel-close strong {
    order: 1;
    font-size: 13px;
    font-weight: 850;
  }
}

@media (min-width: 681px) and (max-width: 780px) {
  .tablet-action-dock {
    right: 8px;
    width: 136px;
  }

  .tablet-action-card {
    min-height: 54px;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 7px;
    padding: 7px;
    border-radius: 13px;
  }

  .tablet-action-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .tablet-action-copy strong {
    font-size: 10px;
  }

  .tablet-action-copy small {
    font-size: 7px;
  }
}

/* Flood koruması: beş saniyelik tam ekran, dokunmayı engelleyen uyarı */
.spam-warning-overlay {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(22px, 5vw, 72px);
  overflow: hidden;
  color: #f7fafc;
  background: rgba(5, 11, 15, 0.98);
  isolation: isolate;
}

.spam-warning-pulse {
  position: absolute;
  z-index: -1;
  width: min(64vw, 720px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 77, 103, 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(255, 77, 103, 0.035),
    0 0 0 150px rgba(255, 77, 103, 0.02);
  opacity: 0;
}

.spam-warning-card {
  display: flex;
  width: min(680px, 100%);
  align-items: center;
  flex-direction: column;
  text-align: center;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
}

.spam-warning-overlay.is-visible .spam-warning-card {
  animation: spam-warning-enter 180ms ease-out forwards;
}

.spam-warning-overlay.is-visible .spam-warning-pulse {
  animation: spam-warning-pulse 1.4s ease-out infinite;
}

.spam-warning-icon {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  margin-bottom: 24px;
  color: #ff657d;
  background: #25141a;
  border: 1px solid #743040;
  border-radius: 50%;
  box-shadow: 0 18px 60px rgba(255, 49, 87, 0.2);
}

.spam-warning-icon .ui-icon {
  width: 38px;
  height: 38px;
  stroke-width: 2;
}

.spam-warning-kicker {
  margin-bottom: 12px;
  color: #ff657d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.2em;
}

.spam-warning-card h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.spam-warning-card > p {
  max-width: 540px;
  margin: 20px 0 24px;
  color: #aebdc6;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 650;
  line-height: 1.55;
}

.spam-warning-count {
  padding: 9px 14px;
  color: #ffd5dc;
  background: #28151b;
  border: 1px solid #6f2e3e;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.11em;
}

.spam-warning-timer {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 38px;
  color: #81939e;
  font-size: 13px;
  font-weight: 750;
}

.spam-warning-timer b {
  color: #fff;
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

.spam-warning-progress {
  width: min(440px, 82vw);
  height: 4px;
  margin-top: 14px;
  overflow: hidden;
  background: #1b2931;
  border-radius: 999px;
}

.spam-warning-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: #ff4d67;
  border-radius: inherit;
  transform-origin: left;
}

.spam-warning-overlay.is-visible .spam-warning-progress i {
  animation: spam-warning-countdown var(--spam-warning-seconds, 5s) linear forwards;
}

.spam-warning-overlay.is-banned .spam-warning-icon,
.spam-warning-overlay.is-banned .spam-warning-count {
  background: #2c1118;
  border-color: #a33248;
}

@keyframes spam-warning-enter {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes spam-warning-pulse {
  0% { opacity: 0; transform: scale(0.82); }
  35% { opacity: 0.8; }
  100% { opacity: 0; transform: scale(1.12); }
}

@keyframes spam-warning-countdown {
  to { transform: scaleX(0); }
}

@media (max-width: 680px) {
  .spam-warning-overlay {
    padding: 24px 20px max(30px, env(safe-area-inset-bottom));
  }

  .spam-warning-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
  }

  .spam-warning-icon .ui-icon {
    width: 32px;
    height: 32px;
  }

  .spam-warning-card h2 {
    font-size: clamp(36px, 11vw, 50px);
  }

  .spam-warning-card > p {
    margin: 16px 0 22px;
    font-size: 15px;
  }

  .spam-warning-timer {
    margin-top: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spam-warning-overlay.is-visible .spam-warning-card {
    animation-duration: 0.01ms;
  }

  .spam-warning-overlay.is-visible .spam-warning-pulse {
    animation: none;
    opacity: 0.35;
  }
}

/* Beş saniyelik tam ekran canlı duyuru */
.live-notice-screen {
  position: fixed !important;
  z-index: 2147483647 !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  min-width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: 0;
  margin: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  transform: none !important;
  background: #0b141a;
}

html.announcement-active,
body.announcement-active {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.live-notice-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

.live-notice-card {
  position: relative;
  display: grid;
  width: 100vw;
  height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: #e9edef;
  background: #0b141a;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transform: none;
}

.live-notice-card::before {
  display: none;
}

.live-notice-screen.is-visible .live-notice-card {
  animation: announcement-enter 0.2s ease-out forwards;
}

.live-notice-head {
  display: flex;
  min-height: 82px;
  align-items: center;
  gap: 13px;
  padding: 16px clamp(22px, 4vw, 60px);
  background: #111b21;
  border-bottom: 1px solid #223039;
}

.live-notice-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  margin: 0;
  overflow: visible;
  color: color-mix(in srgb, var(--announcement-color, #00a884) 78%, white);
  background: color-mix(in srgb, var(--announcement-color, #00a884) 13%, #18252d);
  border: 1px solid color-mix(in srgb, var(--announcement-color, #00a884) 45%, #354550);
  border-radius: 50%;
}

.live-notice-icon .ui-icon {
  display: block;
  width: 21px;
  height: 21px;
  overflow: visible;
  stroke-width: 2.25;
  vertical-align: 0;
}

.live-notice-head > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.live-notice-head > div:nth-child(2) > strong,
.live-notice-head > div:nth-child(2) > span {
  display: block;
}

.live-notice-head > div:nth-child(2) > strong {
  color: #f1f4f5;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 850;
}

.live-notice-head > div:nth-child(2) > span {
  margin-top: 2px;
  overflow: hidden;
  color: #8696a0;
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-notice-timer {
  display: flex;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: color-mix(in srgb, var(--announcement-color, #00a884) 80%, white);
  background: #0b141a;
  border: 1px solid color-mix(in srgb, var(--announcement-color, #00a884) 46%, #354550);
  border-radius: 50%;
}

.live-notice-timer b {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.live-notice-timer small {
  margin-top: 4px;
  color: #8696a0;
  font-size: 7px;
  font-weight: 800;
}

.live-notice-body {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: clamp(28px, 5vh, 70px) clamp(22px, 6vw, 90px);
  text-align: center;
}

.live-notice-person {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.live-notice-person .avatar {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  color: white;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  border: 2px solid color-mix(in srgb, var(--announcement-color, #00a884) 72%, white);
  border-radius: 50%;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--announcement-color, #00a884) 12%, transparent);
}

.live-notice-person .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.live-notice-person strong,
.live-notice-person span {
  display: block;
}

.live-notice-person strong {
  color: #f1f4f5;
  font-size: 16px;
  font-weight: 850;
  text-align: left;
}

.live-notice-person span {
  margin-top: 4px;
  color: color-mix(in srgb, var(--announcement-color, #00a884) 74%, white);
  font-size: 10px;
  font-weight: 800;
  text-align: left;
}

.live-notice-card > p {
  display: none;
}

.live-notice-body > p {
  width: min(1050px, 92vw);
  max-height: min(48vh, 420px);
  margin: clamp(30px, 5vh, 58px) 0 0;
  overflow: auto;
  color: #f4f7f8;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.6vw, 72px);
  font-weight: 850;
  line-height: 1.18;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  scrollbar-width: none;
}

.live-notice-body > p::-webkit-scrollbar {
  display: none;
}

.live-notice-screen[data-message-size="medium"] .live-notice-body > p {
  font-size: clamp(34px, 4.7vw, 60px);
}

.live-notice-screen[data-message-size="long"] .live-notice-body > p {
  font-size: clamp(25px, 3.4vw, 43px);
}

.live-notice-footer {
  display: grid;
  width: min(760px, calc(100vw - 44px));
  gap: 10px;
  justify-self: center;
  padding: 0 0 clamp(22px, 4vh, 42px);
}

.live-notice-footer > span {
  text-align: center;
  color: #667781;
  font-size: 9px;
  font-weight: 700;
}

.live-notice-progress {
  height: 3px;
  overflow: hidden;
  background: #26343d;
  border-radius: 999px;
}

.live-notice-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--announcement-color, #00a884);
  border-radius: inherit;
  transform-origin: left;
}

.live-notice-screen.is-visible .live-notice-progress i {
  animation: announcement-countdown 5s linear forwards;
}

@keyframes announcement-enter {
  to {
    opacity: 1;
  }
}

@keyframes announcement-countdown {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 680px) {
  .live-notice-screen {
    padding: 0;
  }

  .live-notice-card {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  .live-notice-head {
    min-height: 70px;
    padding: 12px 15px;
  }

  .live-notice-body {
    padding: 24px 18px;
  }

  .live-notice-body > p {
    width: 100%;
    max-height: 46vh;
    margin-top: 34px;
    font-size: clamp(29px, 9vw, 40px);
    line-height: 1.2;
  }

  .live-notice-screen[data-message-size="medium"] .live-notice-body > p {
    font-size: clamp(25px, 7.4vw, 34px);
  }

  .live-notice-screen[data-message-size="long"] .live-notice-body > p {
    font-size: clamp(20px, 5.8vw, 27px);
  }

  .live-notice-footer {
    width: calc(100vw - 34px);
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }

  .live-notice-person .avatar {
    width: 58px;
    height: 58px;
    font-size: 19px;
  }

  .mobile-nav .ui-icon {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-notice-screen.is-visible .live-notice-card {
    animation-duration: 0.01ms;
  }
}

/* Premium random voice lobby */
.random-overlay {
  position: fixed;
  z-index: 1850;
  inset: 0;
  display: grid;
  padding: 16px;
  overflow: hidden;
  background: #05080d;
  place-items: center;
}

.random-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 168, 132, 0.2), transparent 32%),
    radial-gradient(circle at 12% 85%, rgba(46, 118, 255, 0.11), transparent 29%),
    radial-gradient(circle at 88% 72%, rgba(162, 79, 255, 0.1), transparent 28%),
    #05080d;
}

.random-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.26;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.random-shell {
  position: relative;
  display: grid;
  width: min(470px, 100%);
  height: min(760px, calc(100dvh - 32px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 28%),
    rgba(9, 14, 22, 0.96);
  border: 1px solid #26323d;
  border-radius: 27px;
  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.58),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.random-header {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(134, 150, 160, 0.13);
}

.random-brand,
.call-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.random-brand > span,
.call-brand > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #061a15;
  background: linear-gradient(145deg, #24ddb0, #00a884);
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 168, 132, 0.25);
}

.random-brand .ui-icon,
.call-brand .ui-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.35;
}

.random-brand strong,
.call-brand strong {
  color: #f0f5f7;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 850;
  letter-spacing: -0.4px;
}

.random-brand em,
.call-brand em {
  color: #23d8a9;
  font-style: normal;
}

#random-close {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  cursor: pointer;
  color: #8fa0aa;
  background: #121a23;
  border: 1px solid #27333d;
  border-radius: 11px;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

#random-close:hover {
  color: #eef3f5;
  background: #1b2731;
}

#random-close .ui-icon {
  width: 17px;
  height: 17px;
}

.random-main {
  display: grid;
  min-height: 0;
  padding: clamp(20px, 4vh, 38px) 34px 22px;
  overflow-y: auto;
  place-items: center;
  scrollbar-width: none;
}

.random-main::-webkit-scrollbar {
  display: none;
}

.random-idle,
.random-searching {
  display: flex;
  width: 100%;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.random-radar,
.search-orbit {
  position: relative;
  display: grid;
  width: 124px;
  height: 124px;
  margin-bottom: 22px;
  place-items: center;
}

.random-radar > i,
.search-orbit > i {
  position: absolute;
  border: 1px solid rgba(35, 216, 169, 0.22);
  border-radius: 50%;
  animation: voice-orbit 2.8s ease-out infinite;
}

.random-radar > i:nth-child(1),
.search-orbit > i:nth-child(1) {
  width: 64px;
  height: 64px;
}

.random-radar > i:nth-child(2),
.search-orbit > i:nth-child(2) {
  width: 92px;
  height: 92px;
  animation-delay: 0.35s;
}

.random-radar > i:nth-child(3),
.search-orbit > i:nth-child(3) {
  width: 122px;
  height: 122px;
  animation-delay: 0.7s;
}

.random-radar > span,
.search-orbit > span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: #051912;
  background: linear-gradient(145deg, #32e2b7, #00a884);
  border: 5px solid rgba(9, 14, 22, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(40, 225, 178, 0.4),
    0 14px 38px rgba(0, 168, 132, 0.34);
}

.random-radar .ui-icon,
.search-orbit .ui-icon {
  width: 23px;
  height: 23px;
  stroke-width: 2.25;
}

.random-badge {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: #61e7c4;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.85px;
  background: rgba(0, 168, 132, 0.08);
  border: 1px solid rgba(35, 216, 169, 0.35);
  border-radius: 999px;
}

.random-badge b {
  width: 6px;
  height: 6px;
  background: #23d8a9;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(35, 216, 169, 0.1);
}

.random-idle h2,
.random-searching h2 {
  margin: 17px 0 7px;
  color: #f3f6f7;
  font-family: var(--font-display);
  font-size: clamp(27px, 5vw, 34px);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -1.15px;
}

.random-idle > p,
.random-searching > p {
  max-width: 360px;
  margin: 0;
  color: #91a0aa;
  font-size: 11px;
  font-weight: 570;
  line-height: 1.62;
}

.random-live-stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 18px;
}

.random-live-stats article {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  color: #aebbc3;
  text-align: left;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid #27343e;
  border-radius: 12px;
}

.random-live-stats article > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  color: #23d8a9;
  background: rgba(35, 216, 169, 0.1);
  border-radius: 9px;
  font-size: 15px;
}

.random-live-stats .ui-icon {
  width: 14px;
  height: 14px;
}

.random-live-stats strong,
.random-live-stats small {
  display: block;
}

.random-live-stats strong {
  color: #eef3f5;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.random-live-stats small {
  margin-top: 4px;
  overflow: hidden;
  color: #7f909a;
  font-size: 7px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.random-live-stats .women {
  color: #ff9cc2;
  background: linear-gradient(145deg, rgba(255, 83, 154, 0.12), rgba(255, 255, 255, 0.02));
  border-color: rgba(255, 107, 166, 0.3);
}

.random-live-stats .women > span {
  background: rgba(255, 83, 154, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255, 165, 200, 0.12);
}

.random-live-stats .women strong,
.random-live-stats .women small {
  color: #ffb4d1;
}

.random-live-stats .men > span {
  color: #93bcff;
  background: rgba(73, 132, 255, 0.12);
}

.random-live-stats .men strong {
  color: #c1d6ff;
}

.random-gender-picker {
  display: grid;
  width: 100%;
  gap: 10px;
  padding: 12px;
  margin-top: 13px;
  text-align: left;
  background: #0d151e;
  border: 1px solid #293641;
  border-radius: 16px;
}

.random-gender-picker > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.random-gender-picker > header span,
.random-gender-picker > header strong {
  display: block;
}

.random-gender-picker > header span {
  color: #6f818c;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.random-gender-picker > header strong {
  margin-top: 3px;
  color: #eef3f5;
  font-size: 11px;
  font-weight: 850;
}

.random-gender-picker > header button {
  min-height: 28px;
  padding: 0 9px;
  cursor: pointer;
  color: #65e7c5;
  background: rgba(0, 168, 132, 0.08);
  border: 1px solid rgba(35, 216, 169, 0.24);
  border-radius: 8px;
  font-size: 7px;
  font-weight: 850;
}

.random-gender-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.random-gender-options > button {
  display: flex;
  min-width: 0;
  min-height: 62px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  cursor: pointer;
  color: #aebbc3;
  text-align: left;
  background: #111b24;
  border: 1px solid #2b3944;
  border-radius: 13px;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.random-gender-options > button:hover {
  background: #17232d;
  border-color: #40515d;
  transform: translateY(-1px);
}

.random-gender-options > button > span {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #91b9ff;
  background: rgba(73, 132, 255, 0.12);
  border-radius: 11px;
  font-size: 20px;
  font-weight: 900;
}

.random-gender-options strong,
.random-gender-options small {
  display: block;
}

.random-gender-options strong {
  color: #eaf0f3;
  font-size: 10px;
  font-weight: 850;
}

.random-gender-options small {
  margin-top: 3px;
  color: #72838d;
  font-size: 7px;
  font-weight: 650;
}

.random-gender-options > button.selected {
  background: linear-gradient(145deg, rgba(73, 132, 255, 0.17), #14202b);
  border-color: #4d87df;
  box-shadow: 0 9px 22px rgba(37, 92, 178, 0.16);
}

.random-gender-options > button.woman {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 167, 202, 0.1), transparent 32%),
    #17141d;
  border-color: rgba(255, 107, 166, 0.3);
}

.random-gender-options > button.woman:hover,
.random-gender-options > button.woman.selected {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 190, 216, 0.2), transparent 35%),
    linear-gradient(145deg, rgba(255, 83, 154, 0.2), #211520);
  border-color: #ff6ba6;
  box-shadow: 0 9px 24px rgba(255, 65, 140, 0.17);
}

.random-gender-options > button.woman > span {
  color: #ffb2cf;
  background: rgba(255, 83, 154, 0.15);
}

.random-gender-options > button.woman strong {
  color: #ffc0d8;
}

.random-gender-picker > p {
  margin: -1px 0 0;
  color: #70818b;
  font-size: 7px;
  font-weight: 650;
  text-align: center;
}

.random-start {
  display: flex;
  width: 100%;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
  cursor: pointer;
  color: #041713;
  background: linear-gradient(135deg, #25d9ad, #00a884);
  border-radius: 14px;
  box-shadow: 0 13px 30px rgba(0, 168, 132, 0.22);
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.random-start:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.random-start:disabled,
.random-start.needs-gender {
  cursor: not-allowed;
  color: #7c8b92;
  background: #202b33;
  box-shadow: none;
  filter: none;
  transform: none;
}

.random-start span {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 850;
}

.random-start .ui-icon {
  width: 17px;
  height: 17px;
}

.random-test,
.random-cancel {
  display: flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 7px;
  cursor: pointer;
  color: #83949e;
  font-size: 8px;
  font-weight: 750;
  background: transparent;
}

.random-test:hover,
.random-test.success {
  color: #55dfbb;
}

.random-test .ui-icon {
  width: 13px;
  height: 13px;
}

.random-footer {
  display: grid;
  min-height: 50px;
  padding: 0 18px;
  color: #62737d;
  border-top: 1px solid rgba(134, 150, 160, 0.11);
  place-items: center;
}

.random-footer span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 7px;
  font-weight: 650;
}

.random-footer .ui-icon {
  width: 12px;
  height: 12px;
}

.search-orbit {
  width: 154px;
  height: 154px;
  margin-bottom: 28px;
}

.search-orbit > i:nth-child(1) {
  width: 76px;
  height: 76px;
}

.search-orbit > i:nth-child(2) {
  width: 112px;
  height: 112px;
}

.search-orbit > i:nth-child(3) {
  width: 152px;
  height: 152px;
}

.search-orbit > span {
  width: 66px;
  height: 66px;
}

.search-steps {
  display: flex;
  width: min(330px, 100%);
  align-items: center;
  justify-content: center;
  margin-top: 27px;
}

.search-steps span {
  display: grid;
  min-width: 58px;
  height: 25px;
  place-items: center;
  color: #52636d;
  font-size: 7px;
  font-weight: 850;
  background: #101820;
  border: 1px solid #26343e;
  border-radius: 999px;
}

.search-steps span.done {
  color: #55dfbb;
  border-color: rgba(35, 216, 169, 0.3);
}

.search-steps span.active {
  color: #071a15;
  background: #23d8a9;
  border-color: #23d8a9;
}

.search-steps i {
  width: 20px;
  height: 1px;
  background: #2c3a44;
}

.random-cancel {
  min-height: 40px;
  padding: 0 17px;
  margin-top: 22px;
  color: #ff8c9f;
  background: rgba(255, 77, 103, 0.07);
  border: 1px solid rgba(255, 77, 103, 0.22);
  border-radius: 11px;
}

@keyframes voice-orbit {
  0% {
    opacity: 0.8;
    transform: scale(0.72);
  }

  75%,
  100% {
    opacity: 0;
    transform: scale(1.12);
  }
}

/* Premium one-to-one voice call */
.call-overlay {
  position: fixed;
  z-index: 1800;
  inset: 0;
  display: block;
  overflow: hidden;
  color: #edf3f5;
  background: #05080d;
}

.call-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--call-color, #00a884) 22%, transparent), transparent 28%),
    radial-gradient(circle at 12% 90%, rgba(0, 168, 132, 0.11), transparent 28%),
    radial-gradient(circle at 88% 15%, rgba(65, 116, 255, 0.1), transparent 25%),
    #05080d;
}

.call-backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.34;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
  mask-image: radial-gradient(circle at center, black, transparent 70%);
}

.call-topbar {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(18px, 3vw, 38px);
  background: linear-gradient(to bottom, rgba(5, 8, 13, 0.92), transparent);
}

.call-secure {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: #8fa2ac;
  font-size: 8px;
  font-weight: 750;
  background: rgba(15, 23, 31, 0.7);
  border: 1px solid #26333d;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}

.call-secure .ui-icon {
  width: 13px;
  height: 13px;
  color: #35dcb1;
}

.remote-video-wrap {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 90px 20px 175px;
}

.remote-video-wrap > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-avatar {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(132px, 17vw, 174px);
  height: clamp(132px, 17vw, 174px);
  padding: 7px;
  place-items: center;
  color: white;
  background: color-mix(in srgb, var(--call-color, #00a884) 24%, #101923);
  border: 1px solid color-mix(in srgb, var(--call-color, #00a884) 58%, #30404b);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px color-mix(in srgb, var(--call-color, #00a884) 8%, transparent),
    0 22px 70px rgba(0, 0, 0, 0.48);
}

.call-avatar::before,
.call-avatar::after {
  position: absolute;
  inset: -20px;
  content: "";
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--call-color, #00a884) 30%, transparent);
  border-radius: 50%;
  animation: call-pulse 2.5s ease-out infinite;
}

.call-avatar::after {
  inset: -38px;
  animation-delay: 0.65s;
}

.call-avatar .avatar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 850;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
}

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

.random-call-gender-icon {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: #eaf6ff;
  background:
    radial-gradient(circle at 32% 23%, rgba(255, 255, 255, 0.3), transparent 23%),
    linear-gradient(145deg, #8dccff, #4c9fec);
  border: 1px solid rgba(223, 242, 255, 0.48);
  border-radius: 50%;
  box-shadow:
    inset 0 0 32px rgba(255, 255, 255, 0.08),
    0 10px 34px color-mix(in srgb, var(--call-color) 35%, transparent);
}

.random-call-gender-icon .ui-icon {
  width: 42%;
  height: 42%;
  stroke-width: 1.8;
}

.random-call-gender-icon.man i {
  position: absolute;
  right: 18%;
  bottom: 17%;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #eaf6ff;
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  background: #277fd0;
  border: 3px solid #a8d7ff;
  border-radius: 50%;
}

.random-call-gender-icon.woman {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.36), transparent 24%),
    linear-gradient(145deg, #ff9bc3, #f14f91);
  border-color: rgba(255, 222, 236, 0.62);
}

.random-call-flower {
  position: relative;
  z-index: 1;
  font-size: clamp(50px, 7vw, 72px);
  filter: drop-shadow(0 9px 16px rgba(125, 17, 62, 0.24));
}

.random-call-gender-icon.woman::before,
.random-call-gender-icon.woman::after {
  position: absolute;
  content: "✿";
  color: rgba(255, 240, 247, 0.76);
  font-size: 19px;
}

.random-call-gender-icon.woman::before {
  top: 17%;
  right: 17%;
  transform: rotate(18deg);
}

.random-call-gender-icon.woman::after {
  bottom: 18%;
  left: 17%;
  font-size: 14px;
  transform: rotate(-18deg);
}

.call-overlay[data-random-gender="man"] .call-person small {
  color: #78c2ff;
}

.call-overlay[data-random-gender="woman"] .call-person small {
  color: #ff91bd;
}

.call-person {
  position: relative;
  z-index: 2;
  top: auto;
  margin-top: 34px;
  text-align: center;
}

.call-person small,
.call-person strong,
.call-person span {
  display: block;
}

.call-person small {
  color: #4ce2bb;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.05px;
}

.call-person strong {
  margin-top: 8px;
  color: #f3f6f7;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 850;
  letter-spacing: -0.75px;
}

.call-person span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  margin-top: 9px;
  color: #a7b5bd;
  font-size: 9px;
  font-weight: 750;
  background: rgba(17, 26, 34, 0.76);
  border: 1px solid #2a3943;
  border-radius: 999px;
}

.local-video {
  position: absolute;
  z-index: 5;
  top: 86px;
  right: 22px;
  width: min(220px, 22vw);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: #111a22;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.42);
  transform: scaleX(-1);
}

.call-controls {
  position: absolute;
  z-index: 6;
  right: auto;
  bottom: 48px;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: calc(100vw - 24px);
  align-items: center;
  gap: 7px;
  padding: 9px;
  overflow-x: auto;
  background: rgba(13, 20, 28, 0.84);
  border: 1px solid rgba(116, 136, 148, 0.23);
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.46);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
}

.call-controls::-webkit-scrollbar {
  display: none;
}

.call-controls button {
  display: flex;
  width: 66px;
  height: 62px;
  min-width: 66px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  color: #dbe4e8;
  background: #1a252e;
  border: 1px solid #2d3b45;
  border-radius: 14px;
  transform: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.call-controls button:hover {
  background: #23313b;
  border-color: #42535f;
  transform: translateY(-1px);
}

.call-controls button > span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
}

.call-controls button .ui-icon {
  width: 19px;
  height: 19px;
  stroke-width: 2.15;
}

.call-controls button small {
  display: block;
  color: inherit;
  font-size: 7px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.call-controls button.off {
  color: #ff8799;
  background: rgba(255, 77, 103, 0.09);
  border-color: rgba(255, 77, 103, 0.24);
}

.call-controls .call-next {
  width: 94px;
  min-width: 94px;
  color: #041713;
  background: linear-gradient(135deg, #25d9ad, #00a884);
  border-color: transparent;
}

.call-controls .call-next:hover {
  background: linear-gradient(135deg, #38e5bb, #08b893);
  border-color: transparent;
}

.call-controls .hangup {
  color: #ffdfe4;
  background: rgba(255, 77, 103, 0.13);
  border-color: rgba(255, 77, 103, 0.31);
  transform: none;
}

.call-controls .hangup:hover {
  background: rgba(255, 77, 103, 0.22);
}

.call-controls .hangup .ui-icon {
  transform: rotate(135deg);
}

.call-footer-note {
  position: absolute;
  z-index: 5;
  bottom: 17px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #596b75;
  font-size: 7px;
  font-weight: 650;
  white-space: nowrap;
  transform: translateX(-50%);
}

.call-footer-note span {
  width: 5px;
  height: 5px;
  background: #23d8a9;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(35, 216, 169, 0.08);
}

@keyframes call-pulse {
  0% {
    opacity: 0.65;
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* Room voice dock */
.voice-dock {
  right: 372px;
  bottom: 18px;
  width: 342px;
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(35, 216, 169, 0.055), transparent 34%),
    rgba(13, 21, 28, 0.97);
  border: 1px solid rgba(69, 215, 176, 0.27);
  border-radius: 19px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px);
}

.voice-dock-head {
  min-height: 62px;
  gap: 11px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.012);
  border-bottom-color: #26343d;
}

.voice-dock-head .signal-bars {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding-bottom: 9px;
  background: rgba(35, 216, 169, 0.1);
  border: 1px solid rgba(35, 216, 169, 0.22);
  border-radius: 12px;
}

.voice-dock-head .signal-bars i {
  width: 3px;
  background: #35ddb2;
}

.voice-dock-head .signal-bars i:nth-child(1) {
  height: 6px;
}

.voice-dock-head .signal-bars i:nth-child(2) {
  height: 11px;
}

.voice-dock-head .signal-bars i:nth-child(3) {
  height: 16px;
}

.voice-dock-head strong {
  color: #eff5f6;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 850;
}

.voice-dock-head small {
  color: #3edfb6;
  font-size: 8px;
  font-weight: 750;
}

.voice-dock-head button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: #8596a0;
  background: #17232c;
  border: 1px solid #2a3943;
  border-radius: 10px;
}

.voice-users {
  display: grid;
  max-height: 276px;
  gap: 5px;
  padding: 9px 10px;
  overflow-y: auto;
}

.voice-user {
  min-height: 50px;
  gap: 9px;
  padding: 7px 8px;
  background: #151f27;
  border: 1px solid #24323b;
  border-radius: 12px;
}

.voice-user .avatar {
  width: 34px;
  height: 34px;
}

.voice-user strong {
  color: #e7eef1;
  font-size: 9px;
  font-weight: 800;
}

.voice-user small {
  color: #71838e;
  font-size: 7px;
  font-weight: 650;
}

.voice-user.speaking {
  color: #37dfb4;
  background: rgba(35, 216, 169, 0.08);
  border-color: rgba(35, 216, 169, 0.55);
  box-shadow:
    0 0 0 2px rgba(35, 216, 169, 0.08),
    inset 0 0 22px rgba(35, 216, 169, 0.04);
}

.voice-user.speaking .avatar {
  box-shadow: 0 0 0 3px #35ddb2;
}

.voice-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 8px 10px 10px;
  border-top: 1px solid #25333c;
}

.voice-actions button {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  color: #c1cdd3;
  background: #18242d;
  border: 1px solid #2b3a44;
  border-radius: 11px;
}

.voice-actions button .ui-icon {
  width: 17px;
  height: 17px;
}

.voice-actions button span {
  margin: 0;
  font-size: 7px;
  font-weight: 750;
}

.voice-actions button.active {
  color: #061914;
  background: #2bdcaf;
  border-color: #2bdcaf;
}

.voice-actions button.requested {
  color: #ffbe6b;
  background: rgba(255, 184, 92, 0.09);
  border-color: rgba(255, 184, 92, 0.25);
}

.voice-actions button.danger {
  color: #ff94a4;
  background: rgba(255, 77, 103, 0.08);
  border-color: rgba(255, 77, 103, 0.23);
}

@media (max-width: 1100px) {
  .voice-dock {
    right: 18px;
  }
}

@media (max-width: 680px) {
  .random-overlay {
    padding: 0;
  }

  .random-shell {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .random-header {
    min-height: 66px;
    padding: 11px 14px;
  }

  .random-brand > span,
  .call-brand > span {
    width: 35px;
    height: 35px;
  }

  .random-brand strong,
  .call-brand strong {
    font-size: 16px;
  }

  .random-main {
    padding: 18px 20px 15px;
  }

  .random-radar {
    width: 108px;
    height: 108px;
    margin-bottom: 16px;
  }

  .random-radar > i:nth-child(3) {
    width: 106px;
    height: 106px;
  }

  .random-idle h2,
  .random-searching h2 {
    margin-top: 14px;
    font-size: clamp(25px, 8vw, 31px);
  }

  .random-idle > p,
  .random-searching > p {
    font-size: 10px;
  }

  .random-live-stats {
    gap: 5px;
  }

  .random-live-stats article {
    min-height: 45px;
    gap: 6px;
    padding: 6px;
  }

  .random-live-stats article > span {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    font-size: 13px;
  }

  .random-live-stats strong {
    font-size: 11px;
  }

  .random-live-stats small {
    font-size: 6.5px;
  }

  .random-gender-picker {
    padding: 10px;
  }

  .random-gender-options > button {
    min-height: 58px;
    padding: 8px;
  }

  .random-gender-options > button > span {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 18px;
  }

  .random-start {
    min-height: 47px;
  }

  .random-footer {
    min-height: calc(45px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }

  .call-topbar {
    min-height: 66px;
    padding: 12px 14px;
  }

  .call-secure {
    min-height: 29px;
    padding: 0 8px;
    font-size: 7px;
  }

  .remote-video-wrap {
    padding: 78px 16px 166px;
  }

  .call-avatar {
    width: 128px;
    height: 128px;
  }

  .call-person {
    margin-top: 28px;
  }

  .call-person strong {
    font-size: 25px;
  }

  .local-video {
    top: 78px;
    right: 12px;
    width: 104px;
    border-radius: 14px;
  }

  .call-controls {
    bottom: calc(43px + env(safe-area-inset-bottom));
    gap: 5px;
    padding: 7px;
    border-radius: 17px;
  }

  .call-controls button {
    width: 58px;
    height: 57px;
    min-width: 58px;
    border-radius: 12px;
  }

  .call-controls .call-next {
    width: 78px;
    min-width: 78px;
  }

  .call-footer-note {
    bottom: calc(15px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .voice-dock {
    right: 9px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 9px;
    width: auto;
    max-height: 62dvh;
    border-radius: 17px;
  }

  .voice-users {
    max-height: 36dvh;
  }
}

@media (max-width: 390px) {
  .random-live-stats article {
    justify-content: center;
  }

  .random-live-stats article > span {
    display: none;
  }

  .random-live-stats {
    margin-top: 14px;
  }

  .random-gender-options > button {
    gap: 6px;
  }

  .random-gender-options > button > span {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .random-gender-options small {
    display: none;
  }

  .call-secure {
    display: none;
  }

  .call-controls button {
    width: 54px;
    min-width: 54px;
  }

  .call-controls .call-next {
    width: 72px;
    min-width: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .random-radar > i,
  .search-orbit > i,
  .call-avatar::before,
  .call-avatar::after {
    animation: none;
  }
}

/* Compact system events */
.system-message {
  position: relative;
  display: flex;
  width: fit-content;
  min-width: min(400px, calc(100% - 24px));
  max-width: min(560px, calc(100% - 24px));
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 48px;
  margin: 8px auto;
  color: #d6dfe4;
  text-align: center;
  background: rgba(17, 27, 33, 0.96);
  border: 1px solid #33434d;
  border-left: 1px solid #33434d;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.system-message > span {
  position: absolute;
  left: 14px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #8fa1ab;
  background: #1d2a32;
  border-radius: 7px;
}

.system-message > span .ui-icon {
  width: 12px;
  height: 12px;
}

.system-message strong {
  flex: 0 1 auto;
  color: var(--role-color, #d6dfe4);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.system-message time {
  position: absolute;
  right: 13px;
  color: #71828c;
  font-size: 7px;
  font-weight: 750;
}

.system-message.system-ban,
.system-message.system-announcement {
  border-left: 1px solid #33434d;
}

/* Desktop notification centre */
.notification-feed {
  width: min(680px, calc(100% - 36px));
  padding: 12px;
  margin: 16px auto 26px;
  background: rgba(14, 24, 30, 0.88);
  border: 1px solid #2b3b45;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18);
}

.notification-feed-head {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 3px 10px;
  border-bottom: 1px solid #293942;
}

.notification-feed-head span,
.notification-feed-head strong {
  display: block;
}

.notification-feed-head span {
  color: #70838e;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.9px;
}

.notification-feed-head strong {
  margin-top: 4px;
  color: #edf2f4;
  font-size: 12px;
  font-weight: 850;
}

.notification-feed-head em {
  min-height: 27px;
  padding: 0 10px;
  color: #68dfbf;
  font-size: 7px;
  font-style: normal;
  font-weight: 850;
  line-height: 27px;
  background: rgba(0, 168, 132, 0.09);
  border: 1px solid rgba(58, 214, 174, 0.2);
  border-radius: 999px;
}

.notification-feed-list {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.notification-card {
  --notification-color: #55dcb8;
  display: grid;
  width: 100%;
  min-height: 60px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  color: inherit;
  text-align: left;
  background: #152129;
  border: 1px solid #2a3a44;
  border-radius: 10px;
  box-shadow: none;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
}

.notification-card[data-notification-type="message"],
.notification-card[data-notification-type="mention"] {
  --notification-color: #55b8ff;
}

.notification-card[data-notification-type="friend"],
.notification-card[data-notification-type="follow"] {
  --notification-color: #a68bff;
}

.notification-card[data-notification-type="moderation"] {
  --notification-color: #ffb55e;
}

.notification-card[data-notification-type="call"] {
  --notification-color: #ff7ba9;
}

.notification-card.unread {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--notification-color) 8%, transparent), transparent 45%),
    #16232b;
  border-color: color-mix(in srgb, var(--notification-color) 30%, #2a3a44);
}

.notification-card:hover {
  background: #1a2932;
  border-color: color-mix(in srgb, var(--notification-color) 42%, #344752);
  transform: translateY(-1px);
}

.notification-leading {
  position: relative;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
}

.notification-leading > .avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
  border: 1px solid #3a4a54;
  border-radius: 50%;
}

.notification-leading > i {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: var(--notification-color);
  background: #0f1a20;
  border: 2px solid #19262e;
  border-radius: 50%;
}

.notification-leading > i .ui-icon {
  width: 9px;
  height: 9px;
}

.notification-leading > .notification-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--notification-color);
  background: color-mix(in srgb, var(--notification-color) 10%, #18242c);
  border: 1px solid color-mix(in srgb, var(--notification-color) 24%, #2b3b45);
  border-radius: 10px;
}

.notification-copy {
  min-width: 0;
}

.notification-copy strong,
.notification-copy p {
  display: block;
}

.notification-copy strong {
  overflow: hidden;
  color: #edf2f4;
  font-size: 10.5px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-copy p {
  margin: 3px 0 0;
  overflow: hidden;
  color: #9baab2;
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification-meta {
  display: flex;
  min-width: 46px;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 4px 0;
}

.notification-meta time {
  color: #71838d;
  font-size: 7px;
  font-weight: 750;
  white-space: nowrap;
}

.notification-meta > i {
  width: 7px;
  height: 7px;
  background: var(--notification-color);
  border-radius: 50%;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--notification-color) 11%, transparent);
}

@media (max-width: 680px) {
  .system-message {
    width: calc(100% - 16px);
    min-width: 0;
    max-width: 520px;
    min-height: 40px;
    padding: 8px 39px;
    margin: 7px auto;
  }

  .system-message > span {
    left: 10px;
  }

  .system-message time {
    right: 10px;
  }

  .notification-feed {
    width: 100%;
    padding: 0;
    margin: 0 0 70px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .notification-feed-head {
    display: none;
  }

  .notification-feed-list {
    gap: 0;
    padding: 0;
  }

  .notification-card {
    width: 100%;
    min-height: 66px;
    grid-template-columns: 43px minmax(0, 1fr) 42px;
    gap: 9px;
    padding: 9px 10px;
    margin: 0;
    background: #111b21;
    border: 0;
    border-bottom: 1px solid #26353e;
    border-radius: 0;
  }

  .notification-card.unread {
    background: #18242d;
  }

  .notification-card:hover {
    background: #18242d;
    transform: none;
  }

  .notification-meta {
    min-width: 42px;
  }
}

/* Attention badges: only unread content is red */
.top-social-tabs .top-icon[data-view="messages"] > b:not(:empty),
.top-social-tabs .top-icon[data-view="notifications"] > b:not(:empty) {
  min-width: 18px;
  min-height: 16px;
  padding: 1px 5px;
  color: #fff;
  background: #ff3f57;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 63, 87, 0.1);
}

.top-social-tabs .top-icon > .friend-request-badge {
  top: 5px;
  right: 10px;
  min-width: 18px;
  width: auto;
  height: 18px;
  padding: 0 4px;
  color: #fff;
  font-size: 8px;
  line-height: 14px;
  background: #ff3f57;
  border: 2px solid #15222b;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 63, 87, 0.12);
}

@media (min-width: 681px) {
  .notification-meta {
    min-width: 76px;
    align-self: start;
    justify-content: flex-end;
    flex-direction: row;
    gap: 8px;
    padding: 4px 2px 0 0;
  }

  .notification-meta > i {
    order: -1;
    flex: 0 0 7px;
  }
}

/* Movable room voice panel and microphone permissions */
.voice-dock {
  display: flex;
  min-width: 286px;
  min-height: 166px;
  max-width: min(560px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  flex-direction: column;
}

.voice-dock.collapsed {
  min-height: 0;
  height: auto !important;
}

.voice-dock-head {
  flex: 0 0 auto;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.voice-dock.dragging .voice-dock-head {
  cursor: grabbing;
}

.voice-dock.dragging,
.voice-dock.resizing {
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(45, 220, 175, 0.12);
}

.voice-dock .voice-users {
  min-height: 0;
  flex: 1 1 auto;
  max-height: none;
}

.voice-dock .voice-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 0 auto;
}

.voice-resize-handle {
  position: absolute;
  z-index: 4;
  right: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
}

.voice-resize-handle::before,
.voice-resize-handle::after {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 8px;
  height: 8px;
  content: "";
  border-right: 2px solid rgba(113, 220, 192, 0.48);
  border-bottom: 2px solid rgba(113, 220, 192, 0.48);
  border-radius: 0 0 2px;
}

.voice-resize-handle::after {
  right: 7px;
  bottom: 7px;
  width: 4px;
  height: 4px;
  opacity: 0.62;
}

.voice-dock.collapsed .voice-resize-handle {
  display: none;
}

.voice-user > button.voice-permission-button {
  min-width: 76px;
  min-height: 30px;
  padding: 5px 8px;
  color: #061914;
  font-size: 7px;
  line-height: 1.1;
  background: #2bdcaf;
  border: 1px solid #2bdcaf;
  border-radius: 8px;
  white-space: nowrap;
}

.voice-user > button.voice-permission-button.revoke {
  color: #ffe8ec;
  background: #c93550;
  border-color: #ed4f68;
  box-shadow: 0 5px 16px rgba(221, 58, 84, 0.18);
}

.voice-user > button.voice-permission-button.revoke:hover {
  background: #e0445f;
  border-color: #ff647c;
}

.moderation-grid button.danger {
  color: #ff9aaa;
  background: rgba(255, 77, 103, 0.09);
  border-color: rgba(255, 77, 103, 0.34);
}

.moderation-grid .moderation-action-button {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 3px;
  padding: 9px 11px;
  text-align: left;
}

.moderation-grid .moderation-action-button strong {
  color: inherit;
  font-size: 10px;
  line-height: 1.25;
}

.moderation-grid .moderation-action-button small {
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 650;
  line-height: 1.35;
}

.moderation-grid .account-ban-button {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.moderation-grid .account-ban-button > span {
  display: grid;
  gap: 3px;
}

@media (max-width: 680px) {
  .moderation-grid .moderation-action-button {
    min-height: 68px;
  }

  .moderation-grid .moderation-action-button strong {
    font-size: 12px;
  }

  .moderation-grid .moderation-action-button small {
    font-size: 9.5px;
  }

  .voice-dock {
    min-width: 0;
    min-height: 0;
    max-width: none;
  }

  .voice-dock-head {
    cursor: default;
    touch-action: auto;
  }

  .voice-dock .voice-users {
    max-height: 36dvh;
  }

  .voice-resize-handle {
    display: none;
  }
}

/* Composer tools: attachments on the left, room audio tools on the right */
.composer-attach {
  position: relative;
  flex: 0 0 auto;
}

.attach-menu {
  position: absolute;
  z-index: 80;
  bottom: calc(100% + 9px);
  left: 0;
  display: grid;
  width: 226px;
  gap: 4px;
  padding: 6px;
  background: rgba(17, 27, 33, 0.98);
  border: 1px solid #34444e;
  border-radius: 13px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(14px);
}

.attach-menu::after {
  position: absolute;
  bottom: -5px;
  left: 15px;
  width: 9px;
  height: 9px;
  content: "";
  background: #111b21;
  border-right: 1px solid #34444e;
  border-bottom: 1px solid #34444e;
  transform: rotate(45deg);
}

.attach-menu button {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  color: #d9e4e9;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  transition:
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.attach-menu button:hover {
  color: #fff;
  background: #202f38;
  border-color: #31434e;
}

.attach-menu button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.attach-menu button .ui-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  color: #25d6ad;
}

.attach-menu button span,
.attach-menu button strong,
.attach-menu button small {
  display: block;
}

.attach-menu button strong {
  font-size: 10px;
  font-weight: 850;
}

.attach-menu button small {
  margin-top: 2px;
  color: #7f929d;
  font-size: 8px;
  font-weight: 650;
}

.attach-menu #record-button.recording {
  color: #fff;
  background: rgba(222, 58, 83, 0.18);
  border-color: rgba(255, 84, 110, 0.48);
}

.attach-menu #record-button.recording .ui-icon,
.attach-button.recording {
  color: #ff6179;
}

.attach-button.recording {
  background: rgba(222, 58, 83, 0.16);
  border-color: rgba(255, 84, 110, 0.5);
  animation: pulse 1.3s infinite;
}

.composer-room-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}

/* Voice participants occupy compact top-aligned slots instead of stretched rows. */
.voice-dock .voice-users {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(50px, max-content);
  align-content: start;
}

.voice-dock .voice-user {
  height: auto;
  min-height: 50px;
  align-self: start;
}

@media (max-width: 680px) {
  .composer {
    gap: 4px;
  }

  .composer-room-actions {
    gap: 3px;
  }

  .composer-room-actions .composer-button {
    width: 34px;
    height: 38px;
  }

  .attach-menu {
    width: min(226px, calc(100vw - 16px));
  }

  #record-button {
    display: flex;
  }
}

/* Camera/gallery attachment flow */
.attach-photo-options {
  display: grid;
  gap: 3px;
  margin: 0 3px 3px 15px;
  padding: 3px 0 3px 7px;
  border-left: 1px solid rgba(55, 218, 176, 0.32);
}

.attach-photo-options button {
  min-height: 43px;
  background: rgba(32, 47, 56, 0.58);
}

.attach-photo-options button .ui-icon {
  width: 17px;
  height: 17px;
}

.message-media.image-media {
  position: relative;
}

.media-origin {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 9px;
  color: #f4fbf9;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.2px;
  background: rgba(8, 18, 23, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(7px);
  pointer-events: none;
}

.media-origin-camera {
  color: #baffea;
  border-color: rgba(45, 220, 175, 0.45);
}

.media-origin-camera::before {
  width: 5px;
  height: 5px;
  margin-right: 5px;
  content: "";
  background: #2bdcaf;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(43, 220, 175, 0.14);
}

.media-origin-gallery {
  color: #dceaff;
  border-color: rgba(124, 168, 255, 0.42);
}

.camera-capture-modal {
  width: min(680px, calc(100vw - 24px));
}

.camera-capture-modal .modal-body {
  padding: 10px;
}

.camera-capture-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(43, 220, 175, 0.08), transparent 38%),
    #050a0d;
  border: 1px solid #30424c;
  border-radius: 15px;
  aspect-ratio: 4 / 3;
}

.camera-capture-shell video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.camera-capture-shell video.front-facing {
  transform: scaleX(-1);
}

.camera-switch-button {
  position: absolute;
  top: 11px;
  right: 11px;
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  color: #eefbf8;
  font-size: 9px;
  font-weight: 900;
  background: rgba(5, 14, 17, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.camera-switch-button .ui-icon {
  width: 15px;
  height: 15px;
}

.camera-switch-button:hover:not(:disabled) {
  color: #ffffff;
  background: rgba(15, 45, 44, 0.88);
  border-color: rgba(43, 220, 175, 0.58);
  transform: translateY(-1px);
}

.camera-switch-button.switching .ui-icon {
  animation: cameraSwitchSpin 800ms linear infinite;
}

.camera-switch-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@keyframes cameraSwitchSpin {
  to {
    transform: rotate(360deg);
  }
}

.camera-live-pill {
  position: absolute;
  top: 11px;
  left: 11px;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  color: #e8fff8;
  font-size: 8px;
  font-weight: 850;
  background: rgba(5, 14, 17, 0.72);
  border: 1px solid rgba(43, 220, 175, 0.38);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.camera-live-pill i {
  width: 6px;
  height: 6px;
  background: #2bdcaf;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(43, 220, 175, 0.13);
}

.camera-shutter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

@media (max-width: 680px) {
  .attach-photo-options {
    margin-left: 11px;
  }

  .camera-capture-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 18px);
  }

  .camera-capture-shell {
    min-height: min(58dvh, 520px);
    aspect-ratio: auto;
  }

  .camera-switch-button {
    min-height: 38px;
    padding-inline: 12px;
  }

  .camera-capture-modal .modal-footer {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  }
}

/* Sensitive, smooth voice activity feedback */
.voice-user {
  position: relative;
  isolation: isolate;
  transition:
    color 260ms ease,
    background-color 380ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms ease,
    box-shadow 460ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms ease;
}

.voice-user::before {
  position: absolute;
  z-index: 0;
  inset: -2px;
  content: "";
  opacity: 0;
  border: 1px solid rgba(47, 231, 181, 0.52);
  border-radius: inherit;
  box-shadow:
    0 0 0 3px rgba(45, 220, 175, 0.1),
    0 0 24px rgba(37, 211, 150, 0.24);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.voice-user .avatar {
  transition:
    box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms ease;
}

.voice-user small {
  transition: color 320ms ease;
}

.voice-user.speaking {
  color: #43e8b7;
  background:
    linear-gradient(90deg, rgba(39, 215, 169, 0.16), rgba(39, 215, 169, 0.07)),
    #122620;
  border-color: rgba(54, 232, 183, 0.78);
  box-shadow:
    inset 0 0 24px rgba(35, 216, 169, 0.07),
    0 8px 24px rgba(6, 72, 54, 0.12);
  transform: translateY(-1px);
}

.voice-user.speaking::before {
  opacity: clamp(0.36, var(--voice-level, 0.65), 0.88);
}

.voice-user.speaking .avatar {
  box-shadow:
    0 0 0 3px #35ddb2,
    0 0 18px rgba(53, 221, 178, 0.32);
  transform: scale(1.025);
}

.voice-user.speaking small {
  color: #65e9c4;
}

@media (prefers-reduced-motion: reduce) {
  .voice-user,
  .voice-user::before,
  .voice-user .avatar,
  .voice-user small {
    transition-duration: 0.01ms;
  }
}

/* Persistent room radio */
.radio-modal {
  width: min(520px, calc(100vw - 24px));
}

.radio-modal .modal-body {
  padding: 18px;
}

.radio-stage {
  gap: 8px;
  padding: 22px 18px;
  background:
    radial-gradient(circle at 50% 20%, rgba(38, 221, 176, 0.13), transparent 52%),
    linear-gradient(145deg, #122126, #10191e);
  border-color: rgba(70, 115, 118, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.radio-stage strong {
  color: #f1f6f8;
  font-size: 16px;
  font-weight: 850;
}

.radio-stage.podcast-on-air {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 69, 104, 0.14), transparent 52%),
    linear-gradient(145deg, #152126, #10191e);
  border-color: rgba(255, 94, 122, 0.34);
}

.radio-sync-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  margin-top: 4px;
  color: #71e9c9;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgba(39, 214, 170, 0.08);
  border: 1px solid rgba(39, 214, 170, 0.25);
  border-radius: 999px;
}

.podcast-on-air .radio-sync-pill {
  color: #ff93a7;
  background: rgba(255, 75, 108, 0.08);
  border-color: rgba(255, 75, 108, 0.28);
}

.radio-sync-pill .ui-icon {
  width: 11px;
  height: 11px;
}

.radio-live-studio {
  display: grid;
  gap: 9px;
  padding: 10px;
  margin: 10px 0 14px;
  background: rgba(14, 29, 35, 0.94);
  border: 1px solid rgba(58, 85, 96, 0.62);
  border-radius: 13px;
}

.radio-live-studio.is-live {
  border-color: rgba(255, 78, 111, 0.36);
  box-shadow: 0 0 0 1px rgba(255, 78, 111, 0.04), 0 9px 24px rgba(0, 0, 0, 0.16);
}

.radio-host-card {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 2px;
}

.radio-host-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.radio-host-card small,
.radio-host-card em {
  overflow: hidden;
  color: #78929d;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-host-card small {
  color: #32d8ad;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.radio-live-studio.is-live .radio-host-card small { color: #ff7891; }
.radio-host-card strong { color: #eff8f9; font-size: 12px; font-weight: 900; }

.radio-host-fallback {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #082019;
  font-size: 10px;
  font-weight: 950;
  background: #2bdcaf;
  border-radius: 11px;
}

.radio-mic-toggle,
.radio-on-air-badge {
  display: inline-flex;
  min-height: 34px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  color: #b8ffec;
  font-size: 9px;
  font-weight: 900;
  background: rgba(43, 220, 175, 0.09);
  border: 1px solid rgba(43, 220, 175, 0.28);
  border-radius: 9px;
}

.radio-mic-toggle { cursor: pointer; }
.radio-mic-toggle.is-on,
.radio-on-air-badge {
  color: #ff9cae;
  background: rgba(255, 71, 104, 0.1);
  border-color: rgba(255, 71, 104, 0.34);
}

.radio-mic-toggle.is-on .ui-icon { animation: radio-mini-pulse 1.4s ease-in-out infinite; }
.radio-mic-toggle .ui-icon { width: 14px; height: 14px; }

.radio-listener-strip {
  display: grid;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px solid rgba(61, 85, 95, 0.44);
}

.radio-listener-strip > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8da2ab;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.radio-listener-strip > header b {
  display: grid;
  min-width: 22px;
  height: 20px;
  place-items: center;
  color: #3de0b6;
  background: rgba(43, 220, 175, 0.08);
  border-radius: 7px;
}

.radio-listener-strip > div {
  display: flex;
  gap: 6px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.radio-listener-strip button {
  display: inline-flex;
  max-width: 112px;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  padding: 4px 7px 4px 4px;
  color: #c6d4d9;
  font-size: 8px;
  font-weight: 800;
  background: #17262d;
  border: 1px solid rgba(62, 88, 99, 0.54);
  border-radius: 999px;
}

.radio-listener-strip button > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-listener-strip p {
  margin: 3px 0;
  color: #6f8791;
  font-size: 9px;
}

.radio-disc .ui-icon {
  width: 24px;
  height: 24px;
}

.radio-volume-control,
.radio-listen-note,
.radio-manager-note {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  margin: 0 0 14px;
  color: #b8c7ce;
  font-size: 10px;
  background: #121e24;
  border: 1px solid #2a3b44;
  border-radius: 11px;
}

.radio-volume-control span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.radio-volume-control .ui-icon,
.radio-listen-note .ui-icon {
  width: 17px;
  height: 17px;
  color: #2bdcaf;
}

.radio-volume-control input {
  width: 100%;
  accent-color: #20cda3;
}

.radio-manager-note {
  justify-content: center;
  text-align: center;
}

.radio-modal .danger-text {
  color: #ff7185;
  border-color: rgba(255, 79, 105, 0.36);
}

.radio-modal .radio-music-request {
  margin-right: auto;
  color: #83efd0;
  border-color: rgba(43, 220, 175, 0.3);
}

.radio-modal .radio-music-request .ui-icon {
  width: 14px;
  height: 14px;
  margin-right: 5px;
}

.system-message.system-radio {
  border-color: rgba(43, 220, 175, 0.33);
  background: rgba(12, 36, 34, 0.9);
}

.system-message.system-radio > span,
.system-message.system-radio strong {
  color: #bdf9e9;
}

.system-message strong .system-name-highlight,
.system-message.system-ban strong .system-name-highlight {
  color: var(--system-highlight, #ff4d67);
  font-weight: 950;
  text-shadow: 0 0 12px color-mix(in srgb, var(--system-highlight, #ff4d67) 28%, transparent);
}

.system-profile-link {
  display: inline;
  padding: 0;
  color: var(--system-highlight, #ff3157);
  font: inherit;
  font-weight: 950;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-shadow: 0 0 12px color-mix(in srgb, var(--system-highlight, #ff3157) 28%, transparent);
}

.system-profile-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.banned-member-card {
  background: color-mix(in srgb, var(--danger) 7%, var(--panel-2));
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
}

.banned-member-card .list-card-actions button.positive {
  color: #07231a;
  background: #2fdda5;
}

.system-room-link {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  margin-left: 5px;
  color: #071b16;
  font: inherit;
  font-weight: 900;
  background: #31deb2;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 13px rgba(33, 215, 166, 0.15);
  cursor: pointer;
  transition:
    filter 160ms ease,
    transform 160ms ease;
}

.system-room-link:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.radio-mini-player {
  position: fixed;
  z-index: 850;
  left: 50%;
  bottom: 72px;
  display: grid;
  width: min(340px, calc(100vw - 20px));
  min-height: 50px;
  grid-template-columns: 36px minmax(0, 1fr) 54px 70px 34px;
  align-items: center;
  gap: 6px;
  padding: 6px;
  overflow: hidden;
  color: #eaf3f5;
  background: rgba(12, 24, 29, 0.96);
  border: 1px solid rgba(72, 108, 116, 0.52);
  border-radius: 13px;
  box-shadow: 0 13px 34px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
  transition:
    width 220ms cubic-bezier(0.22, 1, 0.36, 1),
    min-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 180ms ease;
}

.radio-mini-player::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: #2bdcaf;
  box-shadow: 0 0 18px rgba(43, 220, 175, 0.56);
}

.radio-mini-toggle {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  color: #071c16;
  background: linear-gradient(145deg, #37e2b7, #16b98f);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(25, 209, 161, 0.18);
  cursor: grab;
  touch-action: none;
}

.radio-mini-toggle:active,
.radio-mini-player.dragging .radio-mini-toggle {
  cursor: grabbing;
}

.radio-mini-toggle .ui-icon {
  width: 16px;
  height: 16px;
}

.radio-mini-main {
  display: block;
  min-width: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.radio-mini-main > span:last-child {
  min-width: 0;
}

.radio-mini-main strong,
.radio-mini-main small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.radio-mini-main strong {
  font-size: 10px;
  font-weight: 900;
}

.radio-mini-main small {
  margin-top: 2px;
  color: #8fa4ae;
  font-size: 7px;
}

.radio-mini-player.playing .radio-mini-toggle .ui-icon {
  animation: radio-mini-pulse 1.5s ease-in-out infinite;
}

.radio-mini-player.podcast-live::before { background: #ff5474; box-shadow: 0 0 18px rgba(255, 84, 116, 0.52); }
.radio-mini-player.podcast-live .radio-mini-toggle {
  color: #fff;
  background: linear-gradient(145deg, #ff6985, #d93759);
  box-shadow: 0 5px 17px rgba(228, 54, 88, 0.24);
}

.radio-mini-player.collapsed {
  width: 46px;
  min-height: 46px;
  grid-template-columns: 36px;
  gap: 0;
  padding: 5px;
  border-radius: 14px;
  box-shadow: 0 10px 27px rgba(0, 0, 0, 0.4);
}

.radio-mini-player.collapsed::before,
.radio-mini-player.collapsed .radio-mini-main,
.radio-mini-player.collapsed .radio-mini-request,
.radio-mini-player.collapsed .radio-mini-volume,
.radio-mini-player.collapsed .radio-mini-leave {
  display: none;
}

@keyframes radio-mini-pulse {
  50% {
    opacity: 0.55;
    transform: scale(0.86);
  }
}

.radio-mini-request {
  display: inline-flex;
  min-width: 0;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 7px;
  color: #9cf2d9;
  font-size: 7px;
  font-weight: 850;
  background: rgba(43, 220, 175, 0.08);
  border: 1px solid rgba(43, 220, 175, 0.24);
  border-radius: 8px;
  cursor: pointer;
  transition:
    color 150ms ease,
    background 150ms ease,
    border-color 150ms ease;
}

.radio-mini-request:hover {
  color: #d8fff3;
  background: rgba(43, 220, 175, 0.14);
  border-color: rgba(43, 220, 175, 0.4);
}

.radio-mini-request .ui-icon {
  width: 12px;
  height: 12px;
}

.radio-mini-volume {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  color: #91a7b0;
}

.radio-mini-volume .ui-icon {
  width: 13px;
  height: 13px;
}

.radio-mini-volume input {
  width: 100%;
  accent-color: #2bdcaf;
}

.radio-mini-leave {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ff7c90;
  background: rgba(255, 73, 101, 0.08);
  border: 1px solid rgba(255, 73, 101, 0.26);
  border-radius: 9px;
  cursor: pointer;
}

.radio-mini-leave .ui-icon {
  width: 15px;
  height: 15px;
}

.radio-youtube-engine {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  opacity: 0.001;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  transform: scale(0.01);
  transform-origin: top left;
}

.radio-youtube-engine iframe {
  width: 200px;
  height: 200px;
}

.radio-resume-button {
  color: #061a15 !important;
  background: #2bdcaf !important;
  border-color: #2bdcaf !important;
  box-shadow: 0 8px 24px rgba(43, 220, 175, 0.2);
}

@media (max-width: 680px) {
  .radio-modal {
    width: 100vw;
  }

  .radio-modal .modal-body {
    padding: 12px;
  }

  .radio-modal .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .radio-modal .modal-footer button:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .radio-modal .radio-music-request {
    grid-column: 1 / -1;
    margin-right: 0;
  }

  .radio-host-card { align-items: flex-start; flex-wrap: wrap; }
  .radio-host-card > span:nth-child(2) { padding-top: 3px; }
  .radio-mic-toggle { width: 100%; min-height: 38px; }
  .radio-listener-strip button { max-width: 100px; }

  .radio-mini-player {
    bottom: 116px;
    width: min(330px, calc(100vw - 16px));
    min-height: 48px;
    grid-template-columns: 34px minmax(0, 1fr) 48px 60px 34px;
    padding: 6px;
    border-radius: 12px;
  }

  .radio-mini-volume {
    width: 60px;
  }

  .radio-mini-request {
    padding: 0 5px;
  }

  .radio-mini-toggle,
  .radio-mini-leave {
    width: 34px;
    height: 34px;
  }

  .radio-mini-player.collapsed {
    width: 44px;
    min-height: 44px;
    grid-template-columns: 34px;
    padding: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .radio-mini-player.playing .radio-mini-toggle .ui-icon {
    animation: none;
  }
}

/* Site Sahibi: çevrimiçi/çevrimdışı yetkili kadrosu */
.staff-directory-panel {
  padding: 14px;
  margin: 12px 0;
  background: #101f26;
  border: 1px solid #2b414b;
  border-radius: 15px;
}

.staff-directory-panel > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.staff-directory-panel > header > div > span {
  color: #48ddb8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .8px;
}

.staff-directory-panel h3 {
  margin: 3px 0;
  color: #f2f7f8;
  font-size: 17px;
}

.staff-directory-panel p {
  max-width: 720px;
  margin: 0;
  color: #8da1aa;
  font-size: 11px;
  line-height: 1.5;
}

.staff-directory-search {
  display: flex;
  width: min(300px, 100%);
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #14262e;
  border: 1px solid #314852;
  border-radius: 11px;
}

.staff-directory-search .ui-icon {
  width: 15px;
  height: 15px;
  color: #7f96a0;
}

.staff-directory-search input {
  width: 100%;
  min-width: 0;
  color: #edf5f7;
  font: inherit;
  font-size: 12px;
  background: transparent;
  border: 0;
  outline: 0;
}

.staff-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.staff-directory-card {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 11px;
  padding: 12px;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--staff-primary) 8%, #13232b), #122129 72%);
  border: 1px solid color-mix(in srgb, var(--staff-primary) 35%, #2b414b);
  border-radius: 13px;
}

.staff-directory-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--staff-primary);
  box-shadow: 0 0 15px color-mix(in srgb, var(--staff-primary) 45%, transparent);
}

.staff-directory-card > header {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.staff-directory-card > header > span:nth-child(2) {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.staff-directory-card > header strong,
.staff-directory-card > header small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-directory-card > header strong { color: #eef6f8; font-size: 12px; }
.staff-directory-card > header small { color: #8297a0; font-size: 9px; }

.staff-card-status {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 5px;
}

.staff-presence {
  display: inline-flex;
  min-height: 24px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 8px;
  color: #8da0a8;
  font-size: 8px;
  font-weight: 900;
  background: #1b2b32;
  border: 1px solid #31444c;
  border-radius: 999px;
}

.staff-presence.online {
  color: #65e8c4;
  background: rgba(47, 221, 165, .08);
  border-color: rgba(47, 221, 165, .3);
}

.monthly-lease-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  font-size: 8px;
  font-weight: 950;
  white-space: nowrap;
  border: 1px solid;
  border-radius: 999px;
}

.monthly-lease-badge.active {
  color: #ffd477;
  background: rgba(255, 181, 71, .1);
  border-color: rgba(255, 181, 71, .36);
}

.monthly-lease-badge.expired {
  color: #ff7b91;
  background: rgba(255, 77, 105, .12);
  border-color: rgba(255, 77, 105, .44);
  box-shadow: 0 0 14px rgba(255, 77, 105, .12);
}

.staff-role-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.staff-role-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.staff-role-choice > span {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  overflow: hidden;
  color: #81969f;
  font-size: 9px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #17272e;
  border: 1px solid #2c414a;
  border-radius: 9px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.staff-role-choice > span i { flex: 0 0 auto; font-style: normal; }
.staff-role-choice:hover > span { transform: translateY(-1px); }
.staff-role-choice input:checked + span {
  color: color-mix(in srgb, var(--staff-role-color) 75%, white);
  background: color-mix(in srgb, var(--staff-role-color) 13%, #17272e);
  border-color: color-mix(in srgb, var(--staff-role-color) 52%, #2c414a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--staff-role-color) 10%, transparent);
}

.staff-directory-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid rgba(54, 77, 87, .6);
}

.staff-directory-card > footer > span { color: #718791; font-size: 9px; }
.staff-directory-card > footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.staff-directory-card .small-button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.staff-directory-card .small-button.danger { color: #ff8da0; border-color: rgba(255, 77, 105, .32); }
.lease-renew-button { color: #ffd477; border-color: rgba(255, 181, 71, .34); }
.lease-renew-button .ui-icon { width: 13px; height: 13px; }

.private-room-lease-panel {
  padding: 14px;
  margin: 12px 0;
  background: #101f26;
  border: 1px solid #2b414b;
  border-radius: 15px;
}

.private-room-lease-panel > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.private-room-lease-panel > header > div > span {
  color: #48ddb8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .8px;
}

.private-room-lease-panel h3 {
  margin: 3px 0;
  color: #f2f7f8;
  font-size: 17px;
}

.private-room-lease-panel p {
  max-width: 720px;
  margin: 0;
  color: #8da1aa;
  font-size: 11px;
  line-height: 1.5;
}

.private-room-lease-panel > header > b {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #9aadb5;
  font-size: 9px;
  background: #14262e;
  border: 1px solid #30444d;
  border-radius: 999px;
}

.private-room-lease-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.private-room-lease-card {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  overflow: hidden;
  background: linear-gradient(145deg, color-mix(in srgb, var(--room-lease-color) 8%, #13232b), #122129 72%);
  border: 1px solid color-mix(in srgb, var(--room-lease-color) 35%, #2b414b);
  border-radius: 12px;
}

.private-room-lease-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  content: "";
  background: var(--room-lease-color);
}

.private-room-lease-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  font-size: 20px;
  background: color-mix(in srgb, var(--room-lease-color) 15%, #162830);
  border: 1px solid color-mix(in srgb, var(--room-lease-color) 40%, #30444d);
  border-radius: 11px;
}

.private-room-lease-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.private-room-lease-copy strong,
.private-room-lease-copy small,
.private-room-lease-copy time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-room-lease-copy strong { color: #eef6f8; font-size: 12px; }
.private-room-lease-copy small { color: #8aa0a8; font-size: 9px; }
.private-room-lease-copy time { color: #697f89; font-size: 8px; }
.private-room-lease-card > .lease-renew-button { grid-column: 2 / -1; justify-self: end; min-height: 32px; font-size: 9px; }

.staff-directory-empty {
  display: grid;
  min-height: 150px;
  grid-column: 1 / -1;
  place-items: center;
  align-content: center;
  gap: 6px;
  color: #7f949d;
  text-align: center;
  border: 1px dashed #30454e;
  border-radius: 12px;
}

.staff-directory-empty .ui-icon { width: 24px; height: 24px; color: #42d8b2; }
.staff-directory-empty strong { color: #dce8eb; font-size: 12px; }
.staff-directory-empty small { max-width: 420px; font-size: 9px; }

/* Radyo: tablet ve telefonlarda içerik, footer ve mini oynatıcı taşmadan kalır. */
@media (min-width: 681px) and (max-width: 1100px) {
  .staff-directory-grid,
  .private-room-lease-grid { grid-template-columns: 1fr; }
  .radio-modal {
    width: min(570px, calc(100vw - 36px));
    max-height: calc(100dvh - 28px);
  }
  .radio-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .radio-modal .modal-footer { flex-wrap: wrap; }
  .radio-modal .modal-footer button { min-height: 42px; flex: 1 1 140px; white-space: normal; }
  .radio-mini-player { max-width: calc(100vw - 28px); }
}

@media (max-width: 680px) {
  .staff-directory-panel,
  .private-room-lease-panel { padding: 10px; }
  .staff-directory-panel > header,
  .private-room-lease-panel > header { align-items: stretch; flex-direction: column; }
  .staff-directory-search { width: 100%; }
  .staff-directory-grid,
  .private-room-lease-grid { grid-template-columns: 1fr; }
  .staff-role-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-directory-card > footer { align-items: stretch; flex-direction: column; }
  .staff-directory-card > footer > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-directory-card > footer .lease-renew-button { grid-column: 1 / -1; }
  .staff-directory-card .small-button { width: 100%; white-space: normal; }
  .private-room-lease-card { grid-template-columns: 38px minmax(0, 1fr); }
  .private-room-lease-card > .monthly-lease-badge { grid-column: 2; justify-self: start; }
  .private-room-lease-card > .lease-renew-button { width: 100%; grid-column: 1 / -1; justify-self: stretch; }

  .radio-modal {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
  }
  .radio-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .radio-stage { padding: 16px 11px; }
  .radio-volume-control { align-items: stretch; flex-direction: column; gap: 8px; }
  .radio-modal .modal-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .radio-modal .modal-footer button { min-height: 42px; padding: 7px; white-space: normal; }
  .radio-mini-player { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .staff-role-choices { grid-template-columns: 1fr; }
  .staff-directory-card > header { align-items: flex-start; flex-wrap: wrap; }
  .staff-card-status { width: 100%; grid-template-columns: auto auto; justify-content: end; }
  .radio-mini-player:not(.collapsed) {
    grid-template-columns: 34px minmax(0, 1fr) 42px 34px;
  }
  .radio-mini-player:not(.collapsed) .radio-mini-volume { display: none; }
}

/* Distinct staff identities */
.rank-chip {
  position: relative;
  display: inline-flex;
  min-height: 17px;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  overflow: hidden;
  color: color-mix(in srgb, var(--role-color) 72%, white);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--role-color) 19%, transparent), transparent 72%),
    rgba(9, 20, 25, 0.82);
  border: 1px solid color-mix(in srgb, var(--role-color) 42%, transparent);
  border-radius: 999px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 3px 10px color-mix(in srgb, var(--role-color) 10%, transparent);
}

.rank-chip .ui-icon {
  width: 10px;
  height: 10px;
  stroke-width: 2.4;
}

.rank-chip[data-role="owner"],
.rank-chip[data-role="admin"] {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 0 13px color-mix(in srgb, var(--role-color) 18%, transparent);
}

.member-group-label.role-group-label {
  display: grid;
  min-height: 27px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  margin: 8px 5px 4px;
  color: color-mix(in srgb, var(--role-color) 76%, white);
  letter-spacing: 0.55px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--role-color) 14%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--role-color) 24%, transparent);
  border-radius: 8px;
}

.role-group-label .ui-icon {
  width: 13px;
  height: 13px;
}

.role-group-label b {
  display: grid;
  min-width: 20px;
  height: 18px;
  place-items: center;
  color: var(--role-color);
  background: color-mix(in srgb, var(--role-color) 12%, transparent);
  border-radius: 999px;
}

.member-copy small {
  display: flex;
  align-items: center;
  gap: 4px;
}

.member-role-badge {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  color: color-mix(in srgb, var(--role-color) 77%, white);
  font-size: 7px;
  font-style: normal;
  letter-spacing: 0.15px;
}

.member-role-badge .ui-icon {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}

.member-role-badge b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-role-separator {
  color: color-mix(in srgb, var(--role-color) 45%, #6f838d);
  font-style: normal;
}

/* Yetkili yardım odası */
.staff-lock {
  color: #2fdda5;
}

.staff-command-board {
  position: sticky;
  top: -1px;
  z-index: 12;
  width: min(1040px, 100%);
  padding: 15px;
  margin: 0 auto 20px;
  background:
    linear-gradient(135deg, rgba(47, 221, 165, 0.09), transparent 40%),
    rgba(15, 27, 33, 0.98);
  border: 1px solid rgba(47, 221, 165, 0.28);
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px);
}

.site-owner-command-board {
  background:
    linear-gradient(135deg, rgba(255, 49, 87, 0.13), transparent 44%),
    rgba(18, 24, 31, 0.98);
  border-color: rgba(255, 49, 87, 0.34);
  box-shadow: 0 14px 42px rgba(55, 7, 20, 0.34);
}

.site-owner-command-board > header > span {
  color: #fff;
  background: linear-gradient(145deg, #ff3157, #b91f47);
  box-shadow: 0 0 22px rgba(255, 49, 87, 0.28);
}

.site-owner-command-board > header em,
.site-owner-command-board .staff-command-group code {
  color: #ff8298;
}

.site-owner-command-board > header em {
  background: rgba(255, 49, 87, 0.09);
  border-color: rgba(255, 49, 87, 0.24);
}

.site-owner-command-board .staff-command-group button:hover {
  background: rgba(255, 49, 87, 0.08);
}

.staff-command-board > header {
  display: grid;
  min-height: 52px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 3px 13px;
  border-bottom: 1px solid rgba(134, 150, 160, 0.16);
}

.staff-command-board > header > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #071b15;
  background: #2fdda5;
  border-radius: 12px;
  box-shadow: 0 0 18px rgba(47, 221, 165, 0.22);
}

.staff-command-board > header > span .ui-icon {
  width: 21px;
  height: 21px;
  stroke-width: 2.4;
}

.staff-command-board > header div {
  min-width: 0;
}

.staff-command-board > header strong,
.staff-command-board > header small {
  display: block;
}

.staff-command-board > header strong {
  color: #f1f7f5;
  font-size: 15px;
  font-weight: 900;
}

.staff-command-board > header small {
  margin-top: 5px;
  color: #91a49e;
  font-size: 11px;
  line-height: 1.45;
  white-space: normal;
}

.staff-command-board > header em {
  padding: 7px 11px;
  color: #63e9bd;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.7px;
  background: rgba(47, 221, 165, 0.09);
  border: 1px solid rgba(47, 221, 165, 0.22);
  border-radius: 999px;
}

.staff-command-groups {
  display: grid;
  max-height: 390px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  padding-top: 12px;
  overflow-y: auto;
  scrollbar-color: rgba(47, 221, 165, 0.35) transparent;
}

.staff-command-group {
  padding: 10px;
  background: rgba(6, 16, 21, 0.44);
  border: 1px solid rgba(134, 150, 160, 0.12);
  border-radius: 12px;
}

.staff-command-group h3 {
  margin: 0 0 9px 4px;
  color: #8ca19a;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.75px;
  text-transform: uppercase;
}

.staff-command-group button {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: minmax(0, 1fr) 18px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 11px;
  text-align: left;
  background: transparent;
  border-radius: 9px;
  transition:
    background 150ms ease,
    transform 150ms ease;
}

.staff-command-group button:hover {
  background: rgba(47, 221, 165, 0.08);
  transform: translateX(2px);
}

.staff-command-group code {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  color: #64e5bc;
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.staff-command-group button span {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  color: #84958f;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: break-word;
  white-space: normal;
}

.staff-command-group button .ui-icon {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  width: 15px;
  height: 15px;
  color: #5c756d;
}

.staff-chat-empty {
  display: flex;
  width: min(440px, calc(100% - 20px));
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  margin: 25px auto;
  color: #7e918b;
  background: rgba(17, 27, 33, 0.84);
  border: 1px solid rgba(134, 150, 160, 0.16);
  border-radius: 12px;
}

.staff-chat-empty > .ui-icon {
  width: 24px;
  height: 24px;
  color: #2fdda5;
}

.staff-chat-empty strong,
.staff-chat-empty small {
  display: block;
}

.staff-chat-empty strong {
  color: #dce8e4;
  font-size: 13px;
}

.staff-chat-empty small {
  margin-top: 5px;
  font-size: 10px;
}

@media (max-width: 680px) {
  .staff-command-board {
    position: relative;
    top: auto;
    width: 100%;
    padding: 12px;
    margin-bottom: 14px;
    border-radius: 14px;
    box-shadow: 0 9px 28px rgba(0, 0, 0, 0.3);
  }

  .staff-command-board > header {
    min-height: 58px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    padding-bottom: 11px;
  }

  .staff-command-board > header > span {
    width: 44px;
    height: 44px;
  }

  .staff-command-board > header strong {
    font-size: 15px;
  }

  .staff-command-board > header em {
    display: none;
  }

  .staff-command-board > header small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .staff-command-groups {
    display: flex;
    max-height: 390px;
    gap: 10px;
    padding: 11px 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 1px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
  }

  .staff-command-group {
    width: min(86vw, 355px);
    min-width: min(86vw, 355px);
    max-height: 370px;
    padding: 11px;
    overflow-y: auto;
    scroll-snap-align: start;
    scrollbar-width: thin;
  }

  .staff-command-group h3 {
    margin-bottom: 9px;
    font-size: 11px;
  }

  .staff-command-group button {
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr) 18px;
    grid-template-rows: auto auto;
    gap: 4px 9px;
    padding: 10px;
  }

  .staff-command-group code {
    grid-column: 1;
    grid-row: 1;
    font-size: 12px;
  }

  .staff-command-group button span {
    grid-column: 1;
    grid-row: 2;
    font-size: 10px;
    line-height: 1.4;
    white-space: normal;
  }

  .staff-command-group button .ui-icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .staff-chat-empty {
    padding: 15px;
  }
}

/* Profil yetki rozetleri */
.profile-authority-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  margin-top: 11px;
}

.profile-authority-badge {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: color-mix(in srgb, var(--authority-color) 78%, white);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--authority-color) 19%, transparent),
      color-mix(in srgb, var(--authority-color) 8%, transparent)
    );
  border: 1px solid color-mix(in srgb, var(--authority-color) 42%, transparent);
  border-radius: 999px;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.045),
    0 4px 13px color-mix(in srgb, var(--authority-color) 12%, transparent);
}

.profile-authority-badge .ui-icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.5;
}

.profile-authority-badge b {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.45px;
}

.profile-authority-badge[data-role="owner"] {
  color: #ff7187;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.06),
    0 0 16px rgba(255, 77, 103, 0.14);
}

.profile-authority-badge[data-role="member"] {
  color: #b9c5cb;
}

.profile-authority-badge[data-role="guest"] {
  color: #cbb4ff;
}

.system-message.system-clean {
  border-color: color-mix(in srgb, var(--role-color) 38%, #33434d);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--role-color) 8%, transparent), transparent 52%),
    rgba(17, 27, 33, 0.96);
}

.system-message.system-clean > span {
  color: var(--role-color);
  background: color-mix(in srgb, var(--role-color) 13%, #17242c);
}

@media (max-width: 680px) {
  .profile-authority-row {
    gap: 6px;
    margin-top: 10px;
  }

  .profile-authority-badge {
    min-height: 30px;
    padding: 0 11px;
  }

  .profile-authority-badge b {
    font-size: 10px;
  }
}

/* Aktif kullanıcı etiketleme */
.composer-input-wrap {
  position: relative;
}

.mention-suggestions {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 90;
  max-height: min(390px, 52vh);
  padding: 8px;
  overflow-y: auto;
  background:
    linear-gradient(145deg, rgba(47, 221, 165, 0.07), transparent 42%),
    rgba(13, 24, 30, 0.985);
  border: 1px solid rgba(95, 126, 137, 0.42);
  border-radius: 15px;
  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  backdrop-filter: blur(18px);
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 221, 165, 0.42) transparent;
}

.mention-suggestions-title {
  display: grid;
  min-height: 34px;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 1px 7px 7px;
  color: #82a098;
}

.mention-suggestions-title span {
  color: #72e7bf;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.85px;
}

.mention-suggestions-title b {
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  color: #071b15;
  font-size: 9px;
  background: #2fdda5;
  border-radius: 999px;
}

.mention-suggestions-title small {
  justify-self: end;
  overflow: hidden;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-suggestion-list {
  display: grid;
  gap: 4px;
}

.mention-suggestion {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 55px;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  cursor: pointer;
  color: #dce7eb;
  text-align: left;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid transparent;
  border-radius: 11px;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.mention-suggestion::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  content: "";
  background: var(--mention-role);
  border-radius: 0 4px 4px 0;
  opacity: 0;
  transform: scaleY(0.55);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.mention-suggestion:hover,
.mention-suggestion.active {
  background: color-mix(in srgb, var(--mention-role) 10%, #18262e);
  border-color: color-mix(in srgb, var(--mention-role) 36%, #344650);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.18);
  transform: translateX(2px);
}

.mention-suggestion:hover::before,
.mention-suggestion.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.mention-suggestion .avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
  border-color: color-mix(in srgb, var(--mention-role) 58%, #465962);
}

.mention-suggestion > span:not(.avatar-wrap) {
  min-width: 0;
}

.mention-suggestion strong,
.mention-suggestion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mention-suggestion strong {
  color: color-mix(in srgb, var(--mention-role) 72%, white);
  font-size: 11px;
  font-weight: 900;
}

.mention-suggestion small {
  margin-top: 3px;
  color: #83959e;
  font-size: 9px;
  font-weight: 700;
}

.mention-suggestion em {
  padding: 5px 7px;
  color: color-mix(in srgb, var(--mention-role) 76%, white);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.35px;
  background: color-mix(in srgb, var(--mention-role) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--mention-role) 28%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.mention-suggestion > .ui-icon {
  width: 15px;
  height: 15px;
  color: #647c86;
}

.command-suggestions-title {
  position: sticky;
  top: -8px;
  z-index: 3;
  padding-top: 8px;
  background: linear-gradient(180deg, #0d181e 72%, rgba(13, 24, 30, 0));
}

.command-suggestion-list {
  display: grid;
  gap: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.command-suggestion {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  color: #dce7eb;
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid transparent;
  border-radius: 10px;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    box-shadow 150ms ease;
}

.command-suggestion > i {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--command-accent);
  background: color-mix(in srgb, var(--command-accent) 11%, #14242b);
  border: 1px solid color-mix(in srgb, var(--command-accent) 28%, #33454e);
  border-radius: 9px;
}

.command-suggestion > i .ui-icon {
  width: 15px;
  height: 15px;
}

.command-suggestion > span {
  min-width: 0;
}

.command-suggestion code,
.command-suggestion small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-suggestion code {
  color: color-mix(in srgb, var(--command-accent) 72%, white);
  font-family: "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 900;
}

.command-suggestion small {
  margin-top: 3px;
  color: #83959e;
  font-size: 8px;
  font-weight: 700;
}

.command-suggestion em {
  padding: 4px 6px;
  color: color-mix(in srgb, var(--command-accent) 76%, white);
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.35px;
  background: color-mix(in srgb, var(--command-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--command-accent) 24%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}

.command-suggestion > .ui-icon {
  width: 13px;
  height: 13px;
  color: #647c86;
}

.command-suggestion:hover,
.command-suggestion.active {
  background: color-mix(in srgb, var(--command-accent) 9%, #18262e);
  border-color: color-mix(in srgb, var(--command-accent) 34%, #344650);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.18);
  transform: translateX(2px);
}

/* Etiketlenen kişi mesajı kendi ekranında güçlü biçimde fark eder. */
.messages-scroll .message-row.mentioned-me .message-card {
  color: #fff0f3;
  background:
    linear-gradient(100deg, rgba(255, 77, 103, 0.2), rgba(255, 77, 103, 0.075) 72%),
    #211c25;
  border-color: rgba(255, 92, 116, 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 77, 103, 0.1),
    0 8px 25px rgba(95, 13, 31, 0.26);
}

.messages-scroll .message-row.mentioned-me .message-card::before {
  border-right-color: rgba(255, 92, 116, 0.72);
}

.messages-scroll .message-row.mentioned-me .message-card::after {
  border-right-color: #311d28;
}

.messages-scroll .message-row.mentioned-me .message-bubble,
.messages-scroll .message-row.mentioned-me.staff-message .message-bubble {
  color: #fff0f3;
  font-weight: 760;
}

.messages-scroll .message-row.mentioned-me .message-author {
  color: #ff8295;
}

.message-bubble .mention.mention-me {
  padding: 2px 5px;
  color: #fff;
  font-weight: 950;
  background: #e63e5a;
  border: 1px solid #ff7187;
  border-radius: 5px;
  box-shadow: 0 0 13px rgba(255, 77, 103, 0.28);
}

.message-bubble .mention.mention-profile {
  display: inline;
  margin: 0;
  font: inherit;
  font-weight: 850;
  line-height: inherit;
  vertical-align: baseline;
  cursor: pointer;
  border: 0;
  transition:
    color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.message-bubble .mention.mention-profile:hover {
  color: #fff;
  background: rgba(181, 168, 255, 0.3);
  box-shadow: 0 0 12px rgba(169, 112, 255, 0.2);
}

.message-bubble .mention.mention-profile.mention-me:hover {
  background: #f14b66;
  box-shadow: 0 0 17px rgba(255, 77, 103, 0.38);
}

.message-bubble .mention.mention-profile:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .mention-suggestions {
    right: -40px;
    bottom: calc(100% + 8px);
    left: -48px;
    max-height: min(360px, 48vh);
    padding: 7px;
    border-radius: 14px;
  }

  .mention-suggestions-title {
    grid-template-columns: auto auto 1fr;
    min-height: 32px;
    padding-inline: 6px;
  }

  .mention-suggestions-title small {
    display: none;
  }

  .mention-suggestion {
    min-height: 58px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 9px;
  }

  .mention-suggestion .avatar {
    width: 38px;
    height: 38px;
  }

  .mention-suggestion strong {
    font-size: 12px;
  }

  .mention-suggestion small {
    font-size: 10px;
  }

  .mention-suggestion > .ui-icon {
    display: none;
  }

  .command-suggestion {
    min-height: 58px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 9px;
  }

  .command-suggestion > i {
    width: 36px;
    height: 36px;
  }

  .command-suggestion code {
    font-size: 12px;
  }

  .command-suggestion small {
    font-size: 9px;
  }

  .command-suggestion > .ui-icon {
    display: none;
  }
}

@media (min-width: 681px) {
  .mention-suggestions {
    right: auto;
    width: min(440px, 100%);
    max-height: min(310px, 48vh);
    padding: 6px;
    border-radius: 13px;
  }

  .mention-suggestions-title {
    min-height: 28px;
    grid-template-columns: auto auto 1fr;
    gap: 6px;
    padding: 0 6px 5px;
  }

  .mention-suggestions-title span {
    font-size: 8px;
  }

  .mention-suggestions-title b {
    min-width: 18px;
    height: 18px;
    font-size: 8px;
  }

  .mention-suggestions-title small {
    font-size: 7px;
  }

  .mention-suggestion-list {
    gap: 3px;
  }

  .mention-suggestion {
    min-height: 46px;
    grid-template-columns: 33px minmax(0, 1fr) auto 15px;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 9px;
  }

  .mention-suggestion .avatar {
    width: 31px;
    height: 31px;
    font-size: 10px;
  }

  .mention-suggestion strong {
    font-size: 10px;
  }

  .mention-suggestion small {
    margin-top: 2px;
    font-size: 8px;
  }

  .mention-suggestion em {
    padding: 4px 6px;
    font-size: 7px;
  }

  .mention-suggestion > .ui-icon {
    width: 13px;
    height: 13px;
  }
}

/* Yetki hiyerarşisi, market ve oda fiyatları */
.role-emoji,
.role-group-emoji {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  font-family: "Segoe UI Emoji", sans-serif;
  font-style: normal;
  line-height: 1;
}

.message-author .role-emoji {
  margin-right: 4px;
  font-size: 11px;
}

.rank-chip[data-role="site_owner"] {
  background:
    linear-gradient(110deg, rgba(255, 49, 87, 0.3), rgba(255, 183, 77, 0.08)),
    #152027;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 0 17px rgba(255, 49, 87, 0.24);
}

.role-group-emoji {
  width: 18px;
  font-size: 14px;
}

.staff-role-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 0;
}

.staff-role-chip {
  display: grid;
  min-width: 0;
  min-height: 48px;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--role-color) 14%, transparent), transparent 75%),
    rgba(8, 18, 23, 0.7);
  border: 1px solid color-mix(in srgb, var(--role-color) 34%, #273842);
  border-radius: 10px;
}

.staff-role-chip > span {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  font-size: 16px;
  background: color-mix(in srgb, var(--role-color) 15%, #101d23);
  border-radius: 8px;
}

.staff-role-chip div,
.staff-role-chip strong,
.staff-role-chip small {
  display: block;
  min-width: 0;
}

.staff-role-chip strong {
  overflow: hidden;
  color: color-mix(in srgb, var(--role-color) 72%, white);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-role-chip small {
  margin-top: 3px;
  color: #83979f;
  font-size: 8px;
}

.staff-owner-crown {
  font-size: 22px;
  background: linear-gradient(145deg, #ff3157, #ff8f4d) !important;
}

.market-balance p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.market-balance p > b {
  color: #ffcc66;
  font-size: 13px;
}

.authority-market-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.authority-market-actions > b {
  color: #ffcc66;
  font-size: 13px;
  white-space: nowrap;
}

.authority-hierarchy-note {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  margin-bottom: 12px;
  color: #aebdc5;
  background: rgba(255, 49, 87, 0.06);
  border: 1px solid rgba(255, 49, 87, 0.18);
  border-radius: 12px;
}

.authority-hierarchy-note > span {
  font-size: 21px;
}

.authority-hierarchy-note p {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
}

.authority-hierarchy-note strong {
  color: #eef5f7;
}

.authority-market-modal .market-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.market-card {
  display: flex;
  min-height: 238px;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--plan-color) 10%, transparent), transparent 58%),
    var(--panel-2);
  border-color: color-mix(in srgb, var(--plan-color) 26%, var(--line));
}

.market-card.current {
  border-color: color-mix(in srgb, var(--plan-color) 70%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--plan-color) 16%, transparent);
}

.market-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.market-card .plan-icon {
  width: 42px;
  height: 42px;
  margin: 0 0 12px;
  font-size: 21px;
  background: color-mix(in srgb, var(--plan-color) 22%, #101a20);
  border: 1px solid color-mix(in srgb, var(--plan-color) 48%, transparent);
}

.market-count {
  padding: 5px 7px;
  color: color-mix(in srgb, var(--plan-color) 75%, white);
  font-size: 8px;
  font-weight: 800;
  background: color-mix(in srgb, var(--plan-color) 11%, #111c22);
  border-radius: 999px;
}

.market-card h4 {
  color: color-mix(in srgb, var(--plan-color) 78%, white);
  font-size: 15px;
}

.market-card p {
  min-height: 0;
  flex: 1;
  font-size: 9px;
}

.market-card button {
  width: 100%;
  min-height: 34px;
}

.market-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, .72fr);
  gap: 7px;
}

.market-card-actions:has(> :only-child) {
  grid-template-columns: 1fr;
}

.market-card-actions > button {
  width: 100%;
  min-height: 35px;
}

.market-gift-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #ffd8e1;
  font-size: 9px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(255, 49, 87, .15), rgba(169, 112, 255, .12));
  border: 1px solid rgba(255, 97, 128, .3);
  border-radius: 9px;
}

.market-gift-button:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 49, 87, .25), rgba(169, 112, 255, .2));
  border-color: rgba(255, 124, 150, .55);
  box-shadow: 0 7px 20px rgba(255, 49, 87, .12);
}

.market-gift-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.market-gift-button .ui-icon {
  width: 14px;
  height: 14px;
}

.market-locked,
.market-owned {
  color: #80929c;
  font-size: 9px;
  font-weight: 800;
  background: rgba(126, 145, 155, 0.08);
  border: 1px solid rgba(126, 145, 155, 0.14);
  border-radius: 9px;
}

.market-owned {
  color: color-mix(in srgb, var(--plan-color) 72%, white);
}

.market-footer-note {
  margin-right: auto;
  color: #a8b7bf;
  font-size: 9px;
}

.market-status-note {
  margin: 12px 2px 0;
  color: #83949d;
  font-size: 9px;
  line-height: 1.5;
}

.room-price-summary {
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  color: #93a5ae;
  font-size: 9px;
  background: rgba(0, 168, 132, 0.06);
  border: 1px solid rgba(0, 168, 132, 0.2);
  border-radius: 11px;
}

.room-price-summary strong {
  margin-left: auto;
  color: #55e2bd;
  font-size: 10px;
}

.top-link.authority-store-link {
  color: #ffd1da;
}

.top-link.authority-store-link span {
  color: #ff5875;
}

@media (max-width: 940px) {
  .staff-role-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .staff-role-overview {
    display: flex;
    gap: 7px;
    padding-bottom: 3px;
    overflow-x: auto;
  }

  .staff-role-chip {
    min-width: 132px;
  }

  .authority-market-modal .market-grid,
  .market-grid {
    grid-template-columns: 1fr;
  }

  .market-card {
    min-height: 205px;
  }

  .room-price-summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .room-price-summary strong {
    margin: 3px 0 0;
  }

  .market-footer-note {
    display: none;
  }

  .market-balance p,
  .authority-market-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .authority-market-actions .market-price-panel-button {
    width: 100%;
    min-height: 42px;
  }
}

/* Profil fotoğrafları ve hareketli profil marketi */
.avatar,
.tiny-avatar {
  border-radius: 50%;
}

.avatar img,
.tiny-avatar img {
  display: block;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  transform: scale(1.08);
}

.profile-cover .avatar {
  padding: 0;
  background: var(--avatar, var(--accent));
}

.profile-cover .avatar img {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  min-width: 120%;
  min-height: 120%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  transform: none;
}

.avatar.avatar-recovery-crop img,
.tiny-avatar.avatar-recovery-crop img {
  object-position: 50% 38%;
  transform: scale(1.48);
}

.profile-cover .avatar.avatar-recovery-crop img {
  inset: -24%;
  width: 148%;
  height: 148%;
  min-width: 148%;
  min-height: 148%;
  object-position: 50% 38%;
  transform: none;
}

.profile-name-line {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-name-line h2 {
  min-width: 0;
}

.profile-cosmetic-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  color: #f1f5f7;
  font-size: 10px;
  background: rgba(21, 34, 42, 0.94);
  border: 1px solid rgba(147, 169, 181, 0.28);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.profile-cosmetic-badge b {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.profile-style-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffd6de;
  border-color: rgba(255, 74, 109, 0.28);
}

.profile-style-button .ui-icon {
  width: 13px;
  height: 13px;
}

/* Kapak koleksiyonu */
.profile-cover.cosmetic-cover_aurora,
.profile-market-live.cosmetic-cover_aurora,
.cover-preview.cosmetic-cover_aurora {
  background:
    radial-gradient(circle at 18% 20%, rgba(66, 255, 202, 0.5), transparent 31%),
    radial-gradient(circle at 82% 70%, rgba(139, 92, 246, 0.56), transparent 34%),
    linear-gradient(120deg, #092a30, #17234a 52%, #143c35);
  background-size: 145% 145%;
  animation: cosmeticAurora 7s ease-in-out infinite alternate;
}

.profile-cover.cosmetic-cover_neon,
.profile-market-live.cosmetic-cover_neon,
.cover-preview.cosmetic-cover_neon {
  background:
    linear-gradient(115deg, transparent 22%, rgba(40, 224, 255, 0.34) 23%, transparent 25%),
    linear-gradient(65deg, transparent 62%, rgba(255, 54, 137, 0.34) 63%, transparent 66%),
    radial-gradient(circle at 70% 25%, rgba(110, 71, 255, 0.5), transparent 25%),
    #07101f;
  background-size: 180% 180%, 165% 165%, 130% 130%, auto;
  animation: cosmeticNeon 8s linear infinite;
}

.profile-cover.cosmetic-cover_royal,
.profile-market-live.cosmetic-cover_royal,
.cover-preview.cosmetic-cover_royal {
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 210, 115, 0.42), transparent 18%),
    radial-gradient(circle at 20% 80%, rgba(255, 49, 87, 0.55), transparent 30%),
    linear-gradient(120deg, #4e0e21, #a62245 44%, #3d1829 76%, #17111d);
  background-size: 150% 150%;
  animation: cosmeticRoyal 6s ease-in-out infinite alternate;
}

.profile-cover[class*="cosmetic-cover_"]::before,
.profile-market-live[class*="cosmetic-cover_"]::before,
.cover-preview[class*="cosmetic-cover_"]::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.13) 48%, transparent 63%);
  background-size: 220% 100%;
  animation: cosmeticSweep 5.5s ease-in-out infinite;
}

/* Avatar çerçeveleri */
.profile-cosmetic-frame {
  isolation: isolate;
}

.profile-cosmetic-frame .avatar {
  position: relative;
  z-index: 2;
  inset: auto;
}

.profile-cosmetic-frame::before,
.profile-cosmetic-frame::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  content: "";
  border-radius: 50%;
}

.profile-cosmetic-frame.cosmetic-frame_pulse::before {
  inset: -5px;
  background: conic-gradient(from 40deg, #29e7b2, #0a7866, #68ffd8, #29e7b2);
  box-shadow: 0 0 20px rgba(41, 231, 178, 0.44);
  animation: cosmeticSpin 5s linear infinite;
}

.profile-cosmetic-frame.cosmetic-frame_pulse::after {
  inset: -10px;
  border: 2px solid rgba(41, 231, 178, 0.23);
  animation: cosmeticPulse 2.1s ease-out infinite;
}

.profile-cosmetic-frame.cosmetic-frame_galaxy::before {
  inset: -7px;
  background:
    radial-gradient(circle at 50% 0, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 100% 55%, #55dcff 0 2px, transparent 3px),
    radial-gradient(circle at 12% 78%, #d38cff 0 2px, transparent 3px),
    conic-gradient(#7857ff, #34d8ff, #fa70d8, #7857ff);
  box-shadow: 0 0 24px rgba(120, 87, 255, 0.42);
  animation: cosmeticSpin 4.5s linear infinite;
}

.profile-cosmetic-frame.cosmetic-frame_galaxy::after {
  inset: -2px;
  background: #111b21;
}

.profile-cosmetic-frame.cosmetic-frame_crown::before {
  inset: -7px;
  background: conic-gradient(from 20deg, #ff3157, #ffd166, #ff8d52, #fff0a8, #ff3157);
  box-shadow:
    0 0 0 2px rgba(255, 209, 102, 0.16),
    0 0 25px rgba(255, 49, 87, 0.44);
  animation: cosmeticSpin 7s linear infinite;
}

.profile-cosmetic-frame.cosmetic-frame_crown::after {
  inset: -2px;
  background: #111b21;
}

.profile-cosmetic-frame .online-dot {
  z-index: 5;
}

/* İsim efektleri */
.cosmetic-name_neon {
  color: #66ffe0 !important;
  text-shadow:
    0 0 8px rgba(102, 255, 224, 0.7),
    0 0 20px rgba(0, 168, 132, 0.38);
  animation: cosmeticNamePulse 2.6s ease-in-out infinite;
}

.cosmetic-name_rainbow {
  color: transparent !important;
  background: linear-gradient(90deg, #69dbff, #9c7cff, #ff6daf, #ffd166, #69dbff);
  background-size: 240% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: cosmeticRainbow 4s linear infinite;
}

.cosmetic-name_gold {
  color: transparent !important;
  background: linear-gradient(100deg, #f0b74d 5%, #fff0a8 40%, #ffcb55 58%, #fff7d1 72%, #d99327 95%);
  background-size: 230% auto;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 7px rgba(255, 193, 72, 0.28));
  animation: cosmeticGold 3.8s linear infinite;
}

/* Rozet efektleri */
.profile-cosmetic-badge.cosmetic-badge_flame {
  color: #ffd1b0;
  background: linear-gradient(120deg, rgba(255, 77, 70, 0.25), rgba(255, 147, 54, 0.08));
  border-color: rgba(255, 113, 64, 0.43);
  animation: cosmeticBadgeGlow 2s ease-in-out infinite alternate;
}

.profile-cosmetic-badge.cosmetic-badge_night {
  color: #d8d5ff;
  background: linear-gradient(120deg, rgba(96, 83, 216, 0.27), rgba(22, 28, 70, 0.8));
  border-color: rgba(151, 142, 255, 0.37);
  box-shadow: 0 0 17px rgba(112, 97, 255, 0.18);
}

.profile-cosmetic-badge.cosmetic-badge_verified {
  color: #bff9ff;
  background: linear-gradient(120deg, rgba(45, 209, 226, 0.24), rgba(76, 93, 255, 0.11));
  border-color: rgba(83, 225, 238, 0.42);
}

.profile-cosmetic-badge.cosmetic-badge_founder {
  color: #ffe89c;
  background: linear-gradient(120deg, rgba(255, 49, 87, 0.27), rgba(255, 199, 76, 0.14));
  border-color: rgba(255, 204, 91, 0.52);
  box-shadow:
    0 0 17px rgba(255, 49, 87, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.1);
}

/* Profil marketi */
.profile-market-modal {
  width: min(860px, calc(100vw - 24px));
  max-height: min(820px, calc(100dvh - 24px));
}

.profile-market-live {
  position: relative;
  min-height: 118px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 24%),
    linear-gradient(125deg, #17313a, #18202d);
  border: 1px solid rgba(143, 166, 177, 0.26);
  border-radius: 16px;
}

.profile-market-live-label {
  position: relative;
  z-index: 2;
  color: rgba(235, 246, 248, 0.68);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.2px;
}

.profile-market-live-person {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
}

.profile-market-live-person .avatar-wrap,
.profile-market-live-person .avatar {
  width: 48px;
  height: 48px;
}

.profile-market-live-person strong,
.profile-market-live-person small {
  display: block;
}

.profile-market-live-person strong {
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  font-size: 17px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-market-live-person small {
  margin-top: 4px;
  color: #acbcc4;
  font-size: 9px;
}

.profile-market-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
}

.profile-market-toolbar div span,
.profile-market-toolbar div strong {
  display: block;
}

.profile-market-toolbar div span {
  color: #80939c;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.8px;
}

.profile-market-toolbar div strong {
  margin-top: 3px;
  color: #ffd166;
  font-size: 13px;
}

.profile-market-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  padding: 6px;
  background: rgba(6, 15, 20, 0.56);
  border: 1px solid #2c3e48;
  border-radius: 13px;
}

.profile-market-tabs button {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  color: #91a4ae;
  font-size: 9px;
  font-weight: 800;
  border-radius: 9px;
  transition:
    color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.profile-market-tabs button:hover {
  color: #e8f1f4;
  transform: translateY(-1px);
}

.profile-market-tabs button.active {
  color: #edfffa;
  background: linear-gradient(120deg, rgba(0, 168, 132, 0.25), rgba(89, 68, 255, 0.12));
  box-shadow: inset 0 0 0 1px rgba(73, 225, 190, 0.2);
}

.profile-market-tabs button span {
  font-size: 15px;
}

.profile-market-category-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 2px 9px;
}

.profile-market-category-copy strong {
  flex: 0 0 auto;
  color: #eff7f9;
  font-size: 12px;
}

.profile-market-category-copy span {
  color: #84969f;
  font-size: 9px;
  text-align: right;
}

.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.cosmetic-card {
  display: flex;
  min-width: 0;
  min-height: 272px;
  flex-direction: column;
  padding: 10px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cosmetic-accent) 7%, transparent), transparent 48%),
    #142129;
  border: 1px solid #2d3e48;
  border-radius: 14px;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cosmetic-card:hover {
  border-color: color-mix(in srgb, var(--cosmetic-accent) 45%, #32454f);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  transform: translateY(-2px);
}

.cosmetic-card.equipped {
  border-color: color-mix(in srgb, var(--cosmetic-accent) 76%, white);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cosmetic-accent) 13%, transparent);
}

.cosmetic-card-preview {
  position: relative;
  display: grid;
  height: 104px;
  overflow: hidden;
  place-items: center;
  background: #0c171d;
  border: 1px solid rgba(126, 151, 162, 0.2);
  border-radius: 11px;
}

.cover-preview > span {
  position: relative;
  z-index: 2;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  color: white;
  font-size: 15px;
  font-weight: 900;
  background: rgba(10, 20, 27, 0.54);
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 50%;
}

.frame-preview > .profile-cosmetic-frame {
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
}

.frame-preview .avatar {
  width: 58px;
  height: 58px;
}

.name-preview strong {
  position: relative;
  z-index: 2;
  max-width: 90%;
  overflow: hidden;
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge-preview .profile-cosmetic-badge {
  position: relative;
  z-index: 2;
}

.rack-preview {
  padding: 6px;
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--cosmetic-accent) 18%, transparent), transparent 62%),
    linear-gradient(145deg, #0d171b, #111f24);
}

.rack-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgba(0, 0, 0, 0.54));
}

.profile-market-equipped-rack {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(330px, 46%);
  min-width: 210px;
  gap: 3px;
  margin-left: auto;
}

.profile-market-equipped-rack span {
  color: rgba(222, 238, 231, 0.7);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.8px;
}

.profile-market-equipped-rack img {
  display: block;
  width: 100%;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.55));
}

/* Profil çevresi aura koleksiyonu */
.profile-modal .modal-body {
  position: relative;
  isolation: isolate;
}

.profile-modal .modal-body > .profile-cover,
.profile-modal .modal-body > .profile-title,
.profile-modal .modal-body > .profile-section,
.profile-modal .modal-body > .profile-blocked-banner {
  position: relative;
  z-index: 2;
}

.profile-aura-layer {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}

.profile-market-live > .profile-aura-layer,
.cosmetic-card-preview > .profile-aura-layer {
  z-index: 2;
}

/* Profil açılışında en fazla 2,5 saniye görünen yarı saydam GIF sahneleri */
.modal.profile-modal {
  position: relative;
  isolation: isolate;
}

.profile-scene-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--scene-accent) 30%, transparent), transparent 48%),
    rgba(5, 9, 13, 0.32);
  border-radius: inherit;
}

.profile-scene-layer img,
.profile-scene-layer .profile-scene-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.profile-scene-backdrop {
  object-fit: cover;
  opacity: 0.3;
  filter: blur(18px) saturate(1.45) contrast(1.08);
  transform: scale(1.14);
}

.profile-scene-main {
  object-fit: contain;
  opacity: 0.62;
  filter:
    saturate(1.2)
    drop-shadow(0 0 22px color-mix(in srgb, var(--scene-accent) 55%, transparent));
}

.profile-scene-shade {
  background:
    linear-gradient(180deg, rgba(4, 8, 12, 0.08), rgba(4, 8, 12, 0.26)),
    radial-gradient(circle at center, transparent 28%, rgba(4, 8, 12, 0.22) 100%);
  box-shadow: inset 0 0 70px color-mix(in srgb, var(--scene-accent) 18%, transparent);
}

.profile-scene-layer.scene-context-profile {
  z-index: 50;
  animation: profileSceneLifetime 2.5s ease both;
}

.profile-scene-layer.scene-context-profile .profile-scene-main {
  animation: profileSceneDrift 2.5s ease-out both;
}

.profile-scene-layer.cosmetic-scene_dragon_inferno,
.profile-scene-layer.cosmetic-scene_heart_glow {
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--scene-accent) 38%, transparent), transparent 45%),
    rgba(18, 7, 10, 0.3);
}

.profile-scene-layer.cosmetic-scene_thunder_core,
.profile-scene-layer.cosmetic-scene_cyber_night {
  background:
    linear-gradient(145deg, rgba(4, 13, 25, 0.5), color-mix(in srgb, var(--scene-accent) 18%, transparent)),
    rgba(3, 8, 14, 0.32);
}

.profile-scene-layer.cosmetic-scene_dragon_inferno .profile-scene-backdrop,
.profile-scene-layer.cosmetic-scene_thunder_core .profile-scene-backdrop {
  opacity: 0.42;
  filter: blur(14px) saturate(1.35) contrast(1.12);
}

.profile-scene-layer.cosmetic-scene_dragon_inferno .profile-scene-main,
.profile-scene-layer.cosmetic-scene_thunder_core .profile-scene-main {
  object-fit: cover;
  opacity: 0.68;
  filter:
    saturate(1.12)
    contrast(1.08)
    drop-shadow(0 0 28px color-mix(in srgb, var(--scene-accent) 58%, transparent));
}

.profile-scene-layer.cosmetic-scene_butterfly_dream,
.profile-scene-layer.cosmetic-scene_sakura_bloom {
  background:
    linear-gradient(150deg, rgba(28, 8, 22, 0.36), color-mix(in srgb, var(--scene-accent) 20%, transparent)),
    rgba(12, 6, 13, 0.24);
}

@keyframes profileSceneLifetime {
  0% { opacity: 0; visibility: visible; }
  7% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes profileSceneDrift {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

.profile-scene-layer.scene-context-preview,
.profile-scene-layer.scene-context-card {
  z-index: 2;
  opacity: 0.72;
  animation: none;
}

.scene-preview {
  position: relative;
  overflow: hidden;
  background: #071017;
}

.scene-preview-label {
  position: relative;
  z-index: 4;
  align-self: end;
  margin-bottom: 10px;
  padding: 5px 8px;
  color: #fff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.75px;
  background: rgba(6, 13, 18, 0.72);
  border: 1px solid color-mix(in srgb, var(--cosmetic-accent) 42%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}

.profile-aura-layer.cosmetic-aura_dragon .aura-dragon-main {
  position: absolute;
  top: 14px;
  left: -42px;
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 35px;
  line-height: 1;
  filter:
    drop-shadow(0 0 5px rgba(255, 197, 75, 0.9))
    drop-shadow(0 0 14px rgba(255, 64, 60, 0.58));
  animation: auraDragonOrbit 11s ease-in-out infinite;
}

.profile-aura-layer.cosmetic-aura_dragon .aura-dragon-spark {
  position: absolute;
  top: 25px;
  left: 20%;
  color: #ffd166;
  font-size: 15px;
  text-shadow: 0 0 12px #ff554d;
  animation: auraDragonSpark 2.2s ease-out infinite;
}

.profile-aura-layer.cosmetic-aura_dragon i {
  position: absolute;
  top: 35px;
  left: 9%;
  width: 35px;
  height: 4px;
  opacity: 0;
  background: linear-gradient(90deg, #fff3a1, #ff713f, transparent);
  border-radius: 999px;
  filter: blur(0.5px) drop-shadow(0 0 7px #ff5b38);
  transform-origin: left;
  animation: auraDragonFire 11s ease-in-out infinite;
}

.profile-aura-layer.cosmetic-aura_fireworks i {
  position: absolute;
  width: 5px;
  height: 5px;
  opacity: 0;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 -21px #ff6a89,
    15px -15px #ffd166,
    21px 0 #55e8ff,
    15px 15px #b68cff,
    0 21px #5dffb6,
    -15px 15px #ff8b45,
    -21px 0 #ffe58c,
    -15px -15px #74b6ff;
  animation: auraFirework 3.3s ease-out infinite;
}

.profile-aura-layer.cosmetic-aura_fireworks i:nth-child(1) { top: 12%; left: 15%; animation-delay: 0s; }
.profile-aura-layer.cosmetic-aura_fireworks i:nth-child(2) { top: 22%; right: 13%; animation-delay: 0.8s; }
.profile-aura-layer.cosmetic-aura_fireworks i:nth-child(3) { top: 48%; left: 8%; animation-delay: 1.55s; }
.profile-aura-layer.cosmetic-aura_fireworks i:nth-child(4) { top: 66%; right: 10%; animation-delay: 2.25s; }
.profile-aura-layer.cosmetic-aura_fireworks i:nth-child(5) { bottom: 8%; left: 42%; animation-delay: 2.8s; }

.profile-aura-layer.cosmetic-aura_sakura span {
  position: absolute;
  top: -28px;
  left: var(--petal-left, 10%);
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: var(--petal-size, 15px);
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(255, 151, 192, 0.45));
  animation: auraPetalFall var(--petal-speed, 6s) linear infinite;
  animation-delay: var(--petal-delay, 0s);
}

.profile-aura-layer.cosmetic-aura_sakura span:nth-child(1) { --petal-left: 5%; --petal-delay: -1s; --petal-speed: 6.5s; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(2) { --petal-left: 18%; --petal-delay: -4s; --petal-size: 12px; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(3) { --petal-left: 32%; --petal-delay: -2.2s; --petal-speed: 7.2s; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(4) { --petal-left: 48%; --petal-delay: -5.4s; --petal-size: 13px; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(5) { --petal-left: 62%; --petal-delay: -3.1s; --petal-speed: 6.8s; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(6) { --petal-left: 76%; --petal-delay: -0.5s; --petal-size: 11px; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(7) { --petal-left: 88%; --petal-delay: -4.7s; --petal-speed: 7.5s; }
.profile-aura-layer.cosmetic-aura_sakura span:nth-child(8) { --petal-left: 96%; --petal-delay: -2.8s; --petal-size: 13px; }

.aura-preview-avatar {
  position: relative;
  z-index: 3;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: white;
  font-size: 15px;
  font-weight: 900;
  background: #14242c;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
}

.aura-context-card.cosmetic-aura_dragon .aura-dragon-main {
  font-size: 24px;
  animation-duration: 6s;
}

.aura-context-card.cosmetic-aura_dragon i,
.aura-context-card.cosmetic-aura_dragon .aura-dragon-spark {
  display: none;
}

.cosmetic-card-copy {
  flex: 1;
  padding: 11px 2px 9px;
}

.cosmetic-card-copy > span {
  color: color-mix(in srgb, var(--cosmetic-accent) 70%, #a9bbc4);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.65px;
}

.cosmetic-card-copy h4 {
  margin: 5px 0 0;
  color: #eff5f7;
  font-size: 12px;
}

.cosmetic-card-copy p {
  margin: 6px 0 0;
  color: #84969f;
  font-size: 9px;
  line-height: 1.45;
}

.cosmetic-card > button,
.cosmetic-card .market-card-actions > button {
  width: 100%;
  min-height: 35px;
  border-radius: 9px;
}

.market-gift-modal {
  width: min(520px, calc(100vw - 24px));
}

.gift-product-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: linear-gradient(130deg, rgba(255, 49, 87, .12), rgba(169, 112, 255, .08));
  border: 1px solid rgba(255, 100, 130, .24);
  border-radius: 13px;
}

.gift-product-summary > span {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  color: #ff8ba2;
  background: rgba(255, 49, 87, .12);
  border-radius: 12px;
}

.gift-product-summary > span .ui-icon {
  width: 22px;
  height: 22px;
}

.gift-product-summary div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 3px;
}

.gift-product-summary small {
  color: #8fa1aa;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .8px;
}

.gift-product-summary strong {
  color: #f4f8fa;
  font-size: 14px;
}

.gift-product-summary b {
  color: #ffd166;
  font-size: 10px;
}

.gift-recipient-list {
  display: grid;
  max-height: min(420px, 52dvh);
  gap: 7px;
  overflow-y: auto;
}

.gift-recipient-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 10px;
  color: #dfe8ec;
  text-align: left;
  background: #142129;
  border: 1px solid #2c3d47;
  border-radius: 11px;
}

.gift-recipient-card:hover {
  background: #192a34;
  border-color: rgba(47, 221, 165, .44);
  transform: translateY(-1px);
}

.gift-recipient-card > span:not(.avatar-wrap) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.gift-recipient-card strong,
.gift-recipient-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-recipient-card strong {
  font-size: 11px;
}

.gift-recipient-card small {
  color: #8fa1aa;
  font-size: 8px;
}

.gift-recipient-card > .ui-icon {
  color: #ff718d;
}

.gift-recipient-empty {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #8799a2;
  text-align: center;
  border: 1px dashed #30434d;
  border-radius: 13px;
}

.gift-recipient-empty .ui-icon {
  width: 28px;
  height: 28px;
  color: #516873;
}

.gift-recipient-empty strong {
  color: #dce6ea;
  font-size: 12px;
}

.gift-recipient-empty span {
  max-width: 320px;
  font-size: 9px;
  line-height: 1.55;
}

.cosmetic-equipped,
.cosmetic-locked {
  color: #62e8c1;
  font-size: 9px;
  font-weight: 900;
  background: rgba(0, 168, 132, 0.09);
  border: 1px solid rgba(0, 168, 132, 0.22);
}

.cosmetic-locked {
  color: #8b9aa2;
  background: rgba(124, 145, 155, 0.06);
  border-color: rgba(124, 145, 155, 0.14);
}

.profile-market-link {
  color: #d9d0ff;
}

.profile-market-link span {
  color: #a98bff;
}

@keyframes cosmeticAurora {
  to { background-position: 100% 70%; }
}

@keyframes cosmeticNeon {
  to { background-position: 100% 80%, 0 100%, 80% 30%, 0 0; }
}

@keyframes cosmeticRoyal {
  to { background-position: 90% 55%; filter: saturate(1.15); }
}

@keyframes cosmeticSweep {
  0%, 25% { background-position: 180% 0; opacity: 0; }
  45% { opacity: 0.75; }
  72%, 100% { background-position: -80% 0; opacity: 0; }
}

@keyframes cosmeticSpin {
  to { transform: rotate(360deg); }
}

@keyframes cosmeticPulse {
  0% { opacity: 0.75; transform: scale(0.92); }
  70%, 100% { opacity: 0; transform: scale(1.14); }
}

@keyframes cosmeticNamePulse {
  50% { text-shadow: 0 0 13px rgba(102, 255, 224, 0.9), 0 0 26px rgba(0, 168, 132, 0.55); }
}

@keyframes cosmeticRainbow {
  to { background-position: 240% center; }
}

@keyframes cosmeticGold {
  to { background-position: -230% center; }
}

@keyframes cosmeticBadgeGlow {
  to { box-shadow: 0 0 20px rgba(255, 99, 55, 0.34); }
}

@keyframes auraDragonOrbit {
  0% { top: 7%; left: -42px; transform: rotate(-8deg) scaleX(1); }
  23% { top: 2%; left: calc(100% - 43px); transform: rotate(8deg) scaleX(1); }
  27% { transform: rotate(8deg) scaleX(-1); }
  50% { top: 46%; left: calc(100% - 33px); transform: rotate(-12deg) scaleX(-1); }
  73% { top: calc(100% - 48px); left: 12%; transform: rotate(5deg) scaleX(-1); }
  77% { transform: rotate(5deg) scaleX(1); }
  100% { top: 7%; left: -42px; transform: rotate(-8deg) scaleX(1); }
}

@keyframes auraDragonSpark {
  0%, 68% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  73% { opacity: 1; }
  90%, 100% { opacity: 0; transform: translate(34px, 18px) scale(1.5) rotate(120deg); }
}

@keyframes auraDragonFire {
  0%, 18%, 100% { opacity: 0; transform: rotate(8deg) scaleX(0.2); }
  21%, 25% { opacity: 1; transform: rotate(8deg) scaleX(1); }
  29% { opacity: 0; transform: rotate(8deg) scaleX(1.25); }
}

@keyframes auraFirework {
  0%, 28% { opacity: 0; transform: scale(0.12); }
  34% { opacity: 1; }
  62% { opacity: 0.86; transform: scale(1); }
  78%, 100% { opacity: 0; transform: scale(1.32); }
}

@keyframes auraPetalFall {
  0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0deg); }
  10% { opacity: 0.9; }
  45% { transform: translate3d(24px, 44vh, 0) rotate(160deg); }
  85% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(-18px, 92vh, 0) rotate(380deg); }
}

@media (max-width: 680px) {
  .profile-actions {
    max-width: calc(100% - 118px);
  }

  .profile-style-button {
    min-height: 34px;
  }

  .profile-market-modal {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
  }

  .profile-market-live {
    min-height: 124px;
    padding: 14px;
  }

  .profile-market-live-person {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .profile-market-live-person > .profile-cosmetic-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .profile-market-tabs {
    display: flex;
    padding: 5px;
    overflow-x: auto;
  }

  .profile-market-tabs button {
    min-width: 125px;
  }

  .profile-market-category-copy {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .profile-market-category-copy span {
    text-align: left;
  }

  .cosmetic-grid {
    grid-template-columns: 1fr;
  }

  .cosmetic-card {
    min-height: 244px;
  }

  .cosmetic-card-preview {
    height: 112px;
  }

  .profile-name-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
}

/* Final cascade: DM mesajları oda sohbetinden bağımsız hizalanır. */
.messages-scroll .message-row.dm-message,
.messages-scroll .message-row.dm-message.own {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  align-items: flex-end;
  gap: 8px;
  padding: 3px 20px;
  margin: 0;
  background: transparent;
}

.messages-scroll .message-row.dm-message:not(.own) {
  justify-content: flex-start;
}

.messages-scroll .message-row.dm-message.own {
  justify-content: flex-end;
}

.messages-scroll .message-row.dm-message.own > button[data-profile-id] {
  display: none;
}

.messages-scroll .message-row.dm-message > button[data-profile-id] {
  flex: 0 0 34px;
  align-self: flex-end;
  margin: 0 0 2px;
}

.messages-scroll .message-row.dm-message .message-content,
.messages-scroll .message-row.dm-message.own .message-content {
  width: fit-content;
  max-width: min(72%, 720px);
  flex: 0 1 auto;
  text-align: left;
}

.messages-scroll .message-row.dm-message .message-card {
  min-width: 92px;
  padding: 7px 10px 8px;
  background: #202f38;
  border: 1px solid #354852;
  border-radius: 5px 14px 14px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.messages-scroll .message-row.dm-message .message-card::before {
  top: 9px;
  right: auto;
  left: -6px;
  border: 0;
  border-top: 5px solid transparent;
  border-right: 6px solid #354852;
  border-bottom: 5px solid transparent;
}

.messages-scroll .message-row.dm-message .message-card::after {
  top: 10px;
  right: auto;
  left: -4px;
  border: 0;
  border-top: 4px solid transparent;
  border-right: 5px solid #202f38;
  border-bottom: 4px solid transparent;
}

.messages-scroll .message-row.dm-message.own .message-card {
  color: #effffb;
  background: linear-gradient(145deg, #075e54, #056558);
  border-color: #168477;
  border-radius: 14px 5px 14px 14px;
  box-shadow: 0 4px 15px rgba(0, 68, 58, 0.28);
}

.messages-scroll .message-row.dm-message.own .message-card::before {
  right: -6px;
  left: auto;
  border: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid #168477;
}

.messages-scroll .message-row.dm-message.own .message-card::after {
  right: -4px;
  left: auto;
  border: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #056558;
}

.messages-scroll .message-row.dm-message.own .message-meta {
  display: none;
}

.messages-scroll .message-row.dm-message .message-bubble,
.messages-scroll .message-row.dm-message.own .message-bubble,
.messages-scroll .message-row.dm-message.staff-message .message-bubble,
.messages-scroll .message-row.dm-message.staff-message.own .message-bubble {
  padding: 0 47px 0 0;
  color: #eaf2f5;
  font-size: 13px;
  font-weight: 590;
  line-height: 1.42;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.messages-scroll .message-row.dm-message.own .message-bubble,
.messages-scroll .message-row.dm-message.staff-message.own .message-bubble {
  color: #f2fffb;
}

.messages-scroll .message-row.dm-message.own .message-actions {
  right: calc(100% + 6px);
  left: auto;
}

.messages-scroll .message-row.dm-message:not(.own) .message-actions {
  right: auto;
  left: calc(100% + 6px);
}

.messages-scroll .message-row.dm-message.own .message-stamp .message-time,
.messages-scroll .message-row.dm-message.own .message-stamp .read-ticks {
  color: #9be3d5;
}

@media (max-width: 680px) {
  .messages-scroll .message-row.dm-message,
  .messages-scroll .message-row.dm-message.own {
    gap: 6px;
    padding: 3px 8px;
  }

  .messages-scroll .message-row.dm-message .message-content,
  .messages-scroll .message-row.dm-message.own .message-content {
    max-width: 82%;
  }

  .messages-scroll .message-row.dm-message > button[data-profile-id] {
    flex-basis: 28px;
  }

  .messages-scroll .message-row.dm-message .avatar {
    width: 28px;
    height: 28px;
  }

  .messages-scroll .message-row.dm-message .message-card {
    min-width: 78px;
    padding: 7px 9px 8px;
  }

  .messages-scroll .message-row.dm-message .message-bubble,
  .messages-scroll .message-row.dm-message.own .message-bubble {
    padding-right: 43px;
    font-size: 12px;
  }
}

/* Kamera fotoğrafı gönderilmeden önce kullanıcı onayı */
.camera-review-shell {
  position: relative;
  display: grid;
  overflow: hidden;
  min-height: 320px;
  place-items: center;
  background: #050a0d;
  border: 1px solid #30424c;
  border-radius: 15px;
  aspect-ratio: 4 / 3;
}

.camera-review-shell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050a0d;
}

.camera-review-pill {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  color: #eafff8;
  font-size: 10px;
  font-weight: 850;
  background: rgba(5, 20, 20, 0.82);
  border: 1px solid rgba(43, 220, 175, 0.48);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(9px);
}

.camera-review-pill .ui-icon,
.camera-confirm-button .ui-icon,
.camera-retake-button .ui-icon {
  width: 15px;
  height: 15px;
}

.camera-confirm-button,
.camera-retake-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.camera-confirm-button {
  background: linear-gradient(135deg, #12bd9b, #17d5a8);
  box-shadow: 0 8px 24px rgba(18, 189, 155, 0.2);
}

/* Mobilde mesaj alanına odaklanınca iOS Safari yakınlaştırma yapmaz. */
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  .composer textarea,
  #message-input {
    font-size: 16px !important;
    touch-action: manipulation;
  }

  .camera-review-shell {
    min-height: min(58dvh, 520px);
    aspect-ratio: auto;
  }

  .context-menu.mobile-message-menu {
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 9px;
    background: rgba(18, 31, 39, 0.98);
    border-color: #40545f;
    border-radius: 16px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.46);
    backdrop-filter: blur(18px);
  }

  .context-menu.mobile-message-menu::before {
    display: block;
    width: 38px;
    height: 4px;
    margin: 1px auto 7px;
    content: "";
    background: #566b76;
    border-radius: 999px;
  }

  .context-menu.mobile-message-menu button {
    min-height: 48px;
    gap: 12px;
    padding: 0 13px;
    font-size: 14px;
    font-weight: 760;
    border-radius: 10px;
  }

  .context-menu.mobile-message-menu button + button {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
  }

  .context-menu.mobile-message-menu button .ui-icon {
    width: 18px;
    height: 18px;
  }

  .messages-scroll .message-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Son responsive katman: ses balonu sonraki eski kurallardan etkilenmez. */
.voice-dock.collapsed {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  max-height: 54px !important;
}

.voice-dock.collapsed .voice-dock-head {
  width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 17px !important;
  touch-action: none !important;
}

.voice-dock.collapsed .voice-dock-head > div,
.voice-dock.collapsed #voice-collapse,
.voice-dock.collapsed .voice-users,
.voice-dock.collapsed .voice-actions,
.voice-dock.collapsed .voice-resize-handle {
  display: none !important;
}

@media (max-width: 680px) {
  .header-actions [data-action="room-settings"] {
    display: grid !important;
  }

  .voice-dock:not(.collapsed) {
    min-width: 250px !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 76px) !important;
  }

  .voice-dock:not(.collapsed) .voice-dock-head {
    cursor: grab !important;
    touch-action: none !important;
  }

  .voice-dock:not(.collapsed) .voice-resize-handle {
    display: block !important;
  }
}

/* Profil Marketi: genişletilmiş altılı koleksiyonlar */
.profile-cover.cosmetic-cover_midnight,
.profile-market-live.cosmetic-cover_midnight,
.cover-preview.cosmetic-cover_midnight {
  background:
    radial-gradient(circle at 18% 28%, rgba(123, 166, 255, 0.48), transparent 4%),
    radial-gradient(circle at 72% 20%, rgba(255, 255, 255, 0.38), transparent 2%),
    radial-gradient(circle at 82% 72%, rgba(91, 72, 255, 0.36), transparent 28%),
    linear-gradient(135deg, #030b22, #102b5d 50%, #160f38);
  background-size: 135% 135%;
  animation: cosmeticAurora 8s ease-in-out infinite alternate;
}

.profile-cover.cosmetic-cover_sakura,
.profile-market-live.cosmetic-cover_sakura,
.cover-preview.cosmetic-cover_sakura {
  background:
    radial-gradient(circle at 16% 75%, rgba(255, 186, 212, 0.5), transparent 25%),
    radial-gradient(circle at 82% 18%, rgba(255, 233, 244, 0.42), transparent 22%),
    linear-gradient(125deg, #67264e, #d56291 47%, #6e477f);
  background-size: 150% 150%;
  animation: cosmeticRoyal 7s ease-in-out infinite alternate;
}

.profile-cover.cosmetic-cover_ocean,
.profile-market-live.cosmetic-cover_ocean,
.cover-preview.cosmetic-cover_ocean {
  background:
    repeating-radial-gradient(ellipse at 50% 115%, transparent 0 16px, rgba(127, 250, 255, 0.14) 17px 19px),
    radial-gradient(circle at 75% 12%, rgba(173, 255, 248, 0.35), transparent 24%),
    linear-gradient(135deg, #043746, #057a86 48%, #052b52);
  background-size: 130% 130%;
  animation: cosmeticNeon 9s linear infinite;
}

.profile-cosmetic-frame.cosmetic-frame_ice::before {
  inset: -7px;
  background: conic-gradient(#dffbff, #52bfff, #8de8ff, #ffffff, #52bfff);
  box-shadow: 0 0 22px rgba(87, 201, 255, 0.52);
  animation: cosmeticSpin 6s linear infinite;
}

.profile-cosmetic-frame.cosmetic-frame_ice::after {
  inset: -2px;
  background: #111b21;
}

.profile-cosmetic-frame.cosmetic-frame_heart::before {
  inset: -6px;
  background: conic-gradient(from 25deg, #ff6ea9, #ffc0dc, #fa4a89, #ffd4e8, #ff6ea9);
  box-shadow: 0 0 23px rgba(255, 93, 151, 0.48);
  animation: cosmeticPulse 2.2s ease-out infinite;
}

.profile-cosmetic-frame.cosmetic-frame_heart::after {
  inset: -2px;
  background: #111b21;
}

.profile-cosmetic-frame.cosmetic-frame_shadow::before {
  inset: -7px;
  background: conic-gradient(from 90deg, #151326, #8f62ff, #1b1735, #d48cff, #151326);
  box-shadow: 0 0 25px rgba(125, 78, 255, 0.46);
  animation: cosmeticSpin 4.8s linear infinite reverse;
}

.profile-cosmetic-frame.cosmetic-frame_shadow::after {
  inset: -2px;
  background: #111b21;
}

.cosmetic-name_fire {
  color: transparent !important;
  background: linear-gradient(90deg, #ffda70, #ff693f, #ff3157, #ffb84d, #ffda70);
  background-size: 230% auto;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 7px rgba(255, 82, 44, 0.45));
  animation: cosmeticRainbow 3s linear infinite;
}

.cosmetic-name_ice {
  color: #e6fdff !important;
  text-shadow: 0 0 7px #79dcff, 0 0 18px rgba(78, 164, 255, 0.66);
  animation: cosmeticNamePulse 2.8s ease-in-out infinite;
}

.cosmetic-name_sakura {
  color: transparent !important;
  background: linear-gradient(95deg, #ff86bc, #ffe1ee, #c795ff, #ff77ac);
  background-size: 220% auto;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 7px rgba(255, 119, 174, 0.4));
  animation: cosmeticGold 4.2s linear infinite;
}

.profile-cosmetic-badge.cosmetic-badge_baby {
  color: #e9f9ff;
  background: linear-gradient(120deg, rgba(94, 191, 255, 0.26), rgba(255, 137, 193, 0.2));
  border-color: rgba(142, 211, 255, 0.48);
  box-shadow: 0 0 15px rgba(120, 197, 255, 0.2);
}

.profile-cosmetic-badge.cosmetic-badge_queen {
  color: #ffe8a8;
  background: linear-gradient(120deg, rgba(235, 65, 145, 0.3), rgba(255, 194, 80, 0.16));
  border-color: rgba(255, 196, 92, 0.5);
  box-shadow: 0 0 17px rgba(255, 86, 158, 0.24);
}

.profile-aura-layer.cosmetic-aura_neon_wings .aura-wing {
  position: absolute;
  top: 27%;
  color: transparent;
  font-size: clamp(60px, 13vw, 130px);
  line-height: 1;
  text-shadow: 0 0 4px #7dfcff, 0 0 18px #42a5ff, 0 0 35px #945dff;
  -webkit-text-stroke: 2px rgba(131, 242, 255, 0.88);
  animation: auraWingBreath 2.8s ease-in-out infinite;
}

.profile-aura-layer.cosmetic-aura_neon_wings .aura-wing.left { left: -1%; transform-origin: right center; }
.profile-aura-layer.cosmetic-aura_neon_wings .aura-wing.right { right: -1%; transform-origin: left center; }
.profile-aura-layer.cosmetic-aura_neon_wings .aura-wing-core {
  position: absolute;
  top: 36%;
  left: 50%;
  width: 10px;
  height: 34%;
  background: rgba(126, 247, 255, 0.65);
  border-radius: 50%;
  filter: blur(9px);
  transform: translateX(-50%);
  animation: cosmeticNamePulse 2.4s ease-in-out infinite;
}

.profile-aura-layer.cosmetic-aura_hearts span {
  position: absolute;
  bottom: -28px;
  left: var(--heart-left, 10%);
  color: #ff77ad;
  font-size: var(--heart-size, 17px);
  opacity: 0;
  text-shadow: 0 0 11px rgba(255, 76, 148, 0.74);
  animation: auraHeartRise var(--heart-speed, 5s) ease-in infinite;
  animation-delay: var(--heart-delay, 0s);
}

.profile-aura-layer.cosmetic-aura_hearts span:nth-child(1) { --heart-left: 6%; --heart-delay: -1s; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(2) { --heart-left: 19%; --heart-delay: -3.6s; --heart-size: 12px; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(3) { --heart-left: 34%; --heart-delay: -2.2s; --heart-speed: 5.8s; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(4) { --heart-left: 48%; --heart-delay: -4.6s; --heart-size: 14px; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(5) { --heart-left: 62%; --heart-delay: -.5s; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(6) { --heart-left: 75%; --heart-delay: -3s; --heart-size: 11px; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(7) { --heart-left: 87%; --heart-delay: -1.8s; --heart-speed: 6s; }
.profile-aura-layer.cosmetic-aura_hearts span:nth-child(8) { --heart-left: 95%; --heart-delay: -4.2s; --heart-size: 13px; }

.profile-aura-layer.cosmetic-aura_stardust i {
  position: absolute;
  top: var(--star-top, 12%);
  left: var(--star-left, 8%);
  width: var(--star-size, 5px);
  height: var(--star-size, 5px);
  background: #fff5ac;
  border-radius: 50%;
  box-shadow: 0 0 7px #ffd865, 0 0 17px rgba(95, 194, 255, 0.82);
  animation: auraStarTwinkle var(--star-speed, 2.4s) ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}

.profile-aura-layer.cosmetic-aura_stardust i:nth-child(1) { --star-top: 8%; --star-left: 9%; --star-delay: -.4s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(2) { --star-top: 18%; --star-left: 34%; --star-size: 3px; --star-delay: -1.2s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(3) { --star-top: 10%; --star-left: 78%; --star-delay: -1.8s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(4) { --star-top: 32%; --star-left: 91%; --star-size: 4px; --star-delay: -.7s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(5) { --star-top: 52%; --star-left: 6%; --star-delay: -2s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(6) { --star-top: 65%; --star-left: 28%; --star-size: 3px; --star-delay: -1.1s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(7) { --star-top: 76%; --star-left: 58%; --star-delay: -.2s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(8) { --star-top: 60%; --star-left: 84%; --star-size: 4px; --star-delay: -1.6s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(9) { --star-top: 88%; --star-left: 14%; --star-delay: -.9s; }
.profile-aura-layer.cosmetic-aura_stardust i:nth-child(10) { --star-top: 86%; --star-left: 94%; --star-size: 3px; --star-delay: -2.2s; }

@keyframes auraWingBreath {
  0%, 100% { opacity: 0.55; scale: 0.9 1; }
  50% { opacity: 0.95; scale: 1.04 1.08; }
}

@keyframes auraHeartRise {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.6) rotate(-8deg); }
  18% { opacity: .88; }
  100% { opacity: 0; transform: translate3d(18px, -80vh, 0) scale(1.25) rotate(18deg); }
}

@keyframes auraStarTwinkle {
  0%, 100% { opacity: .2; transform: scale(.55) rotate(0); }
  50% { opacity: 1; transform: scale(1.5) rotate(90deg); }
}

/* Site Sahibi fiyat yönetim paneli */
.profile-market-toolbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.market-price-panel-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  color: #ffe5a4;
  font-size: 10px;
  font-weight: 900;
  background: linear-gradient(120deg, rgba(255, 163, 45, .16), rgba(255, 49, 87, .12));
  border: 1px solid rgba(255, 190, 77, .32);
  border-radius: 9px;
}

.market-price-panel-button:hover {
  background: linear-gradient(120deg, rgba(255, 163, 45, .24), rgba(255, 49, 87, .18));
  border-color: rgba(255, 205, 102, .52);
}

.market-price-panel-button .ui-icon {
  width: 15px;
  height: 15px;
}

.market-price-admin-modal {
  width: min(980px, calc(100vw - 24px));
  max-height: min(900px, calc(100dvh - 24px));
}

.market-price-admin-intro {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  margin-bottom: 13px;
  color: #dffcf4;
  background: linear-gradient(125deg, rgba(0, 168, 132, .15), rgba(78, 67, 205, .09));
  border: 1px solid rgba(69, 224, 184, .23);
  border-radius: 14px;
}

.market-price-admin-intro > span {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  color: #55eac2;
  background: rgba(0, 168, 132, .13);
  border: 1px solid rgba(76, 229, 190, .22);
  border-radius: 12px;
}

.market-price-admin-intro strong,
.market-price-admin-intro p {
  display: block;
  margin: 0;
}

.market-price-admin-intro strong { font-size: 13px; }
.market-price-admin-intro p {
  margin-top: 4px;
  color: #91a6af;
  font-size: 10px;
  line-height: 1.45;
}

.market-price-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.market-price-group {
  min-width: 0;
  padding: 10px;
  background: #101c23;
  border: 1px solid #2b3d47;
  border-radius: 14px;
}

.market-price-group > header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 4px 10px;
}

.market-price-group > header > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  font-size: 17px;
  background: #192831;
  border: 1px solid #30454f;
  border-radius: 10px;
}

.market-price-group > header strong,
.market-price-group > header small {
  display: block;
}

.market-price-group > header strong { color: #eff8fa; font-size: 12px; }
.market-price-group > header small { margin-top: 2px; color: #778e99; font-size: 8px; }
.market-price-list { display: grid; gap: 6px; }

.market-price-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 34px minmax(0, 1fr) minmax(122px, .62fr);
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 7px 8px;
  background: #15232b;
  border: 1px solid #293c46;
  border-radius: 10px;
}

.market-price-row:focus-within {
  border-color: rgba(52, 221, 179, .58);
  box-shadow: 0 0 0 2px rgba(0, 168, 132, .1);
}

.authority-price-admin-modal {
  width: min(760px, calc(100vw - 24px));
}

.authority-price-group {
  padding: 12px;
}

.authority-price-row {
  border-color: color-mix(in srgb, var(--authority-color) 28%, #293c46);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--authority-color) 10%, transparent), transparent 42%),
    #15232b;
}

.authority-price-row:focus-within {
  border-color: color-mix(in srgb, var(--authority-color) 65%, white);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--authority-color) 13%, transparent);
}

.authority-price-row .market-price-product-icon {
  color: color-mix(in srgb, var(--authority-color) 78%, white);
  border-color: color-mix(in srgb, var(--authority-color) 30%, #2c414b);
}

.market-price-product-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  font-size: 17px;
  background: #0d181e;
  border: 1px solid #2c414b;
  border-radius: 9px;
}

.market-price-product-copy {
  min-width: 0;
}

.market-price-product-copy strong,
.market-price-product-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-price-product-copy strong { color: #e8f2f5; font-size: 10px; }
.market-price-product-copy small { margin-top: 3px; color: #758b96; font-size: 7px; }

.market-price-input-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
}

.market-price-input-wrap input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 48px 0 10px;
  color: #ffe39b;
  font: 900 12px/1 inherit;
  background: #0b171d;
  border: 1px solid #344b56;
  border-radius: 9px;
  outline: 0;
}

.market-price-input-wrap input:focus { border-color: #30d5ad; }
.market-price-input-wrap em {
  position: absolute;
  right: 9px;
  color: #758d97;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  pointer-events: none;
}

.market-price-row.locked {
  opacity: .65;
}

.market-price-input-wrap > b {
  width: 100%;
  padding: 9px;
  color: #ffb7c4;
  font-size: 9px;
  text-align: center;
  background: rgba(255, 49, 87, .08);
  border: 1px solid rgba(255, 91, 121, .2);
  border-radius: 9px;
}

@media (max-width: 680px) {
  .profile-market-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .profile-market-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .profile-market-toolbar-actions > button {
    width: 100%;
    min-height: 42px;
  }

  .market-price-admin-modal {
    width: calc(100vw - 8px);
    max-height: calc(100dvh - 8px);
  }

  .market-price-admin-modal .modal-body {
    padding: 12px;
  }

  .market-price-admin-grid {
    grid-template-columns: 1fr;
  }

  .market-price-group {
    padding: 8px;
  }

  .market-price-row {
    grid-template-columns: 38px minmax(0, 1fr);
    min-height: 92px;
    padding: 9px;
  }

  .market-price-product-icon {
    width: 38px;
    height: 38px;
    font-size: 19px;
  }

  .market-price-product-copy strong { font-size: 12px; }
  .market-price-product-copy small { font-size: 8px; }

  .market-price-input-wrap {
    grid-column: 1 / -1;
  }

  .market-price-input-wrap input {
    height: 44px;
    padding-right: 58px;
    font-size: 16px;
  }

  .market-price-input-wrap em {
    right: 12px;
    font-size: 8px;
  }

  .market-price-admin-modal .modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .market-price-admin-modal .market-footer-note {
    grid-column: 1 / -1;
  }

  .market-price-admin-modal .modal-footer button {
    min-height: 44px;
  }
}

/* Final readability pass: wider member panel and larger chat type */
@media (min-width: 1101px) {
  .conversation-body {
    grid-template-columns: minmax(0, 1fr) clamp(332px, 22vw, 360px);
  }

  .status-panel-title {
    height: 58px;
    flex-basis: 58px;
    padding-inline: 17px;
  }

  .status-panel-title strong {
    font-size: 15px;
  }

  .status-room {
    min-height: 58px;
    gap: 10px;
    padding: 8px 12px 8px 16px;
  }

  .status-room strong {
    font-size: 12px;
  }

  .status-room small {
    font-size: 9px;
    line-height: 1.3;
  }

  .status-room em,
  .status-room i {
    min-width: 36px;
    width: 36px;
    height: 36px;
  }

  .member-search {
    height: 54px;
    flex-basis: 54px;
    margin: 10px 12px 5px;
    padding-inline: 13px;
  }

  .member-search input {
    font-size: 11px;
  }

  .member-list {
    padding-inline: 10px;
  }

  .member-group-label {
    margin: 13px 8px 8px;
    font-size: 9px;
  }

  .member-list .member-item {
    min-height: 72px;
    gap: 11px;
    padding: 9px 10px;
    margin-block: 4px;
  }

  .member-list .member-item .avatar-wrap {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .member-list .member-item .avatar {
    width: 54px;
    height: 54px;
    font-size: 17px;
  }

  .member-item strong {
    font-size: 12px;
    line-height: 1.25;
  }

  .member-item small {
    margin-top: 3px;
    font-size: 9px;
    line-height: 1.32;
  }

  .member-icons {
    width: 52px;
    gap: 5px;
  }

  .member-icons .ui-icon {
    width: 15px;
    height: 15px;
  }
}

.messages-scroll .message-row,
.messages-scroll .message-row.own {
  min-height: 40px;
  gap: 8px;
}

.messages-scroll .message-row .avatar {
  width: 35px;
  height: 35px;
  font-size: 12px;
}

.messages-scroll .message-author {
  font-size: 12px;
  line-height: 1.2;
}

.messages-scroll .message-bubble,
.messages-scroll .message-row.own .message-bubble {
  padding-right: 43px;
  font-size: 13px;
  font-weight: 610;
  line-height: 1.38;
}

.messages-scroll .reply-quote {
  padding: 4px 7px 5px;
  font-size: 10px;
  line-height: 1.34;
}

.messages-scroll .reply-quote strong {
  font-size: 10px;
}

.message-stamp .message-time {
  font-size: 8px;
}

.messages-scroll .message-row.dm-message .message-bubble,
.messages-scroll .message-row.dm-message.own .message-bubble,
.messages-scroll .message-row.dm-message.staff-message .message-bubble,
.messages-scroll .message-row.dm-message.staff-message.own .message-bubble {
  font-size: 14px;
}

@media (max-width: 680px) {
  .messages-scroll .message-row,
  .messages-scroll .message-row.own {
    min-height: 38px;
    gap: 6px;
  }

  .messages-scroll .message-row .avatar {
    width: 32px;
    height: 32px;
  }

  .messages-scroll .message-author {
    font-size: 11px;
  }

  .messages-scroll .message-bubble,
  .messages-scroll .message-row.own .message-bubble {
    padding-right: 39px;
    font-size: 12px;
    line-height: 1.36;
  }

  .messages-scroll .message-row.dm-message .message-bubble,
  .messages-scroll .message-row.dm-message.own .message-bubble {
    font-size: 13px;
  }
}

/* Final overrides: full settings scroll + responsive room camera stage. */
.voice-user-media > .avatar {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
}
.game-admin-panel {
  display: grid;
  height: calc(100% - 60px);
  min-height: 0;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.game-admin-list {
  min-height: 0;
  max-height: none;
  padding-bottom: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.voice-dock .voice-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.voice-dock.has-cameras:not(.collapsed) {
  min-width: min(360px, calc(100vw - 16px));
}

.voice-dock.has-cameras .voice-users {
  display: grid;
  align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 7px;
  padding: 9px;
}

.voice-dock.has-cameras .voice-user {
  display: grid;
  min-width: 0;
  min-height: 138px;
  align-content: start;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 6px;
  overflow: hidden;
}

.voice-dock.has-cameras .voice-user-media {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
}

.voice-dock.has-cameras .voice-user-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding-inline: 2px;
}

.voice-dock.has-cameras .voice-user-permissions {
  display: flex;
  width: 100%;
  margin: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.voice-dock.has-cameras .voice-user-permissions > button {
  flex: 1 1 66px;
}

.voice-dock.collapsed.has-cameras {
  width: 190px !important;
  min-width: 190px !important;
  max-width: 190px !important;
  height: 122px !important;
  min-height: 122px !important;
  max-height: 122px !important;
}

.voice-dock.collapsed.has-cameras .voice-dock-head {
  position: absolute;
  z-index: 5;
  top: 7px;
  left: 7px;
  display: flex !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  background: rgba(4, 18, 23, 0.78) !important;
  border: 1px solid rgba(70, 229, 191, 0.3) !important;
  border-radius: 11px !important;
}

.voice-dock.collapsed.has-cameras .voice-dock-head .signal-bars {
  display: flex !important;
  width: 20px !important;
  height: 20px !important;
}

@media (max-width: 680px) {
  .game-admin-panel {
    height: calc(100% - 54px);
  }

  .game-admin-list {
    max-height: none;
  }

  .voice-dock.has-cameras:not(.collapsed) {
    min-width: min(300px, calc(100vw - 16px)) !important;
  }

  .voice-dock.has-cameras .voice-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: none;
  }

  .voice-dock.collapsed.has-cameras {
    width: 168px !important;
    min-width: 168px !important;
    max-width: 168px !important;
    height: 108px !important;
    min-height: 108px !important;
    max-height: 108px !important;
  }
}

/* Son katman: izin düğmeleri kullanıcı kartını kaplamasın. */
.voice-dock .voice-user-permissions,
.voice-dock.has-cameras .voice-user-permissions {
  display: flex !important;
  width: auto !important;
  max-width: 146px !important;
  margin: 0 0 0 auto !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 4px !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button,
.voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
  width: auto !important;
  min-width: 58px !important;
  max-width: 70px !important;
  height: 25px !important;
  min-height: 25px !important;
  padding: 3px 6px !important;
  flex: 0 0 auto !important;
  font-size: 7px !important;
  line-height: 1 !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
}

@media (max-width: 680px) {
  .voice-dock .voice-user-permissions,
  .voice-dock.has-cameras .voice-user-permissions {
    max-width: 132px !important;
  }

  .voice-dock .voice-user-permissions > button.voice-permission-button,
  .voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
    min-width: 54px !important;
    max-width: 64px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding-inline: 4px !important;
    font-size: 6.5px !important;
  }
}

/* v2 kesin son katman: gerçek kamera yoksa büyük kamera kartı çizilmez. */
.voice-dock .voice-head-leave {
  color: #ff91a4;
  border-color: rgba(255, 91, 119, 0.28);
  background: rgba(255, 70, 101, 0.08);
}

.voice-dock.collapsed .voice-head-leave { display: none !important; }

.voice-dock:not(.has-cameras):not(.collapsed) .voice-users {
  display: flex !important;
  flex-direction: column !important;
  align-content: stretch !important;
  gap: 6px !important;
  padding: 8px !important;
}

.voice-dock:not(.has-cameras):not(.collapsed) .voice-user {
  display: grid !important;
  min-width: 0 !important;
  min-height: 52px !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: center !important;
  gap: 8px !important;
  padding: 6px 7px !important;
  overflow: hidden !important;
}

.voice-dock:not(.has-cameras) .voice-user-media {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  aspect-ratio: 1 !important;
  border-radius: 10px !important;
}

.voice-dock:not(.has-cameras) .voice-user-copy {
  display: grid !important;
  min-width: 0 !important;
  gap: 2px !important;
  overflow: hidden !important;
}

.voice-dock:not(.has-cameras) .voice-user-copy strong,
.voice-dock:not(.has-cameras) .voice-user-copy small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.voice-dock:not(.has-cameras) .voice-user-permissions {
  display: grid !important;
  width: auto !important;
  max-width: 110px !important;
  grid-template-columns: repeat(2, minmax(0, 52px)) !important;
  gap: 3px !important;
  margin: 0 !important;
}

.voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button {
  width: 52px !important;
  min-width: 0 !important;
  max-width: 52px !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  flex: 0 0 auto !important;
  font-size: 7px !important;
}

.voice-dock.has-cameras .voice-user-permissions {
  display: grid !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin: 0 !important;
}

.voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 24px !important;
  min-height: 24px !important;
  padding: 3px 4px !important;
  flex: 0 0 auto !important;
  font-size: 7px !important;
}

@media (max-width: 680px) {
  .voice-dock:not(.has-cameras):not(.collapsed) .voice-user {
    grid-template-columns: 36px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding-inline: 6px !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-media {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-permissions {
    max-width: 98px !important;
    grid-template-columns: repeat(2, minmax(0, 47px)) !important;
  }

  .voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button {
    width: 47px !important;
    max-width: 47px !important;
    font-size: 6.5px !important;
  }
}

/* Mobil ses paneli: yalnız yayın yapanlar kamera karesi, dinleyiciler kompakt satırdır. */
.voice-dock.has-cameras .voice-user:not(.is-camera-tile) {
  display: grid !important;
  min-height: 52px !important;
  grid-column: 1 / -1 !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  align-content: center !important;
  gap: 7px !important;
  padding: 6px 7px !important;
}

.voice-dock.has-cameras .voice-user:not(.is-camera-tile) .voice-user-media {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  aspect-ratio: 1 !important;
}

.voice-dock.has-cameras .voice-user:not(.is-camera-tile) .voice-user-copy {
  min-width: 0 !important;
  overflow: hidden !important;
}

.voice-dock.collapsed,
.voice-dock.collapsed.has-cameras,
.radio-mini-player.collapsed,
.radio-mini-toggle {
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 680px) {
  .voice-dock.has-cameras:not(.collapsed) {
    width: min(326px, calc(100vw - 16px)) !important;
    min-width: min(286px, calc(100vw - 16px)) !important;
    height: min(500px, calc(100dvh - 92px)) !important;
    min-height: 280px !important;
  }

  .voice-dock.has-cameras .voice-users {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .voice-dock.has-cameras .voice-user.is-camera-tile {
    min-height: 118px !important;
    padding: 5px !important;
  }

  .voice-dock.has-cameras .voice-user:not(.is-camera-tile) {
    min-height: 48px !important;
    grid-template-columns: 35px minmax(0, 1fr) auto !important;
    gap: 6px !important;
    padding: 5px 6px !important;
  }

  .voice-dock.has-cameras .voice-user:not(.is-camera-tile) .voice-user-media {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
  }

  .voice-camera-toolbar > span small {
    display: none !important;
  }
}

/* Mobil boyutlandırma ve yetkili kontrolleri. */
.voice-dock:not(.collapsed) {
  width: var(--voice-dock-width) !important;
  height: var(--voice-dock-height) !important;
}

.voice-dock .voice-permission-button.kick {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: none !important;
  color: #ff94a5 !important;
  border-color: rgba(255, 76, 106, 0.34) !important;
  background: rgba(255, 76, 106, 0.1) !important;
}

.voice-dock .voice-resize-handle {
  z-index: 20 !important;
  width: 42px !important;
  height: 42px !important;
  touch-action: none !important;
  pointer-events: auto !important;
}

.voice-dock.resizing,
.voice-dock.resizing * {
  user-select: none !important;
}

.voice-dock.resizing .voice-users,
.voice-dock.resizing video {
  pointer-events: none !important;
}

@media (max-width: 680px) {
  .voice-dock.has-cameras:not(.collapsed),
  .voice-dock:not(.collapsed) {
    min-width: min(260px, calc(100vw - 16px)) !important;
    min-height: 220px !important;
    max-width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 78px) !important;
  }

  .voice-dock .voice-resize-handle {
    right: 0 !important;
    bottom: 0 !important;
    width: 56px !important;
    height: 56px !important;
  }

  .voice-dock .voice-resize-handle::after {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 13px;
    height: 13px;
    content: "";
    border-right: 2px solid #43d9b4;
    border-bottom: 2px solid #43d9b4;
    border-radius: 0 0 3px;
  }

  .voice-dock.has-cameras .voice-user-permissions,
  .voice-dock:not(.has-cameras) .voice-user-permissions {
    max-width: 102px !important;
  }

  .voice-dock:not(.collapsed) .voice-actions {
    position: absolute !important;
    z-index: 15 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    background: rgba(10, 24, 30, 0.98) !important;
    border-top: 1px solid rgba(71, 108, 119, 0.42) !important;
    backdrop-filter: blur(14px);
  }

  .voice-dock:not(.collapsed) .voice-users {
    padding-bottom: 64px !important;
  }
}

/* Son kamera yerleşimi: genişletmede kartlar akışta kalır ve çakışmaz. */
.voice-dock.has-cameras .voice-users {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 8px !important;
  overflow: auto !important;
}

.voice-dock.has-cameras .voice-user {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.voice-dock.has-cameras .voice-users.camera-focus-mode .voice-user.is-focused {
  min-height: clamp(220px, 48vh, 480px) !important;
  grid-column: 1 / -1 !important;
}

.voice-dock.has-cameras .voice-users.camera-focus-mode .voice-user:not(.is-focused) {
  min-height: 78px !important;
}

@media (max-width: 680px) {
  .voice-dock.has-cameras .voice-users {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .voice-dock.has-cameras .voice-users.camera-focus-mode .voice-user.is-focused {
    min-height: min(52vh, 390px) !important;
  }
}

/* Final screen-share overrides (kept last because this stylesheet contains
   multiple responsive generations). */
#call-screen.active,
#voice-screen.active {
  color: #061914 !important;
  background: linear-gradient(135deg, #35e2bb, #00b58c) !important;
  border-color: #2bdcaf !important;
}

.local-video.screen-preview {
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  background: #02070a !important;
  transform: none !important;
}

.call-overlay.remote-screen-sharing .remote-video-wrap > video,
.call-overlay .screen-share-video,
.voice-user.is-screen-share video,
.voice-camera-pip.is-screen-share video {
  object-fit: contain !important;
  background: #020609 !important;
}

.voice-dock .voice-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.voice-dock.has-cameras .voice-user.is-screen-share {
  grid-column: 1 / -1 !important;
  min-height: clamp(190px, 34vh, 440px) !important;
  background: #070d12 !important;
  border-color: rgba(43, 220, 175, 0.48) !important;
}

@media (max-width: 680px) {
  .voice-dock .voice-actions {
    position: sticky !important;
    bottom: 0;
    z-index: 8;
    gap: 5px !important;
    padding: 7px !important;
    background: rgba(12, 21, 27, 0.97) !important;
  }

  .voice-dock .voice-actions button {
    min-width: 0 !important;
    min-height: 45px !important;
    padding: 5px 2px !important;
  }

  .voice-dock .voice-actions button span {
    max-width: 100%;
    overflow: hidden;
    font-size: 6.5px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .voice-dock.has-cameras .voice-user.is-screen-share {
    min-height: min(42vh, 330px) !important;
  }
}

/* Keep independent screen/camera composition after every legacy override. */
.remote-video-wrap > #remote-screen-video {
  z-index: 2 !important;
  object-fit: contain !important;
  background: #020609 !important;
}
.remote-video-wrap > #remote-video.call-camera-pip {
  z-index: 3 !important;
  inset: auto 22px 150px auto !important;
  width: min(250px, 24vw) !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
  object-fit: cover !important;
  border: 2px solid rgba(43, 220, 175, 0.82);
  border-radius: 16px;
}
.voice-user-media > video[data-voice-screen],
.voice-user-media > video[data-voice-camera] { display: none !important; }
.voice-user.has-live-camera:not(.has-live-screen) .voice-user-media > video[data-voice-camera],
.voice-user.has-live-screen .voice-user-media > video[data-voice-screen] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.voice-user.has-live-screen .voice-user-media > video[data-voice-screen] {
  z-index: 2 !important;
  object-fit: contain !important;
  background: #020609 !important;
}
.voice-user.has-live-screen.has-live-camera .voice-user-media > video[data-voice-camera] {
  z-index: 4 !important;
  inset: auto 8px 8px auto !important;
  display: block !important;
  width: clamp(76px, 28%, 150px) !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover !important;
  border: 2px solid #2bdcaf;
  border-radius: 10px;
  cursor: zoom-in;
}
.voice-user.has-live-screen.has-live-camera.prefer-camera .voice-user-media > video[data-voice-camera] {
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: cover !important;
  border: 0;
  border-radius: inherit;
}
.voice-user.has-live-screen.has-live-camera.prefer-camera .voice-user-media > video[data-voice-screen] {
  z-index: 4 !important;
  inset: auto 8px 8px auto !important;
  width: clamp(92px, 32%, 190px) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: contain !important;
  border: 2px solid #2bdcaf;
  border-radius: 10px;
  cursor: zoom-in;
}
.voice-user.has-live-screen .voice-screen-badge { display: inline-flex !important; }

/* Screen-share quality picker: kept above the full-screen call overlay so
   one-to-one calls and room voice use the same pre-flight controls. */
.modal-root:has(.screen-share-settings-modal) {
  z-index: 2200;
}

.screen-share-settings-modal {
  width: min(780px, 100%);
}

.screen-share-settings {
  display: grid;
  gap: 16px;
}

.screen-share-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.screen-share-profile {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 86px;
  align-items: center;
  gap: 10px;
  padding: 13px;
  cursor: pointer;
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.screen-share-profile:hover {
  border-color: rgba(var(--accent-rgb), 0.54);
  transform: translateY(-1px);
}

.screen-share-profile:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.84);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.18);
}

.screen-share-profile input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.screen-share-profile > span {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.screen-share-profile b {
  color: var(--text);
  font-size: 13px;
}

.screen-share-profile small,
.screen-share-bitrate > small,
.screen-share-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.screen-share-profile > i {
  display: none;
  width: 23px;
  height: 23px;
  margin-left: auto;
  flex: 0 0 auto;
  place-items: center;
  color: #07130f;
  background: var(--accent);
  border-radius: 50%;
}

.screen-share-profile > i .ui-icon {
  width: 13px;
  height: 13px;
}

.screen-share-profile:has(input:checked) > i {
  display: grid;
}

.screen-share-bitrate {
  display: grid;
  gap: 7px;
}

.screen-share-bitrate select {
  width: 100%;
}

.screen-share-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.09);
  border: 1px solid rgba(var(--accent-rgb), 0.24);
  border-radius: 13px;
}

.screen-share-summary > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  background: rgba(var(--accent-rgb), 0.13);
  border-radius: 10px;
}

.screen-share-summary > span .ui-icon {
  width: 19px;
  height: 19px;
}

.screen-share-summary > div {
  display: grid;
  gap: 3px;
}

.screen-share-summary small {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.screen-share-summary strong {
  color: var(--text);
  font-size: 12px;
}

.screen-share-note {
  margin: -4px 0 0;
}

.screen-share-settings.is-basic-screen-share .screen-share-profile-grid {
  grid-template-columns: minmax(0, 1fr);
}

.screen-share-role-lock {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  color: #f7d7e8;
  background: linear-gradient(135deg, rgba(244, 114, 182, .13), rgba(124, 92, 255, .08));
  border: 1px solid rgba(244, 114, 182, .34);
  border-radius: 12px;
}

.screen-share-role-lock > .ui-icon {
  width: 20px;
  height: 20px;
  margin: auto;
  color: #f472b6;
}

.screen-share-role-lock > div { display: grid; gap: 3px; }
.screen-share-role-lock strong { color: #fff1f8; font-size: 11px; }
.screen-share-role-lock small { color: #a994a0; font-size: 9px; line-height: 1.45; }

@media (max-width: 720px) {
  .screen-share-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .screen-share-profile {
    min-height: 76px;
    padding: 11px;
  }
}

@media (max-width: 430px) {
  .screen-share-profile-grid {
    grid-template-columns: 1fr;
  }
}

.voice-user.has-live-screen .voice-user-media > video[data-voice-screen] {
  transform: translate(
      var(--voice-screen-pan-x, 0px),
      var(--voice-screen-pan-y, 0px)
    ) scale(var(--voice-screen-zoom, 1));
  transform-origin: center;
  transition: transform 180ms ease;
  will-change: transform;
}

.voice-user.has-live-screen.is-focused .voice-user-media > video[data-voice-screen] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.voice-user.has-live-screen.is-focused.is-screen-panning .voice-user-media > video[data-voice-screen] {
  cursor: grabbing;
  transition: none;
}

.voice-screen-zoom {
  position: absolute;
  z-index: 9;
  right: 10px;
  bottom: 10px;
  display: none;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 5px 7px;
  color: #eefbf7;
  background: rgba(5, 10, 14, 0.88);
  border: 1px solid rgba(80, 225, 187, 0.32);
  border-radius: 11px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(10px);
}

.voice-user.has-live-screen.is-focused .voice-screen-zoom {
  display: flex;
}

.voice-screen-zoom button {
  width: 26px;
  min-width: 26px;
  height: 26px;
  padding: 0;
  color: #e8fff8;
  background: #111d24;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  font-size: 17px;
  line-height: 1;
}

.voice-screen-zoom input {
  width: clamp(72px, 11vw, 130px);
  accent-color: #31dab0;
}

.voice-screen-zoom-value {
  min-width: 36px;
  color: #9fb7b0;
  font-size: 9px;
  font-weight: 800;
  text-align: right;
}

@media (max-width: 680px) {
  .voice-screen-zoom {
    right: 7px;
    bottom: 7px;
  }

  .voice-screen-zoom input {
    width: 82px;
  }
}

.call-overlay.prefer-remote-camera.remote-camera-and-screen .remote-video-wrap > #remote-video {
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto;
  object-fit: contain !important;
  border: 0;
  border-radius: 0;
}
.call-overlay.prefer-remote-camera.remote-camera-and-screen .remote-video-wrap > #remote-screen-video {
  z-index: 3 !important;
  inset: auto 22px 150px auto !important;
  width: min(300px, 28vw) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(43, 220, 175, 0.82);
  border-radius: 16px;
}

.message-media.video-media {
  position: relative;
  width: min(430px, 100%);
  min-width: min(280px, 76vw);
  background: #03090c;
}
.message-media.video-media video {
  display: block;
  width: 100%;
  max-height: 420px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: radial-gradient(circle at 50% 42%, #15262d, #03090c 68%);
}
@media (max-width: 680px) {
  .remote-video-wrap > #remote-video.call-camera-pip {
    right: 10px !important;
    bottom: 142px !important;
    width: 112px !important;
  }
  .voice-user.has-live-screen.has-live-camera .voice-user-media > video[data-voice-camera] {
    right: 6px !important;
    bottom: 6px !important;
    width: 30% !important;
    min-width: 70px;
  }
  .voice-user.has-live-screen.has-live-camera.prefer-camera .voice-user-media > video[data-voice-screen] {
    right: 6px !important;
    bottom: 6px !important;
    width: 38% !important;
    min-width: 92px;
  }
  .call-overlay.prefer-remote-camera.remote-camera-and-screen .remote-video-wrap > #remote-screen-video {
    right: 10px !important;
    bottom: 142px !important;
    width: 132px !important;
  }
  .message-media.video-media {
    min-width: min(250px, calc(100vw - 72px));
  }
}

/* Wider desktop voice stage: the bottom-right handle can now grow toward the right. */
@media (min-width: 681px) {
  .voice-dock:not(.collapsed) {
    max-width: calc(100vw - 16px) !important;
  }

  .voice-dock.has-cameras .voice-users {
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)) !important;
  }
}

/* The member row keeps profile and quick-message actions separate and clickable. */
.member-item {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.member-profile-trigger {
  display: grid;
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 9px;
  padding: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
}

.member-profile-trigger .avatar-wrap {
  width: 46px;
  height: 46px;
}

.member-item > .member-icons {
  display: flex;
  width: auto;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.member-item > .member-icons button,
.member-item > .member-icons i {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  padding: 0;
  color: #7fe8d0;
  background: transparent;
  border: 0;
  border-radius: 8px;
}

.member-item > .member-icons button:hover {
  color: #eafff9;
  background: rgba(43, 220, 175, 0.12);
}

.member-item > .member-icons .ui-icon {
  width: 15px;
  height: 15px;
}

/* Desktop quick DM window; the regular Messages page remains available. */
.floating-dm {
  position: fixed;
  z-index: 155;
  right: 248px;
  bottom: 76px;
  display: grid;
  width: min(400px, calc(100vw - 32px));
  height: min(540px, calc(100dvh - 108px));
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  min-width: 320px;
  min-height: 280px;
  max-width: calc(100vw - 16px);
  max-height: calc(100dvh - 16px);
  resize: both;
  background: rgba(12, 25, 32, 0.985);
  border: 1px solid rgba(82, 117, 129, 0.58);
  border-radius: 17px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(43, 220, 175, 0.05);
  backdrop-filter: blur(18px);
}

.floating-dm.expanded {
  width: min(720px, calc(100vw - 32px)) !important;
  height: min(760px, calc(100dvh - 32px)) !important;
}

.floating-dm.minimized {
  min-width: 280px;
  min-height: 64px;
  height: 64px;
  grid-template-rows: 1fr;
  resize: none;
}

.floating-dm.minimized .floating-dm-messages,
.floating-dm.minimized .floating-dm-composer,
.floating-dm.minimized .floating-dm-attach-menu {
  display: none !important;
}

.floating-dm.minimized [data-floating-dm-action="minimize"] .ui-icon {
  transform: rotate(180deg);
}

.floating-dm-head {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px 8px 11px;
  background: linear-gradient(135deg, rgba(29, 45, 55, 0.98), rgba(19, 32, 41, 0.98));
  border-bottom: 1px solid rgba(68, 96, 107, 0.46);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.floating-dm.dragging .floating-dm-head { cursor: grabbing; }
.floating-dm-head nav { cursor: default; }

.floating-dm-user {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: #edf7f8;
  text-align: left;
  background: transparent;
  border: 0;
}

.floating-dm-user > span:last-child {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.floating-dm-user strong,
.floating-dm-user small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.floating-dm-user strong { font-size: 12px; }
.floating-dm-user small { color: #8ba0aa; font-size: 8px; }

.floating-dm-head nav {
  display: flex;
  flex: 0 0 auto;
  gap: 4px;
}

.floating-dm-head nav button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  color: #b8cad0;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.floating-dm-head nav button:hover {
  color: #eafff9;
  background: rgba(43, 220, 175, 0.11);
  border-color: rgba(43, 220, 175, 0.28);
}

.floating-dm-messages {
  min-height: 0;
  padding: 13px 11px;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgba(4, 15, 20, 0.76), rgba(4, 15, 20, 0.76)),
    url("/assets/chat-doodle.svg"),
    #081319;
  background-size: 390px auto;
}

.floating-dm-messages .date-divider {
  margin: 9px auto;
  font-size: 7px;
}

.floating-dm-messages .message-row,
.floating-dm-messages .message-row.own {
  display: flex;
  min-height: 0;
  margin: 5px 0;
  padding: 0;
}

.floating-dm-messages .message-row.own { justify-content: flex-end; }
.floating-dm-messages .message-row > button[data-profile-id],
.floating-dm-messages .message-meta,
.floating-dm-messages .message-actions,
.floating-dm-messages .rank-chip,
.floating-dm-messages .reactions { display: none !important; }

.floating-dm-messages .message-content {
  width: auto;
  max-width: 84%;
}

.floating-dm-messages .message-card,
.floating-dm-messages .message-row.own .message-card {
  position: relative;
  min-width: 62px;
  padding: 7px 9px 18px;
  background: #1c2a33;
  border: 1px solid rgba(91, 118, 130, 0.34);
  border-radius: 11px 11px 11px 3px;
}

.floating-dm-messages .message-row.own .message-card {
  background: linear-gradient(145deg, #087b69, #0b665b);
  border-color: rgba(52, 224, 181, 0.34);
  border-radius: 11px 11px 3px 11px;
}

.floating-dm-messages .message-bubble {
  padding: 0;
  color: #f1f6f7;
  font-size: 11px;
  line-height: 1.36;
}

.floating-dm-messages .message-stamp {
  position: absolute;
  right: 7px;
  bottom: 4px;
  font-size: 7px;
}

.floating-dm-messages .message-media {
  min-width: 0;
  width: min(270px, 100%);
  margin-top: 5px;
}

.floating-dm-empty {
  display: grid;
  height: 100%;
  place-content: center;
  place-items: center;
  gap: 5px;
  color: #76909a;
  text-align: center;
}

.floating-dm-empty .ui-icon { width: 24px; height: 24px; color: #2bdcaf; }
.floating-dm-empty strong { color: #d9e7e9; font-size: 11px; }
.floating-dm-empty span { font-size: 8px; }

.floating-dm-composer {
  display: grid;
  min-height: 58px;
  align-items: end;
  grid-template-columns: 36px minmax(0, 1fr) 38px;
  gap: 6px;
  padding: 9px;
  background: #14222b;
  border-top: 1px solid rgba(74, 102, 113, 0.5);
}

.floating-dm-composer button {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  color: #b6c8ce;
  background: #1d2d37;
  border: 1px solid #344854;
  border-radius: 11px;
}

.floating-dm-composer .floating-dm-send {
  width: 38px;
  color: #f5fffc;
  background: linear-gradient(135deg, #2bdcaf, #08a887);
  border-color: #30dfb5;
  border-radius: 50%;
}

.floating-dm-composer textarea {
  width: 100%;
  min-height: 36px;
  max-height: 92px;
  padding: 9px 11px;
  resize: none;
  color: #eef7f8;
  font-size: 12px;
  line-height: 1.35;
  background: #21313d;
  border: 1px solid #3b4d59;
  border-radius: 11px;
  outline: 0;
}

.floating-dm-composer textarea:focus { border-color: rgba(43, 220, 175, 0.68); }

.floating-dm-attach-menu {
  position: absolute;
  z-index: 4;
  right: 9px;
  bottom: 66px;
  left: 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  background: rgba(19, 32, 40, 0.99);
  border: 1px solid #3a505b;
  border-radius: 13px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
}

.floating-dm-attach-menu button {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: #dce9eb;
  font-size: 8px;
  font-weight: 800;
  text-align: left;
  background: #1b2a33;
  border: 1px solid #30434d;
  border-radius: 9px;
}

.floating-dm-attach-menu button:hover { border-color: rgba(43, 220, 175, 0.48); }
.floating-dm-attach-menu .ui-icon { width: 16px; height: 16px; color: #2bdcaf; }

@media (max-width: 1100px) and (min-width: 681px) {
  .floating-dm { right: 16px; }
}

@media (max-width: 680px) {
  .floating-dm { display: none !important; }
  .member-profile-trigger { grid-template-columns: 42px minmax(0, 1fr); }
  .member-profile-trigger .avatar-wrap { width: 42px; height: 42px; }
}

/* Oda ses kilidi, limit ve sunucu susturma kontrolleri */
.voice-head-manage { color: #58e3bd !important; border-color: rgba(54, 213, 171, .32) !important; background: rgba(31, 148, 119, .13) !important; }
.voice-head-manage:hover { background: rgba(31, 188, 149, .24) !important; }
.voice-control-panel { display: grid; gap: 16px; }
.voice-control-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 12px; }
.voice-control-option { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; border: 1px solid #28424b; border-radius: 13px; background: #13242c; cursor: pointer; }
.voice-control-option > span { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 3px 9px; }
.voice-control-option .ui-icon { grid-row: 1 / 3; color: #4ce0ba; }
.voice-control-option b { color: #f1f7f8; font-size: 12px; }
.voice-control-option small { color: #8299a3; font-size: 9px; line-height: 1.4; }
.voice-control-option input, .voice-pass-user input { position: absolute; opacity: 0; pointer-events: none; }
.voice-control-option > i { position: relative; flex: 0 0 43px; width: 43px; height: 24px; border: 1px solid #3b515b; border-radius: 999px; background: #263941; transition: .2s ease; }
.voice-control-option > i::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; content: ""; border-radius: 50%; background: #8799a1; transition: .2s ease; }
.voice-control-option input:checked + i { border-color: #2bd2a8; background: rgba(36, 204, 161, .25); }
.voice-control-option input:checked + i::after { left: 22px; background: #51e5bf; }
.voice-pass-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; padding-top: 4px; }
.voice-pass-heading div { display: grid; gap: 3px; }
.voice-pass-heading span { color: #41d9b2; font-size: 8px; font-weight: 900; letter-spacing: .8px; }
.voice-pass-heading strong { color: #eff6f7; font-size: 13px; }
.voice-pass-heading em { padding: 5px 9px; color: #8ea4ad; font-size: 9px; font-style: normal; border-radius: 999px; background: #182b33; }
.voice-pass-search { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; color: #7f969f; border: 1px solid #2a444e; border-radius: 12px; background: #102129; transition: border-color .18s ease, box-shadow .18s ease; }
.voice-pass-search:focus-within { color: #4ce0ba; border-color: rgba(76, 224, 186, .72); box-shadow: 0 0 0 3px rgba(76, 224, 186, .08); }
.voice-pass-search .ui-icon { width: 17px; height: 17px; }
.voice-pass-search input { min-width: 0; height: 42px; padding: 0; color: #eef7f7; font: inherit; font-size: 11px; border: 0; outline: 0; background: transparent; }
.voice-pass-search input::placeholder { color: #728991; }
.voice-pass-search > span { padding-left: 9px; color: #8ba1aa; font-size: 9px; font-weight: 800; white-space: nowrap; border-left: 1px solid #28414a; }
.voice-pass-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: min(42vh, 360px); padding: 2px; overflow: auto; }
.voice-pass-user { display: grid; grid-template-columns: auto minmax(0, 1fr) 28px; align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px; border: 1px solid #263e48; border-radius: 12px; background: #13232b; cursor: pointer; }
.voice-pass-user.is-filtered { display: none; }
.voice-pass-user > span { display: grid; min-width: 0; gap: 2px; }
.voice-pass-user strong, .voice-pass-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-pass-user strong { color: #eaf2f4; font-size: 11px; }
.voice-pass-user small { color: #78909a; font-size: 8px; }
.voice-pass-user > i { display: grid; width: 25px; height: 25px; place-items: center; color: transparent; border: 1px solid #3b515b; border-radius: 8px; background: #20333c; }
.voice-pass-user input:checked + i { color: #071a15; border-color: #4ce0ba; background: #4ce0ba; }
.voice-pass-user input:focus-visible + i { outline: 2px solid #52dcb8; outline-offset: 2px; }
.voice-pass-search-empty { grid-column: 1 / -1; margin: 8px 0; padding: 18px; color: #8ba0a8; font-size: 10px; text-align: center; border: 1px dashed #2c454e; border-radius: 12px; }
.voice-control-note { display: flex; gap: 8px; padding: 10px 12px; color: #89a0a9; font-size: 9px; line-height: 1.5; border: 1px solid #24404a; border-radius: 11px; background: rgba(22, 47, 57, .7); }
.voice-control-note .ui-icon { flex: 0 0 16px; color: #42d8b1; }
.voice-user.server-muted, .voice-user.server-deafened { border-color: rgba(255, 82, 109, .64) !important; box-shadow: inset 0 0 0 1px rgba(255, 74, 104, .1); }
.voice-user.server-muted .voice-user-copy small, .voice-user.server-deafened .voice-user-copy small { color: #ff7088 !important; }
.voice-user.server-muted .voice-user-copy small::before { content: "🔇 "; }
.voice-user.server-deafened .voice-user-copy small::before { content: "🎧✕ "; }
.voice-permission-button.server-mute.active, .voice-permission-button.server-deafen.active, #voice-mic.server-blocked { color: #ffdbe1 !important; border-color: #d94a64 !important; background: rgba(160, 34, 59, .32) !important; }
.voice-dock.server-deafened .voice-dock-head { box-shadow: inset 3px 0 #f05270; }

@media (max-width: 680px) {
  .voice-control-grid, .voice-pass-list { grid-template-columns: 1fr; }
  .voice-control-option { min-height: 70px; padding: 11px 12px; }
  .voice-pass-list { max-height: 46vh; }
  .voice-control-modal .modal-footer { position: sticky; bottom: 0; }
  .voice-permission-button.server-mute, .voice-permission-button.server-deafen { min-width: 72px !important; }
}

/* Ses yönetimi v2: görünür oda kontrolleri ve yalnız SVG katılımcı işlemleri. */
.voice-room-admin-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 7px 8px;
  background: rgba(10, 27, 34, .94);
  border-bottom: 1px solid rgba(62, 103, 114, .42);
}

.voice-room-admin-bar.hidden { display: none !important; }
.voice-dock.collapsed .voice-room-admin-bar { display: none !important; }

.voice-room-admin-bar button {
  display: flex;
  min-width: 0;
  height: 34px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: #a9bec5;
  background: #142630;
  border: 1px solid #2d4651;
  border-radius: 9px;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.voice-room-admin-bar button:hover {
  color: #eafff9;
  background: #19323c;
  border-color: rgba(52, 221, 177, .46);
  transform: translateY(-1px);
}

.voice-room-admin-bar button.active {
  color: #ffdce3;
  background: rgba(151, 36, 58, .28);
  border-color: rgba(245, 80, 109, .68);
}

.voice-room-admin-bar button:disabled { opacity: .58; transform: none; }
.voice-room-admin-bar .ui-icon { flex: 0 0 14px; width: 14px; height: 14px; }
.voice-room-admin-bar span { min-width: 0; overflow: hidden; font-size: 8px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }

.voice-dock .voice-user-permissions,
.voice-dock:not(.has-cameras) .voice-user-permissions,
.voice-dock.has-cameras .voice-user-permissions,
.voice-dock.has-cameras .voice-user:not(.is-camera-tile) .voice-user-permissions {
  display: grid !important;
  width: auto !important;
  max-width: 98px !important;
  grid-template-columns: repeat(3, 30px) !important;
  align-items: center !important;
  justify-content: end !important;
  gap: 4px !important;
  margin: 0 0 0 auto !important;
}

.voice-dock .voice-user-permissions > button.voice-permission-button.icon-action,
.voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button.icon-action,
.voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button.icon-action {
  display: grid !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  place-items: center !important;
  padding: 0 !important;
  color: #91a8b0 !important;
  background: #182b34 !important;
  border: 1px solid #304954 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}

.voice-dock .voice-permission-button.icon-action .ui-icon {
  width: 14px !important;
  height: 14px !important;
  pointer-events: none;
}

.voice-dock .voice-permission-button.icon-action:hover {
  color: #e6fff8 !important;
  border-color: rgba(54, 220, 178, .55) !important;
  background: rgba(31, 113, 96, .32) !important;
}

.voice-dock .voice-permission-button.icon-action.mic-permission.active,
.voice-dock .voice-permission-button.icon-action.camera-permission.active,
.voice-dock .voice-permission-button.icon-action.requested {
  color: #071b15 !important;
  background: #42dcb5 !important;
  border-color: #63ebc7 !important;
  box-shadow: 0 0 12px rgba(52, 220, 178, .2) !important;
}

.voice-dock .voice-permission-button.icon-action.server-mute,
.voice-dock .voice-permission-button.icon-action.server-deafen {
  color: #e99cab !important;
  border-color: rgba(209, 67, 92, .38) !important;
}

.voice-dock .voice-permission-button.icon-action.server-mute.active,
.voice-dock .voice-permission-button.icon-action.server-deafen.active {
  color: #fff0f3 !important;
  background: #a82f49 !important;
  border-color: #f05b76 !important;
  box-shadow: 0 0 13px rgba(235, 68, 98, .22) !important;
}

.voice-dock .voice-permission-button.icon-action.kick {
  color: #ff9caf !important;
  border-color: rgba(255, 91, 121, .34) !important;
  background: rgba(94, 26, 40, .28) !important;
}

/* Ses izinleri genel yatay matristen ayrı, mobilde okunabilir bölüm. */
.voice-capability-panel {
  padding: 14px;
  margin: 12px 0;
  background: linear-gradient(145deg, rgba(14, 36, 43, .98), rgba(10, 27, 34, .98));
  border: 1px solid rgba(47, 205, 165, .32);
  border-radius: 15px;
}

.voice-capability-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.voice-capability-panel > header span { color: #45ddb7; font-size: 9px; font-weight: 900; letter-spacing: .75px; }
.voice-capability-panel > header h3 { margin: 3px 0; color: #f3f8f9; font-size: 17px; }
.voice-capability-panel > header p { max-width: 720px; margin: 0; color: #8da2aa; font-size: 10px; line-height: 1.5; }
.voice-capability-list { display: grid; gap: 7px; }

.voice-capability-role {
  display: grid;
  grid-template-columns: minmax(160px, .55fr) minmax(0, 1.45fr);
  align-items: stretch;
  overflow: hidden;
  background: #12242c;
  border: 1px solid #29424b;
  border-radius: 11px;
}

.voice-capability-role > strong {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: var(--cap-role-color);
  border-right: 1px solid #29424b;
}

.voice-capability-role > strong > i { font-size: 18px; font-style: normal; }
.voice-capability-role > strong > span { display: grid; gap: 2px; font-size: 11px; }
.voice-capability-role > strong small { color: #718891; font-size: 8px; font-weight: 700; }
.voice-capability-role > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.voice-capability-role label {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 40px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-right: 1px solid rgba(44, 68, 78, .72);
  cursor: pointer;
}

.voice-capability-role label:last-child { border-right: 0; }
.voice-capability-role label > span { display: grid; min-width: 0; gap: 2px; }
.voice-capability-role label b { color: #dce8ea; font-size: 9px; }
.voice-capability-role label small { overflow: hidden; color: #708891; font-size: 7px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.voice-capability-role input { position: absolute; opacity: 0; pointer-events: none; }
.voice-capability-role label > i { position: relative; width: 38px; height: 22px; border: 1px solid #3b515b; border-radius: 999px; background: #243740; }
.voice-capability-role label > i::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; content: ""; background: #748891; border-radius: 50%; transition: .18s ease; }
.voice-capability-role input:checked + i { background: rgba(37, 202, 159, .22); border-color: #25ca9f; }
.voice-capability-role input:checked + i::after { left: 19px; background: #46e1b9; }

.capability-guide {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.capability-guide > section {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 10px;
  background: rgba(20, 39, 47, .82);
  border: 1px solid #29414a;
  border-radius: 11px;
}

.capability-guide > section > strong { color: #47dcb7; font-size: 8px; font-weight: 900; letter-spacing: .65px; text-transform: uppercase; }
.capability-guide article { display: grid; grid-template-columns: 15px minmax(0, 1fr); align-items: start; gap: 7px; padding-top: 5px; border-top: 1px solid rgba(52, 77, 87, .48); }
.capability-guide article .ui-icon { width: 14px; height: 14px; margin-top: 2px; color: #6f8992; }
.capability-guide article span { display: grid; gap: 2px; }
.capability-guide article b { color: #dfeaed; font-size: 9px; }
.capability-guide article small { color: #7d929b; font-size: 8px; line-height: 1.42; }

@media (max-width: 900px) {
  .voice-capability-role { grid-template-columns: 1fr; }
  .voice-capability-role > strong { border-right: 0; border-bottom: 1px solid #29424b; }
}

@media (max-width: 680px) {
  .voice-room-admin-bar { gap: 4px; padding: 6px; }
  .voice-room-admin-bar button { height: 32px; gap: 4px; padding-inline: 5px; }
  .voice-room-admin-bar span { font-size: 7px; }
  .voice-capability-panel { padding: 10px; }
  .voice-capability-panel > header { align-items: stretch; flex-direction: column; }
  .voice-capability-panel > header button { width: 100%; }
  .voice-capability-role > div { grid-template-columns: 1fr; }
  .voice-capability-role label { min-height: 50px; border-right: 0; border-bottom: 1px solid rgba(44, 68, 78, .72); }
  .voice-capability-role label:last-child { border-bottom: 0; }
  .voice-capability-role label small { white-space: normal; }
  .capability-guide { grid-template-columns: 1fr; }
  .voice-dock .voice-user-permissions,
  .voice-dock:not(.has-cameras) .voice-user-permissions,
  .voice-dock.has-cameras .voice-user-permissions { max-width: 90px !important; grid-template-columns: repeat(3, 28px) !important; gap: 3px !important; }
  .voice-dock .voice-user-permissions > button.voice-permission-button.icon-action,
  .voice-dock:not(.has-cameras) .voice-user-permissions > button.voice-permission-button.icon-action,
  .voice-dock.has-cameras .voice-user-permissions > button.voice-permission-button.icon-action { width: 28px !important; min-width: 28px !important; max-width: 28px !important; height: 28px !important; min-height: 28px !important; }
}

.voice-dock .voice-user-permissions,
.voice-dock:not(.has-cameras) .voice-user-permissions,
.voice-dock.has-cameras .voice-user-permissions {
  width: max-content !important;
  max-width: 104px !important;
  padding: 4px !important;
  gap: 3px !important;
  background: rgba(8, 22, 28, .72) !important;
  border: 1px solid rgba(68, 103, 115, .42) !important;
  border-radius: 12px !important;
}
.voice-dock .voice-user-permissions > button.voice-permission-button.icon-action {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
}
.voice-dock .voice-permission-button.icon-action.timeout { color: #f4c86a !important; border-color: rgba(225, 174, 64, .36) !important; }

/* Kasa v2 son öncelik katmanı. */
.game-hub.game-view-caseOpening:not(.is-collapsed) {
  height: min(540px, calc(100dvh - 54px));
  min-height: 390px;
}

.game-tile:hover,
.game-tile:hover .game-tile-art,
.case-picker:hover,
.case-picker.selected {
  transform: none;
}

.game-view-caseOpening .game-active-art img,
.game-tile-caseOpening .game-tile-art img,
.game-tile-caseOpening:hover .game-tile-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(.88);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .34));
}

@media (max-width: 900px) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: min(520px, calc(100dvh - 16px));
    min-height: 340px;
  }
}

@media (max-width: 680px) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: calc(100dvh - 8px);
    min-height: 310px;
  }
}

@media (max-width: 480px) and (orientation: portrait) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: calc(100dvh - 70px);
    min-height: 480px;
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .game-hub.game-view-caseOpening:not(.is-collapsed) {
    height: calc(100dvh - 8px);
    min-height: 0;
  }

  .game-view-caseOpening .game-active {
    padding: 5px;
  }

  .game-view-caseOpening .game-active-top {
    min-height: 31px;
    margin-bottom: 3px;
  }

  .game-view-caseOpening .case-opening-stage {
    grid-template-rows: 38px minmax(105px, 1fr) 40px;
    gap: 4px;
  }

  .game-view-caseOpening .case-picker {
    height: 38px;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 3px;
    padding: 2px 4px;
  }

  .game-view-caseOpening .case-picker img {
    width: 34px;
    height: 29px;
  }

  .game-view-caseOpening .case-opening-main > aside {
    padding: 7px 9px;
  }

  .game-view-caseOpening .case-opening-main > aside p {
    display: none;
  }

  .game-view-caseOpening .case-hero-art img {
    height: 100px !important;
  }

  .game-view-caseOpening .case-content {
    padding: 2px 4px;
  }

  .game-view-caseOpening .case-content > header {
    display: none;
  }

  .game-view-caseOpening .case-content-grid {
    display: flex;
    height: 36px;
    gap: 2px;
    overflow: hidden;
  }

  .game-view-caseOpening .case-content-grid .case-reward-card {
    min-width: 0;
    min-height: 36px;
    height: 36px;
    flex: 1 1 0;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px;
    padding: 2px;
  }

  .game-view-caseOpening .case-content-grid .case-reward-visual {
    width: 22px;
    height: 22px;
  }

  .game-view-caseOpening .case-content-grid .case-reward-card small,
  .game-view-caseOpening .case-content-grid .case-reward-card em {
    display: none;
  }

  .game-view-caseOpening .case-content-grid .case-reward-card strong {
    font-size: 5px;
  }
}

/* Oyun Merkezi ayarları bağımsız, geniş yönetim penceresi. */
body.game-settings-open {
  overflow: hidden;
}

.game-settings-layer {
  position: fixed;
  z-index: 1750;
  inset: 0;
  display: grid;
  padding: clamp(12px, 2.5vw, 34px);
  place-items: center;
  isolation: isolate;
}

.game-settings-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: default;
  background: rgba(2, 10, 15, 0.82);
  border: 0;
  backdrop-filter: blur(9px);
}

.game-settings-layer .game-admin-panel {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(1480px, 100%);
  height: min(880px, calc(100dvh - clamp(24px, 5vw, 68px)));
  min-height: 440px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: clamp(16px, 2vw, 28px);
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 0%, rgba(25, 161, 137, 0.14), transparent 31%),
    linear-gradient(155deg, #11232b, #08171e 72%);
  border: 1px solid rgba(89, 151, 153, 0.48);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.62), inset 0 1px rgba(255, 255, 255, 0.04);
}

.game-settings-layer .game-admin-panel > header {
  padding: 0 2px 18px;
}

.game-settings-layer .game-admin-panel > header h3 {
  margin-top: 7px;
  font-size: clamp(18px, 2vw, 25px);
}

.game-settings-layer .game-admin-panel > header p {
  margin-top: 5px;
  font-size: 10px;
}

.game-settings-layer .game-admin-panel > header button {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border-radius: 12px;
}

.game-settings-layer .game-admin-limit {
  margin-bottom: 14px;
  padding: 14px 16px;
}

.game-settings-layer .game-admin-limit strong,
.game-settings-layer .game-admin-game strong {
  font-size: 11px;
}

.game-settings-layer .game-admin-limit small,
.game-settings-layer .game-admin-game small,
.game-settings-layer .game-admin-panel > footer small {
  font-size: 9px;
}

.game-settings-layer .game-admin-list {
  max-height: none;
  gap: 9px;
  padding: 0 8px 18px 0;
}

.game-settings-layer .game-admin-row {
  min-height: 72px;
  gap: 13px;
  padding: 11px 13px;
}

.game-settings-layer .game-admin-row > img {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
}

.game-settings-layer .game-admin-game {
  width: min(260px, 25vw);
}

.game-settings-layer .game-admin-row label,
.game-settings-layer .game-admin-card-note {
  width: 155px;
  flex-basis: 155px;
}

.game-settings-layer .game-admin-input {
  height: 42px;
}

.game-settings-layer .game-admin-input input {
  font-size: 12px;
}

.game-settings-layer .game-admin-panel > footer {
  padding-top: 15px;
}

.game-settings-layer .game-admin-panel > footer button {
  min-height: 46px;
  padding-inline: 24px;
  font-size: 10px;
}

@media (max-width: 900px) {
  .game-settings-layer {
    padding: 8px;
  }

  .game-settings-layer .game-admin-panel {
    width: 100%;
    height: calc(100dvh - 16px);
    min-height: 0;
    padding: 14px;
    border-radius: 14px;
  }

  .game-settings-layer .game-admin-row {
    flex-wrap: wrap;
  }

  .game-settings-layer .game-admin-game {
    width: calc(100% - 68px);
  }
}

@media (max-width: 680px) {
  .game-settings-layer {
    padding: 0;
  }

  .game-settings-layer .game-admin-panel {
    height: 100dvh;
    padding: 12px 9px;
    border: 0;
    border-radius: 0;
  }

  .game-settings-layer .game-admin-panel > header {
    padding-bottom: 10px;
  }

  .game-settings-layer .game-admin-panel > header h3 {
    font-size: 16px;
  }

  .game-settings-layer .game-admin-panel > header p,
  .game-settings-layer .game-admin-panel > footer small {
    display: none;
  }

  .game-settings-layer .game-admin-limit {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
  }

  .game-settings-layer .game-admin-row label,
  .game-settings-layer .game-admin-card-note {
    width: calc(50% - 5px);
    flex: 1 1 calc(50% - 5px);
  }

  .game-settings-layer .game-admin-panel > footer button {
    width: 100%;
  }
}