/* ===== Sidebar ===== */
.AI_sidebar {
  box-sizing: border-box;
  width: 280px;
  height: 100vh;
  padding: 18px 14px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #1c1812;
  color: #f7f1ea;
  border-right: 1px solid rgba(255, 210, 170, 0.06);
  scrollbar-width: thin;
}

.AI_sidebar *,
.AI_sidebar *::before,
.AI_sidebar *::after {
  box-sizing: border-box;
}

.AI_sidebar a {
  color: #c4b3a2;
  text-decoration: none;
}

.AI_sidebar button {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}

.AI_sidebar::-webkit-scrollbar {
  width: 6px;
}

.AI_sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.AI_sidebar-section {
  display: block;
}

.AI_sidebar-section + .AI_sidebar-section {
  margin-top: 22px;
}

.AI_sidebar-divider {
  height: 1px;
  margin: 10px 4px;
  background: rgba(255, 200, 150, 0.12);
}

.AI_sidebar-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a89888;
}

.AI_sidebar-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.AI_sidebar-label-row .AI_sidebar-label {
  margin-bottom: 0;
}

.AI_sidebar-label-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.AI_icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #b5a698;
  background: rgba(255, 210, 170, 0.20);
}

.AI_icon-btn:hover {
  color: #fff5eb;
  background: rgba(255, 210, 170, 0.12);
}

.AI_icon-btn--accent {
  background: #d27336;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}

.AI_icon-btn--accent:hover {
  background: #ff9a55;
}

/* ===== Roulettes ===== */
.AI_roulette-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.AI_roulette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #e8ddd2;
  background: rgba(255, 210, 170, 0.10);
  border: 1px solid rgba(255, 200, 150, 0.10);
  transition: background 0.15s ease, color 0.15s ease;
}

.AI_roulette-item:hover {
  background: rgba(255, 210, 170, 0.09);
  color: #fff8f0;
}

.AI_roulette-item[data-status="active"] {
  background: linear-gradient(90deg, #bc5e27 0%, #d47437 100%);
  color: #fff;
}

.AI_roulette-item[data-status="active"] .AI_online-roulette {
  color: rgba(255, 255, 255, 0.9);
}

.AI_roulette-item[data-status="active"] .AI_roulette-icon {
  color: #fff;
}

.AI_roulette-item[data-status="noRead"] {
  background: linear-gradient(90deg, #a84538 0%, #c45645 100%);
  color: #fff;
}

.AI_roulette-item[data-status="noRead"] .AI_online-roulette {
  color: rgba(255, 255, 255, 0.9);
}

.AI_roulette-item[data-status="noRead"] .AI_roulette-icon {
  color: #fff;
}


.AI_roulette-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: #c4b3a2;
}


.AI_roulette-name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
}

.AI_online {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 14px;
  color: #a89888;
}

.AI_online-icon {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.AI_online-roulette {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 16px;
  color: #a89888;
}

.AI_online-icon-roulette {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

/* ===== Rooms ===== */
.AI_room-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.AI_room-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px;
  border-radius: 10px;
  color: #e8ddd2;
  transition: background 0.15s ease, color 0.15s ease;
}

.AI_room-item:hover {
  background: rgba(255, 210, 170, 0.10);
  color: #fff8f0;
}

.AI_room-item[data-status="noRead"] {
  background: linear-gradient(90deg, #a84538 0%, #c45645 100%);
  color: #fff;
}

.AI_room-item[data-status="noRead"] .AI_online {
  color: rgba(255, 255, 255, 0.9);
}

.AI_room-item[data-status="active"] {
  background: linear-gradient(90deg, #bc5e27 0%, #d47437 100%);
  color: #fff;
}

.AI_room-item[data-status="active"] .AI_online {
  color: rgba(255, 255, 255, 0.9);
}

.AI_room-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #c4b3a2;
}

.AI_room-item[data-status="active"] .AI_room-icon {
  color: #fff;
}

.AI_room-icon svg {
  width: 20px;
  height: 20px;
}

.AI_room-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  overflow: hidden;
}

.AI_room-name > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Nested: isolated curved elbow icon */
.AI_room-item.AI_is-nested {
  padding-left: 12px;
  gap: 8px;
}

/* ===== User rooms (after system rooms) ===== */
.AI_user-room-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.AI_user-room {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.AI_user-room:hover {
  background: rgba(255, 210, 170, 0.07);
}

.AI_user-room-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #2a241c;
}

.AI_user-room-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.AI_user-room-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.AI_user-room-login {
  font-size: 12px;
  color: #a89888;
}

.AI_room-item[data-status="active"] .AI_user-room-login,
.AI_room-item[data-status="noRead"] .AI_user-room-login {
  color: #fff;
}










/* ChipChat landing — all classes prefixed with INDEX_ */

.INDEX_body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
  background:
    radial-gradient(ellipse 65% 50% at 82% 72%, rgba(255, 160, 90, 0.4), transparent 70%),
    radial-gradient(ellipse 45% 40% at 28% 22%, rgba(255, 190, 140, 0.32), transparent 65%),
    linear-gradient(200deg, #fff6e8 0%, #ffe2c4 50%, #ffd4a8 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

.INDEX_page {
  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(12px, 3cqi, 28px) clamp(12px, 3cqi, 32px) clamp(24px, 5cqi, 56px);
}

.INDEX_page *,
.INDEX_page *::before,
.INDEX_page *::after {
  box-sizing: border-box;
}

/* —— Header —— */
.INDEX_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.INDEX_logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0f172a;
}

.INDEX_logo-icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.INDEX_logo-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(124, 58, 237, 0.3));
}

.INDEX_logo-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.INDEX_hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 20px 0 50px;
}

.INDEX_hero-title {
  font-size: clamp(22px, 7cqi, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #0f172a;
}

.INDEX_hero-subtitle {
  margin: 0 0 20px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  color: #6b7280;
}

.INDEX_auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.INDEX_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}


.INDEX_btn--ghost {
  color: #111827;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.INDEX_btn--ghost:hover {
  background: rgba(255, 255, 255, 0.75);
}

.INDEX_btn--primary {
  color: #fff;
  background: linear-gradient(180deg, #f6853d 0%, #d27236 100%);
  border: 1px solid transparent;
}


/* —— Sections —— */
.INDEX_main {
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}

.INDEX_section {
  min-width: 0;
}

.INDEX_section-title {
  font-size: clamp(18px, 4.5cqi, 26px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
}

/* —— Roulettes —— */
.INDEX_roulettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: clamp(8px, 2cqi, 16px);
  width: 100%;
  min-width: 0;
}

.INDEX_roulette-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: clamp(7rem, 32cqi, 17.5rem);
  padding: clamp(0.65rem, 2.5cqi, 1.25rem);
  text-decoration: none;
  color: inherit;
  border-radius: clamp(0.9rem, 3.5cqi, 1.75rem);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(180, 120, 60, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.INDEX_roulette-card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 40px rgba(180, 120, 60, 0.12);
}

.INDEX_roulette-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 20cqi, 10.5rem);
  min-width: 0;
}

.INDEX_roulette-visual img {
  width: clamp(2rem, 16cqi, 10rem);
  max-width: 100%;
  height: auto;
}

.INDEX_roulette-svg {
  width: 100%;
  max-width: min(200px, 40vw);
  height: auto;
}

.INDEX_roulette-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(4px, 1.5cqi, 12px);
  margin-top: clamp(4px, 1cqi, 8px);
  min-width: 0;
}

.INDEX_roulette-info {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.5vw, 4px);
  min-width: 0;
}

.INDEX_roulette-name {
  font-size: clamp(0.75rem, 5cqi, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.INDEX_online {
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.8cqi, 6px);
  max-width: 100%;
  font-size: clamp(0.625rem, 2.5cqi, 0.8125rem);
  font-weight: 500;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.INDEX_online-dot {
  width: clamp(4px, 1cqi, 7px);
  height: clamp(4px, 1cqi, 7px);
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 clamp(1px, 0.4cqi, 3px) rgba(34, 197, 94, 0.2);
  flex-shrink: 0;
}

.INDEX_chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}

.INDEX_chevron--roulette {
  width: clamp(1.25rem, 6cqi, 2.5rem);
  height: clamp(1.25rem, 6cqi, 2.5rem);
}

.INDEX_chevron--roulette svg {
  width: 100%;
  height: 100%;
}

/* —— Rooms —— */
.INDEX_rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: clamp(8px, 1.5cqi, 14px);
  width: 100%;
  min-width: 0;
}

.INDEX_room-card {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5cqi, 12px);
  min-width: 0;
  min-height: clamp(3rem, 10cqi, 4.75rem);
  padding: clamp(0.5rem, 1.5cqi, 0.75rem) clamp(0.6rem, 1.8cqi, 0.875rem);
  text-decoration: none;
  color: inherit;
  border-radius: clamp(0.75rem, 2.5cqi, 1.25rem);
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(180, 120, 60, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.INDEX_room-card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 28px rgba(180, 120, 60, 0.1);
}

.INDEX_room-icon {
  display: flex;
  width: clamp(2rem, 7cqi, 3rem);
  height: clamp(2rem, 7cqi, 3rem);
  flex-shrink: 0;
}

.INDEX_room-icon svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.INDEX_room-info {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.5cqi, 3px);
  flex: 1;
  min-width: 0;
}

.INDEX_room-name {
  font-size: clamp(0.75rem, 2.8cqi, 0.9375rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.INDEX_room-card .INDEX_chevron {
  width: clamp(0.875rem, 3.5cqi, 1.125rem);
  height: clamp(0.875rem, 3.5cqi, 1.125rem);
}

.INDEX_room-card .INDEX_chevron svg {
  width: 100%;
  height: 100%;
}

.INDEX_room-card .INDEX_online {
  font-size: clamp(0.625rem, 2.2cqi, 0.8125rem);
}

/* —— Responsive —— */
@media (max-width: 640px) {
  .INDEX_roulettes {
    grid-template-columns: 1fr;
  }

  .INDEX_roulette-card {
    flex-direction: row;
    align-items: center;
    gap: clamp(8px, 2cqi, 12px);
    min-height: 0;
  }

  .INDEX_roulette-visual {
    flex: 0 0 auto;
    width: clamp(2.5rem, 14cqi, 4rem);
    min-height: 0;
  }

  .INDEX_roulette-visual svg {
    width: 100%;
  }

  .INDEX_roulette-meta {
    flex: 1;
    margin-top: 0;
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .INDEX_btn {
    height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }
}

/* —— Dark theme (body.dark-theme) —— */
body.dark-theme .INDEX_body,
body.dark-theme.INDEX_body {
  color: #e5e7eb;
  background:
    radial-gradient(ellipse 65% 50% at 82% 72%, rgba(180, 90, 40, 0.22), transparent 70%),
    radial-gradient(ellipse 45% 40% at 28% 22%, rgba(120, 70, 40, 0.18), transparent 65%),
    linear-gradient(200deg, #1a1410 0%, #231910 50%, #1c1510 100%);
}

body.dark-theme .INDEX_logo {
  color: #f3f4f6;
}

body.dark-theme .INDEX_hero-title,
body.dark-theme .INDEX_section-title,
body.dark-theme .INDEX_roulette-name,
body.dark-theme .INDEX_room-name {
  color: #f9fafb;
}

body.dark-theme .INDEX_hero-subtitle,
body.dark-theme .INDEX_online {
  color: #9ca3af;
}

body.dark-theme .INDEX_btn--ghost {
  color: #f3f4f6 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.dark-theme .INDEX_btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

body.dark-theme .INDEX_btn--primary {
  color: #fff !important;
  background: linear-gradient(180deg, #f6853d 0%, #d27236 100%) !important;
  border-color: transparent !important;
}


body.dark-theme .INDEX_roulette-card,
body.dark-theme .INDEX_room-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.dark-theme .INDEX_roulette-card:hover,
body.dark-theme .INDEX_room-card:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

body.dark-theme .INDEX_online-dot {
  box-shadow: 0 0 0 clamp(1px, 0.4cqi, 3px) rgba(34, 197, 94, 0.35);
}

body.dark-theme .INDEX_chevron {
  opacity: 0.55;
  color: #d1d5db;
}

body.dark-theme .INDEX_room-icon svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}


/* ===== Mini-games — scoped with GAMES_ prefix ===== */

.GAMES_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.5cqi, 20px);
}

.GAMES_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 22px 22px 18px;
  text-decoration: none;
  color: inherit;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(180, 120, 60, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.GAMES_card:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 40px rgba(180, 120, 60, 0.12);
}

.GAMES_visual {
  font-size: 36px;
  letter-spacing: 6px;
  line-height: 1;
  margin-bottom: 16px;
}

.GAMES_body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.GAMES_name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
}

.GAMES_desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6b7280;
}

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

.GAMES_stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45);
}

.GAMES_stat-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #0f172a;
}

.GAMES_stat-label {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

.GAMES_go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #d27236;
}

.GAMES_go .INDEX_chevron {
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 1;
}

.GAMES_go .INDEX_chevron svg {
  width: 100%;
  height: 100%;
}

body.dark-theme .GAMES_card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.dark-theme .GAMES_card:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}

body.dark-theme .GAMES_name,
body.dark-theme .GAMES_stat-value {
  color: #f3f4f6;
}

body.dark-theme .GAMES_desc,
body.dark-theme .GAMES_stat-label {
  color: #9ca3af;
}

body.dark-theme .GAMES_stat {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .GAMES_go {
  color: #f6853d;
}

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


/* ===== Communities list — scoped with COMM_ prefix ===== */

.COMM_notice {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #166534;
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.22);
}

.COMM_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.COMM_card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(180, 120, 60, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.COMM_card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 36px rgba(180, 120, 60, 0.12);
}

.COMM_logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.COMM_body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
}

.COMM_title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.COMM_name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.COMM_abbr {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #7a3e10;
  background: rgba(246, 133, 61, 0.22);
}

.COMM_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.COMM_chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.COMM_chevron svg {
  width: 100%;
  height: 100%;
}

.COMM_empty {
  padding: 48px 16px;
  text-align: center;
  font-size: 15px;
  color: #6b7280;
}

body.dark-theme .COMM_notice {
  color: #bbf7d0;
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.28);
}

body.dark-theme .COMM_card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.dark-theme .COMM_card:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}

body.dark-theme .COMM_logo {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-theme .COMM_name {
  color: #f3f4f6;
}

body.dark-theme .COMM_abbr {
  color: #ffd7b0;
  background: rgba(246, 133, 61, 0.28);
}

body.dark-theme .COMM_meta,
body.dark-theme .COMM_empty {
  color: #9ca3af;
}

@media (max-width: 640px) {
  .COMM_card {
    gap: 12px;
    padding: 14px;
  }

  .COMM_logo {
    width: 52px;
    height: 52px;
    padding: 6px;
    border-radius: 14px;
  }

  .COMM_name {
    font-size: 16px;
  }
}

.COMM_hero {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  text-align: left;
  padding: 4px 0 8px;
}

.COMM_hero-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.COMM_hero-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.COMM_hero-logo-link {
  font-size: 13px;
  font-weight: 600;
  color: #b45309;
  text-decoration: none;
}

.COMM_hero-logo-link:hover {
  text-decoration: underline;
}

.COMM_hero-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.COMM_hero-title {
  margin: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: #1f2937;
}

.COMM_hero-body .INDEX_hero-subtitle {
  text-align: left;
}

.COMM_hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.COMM_hero-actions form {
  margin: 0;
}

.COMM_info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.COMM_info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 14px;
}

.COMM_info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.COMM_info-row:first-child {
  padding-top: 0;
}

.COMM_info-label {
  color: #6b7280;
  flex-shrink: 0;
}

.COMM_info-value {
  font-weight: 700;
  color: #1f2937;
  text-align: right;
  word-break: break-word;
}

.COMM_person {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

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

.COMM_person-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

.COMM_person-role {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

.COMM_person-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

.COMM_person-actions form {
  margin: 0;
}

.COMM_person-actions .INDEX_btn {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

body.dark-theme .COMM_hero-logo {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-theme .COMM_hero-logo-link {
  color: #fdba74;
}

body.dark-theme .COMM_hero-title {
  color: #f3f4f6;
}

body.dark-theme .COMM_info-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .COMM_info-label,
body.dark-theme .COMM_person-role {
  color: #9ca3af;
}

body.dark-theme .COMM_info-value {
  color: #f3f4f6;
}

@media (max-width: 640px) {
  .COMM_hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .COMM_hero-body {
    align-items: center;
  }

  .COMM_hero-title {
    font-size: 24px;
    text-align: center;
  }

  .COMM_hero-body .INDEX_hero-subtitle {
    text-align: center;
  }

  .COMM_hero-actions {
    justify-content: center;
  }

  .COMM_info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .COMM_info-value {
    text-align: left;
  }

  .COMM_person-actions {
    width: 100%;
  }
}

.USER_avatar {
  width: 96px;
  height: 96px;
  max-width: 96px;
  max-height: 96px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.USER_hero {
  align-items: flex-start;
  text-align: left;
}

.USER_hearts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: #b91c1c;
}

.USER_title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.USER_title-row form {
  margin: 0;
  flex-shrink: 0;
}

.USER_hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.USER_title-row .INDEX_btn {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

.USER_name {
  margin: 0;
  min-width: 0;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  word-break: break-word;
  text-align: left;
}

.USER_about {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
}

.USER_compat {
  text-align: center;
}

.USER_compat-score {
  margin: 8px 0 16px;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.USER_gift-meta {
  font-size: 13px;
  color: #6b7280;
}

.USER_icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  color: #c4b3a2;
}

.USER_icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.USER_room-status {
  width: 1.25em;
  height: 1.25em;
  font-size: 18px;
}

.USER_rooms {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.USER_rooms-divider {
  height: 1px;
  margin: 2px 0;
  background: rgba(120, 80, 40, 0.14);
}

body.dark-theme .USER_rooms-divider {
  background: rgba(255, 200, 150, 0.12);
}

.USER_gifts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.USER_gift {
  min-width: 0;
}

.USER_gift-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.USER_gift-head a {
  flex-shrink: 0;
  line-height: 0;
}

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

.USER_gift .COMM_person-name {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.USER_gift-visual {
  width: 100%;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.USER_anket {
  flex-wrap: wrap;
  align-items: flex-start;
}

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

.USER_anket .COMM_person-actions {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
}

.USER_anket > .INDEX_btn {
  flex: 0 0 auto;
}

.USER_dates {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.USER_shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.USER_shop-card {
  min-width: 0;
}

.USER_shop-meta {
  font-size: 13px;
  color: #6b7280;
}

.USER_checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.USER_checks .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.35);
}

.USER_compat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

body.dark-theme .USER_shop-meta {
  color: #9ca3af;
}

body.dark-theme .USER_checks .checkbox {
  background: rgba(255, 255, 255, 0.06);
}

body.dark-theme .USER_about {
  border-top-color: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}

body.dark-theme .USER_gift-meta {
  color: #9ca3af;
}

@media (max-width: 640px) {
  .USER_name {
    font-size: 20px;
    text-align: left;
  }

  .USER_hero {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }

  .USER_hero .COMM_hero-body {
    align-items: flex-start;
  }

  .USER_hero .COMM_hero-body .INDEX_hero-subtitle {
    text-align: left;
  }

  .USER_hero .COMM_hero-actions {
    justify-content: flex-start;
  }

  .USER_hero .USER_avatar {
    width: 72px;
    height: 72px;
    max-width: 72px;
    max-height: 72px;
  }

  .USER_title-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .USER_anket .COMM_person-actions,
  .USER_anket > .INDEX_btn {
    width: 100%;
    margin-top: 4px;
  }

  .USER_anket .COMM_person-actions {
    align-items: stretch;
  }

  .USER_anket .COMM_person-actions .INDEX_btn,
  .USER_anket > .INDEX_btn {
    width: 100%;
  }

  .USER_dates,
  .USER_compat-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Mini-games pages — scoped with PLAY_ prefix ===== */

.PLAY_head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  margin: 8px 0 28px;
}

.PLAY_head.USER_head {
  align-items: stretch;
  text-align: left;
}

.PLAY_head .INDEX_hero-subtitle {
  margin: 0;
}

.PLAY_nav {
  display: flex;
  width: 100%;
  gap: clamp(4px, 1.2vw, 8px);
}

a.PLAY_tab {
  text-decoration: none;
  box-sizing: border-box;
}

.PLAY_tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 1.2vw, 8px);
  margin: 0 0 16px;
}

.PLAY_tab {
  flex: 1 1 auto;
  padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 14px);
  border-radius: clamp(8px, 2vw, 12px);
  text-align: center;
  font-size: clamp(11px, 2.7vw, 14px);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  color: #0f172a;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background 0.15s ease, color 0.15s ease;
}

.PLAY_tab:hover {
  background: rgba(255, 255, 255, 0.55);
}

.PLAY_tab[data-status="active"] {
  color: #fff;
  background: linear-gradient(180deg, #f6853d 0%, #d27236 100%);
  border-color: transparent;
}

.PLAY_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.PLAY_card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  text-decoration: none;
  color: inherit;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(180, 120, 60, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

a.PLAY_card:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 32px rgba(180, 120, 60, 0.12);
}

.PLAY_card.USER_gift {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px;
}

.PLAY_card.USER_shop-card {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
  padding: 16px 12px;
}

.PLAY_avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.PLAY_name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.PLAY_move {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.PLAY_result {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.PLAY_bet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 700;
  color: #e53935;
}

.PLAY_history {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.PLAY_history:last-child {
  border-bottom: none;
}

.PLAY_history-side {
  min-width: 0;
  flex: 1;
}

.PLAY_history-side--right {
  text-align: right;
}

.PLAY_history-center {
  flex: 0 0 auto;
  text-align: center;
  color: #6b7280;
}

.PLAY_history-bet {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.PLAY_place {
  width: 28px;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  color: #6b7280;
}

.PLAY_card:nth-child(1) .PLAY_place { color: #d97706; }
.PLAY_card:nth-child(2) .PLAY_place { color: #64748b; }
.PLAY_card:nth-child(3) .PLAY_place { color: #b45309; }

.PLAY_rating {
  font-size: 18px;
  font-weight: 800;
  color: #d27236;
  flex-shrink: 0;
}

.PLAY_form {
  padding: 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(180, 120, 60, 0.08);
}

.PLAY_dice-preview {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 18px;
}

.PLAY_empty {
  padding: 48px 16px;
  text-align: center;
  font-size: 15px;
  color: #6b7280;
}

body.dark-theme .PLAY_tab {
  color: #f3f4f6 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme .PLAY_tab:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

body.dark-theme .PLAY_tab[data-status="active"],
body.dark-theme .PLAY_tab[data-status="active"]:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #f6853d 0%, #d27236 100%) !important;
  border-color: transparent !important;
}

body.dark-theme .PLAY_card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

body.dark-theme a.PLAY_card:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-theme .PLAY_history {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-theme .PLAY_history-bet {
  color: #f3f4f6;
}

body.dark-theme .PLAY_form {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .PLAY_empty,
body.dark-theme .PLAY_history-center,
body.dark-theme .PLAY_place {
  color: #9ca3af;
}

@media (max-width: 640px) {
  .PLAY_name {
    font-size: 14px;
  }

  .PLAY_history {
    gap: 6px;
  }
}

.AUTH_forgot {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
}

.AUTH_note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
}

.AUTH_or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
}

.AUTH_or::before,
.AUTH_or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(127, 127, 127, 0.22);
}

.AUTH_social {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.AUTH_captcha {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.AUTH_captcha input {
  flex: 1;
  min-width: 0;
}

.AUTH_captcha img {
  height: 48px;
  width: auto;
  border-radius: 12px;
  flex-shrink: 0;
}

.AUTH_success {
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: #166534;
}

.AUTH_doc {
  font-size: 15px;
  line-height: 1.55;
  color: #374151;
}

.AUTH_doc > h1:first-of-type {
  display: none;
}

.AUTH_back {
  margin-top: 14px;
  text-align: center;
}

.ERROR_box {
  text-align: center;
}

.ERROR_text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4b5563;
}

.ERROR_list {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
}

.ERROR_list li + li {
  margin-top: 8px;
}

body.dark-theme .ERROR_text,
body.dark-theme .ERROR_list {
  color: #d1d5db;
}

body.dark-theme .AUTH_note,
body.dark-theme .AUTH_or {
  color: #9ca3af;
}

body.dark-theme .AUTH_or::before,
body.dark-theme .AUTH_or::after {
  background: rgba(255, 255, 255, 0.12);
}

body.dark-theme .AUTH_success {
  color: #86efac;
}

body.dark-theme .AUTH_doc {
  color: #d1d5db;
}


/* ===== Room settings / create — scoped with ROOM_ prefix ===== */

.ROOM_toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ROOM_toolbar-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #6b7280;
}

.ROOM_group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 22px;
}

.ROOM_parent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  cursor: pointer;
}

.ROOM_chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ROOM_chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(180, 120, 60, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ROOM_chip:hover {
  background: rgba(255, 255, 255, 0.55);
}

.ROOM_chip:has(input:checked) {
  background: rgba(246, 133, 61, 0.16);
  border-color: rgba(246, 133, 61, 0.45);
  box-shadow: 0 4px 16px rgba(246, 133, 61, 0.12);
}

.ROOM_chip-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}

.ROOM_chip-meta {
  display: block;
  font-size: 12px;
  color: #6b7280;
}

.ROOM_benefits {
  margin: 0 0 18px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

.ROOM_note {
  margin: 0 0 8px;
  font-size: 14px;
  color: #6b7280;
}

body.dark-theme .ROOM_toolbar-text,
body.dark-theme .ROOM_chip-meta,
body.dark-theme .ROOM_note,
body.dark-theme .ROOM_benefits {
  color: #9ca3af;
}

body.dark-theme .ROOM_parent,
body.dark-theme .ROOM_chip-title {
  color: #f3f4f6;
}

body.dark-theme .ROOM_chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .ROOM_chip:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-theme .ROOM_chip:has(input:checked) {
  background: rgba(246, 133, 61, 0.22);
  border-color: rgba(246, 133, 61, 0.5);
}

.MY_stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.MY_grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.MY_alert {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #9a3412;
  background: rgba(246, 133, 61, 0.16);
}

.MY_value {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  background: rgba(246, 133, 61, 0.16);
  color: #7a3e10;
}

.MY_date {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #6b7280;
}

.MY_steps {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
}

.MY_steps li + li {
  margin-top: 8px;
}

.MY_support {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
}

.COMM_pay {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.COMM_pay-cost {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

body.dark-theme .MY_alert {
  color: #fdba74;
  background: rgba(246, 133, 61, 0.18);
}

body.dark-theme .MY_value {
  color: #ffd7b0;
  background: rgba(246, 133, 61, 0.22);
}

body.dark-theme .MY_date,
body.dark-theme .MY_steps,
body.dark-theme .COMM_pay-cost {
  color: #9ca3af;
}

body.dark-theme .MY_support {
  color: #fca5a5;
  background: rgba(185, 28, 28, 0.16);
}

@media (max-width: 640px) {
  .MY_grid {
    flex-direction: column;
  }

  .COMM_pay {
    grid-template-columns: 1fr;
  }
}


/* ===== Text Roulette — scoped with ROLL_ prefix ===== */
/* ===== Text Roulette — scoped with ROLL_ prefix ===== */

.ROLL_body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #2d2d2d;
  background: radial-gradient(ellipse at 50% 30%, #fff8f3 0%, #ffe8dc 45%, #ffdcc8 100%);
  -webkit-font-smoothing: antialiased;
}

.ROLL_page {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 36px 20px 30px;
}

/* Decorative floating icons */
.ROLL_decor {
  position: absolute;
  width: 72px;
  height: 72px;
  pointer-events: none;
  opacity: 0.85;
  z-index: 0;
}

.ROLL_decor svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 12px rgba(255, 112, 67, 0.25));
}

.ROLL_decor_rocket {
  top: 28px;
  left: 8px;
  transform: rotate(-18deg);
}

.ROLL_decor_chat {
  top: 36px;
  right: 12px;
  width: 64px;
  height: 64px;
  transform: rotate(12deg);
}

.ROLL_sparkle {
  position: absolute;
  color: #ff5600;
  font-size: 14px;
  opacity: 0.65;
  pointer-events: none;
  z-index: 0;
}

.ROLL_sparkle_1 { top: 70px; left: 90px;}
.ROLL_sparkle_2 { top: 40px; right: 100px;}
.ROLL_sparkle_3 { top: 110px; right: 60px;}
.ROLL_sparkle_4 { top: 95px; left: 50px;}

/* Header */
.ROLL_header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 36px;
}

.ROLL_title {
  margin: 0 0 10px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #3a3a3a;
}

.ROLL_title_accent {
  color: #e86a2f;
}

.ROLL_subtitle {
  margin: 0;
  font-size: 16px;
  color: #9a9a9a;
  font-weight: 400;
}

/* Grid */
.ROLL_main {
  position: relative;
  z-index: 1;
}

.ROLL_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* Cards */
.ROLL_card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(180, 120, 80, 0.08);
  padding: 22px 24px;
}

.ROLL_card_stat {
  text-align: center;
  padding: 20px 24px 18px;
}

.ROLL_card_label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  color: #555;
  font-weight: 500;
}

.ROLL_icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #666;
}

.ROLL_icon_accent {
  color: #e86a2f;
}

.ROLL_stat_value {
  margin: 10px 0 4px;
  font-size: 50px;
  font-weight: 700;
  color: #2a2a2a;
  line-height: 1;
  letter-spacing: -0.03em;
}

.ROLL_stat_pills {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.ROLL_pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.ROLL_pill > svg {
  height: 1em;
}

.ROLL_pill_male {
  color: #5b9fd4;
}

.ROLL_pill_female {
  color: #e08a9a;
}

/* Form cards */
.ROLL_card_form {
  padding: 20px 22px 22px;
}

.ROLL_card_head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #e86a2f;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f0ebe6;
}

.ROLL_card_head > svg {
  height: 1em;;
}

.ROLL_field {
  margin-bottom: 16px;
}

.ROLL_field:last-child {
  margin-bottom: 0;
}

.ROLL_label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #888;
  font-weight: 400;
}

/* Toggle buttons */
.ROLL_toggle_group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ROLL_toggle_group_3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.ROLL_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  border-radius: 12px;
  border: 1.5px solid #e8e4e0;
  background: #fff;
  color: #888;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ROLL_toggle > svg {
  height: 1em;;
}

.ROLL_toggle:hover:not(.ROLL_toggle_active) {
  border-color: #f0c8b0;
  color: #666;
  box-shadow: none !important;
}

.ROLL_toggle:focus,
.ROLL_toggle:active {
  box-shadow: none !important;
  outline: none;
}

.ROLL_toggle_active {
  background: #e86a2f;
  border-color: #e86a2f;
  color: #fff;
  box-shadow: none !important;
}

/* Selects */
.ROLL_select_wrap {
  position: relative;
  width: 100%;
}

.ROLL_select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 40px 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #ebe7e3;
  background: #faf8f6;
  color: #666;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.ROLL_select:focus {
  border-color: #e86a2f;
}

.ROLL_select_chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #bbb;
  pointer-events: none;
}

.ROLL_select_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Search button */
.ROLL_actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.ROLL_btn_search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 280px;
  padding: 16px 48px;
  border: none;
  border-radius: 50px;
  background: #e86a2f;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: background 0.15s, transform 0.15s;
}

.ROLL_btn_search > svg,
.ROLL_btn_search svg {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

.ROLL_btn_search:hover {
  background: #d45a22;
  transform: translateY(-1px);
  box-shadow: none !important;
}

.ROLL_btn_search:focus,
.ROLL_btn_search:active {
  box-shadow: none !important;
  outline: none;
}

.ROLL_btn_search:active {
  transform: translateY(0);
}

/* Footer */
.ROLL_footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 32px;
  padding: 0 4px;
  gap: 16px;
}

.ROLL_footer_text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #999;
  line-height: 1.4;
}
.ROLL_footer_text > svg {
  color: #e86a2f;
  height: 20px;
}

.ROLL_footer_shield {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #e86a2f;
}

.ROLL_footer_lock {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #d0cbc6;
  opacity: 0.7;
}

/* Responsive */
@media (max-width: 640px) {
  .ROLL_page {
    padding: 22px 4px 18px;
  }

  .ROLL_title {
    font-size: 28px;
  }

  .ROLL_grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ROLL_card_stat {
    padding: 16px 10px 14px;
  }

  .ROLL_card_stat .ROLL_card_label {
    font-size: 12px;
    gap: 4px;
  }

  .ROLL_card_stat .ROLL_icon {
    width: 14px;
    height: 14px;
  }

  .ROLL_stat_value {
    font-size: 38px;
  }

  .ROLL_stat_pills {
    gap: 6px;
  }

  .ROLL_pill {
    font-size: 11px;
  }

  .ROLL_card_form {
    grid-column: 1 / -1;
  }

  .ROLL_decor {
    width: 48px;
    height: 48px;
  }

  .ROLL_decor_rocket {
    left: 0;
    top: 16px;
  }

  .ROLL_decor_chat {
    right: 0;
    top: 20px;
    width: 44px;
    height: 44px;
  }

  .ROLL_btn_search {
    width: 100%;
    min-width: 0;
  }

  .ROLL_footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .ROLL_toggle_group {
    grid-template-columns: 1fr 1fr;
  }

  .ROLL_toggle_group_3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .ROLL_toggle_group_3 .ROLL_toggle {
    padding: 10px 4px;
    font-size: 11px;
    gap: 4px;
  }

  .ROLL_toggle_group_3 .ROLL_toggle svg {
    width: 14px;
    height: 14px;
  }

  .ROLL_toggle_group .ROLL_toggle {
    padding: 10px 4px;
    font-size: 12px;
  }

  .ROLL_sparkle_1 { top: 0; left: 48px;}
  .ROLL_sparkle_2 { top: 6px; right: 6px;}
  .ROLL_sparkle_3 { top: 80px; right: 34px;}
  .ROLL_sparkle_4 { top: 54px; left: 0;}
}

.ROLL_searching {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  text-align: center;
}

.ROLL_searching_title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: #444;
}

.ROLL_searching_meta {
  margin: 0;
  font-size: 14px;
  color: #888;
}

.ROLL_btn_cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: none !important;
}

.ROLL_btn_cancel:hover {
  background: #dc2626;
}

body.dark-theme .ROLL_searching_title {
  color: #e8e8e8;
}

body.dark-theme .ROLL_searching_meta {
  color: #9a9a9a;
}

.COMM_shell-main > #roulette-mainBlock {
  flex: 1;
  min-height: 0;
}

.COMM_shell-main > #roulette-filterBlock,
.COMM_shell-main > #audio-filterBlock,
.COMM_shell-main > #video-filterBlock {
  width: 100%;
}

.COMM_shell-main > #roulette-mainBlock:not(.hidden),
.COMM_shell-main > #audio-mainBlock:not(.hidden),
.COMM_shell-main > #video-mainBlock:not(.hidden) {
  display: flex;
  flex-direction: column;
}

.COMM_shell-main > #audio-mainBlock,
.COMM_shell-main > #video-mainBlock {
  flex: 1;
  min-height: 0;
}

.ROLL_decor_audio {
  top: 32px;
  left: 16px;
  width: 64px;
  height: 64px;
  transform: rotate(-12deg);
  color: #e86a2f;
}

.ROLL_decor_video {
  top: 30px;
  left: 14px;
  width: 68px;
  height: 68px;
  transform: rotate(-10deg);
  color: #e86a2f;
}

.ROLL_decor_video svg {
  width: 100%;
  height: 100%;
}

.ROLL_searching_note {
  margin: 8px 0 0;
  max-width: 360px;
  font-size: 13px;
  line-height: 1.45;
  color: #999;
  text-align: center;
}

.CHAT_body--call {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ROLL_call {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 24px;
  text-align: center;
}

.ROLL_call_icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  color: #e86a2f;
  background: rgba(246, 133, 61, 0.14);
}

.ROLL_call_icon svg {
  width: 42px;
  height: 42px;
}

.ROLL_call_title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  color: #2a2a2a;
}

.ROLL_call_text {
  margin: 0;
  max-width: 360px;
  font-size: 14px;
  line-height: 1.5;
  color: #888;
}

.ROLL_call_active .ROLL_call_title {
  color: #15803d;
}

.ROLL_call_ended .ROLL_call_title {
  color: #b91c1c;
}

body.dark-theme .ROLL_searching_note {
  color: #9a9a9a;
}

body.dark-theme .ROLL_call_title {
  color: #f0f0f0;
}

body.dark-theme .ROLL_call_text {
  color: #9a9088;
}

body.dark-theme .ROLL_call_active .ROLL_call_title {
  color: #86efac;
}

body.dark-theme .ROLL_call_ended .ROLL_call_title {
  color: #fca5a5;
}

body.dark-theme .ROLL_call_icon {
  background: rgba(246, 133, 61, 0.2);
}

.CHAT_body--video {
  min-height: 0;
}

.ROLL_video {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  padding: 12px;
}

.ROLL_video_remote-wrap {
  position: relative;
  flex: 1;
  min-height: 180px;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
}

.ROLL_video_remote {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  max-height: 52vh;
  object-fit: cover;
  background: #000;
}

.ROLL_video_fs-btn {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.ROLL_video_fs-btn:hover {
  background: rgba(0, 0, 0, 0.78);
}

.ROLL_video_controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}

.ROLL_video_controls_label {
  flex-shrink: 0;
  font-size: 14px;
  color: #888;
  white-space: nowrap;
}

.ROLL_video_volume {
  flex: 1;
  min-width: 0;
}

.ROLL_video_local {
  display: block;
  width: 100%;
  max-height: 180px;
  border-radius: 16px;
  object-fit: cover;
  background: #000;
}

#videoRemote:fullscreen,
#videoRemote:-webkit-full-screen {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: #000;
}

body.dark-theme .ROLL_video_controls_label {
  color: #9a9088;
}

@media (max-width: 640px) {
  .ROLL_video {
    padding: 8px;
  }

  .ROLL_video_remote {
    max-height: 42vh;
    min-height: 160px;
  }

  .ROLL_video_local {
    max-height: 140px;
  }
}

/* ===== Dark theme (body.dark-theme) ===== */
body.dark-theme.ROLL_body,
body.dark-theme .ROLL_body {
  color: #e8e8e8;
  background: radial-gradient(ellipse at 50% 30%, #2a2420 0%, #1f1b18 45%, #181512 100%);
}

body.dark-theme .ROLL_title {
  color: #f0f0f0;
}

body.dark-theme .ROLL_title_accent {
  color: #f07840;
}

body.dark-theme .ROLL_subtitle {
  color: #8a8580;
}

body.dark-theme .ROLL_sparkle {
  color: #c06030;
  opacity: 0.35;
}

body.dark-theme .ROLL_decor {
  opacity: 0.6;
}

body.dark-theme .ROLL_decor svg {
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

body.dark-theme .ROLL_card {
  background: #24201d;
}

body.dark-theme .ROLL_card_label {
  color: #b0aaa4;
}

body.dark-theme .ROLL_icon {
  color: #9a9490;
}

body.dark-theme .ROLL_icon_accent,
body.dark-theme .ROLL_card_head {
  color: #f07840;
}

body.dark-theme .ROLL_stat_value {
  color: #f5f5f5;
}

body.dark-theme .ROLL_pill_male {
  color: #7eb8e0;
}

body.dark-theme .ROLL_pill_female {
  color: #e8a0ad;
}

body.dark-theme .ROLL_card_head {
  border-bottom-color: #3a3530;
}

body.dark-theme .ROLL_label {
  color: #8a8580;
}

body.dark-theme .ROLL_toggle {
  background: #1e1b18 !important;
  border-color: #3a3530 !important;
  color: #8a8580 !important;
  box-shadow: none !important;
}

body.dark-theme .ROLL_toggle:hover:not(.ROLL_toggle_active) {
  background: #2a2520 !important;
  border-color: #5a4535 !important;
  color: #b0aaa4 !important;
  box-shadow: none !important;
}

body.dark-theme .ROLL_toggle:focus,
body.dark-theme .ROLL_toggle:active {
  box-shadow: none !important;
}

body.dark-theme .ROLL_toggle_active {
  background: #e86a2f !important;
  border-color: #e86a2f !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.dark-theme .ROLL_toggle_active:hover {
  background: #f07840 !important;
  border-color: #f07840 !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.dark-theme .ROLL_select {
  background: #1e1b18;
  border-color: #3a3530;
  color: #b0aaa4;
}

body.dark-theme .ROLL_select:focus {
  border-color: #e86a2f;
}

body.dark-theme .ROLL_select_chevron {
  color: #6a6560;
}

body.dark-theme .ROLL_btn_search {
  background: var(--color-green);
  box-shadow: none !important;
}

body.dark-theme .ROLL_btn_search:hover {
  background: var(--color-green-L);
  box-shadow: none !important;
}

body.dark-theme .ROLL_btn_search:focus,
body.dark-theme .ROLL_btn_search:active {
  box-shadow: none !important;
}

body.dark-theme .ROLL_footer_text {
  color: #7a7570;
}

body.dark-theme .ROLL_footer_shield {
  color: #f07840;
}

body.dark-theme .ROLL_footer_lock {
  color: #4a4540;
  opacity: 0.8;
}










/* ===== USER Sidebar — Light theme (default) ===== */

.USER_sidebar {
  box-sizing: border-box;
  padding: 12px 14px 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

.USER_sidebar *,
.USER_sidebar *::before,
.USER_sidebar *::after {
  box-sizing: border-box;
}

.USER_sidebar a {
  text-decoration: none;
  color: inherit;
}

/* --- Account card --- */

.USER_account-card {
  display: block;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 16px;
  padding: 12px 14px 18px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.USER_account-card:hover {
  background: #f7f8fa;
  border-color: #d5d8de;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.USER_account-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.USER_chevron {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: #b0b0b0;
  flex-shrink: 0;
}

.USER_chevron svg {
  width: 100%;
  height: 100%;
  display: block;
}

.USER_profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.USER_username {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

/* --- Stats row --- */

.USER_stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  align-items: start;
}

.USER_stat-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.USER_stat-card {
  display: block;
  width: 100%;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e6e8ec;
  border-radius: 14px;
  padding: 10px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.USER_stat-card:hover {
  background: #f7f8fa;
  border-color: #d5d8de;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.USER_stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.USER_stat-header .USER_chevron {
  width: 14px;
  height: 14px;
}

.USER_stat-label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #9a9a9a;
}

.USER_stat-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.USER_stat-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.USER_stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.svgIcon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.svgIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.svgIcon-inline {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  line-height: 0;
}

.svgIcon-inline svg {
  width: 100%;
  height: 100%;
  display: block;
}

.USER_stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1;
}

.USER_earn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 10px 6px;
  border: none;
  border-radius: 12px;
  background: #2ecc71;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.15s ease;
  box-shadow: none !important; 
}

.USER_earn-btn:hover {
  background: #27ae60;
}

.USER_earn-btn-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.USER_earn-btn-divider {
  width: 1px;
  align-self: stretch;
  margin: -10px 4px;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.USER_earn-btn-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.USER_earn-btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Menu --- */

.USER_menu {
  margin-top: 26px;
  padding: 0 2px;
}

.USER_menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #1a1a1a;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.USER_menu-item + .USER_menu-item {
  border-top: 1px solid #e8e9ec;
}

.USER_menu-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #6b6b6b;
  transition: color 0.15s ease;
}

.USER_menu-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.USER_menu-label {
  flex: 1;
}

.USER_menu-item .USER_chevron {
  width: 16px;
  height: 16px;
  color: #b0b0b0;
  transition: color 0.15s ease;
}

.USER_menu-item:hover {
  color: #000000;
  transform: translateX(3px);
}

.USER_menu-item:hover .USER_menu-icon {
  color: #1a1a1a;
}

.USER_menu-item:hover .USER_chevron {
  color: #888888;
}

.USER_menu-item--logout {
  color: #e53935;
}

.USER_menu-item--logout .USER_menu-icon {
  color: #e53935;
}

.USER_menu-item--logout:hover {
  color: #c62828;
}

.USER_menu-item--logout:hover .USER_menu-icon {
  color: #c62828;
}

/* ===== Dark theme (body.dark-theme) ===== */

body.dark-theme .USER_sidebar {
  color: #f0f0f0;
}

body.dark-theme .USER_account-card,
body.dark-theme .USER_stat-card {
  background: #1e1e1e;
  border-color: #2a2a2a;
}

body.dark-theme .USER_account-card:hover,
body.dark-theme .USER_stat-card:hover {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: none;
}

body.dark-theme .USER_stat-label {
  color: #8a8a8a;
}

body.dark-theme .USER_username,
body.dark-theme .USER_stat-value,
body.dark-theme .USER_menu-item {
  color: #f0f0f0;
}

body.dark-theme .USER_chevron {
  color: #6a6a6a;
}

body.dark-theme .USER_menu-item:hover {
  color: #ffffff;
}

body.dark-theme .USER_menu-item:hover .USER_menu-icon {
  color: #ffffff;
}

body.dark-theme .USER_menu-item + .USER_menu-item {
  border-top-color: #2a2a2a;
}

body.dark-theme .USER_menu-icon {
  color: #c0c0c0;
}

body.dark-theme .USER_menu-item--logout,
body.dark-theme .USER_menu-item--logout .USER_menu-icon {
  color: #ef5350;
}

body.dark-theme .USER_menu-item--logout:hover,
body.dark-theme .USER_menu-item--logout:hover .USER_menu-icon {
  color: #ff6b68;
}

body.dark-theme .USER_earn-btn {
  background: #2ecc71;
  color: #ffffff;
}

body.dark-theme .USER_earn-btn:hover {
  background: #27ae60;
}







/* ===== Header (HEADER_ prefix) ===== */

.HEADER_root {
  background-color: #e86a2f14;
  border-bottom: 1px solid #8080801a;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #2b2b2b;
  -webkit-font-smoothing: antialiased;
}

.HEADER_root *,
.HEADER_root *::before,
.HEADER_root *::after {
  box-sizing: border-box;
}

.HEADER_root svg {
  display: block;
  flex-shrink: 0;
  fill: currentColor;
  color: inherit;
}

.HEADER_left,
.HEADER_right {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.HEADER_nav {
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.HEADER_nav > [data-target="chatList"] svg {
  width: 24px;
  height: 24px;
}

.HEADER_link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.HEADER_link:hover {
  opacity: 0.7;
}

.HEADER_link-text {
  display: inline;
}

.HEADER_link-icon {
  display: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: inherit;
}

.HEADER_link-icon svg {
  width: 24px;
  height: 24px;
}

.HEADER_actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.HEADER_icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #ffffff40;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  box-shadow: none !important;
}

.HEADER_icon-btn:hover {
  opacity: 0.85;
}

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

.HEADER_mail {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: inherit;
  text-decoration: none;
}

.HEADER_mail svg {
  width: 24px;
  height: 24px;
}

.HEADER_profile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 4px 10px 4px 4px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #ffffff80;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.HEADER_profile:hover {
  opacity: 0.9;
}

.HEADER_avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #f0c4a8;
}

.HEADER_username {
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
}

.HEADER_chevron {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.75;
  color: inherit;
}

.HEADER_chevron svg {
  width: 14px;
  height: 14px;
}

/* ===== Dark theme ===== */

body.dark-theme .HEADER_root {
  color: #f0f0f0;
}

body.dark-theme .HEADER_icon-btn,
body.dark-theme .HEADER_profile {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: inherit;
}


/* ===== Mobile ===== */

@media (max-width: 768px) {
  .HEADER_root {
    padding: 0 12px;
    height: 50px;
  }

  .HEADER_left,
  .HEADER_right {
    gap: 12px;
  }

  .HEADER_nav {
    gap: 12px;
  }

  .HEADER_link-text {
    display: none;
  }

  .HEADER_link-icon {
    display: inline-flex;
  }

  
  .HEADER_username,
  .HEADER_chevron {
    display: none;
  }

  .HEADER_profile {
    width: 36px;
    height: 36px;
    padding: 4px;
    justify-content: center;
  }
}

.CHAT_shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-width: 600px;
  height: 100%;
}

.CHAT_card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: #f8f6f3;
  border: 1px solid rgba(120, 60, 20, 0.08);
  border-bottom: none;
  box-shadow:
    0 24px 60px rgba(90, 40, 10, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.CHAT_head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  z-index: 2;
  padding: 13px 16px;
  color: #fff;
  background: #f6853d;
  box-shadow: 0 8px 22px rgba(210, 114, 54, 0.38);
}

.CHAT_head-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #86efac;
  box-shadow: 0 0 0 4px rgba(134, 239, 172, 0.28);
  flex-shrink: 0;
}

.CHAT_title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CHAT_head-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  height: 34px;
  padding: 0 11px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
}

.CHAT_head-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.CHAT_head-btn .svgIcon-inline {
  width: 16px;
  height: 16px;
}

.CHAT_head-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  object-fit: cover;
}

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

.CHAT_head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.CHAT_head-details {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.CHAT_head-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CHAT_head-meta {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.CHAT_head-meta--typing {
  font-size: 14px;
}

.CHAT_head-btn--danger {
  background: rgba(239, 68, 68, 0.88);
}

.CHAT_head-btn--danger:hover {
  background: rgba(220, 38, 38, 0.95);
}

.CHAT_head-btn--success {
  background: rgba(34, 197, 94, 0.92);
}

.CHAT_head-btn--success:hover {
  background: rgba(22, 163, 74, 0.98);
}

.CHAT_smiles-stub {
  display: flex;
  align-items: center;
  justify-content: center;
}

.CHAT_smiles-stub-text {
  margin: 0;
  padding: 24px 20px;
  font-size: 15px;
  color: #9a8f86;
  text-align: center;
}

.CHAT_notice--ended {
  margin: 0;
  border-radius: 0;
  border-top: 1px solid rgba(120, 60, 20, 0.08);
  text-align: center;
  font-weight: 600;
  color: #b91c1c;
  background: #fef2f2;
}

.CHAT_feed .roulette-message {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}

.CHAT_feed .roulette-message-self {
  align-self: flex-end;
  color: #fff;
  background: linear-gradient(135deg, #f6853d 0%, #e86a2f 100%);
  border-bottom-right-radius: 4px;
}

.CHAT_feed .roulette-message-partner {
  align-self: flex-start;
  color: #3a2f28;
  background: #fff;
  border: 1px solid rgba(120, 60, 20, 0.08);
  border-bottom-left-radius: 4px;
}

.CHAT_feed .roulette-message b {
  font-weight: 800;
}

body.dark-theme .CHAT_smiles-stub-text {
  color: #9a9088;
}

body.dark-theme .CHAT_notice--ended {
  color: #fca5a5;
  background: rgba(127, 29, 29, 0.35);
  border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .CHAT_feed .roulette-message-partner {
  color: #f3ebe3;
  background: #1c1814;
  border-color: rgba(255, 255, 255, 0.06);
}

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

.CHAT_messages {
  position: relative;
  flex: 1;
  min-height: 0;
  background-color: #fdfcfa;
  background-image:
    radial-gradient(rgba(210, 114, 54, 0.06) 1.15px, transparent 1.15px);
  background-size: 16px 16px;
}

.CHAT_messages-inner {
  padding: 16px 12px 18px;
  min-height: 100%;
}

.CHAT_feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.CHAT_smiles {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 252, 248, 0.98);
  backdrop-filter: blur(16px);
}

.CHAT_smiles-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px;
  background: rgba(246, 133, 61, 0.1);
}

.CHAT_smiles-tabs {
  display: flex;
  flex: 1;
  gap: 6px;
}

.CHAT_smiles-tabs .PLAY_tab {
  padding: 8px 6px;
  font-size: 18px;
}

.CHAT_smiles-tabs .PLAY_tab .svgIcon-inline {
  width: 18px;
  height: 18px;
}

.CHAT_smiles-bar .CHAT_head-btn {
  color: #7c2d12;
  background: rgba(255, 255, 255, 0.7);
}

.CHAT_random {
  width: 100%;
  max-width: 320px;
  text-align: center;
}

.CHAT_composer {
  flex-shrink: 0;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, rgba(253, 252, 250, 0) 0%, #f8f6f3 28%);
}

.CHAT_composer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 6px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(90, 45, 15, 0.14);
}

.CHAT_input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.CHAT_input-wrap input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 8px 0 4px;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  background: transparent;
  box-shadow: none;
}

.CHAT_input-wrap input:focus {
  outline: none;
}

.CHAT_tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  color: #7c2d12;
  cursor: pointer;
  background: transparent;
  border: none;
  box-shadow: none;
}

button.CHAT_tool,
button.CHAT_tool:hover {
  background: transparent !important;
  color: #7c2d12;
  box-shadow: none !important;
}

.CHAT_tool .svgIcon-inline,
.CHAT_tool svg,
.CHAT_composer .buttonSend .svgIcon-inline,
.CHAT_composer .buttonSend svg {
  pointer-events: none;
}

.CHAT_tool .svgIcon-inline {
  width: 20px;
  height: 20px;
}

.CHAT_composer .buttonSend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #fff;
  background-color: #f6853d;
  background-image: none !important;
  box-shadow: 0 6px 16px rgba(210, 114, 54, 0.38);
}

.CHAT_composer .buttonSend .svgIcon-inline {
  width: 18px;
  height: 18px;
}

.CHAT_reply {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  max-width: 42%;
  height: 28px;
  margin: 0;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #9a3412;
  background: rgba(246, 133, 61, 0.18);
}

.CHAT_reply::after {
  content: "×";
  margin-left: 6px;
  opacity: 0.55;
}

.CHAT_voice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  height: 42px;
  border-radius: 999px;
  background: transparent;
}

.CHAT_voice-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: CHAT_pulse 1s ease-in-out infinite;
}

@keyframes CHAT_pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.CHAT_notice {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #9a3412;
  background: rgba(246, 133, 61, 0.16);
}

.MSG {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 4px 2px;
}

.MSG.innerBlock,
.MSG--tome {
  background: rgba(246, 133, 61, 0.14);
  box-shadow: inset 3px 0 0 #f6853d;
  padding-left: 8px;
}

.MSG_avatar {
  flex-shrink: 0;
  line-height: 0;
}

.MSG_photo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.MSG_col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.MSG_bubble {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.MSG_meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  width: 100%;
  margin: 0;
}

.MSG_name,
button.MSG_name,
button.MSG_name:hover {
  background: none !important;
  color: inherit;
  width: auto;
  height: auto;
  padding: 0 !important;
  border: none !important;
  border-radius: 0;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  box-shadow: none !important;
}

.MSG_rank .svgIcon-inline {
  width: 14px;
  height: 14px;
  color: #d97706;
}

.MSG_abbr {
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #7c2d12;
  background: #fdba74;
}

.MSG_mention {
  font-weight: 800;
}

.MSG_mention--me {
  padding: 0 6px;
  border-radius: 6px;
  color: #9a3412;
  background: rgba(246, 133, 61, 0.22);
}

.MSG_body {
  min-width: 0;
  font-size: 16px;
  line-height: 1.45;
  word-break: break-word;
  color: #1f2937;
}

.MSG_body audio {
  display: block;
  width: 100%;
  max-width: 100%;
}

.MSG_meta-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

.MSG_hearts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}

.MSG_act {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
}

.MSG_time {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: #8b7359;
}

.MSG_act .svgIcon-inline {
  width: 12px;
  height: 12px;
}

.MSG_hearts .svgIcon-inline {
  width: 14px;
  height: 14px;
}

.MSG_deleted {
  font-style: italic;
  opacity: 0.7;
}

.MSG_imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.MSG_caption {
  margin-bottom: 6px;
  font-size: 13px;
  color: #b45309;
}

.MSG_system {
  align-self: center;
  max-width: 90%;
  width: fit-content;
  padding: 5px 12px;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #7c2d12;
  background: rgba(255, 255, 255, 0.62);
}

.MSG_special {
  max-width: 100%;
  width: 100%;
}

.MSG_special .vipMessages {
  border-radius: 18px;
  overflow: hidden;
}

body.dark-theme .CHAT_head {
  color: #fff;
  background: #9a4418;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

body.dark-theme .CHAT_title {
  color: #fff;
}

body.dark-theme .CHAT_head-btn {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

body.dark-theme .CHAT_head-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

body.dark-theme .CHAT_head-btn--success {
  background: var(--color-green);
}

body.dark-theme .CHAT_head-btn--success:hover {
  background: var(--color-green-L);
}

body.dark-theme .CHAT_head-btn--danger {
  background: var(--color-red);
}

body.dark-theme .CHAT_head-btn--danger:hover {
  background: var(--color-red-L);
}

body.dark-theme .CHAT_card {
  background: #181410;
  border-color: rgba(255, 255, 255, 0.06);
}

body.dark-theme .CHAT_messages {
  background-color: #100e0b;
  background-image:
    radial-gradient(rgba(246, 133, 61, 0.1) 1.15px, transparent 1.15px);
}

body.dark-theme .CHAT_composer {
  background: linear-gradient(180deg, rgba(16, 14, 11, 0) 0%, #181410 28%);
}

body.dark-theme .CHAT_composer .buttonSend {
  background-color: #f6853d;
  background-image: none !important;
  color: #fff;
  box-shadow: 0 6px 16px rgba(210, 114, 54, 0.38);
}

body.dark-theme .CHAT_composer .buttonSend:hover {
  background-color: #e86a2f;
  background-image: none !important;
}

body.dark-theme .CHAT_composer-row,
body.dark-theme .CHAT_reply {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-theme .CHAT_input-wrap input,
body.dark-theme .CHAT_tool,
body.dark-theme .CHAT_voice {
  background: transparent;
  color: #f3f4f6;
}

body.dark-theme .CHAT_smiles {
  background: rgba(28, 22, 18, 0.97);
}

body.dark-theme .CHAT_smiles-bar .CHAT_head-btn {
  color: #fdba74;
  background: rgba(255, 255, 255, 0.08);
}

body.dark-theme .MSG_bubble,
body.dark-theme .MSG_body {
  color: #f3f4f6;
}

body.dark-theme .MSG--tome,
body.dark-theme .MSG.innerBlock {
  background: rgba(246, 133, 61, 0.16);
}

body.dark-theme .MSG_photo {
  border-color: rgba(255, 255, 255, 0.16);
}

body.dark-theme .MSG_time,
body.dark-theme .MSG_act {
  color: #a89888;
}

body.dark-theme .MSG_system {
  color: #fdba74;
  background: rgba(255, 255, 255, 0.08);
}

body.dark-theme .MSG_mention--me {
  color: #fdba74;
  background: rgba(246, 133, 61, 0.24);
}

@media (max-width: 640px) {
  .CHAT_head-details {
    flex: 1 1 100%;
  }

  .CHAT_shell {
    max-width: none;
    padding: 0 10px;
  }

  .CHAT_card {
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    border: none;
  }

  .CHAT_messages-inner {
    padding-left: 10px;
    padding-right: 10px;
  }

  .CHAT_composer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .CHAT_tool,
  .CHAT_input-wrap input,
  .CHAT_composer .buttonSend {
    height: 38px;
  }

  .CHAT_tool,
  .CHAT_composer .buttonSend {
    width: 38px;
  }
}