/* ═══════════════════════════════════════════════════════════
   CHIYA GUFF — chiyaguff.css
   Discord depth · Apple clean · Duolingo dopamine · X clarity
   Gen-Z premium social chat
═══════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes cg-spinDisc  { to { transform: rotate(360deg); } }
@keyframes cg-livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(1.5)} }
@keyframes cg-msgIn     { from{opacity:0;transform:translateY(8px) scale(.97)} to{opacity:1;transform:none} }
@keyframes cg-hubFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes cg-shimmer   { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes cg-bounce    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }
@keyframes cg-recPulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(1.3)} }
@keyframes cg-flashGlow { from{box-shadow:0 8px 24px rgba(217,119,6,.35)} to{box-shadow:0 8px 40px rgba(217,119,6,.75),0 0 0 3px rgba(253,230,138,.35)} }
@keyframes cg-tPot      { from{transform:translateY(0)} to{transform:translateY(-6px)} }
@keyframes cg-slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
@keyframes cg-fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes cg-dripFlow  { to{background-position:200% center} }
@keyframes cg-pop       { 0%{transform:scale(0.88);opacity:0} 60%{transform:scale(1.04)} 100%{transform:scale(1);opacity:1} }

/* body background intentionally removed — inherits global gradient from style.css */

/* ── Root layout ── */
.main.guff-wrap { height: 100vh; overflow: hidden; padding: 0; }
@media(max-width:600px) { .main.guff-wrap { height: calc(100vh - var(--bottom-nav-height)); } }

.guff-container {
  display: flex; flex: 1; overflow: hidden; height: 100%;
  background: transparent; position: relative;
}

/* ══════════════════════════════════════
   SIDEBAR — Dark club lounge (Discord-deep)
══════════════════════════════════════ */

/* ── Sidebar: deep nightclub warmth ── */
.guff-sidebar {
  width: 300px; flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  background: #1C1214;
  overflow: hidden;
}

/* Header */
.sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #1C1214;
  display: flex; align-items: center; justify-content: space-between;
}
.sidebar-header h2 {
  font-size: .98rem; font-weight: 900; color: rgba(255,255,255,.90);
  display: flex; align-items: center; gap: 8px; margin: 0;
}
.sidebar-header h2 i { color: var(--primary); font-size: .95rem; }

/* Header action buttons — dark glass style */
.guff-hdr-btn {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .80rem; cursor: pointer; transition: all .15s; flex-shrink: 0;
  font-family: inherit; border: none;
}
.guff-hdr-btn-ghost {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.10);
}
.guff-hdr-btn-ghost:hover { background: rgba(200,16,46,.18); color: #fff; border-color: rgba(200,16,46,.3); }
.guff-hdr-btn-primary {
  background: var(--primary); color: #fff;
  border: none; box-shadow: 0 2px 10px rgba(200,16,46,.45);
}
.guff-hdr-btn-primary:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(200,16,46,.55); }

/* Search */
.room-search-wrap { padding: 8px 12px 6px; }
.room-search-input {
  width: 100%; padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-pill);
  font-family: inherit; font-size: .78rem;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.80);
  outline: none; transition: all .18s; box-sizing: border-box;
}
.room-search-input::placeholder { color: rgba(255,255,255,.28); }
.room-search-input:focus {
  border-color: rgba(200,16,46,.4); background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 2px rgba(200,16,46,.15);
}

/* Room list */
.room-list {
  flex: 1; overflow-y: auto; padding: 6px 8px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent;
}
.room-list::-webkit-scrollbar { width: 3px; }
.room-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 4px; }

/* ── Room item — Dark Discord club channel row ── */
.room-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  transition: all .14s; margin-bottom: 2px;
  background: transparent; border: 1px solid transparent; position: relative;
}
.room-item:hover {
  background: rgba(255,255,255,.06);
}
.room-item.active {
  background: rgba(200,16,46,.18);
  border-color: rgba(200,16,46,.20);
  box-shadow: inset 3px 0 0 var(--primary);
}
.room-item.active .room-name { color: #fff; font-weight: 900; }

/* Room icon */
.room-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65); font-size: 1.1rem;
  transition: transform .18s; overflow: hidden;
}
.room-icon img { width: 100%; height: 100%; object-fit: cover; }
.room-item:hover .room-icon { transform: scale(1.06) rotate(-2deg); }
.room-item.active .room-icon { background: rgba(200,16,46,.28); color: #fff; border-color: rgba(200,16,46,.3); }

/* Club rooms — crimson spin */
.room-icon.is-club {
  background: linear-gradient(135deg, var(--primary) 0%, #6B0A1A 100%) !important;
  color: #fff; border: none;
  animation: cg-spinDisc 5s linear infinite;
  box-shadow: 0 2px 10px rgba(200,16,46,.4);
}
.room-item.active .room-icon.is-club { animation-duration: 2.5s; }

/* Live pulse — brand crimson (not green) */
.room-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
  animation: cg-livePulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 2.5px rgba(200,16,46,.25);
}

/* Room info */
.room-info { min-width: 0; flex: 1; }
.room-name {
  font-weight: 700; font-size: .85rem; color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-meta {
  font-size: .66rem; color: rgba(255,255,255,.38); margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}
.room-private-badge {
  font-size: .52rem; font-weight: 800; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.10); border-radius: 4px;
  padding: 1px 5px; margin-left: 3px; vertical-align: middle;
}
.room-last-msg {
  font-size: .66rem; color: rgba(255,255,255,.38);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px; max-width: 170px;
}
.room-last-time { font-size: .58rem; color: rgba(255,255,255,.28); white-space: nowrap; flex-shrink: 0; }
.room-unread-badge {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: var(--primary); color: #fff;
  font-size: .58rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 0 5px; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(200,16,46,.5);
}

/* Scope badges — all neutral on dark sidebar */
.room-scope-badge {
  font-size: .52rem; font-weight: 800; border-radius: 5px;
  padding: 1px 6px; margin-left: 3px; vertical-align: middle; letter-spacing: .3px;
}
.room-scope-badge.local    { background: rgba(200,16,46,.25); color: #ff9999; }
.room-scope-badge.national { background: rgba(255,255,255,.10); color: rgba(255,255,255,.5); }

/* Leave button */
.room-item-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.room-leave-btn {
  width: 24px; height: 24px; border-radius: 50%; border: none; background: none;
  color: rgba(255,255,255,.3); font-size: .68rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .14s;
}
.room-leave-btn:hover { background: rgba(220,38,38,.2); color: #ff6b6b; }

/* ── City-Splice banner (seamlessly dark on sidebar) ── */
.city-splice-banner {
  display: none; margin: 8px; border-radius: 14px; padding: 12px 14px;
  background: linear-gradient(135deg, #2C0A12 0%, #4A0D1A 60%, #380812 100%);
  color: #fff; font-size: .76rem; cursor: pointer;
  animation: cg-slideDown .3s ease;
  box-shadow: 0 4px 16px rgba(200,16,46,.25);
  border: 1px solid rgba(200,16,46,.30);
}
.city-splice-banner.show { display: block; }
.city-splice-banner strong { display: block; font-size: .86rem; margin-bottom: 3px; font-weight: 900; }
.city-splice-banner .csp-btns { display: flex; gap: 8px; margin-top: 10px; }
.csp-join {
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-pill); padding: 6px 16px;
  font-size: .74rem; font-weight: 800; cursor: pointer; font-family: inherit;
  box-shadow: 0 3px 10px rgba(200,16,46,.4); transition: transform .14s;
}
.csp-join:hover { transform: scale(1.04); }
.csp-dismiss {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: .74rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .14s;
}
.csp-dismiss:hover { background: rgba(255,255,255,.14); }

/* ── Nearby banner (dark sidebar pill) ── */
.nearby-banner {
  display: flex; align-items: center; gap: 8px;
  background: rgba(200,16,46,.12); border: 1px solid rgba(200,16,46,.22);
  border-radius: 12px; padding: 8px 12px; margin: 6px 10px 2px;
  font-size: .74rem; color: rgba(255,255,255,.75);
  animation: cg-slideDown .3s ease;
}
.nearby-banner i { font-size: .78rem; flex-shrink: 0; color: var(--primary); }
.nearby-banner span { flex: 1; font-weight: 600; }
.nearby-banner button,
.nearby-banner button:link,
.nearby-banner button:visited {
  background: var(--primary) !important; color: #fff !important; border: none !important;
  padding: 4px 13px; border-radius: var(--radius-pill);
  font-family: inherit; font-size: .70rem; font-weight: 800;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(200,16,46,.4); transition: transform .14s;
  animation: cg-bounce 1.8s ease-in-out infinite;
}
.nearby-banner button:hover { transform: scale(1.05) !important; }

/* ══════════════════════════════════════
   MAIN PANEL — Chat + Hub
══════════════════════════════════════ */
.guff-main {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: transparent; position: relative; overflow: hidden;
}

/* ── Chat Header ── */
.chat-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--glass-nav);
  backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  z-index: 10; flex-shrink: 0; position: sticky; top: 0;
}
.chat-header-info { display: flex; flex-direction: column; gap: 1px; }
.active-room-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
  flex-shrink: 0; border: 1px solid var(--border-strong); overflow: hidden;
  background: var(--bg-main);
}
.active-room-icon img { width: 100%; height: 100%; object-fit: cover; }
.chat-header-info h3 { font-weight: 900; font-size: .94rem; margin: 0; display: flex; align-items: center; gap: 7px; letter-spacing: -.2px; }
.chat-header-info p  { font-size: .70rem; color: var(--text-muted); margin: 0; }

/* Live chip — brand crimson */
.live-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--primary); color: #fff;
  font-size: .56rem; font-weight: 900; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(200,16,46,.3);
}
.live-chip::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.8);
  animation: cg-livePulse .9s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(255,255,255,.6);
}

/* Level pill */
.level-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--text); color: #fff;
  font-size: .58rem; font-weight: 900; padding: 2px 9px; border-radius: 20px;
}
.level-pill i { font-size: .50rem; }

/* Leaderboard strip */
.leaderboard-strip { display: flex; gap: 8px; align-items: center; font-size: .66rem; font-weight: 800; color: var(--text-muted); }
.lb-crown { display: flex; align-items: center; gap: 4px; }
.lb-avatar {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #f59e0b;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex; align-items: center; justify-content: center;
  font-size: .60rem; font-weight: 900; color: #92400e;
  box-shadow: 0 0 0 2px rgba(245,158,11,.2);
}

/* ── Chat Messages ── */
.chat-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 20px; display: flex; flex-direction: column-reverse;
  background: var(--bg-elevated);
  background-image: radial-gradient(rgba(200,16,46,.03) 1px, transparent 1px);
  background-size: 24px 24px;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* Scroll-to-bottom */
.scroll-bottom-btn {
  position: absolute; bottom: 88px; right: 20px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center; font-size: .88rem;
  z-index: 20; box-shadow: var(--shadow-red); transition: all .18s;
  animation: cg-bounce 2s ease-in-out infinite;
}
.scroll-bottom-btn.show { display: flex; }
.scroll-bottom-btn:hover { transform: scale(1.1); }

/* ── Message groups ── */
.msg-group {
  display: flex; gap: 9px; margin-bottom: 14px;
  max-width: 82%; animation: cg-msgIn .2s var(--ease); position: relative;
}
.msg-group.me { flex-direction: row-reverse; align-self: flex-end; }

/* Avatars */
.msg-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg-main); border: 1.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .70rem; flex-shrink: 0; cursor: pointer;
  transition: transform .14s; overflow: hidden; color: var(--text-secondary);
}
.msg-avatar:hover { transform: scale(1.08); }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-group.me .msg-avatar { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Elite borders */
.msg-avatar.chiya-don { border-color: #f59e0b; box-shadow: 0 0 0 2.5px rgba(245,158,11,.2), 0 0 10px rgba(245,158,11,.25); }
.msg-avatar.momo-king { border-color: var(--primary); box-shadow: 0 0 0 2.5px rgba(200,16,46,.2); }

/* Content */
.msg-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-user { font-size: .66rem; font-weight: 800; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.msg-group.me .msg-user { flex-direction: row-reverse; }

/* Level badges — 6-tier gamification */
.level-badge { font-size: .56rem; font-weight: 900; padding: 1px 6px; border-radius: 20px; letter-spacing: .3px; }
.lvl-1 { background: var(--bg-main); color: var(--text-muted); border: 0.5px solid var(--border-strong); }
.lvl-2 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
.lvl-3 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }
.lvl-4 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.lvl-5 { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; }
.lvl-god {
  background: linear-gradient(135deg, #f59e0b, #C8102E, #f59e0b); color: #fff;
  background-size: 200% auto; animation: cg-shimmer 2s linear infinite;
}

/* Bubbles */
.msg-bubble {
  padding: 9px 14px; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  font-size: .86rem; line-height: 1.55; color: var(--text);
  box-shadow: 0 1px 4px rgba(0,0,0,.05); position: relative;
}
.msg-group:not(.me) .msg-bubble { border-radius: 16px 16px 16px 2px; }
.msg-group.me .msg-bubble {
  background: var(--primary); color: #fff; border: none;
  border-radius: 16px 16px 2px 16px;
  box-shadow: 0 3px 12px rgba(200,16,46,.28);
}

/* Gift/chiya bubble — brand crimson soft (not amber) */
.msg-gift {
  background: var(--primary-soft) !important;
  border: 1.5px solid rgba(200,16,46,.22) !important;
  color: var(--primary-active) !important;
  font-weight: 700; display: flex; align-items: center; gap: 10px;
  border-radius: 16px; padding: 12px 16px !important;
}
.gift-icon { font-size: 1.6rem; animation: cg-tPot .8s ease-in-out infinite alternate; }

/* Report button */
.msg-report-btn {
  position: absolute; top: 0; right: 0;
  opacity: 0; pointer-events: none;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 50%;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  font-size: .60rem; color: var(--text-muted); cursor: pointer;
  transition: opacity .14s, color .14s; z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.msg-group:not(.me):hover .msg-report-btn { opacity: 1; pointer-events: auto; }
.msg-report-btn:hover { color: #dc2626; border-color: #dc2626; background: #fef2f2; }

/* Action buttons (elder mute) */
.msg-actions { position: absolute; top: -2px; right: -2px; display: flex; gap: 3px; opacity: 0; pointer-events: none; transition: opacity .14s; }
.msg-group:not(.me):hover .msg-actions { opacity: 1; pointer-events: auto; }
.msg-action-btn {
  width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-muted); font-size: .60rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .14s; box-shadow: 0 1px 6px rgba(0,0,0,.10);
}
.msg-action-btn:hover { color: #dc2626; border-color: #dc2626; background: #fef2f2; }

/* System message */
.msg-system {
  text-align: center; color: var(--text-muted); font-size: .70rem; font-style: italic;
  padding: 3px 10px; margin: 3px auto;
  background: rgba(0,0,0,.04); border-radius: 20px; width: fit-content;
}
.msg-muted .msg-bubble { opacity: .32; font-style: italic; pointer-events: none; }
.msg-muted .msg-user::after { content: ' · muted'; color: #dc2626; font-style: italic; }

/* Typing indicator */
.typing-indicator { display: none; padding: 4px 20px; font-size: .70rem; color: var(--text-muted); font-style: italic; align-items: center; gap: 5px; }
.typing-indicator.show { display: flex; }
.typing-dots { display: flex; gap: 3px; }
.typing-dots span { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); animation: cg-livePulse .9s ease-in-out infinite; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }

/* ── HOT TEA snippets bar — brand accent not amber ── */
.snippets-bar {
  border-bottom: 1px solid var(--border-strong);
  background: var(--bg-card); max-height: 156px; overflow-y: auto; flex-shrink: 0;
}
.snippets-bar-header {
  padding: 8px 14px 4px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 5; background: var(--bg-card);
  border-bottom: 0.5px solid var(--border-strong);
}
.snippets-bar-header span {
  font-size: .62rem; font-weight: 900; color: var(--primary);
  text-transform: uppercase; letter-spacing: .6px;
  display: flex; align-items: center; gap: 5px;
}
.snippet-post-btn {
  background: none; border: 1.5px solid var(--primary); color: var(--primary);
  border-radius: var(--radius-pill); padding: 2px 11px;
  font-size: .66rem; font-weight: 800; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.snippet-post-btn:hover { background: var(--primary); color: #fff; }
.snippet-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 6px 14px;
  border-top: 0.5px solid var(--border-strong); font-size: .76rem; color: var(--text);
  transition: background .13s;
}
.snippet-item:hover { background: var(--bg-main); }
.snippet-item.steaming { background: var(--primary-soft); }
.snippet-steam-icon { font-size: .95rem; flex-shrink: 0; }
.snippet-body { flex: 1; line-height: 1.4; }
.snippet-meta { font-size: .60rem; color: var(--text-muted); margin-top: 2px; }
.snippet-upvote {
  background: none; border: 1px solid var(--border-strong); border-radius: 20px;
  padding: 2px 8px; font-size: .66rem; font-weight: 800; cursor: pointer;
  color: var(--text-muted); font-family: inherit;
  display: flex; align-items: center; gap: 3px; transition: all .15s; flex-shrink: 0;
}
.snippet-upvote:hover, .snippet-upvote.voted { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.snippets-empty { padding: 8px 14px; font-size: .74rem; color: var(--text-muted); font-style: italic; }

/* ── Input area ── */
.chat-input-area {
  padding: 10px 16px 14px; background: var(--bg-card);
  border-top: 1px solid var(--border-strong); flex-shrink: 0;
}
.chat-form {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-main); padding: 5px 10px;
  border-radius: var(--radius-pill); border: 1.5px solid var(--border-strong);
  transition: all .18s;
}
.chat-form:focus-within {
  border-color: var(--primary); background: var(--bg-card);
  box-shadow: 0 0 0 2.5px rgba(200,16,46,.08);
}
.chat-input {
  flex: 1; border: none; background: transparent;
  padding: 7px 3px; font-family: inherit; font-size: .88rem;
  outline: none; color: var(--text);
}
.chat-input::placeholder { color: var(--text-faint); }
.chat-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--primary); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s;
  box-shadow: 0 2px 8px rgba(200,16,46,.32); flex-shrink: 0;
}
.chat-btn:hover { transform: scale(1.1) rotate(-5deg); box-shadow: var(--shadow-red); }
.chat-btn:active { transform: scale(.92); }
.chat-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
/* Input action buttons — all neutral until hover */
.gift-btn {
  background: none; border: none; color: var(--text-faint); font-size: 1rem;
  cursor: pointer; padding: 5px; flex-shrink: 0; transition: all .15s;
}
.gift-btn:hover { transform: scale(1.18) rotate(6deg); color: var(--primary); }

/* Mobile back button */
.chat-back-btn { display: none; }

/* ── Gift modal ── */
.gift-modal {
  position: absolute; bottom: 76px; right: 16px;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 12px;
  box-shadow: var(--shadow-lg); display: none; z-index: 100; width: 200px;
  animation: cg-slideDown .16s var(--ease);
}
.gift-modal.open { display: block; }
.gift-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: all .13s;
}
.gift-option:hover { background: var(--primary-soft); transform: translateX(2px); }
.gift-option span { font-size: .78rem; font-weight: 800; }
.gift-price { font-size: .68rem; color: var(--gold-deep); font-weight: 900; }

/* ══════════════════════════════════════
   SOCIAL HUB / DASHBOARD
══════════════════════════════════════ */
.guff-main.social-hub { overflow-y: auto; }

/* Hub header — matches Pasal/Radar hero */
.hub-header {
  padding: 28px 28px 24px;
  background: linear-gradient(145deg, #C8102E 0%, #920A1E 46%, #4A0210 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  position: sticky; top: 0; z-index: 5; flex-shrink: 0; overflow: hidden;
}
.hub-header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 90% -20%, rgba(255,255,255,.10) 0%, transparent 60%);
}
.hub-header::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.hub-icon {
  width: 66px; height: 66px; border-radius: 20px;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.28);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; flex-shrink: 0;
  animation: cg-hubFloat 3.5s ease-in-out infinite;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); backdrop-filter: blur(10px);
  position: relative; z-index: 1;
}
.hub-header-content { position: relative; z-index: 1; }
.hub-header-content h1 { font-size: 1.8rem; font-weight: 900; letter-spacing: -1px; margin: 0 0 4px; color: #fff; line-height: 1.05; }
.hub-header-content p  { color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 500; margin: 0; }

/* J-Points wallet card (inside hub header) */
.wallet-card {
  border-radius: 18px; padding: 16px 20px; color: #fff;
  max-width: 260px; width: 100%; position: relative; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  z-index: 1;
}
.wallet-card::before {
  content: ''; position: absolute; right: -24px; top: -24px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,.06); pointer-events: none;
}
.wallet-label { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; opacity: .75; }
.wallet-points { font-size: 2.2rem; font-weight: 900; line-height: 1.05; margin: 3px 0 10px; letter-spacing: -1px; }
.wallet-row { display: flex; gap: 18px; }
.wallet-sub .wallet-label { font-size: .56rem; opacity: .60; }
.wallet-sub-val { font-size: .88rem; font-weight: 800; }

/* XP strip */
.xp-strip { margin: 10px 0 0; }
.xp-strip-label { font-size: .60rem; opacity: .65; font-weight: 700; margin-bottom: 5px; display: flex; justify-content: space-between; }
.xp-bar-track { height: 6px; background: rgba(255,255,255,.18); border-radius: 10px; overflow: hidden; }
.xp-bar-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
  background-size: 200% 100%;
  animation: cg-shimmer 2s linear infinite;
  transition: width .5s ease;
}

/* Hub content area */
#hub-content { padding: 20px; }
.hub-section { margin-bottom: 36px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-head h3 {
  font-size: .95rem; font-weight: 900; display: flex; align-items: center; gap: 8px;
  letter-spacing: -.2px; color: var(--text);
}
.section-head h3 i { color: var(--primary); font-size: .88rem; }
.section-head a { font-size: .76rem; font-weight: 800; color: var(--primary); text-decoration: none; transition: opacity .14s; }
.section-head a:hover { opacity: .72; }

/* ── Jhole Club Cards — brand red (not indigo/purple) ── */
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.club-card {
  background: var(--primary-soft);
  border: 1.5px solid rgba(200,16,46,.15); border-radius: var(--radius); padding: 18px;
  display: flex; gap: 14px; align-items: center; cursor: pointer;
  transition: all .2s var(--ease); position: relative; overflow: hidden;
}
.club-card::after {
  content: ''; position: absolute; right: -16px; bottom: -16px;
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(200,16,46,.06); pointer-events: none;
}
.club-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-red);
  border-color: rgba(200,16,46,.28);
}
.club-card .club-icon {
  width: 52px; height: 52px;
  background: var(--primary); color: #fff;
  border-radius: 14px; display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(200,16,46,.3);
  animation: cg-spinDisc 10s linear infinite;
}
.club-card:hover .club-icon { animation-duration: 4s; }
.club-card .club-info h4 { font-weight: 900; font-size: .92rem; margin-bottom: 2px; color: var(--primary-active); }
.club-card .club-info p  { font-size: .74rem; color: var(--primary); font-weight: 700; }

/* Hub empty state */
.hub-empty {
  grid-column: 1/-1; padding: 40px 20px; background: var(--bg-main);
  border-radius: var(--radius); color: var(--text-muted);
  font-size: .84rem; font-weight: 600; text-align: center;
  border: 1px solid var(--border-strong);
}

.badge-new {
  background: var(--primary); color: #fff;
  font-size: .60rem; font-weight: 900; padding: 2px 8px;
  border-radius: 20px; box-shadow: 0 2px 6px rgba(200,16,46,.3);
}
.btn-hub-action {
  background: var(--bg-card); border: 1.5px solid var(--border-strong);
  padding: 6px 14px; border-radius: 20px; font-size: .74rem; font-weight: 800;
  color: var(--primary); cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: all .15s;
}
.btn-hub-action:hover { border-color: var(--primary); background: var(--primary-soft); }

/* ══════════════════════════════════════
   MODALS
══════════════════════════════════════ */

/* Browse rooms */
.browse-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px;
  animation: cg-fadeIn .2s ease;
}
.browse-overlay.open { display: flex; }
.browse-modal {
  background: var(--bg-card); border-radius: var(--radius); padding: 0;
  max-width: 460px; width: 100%; max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-xl); overflow: hidden; border: 1px solid var(--border-card);
}
.browse-modal-header {
  padding: 18px 22px 12px; border-bottom: 0.5px solid var(--border-strong);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.browse-modal-header h3 { font-size: 1rem; font-weight: 900; margin: 0; }
.browse-modal-header p  { font-size: .74rem; color: var(--text-muted); margin: 3px 0 0; }
.browse-close-btn {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--bg-main); color: var(--text-muted); font-size: .82rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .14s;
}
.browse-close-btn:hover { background: var(--primary-soft); color: var(--primary); transform: rotate(90deg); }
.browse-search-wrap { padding: 10px 20px; border-bottom: 0.5px solid var(--border-strong); flex-shrink: 0; }
.browse-search {
  width: 100%; padding: 8px 15px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
  font-family: inherit; font-size: .82rem; color: var(--text);
  background: var(--bg-main); outline: none; transition: all .18s; box-sizing: border-box;
}
.browse-search:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 2.5px rgba(200,16,46,.08); }
.browse-room-list { overflow-y: auto; flex: 1; padding: 8px; }
.browse-room-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: 12px; margin-bottom: 4px; border: 1px solid var(--border-strong);
  background: var(--bg-card); transition: all .15s;
}
.browse-room-item:hover { box-shadow: 0 3px 12px rgba(200,16,46,.08); border-color: var(--primary); }
.browse-room-info { min-width: 0; flex: 1; }
.browse-room-name { font-weight: 800; font-size: .86rem; }
.browse-room-desc { font-size: .70rem; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-join-btn {
  padding: 6px 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--primary);
  background: none; color: var(--primary); font-family: inherit; font-size: .76rem; font-weight: 800;
  cursor: pointer; white-space: nowrap; transition: all .15s; flex-shrink: 0;
}
.browse-join-btn:hover { background: var(--primary); color: #fff; }
.browse-join-btn.joined { background: var(--primary); color: #fff; }

/* Create group modal */
.create-group-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px;
}
.create-group-overlay.open { display: flex; }
.create-group-modal {
  background: var(--bg-card); border-radius: var(--radius); padding: 26px 22px 22px;
  max-width: 380px; width: 100%; box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-card);
}
/* h3/p inside the new split modal are scoped to .cg-right-header — no top-level overrides needed */
.cg-field { margin-bottom: 12px; }
.cg-field label { display: block; font-size: .68rem; font-weight: 800; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .6px; }
.cg-field input, .cg-field textarea {
  width: 100%; padding: 9px 13px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .84rem; color: var(--text); background: var(--bg-main);
  outline: none; transition: all .18s; box-sizing: border-box; resize: none;
}
.cg-field input:focus, .cg-field textarea:focus { border-color: var(--primary); background: var(--bg-card); box-shadow: 0 0 0 2.5px rgba(200,16,46,.08); }
.cg-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.cg-toggle-row span { font-size: .84rem; font-weight: 700; }
.cg-toggle-row small { font-size: .70rem; color: var(--text-muted); }
.cg-toggle { position: relative; display: inline-block; width: 42px; height: 24px; }
.cg-toggle input { opacity: 0; width: 0; height: 0; }
.cg-slider { position: absolute; inset: 0; background: var(--border-strong); border-radius: 12px; transition: .28s; cursor: pointer; }
.cg-slider:before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.28s; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.cg-toggle input:checked + .cg-slider { background: var(--primary); }
.cg-toggle input:checked + .cg-slider:before { transform: translateX(18px); }
.cg-footer { display: flex; gap: 8px; margin-top: 18px; }
.cg-footer button { flex: 1; padding: 11px; border-radius: var(--radius-pill); border: none; font-family: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; transition: all .15s; }
.cg-footer button:hover { transform: translateY(-1px); }
.cg-cancel { background: var(--bg-main); border: 1.5px solid var(--border-strong) !important; color: var(--text-muted); }
.cg-submit { background: var(--primary); color: #fff; box-shadow: var(--shadow-red); }
.cg-submit:hover { box-shadow: var(--shadow-red-lg); }
.cg-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Report modal */
.report-overlay { position:fixed; inset:0; background:rgba(0,0,0,.52); backdrop-filter:blur(6px); z-index:3000; display:flex; align-items:center; justify-content:center; padding:20px; animation:cg-fadeIn .2s ease; }
.report-modal  { background:var(--bg-card); border-radius:var(--radius); padding:22px 20px; max-width:340px; width:100%; box-shadow:var(--shadow-xl); border:1px solid var(--border-card); }
.report-modal h3 { font-size:.92rem; font-weight:900; margin:0 0 3px; }
.report-modal p  { font-size:.76rem; color:var(--text-muted); margin:0 0 12px; line-height:1.5; }
.report-reasons { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.report-reason-btn { text-align:left; background:var(--bg-main); border:1px solid var(--border-strong); border-radius:10px; padding:8px 13px; font-size:.78rem; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; }
.report-reason-btn:hover, .report-reason-btn.selected { background:var(--primary-soft); border-color:var(--primary); color:var(--primary); }
.report-footer { display:flex; justify-content:space-between; gap:8px; }

/* Snippet modal */
.snippet-overlay { position:fixed; inset:0; background:rgba(0,0,0,.52); backdrop-filter:blur(6px); z-index:3000; display:none; align-items:center; justify-content:center; padding:20px; animation:cg-fadeIn .2s ease; }
.snippet-overlay.open { display:flex; }
.snippet-modal { background:var(--bg-card); border-radius:var(--radius); padding:22px 20px 18px; max-width:360px; width:100%; box-shadow:var(--shadow-xl); border:1px solid var(--border-card); }
.snippet-modal h4 { font-size:.92rem; font-weight:900; margin:0 0 3px; }
.snippet-modal p  { font-size:.74rem; color:var(--text-muted); margin:0 0 12px; }
.snippet-modal textarea { width:100%; border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); padding:10px 13px; font-family:inherit; font-size:.84rem; resize:none; outline:none; box-sizing:border-box; background:var(--bg-main); color:var(--text); transition:all .18s; }
.snippet-modal textarea:focus { border-color:var(--primary); background:var(--bg-card); box-shadow:0 0 0 2.5px rgba(200,16,46,.08); }
.snippet-char-count { font-size:.66rem; color:var(--text-muted); text-align:right; margin-top:3px; }
.snippet-footer { display:flex; gap:8px; margin-top:12px; }
.snippet-footer button { flex:1; padding:10px; border-radius:var(--radius-pill); border:none; font-family:inherit; font-size:.82rem; font-weight:800; cursor:pointer; transition:all .15s; }
.snippet-footer button:hover { transform:translateY(-1px); }
.snp-cancel { background:var(--bg-main); border:1.5px solid var(--border-strong) !important; color:var(--text-muted); }
.snp-submit { background:var(--primary); color:#fff; box-shadow:var(--shadow-red); }

/* Drop listing sheet */
.drop-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:blur(4px); z-index:3000; display:none; align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s; }
.drop-overlay.open { display:flex; opacity:1; }
.drop-sheet { width:100%; max-width:500px; background:var(--bg-card); border-top-left-radius:24px; border-top-right-radius:24px; padding:22px 18px 36px; transform:translateY(100%); transition:transform .3s var(--ease-spring); max-height:80vh; display:flex; flex-direction:column; }
.drop-overlay.open .drop-sheet { transform:translateY(0); }
.drop-sheet-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.drop-sheet-header h4 { margin:0; font-size:1.05rem; font-weight:800; }
.drop-sheet-close { width:30px; height:30px; border-radius:50%; border:none; background:var(--bg-main); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }
.filter-bar { flex-shrink:0; display:flex; gap:6px; padding:8px 14px; overflow-x:auto; scrollbar-width:none; border:none; }
.filter-bar::-webkit-scrollbar { display:none; }
.filter-pill { padding:5px 13px; border-radius:20px; background:var(--bg-main); font-size:.76rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all .15s; white-space:nowrap; border:1px solid transparent; }
.filter-pill:hover { background:var(--border-strong); color:var(--text); }
.filter-pill.active { background:var(--text); color:#fff; border-color:var(--text); }
.drop-listings { display:grid; grid-template-columns:repeat(auto-fill, minmax(134px, 1fr)); gap:10px; overflow-y:auto; max-height:480px; padding:4px; }
.drop-listing-item { background:var(--bg-main); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .18s; border:1.5px solid transparent; }
.drop-listing-item:hover { transform:translateY(-3px); border-color:var(--primary); }
.dli-img { height:96px; display:flex; align-items:center; justify-content:center; background:var(--border-strong); overflow:hidden; }
.dli-img img { width:100%; height:100%; object-fit:cover; }
.dli-body { padding:7px 9px; }
.dli-title { font-size:.70rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.dli-price { font-size:.68rem; font-weight:800; color:var(--primary); }

/* ══════════════════════════════════════
   SPECIAL MESSAGE TYPES
══════════════════════════════════════ */

/* Listing card in chat */
.msg-listing-card {
  background:var(--bg-card); border:1px solid var(--border-strong); border-radius:16px;
  overflow:hidden; max-width:240px; cursor:pointer; transition:all .15s;
}
.msg-listing-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--primary); }
.mlc-img { width:100%; height:92px; object-fit:cover; background:var(--bg-main); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:1.4rem; }
.mlc-img img { width:100%; height:100%; object-fit:cover; }
.mlc-body { padding:9px 11px; }
.mlc-type {
  font-size:.55rem; font-weight:900; text-transform:uppercase; letter-spacing:.7px;
  margin-bottom:3px; display:flex; align-items:center; gap:4px;
}
.mlc-type.pasal { color:var(--primary); }
.mlc-type.boli  { color:var(--gold-deep); }
.mlc-type.radar { color:#0891B2; }
.mlc-title { font-size:.80rem; font-weight:800; color:var(--text); margin-bottom:3px; }
.mlc-price { font-size:.78rem; font-weight:900; color:var(--primary); }

/* Link preview */
.msg-link-preview { margin-top:6px; min-height:18px; }
.msg-link-card {
  display:flex; align-items:stretch; border:1px solid var(--border-strong);
  border-radius:12px; overflow:hidden; max-width:240px;
  text-decoration:none; background:var(--bg-card); transition:all .15s;
}
.msg-link-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.10); border-color:var(--primary); }
.mlc-lp-img { width:60px; height:60px; object-fit:cover; flex-shrink:0; }
.mlc-lp-ph  { width:60px; height:60px; flex-shrink:0; background:var(--bg-main); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:1.1rem; }
.mlc-lp-body { padding:7px 9px; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.mlc-lp-title { font-size:.73rem; font-weight:800; color:var(--text); line-height:1.3; }
.mlc-lp-price { font-size:.70rem; font-weight:900; color:var(--primary); }

/* Voice message */
.msg-voice { display:flex; align-items:center; gap:9px; background:var(--bg-card); border:1px solid var(--border-strong); border-radius:20px; padding:9px 13px; min-width:190px; max-width:260px; }
.msg-group.me .msg-voice { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.voice-play-btn { width:34px; height:34px; border-radius:50%; border:none; flex-shrink:0; background:var(--primary); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.88rem; transition:all .14s; box-shadow:0 2px 8px rgba(200,16,46,.3); }
.msg-group.me .voice-play-btn { background:rgba(255,255,255,.28); box-shadow:none; }
.voice-play-btn:hover { transform:scale(1.1); }
.voice-waveform { flex:1; display:flex; align-items:center; gap:2px; height:22px; }
.voice-bar { width:3px; border-radius:2px; background:var(--border-strong); transition:height .1s ease; }
.msg-group.me .voice-bar { background:rgba(255,255,255,.3); }
.voice-bar.active { background:var(--primary); }
.msg-group.me .voice-bar.active { background:#fff; }
.voice-duration { font-size:.66rem; font-weight:800; color:var(--text-muted); flex-shrink:0; min-width:26px; }
.msg-group.me .voice-duration { color:rgba(255,255,255,.7); }
.voice-download-btn { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:.72rem; padding:3px; transition:color .14s; flex-shrink:0; }
.msg-group.me .voice-download-btn { color:rgba(255,255,255,.56); }
.voice-download-btn:hover { color:var(--primary); }
.voice-expired { display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--text-muted); font-style:italic; padding:7px 0; }
.voice-expires-label { font-size:.58rem; color:#ef4444; margin-top:2px; display:block; }

/* Recording overlay */
.recording-overlay { display:none; position:absolute; bottom:76px; left:0; right:0; margin:0 16px; background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:14px 18px; z-index:50; box-shadow:var(--shadow-md); align-items:center; justify-content:space-between; gap:12px; }
.recording-overlay.active { display:flex; animation:cg-slideDown .2s ease; }
.rec-pulse { width:11px; height:11px; border-radius:50%; background:#ef4444; animation:cg-recPulse .8s infinite; flex-shrink:0; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.rec-timer { font-size:.88rem; font-weight:900; color:var(--text); font-family:monospace; }
.rec-hint { font-size:.70rem; color:var(--text-muted); flex:1; }
.rec-cancel-btn { background:none; border:1px solid var(--border-strong); border-radius:20px; padding:5px 13px; font-size:.73rem; font-weight:800; cursor:pointer; color:var(--text-muted); font-family:inherit; transition:all .14s; }
.rec-cancel-btn:hover { border-color:#dc2626; color:#dc2626; background:#fef2f2; }

/* Flash Hustle card — keep amber (it's intentional for hustle/money) */
.msg-flash {
  background:linear-gradient(135deg, #78350f 0%, #d97706 100%);
  border-radius:20px; padding:16px 18px; text-align:center;
  min-width:210px; max-width:250px; color:#fff;
  box-shadow:0 8px 24px rgba(217,119,6,.35);
  animation:cg-flashGlow 2s infinite alternate;
}
.flash-teapot { font-size:2.2rem; line-height:1; margin-bottom:5px; display:block; animation:cg-tPot .7s ease-in-out infinite alternate; }
.flash-title { font-size:.86rem; font-weight:900; margin-bottom:2px; }
.flash-reward { font-size:.76rem; opacity:.82; margin-bottom:10px; }
.flash-countdown { font-size:.68rem; font-weight:800; opacity:.78; margin-bottom:9px; font-family:monospace; }
.flash-claim-btn { background:#fff; color:#92400e; border:none; border-radius:30px; padding:8px 20px; font-size:.82rem; font-weight:900; cursor:pointer; font-family:inherit; transition:all .14s; box-shadow:0 3px 8px rgba(0,0,0,.18); }
.flash-claim-btn:hover { transform:scale(1.05); }
.flash-claim-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.flash-claimed { font-size:.80rem; font-weight:700; padding:7px; background:rgba(255,255,255,.14); border-radius:10px; margin-top:5px; }

/* Flash photo card — dark neutral (not purple/indigo) */
.msg-flash-photo {
  background:linear-gradient(135deg, #1A1A1A, #2D2D2D);
  border-radius:18px; padding:12px 15px;
  display:flex; align-items:center; gap:10px; color:#fff;
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 5px 18px rgba(0,0,0,.3); transition:transform .14s;
}
.msg-flash-photo:hover { transform:scale(1.02); }
.msg-flash-photo i { font-size:1.5rem; color:#ec4899; animation:cg-livePulse 2s ease-in-out infinite; }
.msg-flash-photo .fp-title { font-weight:900; font-size:.82rem; }
.msg-flash-photo .fp-hint { font-size:.63rem; opacity:.7; }
.flash-viewer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.98); z-index:20000; display:none; align-items:center; justify-content:center; }
.flash-viewer-img { max-width:100%; max-height:100%; object-fit:contain; }
.flash-timer-bar { position:absolute; top:0; left:0; height:4px; background:var(--primary); width:100%; transition:width linear; }

/* Inline error */
.guff-inline-err { display:none; font-size:.74rem; color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:10px; padding:6px 12px; margin:5px 0 0; line-height:1.4; font-weight:600; }
.guff-inline-err.show { display:block; animation:cg-slideDown .2s ease; }

/* Scope toggle */
/* .scope-toggle / .scope-btn removed — replaced by .cg-vis-cards card selector */
.scope-local-fields { display:none; }
.scope-local-fields.show { display:block; }

/* ══════════════════════════════════════
   LEVEL SYSTEM & USER DRIP
══════════════════════════════════════ */
.user-drip { font-weight:900; transition:all .2s; }
.drip-bronze { color:#cd7f32; text-shadow:0 0 8px rgba(205,127,50,.25); }
.drip-silver { color:#94a3b8; text-shadow:0 0 6px rgba(148,163,184,.25); }
.drip-gold   { color:#b45309; text-shadow:0 0 10px rgba(251,191,36,.4); }
.drip-elder  {
  background:linear-gradient(90deg, #C8102E, #f59e0b, #C8102E);
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation:cg-dripFlow 3s linear infinite;
}

/* Elite avatar borders */
.parda-reveal { position:relative; overflow:hidden; border-radius:50%; width:44px; height:44px; background:var(--bg-main); }
.parda-reveal img { width:100%; height:100%; object-fit:cover; transition:filter .5s ease-out; }
.parda-blur-overlay { position:absolute; inset:0; background:rgba(255,255,255,.12); backdrop-filter:blur(14px); z-index:10; }

/* Discovery cards */
.discovery-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; margin-top:18px; }
.discovery-card { background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; transition:all .2s; position:relative; cursor:pointer; }
.discovery-card:hover { border-color:rgba(200,16,46,.2); transform:translateY(-3px); box-shadow:var(--shadow-md); }
.discovery-avatar-wrap { position:relative; }
.discovery-avatar { width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--bg-main); border:3px solid var(--bg-card); box-shadow:0 4px 12px rgba(0,0,0,.10); }
.online-dot { position:absolute; bottom:4px; right:4px; width:12px; height:12px; border-radius:50%; border:2.5px solid var(--bg-card); background:var(--border-strong); }
.online-dot.active { background:var(--primary); animation:cg-livePulse 2s ease-in-out infinite; box-shadow:0 0 0 2px rgba(200,16,46,.18); }
.discovery-name { font-weight:900; font-size:.88rem; margin-top:3px; }
.discovery-meta { font-size:.70rem; color:var(--text-muted); font-weight:600; }
.vibe-check { font-size:.60rem; font-weight:900; color:var(--primary); background:var(--primary-soft); padding:2px 9px; border-radius:20px; margin-bottom:6px; border:1px solid rgba(200,16,46,.18); }
.btn-request-jodi { width:100%; margin-top:5px; padding:8px; border-radius:12px; border:none; background:var(--primary); color:#fff; font-weight:900; font-size:.74rem; cursor:pointer; transition:all .18s; display:flex; align-items:center; justify-content:center; gap:5px; box-shadow:var(--shadow-red); }
.btn-request-jodi:hover { box-shadow:var(--shadow-red-lg); transform:scale(1.02); }
.btn-request-jodi:disabled { background:var(--bg-main); color:var(--text-muted); cursor:not-allowed; box-shadow:none; transform:none; }
.btn-secret-samosa { background:var(--bg-card); border:1px solid #fed7aa; color:#c2410c; padding:4px 11px; border-radius:12px; font-size:.63rem; font-weight:900; cursor:pointer; display:flex; align-items:center; gap:4px; transition:all .18s; }
.btn-secret-samosa:hover { background:#fff7ed; transform:scale(1.06); }
.btn-secret-samosa.sent { background:#fef3c7; border-color:#f59e0b; color:#92400e; }

/* Jodi cards */
.jodi-hub-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.jodi-req-card { background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; transition:all .2s; cursor:pointer; }
.jodi-req-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.jodi-req-card.requested { border-color:#fca5a5; background:var(--primary-soft); }
.jodi-req-card .jodi-avatars { position:relative; width:76px; height:46px; display:flex; justify-content:center; }
.jodi-req-card .jodi-avatar { width:44px; height:44px; border-radius:50%; border:3px solid var(--bg-card); background:var(--bg-main); object-fit:cover; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.jodi-req-card .ja-1 { position:absolute; left:0; z-index:2; }
.jodi-req-card .ja-2 { position:absolute; right:0; z-index:1; }
.jodi-req-card h4 { font-size:.86rem; font-weight:900; }
.jodi-req-card .jodi-status { font-size:.62rem; font-weight:900; text-transform:uppercase; color:var(--primary); letter-spacing:.5px; }

/* ══════════════════════════════════════
   DARK MODE
══════════════════════════════════════ */
[data-theme="dark"] .guff-container { background: #050E1F; }
[data-theme="dark"] .guff-sidebar { background: #110C0E; border-color: rgba(255,255,255,.04); }
[data-theme="dark"] .sidebar-header { background: #110C0E; }
[data-theme="dark"] .room-item { background: transparent; }
[data-theme="dark"] .room-item:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .room-item.active { background: rgba(200,16,46,.22); }
[data-theme="dark"] .guff-main { background: #18191C; }
[data-theme="dark"] .chat-header { background: rgba(24,25,28,.96); border-color: #2a2c30; }
[data-theme="dark"] .chat-messages { background: #18191C; }
[data-theme="dark"] .msg-bubble { background: #23252A; border-color: #2e3035; color: #ECEEF2; }
[data-theme="dark"] .chat-input-area { background: #18191C; border-color: #2a2c30; }
[data-theme="dark"] .chat-form { background: #23252A; border-color: #2e3035; }
[data-theme="dark"] .chat-input { color: #ECEEF2; }
[data-theme="dark"] .snippets-bar { background: #1a1a1a; border-color: #2a2c30; }
[data-theme="dark"] .snippets-bar-header { background: #1a1a1a; }
[data-theme="dark"] .snippet-item:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .club-card { background: rgba(200,16,46,.08); border-color: rgba(200,16,46,.2); }
[data-theme="dark"] .club-card .club-info h4 { color: #fca5a5; }
[data-theme="dark"] .browse-modal { background: #18191C; }
[data-theme="dark"] .browse-modal-header { background: #18191C; border-color: #2a2c30; }
[data-theme="dark"] .browse-room-item { background: #23252A; border-color: #2e3035; }
[data-theme="dark"] .create-group-modal { background: #18191C; }
[data-theme="dark"] .hub-empty { background: #23252A; border-color: #2e3035; }
[data-theme="dark"] .gift-modal { background: #23252A; border-color: #2e3035; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:860px) {
  .guff-sidebar { width: 64px; }
  .sidebar-header h2 span { display: none; }
  .room-search-wrap { display: none; }
  .room-info .room-last-msg, .room-info .room-meta, .room-last-time { display: none; }
  .room-name { font-size:.48rem !important; font-weight:900; text-align:center; color:rgba(255,255,255,.55) !important; white-space:normal; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .sidebar-header { padding:10px 6px; justify-content:center; flex-direction:column; gap:5px; }
  .room-item { flex-direction:column; align-items:center; padding:8px 4px; gap:3px; transform:none !important; }
  .room-icon { flex-shrink:0; }
  .room-info { display:flex !important; flex-direction:column; align-items:center; width:100%; }
  .room-unread-badge { position:absolute; top:4px; right:4px; }
  .room-item { position:relative; }
  .leaderboard-strip { display:none; }
  .wallet-card { display:none !important; }
  .hub-header { padding:20px 16px; }
  .hub-header-content h1 { font-size:1.4rem; }
  .hub-icon { width:52px; height:52px; font-size:1.6rem; }
}
@media(max-width:600px) {
  .guff-container { min-height:0; position:relative; }
  .guff-sidebar { width:100% !important; border-right:none; position:absolute; inset:0; z-index:1; }
  .guff-chat { display:none !important; position:absolute; inset:0; z-index:2; background:var(--bg-card); }
  .guff-container.room-open .guff-sidebar { display:none !important; }
  .guff-container.room-open .guff-chat { display:flex !important; }
  .chat-back-btn { display:flex !important; }
  .room-info .room-last-msg, .room-info .room-meta, .room-last-time { display:block !important; }
  .room-name { font-size:.84rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset !important; }
  .room-item { flex-direction:row !important; align-items:center; padding:11px 12px !important; gap:10px !important; }
  .sidebar-header { flex-direction:row !important; padding:12px 14px !important; }
  .sidebar-header h2 span { display:inline !important; }
  .room-search-wrap { display:block !important; }
  .city-splice-banner { margin:6px; }
}

/* ════════════════════════════════════════════════════
   10/10 REDESIGN — Apple · Discord · Duolingo · X
   Color palette: #C8102E primary, warm neutrals
════════════════════════════════════════════════════ */

/* ── Hub header: richer gradient, tighter Apple typography ── */
.hub-header {
  padding: 26px 28px 22px;
  background: linear-gradient(135deg, #C8102E 0%, #8B0B1F 50%, #3A0210 100%);
}
.hub-header::before {
  background: radial-gradient(ellipse 65% 100% at 105% -10%, rgba(255,255,255,.18) 0%, transparent 55%);
}
.hub-header-content h1 {
  font-size: 1.75rem; font-weight: 900; letter-spacing: -1.2px;
}

/* ── Wallet card: Apple Pay glass treatment ── */
.wallet-card {
  border-radius: 20px; padding: 14px 18px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.wallet-top-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px;
}
.wallet-level-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px; padding: 3px 10px;
  font-size: .62rem; font-weight: 900; color: #fff; letter-spacing: .2px;
}
.wallet-level-badge i { font-size: .55rem; color: #fbbf24; }

/* ── XP strip: Duolingo shimmer ── */
.xp-strip { margin-top: 10px; }
.xp-strip-label {
  font-size: .58rem; opacity: .65; font-weight: 700; margin-bottom: 5px;
  display: flex; justify-content: space-between; color: #fff;
}
.xp-bar-track { height: 6px; background: rgba(255,255,255,.18); border-radius: 10px; overflow: hidden; }
.xp-bar-fill {
  height: 100%; border-radius: 10px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
  background-size: 200% 100%; animation: cg-shimmer 2s linear infinite;
  transition: width .6s cubic-bezier(.34,1.56,.64,1);
}

/* ── X-style Stats Bar ── */
.hub-stats-bar {
  display: flex; align-items: stretch; flex-shrink: 0;
  background: var(--bg-card);
  border-bottom: 1.5px solid var(--border-strong);
  box-shadow: 0 1px 0 var(--border);
}
.hub-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 13px 8px; gap: 2px;
  position: relative; cursor: default; transition: background .14s;
}
.hub-stat:hover { background: var(--bg-main); }
.hub-stat + .hub-stat::before {
  content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--border-strong);
}
.hub-stat-value {
  font-size: 1.10rem; font-weight: 900; color: var(--text); letter-spacing: -.5px; line-height: 1;
}
.hub-stat-label {
  font-size: .58rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}

/* ── Section heads: icon badge treatment ── */
.section-head {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.section-head h3 {
  font-size: .90rem; font-weight: 900; letter-spacing: -.15px;
  display: flex; align-items: center; gap: 9px;
}
.sh-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; flex-shrink: 0;
}
.section-head a {
  font-size: .74rem; font-weight: 800; color: var(--primary);
  text-decoration: none; transition: opacity .14s;
}
.section-head a:hover { opacity: .7; }

/* ── Duolingo-style empty states ── */
.hub-empty {
  grid-column: 1/-1; padding: 48px 28px;
  background: linear-gradient(145deg, rgba(200,16,46,.04) 0%, rgba(200,16,46,.015) 100%);
  border-radius: var(--radius);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 2px dashed rgba(200,16,46,.16); text-align: center;
  animation: cg-fadeIn .35s ease;
  color: var(--text-muted); font-size: .84rem; font-weight: 600;
}
.hub-empty-emoji {
  font-size: 3rem; line-height: 1;
  animation: cg-hubFloat 3.2s ease-in-out infinite;
  display: block;
}
.hub-empty-title {
  font-size: .98rem; font-weight: 900; color: var(--text); margin: 0;
}
.hub-empty-desc {
  font-size: .78rem; color: var(--text-muted); max-width: 240px;
  line-height: 1.55; margin: 0; font-weight: 500;
}
.hub-empty-btn {
  margin-top: 4px; padding: 9px 22px;
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-pill); font-family: inherit; font-size: .80rem; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow-red); transition: all .18s;
  display: flex; align-items: center; gap: 7px; letter-spacing: .1px;
}
.hub-empty-btn:hover { transform: scale(1.04) translateY(-1px); box-shadow: var(--shadow-red-lg); }

/* ── Spotify/Apple-style Club Cards: vertical layout ── */
.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.club-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card); border-radius: 18px;
  padding: 20px 18px 18px; cursor: pointer;
  transition: all .22s cubic-bezier(.34,1.56,.64,1);
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden; min-height: 130px;
  box-shadow: var(--shadow-xs);
}
.club-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, rgba(200,16,46,.05) 0%, transparent 55%);
}
.club-card::after {
  content: ''; position: absolute; right: -18px; bottom: -18px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(200,16,46,.07); pointer-events: none;
  transition: transform .22s ease;
}
.club-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-red);
  border-color: rgba(200,16,46,.22);
}
.club-card:hover::after { transform: scale(1.3); }
.club-card .club-icon {
  width: 50px; height: 50px;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(200,16,46,.35);
  animation: cg-spinDisc 10s linear infinite;
  position: relative; z-index: 1;
}
.club-card:hover .club-icon { animation-duration: 3s; }
.club-card .club-info { position: relative; z-index: 1; }
.club-card .club-info h4 {
  font-weight: 900; font-size: .88rem; margin-bottom: 5px; color: var(--text);
}
.club-card .club-info p { font-size: .71rem; color: var(--text-muted); font-weight: 700; }

/* ── Twitter/X-style Snippet Hub Cards ── */
.snippet-hub-list { display: flex; flex-direction: column; gap: 10px; }
.snippet-hub-item {
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 13px;
  cursor: pointer; transition: all .16s var(--ease);
  box-shadow: 0 1px 4px rgba(0,0,0,.04); animation: cg-fadeIn .3s ease;
}
.snippet-hub-item:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-sm);
  border-color: rgba(200,16,46,.25);
}
.snippet-hub-item.steaming {
  background: linear-gradient(135deg, var(--primary-soft) 0%, rgba(200,16,46,.03) 100%);
  border-color: rgba(200,16,46,.20);
}
.snp-hub-icon { font-size: 1.35rem; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.snp-hub-body { flex: 1; min-width: 0; }
.snp-hub-room {
  font-size: .64rem; font-weight: 900; color: var(--primary);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: .4px;
}
.snp-hub-text {
  font-size: .86rem; font-weight: 600; color: var(--text);
  line-height: 1.5; margin-bottom: 7px;
}
.snp-hub-meta {
  font-size: .64rem; color: var(--text-muted); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.snp-hub-upvotes {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--bg-main); border: 1px solid var(--border-strong);
  border-radius: 20px; padding: 2px 9px;
  font-size: .62rem; font-weight: 800; color: var(--text-muted);
  cursor: pointer; transition: all .14s;
}
.snp-hub-upvotes:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

/* ── Level streak box (Duolingo-style in chat header) ── */
.level-streak-box {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  padding: 8px 14px; min-width: 72px;
  background: var(--bg-main); border: 1.5px solid var(--border-strong);
  border-radius: 14px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.level-streak-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(200,16,46,.06) 0%, transparent 60%);
}
.level-streak-label {
  font-size: .50rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .7px; color: var(--text-muted); position: relative;
}
.level-streak-val {
  font-size: .95rem; font-weight: 900; color: var(--primary);
  letter-spacing: -.4px; line-height: 1; position: relative;
}
.level-streak-sub {
  font-size: .50rem; color: var(--text-faint); font-weight: 700;
  position: relative; white-space: nowrap;
}

/* ── Room item: Discord-polished active state ── */
.room-item.active {
  background: linear-gradient(90deg, rgba(200,16,46,.20) 0%, rgba(200,16,46,.07) 100%);
  border-color: rgba(200,16,46,.22);
  box-shadow: inset 3px 0 0 var(--primary), 0 2px 10px rgba(200,16,46,.10);
}
.room-item.active .room-name { color: #fff; font-weight: 900; }
.room-item.active .room-last-msg { color: rgba(255,255,255,.52); }
.room-item.active .room-last-time { color: rgba(255,255,255,.35); }
.room-item:hover:not(.active) { background: rgba(255,255,255,.07); }

/* Dark mode adaptations */
[data-theme="dark"] .hub-stats-bar { background: var(--bg-card); border-color: var(--border-strong); }
[data-theme="dark"] .hub-stat:hover { background: var(--bg-main); }
[data-theme="dark"] .hub-empty { background: linear-gradient(145deg, rgba(200,16,46,.07) 0%, rgba(200,16,46,.03) 100%); border-color: rgba(200,16,46,.20); }
[data-theme="dark"] .snippet-hub-item { background: var(--bg-card); border-color: var(--border-strong); }
[data-theme="dark"] .snippet-hub-item.steaming { background: rgba(200,16,46,.12); border-color: rgba(200,16,46,.25); }
[data-theme="dark"] .club-card { background: var(--bg-card); border-color: var(--border-card); }
[data-theme="dark"] .level-streak-box { background: var(--bg-main); border-color: var(--border-strong); }
[data-theme="dark"] .sh-icon { background: rgba(200,16,46,.18); }
[data-theme="dark"] .snp-hub-upvotes { background: var(--bg-main); border-color: var(--border-strong); }

@media(max-width:860px) {
  .hub-stats-bar { display: none; }
  .wallet-card { display: none !important; }
}

/* ════════════════════════════════════════════════════
   CREATE GROUP MODAL — Professional Redesign
════════════════════════════════════════════════════ */

/* Reset old modal styles */
.create-group-modal {
  background: var(--bg-card); border-radius: 24px; padding: 0 !important;
  max-width: 410px; width: 100%; box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-card); overflow: hidden;
  animation: cg-pop .22s var(--ease);
}

/* Gradient header strip */
.cg-modal-header {
  display: flex; align-items: center; gap: 13px;
  padding: 20px 22px 18px;
  background: linear-gradient(135deg, #C8102E 0%, #8B0B1F 55%, #3A0210 100%);
  position: relative; overflow: hidden; flex-shrink: 0;
}
.cg-modal-header::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 90% at 110% -15%, rgba(255,255,255,.18) 0%, transparent 55%);
}
.cg-modal-header::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 16px 16px;
}
.cg-header-icon {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.30);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.15rem; position: relative; z-index: 1;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.cg-header-text { flex: 1; position: relative; z-index: 1; min-width: 0; }
.cg-header-text h3 {
  font-size: 1.05rem; font-weight: 900; color: #fff;
  margin: 0 0 2px; letter-spacing: -.25px; line-height: 1;
}
.cg-header-text p { font-size: .74rem; color: rgba(255,255,255,.72); margin: 0; font-weight: 500; }
.cg-close-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.80);
  font-size: .78rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; position: relative; z-index: 1;
}
.cg-close-btn:hover { background: rgba(255,255,255,.24); color: #fff; transform: rotate(90deg); }

/* Form body */
.cg-modal-body { padding: 18px 22px 2px; }
.cg-field { margin-bottom: 14px; }
.cg-field > label {
  display: block; font-size: .65rem; font-weight: 800; color: var(--text-muted);
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .7px;
}
.cg-optional { font-weight: 400; text-transform: none; font-size: .63rem; letter-spacing: 0; }
.cg-field input, .cg-field textarea, .cg-field select {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--border-strong);
  border-radius: 12px; font-family: inherit; font-size: .87rem;
  color: var(--text); background: var(--bg-main); outline: none;
  transition: all .18s; box-sizing: border-box; resize: none;
  -webkit-appearance: none; appearance: none;
}
.cg-field input:focus, .cg-field textarea:focus, .cg-field select:focus {
  border-color: var(--primary); background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(200,16,46,.08);
}
.cg-field select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2370757F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }

/* Scope card selector */
.cg-scope-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px;
}
.cg-scope-card {
  display: flex; flex-direction: column; align-items: center;
  gap: 7px; padding: 14px 6px 12px; border-radius: 14px;
  border: 1.5px solid var(--border-strong); background: var(--bg-main);
  cursor: pointer; font-family: inherit; transition: all .18s;
  position: relative; overflow: hidden;
}
.cg-scope-card::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(145deg, rgba(200,16,46,.06), transparent 60%);
  transition: opacity .18s; pointer-events: none;
}
.cg-scope-card:hover { border-color: rgba(200,16,46,.28); transform: translateY(-2px); }
.cg-scope-card:hover::after { opacity: 1; }
.cg-scope-card.active {
  border-color: var(--primary); background: var(--primary-soft);
  box-shadow: 0 0 0 2.5px rgba(200,16,46,.10);
}
.cg-scope-card.active::after { opacity: 1; }

.cg-scope-icon {
  width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; transition: transform .18s; flex-shrink: 0;
}
.cg-scope-card:hover .cg-scope-icon, .cg-scope-card.active .cg-scope-icon { transform: scale(1.1); }
.cg-scope-national { background: rgba(37,99,235,.12); color: #2563eb; }
.cg-scope-local    { background: rgba(22,163,74,.12);  color: #16a34a; }
.cg-scope-club     { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%); color: #fff; box-shadow: 0 3px 10px rgba(200,16,46,.28); }

.cg-scope-label { font-size: .74rem; font-weight: 800; color: var(--text); }
.cg-scope-card.active .cg-scope-label { color: var(--primary-active); }
.cg-scope-desc { font-size: .62rem; color: var(--text-muted); font-weight: 600; text-align: center; line-height: 1.3; }

/* Info box */
.cg-info-box {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .75rem; color: var(--text-muted); line-height: 1.5; font-weight: 500;
  background: var(--bg-main); border: 1px solid var(--border-strong);
  border-radius: 11px; padding: 9px 12px; margin-bottom: 10px;
}
.cg-info-box i { color: #2563eb; font-size: .80rem; flex-shrink: 0; margin-top: 1px; }

/* Club note */
.cg-club-note {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .75rem; color: #92400e; line-height: 1.5;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 11px; padding: 10px 12px; margin-top: 8px;
}
.cg-club-note i { color: var(--primary); flex-shrink: 0; font-size: .9rem; margin-top: 1px; animation: cg-spinDisc 4s linear infinite; }

/* Privacy card */
.cg-privacy-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  border: 1.5px solid var(--border-strong); background: var(--bg-main);
  margin-bottom: 14px; transition: all .18s;
}
.cg-privacy-card.is-private {
  border-color: rgba(200,16,46,.28); background: var(--primary-soft);
}
.cg-privacy-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: rgba(200,16,46,.10); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: .88rem;
  transition: background .18s;
}
.cg-privacy-card.is-private .cg-privacy-icon { background: rgba(200,16,46,.18); }
.cg-privacy-text { flex: 1; }
.cg-privacy-text span { font-size: .86rem; font-weight: 700; color: var(--text); display: block; }
.cg-privacy-text small { font-size: .70rem; color: var(--text-muted); font-weight: 500; }

/* Footer */
.cg-footer {
  display: flex; gap: 8px;
  padding: 14px 22px 20px; margin-top: 0;
  border-top: 1px solid var(--border);
}
.cg-footer button {
  flex: 1; padding: 12px 16px; border-radius: var(--radius-pill); border: none;
  font-family: inherit; font-size: .86rem; font-weight: 800; cursor: pointer;
  transition: all .18s; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cg-footer button:hover { transform: translateY(-1px); }
.cg-cancel { background: var(--bg-main); border: 1.5px solid var(--border-strong) !important; color: var(--text-muted); }
.cg-cancel:hover { background: var(--bg-card) !important; color: var(--text) !important; }
.cg-submit { background: var(--primary); color: #fff; box-shadow: var(--shadow-red); }
.cg-submit:hover { box-shadow: var(--shadow-red-lg); }
.cg-submit:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none !important; }

/* Dark mode */
[data-theme="dark"] .create-group-modal { background: #18191C; }
[data-theme="dark"] .cg-modal-body .cg-field input,
[data-theme="dark"] .cg-modal-body .cg-field textarea,
[data-theme="dark"] .cg-modal-body .cg-field select { background: var(--bg-main); color: var(--text); }
[data-theme="dark"] .cg-scope-card { background: var(--bg-main); border-color: var(--border-strong); }
[data-theme="dark"] .cg-scope-card.active { background: rgba(200,16,46,.14); border-color: var(--primary); }
[data-theme="dark"] .cg-privacy-card { background: var(--bg-main); border-color: var(--border-strong); }
[data-theme="dark"] .cg-privacy-card.is-private { background: rgba(200,16,46,.12); }
[data-theme="dark"] .cg-info-box { background: var(--bg-main); border-color: var(--border-strong); }
[data-theme="dark"] .cg-club-note { background: rgba(180,83,9,.12); border-color: rgba(217,119,6,.25); color: #fcd34d; }
[data-theme="dark"] .cg-footer { border-color: var(--border-strong); }

/* ═══════════════════════════════════════════════════════════════════
   ★ FINAL ATMOSPHERE LAYER — 10/10
   Deep dark club · Apple stage lights · Discord depth · mig33 energy
   Overrides light-mode assumptions. Dark = the only mode for Chiya Guff.
════════════════════════════════════════════════════════════════════ */

@keyframes cg-spotlight2 {
  0%,100% { opacity:.07; transform:translateX(0) rotate(-22deg); }
  50%      { opacity:.14; transform:translateX(55px) rotate(-22deg); }
}
@keyframes cg-orbFloat {
  0%,100% { transform:scale(1) translateY(0); opacity:.6; }
  50%      { transform:scale(1.14) translateY(-20px); opacity:.9; }
}
@keyframes cg-neonFlick {
  0%,91%,100% { opacity:1; } 92% { opacity:.6; } 95% { opacity:.88; }
}

/* ─── Hub panel: warm dark-purple (Discord #36393f equivalent) ── */
#no-room-selected {
  background: #17132A !important;
  overflow: hidden;
}

/* Ambient background orbs */
#no-room-selected > .hub-header ~ *,
#no-room-selected > * { position: relative; z-index: 1; }

.hub-ambient-orb-1,
.hub-ambient-orb-2 {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.hub-ambient-orb-1 {
  width: 700px; height: 700px; top: -180px; right: -200px;
  background: radial-gradient(circle, rgba(200,16,46,.09) 0%, transparent 60%);
  animation: cg-orbFloat 10s ease-in-out infinite;
}
.hub-ambient-orb-2 {
  width: 500px; height: 500px; bottom: -80px; left: -120px;
  background: radial-gradient(circle, rgba(90,0,180,.06) 0%, transparent 60%);
  animation: cg-orbFloat 15s ease-in-out infinite reverse;
}

/* ─── Hub header: stage spotlight ───────────────────────────────── */
.hub-header {
  background: linear-gradient(140deg, #C8102E 0%, #7A0818 38%, #280510 72%, #0F0C14 100%) !important;
  overflow: hidden;
}
.hub-header::after {
  content: ''; position: absolute;
  top: -80%; left: -10%; width: 35%; height: 320%;
  background: linear-gradient(108deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  animation: cg-spotlight2 8s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
.hub-header > * { position: relative; z-index: 1; }
.hub-icon {
  filter: drop-shadow(0 0 18px rgba(200,16,46,.65));
}

/* ─── Stats bar: dark glass ─────────────────────────────────────── */
.hub-stats-bar {
  background: rgba(10,7,16,.92) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
.hub-stat-value { color: rgba(255,255,255,.88) !important; }
.hub-stat-label { color: rgba(255,255,255,.32) !important; }
.hub-stat:hover { background: rgba(255,255,255,.04) !important; }
.hub-stat + .hub-stat::before { background: rgba(255,255,255,.05) !important; }

/* ─── Hub content: pure dark ────────────────────────────────────── */
#hub-content {
  background: transparent !important;
  padding: 28px 24px 52px !important;
}

/* ─── Section heads ─────────────────────────────────────────────── */
.section-head { border-bottom-color: rgba(255,255,255,.06) !important; }
.section-head h3 { color: rgba(255,255,255,.90) !important; }
.section-head h3 i { color: #ff5266 !important; }
.sh-icon { background: rgba(200,16,46,.22) !important; color: #ff5266 !important; }

/* ─── Club cards: glassmorphic dark stage ───────────────────────── */
.club-card {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
.club-card::before {
  background: linear-gradient(145deg, rgba(200,16,46,.16) 0%, transparent 58%) !important;
}
.club-card:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(200,16,46,.42) !important;
  box-shadow: 0 14px 44px rgba(200,16,46,.24), 0 0 0 1px rgba(200,16,46,.18) !important;
}
.club-card .club-info h4 { color: rgba(255,255,255,.92) !important; }
.club-card .club-info p  { color: rgba(255,255,255,.40) !important; font-weight: 600 !important; }

/* Club live pill */
.club-live-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,.15); color: #4ade80;
  border: 1px solid rgba(34,197,94,.22); border-radius: 20px;
  padding: 3px 10px; font-size: .62rem; font-weight: 800; letter-spacing: .2px;
  margin-top: 6px;
}
.club-live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 5px #22c55e;
  animation: cg-livePulse 1.1s ease-in-out infinite;
}

/* ─── Empty states: Duolingo dark ──────────────────────────────── */
.hub-empty {
  background: rgba(255,255,255,.025) !important;
  border: 2px dashed rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.38) !important;
}
.hub-empty-title { color: rgba(255,255,255,.82) !important; }
.hub-empty-desc  { color: rgba(255,255,255,.38) !important; }

/* ─── Snippet hub items: dark glassmorphic X-card ───────────────── */
.snippet-hub-item {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.07) !important;
}
.snippet-hub-item:hover {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(200,16,46,.30) !important;
  box-shadow: 0 6px 24px rgba(200,16,46,.10) !important;
}
.snippet-hub-item.steaming {
  background: rgba(200,16,46,.10) !important;
  border-color: rgba(200,16,46,.22) !important;
}
.snp-hub-text  { color: rgba(255,255,255,.90) !important; }
.snp-hub-room  { color: #ff5266 !important; }
.snp-hub-meta  { color: rgba(255,255,255,.35) !important; }
.snp-hub-upvotes {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.44) !important;
}
.snp-hub-upvotes:hover {
  border-color: var(--primary) !important;
  color: #ff5266 !important;
  background: rgba(200,16,46,.12) !important;
}

/* ─── Room item: neon glow active ──────────────────────────────── */
.room-item.active {
  background: linear-gradient(90deg, rgba(200,16,46,.30) 0%, rgba(200,16,46,.07) 100%) !important;
  border-color: rgba(200,16,46,.38) !important;
  box-shadow: inset 3px 0 0 var(--primary), 0 0 26px rgba(200,16,46,.14) !important;
}
.room-item.active .room-icon.is-club {
  box-shadow: 0 0 0 2px rgba(200,16,46,.55), 0 0 20px rgba(200,16,46,.45) !important;
}

/* ─── Wallet card: deeper glass ────────────────────────────────── */
.wallet-card {
  background: rgba(255,255,255,.09) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 8px 36px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14) !important;
}

/* ─── Live badge neon flicker ─────────────────────────────────── */
#live-badge { animation: cg-neonFlick 12s ease-in-out infinite; }

/* ─── Section head "See all" link ─────────────────────────────── */
.section-head > a { color: #ff5266 !important; }

/* ─── Scope badge: dark treatment ────────────────────────────── */
.room-scope-badge.local    { background: rgba(200,16,46,.22); color: #fca5a5; }
.room-scope-badge.national { background: rgba(255,255,255,.08); color: rgba(255,255,255,.48); }

/* ─── Dark mode: same hub stays dark (already is) ────────────── */
[data-theme="dark"] #no-room-selected { background: #08050D !important; }
[data-theme="dark"] #hub-content { background: transparent !important; }
[data-theme="dark"] .hub-stats-bar { background: rgba(6,4,11,.95) !important; }

/* ════════════════════════════════════════════════════════════════════
   CONSISTENCY LAYER — global CSS · pasal · radar alignment
   Chat panel forced dark · mig33 club energy everywhere
════════════════════════════════════════════════════════════════════ */

/* ── Font: kill 'Plus Jakarta Sans', inherit app font (Plus Jakarta Sans) ── */
.guff-container, .guff-container *:not(i):not(svg):not(path) { font-family: inherit; }
/* Restore Font Awesome font-family on icon elements (wildcard above would break glyphs) */
.guff-container i[class*="fa-"],
.guff-container i.fas,
.guff-container i.far,
.guff-container i.fab { font-family: "Font Awesome 6 Free" !important; }

/* ── guff-main: classic messenger light gray ── */
.guff-main { background: #ecedf0 !important; }
#chat-window { background: #ecedf0 !important; }

/* ── Chat header: crisp white with strong separator ── */
.chat-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-header-info h3 { color: #111827 !important; letter-spacing: -.2px; }
.chat-header-info p  { color: #6b7280 !important; }

/* ── Chat back button: light circle ── */
.chat-back-btn {
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  background: #f3f4f6 !important;
  border: none !important; cursor: pointer !important;
  color: #374151 !important;
  display: none !important;
  align-items: center; justify-content: center;
  font-size: .88rem !important; flex-shrink: 0 !important;
  margin-right: 6px !important;
  transition: background .15s, transform .15s !important;
}
.chat-back-btn:hover { background: rgba(200,16,46,.10) !important; color: #C8102E !important; transform: scale(1.06) !important; }
@media(max-width:600px) { .chat-back-btn { display: flex !important; } }

/* ── Chat messages: classic messenger light gray ── */
.chat-messages {
  background: #ecedf0 !important;
  background-image: none !important;
}
.guff-main.social-hub { background: #ffffff !important; }

/* ── Listing card in chat: premium product card treatment ── */
.msg-listing-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  max-width: 260px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05) !important;
  cursor: pointer !important; transition: all .20s ease !important;
}
.msg-listing-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 28px rgba(200,16,46,.18), 0 0 0 1.5px #C8102E !important;
}
.mlc-img {
  width: 100% !important; height: 130px !important;
  background: linear-gradient(145deg, #f8f0f0 0%, #f3e8e8 100%) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  overflow: hidden !important; color: rgba(200,16,46,.22) !important; font-size: 1.8rem !important;
  position: relative !important;
}
.mlc-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.mlc-body { padding: 11px 13px 12px !important; }
.mlc-type {
  font-size: .58rem !important; font-weight: 800 !important; letter-spacing: .5px !important;
  text-transform: uppercase !important; margin-bottom: 5px !important;
  display: flex !important; align-items: center !important; gap: 4px !important;
}
.mlc-type.radar { color: #0891B2 !important; }
.mlc-type.boli  { color: #7c3aed !important; }
.mlc-type.pasal { color: #C8102E !important; }
.mlc-title { font-size: .82rem !important; font-weight: 800 !important; color: #111827 !important; margin-bottom: 4px !important; line-height: 1.35 !important; }
.msg-listing-card .mlc-price { font-size: .82rem !important; font-weight: 900 !important; color: #C8102E !important; }

/* ── Message bubbles: WhatsApp/Telegram messenger style ── */
.msg-bubble {
  background: #ffffff !important;
  border: none !important;
  color: #1f2937 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06) !important;
}
.msg-group.me .msg-bubble {
  background: #C8102E !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
}
.msg-user { color: #9ca3af !important; }
.msg-system {
  background: rgba(255,255,255,.75) !important;
  color: #6b7280 !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 20px !important; padding: 4px 14px !important;
  font-size: .74rem !important; align-self: center !important; text-align: center !important;
}

/* ── HOT TEA bar: white card with red left accent ── */
.snippets-bar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(200,16,46,.12) !important;
  border-top: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  position: relative; z-index: 5;
}
.snippets-bar::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: #C8102E;
}
.snippets-bar-header {
  background: #ffffff !important;
  border-bottom-color: rgba(200,16,46,.08) !important;
}
.snippets-bar-header span { color: #C8102E !important; }
.snippet-post-btn {
  border-color: rgba(200,16,46,.28) !important;
  color: #C8102E !important;
  background: rgba(200,16,46,.04) !important;
}
.snippet-post-btn:hover { background: #C8102E !important; color: #fff !important; border-color: #C8102E !important; }
.snippet-item { color: #111827 !important; border-top-color: rgba(0,0,0,.06) !important; }
.snippet-item:hover { background: #fef2f4 !important; }
.snippet-item.steaming { background: #fff0f2 !important; }
.snippet-body { color: #1f2937 !important; }
.snippet-meta { color: #6b7280 !important; }
.snippets-empty { color: #9ca3af !important; font-style: italic; }
.snippet-upvote {
  background: rgba(200,16,46,.05) !important;
  border-color: rgba(200,16,46,.18) !important;
  color: #C8102E !important;
}
.snippet-upvote:hover, .snippet-upvote.voted {
  border-color: #C8102E !important;
  color: #fff !important;
  background: #C8102E !important;
}

/* ── Chat input area: white floor, clearly separated from gray bg ── */
.chat-input-area {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,.04) !important;
}
.chat-form {
  background: #f3f4f6 !important;
  border: 1.5px solid #e5e7eb !important;
}
.chat-form:focus-within {
  border-color: rgba(200,16,46,.45) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(200,16,46,.09) !important;
}
.chat-input { color: #1f2937 !important; }
.chat-input::placeholder { color: #adb5bd !important; }

/* ── Typing indicator: light ── */
.typing-indicator { color: #9ca3af !important; }

/* ── Recording overlay: dark glass (stays dark — overlaid, intentional) ── */
.recording-overlay {
  background: rgba(17,24,39,.95) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.rec-timer { color: rgba(255,255,255,.90) !important; }
.rec-hint  { color: rgba(255,255,255,.45) !important; }
.rec-cancel-btn {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.55) !important;
}
.rec-cancel-btn:hover { border-color: #dc2626 !important; color: #f87171 !important; background: rgba(220,38,38,.12) !important; }

/* ── Gift modal: clean white popover ── */
.gift-modal {
  background: #ffffff !important;
  border-color: #f1f3f5 !important;
  box-shadow: 0 16px 52px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05) !important;
}
.gift-option:hover {
  background: rgba(200,16,46,.06) !important;
  border-color: rgba(200,16,46,.18) !important;
}

/* ── Level streak box: light ── */
.level-streak-box {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.07) !important;
}
.level-streak-label { color: rgba(255,255,255,.32) !important; }
.level-streak-val   { color: #ff5266 !important; }
.level-streak-sub   { color: rgba(255,255,255,.22) !important; }

/* ── Leaderboard strip: dark ── */
.leaderboard-strip { color: rgba(255,255,255,.38) !important; }

/* ── Chat header action buttons: dark pill ── */
#invite-members-btn {
  background: rgba(200,16,46,.10) !important;
  border: 1px solid rgba(200,16,46,.22) !important;
  color: #ff7a8a !important;
}
#invite-members-btn:hover { background: rgba(200,16,46,.20) !important; border-color: rgba(200,16,46,.38) !important; }
#room-settings-btn {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.48) !important;
}
#room-settings-btn:hover { background: rgba(255,255,255,.11) !important; color: rgba(255,255,255,.80) !important; }
#dj-booth-btn {
  background: rgba(10,8,18,.65) !important;
  border: 1px solid rgba(130,92,255,.20) !important;
  color: rgba(255,255,255,.72) !important;
}
#dj-booth-btn:hover { background: rgba(130,92,255,.10) !important; border-color: rgba(130,92,255,.38) !important; }
#dj-booth-btn .fa-compact-disc { color: #a78bfa !important; }

/* ── Scroll-to-bottom: fix ID vs class targeting ── */
#scroll-bottom-btn { display: none !important; }
#scroll-bottom-btn.show { display: flex !important; }

/* ── DJ panel: deep dark studio ── */
#dj-panel {
  background: linear-gradient(135deg, #0A0812 0%, #141020 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
#dj-current-track { color: rgba(255,255,255,.82) !important; }

/* ── Mobile: full-screen chat matches dark sidebar slide-in ── */
@media(max-width:600px) {
  .guff-chat { background: #17132A !important; }
  .chat-header { position: sticky !important; top: 0 !important; z-index: 10 !important; height: 52px !important; padding: 0 14px !important; }
}

/* ── Browse / Create / Report modal dark mode always-on ── */
.browse-modal { background: rgba(24,22,34,.98) !important; border-color: rgba(255,255,255,.07) !important; }
.browse-modal-header { background: rgba(24,22,34,1) !important; border-color: rgba(255,255,255,.05) !important; }
.browse-modal-header h3 { color: rgba(255,255,255,.90) !important; }
.browse-modal-header p  { color: rgba(255,255,255,.38) !important; }
.browse-room-item { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; }
.browse-room-item:hover { border-color: rgba(200,16,46,.32) !important; box-shadow: 0 4px 16px rgba(200,16,46,.10) !important; }
.browse-room-name { color: rgba(255,255,255,.88) !important; }
.browse-room-desc { color: rgba(255,255,255,.36) !important; }
.browse-search-wrap { background: rgba(20,18,28,.98) !important; border-color: rgba(255,255,255,.05) !important; }
.browse-search { background: rgba(255,255,255,.06) !important; color: rgba(255,255,255,.82) !important; border-color: rgba(255,255,255,.09) !important; }
.browse-search:focus { background: rgba(255,255,255,.09) !important; border-color: rgba(200,16,46,.45) !important; }
.browse-close-btn { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.55) !important; border-color: rgba(255,255,255,.10) !important; }
.browse-close-btn:hover { background: rgba(200,16,46,.18) !important; color: #fff !important; }

/* ── Section head "My Level" label (inline in blade) ── */
[style*="My Level"] { color: rgba(255,255,255,.32) !important; text-transform: uppercase !important; letter-spacing: .5px; }

/* ════════════════════════════════════════════════════════════════════
   DISCORD ALIGNMENT FIX
   Kills style.css global pill-link + heavy section-head padding.
   Full dark-color harmony. Room icons ≈ Discord channel icons.
════════════════════════════════════════════════════════════════════ */

/* ── Kill style.css .section-head heavy padding + border-top inside guff ── */
.guff-main .section-head {
  padding: 0 0 10px !important;
  border-top: none !important;
  margin-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  margin-bottom: 16px !important;
  gap: 8px !important;
}
/* Remove the global left-bar accent stripe */
.guff-main .section-head > div:first-child { padding-left: 0 !important; position: static !important; }
.guff-main .section-head > div:first-child::before { display: none !important; }

/* Discord-style section label: small uppercase muted text */
.guff-main .section-head h3 {
  font-size: .70rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  color: rgba(255,255,255,.38) !important;
  line-height: 1 !important;
}
/* Icon inside section h3: inline, no badge box */
.guff-main .section-head h3 > i {
  color: rgba(255,255,255,.35) !important;
  font-size: .66rem !important;
  background: none !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
  display: inline !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Kill style.css pill-link on .section-head a — make it plain ghost text */
.guff-main .section-head a,
.guff-main .section-head > a {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.26) !important;
  font-size: .66rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color .14s !important;
  white-space: nowrap !important;
}
.guff-main .section-head a:hover,
.guff-main .section-head > a:hover {
  background: none !important;
  color: rgba(255,255,255,.62) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Room icons: visible Discord channel icon feel ── */
.room-icon {
  background: rgba(255,255,255,.13) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.72) !important;
  border-radius: 10px !important;
}
.room-item:hover .room-icon {
  background: rgba(255,255,255,.20) !important;
  color: rgba(255,255,255,.92) !important;
  transform: scale(1.04) rotate(0deg) !important;
}
.room-item.active .room-icon {
  background: rgba(200,16,46,.35) !important;
  color: #ffccd5 !important;
  border-color: rgba(200,16,46,.40) !important;
}

/* ── Room list typography: Discord channel list ── */
.room-name { font-size: .84rem !important; font-weight: 600 !important; color: rgba(255,255,255,.72) !important; }
.room-item.active .room-name,
.room-item:hover .room-name { color: rgba(255,255,255,.96) !important; font-weight: 700 !important; }
.room-meta     { color: rgba(255,255,255,.38) !important; font-size: .63rem !important; }
.room-last-msg { color: rgba(255,255,255,.38) !important; font-size: .63rem !important; }
.room-last-time{ color: rgba(255,255,255,.25) !important; font-size: .57rem !important; }

/* ── Room list + item density ── */
.room-list  { padding: 4px 6px !important; }
.room-item  { padding: 8px 10px !important; margin-bottom: 1px !important; border-radius: 6px !important; }

/* ── Room search: Discord-style inset search bar ── */
.room-search-wrap { padding: 6px 10px !important; }
.room-search-input {
  border-radius: 6px !important;
  background: rgba(0,0,0,.22) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.72) !important;
  font-size: .80rem !important;
  padding: 6px 11px !important;
}
.room-search-input:focus {
  background: rgba(0,0,0,.30) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

/* ── Sidebar header: Discord server-name header ── */
.sidebar-header {
  padding: 0 14px !important;
  height: 48px !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.30), 0 2px 4px rgba(0,0,0,.22) !important;
}
.sidebar-header h2 { font-size: .88rem !important; font-weight: 800 !important; letter-spacing: -.1px !important; }

/* ── Nearby / city-splice banners: compact, dark ── */
.nearby-banner {
  background: rgba(200,16,46,.07) !important;
  border: 1px solid rgba(200,16,46,.12) !important;
  border-radius: 7px !important;
  margin: 4px 8px 2px !important;
  padding: 7px 10px !important;
  gap: 7px !important;
}
.nearby-banner span { color: rgba(255,255,255,.60) !important; font-size: .72rem !important; }
.nearby-banner i { color: rgba(200,16,46,.80) !important; }
.city-splice-banner { margin: 4px 8px !important; border-radius: 8px !important; padding: 10px 12px !important; }

/* ── Hub header: tighter, Discord-like content header ── */
.hub-header { padding: 20px 22px 18px !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; }
.hub-header-content h1 { font-size: 1.45rem !important; letter-spacing: -.8px !important; }
.hub-header-content p  { font-size: .75rem !important; color: rgba(255,255,255,.42) !important; }
.hub-icon { border-radius: 16px !important; width: 54px !important; height: 54px !important; font-size: 1.55rem !important; }

/* ── Hub stats: Discord tab-bar density ── */
.hub-stats-bar { padding: 0 !important; }
.hub-stat { padding: 10px 6px !important; }
.hub-stat-value { font-size: .95rem !important; }
.hub-stat-label { font-size: .54rem !important; letter-spacing: .6px !important; }

/* ── Hub content: proper breathing room ── */
#hub-content { padding: 20px 22px 52px !important; }
.hub-section  { margin-bottom: 28px !important; }

/* ── Hub empty state ── */
.hub-empty { border: 1.5px dashed rgba(255,255,255,.12) !important; background: rgba(255,255,255,.04) !important; padding: 36px 20px !important; }
.hub-empty-emoji { font-size: 2.2rem !important; }
.hub-empty-title { color: rgba(255,255,255,.88) !important; }
.hub-empty-desc  { color: rgba(255,255,255,.48) !important; }

/* ── Club cards ── */
.club-card { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.09) !important; }
.club-card:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(200,16,46,.45) !important; }
.club-card .club-info h4 { font-size: .84rem !important; }

/* ── btn-hub-action: dark ghost pill ── */
.btn-hub-action {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.42) !important;
  padding: 4px 11px !important;
  font-size: .68rem !important;
  border-radius: var(--radius-pill) !important;
}
.btn-hub-action:hover {
  background: rgba(200,16,46,.10) !important;
  border-color: rgba(200,16,46,.20) !important;
  color: #ff7a8a !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Snippet hub: tighter X-card density ── */
.snippet-hub-item { border-radius: 10px !important; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.09) !important; padding: 12px 14px !important; }
.snippet-hub-item:hover { transform: none !important; background: rgba(255,255,255,.10) !important; border-color: rgba(200,16,46,.30) !important; }

/* ── Hub section: "See all" icon ── */
.section-head .badge-new { font-size: .58rem !important; padding: 2px 7px !important; }

/* ════════════════════════════════════════════════════════════════════
   LIGHT THEME REVERT — align with pasal / radar / home
   Hub/dashboard → app standard light. Sidebar/chat stay dark.
   This block is last in file so all same-specificity !important wins.
════════════════════════════════════════════════════════════════════ */

/* ── Hub panel (no-room-selected): transparent — global gradient shows through ── */
#no-room-selected {
  background: transparent !important;
}

/* ── guff-main: messenger gray base (chat-window overrides for chat mode below) ── */
.guff-main { background: #ecedf0; }

/* ── Stats bar: flat white strip (matches mockup) ── */
.hub-stats-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #f1f3f5 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}
.hub-stat-value { color: var(--text) !important; font-size: 1.05rem !important; }
.hub-stat-label { color: var(--text-muted) !important; font-size: .58rem !important; }
.hub-stat:hover { background: var(--bg-main) !important; }
.hub-stat + .hub-stat::before { background: var(--border-strong) !important; }

/* ── Hub content area ── */
#hub-content { background: transparent !important; padding: 22px 22px 60px !important; }
.hub-section  { margin-bottom: 30px !important; }

/* ── Section heads: restore style.css light-theme look ── */
.guff-main .section-head {
  padding: 0 0 12px !important;
  border-top: none !important;
  border-bottom: 0.5px solid var(--border-strong) !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  gap: 10px !important;
}
.guff-main .section-head > div:first-child { padding-left: 0 !important; position: static !important; }
.guff-main .section-head > div:first-child::before { display: none !important; }
.guff-main .section-head h3 {
  font-size: .95rem !important;
  font-weight: 900 !important;
  text-transform: none !important;
  letter-spacing: -.25px !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
.guff-main .section-head h3 > i {
  color: var(--primary) !important;
  font-size: .88rem !important;
  background: none !important;
  width: auto !important; height: auto !important;
  border-radius: 0 !important;
  display: inline !important;
  padding: 0 !important;
}
/* Restore style.css pill look for "See all" — it's correct on light bg */
.guff-main .section-head a,
.guff-main .section-head > a {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  padding: 4px 13px !important;
  border-radius: 20px !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.guff-main .section-head a:hover,
.guff-main .section-head > a:hover {
  background: var(--primary) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(200,16,46,.22) !important;
}

/* ── Club cards: glass card ── */
.club-card {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.club-card:hover {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(200,16,46,.22) !important;
  box-shadow: var(--shadow-red) !important;
  transform: translateY(-4px) !important;
}
.club-card .club-info h4 { color: var(--text) !important; }
.club-card .club-info p  { color: var(--text-muted) !important; font-weight: 600 !important; }
.club-card::before { background: linear-gradient(145deg, rgba(200,16,46,.04) 0%, transparent 55%) !important; }

/* ── Hub empty state: dashed border card (matches mockup) ── */
.hub-empty {
  background: rgba(255,255,255,.55) !important;
  border: 2px dashed rgba(200,16,46,.22) !important;
  border-radius: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 48px 28px !important;
}
.hub-empty-title { color: #111827 !important; font-size: .96rem !important; }
.hub-empty-desc  { color: #6b7280 !important; }
.hub-empty-btn   { background: var(--primary) !important; }

/* ── Snippet hub items: glass card ── */
.snippet-hub-item {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.snippet-hub-item:hover {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(200,16,46,.20) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: translateY(-2px) !important;
}
.snp-hub-room  { color: var(--primary) !important; }
.snp-hub-text  { color: var(--text) !important; }
.snp-hub-meta  { color: var(--text-muted) !important; }
.snp-hub-upvotes {
  background: var(--bg-main) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}
.snp-hub-upvotes:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
}

/* ── Ambient orbs: remove on light bg ── */
.hub-ambient-orb-1, .hub-ambient-orb-2 { opacity: 0 !important; }

/* ── Hub header: lighter shine, matches app hero blocks ── */
.hub-header {
  background: linear-gradient(140deg, #C8102E 0%, #8B0B1F 50%, #3A0210 100%) !important;
  padding: 22px 24px 20px !important;
  border-bottom: none !important;
}
.hub-icon { filter: none !important; }
.hub-header-content h1 { font-size: 1.6rem !important; color: #fff !important; }
.hub-header-content p  { color: rgba(255,255,255,.70) !important; font-size: .80rem !important; }

/* ── Wallet card: Apple glass over red header ── */
.wallet-card {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* chat window light — controlled by atmosphere layer above */

/* ── Dark mode: hub uses app vars automatically via CSS vars ── */
[data-theme="dark"] #no-room-selected { background: var(--bg-main) !important; }
[data-theme="dark"] .hub-stats-bar    { background: var(--bg-card) !important; border-color: var(--border-strong) !important; }
[data-theme="dark"] .club-card        { background: var(--bg-card) !important; border-color: var(--border-card) !important; }
[data-theme="dark"] .snippet-hub-item { background: var(--bg-card) !important; border-color: var(--border-strong) !important; }
[data-theme="dark"] .hub-empty        { background: var(--bg-main) !important; border-color: rgba(200,16,46,.22) !important; }

/* ════════════════════════════════════════════════════════════════════
   DISCORD CHARCOAL SIDEBAR — replace maroon-black with neutral gray
   Red lives ONLY as the active-room accent, nowhere in the chrome.
   Apple+Discord+macOS: color-neutral shell, vivid brand accent.
════════════════════════════════════════════════════════════════════ */

/* ── Sidebar shell: Discord #2B2D31 charcoal (no red tint) ── */
.guff-sidebar {
  background: #2B2D31 !important;
  border-right: 1px solid rgba(0,0,0,.22) !important;
}

/* ── Sidebar header: one shade darker, zero red ── */
.sidebar-header {
  background: #232428 !important;
  border-bottom: 1px solid rgba(0,0,0,.28) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) !important;
}
.sidebar-header h2 { color: #DBDEE1 !important; }
.sidebar-header h2 i { color: rgba(255,255,255,.42) !important; font-size: .82rem !important; }

/* ── Header action buttons: neutral ghost ── */
.guff-hdr-btn-ghost {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.40) !important;
}
.guff-hdr-btn-ghost:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: rgba(255,255,255,.80) !important;
}

/* ── Search bar: Discord inset input ── */
.room-search-input {
  background: rgba(0,0,0,.22) !important;
  border: none !important;
  border-radius: 4px !important;
  color: #DBDEE1 !important;
}
.room-search-input:focus {
  background: rgba(0,0,0,.30) !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* ── Room items: Discord channel-list feel ── */
.room-item {
  border-radius: 4px !important;
  padding: 8px 10px !important;
  margin-bottom: 1px !important;
  border: none !important;
}
.room-item:hover {
  background: rgba(255,255,255,.08) !important;
}
.room-item.active {
  background: rgba(255,255,255,.10) !important;
  border: none !important;
  box-shadow: none !important;
}
/* Red accent: left-edge indicator only on active */
.room-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

/* ── Room icon: neutral dark chip, red only when active ── */
.room-icon {
  background: rgba(255,255,255,.08) !important;
  border: none !important;
  color: rgba(255,255,255,.50) !important;
  border-radius: 8px !important;
}
.room-item:hover .room-icon {
  background: rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.75) !important;
  transform: none !important;
}
.room-item.active .room-icon {
  background: rgba(200,16,46,.22) !important;
  color: #ff8a9a !important;
}

/* ── Room text: Discord subdued → bright on hover/active ── */
.room-name {
  color: rgba(255,255,255,.50) !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
}
.room-item:hover .room-name,
.room-item.active .room-name {
  color: #DBDEE1 !important;
  font-weight: 600 !important;
}

/* ── Nearby banner: no red background — neutral subtle ── */
.nearby-banner {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 6px !important;
}
.nearby-banner span { color: rgba(255,255,255,.55) !important; }
.nearby-banner i { color: rgba(200,16,46,.70) !important; }
.nearby-banner .btn-primary,
.nearby-banner button[onclick*="joinRoom"] {
  background: var(--primary) !important;
  font-size: .75rem !important;
  padding: 5px 13px !important;
}

/* chat light in light mode — dark mode handled below */

/* ── Hub header: softer gradient fade at bottom edge ── */
.hub-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, rgba(240,238,248,.40));
  pointer-events: none;
}
.hub-header { position: relative; overflow: hidden; }

/* ── Dark-mode: sidebar + chat go Discord-dark ── */
[data-theme="dark"] .guff-sidebar        { background: #1E2024 !important; }
[data-theme="dark"] .sidebar-header      { background: #18191C !important; }
[data-theme="dark"] .guff-main           { background: #313338 !important; }
[data-theme="dark"] .guff-main.social-hub{ background: #18191C !important; }
[data-theme="dark"] #chat-window         { background: #313338 !important; }
[data-theme="dark"] .chat-messages       { background: #313338 !important; }
[data-theme="dark"] .chat-header         { background: #2B2D31 !important; border-bottom-color: rgba(0,0,0,.25) !important; box-shadow: 0 1px 4px rgba(0,0,0,.28) !important; }
[data-theme="dark"] .chat-header-info h3 { color: rgba(255,255,255,.90) !important; }
[data-theme="dark"] .chat-header-info p  { color: rgba(255,255,255,.40) !important; }
[data-theme="dark"] .msg-bubble          { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.88) !important; box-shadow: none !important; }
[data-theme="dark"] .msg-group.me .msg-bubble { background: var(--primary) !important; }
[data-theme="dark"] .msg-user            { color: rgba(255,255,255,.38) !important; }
[data-theme="dark"] .msg-system          { background: rgba(255,255,255,.04) !important; color: rgba(255,255,255,.30) !important; }
[data-theme="dark"] .chat-input-area     { background: #2B2D31 !important; border-top-color: rgba(0,0,0,.22) !important; }
[data-theme="dark"] .chat-form           { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .chat-form:focus-within { border-color: rgba(200,16,46,.50) !important; background: rgba(255,255,255,.09) !important; }
[data-theme="dark"] .chat-input          { color: rgba(255,255,255,.88) !important; }
[data-theme="dark"] .chat-input::placeholder { color: rgba(255,255,255,.22) !important; }
[data-theme="dark"] .typing-indicator    { color: rgba(255,255,255,.35) !important; }
[data-theme="dark"] .gift-modal          { background: rgba(30,32,36,.98) !important; border-color: rgba(255,255,255,.08) !important; box-shadow: 0 16px 52px rgba(0,0,0,.55) !important; }
[data-theme="dark"] .gift-option:hover   { background: rgba(200,16,46,.12) !important; border-color: rgba(200,16,46,.18) !important; }
[data-theme="dark"] .level-streak-box    { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .msg-listing-card    { background: #2a2d32 !important; border-color: rgba(255,255,255,.07) !important; box-shadow: 0 4px 16px rgba(0,0,0,.38) !important; }
[data-theme="dark"] .mlc-title           { color: rgba(255,255,255,.88) !important; }
[data-theme="dark"] .msg-listing-card .mlc-price { color: #ff8a9a !important; }
[data-theme="dark"] .chat-back-btn       { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.65) !important; }

/* ════════════════════════════════════════════════════════════════════
   MOCKUP 2 — Two-column hub layout + right sidebar
   Apple glass cards · Discord density · Duolingo color tags
════════════════════════════════════════════════════════════════════ */

/* ── Hub layout: 2-column grid ── */
#hub-content { padding: 20px 22px 60px !important; }

.hub-layout {
  display: grid;
  grid-template-columns: 1fr 256px;
  gap: 22px;
  align-items: start;
}

.hub-main-col { display: flex; flex-direction: column; gap: 0; min-width: 0; }

.hub-right-col {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 20px;
}

/* ── Right sidebar cards ── */
.hsb-card {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.60);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

.hsb-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.hsb-card-title {
  font-size: .75rem; font-weight: 800; color: var(--text);
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: .4px;
}
.hsb-card-title i { color: var(--primary); font-size: .70rem; }
.hsb-see-all {
  font-size: .68rem; font-weight: 800; color: var(--primary);
  text-decoration: none; transition: opacity .14s;
}
.hsb-see-all:hover { opacity: .7; }
.hsb-badge-muted {
  font-size: .62rem; font-weight: 700; color: var(--text-muted);
  background: var(--bg-main); padding: 2px 7px; border-radius: 20px;
}

/* ── Events ── */
.hsb-event-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 0.5px solid var(--border-card);
  cursor: pointer; text-decoration: none; transition: opacity .14s;
}
.hsb-event-item:last-child { border-bottom: none; padding-bottom: 0; }
.hsb-event-item:hover { opacity: .72; }
.hsb-event-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  background: rgba(200,16,46,.10); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
}
.hsb-event-body { flex: 1; min-width: 0; }
.hsb-event-title {
  font-size: .78rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsb-event-meta { font-size: .64rem; color: var(--text-muted); margin-top: 1px; }

/* ── Leaderboard ── */
.hsb-lb-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 0.5px solid var(--border-card);
}
.hsb-lb-item:last-child { border-bottom: none; padding-bottom: 0; }
.hsb-lb-rank { font-size: .78rem; width: 18px; text-align: center; flex-shrink: 0; }
.hsb-lb-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-soft); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: var(--primary);
}
.hsb-lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hsb-lb-info { flex: 1; min-width: 0; }
.hsb-lb-name {
  font-size: .76rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsb-lb-pts { font-size: .62rem; color: var(--text-muted); }
.hsb-lb-count {
  font-size: .68rem; font-weight: 800; color: var(--text-muted);
  text-align: right; flex-shrink: 0;
}
.hsb-lb-count span { font-weight: 400; font-size: .60rem; }

/* ── Popular tags ── */
.hsb-tags-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.hsb-tag {
  padding: 4px 10px; border-radius: 20px; border: none; cursor: pointer;
  font-size: .70rem; font-weight: 700; font-family: inherit;
  background: color-mix(in srgb, var(--tag-color) 12%, transparent);
  color: var(--tag-color);
  transition: all .14s;
}
.hsb-tag:hover {
  background: var(--tag-color); color: #fff;
  transform: translateY(-1px);
}

/* ── Suggested users ── */
.hsb-user-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; border-bottom: 0.5px solid var(--border-card);
}
.hsb-user-item:last-child { border-bottom: none; padding-bottom: 0; }
.hsb-user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-soft); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: .76rem; font-weight: 800; color: var(--primary);
}
.hsb-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hsb-user-online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: #22C55E; border: 1.5px solid rgba(255,255,255,.90);
}
.hsb-user-info { flex: 1; min-width: 0; }
.hsb-user-name {
  font-size: .76rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsb-user-pts { font-size: .62rem; color: var(--text-muted); }

/* ── Empty + skeleton states ── */
.hsb-empty-row {
  font-size: .72rem; color: var(--text-muted); text-align: center;
  padding: 10px 0; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hsb-empty-row a { color: var(--primary); font-weight: 700; text-decoration: none; }

.hsb-skeleton {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 0.5px solid var(--border-card);
  animation: cg-shimmer 1.5s infinite;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%);
  background-size: 200% 100%;
}
.hsb-skeleton:last-child { border-bottom: none; }
.hsb-skel-line {
  height: 8px; border-radius: 4px;
  background: rgba(0,0,0,.08); margin-bottom: 4px;
}
.hsb-skel-line:last-child { margin-bottom: 0; }
.hsb-skel-line.w-80 { width: 80%; }
.hsb-skel-line.w-70 { width: 70%; }
.hsb-skel-line.w-60 { width: 60%; }
.hsb-skel-line.w-55 { width: 55%; }
.hsb-skel-line.w-50 { width: 50%; }
.hsb-skel-line.w-40 { width: 40%; }
.hsb-skel-line.w-35 { width: 35%; }
.hsb-skel-line.w-30 { width: 30%; }
.hsb-skel-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,0,0,.08);
}
.hsb-tag-skel {
  height: 24px; width: 60px; border-radius: 20px;
  background: rgba(0,0,0,.07);
}
.hsb-tag-skel.w-short { width: 44px; }

/* ── Responsive: stack on narrow hub ── */
@media (max-width: 1100px) {
  .hub-layout { grid-template-columns: 1fr; }
  .hub-right-col { position: static; flex-direction: row; flex-wrap: wrap; }
  .hub-right-col .hsb-card { flex: 1; min-width: 220px; }
}
@media (max-width: 720px) {
  .hub-layout { grid-template-columns: 1fr; }
  .hub-right-col { display: none; }
}

/* ── Dark mode sidebar cards ── */
[data-theme="dark"] .hsb-card {
  background: rgba(30,32,36,.85) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .hsb-card-title { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .hsb-event-title,
[data-theme="dark"] .hsb-lb-name,
[data-theme="dark"] .hsb-user-name { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .hsb-event-meta,
[data-theme="dark"] .hsb-lb-pts,
[data-theme="dark"] .hsb-lb-count,
[data-theme="dark"] .hsb-user-pts  { color: rgba(255,255,255,.38) !important; }
[data-theme="dark"] .hsb-skel-line,
[data-theme="dark"] .hsb-skel-avatar { background: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .hsb-tag {
  background: color-mix(in srgb, var(--tag-color) 20%, transparent) !important;
}
[data-theme="dark"] .hsb-event-item,
[data-theme="dark"] .hsb-lb-item,
[data-theme="dark"] .hsb-user-item { border-color: rgba(255,255,255,.06) !important; }

/* ════════════════════════════════════════════════════════════════════
   ALL 7 MISSING PIECES — Mockup 2 completion pass
   Hero banner · View all rooms · Verified badge · Gold coins ·
   Stats icons · Level badges · Event attendees · Global radius
════════════════════════════════════════════════════════════════════ */

/* ── 0. Global rounded radius on all content boxes ── */
.guff-container { border-radius: 0; }
.hub-stats-bar  { border-radius: 0 !important; }
.hsb-card       { border-radius: 16px !important; }
.club-card      { border-radius: 16px !important; }
.snippet-hub-item { border-radius: 14px !important; }
.hub-empty      { border-radius: 14px !important; }
.room-item      { border-radius: 8px !important; }
.nearby-banner  { border-radius: 10px !important; }
.hub-header     { border-radius: 0 !important; }

/* ── 1. Sidebar hero banner ── */
.sidebar-hero-banner {
  display: none;
  position: relative;
  margin: 8px 10px;
  border-radius: 14px !important;
  overflow: hidden;
  min-height: 140px;
  background:
    linear-gradient(160deg, #1a0a14 0%, #2d0f1a 40%, #0d1a2e 100%);
}
.sidebar-hero-banner.show { display: block; }

/* Simulated cinematic depth with CSS radial glows */
.sidebar-hero-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 30%, rgba(200,16,46,.28) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 20% 70%, rgba(120,60,10,.35) 0%, transparent 60%);
  border-radius: inherit;
}

/* Subtle noise texture layer */
.sidebar-hero-banner::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  border-radius: inherit; pointer-events: none;
}

.shb-content {
  position: relative; z-index: 2;
  padding: 16px 14px 14px;
}
.shb-location {
  font-size: .70rem; font-weight: 800; color: rgba(200,16,46,.95);
  text-transform: uppercase; letter-spacing: .5px;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 5px;
}
.shb-desc {
  font-size: .78rem; color: rgba(255,255,255,.80); line-height: 1.4;
  margin: 0 0 12px;
}
.shb-btns { display: flex; gap: 8px; }
.shb-join {
  background: var(--primary); color: #fff; border: none;
  border-radius: 20px; padding: 7px 16px;
  font-size: .76rem; font-weight: 800; font-family: inherit; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 3px 10px rgba(200,16,46,.45);
}
.shb-join:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(200,16,46,.55); }
.shb-dismiss {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.18); border-radius: 20px;
  padding: 7px 14px; font-size: .76rem; font-weight: 700;
  font-family: inherit; cursor: pointer; transition: background .14s;
}
.shb-dismiss:hover { background: rgba(255,255,255,.20); }

/* ── 2. "View all rooms" sidebar footer ── */
.sidebar-footer {
  flex-shrink: 0;
  padding: 8px 10px 12px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar-view-all-btn {
  width: 100%; padding: 9px 16px;
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.10); border-radius: 10px;
  font-size: .78rem; font-weight: 700; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: all .15s;
}
.sidebar-view-all-btn:hover {
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.90);
}
.sidebar-view-all-btn i { font-size: .70rem; }

/* ── 3. Hub header — verified badge + community info ── */
.hub-verified-badge {
  display: inline-flex; align-items: center;
  color: #60A5FA; font-size: 1rem; vertical-align: middle;
  margin-left: 5px;
}
.hub-community-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 5px;
  flex-wrap: wrap;
}
.hub-community-pill {
  background: rgba(255,255,255,.20); color: rgba(255,255,255,.90);
  border: 1px solid rgba(255,255,255,.28); border-radius: 20px;
  font-size: .65rem; font-weight: 800; padding: 2px 9px;
  letter-spacing: .2px;
}
.hub-members-dot { color: rgba(255,255,255,.40); font-size: .72rem; }
.hub-members-online { color: rgba(255,255,255,.65); font-size: .72rem; font-weight: 600; }

/* ── 4. Gold coin stack in wallet card ── */
.wallet-card { display: flex !important; align-items: center; gap: 0; }
.wallet-card-body { flex: 1; min-width: 0; }
.wallet-coins-stack {
  position: relative; width: 62px; height: 66px;
  flex-shrink: 0; align-self: flex-end; margin-right: -2px;
  animation: cg-hubFloat 3.2s ease-in-out infinite;
}
.wallet-coin {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(145deg, #FFE566 0%, #F5A623 50%, #D97706 100%);
  border: 2px solid rgba(255,255,255,.38);
  box-shadow: 0 4px 14px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.14);
  display: flex; align-items: center; justify-content: center;
}
.wallet-coin::after {
  content: 'J'; font-size: .78rem; font-weight: 900;
  color: rgba(100,50,0,.72); font-family: inherit; letter-spacing: -.3px;
}
.wallet-coin:nth-child(1) { bottom: 0; left: 2px; z-index: 1; }
.wallet-coin:nth-child(2) { bottom: 9px; left: 9px; z-index: 2; }
.wallet-coin:nth-child(3) {
  bottom: 18px; left: 16px; z-index: 3;
  box-shadow: 0 6px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.40), inset 0 -1px 0 rgba(0,0,0,.12);
  background: linear-gradient(145deg, #FFF0A0 0%, #FFD34E 45%, #F5A623 100%);
}

/* ── 5. Stats bar icons ── */
.hub-stat { flex-direction: column; align-items: center; gap: 2px; }
.hub-stat-icon {
  font-size: .76rem; color: var(--primary);
  margin-bottom: 2px; opacity: .80;
}
.hub-stat-value { font-size: 1.05rem !important; font-weight: 900 !important; }
.hub-stat-label { font-size: .54rem !important; }

/* ── 6. Leaderboard — level badges ── */
.hsb-lb-level {
  font-size: .60rem; font-weight: 700;
  display: flex; align-items: center; gap: 3px; margin-top: 1px;
}
.hsb-lb-pts-right {
  font-size: .72rem; font-weight: 800; color: var(--text);
  text-align: right; flex-shrink: 0;
}
.hsb-lb-pts-right span { font-weight: 500; font-size: .60rem; color: var(--text-muted); }

/* ── 7. Events — attendee avatars + Remind Me ── */
.hsb-event-item {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 0; border-bottom: 0.5px solid var(--border-card);
}
.hsb-event-item:last-child { border-bottom: none; padding-bottom: 0; }
.hsb-event-top { display: flex; align-items: flex-start; gap: 8px; justify-content: space-between; }
.hsb-event-badge {
  background: rgba(200,16,46,.10); color: var(--primary);
  border: 1px solid rgba(200,16,46,.18); border-radius: 20px;
  font-size: .58rem; font-weight: 800; padding: 2px 7px;
  white-space: nowrap; flex-shrink: 0; text-transform: capitalize;
}
.hsb-event-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hsb-att-stack { display: flex; align-items: center; gap: 2px; }
.hsb-att-avatar {
  width: 20px; height: 20px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid rgba(255,255,255,.90); margin-left: -5px;
}
.hsb-att-avatar:first-child { margin-left: 0; }
.hsb-att-extra {
  font-size: .60rem; font-weight: 800; color: var(--text-muted);
  margin-left: 4px;
}
.hsb-att-count { font-size: .62rem; color: var(--text-muted); margin-left: 5px; }
.hsb-remind-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .65rem; font-weight: 800; color: var(--text-muted);
  background: rgba(0,0,0,.05); border: 1px solid var(--border-strong);
  border-radius: 20px; padding: 4px 10px;
  text-decoration: none; transition: all .14s; flex-shrink: 0;
}
.hsb-remind-btn:hover {
  background: var(--primary-soft); color: var(--primary);
  border-color: rgba(200,16,46,.22);
}

/* "View all tags" link */
.hsb-view-all-tags {
  display: block; margin-top: 10px; text-align: center;
  font-size: .68rem; font-weight: 800; color: var(--text-muted);
  text-decoration: none; transition: color .14s;
}
.hsb-view-all-tags:hover { color: var(--primary); }

/* ── Dark mode for new elements ── */
[data-theme="dark"] .sidebar-view-all-btn { color: rgba(255,255,255,.50) !important; }
[data-theme="dark"] .hsb-remind-btn { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.40) !important; }
[data-theme="dark"] .hsb-remind-btn:hover { color: #ff8a9a !important; border-color: rgba(200,16,46,.30) !important; }
[data-theme="dark"] .hsb-lb-pts-right { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .hsb-lb-pts-right span { color: rgba(255,255,255,.35) !important; }
[data-theme="dark"] .hsb-view-all-tags { color: rgba(255,255,255,.35) !important; }
[data-theme="dark"] .hsb-event-badge { background: rgba(200,16,46,.15) !important; }

/* ════════════════════════════════════════════════════════════════════
   CHAT BODY ROW + RIGHT INFO PANEL  (chat-2 mockup)
   Collapsible 276 px panel sits alongside chat-messages in a flex row.
════════════════════════════════════════════════════════════════════ */

/* ── Body row: horizontal flex holding messages + right panel ── */
.chat-body-row {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Inner messages column ── */
.chat-body-row > div:first-child {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Chat right panel shell ── */
.chat-right-panel {
  width: 0;
  flex-shrink: 0;
  overflow: hidden;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  border-left: 1px solid #e5e7eb;
  background: #f9fafb;
}
.chat-right-panel.open { width: 276px; }

/* ── Panel inner scroller ── */
.crp-inner {
  width: 276px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.crp-inner::-webkit-scrollbar { width: 3px; }
.crp-inner::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 4px; }

/* ── Header area: red gradient banner ── */
.crp-header-area {
  background: linear-gradient(140deg, #C8102E 0%, #8B0B1F 60%, #3A0210 100%);
  padding: 20px 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  flex-shrink: 0;
}
.crp-room-banner {
  width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,.18);
  border: 2px solid rgba(255,255,255,.28);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
.crp-room-name {
  font-size: .84rem; font-weight: 800; color: #ffffff;
  line-height: 1.2; width: 100%;
}
.crp-room-desc-panel {
  font-size: .67rem; color: rgba(255,255,255,.62);
  line-height: 1.4; width: 100%;
}
.crp-stats-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin: 8px 0 4px;
  background: rgba(255,255,255,.12);
  border-radius: 10px; border: 1px solid rgba(255,255,255,.18);
  padding: 8px 0; width: 100%;
}
.crp-stat-item { flex: 1; text-align: center; }
.crp-stat-val {
  font-size: .86rem; font-weight: 900; color: #ffffff; line-height: 1.1;
}
.crp-stat-lbl {
  font-size: .56rem; color: rgba(255,255,255,.58);
  font-weight: 600; margin-top: 2px;
}
.crp-stat-divider {
  width: 1px; height: 28px;
  background: rgba(255,255,255,.18);
  flex-shrink: 0;
}
.crp-invite-btn {
  width: 100%; padding: 8px 0;
  background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.26);
  border-radius: 10px; color: #ffffff;
  font-size: .74rem; font-weight: 800;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background .15s;
  margin-top: 6px;
}
.crp-invite-btn:hover { background: rgba(255,255,255,.28); }

/* ── Sections body ── */
.crp-sections-body {
  padding: 4px 14px 20px;
  display: flex; flex-direction: column;
  flex: 1;
}
.crp-section {
  padding: 12px 0;
  border-bottom: 0.5px solid #f1f3f5;
}
.crp-section:last-child { border-bottom: none; }
.crp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px;
  font-size: .65rem; font-weight: 800; color: #9ca3af;
  text-transform: uppercase; letter-spacing: .5px;
}
.crp-section-head i { color: #C8102E; }
.crp-see-all {
  font-size: .63rem; font-weight: 800; color: #C8102E;
  text-decoration: none; transition: opacity .14s;
}
.crp-see-all:hover { opacity: .7; }
.crp-badge-muted {
  font-size: .58rem; font-weight: 700; color: #9ca3af;
  background: #f3f4f6; padding: 2px 6px; border-radius: 20px;
}

/* ── Leaderboard rows ── */
.crp-lb-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; border-bottom: 0.5px solid #f3f4f6;
}
.crp-lb-item:last-child { border-bottom: none; padding-bottom: 0; }
.crp-lb-rank { font-size: .74rem; width: 16px; text-align: center; flex-shrink: 0; }
.crp-lb-avatar {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: rgba(200,16,46,.10); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800; color: #C8102E;
}
.crp-lb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.crp-lb-name {
  flex: 1; font-size: .72rem; font-weight: 700; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.crp-lb-pts {
  font-size: .65rem; font-weight: 800; color: #374151; flex-shrink: 0;
}
.crp-lb-pts span { color: #9ca3af; font-weight: 500; font-size: .57rem; }

/* ── Event rows ── */
.crp-event-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 5px 0; border-bottom: 0.5px solid #f3f4f6;
}
.crp-event-item:last-child { border-bottom: none; padding-bottom: 0; }
.crp-event-icon {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: rgba(200,16,46,.09); color: #C8102E;
  display: flex; align-items: center; justify-content: center; font-size: .72rem;
}
.crp-event-title { font-size: .71rem; font-weight: 700; color: #111827; line-height: 1.3; }
.crp-event-meta { font-size: .60rem; color: #6b7280; margin-top: 1px; }

/* ── Tags ── */
.crp-tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.crp-tag {
  padding: 3px 9px; border-radius: 20px;
  font-size: .63rem; font-weight: 700; font-family: inherit;
  background: color-mix(in srgb, var(--tag-color,#C8102E) 12%, transparent);
  color: var(--tag-color, #C8102E); border: none; cursor: pointer;
  transition: all .14s;
}
.crp-tag:hover { background: var(--tag-color, #C8102E); color: #fff; }

/* ── Empty placeholder ── */
.crp-empty {
  font-size: .68rem; color: #9ca3af; text-align: center; padding: 6px 0;
}

/* ── Toggle button in chat header ── */
.crp-toggle-btn {
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1.5px solid #e5e7eb;
  color: #6b7280; cursor: pointer; font-size: .80rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.crp-toggle-btn:hover, .crp-toggle-btn.active {
  background: rgba(200,16,46,.08);
  border-color: rgba(200,16,46,.22);
  color: #C8102E;
}

/* ── Responsive: hide on narrow screens ── */
@media (max-width: 860px) {
  .chat-right-panel.open { width: 0 !important; }
  .crp-toggle-btn { display: none !important; }
}

/* ── Dark mode ── */
[data-theme="dark"] .chat-right-panel {
  background: #2B2D31 !important;
  border-left-color: rgba(0,0,0,.28) !important;
}
[data-theme="dark"] .crp-section { border-bottom-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .crp-section-head { color: rgba(255,255,255,.35) !important; }
[data-theme="dark"] .crp-lb-name { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .crp-lb-pts { color: rgba(255,255,255,.65) !important; }
[data-theme="dark"] .crp-lb-item { border-bottom-color: rgba(255,255,255,.05) !important; }
[data-theme="dark"] .crp-lb-avatar { background: rgba(200,16,46,.15) !important; }
[data-theme="dark"] .crp-event-item { border-bottom-color: rgba(255,255,255,.05) !important; }
[data-theme="dark"] .crp-event-title { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .crp-event-meta { color: rgba(255,255,255,.38) !important; }
[data-theme="dark"] .crp-event-icon { background: rgba(200,16,46,.12) !important; }
[data-theme="dark"] .crp-empty { color: rgba(255,255,255,.30) !important; }
[data-theme="dark"] .crp-badge-muted { background: rgba(255,255,255,.07) !important; color: rgba(255,255,255,.38) !important; }
[data-theme="dark"] .crp-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,.10); }
[data-theme="dark"] .crp-toggle-btn { border-color: rgba(255,255,255,.10) !important; color: rgba(255,255,255,.45) !important; }
[data-theme="dark"] .crp-toggle-btn:hover,
[data-theme="dark"] .crp-toggle-btn.active {
  background: rgba(200,16,46,.12) !important;
  border-color: rgba(200,16,46,.22) !important;
  color: #ff8a9a !important;
}
[data-theme="dark"] .hub-community-pill { background: rgba(255,255,255,.14) !important; }

/* ════════════════════════════════════════════════════════════════════
   MOCKUP 2 FINAL — Visual polish pass
   #E8192C primary · floating stats card · sidebar card strip ·
   light chat panel · dark mode overrides
════════════════════════════════════════════════════════════════════ */

/* ── CSS variables ── */
:root {
  --primary: #E8192C !important;
  --primary-hover: #C8102E !important;
  --primary-active: #B00D24 !important;
  --maroon: #E8192C !important;
  --maroon-dark: #C8102E !important;
  --shadow-red: 0 6px 22px rgba(232,25,44,.20), 0 2px 6px rgba(232,25,44,.10) !important;
  --shadow-red-lg: 0 12px 36px rgba(232,25,44,.28), 0 4px 12px rgba(232,25,44,.14) !important;
}

/* ── Hub header: approved gradient + rounded top + spacing ── */
#no-room-selected {
  padding: 14px 14px 0 14px !important;
  background: var(--bg-main) !important;
}
.hub-header {
  background: linear-gradient(135deg, #FF1E36 0%, #E8192C 30%, #B00D24 62%, #6E0617 100%) !important;
  border-radius: 18px !important;
  margin: 0 !important;
  padding: 28px 28px 80px !important;
}
.hub-header::after { display: none !important; }
/* extra glossy sheen for vivid mockup look */
.hub-header::before {
  background:
    radial-gradient(ellipse 60% 70% at 85% -25%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 15% 120%, rgba(0,0,0,.18) 0%, transparent 55%) !important;
}
.crp-header-area {
  background: linear-gradient(135deg, #F01830 0%, #CC1128 35%, #8B0A1A 70%, #4A0510 100%) !important;
}
.hub-icon { filter: drop-shadow(0 0 18px rgba(232,25,44,.55)) !important; }
.hub-empty-btn { background: #E8192C !important; }

/* ── Stats bar: vivid frosted-glass panel sitting on the red hero ── */
.hub-stats-bar {
  background: linear-gradient(135deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 100%) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 34px rgba(60,3,14,.40), inset 0 1px 0 rgba(255,255,255,.30) !important;
  backdrop-filter: blur(18px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(170%) !important;
  margin: -64px 24px 16px 24px !important;
  position: relative !important;
  z-index: 6 !important;
  width: auto !important;
  overflow: hidden !important;
}
.hub-stat {
  flex: 1 !important;
  padding: 14px 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.hub-stat + .hub-stat::before { background: rgba(255,255,255,.20) !important; }
.hub-stat-value { color: #FFFFFF !important; font-size: 1.1rem !important; font-weight: 900 !important; text-shadow: 0 1px 4px rgba(0,0,0,.25) !important; }
.hub-stat-label { color: rgba(255,255,255,.72) !important; font-size: .55rem !important; font-weight: 800 !important; letter-spacing: .8px !important; }
.hub-stat-icon { color: rgba(255,255,255,.92) !important; opacity: 1 !important; font-size: .82rem !important; }
.hub-stat:last-child .hub-stat-value,
.hub-stat:last-child .hub-stat-icon { color: #FFFFFF !important; }
.hub-stat:hover { background: rgba(255,255,255,.10) !important; }

/* ── Sidebar: floating card strip ── */
.guff-sidebar { padding: 14px !important; background: var(--bg-main) !important; }
.sidebar-header {
  background: #FFFFFF !important;
  border-left: 1px solid #F0EEF8 !important;
  border-right: 1px solid #F0EEF8 !important;
  border-top: 1px solid #F0EEF8 !important;
  border-bottom: 1px solid #F0EEF8 !important;
  border-radius: 18px 18px 0 0 !important;
  box-shadow: none !important;
  padding: 14px 16px !important;
  height: auto !important;
}
.sidebar-header h2 { color: #16181D !important; font-size: .95rem !important; }
.sidebar-header h2 i { color: #E8192C !important; font-size: .95rem !important; }
.guff-hdr-btn-ghost {
  background: #F4F2FF !important;
  border: 1px solid #E0DCF8 !important;
  color: #70757F !important;
}
.guff-hdr-btn-ghost:hover {
  background: rgba(232,25,44,.12) !important;
  border-color: rgba(232,25,44,.25) !important;
  color: #E8192C !important;
}
.room-search-wrap {
  padding: 10px 12px !important;
  background: #FFFFFF !important;
  border-left: 1px solid #F0EEF8 !important;
  border-right: 1px solid #F0EEF8 !important;
}
.room-search-input {
  background: #F4F2FF !important;
  border: none !important;
  border-radius: 10px !important;
  color: #16181D !important;
  font-size: .82rem !important;
  padding: 8px 13px !important;
}
.room-search-input::placeholder { color: #A8ADB5 !important; }
.room-search-input:focus {
  background: #F4F2FF !important;
  box-shadow: 0 0 0 2px rgba(232,25,44,.15) !important;
  border-color: transparent !important;
}
.room-list {
  padding: 6px 8px !important;
  background: #FFFFFF !important;
  border-radius: 0 !important;
  border-left: 1px solid #F0EEF8 !important;
  border-right: 1px solid #F0EEF8 !important;
}
.room-item {
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-bottom: 3px !important;
  border: none !important;
  background: transparent !important;
}
.room-item::before { display: none !important; }
.room-item:hover { background: #F4F2FF !important; }
.room-item.active {
  background: #FFF1F3 !important;
  border: none !important;
  box-shadow: none !important;
}
.room-item.active .room-name { color: #E8192C !important; font-weight: 800 !important; }
.room-item:hover .room-name { color: #16181D !important; font-weight: 600 !important; }
.room-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #FFEFF1 !important;
  border: none !important;
  color: #E8192C !important;
  font-size: .85rem !important;
}
.room-item:hover .room-icon {
  background: #FFE0E5 !important;
  color: #E8192C !important;
  transform: none !important;
}
.room-item.active .room-icon {
  background: rgba(232,25,44,.12) !important;
  color: #E8192C !important;
  border-color: transparent !important;
}
.room-name { color: #16181D !important; font-size: .86rem !important; font-weight: 600 !important; }
.room-last-msg, .room-meta { color: #70757F !important; font-size: .67rem !important; }
.room-last-time { color: #A8ADB5 !important; font-size: .60rem !important; }
.room-unread-badge {
  background: #E8192C !important;
  font-size: .60rem !important;
  min-width: 20px !important;
  height: 20px !important;
  border-radius: 10px !important;
}
.sidebar-footer {
  border-top: 1px solid #F0EEF8 !important;
  border-bottom: 1px solid #F0EEF8 !important;
  border-left: 1px solid #F0EEF8 !important;
  border-right: 1px solid #F0EEF8 !important;
  border-radius: 0 0 18px 18px !important;
  background: #FFFFFF !important;
}
.sidebar-view-all-btn {
  color: #16181D !important;
  background: transparent !important;
  border: none !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}
.sidebar-view-all-btn:hover {
  background: #F4F2FF !important;
  color: #16181D !important;
}

/* ── Nearby banner ── */
.nearby-banner {
  background: #FFFFFF !important;
  border: 1px solid #F0EEF8 !important;
  border-radius: 14px !important;
  margin: 6px 8px 4px !important;
  padding: 12px 14px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.nearby-banner > i { display: none !important; }
.nearby-banner span { color: #16181D !important; font-size: .80rem !important; font-weight: 500 !important; line-height: 1.4 !important; }
.nearby-banner .shb-join,
.nearby-banner button:first-of-type {
  background: #E8192C !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 20px !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  animation: none !important;
}
.nearby-banner .shb-dismiss {
  background: transparent !important;
  border: 1.5px solid #E0DCF8 !important;
  color: #70757F !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 16px !important;
  font-size: .78rem !important;
}

/* ── Chat area ── */
.guff-main { background: #F8F7FF !important; }
#chat-window { background: #F8F7FF !important; }
.guff-main.social-hub { background: var(--bg-main) !important; }
.chat-messages { background: #F8F7FF !important; background-image: none !important; }
.chat-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #F0EEF8 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-header-info h3 { color: #16181D !important; }
.chat-header-info p  { color: #70757F !important; }
.msg-bubble {
  background: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
  color: #16181D !important;
  border-radius: 18px 18px 18px 4px !important;
}
.msg-group.me .msg-bubble {
  background: #F4F2FF !important;
  color: #16181D !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: none !important;
}
.msg-user { color: #3D4048 !important; }
.chat-input-area {
  background: #FFFFFF !important;
  border-top: 1px solid #F0EEF8 !important;
  box-shadow: none !important;
}
.chat-form {
  background: #F4F2FF !important;
  border: none !important;
  border-radius: 30px !important;
}
.chat-form:focus-within {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(232,25,44,.15) !important;
  border: none !important;
  border-color: transparent !important;
}
.chat-input { color: #16181D !important; }
.chat-input::placeholder { color: #A8ADB5 !important; }
.chat-btn {
  background: #E8192C !important;
  width: 38px !important;
  height: 38px !important;
  box-shadow: 0 2px 10px rgba(232,25,44,.35) !important;
}

/* ── Right sidebar cards ── */
.hsb-card {
  background: #FFFFFF !important;
  border: 1px solid #F0EEF8 !important;
  border-radius: 16px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Level + live badge ── */
#my-guff-level {
  background: #E8192C !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  font-size: .74rem !important;
  font-weight: 900 !important;
}
#live-badge { color: #22C55E !important; font-size: .62rem !important; animation: none !important; }

/* ── Dark mode overrides ── */
[data-theme="dark"] .guff-sidebar { background: #1a1b1e !important; padding: 0 !important; }
[data-theme="dark"] .sidebar-header { background: #2B2D31 !important; border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .room-search-wrap { background: #2B2D31 !important; border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .room-list { background: #2B2D31 !important; border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .sidebar-footer { background: #2B2D31 !important; border-color: rgba(255,255,255,.06) !important; }
[data-theme="dark"] #no-room-selected { background: #1a1b1e !important; padding: 0 !important; }
[data-theme="dark"] .hub-stats-bar {
  background: linear-gradient(135deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 100%) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.18) !important;
  margin: -64px 24px 16px 24px !important;
  border-radius: 16px !important;
}
[data-theme="dark"] .hub-stat-value { color: rgba(255,255,255,.95) !important; }
[data-theme="dark"] .hub-stat-label { color: rgba(255,255,255,.55) !important; }
[data-theme="dark"] .hub-stat + .hub-stat::before { background: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .guff-main { background: #313338 !important; }
[data-theme="dark"] #chat-window { background: #313338 !important; }
[data-theme="dark"] .chat-messages { background: #313338 !important; }
[data-theme="dark"] .chat-header { background: #2B2D31 !important; border-color: rgba(0,0,0,.25) !important; }
[data-theme="dark"] .chat-header-info h3 { color: rgba(255,255,255,.90) !important; }
[data-theme="dark"] .chat-header-info p  { color: rgba(255,255,255,.40) !important; }
[data-theme="dark"] .msg-bubble { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.88) !important; box-shadow: none !important; }
[data-theme="dark"] .msg-group.me .msg-bubble { background: rgba(232,25,44,.25) !important; color: rgba(255,255,255,.92) !important; }
[data-theme="dark"] .chat-input-area { background: #2B2D31 !important; }
[data-theme="dark"] .chat-form { background: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .hsb-card { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.07) !important; }
[data-theme="dark"] .nearby-banner { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.08) !important; }
[data-theme="dark"] .nearby-banner span { color: rgba(255,255,255,.70) !important; }
[data-theme="dark"] .room-item.active { background: rgba(232,25,44,.18) !important; }
[data-theme="dark"] .room-item:hover { background: rgba(255,255,255,.06) !important; }
[data-theme="dark"] .room-name { color: rgba(255,255,255,.75) !important; }

/* ════════════════════════════════════════════════════════════════════
   VISUAL REDESIGN PATCH — Right panel always-on · gradient card ·
   white chat bubbles · clean input · section styles
════════════════════════════════════════════════════════════════════ */

/* ── 1. Main backgrounds ── */
#guff-main { background: #ffffff !important; }
#chat-window { background: #f8f7ff !important; }

/* ── 2. Right panel: always visible at 276px (spec: always-on) ── */
#chat-right-panel {
  width: 276px !important;
  flex-shrink: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  border-left: 1px solid #f0eef8 !important;
  border-radius: 16px 16px 0 0 !important;
  transition: none !important;
  height: 100% !important;
}

/* ── 3. CRP inner ── */
.crp-inner {
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  width: 276px !important;
  min-height: 100% !important;
}

/* ── 4. Header area: gradient card (simulates .crp-top-card) ── */
.crp-header-area {
  background: linear-gradient(170deg, #ffcdd2 0%, #ef9a9a 30%, #e53935 70%, #b71c1c 100%) !important;
  margin: 12px 12px 0 12px !important;
  border-radius: 20px 20px 16px 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.10) !important;
  padding: 20px 16px 16px !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}

/* ── 5. Room banner: 72×72 circle ── */
.crp-room-banner {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.25) !important;
  border: 2px solid rgba(255,255,255,.40) !important;
  font-size: 2rem !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
  margin-bottom: 4px !important;
}

/* ── 6. Room name + description ── */
.crp-room-name {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}
.crp-room-desc-panel {
  font-size: .72rem !important;
  color: rgba(255,255,255,.80) !important;
  line-height: 1.4 !important;
}

/* ── 7. Stats row: frosted glass tile on gradient ── */
.crp-stats-row {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  border-radius: 12px !important;
  padding: 10px 0 !important;
  margin: 12px 0 0 !important;
  width: 100% !important;
}
.crp-stat-val {
  font-size: .88rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.1 !important;
}
.crp-stat-lbl {
  font-size: .56rem !important;
  color: rgba(255,255,255,.62) !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}
.crp-stat-divider {
  background: rgba(255,255,255,.22) !important;
  width: 1px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}

/* ── 8. Invite button: white-border ghost on gradient ── */
.crp-invite-btn {
  width: 100% !important;
  background: rgba(255,255,255,.16) !important;
  border: 1.5px solid rgba(255,255,255,.28) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  padding: 9px 0 !important;
  margin-top: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .15s !important;
}
.crp-invite-btn:hover { background: rgba(255,255,255,.28) !important; }

/* ── 9. Sections body: white card below the gradient header ── */
.crp-sections-body {
  background: #ffffff !important;
  margin: 0 12px 12px !important;
  border-radius: 0 0 16px 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.06) !important;
  flex: 1 !important;
}
.crp-section {
  background: #ffffff !important;
  padding: 12px 14px !important;
  border-bottom: .5px solid #f1f3f5 !important;
}
.crp-section:last-child { border-bottom: none !important; }
.crp-section-head {
  font-size: .65rem !important;
  font-weight: 800 !important;
  color: #9ca3af !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.crp-section-head i { color: #e8192c !important; margin-right: 4px !important; }
.crp-see-all {
  font-size: .63rem !important;
  font-weight: 800 !important;
  color: #e8192c !important;
  text-decoration: none !important;
  transition: opacity .14s !important;
}
.crp-see-all:hover { opacity: .7 !important; }
.crp-badge-muted {
  font-size: .58rem !important;
  font-weight: 700 !important;
  color: #9ca3af !important;
  background: #f3f4f6 !important;
  padding: 2px 6px !important;
  border-radius: 20px !important;
}
.crp-lb-name {
  font-size: .72rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}
.crp-lb-pts {
  font-size: .65rem !important;
  font-weight: 800 !important;
  color: #374151 !important;
}
.crp-lb-pts span { color: #9ca3af !important; font-weight: 500 !important; font-size: .57rem !important; }
.crp-event-title {
  font-size: .71rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
}
.crp-event-meta { font-size: .60rem !important; color: #6b7280 !important; }
.crp-empty {
  font-size: .68rem !important;
  color: #9ca3af !important;
  text-align: center !important;
  padding: 10px 0 !important;
  font-style: italic !important;
}
.crp-tag {
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: .63rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .14s !important;
}

/* ── 10. Chat header ── */
.chat-header {
  background: #ffffff !important;
  border-bottom: 1px solid #f0eef8 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.chat-header-info h3 { color: #16181D !important; }
.chat-header-info p  { color: #70757F !important; }

/* ── 11. Chat messages area ── */
.chat-messages { background: #f8f7ff !important; background-image: none !important; }

/* ── 12. Message bubbles ── */
.msg-bubble {
  background: #ffffff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.10) !important;
  color: #16181D !important;
  border-radius: 18px 18px 18px 4px !important;
}
.msg-group.me .msg-bubble {
  background: #f4f2ff !important;
  color: #16181D !important;
  border-radius: 18px 18px 4px 18px !important;
  box-shadow: none !important;
}

/* ── 13. Hot Tea / snippets bar ── */
.snippets-bar {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(200,16,46,.12) !important;
  border-left: 3px solid #e8192c !important;
  box-shadow: none !important;
  position: relative !important;
}
.snippets-bar::before { display: none !important; }
.snippets-bar-header { background: #ffffff !important; border-bottom-color: rgba(200,16,46,.08) !important; }
.snippets-bar-header span { color: #e8192c !important; }

/* ── 14. Chat input area ── */
.chat-input-area {
  background: #ffffff !important;
  border-top: 1px solid #f0eef8 !important;
  box-shadow: none !important;
}
.chat-form {
  background: #f4f2ff !important;
  border: none !important;
  border-radius: 30px !important;
  padding: 5px 6px 5px 16px !important;
}
.chat-form:focus-within {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(232,25,44,.15) !important;
  border: none !important;
}
.chat-input { color: #16181D !important; }
.chat-input::placeholder { color: #A8ADB5 !important; }
.chat-btn {
  background: #e8192c !important;
  width: 38px !important;
  height: 38px !important;
  box-shadow: 0 2px 10px rgba(232,25,44,.35) !important;
}

/* ── 15. Dark mode ── */
[data-theme="dark"] #chat-right-panel {
  background: #2B2D31 !important;
  border-left-color: rgba(0,0,0,.22) !important;
}
[data-theme="dark"] .crp-inner { background: #2B2D31 !important; }
[data-theme="dark"] .crp-sections-body {
  background: #2B2D31 !important;
  box-shadow: none !important;
}
[data-theme="dark"] .crp-section {
  background: #2B2D31 !important;
  border-color: rgba(255,255,255,.05) !important;
}
[data-theme="dark"] .crp-section-head { color: rgba(255,255,255,.35) !important; }
[data-theme="dark"] .crp-lb-name     { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .crp-lb-pts      { color: rgba(255,255,255,.62) !important; }
[data-theme="dark"] .crp-event-title { color: rgba(255,255,255,.80) !important; }
[data-theme="dark"] .crp-event-meta  { color: rgba(255,255,255,.38) !important; }
[data-theme="dark"] .crp-badge-muted {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.38) !important;
}
[data-theme="dark"] .crp-empty { color: rgba(255,255,255,.30) !important; }
[data-theme="dark"] #guff-main  { background: #313338 !important; }
[data-theme="dark"] #chat-window { background: #313338 !important; }

/* ═══════════════════════════════════════════════════════════════
   MOCKUP POLISH — Chiya Guff hub + sidebar
   Appended block; light banner, search bar, section label, caret.
   ═══════════════════════════════════════════════════════════════ */

/* ── Header caret next to "Chiya Guff" ── */
.sidebar-header h2 { display: flex; align-items: center; gap: 6px; }
.sidebar-header .guff-caret {
    font-size: .62rem; color: var(--text-muted);
    margin-left: 2px; cursor: pointer; transition: transform .18s;
}
.sidebar-header h2:hover .guff-caret { color: var(--primary); }

/* ── LIGHT HERO BANNER (overrides the dark cinematic one) ── */
.sidebar-hero-banner {
    background: #fff !important;
    border: 1px solid var(--border-card, #eee) !important;
    min-height: 0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05) !important;
}
.sidebar-hero-banner::before,
.sidebar-hero-banner::after { display: none !important; }
.shb-content { padding: 14px 14px 14px !important; }
.shb-location {
    color: var(--primary) !important;
    font-size: .68rem !important;
}
.shb-desc {
    color: var(--text-muted) !important;
    font-size: .76rem !important;
    margin-bottom: 12px !important;
}
.shb-dismiss {
    background: #fff !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-strong, #e3e3e3) !important;
}
.shb-dismiss:hover { background: var(--bg, #f6f6f8) !important; }

/* ── Avatar row inside hero banner ── */
.shb-avatars {
    display: flex; align-items: center; gap: 0;
    margin: 0 0 12px;
}
.shb-avatars .shb-av {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid #fff; margin-left: -8px;
    background: linear-gradient(135deg, #cdd2db, #aab0bd);
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 700; color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.shb-avatars .shb-av:first-child { margin-left: 0; }
.shb-avatars .shb-av-more {
    margin-left: 8px; font-size: .68rem; font-weight: 700;
    color: var(--text-muted);
    background: var(--bg, #f1f1f4); border: 1px solid var(--border-card, #eee);
    border-radius: 20px; padding: 3px 9px;
}

/* ── Sidebar room search ── */
.guff-room-search {
    margin: 4px 10px 6px;
    display: flex; align-items: center; gap: 8px;
    background: var(--bg, #f4f4f7);
    border: 1px solid var(--border-card, #ececf0);
    border-radius: 12px; padding: 8px 12px;
    transition: box-shadow .15s, border-color .15s;
}
.guff-room-search:focus-within {
    background: #fff;
    border-color: rgba(200,16,46,.35);
    box-shadow: 0 0 0 3px rgba(200,16,46,.08);
}
.guff-room-search i { color: var(--text-muted); font-size: .8rem; }
.guff-room-search input {
    flex: 1; border: none; background: transparent; outline: none;
    font-family: inherit; font-size: .82rem; color: var(--text);
}
.guff-room-search input::placeholder { color: var(--text-muted); }
.guff-room-search .grs-filter {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: .82rem; padding: 0; line-height: 1;
}
.guff-room-search .grs-filter:hover { color: var(--primary); }

/* ── "NEAREST TO YOU" section label ── */
.room-list-label {
    font-size: .62rem; font-weight: 800; letter-spacing: .8px;
    text-transform: uppercase; color: var(--text-muted);
    padding: 8px 16px 4px; margin: 0;
}

/* ── Stat icons — distinct, fully opaque ── */
.hub-stat-icon { opacity: 1 !important; font-size: .82rem !important; }
.hub-stat:nth-child(1) .hub-stat-icon { color: var(--primary) !important; }
.hub-stat:nth-child(2) .hub-stat-icon { color: #7c5cff !important; }
.hub-stat:nth-child(3) .hub-stat-icon { color: #e8682c !important; }
.hub-stat:nth-child(4) .hub-stat-icon { color: var(--primary) !important; }

/* Dark-theme: keep banner readable */
[data-theme="dark"] .sidebar-hero-banner {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .shb-dismiss {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.8) !important;
}
[data-theme="dark"] .guff-room-search {
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .shb-avatars .shb-av-more {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.12) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOCKUP POLISH v2 — unify sidebar into ONE white panel
   Removes the per-section side borders (the vertical line) and the
   broken "card strip" so the column reads as a single floating card.
   ═══════════════════════════════════════════════════════════════ */

/* The sidebar IS the white floating panel */
.guff-sidebar {
    background: #FFFFFF !important;
    border: 1px solid #ECEAF4 !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.05) !important;
    margin: 10px 8px 10px 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Strip per-section backgrounds / side borders / radii */
.sidebar-header,
.room-search-wrap,
.room-list,
.sidebar-footer {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
}
.sidebar-header {
    border-top: none !important;
    border-bottom: none !important;
    padding: 14px 16px 8px !important;
}
.room-list { padding: 4px 10px !important; }
.sidebar-footer {
    border-top: 1px solid #F1EFF8 !important;
    border-bottom: none !important;
    background: #FFFFFF !important;
}

/* Keep banner + search aligned to the panel insets */
.sidebar-hero-banner { margin: 4px 14px 6px !important; }
.guff-room-search    { margin: 4px 14px 8px !important; }
.room-list-label     { padding: 6px 16px 4px !important; }

/* ── Dark theme: panel becomes one dark card ── */
[data-theme="dark"] .guff-sidebar {
    background: #1A1B1E !important;
    border-color: rgba(255,255,255,.07) !important;
}
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .room-search-wrap,
[data-theme="dark"] .room-list {
    background: transparent !important;
    border-color: transparent !important;
}
[data-theme="dark"] .sidebar-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOCKUP POLISH v3 — hub canvas + hero attachment
   White canvas (was lavender) and the red hero banner attached flush
   to the top with rounded top corners + soft shadow, like the mockup.
   Content below keeps its inset; stats bar still overlaps.
   ═══════════════════════════════════════════════════════════════ */
#no-room-selected {
    background: #FFFFFF !important;
    padding: 0 !important;
}
.hub-header {
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 12px 26px -12px rgba(0,0,0,.20) !important;
    position: relative !important;
    z-index: 1 !important;
}
/* Keep the stats card overlapping + inset from the flush hero edges */
.hub-stats-bar {
    margin: -20px 16px 0 16px !important;
    z-index: 5 !important;
}

[data-theme="dark"] #no-room-selected {
    background: #1A1B1E !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOCKUP POLISH v4 — hub as a floating white panel
   Gives the hub a top margin (aligns with the sidebar/columns) and
   makes it a white rounded-top card floating on the app lavender,
   with the red hero as its header. Fixes flush-top + stray bg.
   ═══════════════════════════════════════════════════════════════ */

/* Let the app background show in the panel's gutters (like the sidebar) */
.guff-container:not(.room-open) #guff-main {
    background: transparent !important;
}

#no-room-selected {
    background: #FFFFFF !important;
    margin: 10px 12px 0 8px !important;
    padding: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.05) !important;
}

[data-theme="dark"] .guff-container:not(.room-open) #guff-main {
    background: transparent !important;
}
[data-theme="dark"] #no-room-selected {
    background: #1A1B1E !important;
    margin: 10px 12px 0 8px !important;
    padding: 0 !important;
    border-radius: 18px 18px 0 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   VIVID GLASS PASS — translucent frosted panels over a warm canvas
   (rooms-list sidebar + hub content cards below the red banner)
════════════════════════════════════════════════════════════════════ */

/* 1 ── Warm vivid canvas so the frosted glass actually shows colour ── */
.guff-sidebar {
  background: linear-gradient(165deg, #FFEDE4 0%, #FFDFE6 46%, #FBD8EE 100%) !important;
}
#no-room-selected {
  background:
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(232,25,44,.10) 0%, transparent 55%),
    linear-gradient(158deg, #FFEDE4 0%, #FFE0E6 40%, #FBD9EE 74%, #FFEFF3 100%) !important;
}

/* 2 ── Rooms-list sidebar: frosted glass column ── */
.sidebar-header,
.room-search-wrap,
.room-list,
.sidebar-footer {
  background: rgba(255,255,255,.42) !important;
  border-color: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
}
.nearby-banner {
  background: rgba(255,255,255,.50) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
}
.room-search-input { background: rgba(255,255,255,.55) !important; }
.room-search-input:focus { background: rgba(255,255,255,.72) !important; }
.room-item:hover  { background: rgba(255,255,255,.45) !important; }
.room-item.active { background: rgba(232,25,44,.10) !important; }

/* 3 ── Right-rail cards: frosted glass ── */
.hsb-card {
  background: rgba(255,255,255,.40) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  backdrop-filter: blur(24px) saturate(185%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) !important;
  box-shadow: 0 10px 30px rgba(160,20,55,.10), inset 0 1px 0 rgba(255,255,255,.50) !important;
}

/* 4 ── Main-column empty cards: frost the dashed cards ── */
.hub-empty {
  background: rgba(255,255,255,.38) !important;
  backdrop-filter: blur(20px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(175%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.50) !important;
}

/* 5 ── Dark mode: deep maroon canvas + dark frosted glass ── */
[data-theme="dark"] .guff-sidebar {
  background: linear-gradient(165deg, #0E2347 0%, #0A1B3A 60%, #081633 100%) !important;
}
[data-theme="dark"] #no-room-selected {
  background:
    radial-gradient(ellipse 90% 60% at 100% 0%, rgba(232,25,44,.16) 0%, transparent 55%),
    linear-gradient(158deg, #0E2347 0%, #0A1B3A 60%, #081633 100%) !important;
}
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .room-search-wrap,
[data-theme="dark"] .room-list,
[data-theme="dark"] .sidebar-footer,
[data-theme="dark"] .nearby-banner {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}
[data-theme="dark"] .hsb-card,
[data-theme="dark"] .hub-empty {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ════════════════════════════════════════════════════════════════════
   TONE-DOWN PASS — blend with the global gradient
   The "VIVID GLASS PASS" above painted the rooms sidebar + hub canvas
   with their OWN saturated pink gradient, so the column looked too pink
   and disconnected from the rest of the app. This pass makes those big
   containers TRANSPARENT so the fixed warm body gradient (peach/pink/
   blue from style.css) flows through them — just like the left nav and
   the outer gutters — then keeps the inner panels as gentle frosted
   white so content stays legible without reading as stark white.
   Light mode only.
════════════════════════════════════════════════════════════════════ */

/* 1 ── Canvas: fully transparent so the global body gradient shows ── */
.guff-sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#no-room-selected {
  background: transparent !important;
  box-shadow: none !important;
}
.guff-container:not(.room-open) #guff-main {
  background: transparent !important;
}

/* 2 ── Rooms-list column: gentle frosted white over the gradient ── */
.sidebar-header,
.room-search-wrap,
.room-list,
.sidebar-footer {
  background: rgba(255,255,255,.61) !important;
  border-color: rgba(255,255,255,.5) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
.nearby-banner {
  background: rgba(255,255,255,.68) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
.room-search-input { background: rgba(255,255,255,.7) !important; }
.room-search-input:focus { background: rgba(255,255,255,.88) !important; }
.room-item:hover  { background: rgba(255,255,255,.6) !important; }
.room-item.active { background: rgba(232,25,44,.10) !important; }

/* 3 ── Right-rail cards: gentle frosted white over the gradient ── */
.hsb-card {
  background: rgba(255,255,255,.64) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow: 0 6px 22px rgba(120,30,50,.07), inset 0 1px 0 rgba(255,255,255,.55) !important;
}

/* 4 ── Empty/dashed cards in main column ── */
.hub-empty {
  background: rgba(255,255,255,.48) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* 5 ── Stats bar: solid deep-red band reading as part of the hero ── */
.hub-stats-bar {
  background: linear-gradient(135deg, #E8192C 0%, #C8102E 52%, #9E0A20 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 12px 28px -10px rgba(120,8,24,.45), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hub-stat-icon,
.hub-stat:nth-child(1) .hub-stat-icon,
.hub-stat:nth-child(2) .hub-stat-icon,
.hub-stat:nth-child(3) .hub-stat-icon,
.hub-stat:nth-child(4) .hub-stat-icon { color: rgba(255,255,255,.92) !important; }
.hub-stat + .hub-stat::before { background: rgba(255,255,255,.18) !important; }

/* 6 ── Chat (room-open) screen: same transparent-over-gradient look ── */
/* The body gradient is cool/blue on the far-right where the chat sits, so
   pure transparency reads as flat gray. Keep the canvas see-through but lay
   a faint WARM wash over the chat region so it harmonises with the peach
   rooms panel and the rest of the app. */
.guff-container.room-open #guff-main,
.guff-container.room-open .chat-messages {
  background: transparent !important;
  background-image: none !important;
}
.guff-container.room-open #chat-window {
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(255,224,222,.50) 0%, transparent 62%),
    linear-gradient(180deg, rgba(255,240,238,.34) 0%, rgba(255,246,250,.20) 100%) !important;
}
/* Chat top bar: light frosted glass — mostly see-through */
.chat-header {
  background: rgba(255,255,255,.4) !important;
  border-bottom: 1px solid rgba(255,255,255,.4) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow: none !important;
}
/* Hot Tea snippets bar */
.snippets-bar,
.snippets-bar-header {
  background: rgba(255,255,255,.32) !important;
  border-color: rgba(255,255,255,.35) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}
/* Composer / input row */
.chat-input-area {
  background: rgba(255,255,255,.4) !important;
  border-top: 1px solid rgba(255,255,255,.4) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow: none !important;
}
.chat-form {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
}
.chat-form:focus-within {
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 0 0 2px rgba(232,25,44,.15) !important;
}
/* Keep incoming bubbles readable as solid cards over the gradient */
.msg-bubble {
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.msg-group.me .msg-bubble {
  background: rgba(232,25,44,.92) !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(232,25,44,.25) !important;
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR UNIFY — one continuous frosted panel (no transparent gaps)
   Earlier passes frosted individual sections but targeted .room-search-wrap
   (the real markup uses .guff-room-search) and skipped .room-list-label +
   the hero banner — so the search + "Nearest to you" band sat bare on the
   body gradient, breaking the column. Move the frost to the sidebar itself
   so the header, hero banner, search, label, room list and footer all ride
   on ONE background. Light mode.
════════════════════════════════════════════════════════════════════ */
.guff-container:not(.room-open) .guff-sidebar,
.guff-sidebar {
  background: rgba(255,255,255,.61) !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 24px rgba(120,30,50,.07) !important;
  margin: 10px 8px 10px 10px !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  overflow: hidden !important;
}
/* Inner sections ride transparently on the panel — no own frost, no gaps */
.sidebar-header,
.guff-room-search,
.room-search-wrap,
.room-list,
.room-list-label,
.sidebar-footer {
  background: transparent !important;
  border-left: none !important;
  border-right: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* Search keeps a soft pill so the input still reads as a field */
.guff-room-search {
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
}
.guff-room-search:focus-within {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(232,25,44,.30) !important;
}
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.5) !important; }

/* Dark mode: one dark frosted panel */
[data-theme="dark"] .guff-sidebar {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
[data-theme="dark"] .sidebar-header,
[data-theme="dark"] .guff-room-search,
[data-theme="dark"] .room-search-wrap,
[data-theme="dark"] .room-list,
[data-theme="dark"] .room-list-label,
[data-theme="dark"] .sidebar-footer {
  background: transparent !important;
}
[data-theme="dark"] .guff-room-search {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
[data-theme="dark"] .sidebar-footer { border-top: 1px solid rgba(255,255,255,.08) !important; }

/* ════════════════════════════════════════════════════════════════════
   CHAT ROOM CLEANUP — one gradient canvas, no overlapping layers
   The room (room-open) view stacked several translucent backgrounds:
   #chat-window wash + frosted .chat-header / .snippets-bar /
   .chat-input-area, all over the body gradient — reading as muddy
   overlapping bands. Strip every container background so a SINGLE soft
   gradient shows on the canvas, keep the header + Hot Tea strip clean
   near-white, float the composer as a white pill, and let the message
   bubbles / listing cards be the only solid surfaces (matches mockup).
   Light mode.
════════════════════════════════════════════════════════════════════ */

/* 1 ── Single soft gradient canvas (warm peach → cool lavender) ── */
.guff-container.room-open #chat-window {
  background: linear-gradient(150deg, #FCEFEA 0%, #F8EEF2 50%, #F3EFF8 100%) !important;
  background-image: linear-gradient(150deg, #FCEFEA 0%, #F8EEF2 50%, #F3EFF8 100%) !important;
}

/* 2 ── All container divs transparent — let the canvas show through ── */
.guff-container.room-open #guff-main,
.guff-container.room-open .chat-messages,
.guff-container.room-open .chat-body-row,
.guff-container.room-open .chat-body-row > div:first-child {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* 3 ── Header: clean near-white strip ── */
.guff-container.room-open .chat-header {
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: none !important;
}

/* 4 ── Hot Tea strip: faint white band ── */
.guff-container.room-open .snippets-bar,
.guff-container.room-open .snippets-bar-header {
  background: rgba(255,255,255,.5) !important;
  border-color: rgba(0,0,0,.04) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
}

/* 5 ── Composer: no bar background, float a white pill ── */
.guff-container.room-open .chat-input-area {
  background: transparent !important;
  border-top: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
.guff-container.room-open .chat-form {
  background: rgba(255,255,255,.94) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
  box-shadow: 0 4px 18px rgba(120,30,50,.06) !important;
}
.guff-container.room-open .chat-form:focus-within {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(232,25,44,.15), 0 4px 18px rgba(120,30,50,.08) !important;
}

/* 6 ── Bubbles + listing cards stay solid (the only real surfaces) ── */
.guff-container.room-open .msg-bubble {
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.08) !important;
}
.guff-container.room-open .msg-group.me .msg-bubble {
  background: #E8192C !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(232,25,44,.22) !important;
}

/* Dark mode: deep canvas, transparent containers */
[data-theme="dark"] .guff-container.room-open #chat-window {
  background: linear-gradient(150deg, #1f0c12 0%, #190a0f 55%, #130810 100%) !important;
}
[data-theme="dark"] .guff-container.room-open #guff-main,
[data-theme="dark"] .guff-container.room-open .chat-messages,
[data-theme="dark"] .guff-container.room-open .chat-body-row,
[data-theme="dark"] .guff-container.room-open .chat-body-row > div:first-child {
  background: transparent !important;
  background-image: none !important;
}
[data-theme="dark"] .guff-container.room-open .chat-header,
[data-theme="dark"] .guff-container.room-open .snippets-bar,
[data-theme="dark"] .guff-container.room-open .snippets-bar-header {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
[data-theme="dark"] .guff-container.room-open .chat-input-area {
  background: transparent !important;
  border-top: none !important;
}
[data-theme="dark"] .guff-container.room-open .chat-form {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}


/* ── Phone: left-aligned room rows + green intro card ── */
.guff-m-intro { display: none; }
@media (max-width: 600px) {
  .room-info { align-items: flex-start !important; text-align: left !important; }
  .room-name, .room-last-msg, .room-meta { text-align: left !important; }
  .room-name { color: var(--text) !important; }
  .room-item.active .room-name { color: #fff !important; }
  .guff-m-intro {
    display: flex; align-items: center; gap: 12px;
    margin: 4px 14px 10px; padding: 14px;
    border-radius: 18px; color: #fff;
    background: linear-gradient(140deg, #C8102E 0%, #8B0B1F 55%, #3A0210 100%);
    box-shadow: 0 10px 24px -10px rgba(138,10,27,.55);
  }
  .guff-m-intro-ico {
    width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  }
  .guff-m-intro-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .guff-m-intro-txt strong { font-size: .86rem; font-weight: 800; line-height: 1.25; }
  .guff-m-intro-txt span { font-size: .72rem; opacity: .82; line-height: 1.3; }
  .guff-m-intro-btn {
    flex-shrink: 0; border: none; border-bottom: 3px solid rgba(0,0,0,.22);
    background: #fff; color: #C8102E; font-family: inherit; font-weight: 800; font-size: .76rem;
    padding: 8px 14px; border-radius: 999px; cursor: pointer;
  }
  .guff-m-intro-btn:active { transform: translateY(2px); border-bottom-width: 1px; }
}


/* ── Gift events: one quiet line, not a full bubble with avatar ── */
.msg-gift-line {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 6px auto; padding: 5px 14px; max-width: max-content;
  font-size: .76rem; color: var(--text-muted);
  background: rgba(200,16,46,.06); border: 1px solid rgba(200,16,46,.10); border-radius: 999px;
}
.msg-gift-line strong { color: var(--text); font-weight: 800; }
.msg-gift-line .mgl-ico { font-size: .95rem; line-height: 1; }
.msg-gift-line time { font-size: .62rem; opacity: .6; margin-left: 4px; }

/* ── Browse rooms: member meta + search icon (the overlay override had wiped it) ── */
.browse-room-meta { font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.browse-room-meta i { font-size: .62rem; opacity: .7; }
#browse-overlay #browse-search-input.browse-search {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2370757F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: 14px center !important;
  padding-left: 38px !important;
}

/* ── Chat header: de-crowd the crowns (Chiya Don / Momo King) ── */
#chat-window .chat-header .leaderboard-strip { gap: 10px !important; margin-right: 6px; }
#chat-window .chat-header .lb-crown {
  gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px;
  background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.25);
}
#chat-window .chat-header .lb-crown > span { font-size: .9rem; line-height: 1; }
#chat-window .chat-header .lb-avatar { width: 22px !important; height: 22px !important; border-width: 1.5px; box-shadow: none; }

.chat-rules { display:flex; align-items:center; justify-content:center; gap:7px; font-size:.68rem; font-weight:600; color:var(--text-muted); padding:6px 14px 0; }
.chat-rules i { color:#b45309; font-size:.7rem; }