* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial,
    sans-serif;
  background: #0b1220;
  color: #e5e7eb;
}

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

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== Top Nav ===== */
.top-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.logo {
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ===== Main ===== */
.main-content {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 18px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
}

.section-title {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
}

.hint {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: rgba(229, 231, 235, 0.75);
}

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

input,
textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.25);
  color: #e5e7eb;
  padding: 10px 12px;
  outline: none;
}

textarea {
  resize: vertical;
}

button {
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  background: #2563eb;
  color: white;
  cursor: pointer;
  white-space: nowrap;
}

button:hover {
  filter: brightness(1.06);
}

/* ===== Chat ===== */
.chat-box {
  margin-top: 10px;
  height: 65vh;
  max-height: 550px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.22);
  padding: 10px;
  overflow-y: auto;
}

#messages {
  list-style: none;
  padding: 0;
  margin: 0;
}

#messages li {
  padding: 6px 8px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.msg-time {
  opacity: 0.7;
  font-size: 0.8rem;
  margin-left: 6px;
}

/* ===== Rooms section (between Search and Chat) ===== */
.rooms-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.nav-link {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
}

.nav-link.active {
  background: #2563eb;
  border-color: #2563eb;
}

/* ===== Blog Auth ===== */
.blog-auth-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 10px;
}

.auth-tab {
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  color: #e5e7eb;
}

.auth-tab.active {
  background: #2563eb;
  border-color: #2563eb;
}

.blog-login-form {
  display: grid;
  gap: 10px;
  max-width: 520px;
}

.auth-message {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.85rem;
  color: #f59e0b;
}

.blog-user-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.blog-user-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-post-form {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.char-counter {
  margin: -6px 0 0;
  font-size: 0.8rem;
  opacity: 0.75;
}

/* ===== Blog Posts ===== */
.blog-posts {
  margin-top: 10px;
  display: grid;
  gap: 12px;
}

/* =========================
   BLOG: Toolbar + Pagination + Compact view
   ========================= */
.blog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 8px;
}
.blog-toolbar-left{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.blog-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.blog-chip{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:inherit;
  border-radius:999px;
  padding:8px 10px;
  font-weight:700;
}
body.light .blog-chip{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.12)}
.blog-chip.active{background:#2563eb;border-color:#2563eb;color:#fff}
.blog-sep{width:1px;height:26px;background:rgba(255,255,255,0.12)}
body.light .blog-sep{background:rgba(0,0,0,0.12)}

.blog-pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.page-btn{padding:8px 10px;border-radius:999px}
.page-btn[disabled]{opacity:.55;cursor:not-allowed}
.page-pill{opacity:.85;font-size:.9rem}

/* Top posts small block */
.blog-top{
  margin: 8px 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
  padding: 12px;
}
body.light .blog-top{background:#fff;border-color:#e5e7eb}
.blog-top-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.blog-top-title{font-weight:900}
.blog-top-note{font-size:.85rem;opacity:.75}
.blog-top-list{display:grid;gap:8px;margin-top:10px}
.blog-top-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
}
body.light .blog-top-item{border-color:#e5e7eb;background:#f9fafb}
.blog-top-item-title{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%}
.blog-top-item-score{opacity:.9;font-weight:800}

/* Compact mode uses <details> */
.blog-details{border-radius:12px}
.blog-summary{cursor:pointer;list-style:none}
.blog-summary::-webkit-details-marker{display:none}
.blog-summary-row{display:flex;justify-content:space-between;gap:10px;align-items:center}
.blog-summary-left{min-width:0}
.blog-summary-title{margin:0;font-size:1rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blog-summary-meta{margin:4px 0 0;font-size:.85rem;opacity:.75}
.blog-summary-score{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;opacity:.9}
.blog-expand-hint{font-size:.85rem;opacity:.7}

@media (max-width: 640px){
  .blog-top-item-title{max-width:68%}
}

.blog-post {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.20);
  padding: 12px;
}

.blog-post-title {
  margin: 0 0 6px;
}

.blog-post-meta {
  margin: 0 0 10px;
  font-size: 0.85rem;
  opacity: 0.75;
}

.blog-post-content {
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.blog-post-actions {
  margin-top: 10px;
}

.blog-delete {
  background: #b91c1c;
}

.blog-delete:hover {
  background: #dc2626;
}

.hidden {
  display: none !important;
}

/* ===== Like/Dislike/Report right side ===== */
.blog-post-grid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  align-items: start;
}

.blog-post-side {
  display: flex;
  justify-content: flex-end;
}

.post-actions {
  width: 100%;
  display: grid;
  gap: 8px;
}

.vote-btn,
.report-btn {
  width: 100%;
  justify-content: space-between;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.vote-btn.active {
  border-color: rgba(37, 99, 235, 0.9);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.report-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  background: rgba(185, 28, 28, 0.20);
  border: 1px solid rgba(185, 28, 28, 0.35);
}

.report-btn {
  background: rgba(185, 28, 28, 0.20);
  border-color: rgba(185, 28, 28, 0.35);
}

.vote-readonly {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* ===== Footer ===== */
.footer {
  margin-top: auto;
  padding: 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.footer-note {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .row {
    flex-direction: column;
    align-items: stretch;
  }

  button {
    width: 100%;
  }

  .blog-post-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== NEWS TICKER (HEADER MIDDLE) ===== */
.news-ticker {
  flex: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  height: 36px;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: inline-flex;
  gap: 34px;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker-move 40s linear infinite;
}

.ticker-item {
  font-size: 0.92rem;
  opacity: 0.95;
}

.news-ticker:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (max-width: 900px) {
  .news-ticker { display: none; }
}

/* ===== Google CSE (force readable text on dark UI) ===== */
.gcse-search input,
.gcse-search .gsc-input-box input,
.gcse-search .gsib_a input {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

.gcse-search input::placeholder {
  color: rgba(255, 255, 255, 0.65) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.65) !important;
}

.gcse-search .gsc-input-box {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}


/* ===== Room count badges ===== */
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.room-badge {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.4;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  opacity: 0.9;
}

.room-count-pill {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.25);
  vertical-align: middle;
  opacity: 0.95;
}

/* ===== Theme toggle button ===== */
.theme-toggle {
  margin-left: auto;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

/* ===== Light theme ===== */
body.light {
  background: #f5f7fb;
  color: #111827;
}

body.light .card {
  background: #ffffff;
  border-color: #e5e7eb;
}

body.light input,
body.light textarea {
  background: #ffffff;
  color: #111827;
  border-color: #d1d5db;
}

body.light .chat-box {
  background: #f9fafb;
  border-color: #e5e7eb;
}

body.light .nav-link {
  background: #f3f4f6;
  border-color: #d1d5db;
}

body.light .footer {
  background: #f9fafb;
  border-color: #e5e7eb;
}

/* ===== Fix hint text readability in LIGHT theme ===== */
body.light .hint {
  color: #374151;        /* dark gray, readable */
  opacity: 1;            /* remove washed-out look */
}

/* Optional: blog helper texts */
body.light .auth-message {
  color: #b45309;        /* warm amber, readable on white */
}

/* Optional: small meta texts (dates, notes) */
body.light .blog-post-meta {
  color: #4b5563;
  opacity: 1;
}



/* ===== Link styled as button ===== */
.btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:10px;
  background:#2563eb;
  color:#fff;
}
.btn-link:hover{filter:brightness(1.06);}

.logo {
  cursor: pointer;
}

.logo:hover {
  opacity: 0.85;
}

.games-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 700;
}

.games-btn:hover {
  filter: brightness(1.08);
}

.games-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-weight: 700;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

/* 🎮 icon animation */
.games-icon {
  display: inline-block;
  transition: transform 0.2s ease;
}

.games-btn:hover .games-icon {
  transform: translateY(-4px) rotate(-8deg);
}

.rooms-title {
  position: relative;
  margin: 0 0 8px;
  padding: 6px 0;
  overflow: hidden;
}

.rooms-title .rooms-sub {
  font-size: 0.85rem;
  opacity: 0.7;
  font-weight: 500;
  margin-left: 10px;
}

.rooms-title::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translateY(-50%);
  border-radius: 999px;
  opacity: 0.18;
  background: rgba(255,255,255,0.12);
  filter: blur(10px);
  animation: glowPulse 4.8s ease-in-out infinite;
  pointer-events: none;
}

.rooms-title {
  position: relative;
  margin: 0 0 8px;
  padding: 6px 0;
  overflow: hidden;
}

.rooms-title .rooms-sub {
  font-size: 0.85rem;
  opacity: 0.7;
  font-weight: 500;
  margin-left: 10px;
}
.rooms-title {
  position: relative;
  margin: 0 0 8px;
  padding: 6px 0;
  overflow: hidden;
}

.rooms-title .rooms-sub {
  font-size: 0.85rem;
  opacity: 0.7;
  font-weight: 500;
  margin-left: 10px;
}

/* faint icon behind */
.rooms-title::before {
  content: "💬";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 42px;
  opacity: 0.10;           /* keep it subtle */
  pointer-events: none;
  filter: blur(0.2px);
  animation: roomsFloat 6s ease-in-out infinite;
}

@keyframes roomsFloat {
  0%, 100% { transform: translateY(-50%) translateX(0) rotate(-6deg); }
  50%      { transform: translateY(-55%) translateX(-6px) rotate(6deg); }
}

/* Light mode: slightly different opacity */
body.light .rooms-title::before {
  opacity: 0.08;
}

body.light .rooms-title::before {
  opacity: 0.22;
  color: rgba(0, 0, 0, 0.25);
  text-shadow: 0 0 6px rgba(0,0,0,0.12);
}
.site-footer {
  margin-top: 24px;
  padding: 18px 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

body.light .site-footer {
  background: rgba(255,255,255,0.85);
  border-top: 1px solid rgba(0,0,0,0.10);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 1fr;
  gap: 14px;
  align-items: center;
}

.footer-brand {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.footer-note {
  opacity: 0.75;
  font-size: 0.9rem;
  margin-top: 4px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: center;
}

.footer-links a {
  text-decoration: none;
  opacity: 0.85;
}

.footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btn-donate, .btn-bitcoin {
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.light .btn-donate, body.light .btn-bitcoin {
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.04);
}

.btn-donate:hover, .btn-bitcoin:hover {
  filter: brightness(1.08);
}

.footer-bottom {
  max-width: 1100px;
  margin: 14px auto 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,0.12);
  opacity: 0.75;
  font-size: 0.9rem;
}

body.light .footer-bottom {
  border-top: 1px dashed rgba(0,0,0,0.14);
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .footer-links {
    justify-content: flex-start;
  }
  .footer-actions {
    justify-content: flex-start;
  }
}

/* =========================
   ADMIN PANEL (improved)
   ========================= */
.admin-wrap{max-width:1100px;margin:18px auto;padding:0 16px;display:grid;gap:14px}
.admin-card{padding:16px}
.admin-inner{background:rgba(255,255,255,0.04)}
body.light .admin-inner{background:#fff}

.admin-login-row{display:grid;grid-template-columns:1fr;gap:12px}
.admin-secret-wrap{display:grid;gap:10px}
.admin-secret-row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.admin-secret-row input{flex:1;min-width:260px}
.admin-actions-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-label{font-size:.85rem;opacity:.85}
.admin-check{display:inline-flex;gap:8px;align-items:center;font-size:.9rem;opacity:.9}

.admin-tabs{display:flex;gap:10px;flex-wrap:wrap}
.admin-tab{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);color:inherit}
.admin-tab.active{background:#2563eb;border-color:#2563eb}
body.light .admin-tab{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12)}
body.light .admin-tab.active{color:#fff}

.btn-soft{background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.16);color:inherit}
.btn-soft:hover{filter:brightness(1.08)}
.btn-danger-soft{background:rgba(185,28,28,0.18);border:1px solid rgba(185,28,28,0.35);color:inherit}
.btn-danger-soft:hover{filter:brightness(1.08)}
body.light .btn-soft{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.12)}
body.light .btn-danger-soft{background:rgba(185,28,28,0.10);border-color:rgba(185,28,28,0.22)}

.admin-grid{display:grid;grid-template-columns:1fr;gap:14px}
.admin-grid-2{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 900px){ .admin-grid-2{grid-template-columns:1fr 1fr} }

.admin-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-row input,.admin-row select{min-width:220px}
.admin-head-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.admin-h3{margin:0 0 10px 0;font-size:1rem}
.admin-pill{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);font-size:.85rem;opacity:.95}
body.light .admin-pill{background:rgba(0,0,0,0.04);border-color:rgba(0,0,0,0.12)}

.admin-subhead{margin:12px 0 8px;font-weight:800;opacity:.9}
.admin-table-wrap{overflow:auto;border-radius:12px;border:1px solid rgba(255,255,255,0.10)}
body.light .admin-table-wrap{border-color:rgba(0,0,0,0.10)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.10);text-align:left;font-size:14px;vertical-align:top}
body.light .admin-table th, body.light .admin-table td{border-bottom:1px solid rgba(0,0,0,.10)}
.admin-td-actions{white-space:nowrap;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

.admin-split{display:grid;gap:14px}
@media (min-width: 900px){ .admin-split{grid-template-columns:1fr 1fr} }

.admin-foot-row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.hint.bad{color:#fca5a5;opacity:1}

.admin-stat{display:grid;gap:6px}
.admin-stat-big{font-size:2.2rem;font-weight:900;letter-spacing:0.5px}
.admin-stat-sub{font-size:.92rem;opacity:.8}

.room-stats{display:grid;gap:10px}
.room-stat{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06)}
body.light .room-stat{border-color:rgba(0,0,0,0.12);background:rgba(0,0,0,0.04)}
.room-name{font-weight:800;text-transform:capitalize}
.room-count{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.12)}
body.light .room-count{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.12)}

.admin-toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(10px);
  padding:10px 12px;border-radius:14px;
  background:rgba(0,0,0,0.85);border:1px solid rgba(255,255,255,0.14);
  color:#e5e7eb;opacity:0;z-index:9999;
  transition:opacity .2s ease, transform .2s ease;
  max-width:92vw;
}
body.light .admin-toast{background:rgba(255,255,255,0.95);color:#111827;border-color:rgba(0,0,0,0.12)}
.admin-toast.ok{box-shadow:0 18px 50px rgba(0,0,0,0.35)}
.admin-toast.bad{border-color:rgba(185,28,28,0.40)}
.admin-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* RichZora logo image */

.logo-img{
  height: 36px;
  width: auto;
  display: block;
}
@media (max-width:520px){
  .logo-img{ height: 32px; }
}






/* CHAT BOX BASE */
.chat-box {
  position: relative;
  background-color: #0f1115;
  overflow: hidden;
}

/* REMOVE any accidental background image */
.chat-box {
  background-image: none !important;
}

/* WATERMARK LOGO */
.chat-box::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("/richzora.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35%;

  opacity: 0.05;              
  pointer-events: none;
  z-index: 0;
}

/* CHAT CONTENT ABOVE LOGO */
.chat-box > * {
  position: relative;
  z-index: 1;
}