/* ClutchHub v166 — Sohbet Tasarım 2 / Oyun İletişim Merkezi */
.chat-page {
  --chat-orange: #ff4b16;
  --chat-navy: #081a3a;
  --chat-line: #d9e4f2;
  --chat-soft: #f5f9fd;
}

.chat-page > .page-hero-chat {
  min-height: 122px !important;
  margin-bottom: 16px !important;
  padding: 24px 42px !important;
  overflow: hidden;
  border: 1px solid #d4dfed !important;
  border-radius: 0 !important;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 52%, rgba(244,249,254,.86) 100%),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(96,145,190,.08) 79px 80px),
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(96,145,190,.06) 43px 44px) !important;
  box-shadow: 0 10px 26px rgba(29,65,105,.08);
}

.chat-page > .page-hero-chat::before,
.chat-page > .page-hero-chat::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.chat-page > .page-hero-chat::before {
  inset: 8px;
  border: 1px solid rgba(116,153,191,.22);
  clip-path: polygon(0 0, 25% 0, 29% 36%, 67% 36%, 72% 0, 100% 0, 100% 100%, 78% 100%, 74% 66%, 30% 66%, 26% 100%, 0 100%);
}

.chat-page > .page-hero-chat::after {
  right: 34px;
  top: 20px;
  width: 220px;
  height: 80px;
  opacity: .52;
  background:
    radial-gradient(circle at 72% 50%, transparent 0 16px, rgba(255,75,22,.55) 17px 18px, transparent 19px),
    linear-gradient(135deg, transparent 45%, rgba(141,174,205,.38) 46% 47%, transparent 48%) 0 0 / 70px 40px;
}

.chat-page > .page-hero-chat .section-kicker {
  color: var(--chat-orange) !important;
  letter-spacing: .16em;
}

.chat-page > .page-hero-chat h1 {
  max-width: 850px;
  margin: 3px 0 4px !important;
  color: var(--chat-navy) !important;
  font-size: clamp(29px, 2.4vw, 42px) !important;
  line-height: 1.05;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: -.02em;
}

.chat-page > .page-hero-chat h1::after {
  display: none !important;
  content: none !important;
}

.chat-page > .page-hero-chat p {
  max-width: 760px;
  color: #53647c !important;
}

.chat-page .chat-live-state {
  right: 42px !important;
  bottom: 20px !important;
  z-index: 2;
  border: 1px solid #bde9d0;
  border-radius: 4px;
  background: #f2fff7;
  padding: 7px 12px;
  color: #098548 !important;
  font-weight: 800;
}

.chat-page > .chat-game-switcher {
  display: none !important;
}

.chat-page .community-chat-shell.chat-shell {
  position: relative;
  display: grid !important;
  grid-template-columns: 350px minmax(0, 1fr) 320px !important;
  min-height: 720px !important;
  max-height: 790px;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid #cedbea !important;
  border-radius: 0 !important;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  background: #fff;
  box-shadow: 0 16px 42px rgba(27,55,91,.11) !important;
}

.chat-page .community-chat-shell.chat-shell::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--chat-orange), var(--chat-orange)) 22px 0 / 64px 3px no-repeat,
    linear-gradient(90deg, #9eb5ce, #9eb5ce) calc(100% - 88px) 100% / 66px 2px no-repeat;
}

.chat-page .chat-channel-panel,
.chat-page .chat-members-panel {
  min-width: 0;
  padding: 18px 16px !important;
  background:
    linear-gradient(rgba(255,255,255,.96), rgba(248,251,255,.96)),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(123,157,191,.07) 41px 42px) !important;
}

.chat-page .chat-channel-panel {
  border-right: 1px solid var(--chat-line);
}

.chat-page .chat-panel-brand {
  min-height: 52px;
  margin: -3px -2px 12px !important;
  padding: 8px 7px 12px !important;
  border-bottom: 1px solid #dce6f2;
}

.chat-page .chat-panel-brand strong,
.chat-page .chat-members-heading strong {
  color: var(--chat-navy);
  font-size: 15px !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.chat-page .chat-panel-brand small {
  color: #19a45b !important;
  font-weight: 700;
}

.chat-page .chat-channel-search,
.chat-page .chat-message-search {
  border: 1px solid #d3dfed !important;
  border-radius: 6px !important;
  background: #fff !important;
  box-shadow: inset 3px 0 0 var(--chat-orange);
}

.chat-page .chat-channel-list {
  display: block !important;
  max-height: 626px !important;
  padding: 4px 3px 28px 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #b8c8da transparent;
}

.chat-page .chat-channel-group {
  display: grid !important;
  gap: 9px !important;
  margin: 0 0 17px !important;
}

.chat-page .chat-channel-group > span {
  margin: 5px 3px 1px;
  color: #75859a;
  font-size: 10px !important;
  font-weight: 900;
  letter-spacing: .16em;
}

.chat-page .chat-channel-group button {
  position: relative;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid #d7e2ef !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: var(--chat-navy) !important;
  box-shadow: 0 5px 14px rgba(35,68,108,.05);
}

.chat-page .chat-channel-group button:hover,
.chat-page .chat-channel-group button.active {
  border-color: #ff7a50 !important;
  box-shadow: inset 3px 0 0 var(--chat-orange), 0 8px 20px rgba(255,75,22,.12) !important;
  transform: translateY(-1px);
}

.chat-page .chat-channel-group:nth-of-type(2) button {
  min-height: 92px;
  align-items: flex-end !important;
  padding: 13px !important;
  border-color: rgba(190,205,221,.82) !important;
  background-position: center !important;
  background-size: cover !important;
}

.chat-page .chat-channel-group:nth-of-type(2) button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5,19,43,.95) 0%, rgba(5,19,43,.78) 58%, rgba(5,19,43,.22) 100%);
}

.chat-page .chat-channel-group:nth-of-type(2) button > * {
  position: relative;
  z-index: 1;
}

.chat-page .chat-channel-group:nth-of-type(2) button,
.chat-page .chat-channel-group:nth-of-type(2) button * {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.chat-page .chat-channel-group:nth-of-type(2) button b {
  background: #25bd70 !important;
}

.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(1) { background-image: url("/assets/games/valorant.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(2) { background-image: url("/assets/games/counter-strike-2.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(3) { background-image: url("/assets/games/league-of-legends.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(4) { background-image: url("/assets/games/pubg.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(5) { background-image: url("/assets/games/apex-legends.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(6) { background-image: url("/assets/games/rainbow-six-siege.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(7) { background-image: url("/assets/games/overwatch-2.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(8) { background-image: url("/assets/games/rocket-league.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(9) { background-image: url("/assets/games/warzone.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(10) { background-image: url("/assets/games/dota-2.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(11) { background-image: url("/assets/games/fortnite.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(12) { background-image: url("/assets/games/ea-sports-fc-26.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(13) { background-image: url("/assets/games/marvel-rivals.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(14) { background-image: url("/assets/games/delta-force.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(15) { background-image: url("/assets/games/dead-by-daylight.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(16) { background-image: url("/assets/games/rust.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(17) { background-image: url("/assets/games/battlefield-6.webp") !important; }
.chat-page .chat-channel-group:nth-of-type(2) button:nth-of-type(18) { background-image: url("/assets/games/diablo-iv.webp") !important; }

.chat-page .chat-room-game-icon {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px !important;
  background: rgba(4,15,34,.78);
  box-shadow: 0 5px 15px rgba(0,0,0,.24);
}

.chat-page .chat-room-game-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chat-page .chat-conversation {
  min-width: 0;
  border: 0 !important;
  background: #fff;
}

.chat-page .chat-conversation-header {
  min-height: 76px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--chat-line) !important;
  background:
    linear-gradient(90deg, #fff 0%, #f7faff 100%),
    repeating-linear-gradient(90deg, transparent 0 55px, rgba(115,153,191,.08) 56px 57px);
}

.chat-page .chat-conversation-header h2,
.chat-page .chat-conversation-header strong {
  color: var(--chat-navy) !important;
}

.chat-page .chat-header-members {
  border-radius: 5px !important;
  background: #fff6f1 !important;
  color: var(--chat-orange) !important;
}

.chat-page .chat-message-list {
  min-height: 518px !important;
  max-height: 555px !important;
  padding: 24px 22px !important;
  background:
    radial-gradient(circle at 50% 44%, rgba(226,238,248,.34), transparent 34%),
    linear-gradient(#fff,#fff);
}

.chat-page .chat-message {
  max-width: 96%;
  padding: 10px 12px !important;
  border-radius: 8px !important;
}

.chat-page .chat-message:hover {
  background: #f7faff !important;
}

.chat-page .chat-avatar,
.chat-page .chat-avatar-image {
  width: 42px !important;
  height: 42px !important;
}

.chat-page .chat-message-meta strong {
  color: var(--chat-navy) !important;
}

.chat-page .chat-composer-wrap {
  padding: 13px 18px 17px !important;
  border-top: 1px solid var(--chat-line);
  background: #f9fbfe;
}

.chat-page .chat-composer {
  border: 1px solid #cfdceb !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: 0 7px 20px rgba(33,62,98,.06);
}

.chat-page .chat-composer button[type="submit"] {
  border-radius: 5px !important;
  background: var(--chat-orange) !important;
  color: #fff !important;
}

.chat-page .chat-members-panel {
  display: flex !important;
  flex-direction: column;
  border-left: 1px solid var(--chat-line);
}

.chat-page .chat-members-panel::before {
  display: none !important;
  content: none !important;
}

.chat-page .chat-members-heading {
  margin: 0 0 12px !important;
  padding: 10px 6px 14px !important;
  border-bottom: 1px solid #dce6f2;
}

.chat-page .chat-members-heading strong::before {
  content: "ODADAKİ OYUNCULAR";
  font-size: 15px;
}

.chat-page .chat-members-heading strong {
  font-size: 0 !important;
}

.chat-page .chat-room-info-card {
  order: -1;
  min-height: 112px;
  margin: 0 0 14px !important;
  border: 1px solid #d5e2ef !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #0a1d3f, #13335f) !important;
  color: #fff !important;
  box-shadow: inset 4px 0 0 var(--chat-orange);
}

.chat-page .chat-member-row {
  margin-bottom: 7px;
  padding: 9px !important;
  border: 1px solid transparent;
  border-radius: 7px;
}

.chat-page .chat-member-row:hover {
  border-color: #dae5f1;
  background: #fff;
}

.chat-page .chat-voice-controls {
  margin-top: 12px !important;
  padding: 13px !important;
  border: 1px solid #d6e3f0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: inset 3px 0 0 #27b96d;
}

.chat-page .chat-members-panel::after {
  content: "CLUTCHBOT ÖNERİYOR\A Takımına uygun odaları keşfet.";
  display: block;
  min-height: 96px;
  margin-top: auto;
  padding: 20px 90px 16px 16px;
  border: 1px solid #ffd4c4;
  border-radius: 8px;
  white-space: pre-line;
  color: var(--chat-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  background:
    url("/assets/clutchbot/clutchbot-mascot-white-orange-v2.webp") right 10px bottom -6px / 82px auto no-repeat,
    linear-gradient(135deg,#fff8f3,#fff);
  box-shadow: 0 8px 22px rgba(255,75,22,.08);
}

.chat-page .chat-members-panel::after:first-line {
  color: var(--chat-orange);
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 1439px) and (min-width: 1101px) {
  .chat-page .community-chat-shell.chat-shell {
    grid-template-columns: 300px minmax(0, 1fr) 275px !important;
  }
  .chat-page .chat-channel-group:nth-of-type(2) button {
    min-height: 82px;
  }
  .chat-page .chat-message-list {
    max-height: 540px !important;
  }
}

@media (max-width: 1100px) {
  .chat-page > .page-hero-chat {
    min-height: 112px !important;
    padding: 20px 24px !important;
  }
  .chat-page > .page-hero-chat::after {
    opacity: .22;
  }
  .chat-page .community-chat-shell.chat-shell {
    display: block !important;
    max-height: none;
    min-height: 620px !important;
    clip-path: none;
    border-radius: 10px !important;
  }
  .chat-page .chat-channel-panel,
  .chat-page .chat-members-panel {
    border: 0 !important;
  }
  .chat-page .chat-channel-group:nth-of-type(2) button {
    min-height: 72px;
  }
}

@media (max-width: 640px) {
  .chat-page > .page-hero-chat {
    padding: 18px 17px !important;
  }
  .chat-page > .page-hero-chat h1 {
    font-size: 25px !important;
  }
  .chat-page .chat-live-state {
    position: static !important;
    display: inline-flex;
    margin-top: 10px;
  }
  .chat-page .chat-message-list {
    min-height: 410px !important;
    max-height: 520px !important;
    padding: 16px 10px !important;
  }
}