/* ============================================================
   ROOT VARIABLES
============================================================ */
:root {
  /* NEO-BRUTALISM MODERN — Pastel Pop */
  --bg: #F3F4F6;
  --panel: #FFFFFF;
  --panel2: #F8F9FA;
  --line: #000000;
  --text: #0A0A0A;
  --muted: #525252;
  --accent: #FB7185;
  --accent2: #F472B6;
  --shadow: 4px 4px 0 #000000;
  --shadow-lg: 6px 6px 0 #000000;
  --neon: #60A5FA;
  --nb-yellow: #FACC15;
  --nb-blue: #60A5FA;
  --nb-cyan: #A5F3FC;
  --nb-purple: #C084FC;
  --nb-pink: #FBCFE8;
  --nb-lime: #A7F3D0;
  --nb-mint: #34D399;
  --nb-coral: #FB7185;
  --nb-indigo: #818CF8;
  --nb-border: 3px solid #000000;
  --nb-radius: 12px;
  --nb-radius-sm: 8px;
  --nb-spring: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  --neon-glow: none;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "Plus Jakarta Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}

body { overflow-x: hidden; }

.hidden { display: none !important; }

.bg-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.38;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 24%, rgba(214, 69, 69, 0.16), transparent 32%);
  background-size: 88px 88px, 88px 88px, 100% 100%;
}

.app { position: relative; width: min(1080px, 92%); margin: auto; padding: 26px 0 100px; }

/* ============================================================
   TOPBAR
============================================================ */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.left-header { display: flex; align-items: center; gap: 12px; }
.brand { color: #ffffff; text-decoration: none; font: 700 25px "Space Grotesk", sans-serif; display: flex; align-items: center; gap: 10px; }
.brand-neon {
  background: linear-gradient(90deg, var(--neon), #ffffff, var(--neon));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerMove 2.4s linear infinite;
}

.top-actions { display: flex; align-items: center; gap: 10px; color: #87878f; font-size: 12px; }
.secure { border: 1px solid #303035; padding: 9px 12px; border-radius: 999px; background: #1d1d20; }
.secure::first-letter { color: #67d28c; }

.icon-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  /* Cegah Google Translate merusak ligature icon */
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
}

/* Saat translate browser aktif, sembunyikan teks fallback icon yang sudah diterjemahkan */
.feature-icon .material-symbols-outlined,
.nav-item .material-symbols-outlined,
.history-icon-box .material-symbols-outlined {
  overflow: hidden;
  max-width: 1.2em;
  text-indent: 0;
}

@media (max-width: 760px) {
  .topbar { margin-bottom: 36px; }
  .secure { display: none; }
}

/* ============================================================
   AUTH MODAL
============================================================ */
.auth-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.auth-modal.open { opacity: 1; visibility: visible; }

.auth-card {
  position: relative;
  width: min(420px, 92vw);
  min-height: 480px;
  border-radius: 32px;
  background: rgba(20, 50, 30, 0.25);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(100, 255, 150, 0.18);
  box-shadow: 0 25px 80px rgba(0,0,0,0.55), 0 0 60px rgba(100,255,150,0.08);
  overflow: hidden;
}

.auth-close {
  position: absolute; top: 16px; right: 20px; z-index: 10;
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 28px; cursor: pointer; width: 36px; height: 36px;
  border-radius: 50%; transition: 0.2s;
}
.auth-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

.auth-panel {
  position: absolute; inset: 0;
  padding: 44px 32px 32px;
  display: flex; flex-direction: column; align-items: center;
  transition: all 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}
.auth-panel.active { transform: translateX(0); opacity: 1; pointer-events: auto; }
.auth-panel:not(.active) { opacity: 0; pointer-events: none; }
.auth-panel:nth-child(2):not(.active) { transform: translateX(-40px); }
.auth-panel:nth-child(3):not(.active) { transform: translateX(40px); }

.auth-panel h2 {
  font: 700 32px "Space Grotesk", sans-serif; margin: 0 0 6px;
  color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.2);
}
.auth-sub { color: rgba(255,255,255,0.65); font-size: 13px; margin: 0 0 24px; text-align: center; }

.auth-input-wrap {
  width: 100%; margin-bottom: 14px;
}
.auth-input-wrap input {
  width: 100%; height: 54px; border-radius: 16px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff; font-size: 14px; font-family: inherit;
  padding: 0 18px; outline: none; transition: 0.25s;
}
.auth-input-wrap input:focus {
  border-color: rgba(120, 255, 160, 0.5);
  background: rgba(255,255,255,0.11);
  box-shadow: 0 0 18px rgba(120,255,160,0.12);
}
.auth-input-wrap input::placeholder { color: rgba(255,255,255,0.4); }

.password-wrap { position: relative; }
.password-wrap input { padding-right: 46px; }
.toggle-pass {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.5);
  cursor: pointer; display: grid; place-items: center;
}

.auth-options {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; font-size: 12px;
}
.auth-check { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.7); cursor: pointer; }
.auth-check input { accent-color: var(--neon); }
.auth-options a { color: var(--neon); text-decoration: none; }

.auth-btn-primary {
  width: 100%; height: 52px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff; font-weight: 700; font-size: 16px; font-family: inherit;
  cursor: pointer; transition: 0.25s;
  box-shadow: 0 8px 28px rgba(168,85,247,0.35);
}
.auth-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 35px rgba(168,85,247,0.5); }

.auth-btn-secondary {
  width: 100%; height: 52px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  color: #ddd; font-weight: 600; font-size: 15px; font-family: inherit;
  cursor: pointer; transition: 0.2s;
}
.auth-btn-secondary:hover { background: rgba(255,255,255,0.1); }

/* Modal ringkas (laporan, konfirmasi) — nggak ikut ukuran raksasa auth-card */
.compact-modal-card {
  position: relative;
  width: min(360px, 90vw);
  border-radius: 24px;
  padding: 32px 24px 24px;
  background: rgba(20, 50, 30, 0.4);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(100, 255, 150, 0.18);
  box-shadow: 0 25px 80px rgba(0,0,0,0.55), 0 0 60px rgba(100,255,150,0.08);
  display: flex; flex-direction: column; align-items: center;
}
.compact-modal-card h2 { font-size: 22px; margin: 0 0 8px; text-align: center; user-select: none; }
.compact-modal-card .auth-sub { margin-bottom: 20px; user-select: none; }
.compact-modal-card .auth-input-wrap { width: 100%; margin-bottom: 20px; }
body.bg-white .compact-modal-card { background: rgba(255,255,255,0.98); border-color: #e5e7eb; }
body.bg-white .compact-modal-card h2 { color: #111827; }
body.bg-white .auth-btn-secondary { background: #f3f4f6; border-color: #d1d5db; color: #374151; }

.auth-divider {
  width: 100%; display: flex; align-items: center; gap: 14px;
  margin: 18px 0; color: rgba(255,255,255,0.45); font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.15); }

.auth-google {
  width: 100%; height: 48px; border-radius: 14px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-weight: 600; font-size: 14px; font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: 0.2s;
}
.auth-google:hover { background: rgba(255,255,255,0.14); }
.auth-google img { width: 18px; height: 18px; }

.auth-switch { margin-top: auto; padding-top: 16px; font-size: 13px; color: rgba(255,255,255,0.6); }
.auth-switch a { color: var(--neon); font-weight: 600; text-decoration: none; }

/* ============================================================
   BOTTOM NAVIGATION
============================================================ */
.bottom-nav {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  z-index: 100;
  box-shadow: 0 12px 50px rgba(0,0,0,0.45), 0 0 30px rgba(77,216,255,0.06);
  transition: all 0.4s ease;
}

.nav-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 22px; border-radius: 20px;
  background: transparent; border: none; color: #8a8a94;
  cursor: pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item .material-symbols-outlined { font-size: 24px; transition: 0.3s; }
.nav-label { font-size: 11px; font-weight: 600; transition: 0.3s; }

.nav-item.active {
  background: rgba(77, 216, 255, 0.12);
  color: var(--neon);
  box-shadow: 0 0 24px rgba(77,216,255,0.25), inset 0 0 12px rgba(77,216,255,0.08);
  transform: translateY(-6px);
}
.nav-item.active .material-symbols-outlined {
  filter: drop-shadow(0 0 6px rgba(77,216,255,0.8));
}

/* ============================================================
   PAGE TRANSITIONS
============================================================ */
.page-section {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  display: none;
}
.page-section.active-page {
  display: block; opacity: 1; transform: translateY(0);
}
.page-fade-in {
  animation: pageFadeIn 0.5s ease both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO + HOME
============================================================ */
.hero-home { max-width: 800px; margin: 0 auto 40px; text-align: center; }
.home-title { font: 700 clamp(36px, 6vw, 64px)/1.05 "Space Grotesk", sans-serif; margin: 0 0 16px; min-height: 1.3em; }
.neon-sub { color: var(--neon); text-shadow: 0 0 12px rgba(77,216,255,.4); font-size: 18px; margin: 30px 0 14px; }

.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 32px 0; max-width: 700px; margin-left: auto; margin-right: auto;
}
.stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px; padding: 18px 10px;
  text-align: center; transition: 0.3s;
}
.stat-card:hover { transform: translateY(-4px); border-color: rgba(77,216,255,0.3); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
.stat-num {
  display: block; font: 700 28px "Space Grotesk", sans-serif;
  color: var(--neon); text-shadow: 0 0 10px rgba(77,216,255,.4);
}
.stat-label { font-size: 11px; color: var(--muted); margin-top: 4px; display: block; }

@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

.home-sosmed { margin-top: 36px; }
.home-sosmed .social-row { max-width: 400px; margin: 0 auto; }

/* ============================================================
   SEARCH PAGE
============================================================ */
.search-header { text-align: center; margin-bottom: 30px; }
.search-box {
  position: relative; max-width: 520px; margin: 18px auto 0;
}
.search-box input {
  width: 100%; height: 56px; border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 15px; font-family: inherit;
  padding: 0 20px 0 52px; outline: none; transition: 0.25s;
}
.search-box input:focus {
  border-color: rgba(77,216,255,0.5);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 20px rgba(77,216,255,0.1);
}
.search-box .material-symbols-outlined {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.4); font-size: 22px;
}

.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px; max-width: 900px; margin: 0 auto;
}
.feature-card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #ddd; cursor: pointer; transition: 0.3s;
}
.feature-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(77,216,255,0.35);
  box-shadow: 0 12px 35px rgba(0,0,0,0.35), 0 0 20px rgba(77,216,255,0.1);
}
.feature-back-card { border-style: dashed; opacity: 0.85; }
.feature-back-card:hover { opacity: 1; }
.feature-icon {
  width: 50px; height: 50px; border-radius: 16px;
  background: rgba(77,216,255,0.12);
  display: grid; place-items: center; font-size: 22px;
  color: var(--neon); flex-shrink: 0;
}
.feature-info strong { display: block; font-size: 15px; margin-bottom: 4px; color: #fff; }
.feature-info small { color: var(--muted); font-size: 12px; }

/* ============================================================
   CHAT PAGE
============================================================ */
/* Chat fullscreen mode */
body.chat-fullscreen .topbar,
body.chat-fullscreen .bottom-nav {
  display: none !important;
}
body.chat-fullscreen .app {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
}
body.chat-fullscreen #page-chat {
  margin: 0;
  padding: 0;
}
body.chat-fullscreen #page-chat.active-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.chat-container {
  display: flex; flex-direction: column;
  height: calc(100vh - 200px);
  max-height: 720px;
  border-radius: 28px;
  background: #080808;
  border: 1px solid #222;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
body.chat-fullscreen .chat-container {
  height: 100vh;
  height: 100dvh;
  max-height: none;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #1a1a1a;
  background: #0d0d0d;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 20;
}
.chat-header-left {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.chat-header-right {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-header h2 {
  margin: 0; font-size: 17px; color: #fff; font-weight: 700;
  letter-spacing: 0.4px;
}
.chat-badge {
  font-size: 11px; color: var(--muted);
  background: rgba(77,216,255,0.1);
  padding: 5px 12px; border-radius: 999px;
  white-space: nowrap;
}

/* 3-dot menu */
.chat-menu-btn {
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  color: #e2e2e2;
  display: grid; place-items: center;
  cursor: pointer; transition: 0.2s;
}
.chat-menu-btn:hover,
.chat-menu-btn.open {
  background: rgba(77,216,255,0.12);
  border-color: rgba(77,216,255,0.35);
  color: var(--neon);
}
.chat-menu-btn .material-symbols-outlined { font-size: 22px; }

.chat-menu-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 18px;
  height: 18px;
}
.chat-menu-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}


.chat-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.97);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: chatMenuIn 0.18s ease both;
}
@keyframes chatMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
}
.chat-menu-item:hover {
  background: rgba(15, 23, 42, 0.06);
}
.chat-menu-item > .material-symbols-outlined:first-child {
  font-size: 22px;
  color: #334155;
  flex-shrink: 0;
}
.chat-menu-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.chat-menu-text strong {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}
.chat-menu-text small {
  font-size: 11px;
  color: #64748b;
}
.chat-menu-arrow {
  font-size: 18px !important;
  color: #94a3b8 !important;
  flex-shrink: 0;
}

/* Profile logout */
.profile-logout-hint {
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--muted);
}
.profile-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: 0.2s;
}
.profile-logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}
.profile-logout-btn .material-symbols-outlined { font-size: 20px; }

.chat-messages {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: #333; border-radius: 99px; }

.chat-empty { text-align: center; color: #555; font-size: 13px; margin-top: 40px; }

.chat-bubble {
  background: #252525;
  padding: 8px 12px; border-radius: 14px;
  max-width: 85%; align-self: flex-start;
  animation: chatSlide 0.35s ease both;
  position: relative; line-height: 1.4;
}
.chat-bubble.own { align-self: flex-end; background: #1a2f25; border: 1px solid rgba(77,216,255,0.15); }
.chat-bubble.admin { border: 1px solid rgba(255, 215, 0, 0.2); background: #222018; }

@keyframes chatSlide {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-name { font-weight: 700; margin-right: 4px; font-size: 12px; }
.chat-name.user { color: #4dd8ff; text-shadow: 0 0 8px rgba(77,216,255,0.3); }
.chat-name.admin { color: #ffd700; text-shadow: 0 0 8px rgba(255,215,0,0.35); }
.chat-text { color: #e2e2e2; font-size: 13.5px; word-break: break-word; }
.chat-time { color: #6b7fff; font-size: 10px; margin-left: 4px; opacity: 0.75; }
.chat-delete-btn {
  margin-left: 8px; background: none; border: none; color: #ff4444;
  cursor: pointer; font-size: 14px; opacity: 0; transition: 0.2s;
  vertical-align: middle;
}
.chat-bubble:hover .chat-delete-btn { opacity: 0.8; }

.chat-login-prompt {
  padding: 18px; text-align: center; border-top: 1px solid #1a1a1a;
  background: #0d0d0d;
}
.chat-login-prompt p { margin: 0 0 12px; color: #888; font-size: 13px; }

.chat-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-top: 1px solid #1a1a1a;
  background: #0d0d0d;
}
.chat-input-wrap input {
  flex: 1; height: 48px; border-radius: 14px;
  background: #1a1a1a; border: 1px solid #2a2a2a;
  color: #fff; font-size: 14px; font-family: inherit;
  padding: 0 18px; outline: none; transition: 0.2s;
}
.chat-input-wrap input:focus { border-color: rgba(77,216,255,0.4); }
#chatSendBtn {
  width: 48px; height: 48px; border-radius: 50%;
  background: #22c55e; border: none; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 20px rgba(34,197,94,0.4);
  transition: 0.2s;
}
#chatSendBtn:hover { transform: scale(1.08); box-shadow: 0 0 28px rgba(34,197,94,0.6); }
#chatSendBtn .material-symbols-outlined { font-size: 22px; }

/* ============================================================
   PROFILE PAGE
============================================================ */
.profile-container { max-width: 560px; margin: 0 auto; }
.profile-main-title { margin-bottom: 24px; font-size: 28px; }

.profile-card {
  background: rgba(20,20,24,0.9);
  border: 1px solid #2a2a2e;
  border-radius: 24px; padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  transition: 0.4s;
}
.profile-card:hover { border-color: #3a3a40; }

.profile-card h3 { margin: 0 0 20px; font-size: 20px; color: #fff; }

.profile-avatar-section { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.profile-avatar {
  width: 110px; height: 110px; border-radius: 50%;
  background: linear-gradient(135deg, #4dd8ff, #a855f7);
  display: grid; place-items: center;
  font: 700 48px "Space Grotesk", sans-serif; color: #fff;
  box-shadow: 0 0 30px rgba(77,216,255,0.3);
  overflow: hidden;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-upload-btn {
  padding: 10px 24px; border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-family: inherit; font-size: 13px;
  cursor: pointer; transition: 0.2s;
}
.profile-upload-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--neon); }

.profile-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; margin-top: 14px; }
.profile-input {
  width: 100%; height: 52px; border-radius: 14px;
  background: #111; border: 1px solid #2e2e32;
  color: #fff; font-size: 14px; font-family: inherit;
  padding: 0 16px; outline: none; transition: 0.2s;
}
.profile-input:focus { border-color: rgba(77,216,255,0.4); }
.profile-save { margin-top: 18px; }

.profile-login-prompt { margin-bottom: 20px; }

/* ============================================================
   TYPING ANIMATION
============================================================ */
.typing-shimmer {
  background: linear-gradient(90deg, var(--neon), #ffffff, var(--neon));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerMove 2.4s linear infinite;
}
@keyframes shimmerMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.typing-cursor {
  display: inline-block; width: 3px; height: 0.85em; margin-left: 4px;
  background: var(--neon); vertical-align: -0.1em;
  box-shadow: 0 0 8px rgba(77,216,255,.8);
  animation: blinkCursor .8s steps(1) infinite;
}
.typing-cursor.hidden { display: none; }
@keyframes blinkCursor { 50% { opacity: 0; } }

/* ============================================================
   CONVERTER CARD / FORMAT ROW (PRESERVED)
============================================================ */
.converter-card { border: 1px solid #39393d; background: rgba(25, 25, 28, 0.94); border-radius: 26px; padding: 30px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.format-row { display: grid; grid-template-columns: 1fr 90px 1fr; gap: 20px; align-items: center; }
.format-card { position: relative; display: flex; align-items: center; gap: 16px; min-height: 115px; padding: 20px; border: 1px solid #414146; border-radius: 20px; background: linear-gradient(145deg, #29292c, #202023); }
.format-card.destination { border-color: #673b3d; }
.format-icon { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 17px; background: #343438; color: #f0f0f2; font-size: 30px; }
.destination .format-icon { color: #ff8b8b; background: #3a2a2b; }
.format-card small { display: block; color: #8f8f96; font-size: 10px; letter-spacing: 0.18em; margin-bottom: 7px; }
.format-card strong { font: 700 28px "Space Grotesk", sans-serif; }
.format-card select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.swap { text-align: center; color: #d75b5b; }
.swap span { display: grid; place-items: center; width: 66px; height: 66px; margin: auto; border: 1px solid #713d3e; background: #322124; border-radius: 50%; font-size: 32px; }
.swap small { display: block; margin-top: 8px; color: #8d8d93; letter-spacing: 0.25em; font-size: 10px; }
.support-note { margin: 18px 0 0; padding: 13px 15px; border-radius: 13px; background: #2a2021; border: 1px solid #633537; color: #f1a2a2; font-size: 13px; line-height: 1.5; }
.support-note.ok { background: #1d2922; border-color: #355f43; color: #8fe0a9; }

@media (max-width: 760px) {
  .format-row { grid-template-columns: 1fr; gap: 12px; }
  .swap { display: flex; align-items: center; justify-content: center; gap: 9px; }
  .swap span { width: 48px; height: 48px; font-size: 25px; margin: 0; }
  .swap small { margin: 0; }
  .converter-card { padding: 18px; border-radius: 20px; }
}

/* ============================================================
   DROP ZONE / UPLOAD (PRESERVED)
============================================================ */
.drop-zone {
  margin-top: 24px; border: 1px dashed #56565d; border-radius: 22px; min-height: 370px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 45%, rgba(214, 69, 69, 0.045), transparent 45%);
  transition: 0.25s;
}
.drop-zone.drag { border-color: #ef6969; background: rgba(214, 69, 69, 0.08); transform: scale(1.005); }
.upload-icon { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 26px; background: #c83f40; color: white; font-size: 48px; box-shadow: 0 12px 35px rgba(200, 63, 64, 0.25); }
.drop-zone h2 { font-size: 27px; margin: 24px 0 7px; font-weight: 700; }
.drop-zone p { margin: 0 0 25px; color: #8f8f97; font-size: 17px; }
.batch-hint { display: block; color: #e96b6b; font-size: 13px; margin-top: 6px; font-weight: 600; }

.primary-btn, .convert-btn {
  border: 0; border-radius: 10px; background: #c83f40; color: white; font: 700 18px "Plus Jakarta Sans";
  padding: 17px 35px; cursor: pointer; transition: 0.2s; box-shadow: 0 9px 24px rgba(200, 63, 64, 0.18);
}
.primary-btn:hover, .convert-btn:hover:not(:disabled) { background: #df5050; transform: translateY(-1px); }

.file-info { margin-top: 18px; padding: 11px 15px; border: 1px solid #3d3d42; border-radius: 12px; color: #c7c7cb; font-size: 13px; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-list { width: 100%; max-width: 520px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.file-list-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #1a1a1d; border: 1px solid #2e2e32; font-size: 12px; color: #c7c7cb; }
.file-list-num { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #c83f40; color: #fff; font-size: 10px; font-weight: 700; }
.file-list-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.file-list-size { flex: 0 0 auto; color: #8f8f96; font-size: 11px; }

@media (max-width: 760px) {
  .drop-zone { min-height: 320px; padding: 25px; }
  .drop-zone h2 { font-size: 22px; }
  .drop-zone p { font-size: 14px; }
  .file-list { max-width: 100%; }
}

.text-preview { width: min(760px, 100%); margin-top: 18px; border: 1px solid #3d3d42; border-radius: 14px; overflow: hidden; text-align: left; background: #111113; }
.preview-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 13px; border-bottom: 1px solid #333338; color: #8f8f96; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; }
.preview-head button { border: 1px solid #414146; background: #242427; color: #d9d9dd; border-radius: 7px; padding: 5px 9px; cursor: pointer; font-size: 11px; }
#textPreviewContent { margin: 0; padding: 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; color: #c9c9ce; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ============================================================
   PROGRESS / STATUS (PRESERVED)
============================================================ */
.progress-wrap { margin-top: 20px; }
.progress-head { display: flex; justify-content: space-between; color: #aaaab0; font-size: 12px; margin-bottom: 8px; }
.progress { height: 8px; border-radius: 99px; background: #303034; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: #d64545; border-radius: 99px; transition: width 0.15s; }
.status { text-align: center; min-height: 24px; margin-top: 15px; font-size: 13px; color: #a8a8af; }
.status.error { color: #ff9292; }
.status.success { color: #8fe0a9; }

.convert-btn { width: 100%; margin-top: 20px; }
.convert-btn:disabled { background: #343438; color: #77777e; box-shadow: none; cursor: not-allowed; }

/* ============================================================
   SUPPORTED FORMATS SECTION (PRESERVED)
============================================================ */
.formats { margin-top: 60px; }
.section-title { display: flex; justify-content: space-between; align-items: end; margin-bottom: 18px; }
.section-title h2 { font: 700 32px "Space Grotesk"; margin: 0; color: var(--neon); text-shadow: 0 0 12px rgba(77,216,255,.35); }
#supportCount { color: #77777e; font-size: 12px; }
.format-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid #36363a; background: #202023; padding: 10px 14px; border-radius: 999px; color: #c7c7cb; font-size: 12px; }
.chip strong { color: #f4f4f5; margin-right: 5px; }

footer { text-align: center; color: #5f5f66; font-size: 11px; margin-top: 60px; padding-bottom: 20px; }

/* ============================================================
   BACKGROUND SCENE (canvas animasi: gradient, glow blob, grid 3D, partikel)
============================================================ */
#bgScene {
  position: fixed !important; inset: 0; z-index: -3;
  width: 100vw; height: 100vh; height: 100dvh;
  pointer-events: none; display: block;
}

body.bg-black .bg-grid { opacity: 0; }

#bgTint {
  position: fixed !important; top: 0; left: 0; width: 100%; height: 100vh; height: 100dvh;
  z-index: -2; pointer-events: none; background: rgba(0, 0, 0, 0.28); transition: background 0.5s ease;
}
body.bg-black { background-color: transparent !important; }
body.bg-black #bgTint { background: rgba(5, 7, 13, 0.4); }
body.bg-white #bgTint { background: rgba(255, 255, 255, 0.25); }

/* ============================================================
   RESOLUTION CHECKER (PRESERVED)
============================================================ */
.resolution-page { margin-top: 24px; }
.resolution-card { border: 1px solid #39393d; background: rgba(25, 25, 28, 0.96); border-radius: 26px; padding: 30px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.resolution-card h2 { font: 700 38px "Space Grotesk", sans-serif; margin: 0 0 10px; }
.resolution-upload { display: inline-block; cursor: pointer; }
.resolution-upload .primary-btn { display: inline-block; }
.resolution-info { margin-top: 18px; max-width: 520px; border: 1px solid #39393e; border-radius: 12px; background: #202023; padding: 12px; color: #cfcfd4; font-size: 12px; line-height: 1.5; }
.resolution-info strong { color: #fff; font-size: 22px; }

@media (max-width: 760px) {
  .resolution-card { padding: 20px; border-radius: 20px; }
  .resolution-card h2 { font-size: 30px; }
}

/* ============================================================
   QR GENERATOR (PRESERVED)
============================================================ */
.qr-page { margin-top: 24px; }
.qr-card { max-width: 600px; margin: 0 auto; }
.qr-header { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 25px; }
.qr-header h2 { font: 700 32px "Space Grotesk", sans-serif; margin: 0; }

.input-group { margin-bottom: 20px; display: flex; flex-direction: column; width: 100%; }
.input-group label { font-size: 13px; color: #a8a8af; margin-bottom: 8px; }
.input-group input[type="text"], .input-group select, .color-picker-wrap {
  background: #19191d; border: 1px solid #333338; color: #fff; border-radius: 12px;
  font-size: 14px; font-family: inherit; width: 100%; outline: none; transition: 0.2s; height: 52px;
}
.input-group input[type="text"], .input-group select { padding: 0 16px; }
.input-group input[type="text"]:focus, .input-group select:focus { border-color: #5d5d65; background: #1f1f24; }

.qr-logo-drop { background: #19191d; border: 1px dashed #414146; border-radius: 14px; padding: 25px; text-align: center; color: #88888f; font-size: 14px; cursor: pointer; transition: 0.2s; }
.qr-logo-drop:hover { border-color: #717178; color: #d0d0d5; background: #1f1f24; }
.qr-logo-drop.has-file { border: 1px solid #c83f40; color: #fff; background: rgba(200, 63, 64, 0.1); }

.remove-logo-btn { background: transparent; border: none; color: #e96b6b; font-size: 12px; cursor: pointer; text-align: left; padding: 8px 4px 0; font-weight: 600; width: max-content; transition: 0.2s; }
.remove-logo-btn:hover { color: #ff8b8b; text-decoration: underline; }

.qr-options-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.qr-options-row .input-group { margin-bottom: 0; }

.color-picker-wrap { display: flex; align-items: center; gap: 12px; padding: 0 16px; cursor: pointer; }
.color-picker-wrap input[type="color"] { -webkit-appearance: none; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0; background: transparent; flex-shrink: 0; }
.color-picker-wrap input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-picker-wrap input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; box-shadow: 0 0 0 2px #333338; }
.color-picker-wrap span { font-size: 14px; color: #fff; font-weight: 600; font-family: monospace; }

.qr-btn { width: 100%; background: #4a75e2; box-shadow: 0 9px 24px rgba(74, 117, 226, 0.18); margin-top: 10px; }
.qr-btn:hover { background: #5c85ef; }

.qr-preview-container { margin-top: 30px; border-top: 1px solid #333338; padding-top: 25px; }
.qr-preview-area { display: flex; justify-content: center; align-items: center; background: #111113; border-radius: 20px; padding: 30px; min-height: 250px; border: 1px solid #333338; margin-bottom: 20px; }
.qr-preview-area svg, .qr-preview-area canvas { max-width: 100%; height: auto; border-radius: 10px; }

.qr-download-actions { display: flex; gap: 10px; }
.dl-btn { flex: 1; background: #19191d; border: 1px solid #333338; color: #a8a8af; padding: 14px; border-radius: 12px; cursor: pointer; transition: 0.2s; font-weight: 600; font-family: inherit; font-size: 14px; }
.dl-btn:hover { background: #242427; color: #fff; border-color: #4a4a4e; }

/* ============================================================
   HUB CARD (profil + status + sosmed)
============================================================ */
.hub-card {
  max-width: 420px; margin: 0 auto;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(77,216,255,0.25);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.hub-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; text-align: left; }
.hub-avatar {
  width: 64px; height: 64px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--neon), #6366f1);
  color: #fff; font-size: 28px; font-weight: 800; font-family: "Space Grotesk", sans-serif;
  box-shadow: 0 0 20px rgba(77,216,255,0.4);
  overflow: hidden;
}
.hub-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hub-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.hub-title h2 { margin: 0 0 4px; font-size: 20px; font-family: "Space Grotesk", sans-serif; color: #fff; }
.hub-title p { margin: 0; font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.4; }

.hub-status-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.hub-status-row.standalone { margin-bottom: 0; max-width: 500px; }
.home-info { margin: 30px auto 0; max-width: 500px; }
.hub-online-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.7);
}
.hub-status-box {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 12px;
  background: rgba(255,255,255,0.02);
}
.hub-status-label {
  display: flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 6px;
}
.hub-status-label .material-symbols-outlined { font-size: 14px; }
.hub-status-box strong { font-size: 18px; font-weight: 700; color: #fff; }
.hub-ip-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hub-ip-row strong { font-size: 14px; letter-spacing: 0.5px; }
.hub-ip-row button {
  background: transparent; border: none; color: rgba(255,255,255,0.5);
  cursor: pointer; padding: 2px; display: flex; align-items: center;
}
.hub-ip-row button:hover { color: var(--neon); }
.hub-ip-row .material-symbols-outlined { font-size: 17px; }

.hub-social-item {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 10px;
  text-decoration: none; transition: 0.2s;
  background: rgba(255,255,255,0.02);
}
.hub-social-item:last-child { margin-bottom: 0; }
.hub-social-item:hover { border-color: var(--neon); background: rgba(77,216,255,0.06); transform: translateY(-1px); }
.hub-social-icon {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
}
.hub-social-icon img { width: 22px; height: 22px; object-fit: contain; }
.hub-social-info { flex: 1; min-width: 0; text-align: left; }
.hub-social-info small {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--neon); margin-bottom: 2px;
}
.hub-social-info strong { display: block; font-size: 14.5px; color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-arrow { color: rgba(255,255,255,0.4); font-size: 20px; flex-shrink: 0; }
.hub-social-item:hover .hub-arrow { color: var(--neon); }

body.bg-white .hub-card { background: #ffffff; border-color: #e5e7eb; box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
body.bg-white .hub-title h2 { color: #111827; }
body.bg-white .hub-title p { color: #6b7280; }
body.bg-white .hub-status-box { background: #f9fafb; border-color: #e5e7eb; }
body.bg-white .hub-status-label { color: #6b7280; }
body.bg-white .hub-status-box strong { color: #111827; }
body.bg-white .hub-ip-row button { color: #9ca3af; }
body.bg-white .hub-social-item { background: #f9fafb; border-color: #e5e7eb; }
body.bg-white .hub-social-icon { background: #eef2f7; }
body.bg-white .hub-social-info strong { color: #111827; }
body.bg-white .hub-arrow { color: #9ca3af; }
body.bg-white .neon-sub { color: #1d6fd6; text-shadow: none; }
body.bg-white .hub-social-info small { color: #1d6fd6; }
body.bg-white .hub-title h2 { -webkit-text-fill-color: #111827; }

/* ============================================================
   SOCIAL LINKS (dipakai di halaman Search / fitur lain — dipertahankan)
============================================================ */
.social-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.social-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #39393e; background: #242427; color: #ddd;
  border-radius: 11px; padding: 12px; text-decoration: none;
  font-size: 13px; font-weight: 600; transition: 0.2s;
}
.social-item:hover { border-color: #d64545; color: #fff; background: #2c2224; }
.social-icon { width: 22px; height: 22px; display: inline-block; object-fit: contain; }

body.bg-black .social-item { background: #2b2e33; border-color: #3c4048; color: #e4e7eb; }
body.bg-white .social-item { background: #ffffff; border-color: #e5e7eb; color: #374151; }

/* ============================================================
   BRAT GENERATOR (PRESERVED)
============================================================ */
.brat-page { margin-top: 24px; }
.brat-card { max-width: 600px; margin: 0 auto; }
.brat-preview-wrap {
  width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden;
  margin-bottom: 20px; border: 1px solid #333338; background: #111113;
}
.brat-preview-wrap canvas { width: 100%; height: 100%; display: block; }
#bratText {
  background: #19191d; border: 1px solid #333338; color: #fff; border-radius: 12px;
  font-size: 14px; font-family: inherit; width: 100%; outline: none; transition: 0.2s;
  padding: 14px 16px; resize: vertical;
}
#bratText:focus { border-color: #5d5d65; background: #1f1f24; }
.brat-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 99px; background: #303034; outline: none; cursor: pointer;
}
.brat-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #8ef53d; cursor: pointer; box-shadow: 0 0 10px rgba(142,245,61,0.6);
}
.brat-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: #8ef53d; cursor: pointer; box-shadow: 0 0 10px rgba(142,245,61,0.6);
}

/* ============================================================
   TIKTOK DOWNLOADER (PRESERVED)
============================================================ */
.tiktok-page { margin-top: 24px; }
.tiktok-card { max-width: 600px; margin: 0 auto; }
.tiktok-input-row { display: flex; gap: 10px; margin-bottom: 6px; }
.tiktok-input-row input {
  flex: 1; height: 52px; border-radius: 12px;
  background: #19191d; border: 1px solid #333338; color: #fff;
  font-size: 14px; font-family: inherit; padding: 0 16px; outline: none;
}
.tiktok-go-btn { padding: 0 22px; font-size: 15px; white-space: nowrap; }
.tiktok-result { margin-top: 24px; border-top: 1px solid #333338; padding-top: 22px; }
.tiktok-preview {
  width: 100%; max-width: 260px; margin: 0 auto 16px; border-radius: 16px; overflow: hidden;
  border: 1px solid #333338; background: #111113;
}
.tiktok-preview img { width: 100%; display: block; }
.tiktok-info { text-align: center; margin-bottom: 20px; }
.tiktok-info strong { display: block; font-size: 14px; color: #fff; margin-bottom: 4px; }
.tiktok-info small { color: #8f8f96; font-size: 12px; }
.tiktok-options { display: flex; flex-direction: column; gap: 10px; }
.tiktok-option-btn {
  border: 0; border-radius: 12px; padding: 15px; cursor: pointer;
  background: #1a5f8f; color: #fff; font-weight: 700; font-size: 14px; font-family: inherit;
  transition: 0.2s;
  box-shadow: 0 0 0 1px rgba(77,216,255,0.35), 0 0 18px rgba(77,216,255,0.25);
}
.tiktok-option-btn:hover {
  background: #206f9f; transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(77,216,255,0.55), 0 0 26px rgba(77,216,255,0.4);
}
.tiktok-option-wm { background: #3a3a3e; box-shadow: none; }
.tiktok-option-wm:hover { background: #46464b; box-shadow: none; }
.tiktok-option-mp3 {
  background: #5b2e8f; color: #fff;
  box-shadow: 0 0 0 1px rgba(147,77,255,0.4), 0 0 18px rgba(147,77,255,0.3);
}
.tiktok-option-mp3:hover {
  background: #6c37a8;
  box-shadow: 0 0 0 1px rgba(147,77,255,0.6), 0 0 26px rgba(147,77,255,0.45);
}

/* MEDIAFIRE DOWNLOADER */
.mediafire-file-card {
  display: flex; align-items: center; gap: 14px;
  background: #232327; border-radius: 14px; padding: 16px; margin-bottom: 16px;
}
.mediafire-file-icon {
  font-size: 30px; color: #fbbf24; background: rgba(251,191,36,0.15);
  border-radius: 10px; padding: 8px; flex-shrink: 0;
}
.mediafire-file-info { min-width: 0; }
.mediafire-file-info strong {
  display: block; font-size: 14px; color: #fff; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mediafire-file-info small { color: #8f8f96; font-size: 12px; }

.mediafire-folder-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.mediafire-folder-title strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.mediafire-folder-title small { color: #8f8f96; font-size: 12px; }
.mediafire-folder-header .primary-btn { padding: 10px 18px; font-size: 13px; white-space: nowrap; }

.mediafire-file-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 360px; overflow-y: auto; padding-right: 2px;
}
.mediafire-file-item {
  display: flex; align-items: center; gap: 10px;
  background: #232327; border-radius: 10px; padding: 10px 12px;
}
.mediafire-file-item .material-symbols-outlined { color: #fbbf24; font-size: 20px; flex-shrink: 0; }
.mediafire-file-item-info { flex: 1; min-width: 0; }
.mediafire-file-item-info strong {
  display: block; font-size: 13px; color: #fff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mediafire-file-item-info small { color: #8f8f96; font-size: 11px; }
.mediafire-file-item-btn {
  border: 0; border-radius: 8px; padding: 8px 14px; cursor: pointer; flex-shrink: 0;
  background: #1a5f8f; color: #fff; font-weight: 700; font-size: 12px; font-family: inherit;
  transition: 0.2s;
}
.mediafire-file-item-btn:hover { background: #206f9f; }
.mediafire-file-item-btn:disabled { opacity: 0.6; cursor: default; }
.mediafire-file-item-btn.done { background: #1a7f4f; }

.history-icon-orange { background: rgba(251,191,36,0.15); }
.history-icon-orange .material-symbols-outlined { color: #fbbf24; }

/* CURRENCY CONVERTER */
.currency-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.currency-row .input-group { min-width: 0; }
.currency-swap-btn {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: #fff; font-size: 18px; cursor: pointer;
  flex-shrink: 0; transition: 0.25s; margin-bottom: 0;
}
.currency-swap-btn:hover { background: rgba(77,216,255,0.15); border-color: rgba(77,216,255,0.4); transform: rotate(180deg); }
.currency-result {
  margin-top: 18px; padding: 16px; border-radius: 14px;
  background: rgba(77,216,255,0.08); border: 1px solid rgba(77,216,255,0.25);
  text-align: center;
}
.currency-result strong { display: block; font-size: 18px; color: #fff; margin-bottom: 6px; }
.currency-result small { color: #8f8f96; font-size: 12px; }

/* Tombol pemicu dropdown mata uang */
.currency-select-btn {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px;
  background: #1c1c20; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px;
  padding: 10px 10px; cursor: pointer; text-align: left; font-family: inherit;
  transition: 0.2s; box-sizing: border-box; overflow: hidden;
}
.currency-select-btn:hover, .currency-select-btn:active { border-color: rgba(77,216,255,0.45); background: #232327; }
.currency-select-flag {
  flex-shrink: 0; font: 800 12px "Space Grotesk", sans-serif; letter-spacing: 0.5px;
  color: #4dd8ff; background: rgba(77,216,255,0.12); border-radius: 7px; padding: 4px 7px;
}
.currency-select-label {
  flex: 1; min-width: 0; color: #fff; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.currency-select-caret { color: #8f8f96; font-size: 20px; flex-shrink: 0; }

/* Bottom sheet pemilih mata uang */
.currency-picker-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
}
.currency-picker-sheet {
  width: 100%; max-width: 520px; max-height: 78vh;
  background: #18181b; border-radius: 22px 22px 0 0;
  border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
  display: flex; flex-direction: column;
  animation: currencySheetUp 0.25s ease;
}
@keyframes currencySheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.currency-picker-handle { width: 40px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.2); margin: 10px auto 4px; flex-shrink: 0; }
.currency-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px; flex-shrink: 0;
}
.currency-picker-header strong { color: #fff; font-size: 15px; }
.currency-picker-close {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.08); color: #ccc; display: flex; align-items: center; justify-content: center;
}
.currency-picker-close:hover { background: rgba(255,255,255,0.15); }
.currency-picker-search-wrap {
  display: flex; align-items: center; gap: 8px; margin: 0 18px 10px;
  background: #232327; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 10px 12px;
  flex-shrink: 0;
}
.currency-picker-search-wrap .material-symbols-outlined { color: #8f8f96; font-size: 20px; }
.currency-picker-search-wrap input {
  flex: 1; border: 0; background: transparent; outline: none; color: #fff; font-size: 14px; font-family: inherit;
}
.currency-picker-list { overflow-y: auto; padding: 4px 10px 18px; }
.currency-picker-item {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: transparent; border: 0; border-radius: 12px; padding: 11px 10px; cursor: pointer;
  text-align: left; font-family: inherit; transition: 0.15s;
}
.currency-picker-item:hover { background: rgba(255,255,255,0.06); }
.currency-picker-item.selected { background: rgba(77,216,255,0.12); }
.currency-picker-item-code {
  flex-shrink: 0; font: 800 12px "Space Grotesk", sans-serif;
  color: #4dd8ff; background: rgba(77,216,255,0.12); border-radius: 7px; padding: 4px 7px; min-width: 42px; text-align: center;
}
.currency-picker-item-name { color: #fff; font-size: 13px; flex: 1; }
.currency-picker-item .material-symbols-outlined { color: #4dd8ff; font-size: 20px; }
.currency-picker-empty { text-align: center; color: #8f8f96; font-size: 13px; padding: 30px 0; }

/* FEATURE CARD DISABLED (dikontrol admin) */
.feature-card-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.tiktok-subtext { margin: 0; font-size: 12px; color: var(--muted); font-weight: 500; opacity: 0.8; }

/* ============================================================
   MUSIC PILL & VISUALIZER (PRESERVED)
============================================================ */
.music-wrap {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px;
}
.music-note-btn {
  border: 0; background: transparent; color: var(--text);
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.music-arrow-btn {
  border: 0; background: #d9d9dd; color: #1d1d20;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.2s ease, transform 0.2s ease;
}
.music-arrow-btn:hover { background: #ffffff; }
.music-arrow-btn.open { transform: rotate(180deg); }
.music-list {
  position: absolute; top: 46px; right: 0; z-index: 100;
  width: 230px; max-height: 320px; overflow-y: auto;
  background: #1d1d20; border: 1px solid #38383d; border-radius: 14px;
  padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.music-list.open { opacity: 1; visibility: visible; transform: translateY(0); }
.music-list-item {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: #ddd; padding: 10px 12px; border-radius: 9px; font-size: 13px; cursor: pointer; transition: 0.15s;
}
.music-list-item:hover { background: #292022; color: #fff; }
.music-list-item.playing { color: #ff8b8b; font-weight: 700; }

.visualizer-canvas {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease;
}
.visualizer-canvas.active { opacity: 0.55; }

/* ============================================================
   THEME INVERSION — LIGHT MODE FIX
============================================================ */
body.bg-white {
  background-color: transparent !important;
  color: #111827;
}
body.bg-white .bg-grid {
  opacity: 0.04;
  background-image:
    linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px);
}

/* Cards & containers */
body.bg-white .converter-card,
body.bg-white .resolution-card,
body.bg-white .qr-card,
body.bg-white .drop-zone,
body.bg-white .format-card,
body.bg-white .chip,
body.bg-white .file-info,
body.bg-white .text-preview,
body.bg-white .brat-card,
body.bg-white .tiktok-card,
body.bg-white .profile-card,
body.bg-white .stat-card,
body.bg-white .feature-card,
body.bg-white .chat-container,
body.bg-white .auth-card {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

body.bg-white .converter-card h2,
body.bg-white .resolution-card h2,
body.bg-white .qr-header h2,
body.bg-white .profile-card h3,
body.bg-white .home-title,
body.bg-white .brand,
body.bg-white h1,
body.bg-white h2,
body.bg-white h3,
body.bg-white .feature-info strong,
body.bg-white .stat-num,
body.bg-white .profile-main-title {
  color: #15305c;
}

body.bg-white .subtitle,
body.bg-white .eyebrow,
body.bg-white .feature-info small,
body.bg-white .stat-label,
body.bg-white .secure,
body.bg-white .chat-badge,
body.bg-white .profile-label,
body.bg-white .input-group label,
body.bg-white .downloader-note,
body.bg-white .tiktok-subtext,
body.bg-white .auth-sub,
body.bg-white .auth-switch,
body.bg-white footer {
  color: #6b7280;
}

/* Inputs */
body.bg-white .search-box .material-symbols-outlined { color: #9ca3af; }
body.bg-white .toggle-pass { color: #6b7280; }
body.bg-white .auth-divider { color: #9ca3af; }
body.bg-white .auth-divider::before,
body.bg-white .auth-divider::after { background: #e5e7eb; }
body.bg-white .auth-check { color: #4b5563; }
body.bg-white .profile-input,
body.bg-white .auth-input-wrap input,
body.bg-white .search-box input,
body.bg-white .chat-input-wrap input,
body.bg-white .input-group input[type="text"],
body.bg-white .input-group select,
body.bg-white .color-picker-wrap,
body.bg-white #bratText,
body.bg-white .tiktok-input-row input,
body.bg-white #qrUrl {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}
body.bg-white .auth-input-wrap input::placeholder { color: #9ca3af; }
body.bg-white .profile-input:focus,
body.bg-white .auth-input-wrap input:focus,
body.bg-white .search-box input:focus {
  border-color: #4dd8ff;
  background: #ffffff;
}

/* Chat */
body.bg-white .chat-header,
body.bg-white .chat-login-prompt,
body.bg-white .chat-input-wrap {
  background: #f9fafb;
  border-color: #e5e7eb;
}
body.bg-white .chat-messages { background: #ffffff; }
body.bg-white .chat-bubble {
  background: #f3f4f6;
  color: #1f2937;
}
body.bg-white .chat-bubble.own {
  background: #dbeafe;
  border-color: rgba(77,216,255,0.3);
}
body.bg-white .chat-bubble.admin {
  background: #fef3c7;
  border-color: rgba(255, 215, 0, 0.3);
}
body.bg-white .chat-text { color: #374151; }
body.bg-white .chat-name.user { color: #0369a1; text-shadow: none; }
body.bg-white .chat-name.admin { color: #b45309; text-shadow: none; }
body.bg-white .chat-time { color: #6b7280; }

/* Bottom nav */
body.bg-white .bottom-nav {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 12px 50px rgba(0,0,0,0.1);
}
body.bg-white .nav-item { color: #6b7280; }
body.bg-white .nav-item.active {
  background: rgba(77, 216, 255, 0.15);
  color: #0284c7;
  box-shadow: 0 0 24px rgba(77,216,255,0.12);
}

/* Social */
body.bg-white .social-item {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}
body.bg-white .social-item:hover {
  border-color: #4dd8ff;
  background: #f0f9ff;
  color: #0284c7;
}

/* Drop zone & format */
body.bg-white .drop-zone {
  background: #f9fafb;
  border-color: #d1d5db;
}
body.bg-white .drop-zone.drag {
  background: #eff6ff;
  border-color: #3b82f6;
}
body.bg-white .format-card {
  background: #f9fafb;
  border-color: #e5e7eb;
}
body.bg-white .format-icon { background: #e5e7eb; color: #374151; }
body.bg-white .destination .format-icon { background: #dbeafe; color: #1e40af; }
body.bg-white .swap span { background: #f3f4f6; border-color: #d1d5db; color: #ef4444; }

/* Topbar */
body.bg-white .topbar .secure {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #6b7280;
}
body.bg-white .icon-btn {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #374151;
}

/* Auth modal */
body.bg-white .auth-modal { background: rgba(0,0,0,0.3); }
body.bg-white .auth-card {
  background: rgba(255,255,255,0.98);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 25px 80px rgba(0,0,0,0.12);
}
body.bg-white .auth-panel h2 { color: #111827; text-shadow: none; }
body.bg-white .auth-options a { color: #0284c7; }
body.bg-white .auth-switch a { color: #0284c7; }
body.bg-white .auth-close { color: #6b7280; }
body.bg-white .auth-close:hover { background: #f3f4f6; color: #111827; }

/* Status */
body.bg-white .status.error { color: #dc2626; }
body.bg-white .status.success { color: #059669; }

/* Music */
body.bg-white .music-wrap {
  background: #ffffff;
  border-color: #e5e7eb;
}
body.bg-white .music-list {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}
body.bg-white .music-list-item { color: #374151; }
body.bg-white .music-list-item:hover { background: #f3f4f6; color: #111827; }

/* Support note */
body.bg-white .support-note { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
body.bg-white .support-note.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

/* Progress */
body.bg-white .progress { background: #e5e7eb; }

/* QR preview */
body.bg-white .qr-preview-area { background: #f9fafb; border-color: #e5e7eb; }

/* TikTok */
body.bg-white .tiktok-preview { background: #f9fafb; border-color: #e5e7eb; }
body.bg-white .tiktok-info strong { color: #111827; }

/* MediaFire */
body.bg-white .mediafire-file-card,
body.bg-white .mediafire-file-item { background: #f9fafb; border: 1px solid #e5e7eb; }
body.bg-white .mediafire-file-info strong,
body.bg-white .mediafire-file-item-info strong,
body.bg-white .mediafire-folder-title strong { color: #111827; }

/* Currency & BG Remover light mode */
body.bg-white .currency-result { background: #eff8ff; border-color: #cfe8ff; }
body.bg-white .currency-result strong { color: #111827; }
body.bg-white .currency-select-btn { background: #f9fafb; border-color: #d1d5db; }
body.bg-white .currency-select-btn:hover { border-color: #4dd8ff; background: #fff; }
body.bg-white .currency-select-label { color: #111827; }
body.bg-white .currency-picker-sheet { background: #ffffff; border-color: #e5e7eb; }
body.bg-white .currency-picker-header strong { color: #111827; }
body.bg-white .currency-picker-close { background: #f3f4f6; color: #4b5563; }
body.bg-white .currency-picker-search-wrap { background: #f9fafb; border-color: #d1d5db; }
body.bg-white .currency-picker-search-wrap input { color: #111827; }
body.bg-white .currency-picker-item:hover { background: #f3f4f6; }
body.bg-white .currency-picker-item.selected { background: #eff8ff; }
body.bg-white .currency-picker-item-name { color: #111827; }

/* Converter text preview */
body.bg-white .text-preview { background: #f9fafb; border-color: #e5e7eb; }
body.bg-white .preview-head { color: #6b7280; border-color: #e5e7eb; }
body.bg-white .preview-head button { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
body.bg-white #textPreviewContent { color: #374151; }

/* File list */
body.bg-white .file-list-item { background: #f9fafb; border-color: #e5e7eb; color: #374151; }

/* Brat */
body.bg-white .brat-preview-wrap { background: #f9fafb; border-color: #e5e7eb; }

/* Admin link (if any) */
body.bg-white .admin-stat-card { background: #ffffff; border-color: #e5e7eb; }
body.bg-white .admin-stat-card strong { color: #111827; }
body.bg-white .admin-stat-card small { color: #6b7280; }

/* ============================================================
   FITUR BARU: Toast, Badge, Reaksi Emoji, Laporan, Riwayat
   ============================================================ */

/* --- Toast Notifikasi --- */
.toast-container {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 380px);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.toast-show { opacity: 1; transform: translateY(0); }
.toast .material-symbols-outlined { font-size: 20px; flex-shrink: 0; }
.toast-success { border-color: rgba(34,197,94,0.4); }
.toast-success .material-symbols-outlined { color: #22c55e; }
.toast-error { border-color: rgba(239,68,68,0.4); }
.toast-error .material-symbols-outlined { color: #ef4444; }
.toast-info .material-symbols-outlined { color: #60a5fa; }

/* --- Badge Level User --- */
.chat-badge-icon { display: none; } /* role emoji dihapus */
.chat-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chat-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #333;
}
.chat-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #4dd8ff, #6366f1);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chat-bubble.admin .chat-avatar-fallback {
  background: linear-gradient(135deg, #ffd700, #f59e0b);
  color: #1a1a1a;
}

/* --- Reaksi Emoji --- */
.chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reaction-chip {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: #ddd;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reaction-chip:hover { background: rgba(255,255,255,0.15); }
.reaction-chip.mine { background: rgba(96,165,250,0.25); border-color: rgba(96,165,250,0.5); color: #93c5fd; }

.chat-bubble-actions { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.chat-react-btn, .chat-report-btn, .chat-delete-btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.chat-react-btn:hover { color: #fbbf24; background: rgba(251,191,36,0.1); }
.chat-report-btn:hover { color: #f87171; background: rgba(248,113,113,0.1); }
.chat-delete-btn:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

.reaction-picker {
  position: fixed;
  display: flex;
  gap: 4px;
  background: rgba(20,20,30,0.98);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  z-index: 9998;
}
.reaction-picker button {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.reaction-picker button:hover { transform: scale(1.25); background: rgba(255,255,255,0.08); }

.chat-bubble { position: relative; user-select: none; -webkit-user-select: none; }
.chat-bubble.longpress-active { background: #333 !important; }

/* Context menu (long-press / right-click) */
.chat-context-menu {
  position: fixed;
  z-index: 10000;
  background: rgba(30,30,36,0.98);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 6px;
  min-width: 160px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  backdrop-filter: blur(16px);
  animation: ctxPop 0.15s ease;
}
@keyframes ctxPop {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.chat-context-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: transparent; border: none;
  color: #e5e5e5; font-size: 14px;
  padding: 10px 14px; border-radius: 10px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.chat-context-menu button:hover { background: rgba(255,255,255,0.08); }
.chat-context-menu button.danger { color: #f87171; }
.chat-context-menu button.danger:hover { background: rgba(239,68,68,0.12); }
.chat-context-menu .ctx-reactions {
  display: flex; gap: 4px; justify-content: center;
  padding: 6px 4px 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 4px;
}
.chat-context-menu .ctx-reactions button {
  width: auto; padding: 4px 6px; font-size: 20px;
  justify-content: center;
}
.chat-context-menu .ctx-reactions button:hover { transform: scale(1.2); background: rgba(255,255,255,0.1); }

/* Reply preview bar */
.reply-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: #141414;
  border-top: 1px solid #1f1f1f;
  border-left: 3px solid #22c55e;
}
.reply-preview.hidden { display: none; }
.reply-preview-content { flex: 1; min-width: 0; }
.reply-preview-label { font-size: 11px; color: #22c55e; font-weight: 600; display: block; }
.reply-preview-text {
  font-size: 12px; color: #aaa;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block;
}
.reply-preview-close {
  background: none; border: none; color: #888;
  font-size: 16px; cursor: pointer; padding: 4px 8px;
  border-radius: 6px;
}
.reply-preview-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* Quoted reply inside bubble */
.chat-quote {
  background: rgba(0,0,0,0.22);
  border-left: 2px solid #4dd8ff;
  padding: 4px 8px; border-radius: 0 6px 6px 0;
  margin-bottom: 4px; font-size: 11px; color: #999;
  max-width: 100%; overflow: hidden;
  line-height: 1.35;
  white-space: nowrap; text-overflow: ellipsis;
}
.chat-quote-name { color: #4dd8ff; font-weight: 600; margin-right: 4px; }
.chat-bubble.own .chat-quote { border-left-color: #22c55e; }
.chat-bubble.own .chat-quote-name { color: #4ade80; }


/* History header + Clear All */
.history-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.history-header-row h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.clear-history-btn {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.clear-history-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.55);
}
.clear-history-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.history-auto-note {
  margin: 0 0 12px;
  font-size: 11px;
  color: #666;
}

body.bg-white .clear-history-btn {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #dc2626;
}
body.bg-white .history-auto-note { color: #9ca3af; }

/* Floating deleted notice */
.chat-deleted-float {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,28,0.95);
  color: #f87171;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(248,113,113,0.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.chat-deleted-float.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Better mobile chat height */
@media (max-width: 640px) {
  .chat-container {
    height: calc(100vh - 140px);
    max-height: none;
    border-radius: 0;
    border-left: none; border-right: none;
  }
  .chat-header { padding: 12px 14px; }
  .chat-messages { padding: 12px; gap: 8px; }
  .chat-bubble { max-width: 92%; padding: 10px 14px; border-radius: 16px; }
  .chat-input-wrap { padding: 10px 12px; }
  .chat-input-wrap input { height: 44px; border-radius: 22px; }
  #chatSendBtn { width: 44px; height: 44px; }
}

/* --- Riwayat Pribadi --- */
.history-date-header { font-size: 13px; font-weight: 700; color: #ef4444; margin: 18px 0 8px; }
.history-date-header:first-child { margin-top: 0; }
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.history-item:hover { background: rgba(255,255,255,0.07); }
.history-icon-box {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.history-icon-box .material-symbols-outlined { font-size: 22px; }
.history-icon-pink { background: rgba(244,114,182,0.15); }
.history-icon-pink .material-symbols-outlined { color: #f472b6; }
.history-icon-green { background: rgba(52,211,153,0.15); }
.history-icon-green .material-symbols-outlined { color: #34d399; }
.history-icon-blue { background: rgba(96,165,250,0.15); }
.history-icon-blue .material-symbols-outlined { color: #60a5fa; }
.history-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.history-item-info strong { font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item-info small { font-size: 12px; color: #888; }
.history-empty { color: #888; font-size: 13px; text-align: center; padding: 16px 0; margin: 0; }

body.bg-white .toast { background: rgba(255,255,255,0.98); color: #111; border-color: #e5e7eb; }
body.bg-white .history-item { background: #f9fafb; border-color: #e5e7eb; }
body.bg-white .history-item-info strong { color: #111827; }
body.bg-white .history-date-header { color: #dc2626; }
body.bg-white .reaction-chip { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
body.bg-white .reaction-picker { background: #fff; border-color: #e5e7eb; }
body.bg-white .typing-indicator { color: #6b7280; }
body.bg-white .chat-mention { background: rgba(37,99,235,0.12); color: #1d4ed8; }

/* --- Typing indicator & mention --- */
.typing-indicator {
  font-size: 12px; color: #999; font-style: italic; padding: 4px 16px;
  min-height: 18px;
}
.chat-mention {
  background: rgba(77,216,255,0.15); color: var(--neon, #4dd8ff);
  padding: 1px 5px; border-radius: 6px; font-weight: 700;
}
.chat-bubble.mentioned-me { border-color: rgba(251,191,36,0.5); box-shadow: 0 0 0 1px rgba(251,191,36,0.3); }

/* --- Tool pages baru: Resizer, Password Generator, Dev Tools --- */
.tool-text-input {
  width: 100%; height: 46px; padding: 0 14px; border-radius: 10px;
  background: #1a1a1e; border: 1px solid #39393d; color: #fff; font-size: 14px; font-family: inherit;
}
.tool-text-input:focus { border-color: #5d5d65; background: #1f1f24; outline: none; }
.tool-textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: #1a1a1e; border: 1px solid #39393d; color: #fff; font-size: 13px;
  font-family: "Space Mono", "Courier New", monospace; resize: vertical; line-height: 1.5;
}
.tool-textarea:focus { border-color: #5d5d65; background: #1f1f24; outline: none; }
.tool-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #ccc; cursor: pointer; }
.tool-checkbox-row input { width: auto; accent-color: var(--neon, #4dd8ff); }
.tool-full-btn { width: 100%; margin-top: 8px; }
.tool-icon-btn {
  width: 46px; height: 46px; border-radius: 10px; border: 1px solid #39393d;
  background: #1a1a1e; color: #ccc; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background 0.15s ease;
}
.tool-icon-btn:hover { background: #26262a; }
.tool-secondary-btn {
  padding: 10px 18px; border-radius: 10px; border: 1px solid #39393d;
  background: transparent; color: #ddd; font-weight: 600; font-size: 14px; cursor: pointer; font-family: inherit;
}
.tool-secondary-btn:hover { background: rgba(255,255,255,0.06); }
.tool-tab-row { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.tool-tab {
  padding: 10px 18px; border-radius: 999px; border: 1px solid #39393d;
  background: transparent; color: #aaa; font-weight: 600; font-size: 13px; cursor: pointer; font-family: inherit;
  transition: all 0.2s ease;
}
.tool-tab.active { background: var(--neon, #4dd8ff); color: #06131a; border-color: var(--neon, #4dd8ff); }
.passgen-strength { margin-top: 10px; font-size: 13px; color: #aaa; }

body.bg-white .tool-text-input,
body.bg-white .tool-textarea { background: #f9fafb; border-color: #e5e7eb; color: #111827; }
body.bg-white .tool-icon-btn { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
body.bg-white .tool-secondary-btn { background: #f3f4f6; border-color: #d1d5db; color: #374151; }
body.bg-white .tool-tab { border-color: #d1d5db; color: #6b7280; }
body.bg-white .tool-checkbox-row { color: #374151; }
/* ========================================================
   CALCULATOR (MIUI-style expression chain)
======================================================== */
.calc-page {
  display: flex;
  justify-content: center;
  padding: 12px 12px 36px;
}
.calc-card {
  width: 100%;
  max-width: 380px;
  background: #000;
  border-radius: 24px;
  padding: 12px 12px 16px;
  border: 1px solid #1a1a1a;
}
.calc-display-wrap {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 12px 16px 24px;
  gap: 6px;
  overflow: hidden;
}
.calc-display {
  font: 300 42px/1.15 "Space Grotesk", system-ui, sans-serif;
  color: #fff;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  text-align: right;
  letter-spacing: -0.5px;
  white-space: nowrap;
  scrollbar-width: none;
  direction: rtl; /* scroll from right */
}
.calc-display::-webkit-scrollbar { display: none; }
.calc-display > span { direction: ltr; unicode-bidi: bidi-override; display: inline-block; }
.calc-result {
  font: 400 22px/1.2 "Plus Jakarta Sans", system-ui, sans-serif;
  color: #9ca3af;
  min-height: 26px;
  text-align: right;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}
.calc-result.calc-result-live {
  color: #9ca3af;
  opacity: 1;
}
.calc-result.calc-result-commit {
  animation: calcCommit 0.35s ease forwards;
}
@keyframes calcCommit {
  0%   { opacity: 1; transform: translateY(0); color: #9ca3af; font-size: 22px; }
  40%  { opacity: 0.6; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(18px); color: #fff; }
}
.calc-display.calc-display-pop {
  animation: calcPop 0.3s ease;
}
@keyframes calcPop {
  0%   { transform: scale(0.92); opacity: 0.5; }
  60%  { transform: scale(1.03); }
  100% { transform: scale(1); opacity: 1; }
}
.calc-pad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.calc-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: 18px;
  background: #2c2c2e;
  color: #fff;
  font: 500 24px "Plus Jakarta Sans", system-ui, sans-serif;
  cursor: pointer;
  transition: filter 0.12s, transform 0.08s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.calc-btn:active {
  filter: brightness(1.25);
  transform: scale(0.96);
}
.calc-fn {
  background: #2c2c2e;
  color: #ff9f0a;
  font-size: 22px;
  font-weight: 600;
}
.calc-op {
  background: #2c2c2e;
  color: #ff9f0a;
  font-size: 26px;
  font-weight: 600;
}
.calc-op.calc-op-active {
  background: #3a3a3c;
  color: #ff9f0a;
  outline: 1.5px solid #ff9f0a;
}
.calc-eq {
  background: #ff9f0a;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  border-radius: 18px;
}
body.bg-white .calc-card {
  background: #0a0a0a;
  border-color: #222;
}
body.bg-white .calc-display { color: #fff; }

@media (max-width: 380px) {
  .calc-display { font-size: 34px; }
  .calc-result { font-size: 18px; }
  .calc-btn { font-size: 20px; }
  .calc-pad { gap: 8px; }
  .calc-display-wrap { min-height: 120px; padding-bottom: 18px; }
}


/* ============================================================
   CHAT ATTACH + MEDIA EDITOR
============================================================ */
.chat-attach-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #2a2a2a; background: #1a1a1a; color: #9ca3af;
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
  transition: 0.2s;
}
.chat-attach-btn:hover { color: var(--neon); border-color: rgba(77,216,255,0.4); }
.chat-attach-btn .material-symbols-outlined { font-size: 22px; }

.chat-media-bubble {
  display: block; max-width: 100%; margin: 6px 0 4px;
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: #111;
}
.chat-media-bubble img {
  display: block; width: 100%; max-width: 280px; max-height: 360px;
  object-fit: contain; background: #0a0a0a; cursor: pointer;
}
.chat-media-file {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; max-width: 280px;
  background: rgba(255,255,255,0.04); border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08); margin: 6px 0 4px;
  color: #e2e2e2; text-decoration: none; font-size: 13px;
}
.chat-media-file:hover { border-color: rgba(77,216,255,0.35); color: var(--neon); }
.chat-media-file .material-symbols-outlined { font-size: 22px; color: var(--neon); }
.chat-media-file small { display: block; color: #888; font-size: 11px; margin-top: 2px; }
.chat-name-you { opacity: 0.7; font-weight: 500; font-size: 11px; margin-left: 2px; }

.chat-media-modal {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  display: flex; flex-direction: column;
}
.chat-media-modal.hidden { display: none !important; }
.chat-media-shell {
  display: flex; flex-direction: column;
  height: 100%; height: 100dvh; width: 100%;
}
.chat-media-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(0,0,0,0.85); flex-shrink: 0;
}
.chat-media-toolbar-right { display: flex; gap: 6px; }
.chat-media-tool {
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.1); color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.chat-media-tool.active { background: rgba(77,216,255,0.25); color: var(--neon); }
.chat-media-tool .material-symbols-outlined { font-size: 22px; }

.chat-media-canvas-wrap {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #0a0a0a; min-height: 0;
}
#chatMediaCanvas {
  max-width: 100%; max-height: 100%;
  object-fit: contain; touch-action: none;
}
.chat-media-crop-box {
  position: absolute; border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
  cursor: move; touch-action: none; pointer-events: auto;
  min-width: 48px; min-height: 48px;
}

.chat-media-text-panel {
  flex-shrink: 0; padding: 10px 14px 6px;
  background: rgba(12,12,12,0.95); border-top: 1px solid #222;
}
.chat-media-fonts {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.chat-media-font {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #333; background: #1a1a1a; color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.chat-media-font.active { border-color: var(--neon); box-shadow: 0 0 0 2px rgba(77,216,255,0.35); }
.chat-media-text-input {
  width: 100%; height: 44px; border-radius: 12px;
  border: 1px solid #2a2a2a; background: #151515; color: #fff;
  padding: 0 14px; font-size: 14px; font-family: inherit; outline: none;
}
.chat-media-text-input:focus { border-color: rgba(77,216,255,0.4); }

.chat-media-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.9); flex-shrink: 0;
}
.chat-media-sender { color: #aaa; font-size: 13px; }
.chat-media-send {
  width: 48px; height: 48px; border-radius: 50%;
  border: none; background: #22c55e; color: #fff;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 0 18px rgba(34,197,94,0.45);
}
.chat-media-send .material-symbols-outlined { font-size: 22px; }

body.bg-white .chat-attach-btn { background: #f3f4f6; border-color: #e5e7eb; color: #6b7280; }
body.bg-white .chat-media-file { background: #f9fafb; border-color: #e5e7eb; color: #111827; }


/* CSS icons (tanpa Material Symbols) */
.ico-x, .ico-dl, .ico-crop, .ico-attach, .ico-send { display:block; position:relative; width:20px; height:20px; }
.ico-x::before, .ico-x::after {
  content:''; position:absolute; left:50%; top:50%; width:16px; height:2px; background:currentColor; border-radius:1px;
}
.ico-x::before { transform:translate(-50%,-50%) rotate(45deg); }
.ico-x::after { transform:translate(-50%,-50%) rotate(-45deg); }
.ico-dl {
  border:2px solid currentColor; border-top:none; border-radius:0 0 3px 3px; height:10px; width:14px; margin-top:8px;
}
.ico-dl::before {
  content:''; position:absolute; left:50%; top:-7px; width:2px; height:10px; background:currentColor; transform:translateX(-50%);
}
.ico-dl::after {
  content:''; position:absolute; left:50%; top:-2px; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.ico-crop {
  width:16px; height:16px; border:2px solid currentColor; border-radius:2px;
  box-shadow: -4px -4px 0 -2px currentColor, 4px 4px 0 -2px currentColor;
}
.ico-aa { font:700 14px/1 Arial,sans-serif; color:currentColor; letter-spacing:-0.5px; }
.ico-attach {
  width:14px; height:18px; border:2px solid currentColor; border-radius:7px 7px 3px 3px; transform:rotate(45deg);
  margin-top:2px;
}
.ico-attach::after {
  content:''; position:absolute; left:3px; top:4px; width:4px; height:10px; border:2px solid currentColor; border-bottom:none; border-radius:3px 3px 0 0;
}
.ico-send {
  width:0; height:0; border-style:solid; border-width:7px 0 7px 14px;
  border-color:transparent transparent transparent currentColor; margin-left:3px;
}

.chat-media-thumbs {
  display:flex; gap:8px; padding:8px 12px; overflow-x:auto; flex-shrink:0;
  background:#0a0a0a; min-height:0;
}
.chat-media-thumbs:empty { display:none; }
.chat-media-thumb {
  flex-shrink:0; width:56px; height:56px; border-radius:10px; object-fit:cover;
  border:2px solid transparent; cursor:pointer; opacity:0.7;
}
.chat-media-thumb.active { border-color:var(--neon); opacity:1; }

.chat-media-crop-box {
  position:absolute; border:2px solid #fff;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.5);
  cursor:move; touch-action:none; pointer-events:auto;
  min-width:48px; min-height:48px;
}
.crop-handle {
  position:absolute; width:16px; height:16px; background:#fff;
  border:2px solid #22c55e; border-radius:3px; pointer-events:auto;
}
.crop-handle.tl { left:-8px; top:-8px; cursor:nwse-resize; }
.crop-handle.tr { right:-8px; top:-8px; cursor:nesw-resize; }
.crop-handle.bl { left:-8px; bottom:-8px; cursor:nesw-resize; }
.crop-handle.br { right:-8px; bottom:-8px; cursor:nwse-resize; }

.ico-txt {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 18px; font-weight: 700; line-height: 1;
  color: #fff; font-family: inherit;
}
.chat-attach-btn .ico-txt { font-size: 22px; color: inherit; }
.chat-media-send .ico-txt { font-size: 20px; color: #fff; }


/* Chat list + room */
.chat-list-view, .chat-room-view { display:flex; flex-direction:column; min-height:calc(100vh - 120px); }
body.chat-fullscreen .chat-list-view,
body.chat-fullscreen .chat-room-view { min-height:100vh; min-height:100dvh; }
.chat-list-view.hidden, .chat-room-view.hidden { display:none !important; }
.chat-list-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #1a1a1a;
}
.chat-list-header h2 { margin:0; font-size:22px; color:#fff; }
.chat-list-actions { display:flex; align-items:center; gap:6px; position:relative; }
.chat-icon-btn {
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.06); color:#e2e2e2; cursor:pointer; font-size:16px;
}
.chat-search-bar {
  display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid #1a1a1a;
}
.chat-search-bar input {
  flex:1; height:42px; border-radius:12px; border:1px solid #2a2a2a;
  background:#151515; color:#fff; padding:0 12px; font:inherit;
}
.chat-search-bar button { background:none; border:none; color:#aaa; font-size:18px; cursor:pointer; }
.chat-search-results { max-height:240px; overflow:auto; border-bottom:1px solid #1a1a1a; }
.chat-search-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:12px 16px;
  border:none; background:transparent; color:#e2e2e2; cursor:pointer; text-align:left;
}
.chat-search-item:hover { background:rgba(255,255,255,0.05); }
.chat-search-item img, .chat-search-avatar {
  width:44px; height:44px; border-radius:50%; object-fit:cover; background:#222;
  display:grid; place-items:center; font-weight:700; color:var(--neon);
}
.chat-conversation-list { flex:1; overflow:auto; }
.chat-conv-item {
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px;
  border:none; border-bottom:1px solid rgba(255,255,255,0.04);
  background:transparent; color:#e2e2e2; cursor:pointer; text-align:left;
}
.chat-conv-item:hover { background:rgba(255,255,255,0.04); }
.chat-conv-avatar {
  width:52px; height:52px; border-radius:50%; background:#1a1a1a;
  display:grid; place-items:center; font-size:22px; flex-shrink:0; overflow:hidden;
}
.chat-conv-avatar img { width:100%; height:100%; object-fit:cover; }
.chat-conv-avatar.global { background:rgba(77,216,255,0.12); }
.chat-conv-body { flex:1; min-width:0; }
.chat-conv-top { display:flex; justify-content:space-between; gap:8px; }
.chat-conv-top strong { color:#fff; font-size:15px; }
.chat-conv-time { font-size:11px; color:#6b7280; }
.chat-conv-preview { font-size:13px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.chat-back-btn {
  width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,0.08);
  color:#fff; font-size:18px; cursor:pointer; margin-right:4px;
}
.chat-room-avatar {
  width:36px; height:36px; border-radius:50%; background:#1a1a1a;
  display:grid; place-items:center; overflow:hidden; margin-right:8px; font-size:16px;
}
.chat-room-avatar img { width:100%; height:100%; object-fit:cover; }

/* WhatsApp-style crop */
.chat-crop-overlay {
  position:fixed; inset:0; z-index:400; background:#000;
  display:flex; flex-direction:column;
}
.chat-crop-overlay.hidden { display:none !important; }
.chat-crop-stage {
  flex:1; position:relative; display:flex; align-items:center; justify-content:center;
  overflow:hidden; min-height:0;
}
#chatCropCanvas { max-width:100%; max-height:100%; }
.chat-crop-frame {
  position:absolute; border:1.5px solid #fff;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.45);
  touch-action:none; cursor:move;
}
.chat-crop-frame::before, .chat-crop-frame::after {
  content:''; position:absolute; inset:-2px; pointer-events:none;
  background:
    linear-gradient(#fff,#fff) left top / 28px 3px no-repeat,
    linear-gradient(#fff,#fff) left top / 3px 28px no-repeat,
    linear-gradient(#fff,#fff) right top / 28px 3px no-repeat,
    linear-gradient(#fff,#fff) right top / 3px 28px no-repeat,
    linear-gradient(#fff,#fff) left bottom / 28px 3px no-repeat,
    linear-gradient(#fff,#fff) left bottom / 3px 28px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 28px 3px no-repeat,
    linear-gradient(#fff,#fff) right bottom / 3px 28px no-repeat;
}
.chat-crop-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,0.35) 33.33%, rgba(255,255,255,0.35) 33.7%, transparent 33.7%, transparent 66.66%, rgba(255,255,255,0.35) 66.66%, rgba(255,255,255,0.35) 67%, transparent 67%),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,0.35) 33.33%, rgba(255,255,255,0.35) 33.7%, transparent 33.7%, transparent 66.66%, rgba(255,255,255,0.35) 66.66%, rgba(255,255,255,0.35) 67%, transparent 67%);
}
.chat-crop-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; padding-bottom:max(16px, env(safe-area-inset-bottom));
  background:#000;
}
.chat-crop-bar-btn {
  background:none; border:none; color:#25d366; font-size:16px; font-weight:600;
  cursor:pointer; font-family:inherit; min-width:72px;
}
.chat-crop-bar-btn.icon { color:#fff; font-size:24px; min-width:auto; }
.chat-crop-bar-btn.done { text-align:right; }

/* Lightbox */
.chat-lightbox {
  position:fixed; inset:0; z-index:350; background:rgba(0,0,0,0.95);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;
}
.chat-lightbox.hidden { display:none !important; }
.chat-lightbox img, .chat-lightbox video {
  max-width:96vw; max-height:80vh; object-fit:contain; border-radius:8px;
}
.chat-lightbox-close {
  position:absolute; top:16px; right:16px; width:42px; height:42px; border-radius:50%;
  border:none; background:rgba(255,255,255,0.12); color:#fff; font-size:18px; cursor:pointer;
}
.chat-lightbox-dl {
  color:#4dd8ff; font-size:14px; text-decoration:none; padding:8px 16px;
  border:1px solid rgba(77,216,255,0.3); border-radius:999px;
}

/* Video call */
.chat-videocall {
  position:fixed; inset:0; z-index:360; background:#000;
  display:flex; flex-direction:column;
}
.chat-videocall.hidden { display:none !important; }
.vc-remote { flex:1; width:100%; object-fit:cover; background:#111; }
.vc-local {
  position:absolute; right:14px; top:14px; width:110px; height:160px;
  object-fit:cover; border-radius:12px; border:2px solid #333; background:#222;
}
.vc-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:#111; color:#ccc;
}
.vc-hangup {
  background:#ef4444; color:#fff; border:none; border-radius:999px;
  padding:10px 18px; font-weight:700; cursor:pointer; font-family:inherit;
}


.chat-voice-bubble {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; padding: 8px 10px; min-width: 180px; max-width: 260px;
  background: rgba(0,0,0,0.28); border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}
.chat-bubble.own .chat-voice-bubble {
  background: rgba(0,0,0,0.22);
}
.chat-voice-bubble audio { display: none !important; }
.vn-play {
  width: 36px; height: 36px; border-radius: 50%; border: none; flex-shrink: 0;
  background: #22c55e; color: #fff; display: grid; place-items: center; cursor: pointer;
}
.chat-voice-bubble.playing .vn-play { background: #16a34a; }
.vn-ico-play {
  width: 0; height: 0; border-style: solid;
  border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff;
  margin-left: 2px; display: block;
}
.chat-voice-bubble.playing .vn-ico-play {
  width: 10px; height: 12px; border: none;
  background: linear-gradient(to right, #fff 0 3px, transparent 3px 7px, #fff 7px 10px);
  margin-left: 0;
}
.vn-wave {
  flex: 1; display: flex; align-items: center; gap: 2px; height: 24px;
}
.vn-wave i {
  display: block; width: 3px; border-radius: 2px; background: rgba(255,255,255,0.45);
  height: 30%;
}
.vn-wave i:nth-child(3n) { height: 70%; }
.vn-wave i:nth-child(3n+1) { height: 45%; }
.vn-wave i:nth-child(3n+2) { height: 90%; }
.chat-voice-bubble.playing .vn-wave i {
  background: #4ade80;
  animation: vnPulse 0.8s ease-in-out infinite alternate;
}
.chat-voice-bubble.playing .vn-wave i:nth-child(odd) { animation-delay: 0.15s; }
@keyframes vnPulse { from { transform: scaleY(0.55); } to { transform: scaleY(1); } }
.vn-time { font-size: 11px; color: rgba(255,255,255,0.7); min-width: 32px; text-align: right; }
body.bg-white .chat-voice-bubble {
  background: #eef2f7; border-color: #dbe3ee;
}
body.bg-white .vn-wave i { background: #94a3b8; }
body.bg-white .vn-time { color: #64748b; }
body.bg-white .chat-voice-bubble.playing .vn-wave i { background: #16a34a; }


#chatVoiceBtn.recording { background:#ef4444; color:#fff; border-color:#ef4444; animation:pulse 1s infinite; }


/* Hide site footer fully in chat */
body.chat-fullscreen footer { display: none !important; }

/* Glass conversation list */
.chat-conversation-list { padding: 10px 12px 24px; gap: 10px; display: flex; flex-direction: column; }
.chat-conv-item {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  margin-bottom: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.chat-conv-item:hover { background: rgba(255,255,255,0.1) !important; }
.chat-conv-unread {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #22c55e; color: #fff; font-size: 11px; font-weight: 700;
  display: inline-grid; place-items: center; margin-left: 8px;
}
body.bg-white .chat-conv-item {
  background: rgba(255,255,255,0.75) !important;
  border-color: rgba(0,0,0,0.06) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.bg-white .chat-list-header h2,
body.bg-white .chat-conv-top strong { color: #111827; }
body.bg-white .chat-conv-preview { color: #6b7280; }
body.bg-white .chat-list-view,
body.bg-white .chat-room-view,
body.bg-white .chat-container { background: #f3f4f6; }
body.bg-white .chat-header { background: #ffffff; border-bottom-color: #e5e7eb; }
body.bg-white .chat-icon-btn { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }
body.bg-white .chat-back-btn { background: #f3f4f6; color: #111; }
body.bg-white .chat-menu-btn { background: #f3f4f6; border-color: #e5e7eb; color: #374151; }
body.bg-white .chat-menu-dots i { background: #374151; }
body.bg-white .chat-room-titles h2 { color: #111827; }
body.bg-white .chat-input-wrap { background: #ffffff; border-top-color: #e5e7eb; }
body.bg-white .chat-attach-menu { background: #fff; border-color: #e5e7eb; }
body.bg-white .chat-attach-menu button { color: #111; }
body.bg-white .chat-search-bar input { background: #fff; border-color: #e5e7eb; color: #111; }

/* Icon set (non-emoji) */
.ico-search, .ico-group, .ico-global, .ico-cam, .ico-phone, .ico-plus, .ico-mic, .ico-photo, .ico-file, .ico-back, .ico-send-btn {
  display: block; width: 20px; height: 20px; margin: 0 auto; position: relative;
}
.ico-search { border: 2px solid currentColor; border-radius: 50%; width: 14px; height: 14px; }
.ico-search::after { content:''; position:absolute; width:7px; height:2px; background:currentColor; right:-5px; bottom:-2px; transform:rotate(45deg); border-radius:1px; }
.ico-group { width: 22px; height: 14px; border: 2px solid currentColor; border-radius: 10px 10px 4px 4px; }
.ico-group::before { content:''; position:absolute; width:10px; height:10px; border:2px solid currentColor; border-radius:50%; top:-8px; left:4px; }
.ico-global { width:18px; height:18px; border:2px solid currentColor; border-radius:50%; }
.ico-global::before, .ico-global::after {
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:currentColor; transform:translateX(-50%);
}
.ico-global::after { width:100%; height:2px; left:0; top:50%; bottom:auto; transform:none; }
.ico-cam {
  width: 18px; height: 12px; border: 2px solid currentColor; border-radius: 3px; margin-top: 4px;
}
.ico-cam::after {
  content:''; position:absolute; right:-7px; top:2px; border-style:solid;
  border-width:4px 0 4px 7px; border-color: transparent transparent transparent currentColor;
}
.ico-phone {
  width: 14px; height: 14px; border: 2px solid currentColor;
  border-radius: 4px 4px 10px 10px; transform: rotate(135deg); margin-top: 3px;
}
.ico-phone::after {
  content:''; position:absolute; left: -3px; top: 8px; width: 6px; height: 2px;
  background: currentColor; border-radius: 1px;
}
.ico-plus::before, .ico-plus::after {
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:1px;
}
.ico-plus::before { width:14px; height:2px; transform:translate(-50%,-50%); }
.ico-plus::after { width:2px; height:14px; transform:translate(-50%,-50%); }
.ico-mic {
  width: 10px; height: 14px; border: 2px solid currentColor; border-radius: 6px; margin: 0 auto;
}
.ico-mic::after {
  content:''; position:absolute; left:50%; bottom:-4px; width:10px; height:6px;
  border:2px solid currentColor; border-top:none; border-radius:0 0 6px 6px; transform:translateX(-50%);
}
.ico-photo {
  width: 18px; height: 14px; border: 2px solid currentColor; border-radius: 3px;
}
.ico-photo::before {
  content:''; position:absolute; width:6px; height:6px; border:2px solid currentColor; border-radius:50%; top:2px; left:2px;
}
.ico-file {
  width: 12px; height: 16px; border: 2px solid currentColor; border-radius: 2px;
}
.ico-file::before {
  content:''; position:absolute; right:-1px; top:-1px; border-style:solid;
  border-width:0 6px 6px 0; border-color: transparent currentColor transparent transparent;
}
.ico-back::before {
  content:''; position:absolute; left:6px; top:4px; width:10px; height:10px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg);
}
.ico-send-btn {
  width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 14px;
  border-color: transparent transparent transparent currentColor; margin-left: 2px;
}

.chat-attach-wrap { position: relative; flex-shrink: 0; }
.chat-attach-menu {
  position: absolute; bottom: 52px; left: 0; min-width: 160px;
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 14px;
  padding: 6px; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.chat-attach-menu.hidden { display: none !important; }
.chat-attach-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; color: #e5e5e5;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; font: inherit; text-align: left;
}
.chat-attach-menu button:hover { background: rgba(255,255,255,0.06); }

/* Call UI */
.chat-videocall {
  position: fixed; inset: 0; z-index: 400; background: #0b0b0b;
  display: flex; flex-direction: column;
}
.chat-videocall.hidden { display: none !important; }
.vc-stage { flex: 1; position: relative; min-height: 0; background: #111; }
.vc-remote { width: 100%; height: 100%; object-fit: cover; background: #111; }
.vc-local {
  position: absolute; right: 14px; top: 14px; width: 110px; height: 150px;
  object-fit: cover; border-radius: 14px; border: 2px solid rgba(255,255,255,0.2); background: #222; z-index: 2;
}
.vc-avatar-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #2a1a24, #0b0b0b 70%);
}
.vc-avatar-fallback.hidden { display: none !important; }
.vc-avatar-circle {
  width: 120px; height: 120px; border-radius: 50%; background: #3b1d2e; color: #f9a8d4;
  display: grid; place-items: center; font-size: 48px; font-weight: 700; margin-bottom: 16px;
}
.vc-peer-name { color: #fff; font-size: 18px; font-weight: 600; }
.vc-top {
  position: absolute; left: 0; right: 0; top: 0; padding: 18px 16px;
  padding-top: max(18px, env(safe-area-inset-top));
  text-align: center; background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  color: #fff; z-index: 3;
}
.vc-timer { font-size: 14px; opacity: 0.9; }
.vc-status { font-size: 13px; opacity: 0.75; margin-top: 4px; }
.vc-controls {
  display: flex; justify-content: space-evenly; align-items: center;
  padding: 18px 12px max(22px, env(safe-area-inset-bottom));
  background: rgba(10,10,10,0.95);
}
.vc-ctrl {
  width: 64px; border: none; background: transparent; color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-family: inherit;
}
.vc-ctrl span {
  width: 52px; height: 52px; border-radius: 50%; background: #2a2a2a;
  display: grid; place-items: center;
}
.vc-ctrl small { font-size: 11px; color: #cfcfcf; }
.vc-ctrl.hangup span { background: #ef4444; }
.vc-ctrl.active span { background: #fff; color: #111; }
.ico-vc-speaker, .ico-vc-cam, .ico-vc-mic, .ico-vc-hangup {
  display:block; width:18px; height:18px; position:relative;
}
.ico-vc-hangup {
  width: 18px; height: 10px; border: 2px solid currentColor; border-radius: 0 0 12px 12px; border-top: none;
  transform: rotate(135deg);
}
.ico-vc-mic { width: 10px; height: 14px; border: 2px solid currentColor; border-radius: 6px; }
.ico-vc-cam { width: 16px; height: 12px; border: 2px solid currentColor; border-radius: 3px; }
.ico-vc-speaker {
  width: 10px; height: 12px; border: 2px solid currentColor; border-right: none; border-radius: 2px 0 0 2px;
}
.ico-vc-speaker::after {
  content:''; position:absolute; right:-6px; top:0; width:8px; height:12px;
  border:2px solid currentColor; border-left:none; border-radius:0 8px 8px 0;
}

.incoming-call-banner {
  position: fixed; left: 12px; right: 12px; top: max(12px, env(safe-area-inset-top));
  z-index: 420; background: rgba(20,20,20,0.95); border: 1px solid #333;
  border-radius: 16px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.incoming-call-banner.hidden { display: none !important; }
.icb-info { display: flex; flex-direction: column; gap: 2px; color: #fff; }
.icb-info span { color: #9ca3af; font-size: 12px; }
.icb-actions { display: flex; gap: 8px; }
.icb-accept, .icb-reject {
  border: none; border-radius: 999px; padding: 10px 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.icb-accept { background: #22c55e; color: #fff; }
.icb-reject { background: #ef4444; color: #fff; }

.chat-call-bubble {
  display: flex; align-items: center; gap: 10px; padding: 8px 4px; color: inherit;
}
.chat-call-bubble .call-ico {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: grid; place-items: center; flex-shrink: 0;
}
.chat-call-bubble strong { display: block; font-size: 14px; }
.chat-call-bubble small { opacity: 0.7; font-size: 12px; }

/* Swipe reply hint */
.chat-bubble { touch-action: pan-y; position: relative; }
.chat-bubble.swiping { transition: transform 0.05s linear; }

.group-member-list { width:100%; display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.group-member-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:rgba(255,255,255,0.05); border-radius:12px; border:1px solid rgba(255,255,255,0.06);
}
.group-member-row .g-av {
  width:36px; height:36px; border-radius:50%; background:#222; display:grid; place-items:center;
  font-weight:700; color:var(--neon); overflow:hidden; flex-shrink:0;
}
.group-member-row .g-av img { width:100%; height:100%; object-fit:cover; }
.group-member-row .g-meta { flex:1; min-width:0; text-align:left; }
.group-member-row .g-meta strong { display:block; color:#fff; font-size:14px; }
.group-member-row .g-meta small { color:#9ca3af; font-size:11px; }
.group-member-row .g-actions { display:flex; gap:4px; }
.group-member-row .g-actions button {
  border:none; background:rgba(255,255,255,0.08); color:#ddd; border-radius:8px;
  padding:6px 8px; font-size:11px; cursor:pointer; font-family:inherit;
}
.group-member-row .g-actions button.danger { color:#fca5a5; }
body.bg-white .group-member-row { background:#f9fafb; border-color:#e5e7eb; }
body.bg-white .group-member-row .g-meta strong { color:#111; }
.chat-call-bubble { cursor:pointer; }
.chat-call-bubble:hover { opacity:0.9; }

.chat-badge.is-online { color: #4ade80; border-color: rgba(74,222,128,0.35); }
.chat-badge.is-offline { color: #9ca3af; }

.chat-call-bubble {
  display: flex !important; align-items: center; gap: 10px;
  width: 100%; max-width: 260px; text-align: left;
  padding: 10px 12px !important; margin-top: 4px;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  color: #e5e7eb !important;
  cursor: pointer; font-family: inherit;
}
.chat-bubble.own .chat-call-bubble {
  background: rgba(0,0,0,0.25) !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.chat-call-bubble .call-ico {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(34,197,94,0.15); color: #4ade80;
  display: grid; place-items: center; flex-shrink: 0;
}
.chat-call-bubble .call-ico .material-symbols-outlined { font-size: 22px; color: inherit; }
.chat-call-bubble strong { display: block; font-size: 14px; color: #f3f4f6 !important; }
.chat-call-bubble small { display: block; opacity: 0.7; font-size: 11px; color: #9ca3af !important; margin-top: 2px; }
body.bg-white .chat-call-bubble {
  background: #eef2f7 !important; border-color: #dbe3ee !important; color: #111 !important;
}
body.bg-white .chat-call-bubble strong { color: #111 !important; }
body.bg-white .chat-call-bubble small { color: #6b7280 !important; }

.chat-room-sub {
  display: block; font-size: 12px; color: #9ca3af;
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.chat-room-titles h2 { margin: 0; font-size: 16px; line-height: 1.2; }
.chat-icon-btn .material-symbols-outlined { font-size: 22px; }
.chat-conv-avatar .material-symbols-outlined { font-size: 24px; color: var(--neon, #4dd8ff); }

.vc-ctrl .material-symbols-outlined { font-size: 22px; }

.vc-top {
  display: flex; align-items: flex-start; justify-content: center;
  position: absolute; left: 0; right: 0; top: 0;
  padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top));
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), transparent);
  color: #fff; z-index: 5;
}
.vc-back-btn {
  position: absolute; left: 12px; top: max(12px, env(safe-area-inset-top));
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.45); color: #fff; display: grid; place-items: center;
  cursor: pointer; z-index: 6;
}
.vc-back-btn .material-symbols-outlined { font-size: 22px; }
.vc-top-center { text-align: center; padding-top: 4px; }
.vc-video-request {
  position: absolute; left: 12px; right: 12px; bottom: 110px; z-index: 8;
  background: rgba(20,20,20,0.95); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.vc-video-request.hidden { display: none !important; }
.vc-vr-text { display: flex; align-items: center; gap: 12px; color: #fff; }
.vc-vr-text .material-symbols-outlined { font-size: 28px; color: #4ade80; }
.vc-vr-text strong { display: block; font-size: 14px; }
.vc-vr-text small { display: block; font-size: 12px; color: #9ca3af; margin-top: 2px; }
.vc-vr-actions { display: flex; gap: 10px; }
.vc-vr-accept, .vc-vr-reject {
  flex: 1; border: none; border-radius: 999px; padding: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; font-size: 14px;
}
.vc-vr-accept { background: #22c55e; color: #fff; }
.vc-vr-reject { background: #374151; color: #fff; }

.call-float {
  position: fixed; right: 14px; bottom: max(90px, calc(env(safe-area-inset-bottom) + 80px));
  z-index: 350; display: flex; align-items: center; gap: 8px;
  background: #16a34a; color: #fff; border: none; border-radius: 999px;
  padding: 10px 14px; box-shadow: 0 8px 28px rgba(0,0,0,0.4);
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13px;
}
.call-float.hidden { display: none !important; }
.call-float .material-symbols-outlined { font-size: 20px; }
.call-float.video { background: #0ea5e9; }

/* Group info sheet */
.gi-modal.open, #groupInviteSheet.open, #avatarCropModal.open { display:flex; }
.gi-sheet {
  width: min(440px, 100%); max-height: 92vh; overflow: auto;
  background: #121212; border-radius: 18px 18px 0 0; margin-top: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  animation: giSlideUp 0.28s ease;
}
@keyframes giSlideUp { from { transform: translateY(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.gi-topbar {
  display: flex; align-items: center; gap: 6px; padding: 10px 12px;
  position: sticky; top: 0; background: #121212; z-index: 2;
}
.gi-topbar-spacer { flex: 1; }
.gi-icon-btn {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: transparent; color: #e5e5e5; display: grid; place-items: center; cursor: pointer;
}
.gi-menu {
  position: absolute; right: 12px; top: 52px; min-width: 200px;
  background: #1e1e1e; border: 1px solid #333; border-radius: 12px; padding: 6px; z-index: 10;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
.gi-menu.hidden { display: none !important; }
.gi-menu button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: #eee; padding: 12px 14px; border-radius: 8px; cursor: pointer; font: inherit;
}
.gi-menu button:hover { background: rgba(255,255,255,0.06); }
.gi-hero { text-align: center; padding: 8px 20px 20px; }
.gi-avatar {
  width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 12px;
  background: #1a3a2a; color: #4ade80; display: grid; place-items: center; overflow: hidden;
}
.gi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gi-avatar .material-symbols-outlined { font-size: 48px; }
.gi-hero h2 { margin: 0; font-size: 22px; color: #fff; }
.gi-meta { color: #9ca3af; font-size: 13px; margin: 4px 0; }
.gi-desc { color: #d1d5db; font-size: 13px; margin: 8px 0 0; white-space: pre-wrap; }
.gi-actions { display: flex; justify-content: center; gap: 28px; margin-top: 18px; }
.gi-act {
  border: none; background: transparent; color: #e5e5e5; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: inherit;
}
.gi-act span:first-child {
  width: 52px; height: 52px; border-radius: 50%; background: #2a2a2a;
  display: grid; place-items: center; font-size: 24px;
}
.gi-section { padding: 8px 12px 16px; border-top: 1px solid #222; }
.gi-section-head { display: flex; align-items: center; justify-content: space-between; color: #9ca3af; font-size: 13px; padding: 4px 4px; }
.gi-row {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px;
  background: transparent; border: none; color: #e5e5e5; font: inherit; cursor: pointer; text-align: left; border-radius: 10px;
}
.gi-row:hover { background: rgba(255,255,255,0.04); }
.gi-row-count { margin-left: auto; color: #9ca3af; font-size: 13px; }
.gi-invite-link-btn {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); margin: 8px 12px;
  padding: 14px; border: none; border-radius: 12px; background: transparent; color: #e5e5e5;
  font: inherit; cursor: pointer; text-align: left;
}
.gi-invite-link-btn .material-symbols-outlined {
  width: 40px; height: 40px; border-radius: 50%; background: #22c55e; color: #fff;
  display: grid; place-items: center;
}
.gi-link-box { padding: 0 12px 12px; }
.group-member-row.selected { outline: 1px solid var(--neon, #4dd8ff); }
.av-crop-wrap { width: 100%; display: flex; justify-content: center; background: #0a0a0a; border-radius: 12px; overflow: hidden; }
#avatarCropCanvas { max-width: 100%; touch-action: none; cursor: grab; }

/* Draggable call float */
.call-float { touch-action: none; user-select: none; }

.chat-system-msg {
  display: flex; justify-content: center; margin: 10px 12px;
  pointer-events: none;
}
.chat-system-msg span {
  background: rgba(255,255,255,0.08); color: #9ca3af;
  font-size: 12px; padding: 6px 12px; border-radius: 999px;
  text-align: center; max-width: 90%;
}
body.bg-white .chat-system-msg span { background: #e5e7eb; color: #4b5563; }
.mention-dropdown {
  position: absolute; left: 12px; right: 12px; bottom: 70px;
  max-height: 200px; overflow: auto; z-index: 30;
  background: #1a1a1a; border: 1px solid #333; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.mention-dropdown.hidden { display: none !important; }
.mention-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; background: transparent; color: #eee;
  cursor: pointer; font: inherit; text-align: left;
}
.mention-item:hover { background: rgba(255,255,255,0.06); }
.mention-item .g-av { width: 32px; height: 32px; border-radius: 50%; background: #222; display: grid; place-items: center; overflow: hidden; font-size: 12px; }
.mention-item .g-av img { width: 100%; height: 100%; object-fit: cover; }
.chat-mention-tag {
  color: #4ade80; font-weight: 600;
}
.gi-menu button.danger:hover { background: rgba(239,68,68,0.12); }
.chat-room-view { position: relative; }

#confirmModal, #promptModal {
  z-index: 600 !important;
}
#confirmModal.open, #promptModal.open {
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.gi-modal.open, #groupInviteSheet.open {
  z-index: 250 !important;
}

/* ========== HTML Deploy UI ========== */
.hd-page {
  padding: 12px 14px 100px;
  max-width: 640px;
  margin: 0 auto;
}
.hd-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.hd-back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #e5e5e5; display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
  transition: 0.2s;
}
.hd-back-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(77,216,255,0.35); }
.hd-back-btn .material-symbols-outlined { font-size: 20px; }
.hd-top-text h2 {
  margin: 0; font-size: 18px; font-weight: 700; color: #fff;
}
.hd-top-text p {
  margin: 2px 0 0; font-size: 12px; color: #9ca3af;
}
.hd-top-text code {
  font-size: 11px; background: rgba(255,255,255,0.08);
  padding: 1px 6px; border-radius: 6px; color: #4dd8ff;
}
.hd-card {
  background: rgba(18,18,24,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 16px;
  margin-bottom: 14px;
  backdrop-filter: blur(12px);
}
.hd-label {
  display: block; font-size: 12px; font-weight: 600;
  color: #9ca3af; margin-bottom: 6px;
}
.hd-input {
  width: 100%; height: 46px; border-radius: 12px;
  background: #0e0e12; border: 1px solid #2a2a32;
  color: #fff; font-size: 14px; font-family: inherit;
  padding: 0 14px; outline: none;
}
.hd-input:focus { border-color: rgba(77,216,255,0.45); }
.hd-mode-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-bottom: 12px;
}
.hd-mode-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #a1a1aa; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: 0.2s;
}
.hd-mode-btn .material-symbols-outlined { font-size: 18px; }
.hd-mode-btn.active {
  background: rgba(77,216,255,0.12);
  border-color: rgba(77,216,255,0.4);
  color: #4dd8ff;
}
.hd-textarea {
  width: 100%; min-height: 200px; border-radius: 12px;
  background: #0e0e12 !important; border: 1px solid #2a2a32 !important;
  color: #e5e5e5 !important; font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding: 12px; resize: vertical; line-height: 1.5; outline: none;
  box-sizing: border-box;
}
.hd-textarea:focus { border-color: rgba(77,216,255,0.45) !important; }
.hd-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 140px; border-radius: 14px;
  border: 1.5px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  color: #c4c4c8; cursor: pointer; padding: 20px; text-align: center;
  transition: 0.2s;
}
.hd-drop:hover { border-color: rgba(77,216,255,0.45); background: rgba(77,216,255,0.06); }
.hd-drop .material-symbols-outlined { font-size: 36px; color: #4dd8ff; }
.hd-drop strong { font-size: 14px; color: #eee; }
.hd-drop small { font-size: 12px; color: #8b8b96; }
.hd-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px;
}
.hd-btn {
  height: 46px; border-radius: 12px; border: none;
  font-size: 14px; font-weight: 700; font-family: inherit;
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; transition: 0.2s;
}
.hd-btn .material-symbols-outlined { font-size: 18px; }
.hd-btn.ghost {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #e5e5e5;
}
.hd-btn.ghost:hover { background: rgba(255,255,255,0.1); }
.hd-btn.primary {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #fff; box-shadow: 0 8px 24px rgba(99,102,241,0.35);
}
.hd-btn.primary:hover { filter: brightness(1.08); }
.hd-status { font-size: 12px; color: #9ca3af; margin: 10px 0 0; word-break: break-all; }
.hd-status a { color: #4dd8ff; }
.hd-section-title { margin: 0 0 10px; font-size: 15px; color: #fff; }
.hd-empty { color: #6b7280; font-size: 13px; margin: 0; }
.hd-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.hd-card-head h3 { margin: 0; font-size: 14px; color: #fff; }
.hd-icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05); color: #ccc;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.hd-icon-btn .material-symbols-outlined { font-size: 18px; }
.hd-iframe {
  width: 100%; height: 300px; border: 1px solid #2a2a32;
  border-radius: 12px; background: #fff;
}
.hd-list-item {
  display: flex; flex-direction: column; gap: 6px; padding: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; margin-bottom: 8px;
}
.hd-list-item strong { color: #fff; font-size: 14px; }
.hd-list-item .hd-meta { font-size: 12px; color: #9ca3af; word-break: break-all; }
.hd-list-item .hd-actions {
  display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px;
  grid-template-columns: unset;
}
.hd-list-item .hd-actions button {
  border: 1px solid #333; background: #1a1a1a; color: #ddd;
  border-radius: 8px; padding: 6px 10px; font-size: 11px;
  cursor: pointer; font-family: inherit;
}
.hd-list-item .hd-actions button.danger { color: #fca5a5; border-color: rgba(239,68,68,0.35); }

.deploy-viewer-root {
  position: fixed; inset: 0; z-index: 500; background: #0a0a0a;
  display: flex; flex-direction: column;
}
.deploy-viewer-root.hidden { display: none !important; }
.deploy-viewer-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #111; border-bottom: 1px solid #222; color: #ccc; font-size: 13px;
}
.deploy-viewer-bar a, .deploy-viewer-bar button {
  color: #4dd8ff; background: none; border: none; cursor: pointer; font: inherit;
}
.deploy-viewer-frame { flex: 1; border: 0; width: 100%; background: #fff; }

body.bg-white .hd-card { background: #fff; border-color: #e5e7eb; }
body.bg-white .hd-input,
body.bg-white .hd-textarea {
  background: #f9fafb !important; border-color: #e5e7eb !important; color: #111 !important;
}
body.bg-white .hd-back-btn { background: #f3f4f6; border-color: #e5e7eb; color: #111; }
body.bg-white .hd-top-text h2 { color: #111; }
body.bg-white .hd-mode-btn { background: #f3f4f6; border-color: #e5e7eb; color: #4b5563; }
body.bg-white .hd-drop { background: #f9fafb; border-color: #d1d5db; }

/* Saat buka URL deploy: sembunyikan seluruh app Finz */
html.hd-view-mode body > *:not(#deployViewerRoot) { display: none !important; }
html.hd-view-mode #deployViewerRoot {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: #0a0a0a;
  flex-direction: column;
}
html.hd-view-mode #deployViewerRoot.hidden { display: flex !important; }

/* Tombol kembali bulat di setiap halaman fitur */
.feature-back-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #e5e5e5; display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0; padding: 0;
  margin: 10px 14px 4px;
  transition: 0.2s;
  position: relative; z-index: 5;
}
.feature-back-btn:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(77,216,255,0.35);
}
.feature-back-btn .material-symbols-outlined { font-size: 20px; line-height: 1; }
body.bg-white .feature-back-btn {
  background: #f3f4f6; border-color: #e5e7eb; color: #111;
}


/* ============================================================
   NEO-BRUTALISM THEME OVERRIDES (user app)
============================================================ */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif !important;
}
body.bg-black, body.bg-white {
  background: #111111 !important;
  color: #fff !important;
}
.bg-grid {
  opacity: 0.15 !important;
  background:
    linear-gradient(#000 2px, transparent 2px),
    linear-gradient(90deg, #000 2px, transparent 2px) !important;
  background-size: 48px 48px !important;
  background-color: #111 !important;
}
#bgTint, #bgScene, #visualizerCanvas { opacity: 0.25 !important; }

.brand, .brand-neon {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--nb-yellow) !important;
  animation: none !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  text-shadow: 3px 3px 0 #000 !important;
}

.icon-btn, .hd-back-btn, .feature-back-btn, .gi-icon-btn, .chat-back-btn {
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  background: var(--nb-yellow) !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.icon-btn:hover, .hd-back-btn:hover, .feature-back-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000 !important;
}

.primary-btn, .auth-btn-primary, .convert-btn, .hd-btn.primary,
.tiktok-go-btn, .qr-btn, button.primary-btn {
  background: var(--nb-yellow) !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #000 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.primary-btn:hover, .auth-btn-primary:hover, .convert-btn:hover, .hd-btn.primary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000 !important;
  filter: none !important;
}

.auth-btn-secondary, .hd-btn.ghost, .clear-history-btn {
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 700 !important;
}

.converter-card, .resolution-card, .tiktok-card, .hd-card,
.auth-modal .compact-modal-card, .feature-card, .hub-card,
.chat-conv-item, .glassmorphism, .user-row,
.admin-stat-card, .format-card, .drop-zone,
.profile-card, .tool-card {
  background: #1a1a1a !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 5px 5px 0 #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.feature-card:hover, .hub-card:hover, .chat-conv-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #000 !important;
  border-color: #000 !important;
}

.bottom-nav {
  background: #1a1a1a !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 4px 4px 0 #000 !important;
  backdrop-filter: none !important;
}
.nav-item.active {
  background: var(--nb-yellow) !important;
  color: #000 !important;
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 0 #000 !important;
}

.profile-input, .hd-input, .hd-textarea, .tool-textarea, .tool-text-input,
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  background: #0a0a0a !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 #000 inset !important;
}
.profile-input:focus, .hd-input:focus, .hd-textarea:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--nb-yellow) !important;
  outline: none !important;
}

.auth-modal {
  background: rgba(0,0,0,0.75) !important;
  backdrop-filter: none !important;
}
.compact-modal-card, .ban-card {
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 8px 8px 0 #000 !important;
}
.compact-modal-card h2, .ban-card h3 { color: #000 !important; }
.compact-modal-card .auth-sub, .ban-card p { color: #333 !important; }

.hd-mode-btn {
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.hd-mode-btn.active {
  background: var(--nb-cyan) !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.hd-drop {
  border: 3px dashed #000 !important;
  border-radius: 4px !important;
  background: #141414 !important;
}

/* Chat neo-brutal */
.chat-bubble, .chat-msg-bubble {
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.chat-room-header, .chat-list-view, .chat-input-wrap {
  border-color: #000 !important;
  box-shadow: none !important;
  background: #141414 !important;
}
.chat-fullscreen .chat-room-view { background: #111 !important; }

/* Status badges */
.secure, .hub-badge, .unread-badge {
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  background: var(--nb-pink) !important;
  color: #fff !important;
  box-shadow: 2px 2px 0 #000 !important;
}

h1, h2, .eyebrow {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}
.eyebrow {
  color: var(--nb-yellow) !important;
  text-transform: uppercase;
  border: 2px solid #000;
  display: inline-block;
  padding: 2px 8px;
  background: var(--nb-pink);
  color: #fff !important;
  box-shadow: 2px 2px 0 #000;
  border-radius: 2px;
}

.format-chips span, .format-chip {
  border: 2px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 2px 2px 0 #000 !important;
  background: var(--nb-lime) !important;
  color: #000 !important;
  font-weight: 700 !important;
}

.progress { border: 2px solid #000 !important; border-radius: 2px !important; background: #000 !important; }
.progress span, #progressBar { background: var(--nb-yellow) !important; border-radius: 0 !important; }

.music-wrap button, #musicToggle, #musicListToggle {
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  background: var(--nb-cyan) !important;
  color: #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}

/* Light mode force neo brutal still */
body.bg-white .converter-card,
body.bg-white .feature-card,
body.bg-white .hd-card {
  background: #fff !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
}
body.bg-white {
  background: #f4f0e6 !important;
  color: #000 !important;
}
body.bg-white .bottom-nav { background: #fff !important; }
body.bg-white .brand-neon { color: #000 !important; text-shadow: 3px 3px 0 var(--nb-yellow) !important; }


/* ============================================================
   BLUE NEO-BRUTAL + UX FIXES (v2)
============================================================ */
:root {
  --neon: #60a5fa !important;
  --nb-yellow: #3b82f6 !important;
  --nb-pink: #2563eb !important;
  --nb-cyan: #38bdf8 !important;
  --nb-lime: #93c5fd !important;
}

.brand, .brand-neon {
  color: #60a5fa !important;
  text-shadow: 3px 3px 0 #000 !important;
}

.primary-btn, .auth-btn-primary, .convert-btn, .hd-btn.primary,
.tiktok-go-btn, .qr-btn, button.primary-btn,
.icon-btn, .hd-back-btn, .feature-back-btn,
.nav-item.active {
  background: #3b82f6 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
}

.music-wrap button, #musicToggle, #musicListToggle {
  background: #38bdf8 !important;
  color: #000 !important;
}

/* Clear All merah */
#clearHistoryBtn, .clear-history-btn {
  background: #ef4444 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
}
#clearHistoryBtn:hover, .clear-history-btn:hover {
  background: #dc2626 !important;
  transform: translate(-1px,-1px);
  box-shadow: 4px 4px 0 #000 !important;
}

/* Chat list spacing + brighter cards */
.chat-conv-item, .chat-list-item, #chatDmList > *, #chatConvList > button,
.chat-search-item {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 3px solid #000 !important;
  border-radius: 6px !important;
  box-shadow: 4px 4px 0 #000 !important;
  margin-bottom: 14px !important;
  padding: 14px 16px !important;
}
.chat-conv-item strong, .chat-list-item strong { color: #0f172a !important; }
.chat-conv-item small, .chat-list-item small { color: #64748b !important; }

/* Chat: tetap tampilkan bottom nav, sembunyikan titik 3 list */
body.chat-fullscreen .bottom-nav {
  display: flex !important;
  visibility: visible !important;
}
#chatListMenuBtn, .chat-list-menu-btn, button[aria-label="Menu chat"] {
  display: none !important;
}
#chatListMenu {
  display: none !important;
}

/* Saat di dalam room chat, bottom nav bisa disembunyikan */
body.chat-in-room .bottom-nav { display: none !important; }

/* Search reveal */
.feature-card.reveal-pending {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.feature-card.reveal-in {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Desktop: bottom nav -> sidebar via hamburger */
.desktop-nav-toggle {
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 1200;
  width: 44px; height: 44px;
  border: 3px solid #000;
  border-radius: 4px;
  background: #3b82f6;
  color: #fff;
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  place-items: center;
  padding: 0;
}
.desktop-nav-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
}
@media (min-width: 900px) {
  .bottom-nav {
    position: fixed !important;
    left: 0; top: 0; bottom: 0;
    width: 220px;
    height: 100% !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 72px 12px 24px !important;
    border-radius: 0 4px 4px 0 !important;
    transform: translateX(-105%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1150 !important;
  }
  body.desktop-nav-open .bottom-nav {
    transform: translateX(0);
  }
  body.desktop-nav-open .desktop-nav-backdrop { display: block; }
  .desktop-nav-toggle { display: grid; }
  .nav-item {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px;
  }
  .app, main {
    padding-left: 0 !important;
  }
  body:not(.desktop-nav-open) .bottom-nav .nav-label {
    display: inline !important;
  }
}
@media (max-width: 899px) {
  .desktop-nav-toggle, .desktop-nav-backdrop { display: none !important; }
  .bottom-nav {
    transform: none !important;
    flex-direction: row !important;
  }
}

/* Modal neo blue */
.compact-modal-card {
  border: 3px solid #000 !important;
  box-shadow: 8px 8px 0 #000 !important;
}


/* ============================================================
   NAV + CHAT BUGFIX v3
============================================================ */
/* Sembunyikan "Files stay in your browser" */
.secure, .top-actions .secure, span.secure { display: none !important; }

/* Bottom nav mobile — center akurat */
@media (max-width: 899px) {
  .desktop-nav-toggle,
  .desktop-nav-backdrop { display: none !important; }

  .bottom-nav,
  body.chat-fullscreen .bottom-nav {
    display: flex !important;
    visibility: visible !important;
    position: fixed !important;
    bottom: 18px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    z-index: 200 !important;
    border-radius: 18px !important;
  }
  .nav-item {
    width: auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    margin: 0 !important;
  }
}

/* Desktop: hamburger kanan atas, sidebar dari kanan */
@media (min-width: 900px) {
  .desktop-nav-toggle {
    display: grid !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
  }
  .bottom-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 240px !important;
    height: 100% !important;
    transform: translateX(105%) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 72px 14px 24px !important;
    border-radius: 8px 0 0 8px !important;
    z-index: 1150 !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
  body.desktop-nav-open .bottom-nav {
    transform: translateX(0) !important;
  }
  body.desktop-nav-open .desktop-nav-backdrop {
    display: block !important;
  }
  .nav-item {
    width: 100% !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
  }
}

/* Chat list: tampilkan nav bawah; room: sembunyikan */
body.chat-fullscreen:not(.chat-in-room) .bottom-nav {
  display: flex !important;
}
body.chat-in-room .bottom-nav {
  display: none !important;
}

/* Hapus titik 3 / menu chat LIST saja (bukan room) */
.chat-list-actions .chat-menu-btn,
#chatListMenuBtn,
.chat-list-header .chat-menu-btn,
.chat-list-header .chat-menu-dots,
#chatListMenu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Judul Chat gelap → biru muda */
.chat-list-header h2,
body.chat-fullscreen .chat-list-header h2 {
  color: #93c5fd !important;
  opacity: 1 !important;
}
body.bg-white .chat-list-header h2 {
  color: #1e40af !important;
}

/* Pastikan brand tidak tertutup hamburger di mobile */
.topbar { position: relative; z-index: 5; }
@media (min-width: 900px) {
  .topbar { padding-right: 56px; }
}

/* Brat API links */
.brat-api-box {
  margin-top: 14px;
  padding: 12px;
  border: 3px solid #000;
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: 3px 3px 0 #000;
}
.brat-api-hint {
  margin: 0 0 10px;
  font-size: 12px;
  color: #93c5fd;
  font-weight: 600;
}
.brat-api-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.brat-api-row:last-child { margin-bottom: 0; }
.brat-api-url {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #e5e7eb;
  background: #111;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}
.brat-api-copy {
  flex-shrink: 0;
  border: 3px solid #000;
  border-radius: 4px;
  background: #3b82f6;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #000;
  font-family: inherit;
}
.brat-api-copy:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 #000; }


/* Avatar image fix — jangan hitam */
.chat-conv-avatar {
  overflow: hidden !important;
  background: #334155 !important;
  display: grid !important;
  place-items: center !important;
}
.chat-conv-avatar img,
.profile-avatar img,
.chat-room-avatar img,
.g-av img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
}
.profile-avatar {
  overflow: hidden !important;
  background: #1e293b !important;
}

.profile-remove-avatar {
  margin-left: 8px;
  background: #ef4444 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
}
.profile-avatar-section {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
}

.avatar-crop-zoom-wrap {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0; color: #e5e7eb; font-size: 13px;
}
.avatar-crop-zoom-wrap input[type="range"] { flex: 1; accent-color: #3b82f6; }

/* Light mode chat background */
body.bg-white.chat-fullscreen #page-chat,
body.bg-white .chat-list-view,
body.bg-white .chat-room-view,
body.bg-white .chat-messages,
body.bg-white .chat-container {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
body.bg-white .chat-list-header,
body.bg-white .chat-room-header,
body.bg-white .chat-input-wrap {
  background: #fff !important;
  border-color: #000 !important;
  color: #0f172a !important;
}
body.bg-white .chat-list-header h2,
body.bg-white #chatRoomTitle,
body.bg-white .chat-room-header * {
  color: #0f172a !important;
}
body.bg-white .chat-conv-item {
  background: #fff !important;
  color: #0f172a !important;
}

/* WhatsApp-like send */
.chat-wa-send, button#chatSendBtn .material-symbols-outlined {
  font-size: 22px !important;
  color: #fff !important;
}
#chatSendBtn, .chat-send-btn {
  background: #25d366 !important;
  border: 3px solid #000 !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  box-shadow: 3px 3px 0 #000 !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
}


/* Profile: avatar + tombol sejajar */
.profile-avatar-section {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
.profile-avatar-section .profile-avatar {
  flex-shrink: 0;
}
.profile-avatar-section .profile-upload-btn {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}
.profile-avatar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-remove-avatar {
  background: #ef4444 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
}

/* Chat room header avatar */
#chatRoomAvatar {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #334155 !important;
  flex-shrink: 0;
}
#chatRoomAvatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.chat-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: inline-block !important;
  background: #475569 !important;
}

/* Satu avatar saja di bubble */
.chat-meta .chat-avatar + .chat-avatar-fallback { display: none !important; }
.chat-meta img.chat-avatar {
  display: inline-block !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
.chat-meta span.chat-avatar-fallback {
  display: inline-flex !important;
}
.chat-meta img.chat-avatar[style*="display: none"] + .chat-avatar-fallback {
  display: inline-flex !important;
}
/* Room menu */
#chatRoomMenu {
  position: absolute;
  right: 8px;
  top: 56px;
  z-index: 40;
  min-width: 200px;
  background: #1a1a1a;
  border: 3px solid #000;
  border-radius: 8px;
  box-shadow: 5px 5px 0 #000;
  padding: 6px;
}
#chatRoomMenu.hidden { display: none !important; }
.chat-room-header { position: relative; }


/* Room menu 3-titik — bisa diklik */
#chatRoomMenuBtn {
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  width: 40px !important;
  height: 40px !important;
  position: relative !important;
  z-index: 30 !important;
  cursor: pointer !important;
}
#chatRoomMenuBtn.hidden {
  display: none !important;
}
.chat-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  z-index: 25 !important;
  pointer-events: auto !important;
}
.chat-room-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  min-width: 210px !important;
  padding: 8px !important;
  background: #1a1a1a !important;
  border: 3px solid #000 !important;
  border-radius: 8px !important;
  box-shadow: 5px 5px 0 #000 !important;
  z-index: 100 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.chat-room-menu.hidden {
  display: none !important;
}
.chat-room-menu .chat-menu-item {
  display: flex !important;
  width: 100% !important;
  text-align: left !important;
  padding: 12px 14px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  font-family: inherit !important;
}
.chat-room-menu .chat-menu-item:hover {
  background: rgba(59,130,246,0.2) !important;
}
.chat-room-menu .chat-menu-text strong {
  color: #f8fafc !important;
  font-size: 14px !important;
}


/* ============================================================
   FINZ NEO-BRUTALISM MODERN — FULL UI OVERHAUL (FINAL)
   Pastel · thick borders · hard shadows · bouncy interactions
============================================================ */

html, body,
body.bg-black,
body.bg-white {
  background: #F3F4F6 !important;
  color: #0A0A0A !important;
  font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif !important;
  font-weight: 600;
}

/* Subtle grid canvas */
.bg-grid {
  opacity: 0.45 !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
}
#bgScene, #bgTint, #visualizerCanvas {
  opacity: 0.08 !important;
  filter: grayscale(0.3);
}

/* ---- Typography ---- */
h1, h2, h3, .brand, .home-title, .hero h1 {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  color: #0A0A0A !important;
}
.eyebrow {
  display: inline-block !important;
  background: #FACC15 !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 999px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---- Brand badge ---- */
.brand, .brand-neon {
  background: #FACC15 !important;
  color: #0A0A0A !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  animation: none !important;
  text-shadow: none !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* ---- Icon / action buttons ---- */
.icon-btn, .hd-back-btn, .feature-back-btn, .gi-icon-btn,
.chat-back-btn, .chat-icon-btn, .music-wrap button,
#musicToggle, #musicListToggle, .music-arrow-btn,
.desktop-nav-toggle {
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 #000 !important;
  background: #A5F3FC !important;
  color: #0A0A0A !important;
  transition: var(--nb-spring) !important;
  cursor: pointer;
}
.icon-btn:nth-of-type(2), #musicToggle {
  background: #FBCFE8 !important;
}
.icon-btn:nth-of-type(3), #musicListToggle, .music-arrow-btn {
  background: #DDD6FE !important;
}
.icon-btn:hover, .hd-back-btn:hover, .feature-back-btn:hover,
.chat-icon-btn:hover, .music-wrap button:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 #000 !important;
}
.icon-btn:active, .hd-back-btn:active, .feature-back-btn:active,
.chat-icon-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 #000 !important;
}

/* ---- Primary buttons ---- */
.primary-btn, .auth-btn-primary, .convert-btn, .hd-btn.primary,
.tiktok-go-btn, .qr-btn, button.primary-btn,
.profile-upload-btn:not(.profile-remove-avatar),
.auth-btn-primary {
  background: #60A5FA !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 #000 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: var(--nb-spring) !important;
}
.primary-btn:hover, .auth-btn-primary:hover, .convert-btn:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 6px 6px 0 #000 !important;
  filter: none !important;
}
.primary-btn:active, .auth-btn-primary:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 2px 2px 0 #000 !important;
}

.auth-btn-secondary, .hd-btn.ghost {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 700 !important;
}

/* Clear All / danger */
#clearHistoryBtn, .clear-history-btn, .profile-remove-avatar,
.btn-ban, .admin-delete-btn {
  background: #FB7185 !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 800 !important;
}

/* ---- Cards (general) ---- */
.converter-card, .resolution-card, .tiktok-card, .hd-card,
.feature-card, .hub-card, .format-card, .drop-zone,
.profile-card, .tool-card, .compact-modal-card,
.info-card, .stat-card, .home-info-card, .sosmed-card,
.widget-card, .info-widget {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: 5px 5px 0 #000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: var(--nb-spring) !important;
}
.feature-card:hover, .hub-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0 #000 !important;
}

/* Feature grid color rotation */
#featureGrid .feature-card:nth-child(4n+1),
.feature-card:nth-child(4n+1) { background: #FEF08A !important; }
#featureGrid .feature-card:nth-child(4n+2),
.feature-card:nth-child(4n+2) { background: #A5F3FC !important; }
#featureGrid .feature-card:nth-child(4n+3),
.feature-card:nth-child(4n+3) { background: #DDD6FE !important; }
#featureGrid .feature-card:nth-child(4n+4),
.feature-card:nth-child(4n+4) { background: #A7F3D0 !important; }

.feature-card h3, .feature-card strong,
.feature-card .feature-name { color: #0A0A0A !important; font-weight: 800 !important; }
.feature-card p, .feature-card small, .feature-card .feature-desc {
  color: #404040 !important;
}

/* Search */
#page-search h1, #page-search .search-title, .search-header h1 {
  display: inline-block;
  background: #FACC15 !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  color: #0A0A0A !important;
}
#featureSearch, .search-input, input#featureSearch {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
  font-weight: 600 !important;
}
#featureSearch:focus, .search-input:focus {
  background: #FEF08A !important;
  outline: none !important;
  box-shadow: 5px 5px 0 #000 !important;
}

/* Inputs */
.profile-input, .hd-input, .hd-textarea, .tool-textarea,
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], textarea, select {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 600 !important;
}
.profile-input:focus, input:focus, textarea:focus, select:focus {
  background: #FEF08A !important;
  outline: none !important;
  box-shadow: 4px 4px 0 #000 !important;
}

/* ---- Home hero ---- */
.home-title, #heroTitle, .hero h1 {
  background: #DDD6FE !important;
  border: 3px solid #000 !important;
  box-shadow: 6px 6px 0 #000 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  display: inline-block !important;
  transform: rotate(-1deg);
  color: #0A0A0A !important;
  font-weight: 900 !important;
}
.subtitle { color: #525252 !important; font-weight: 600 !important; }

/* Info widgets */
.info-grid, .home-widgets, .widgets-row {
  display: grid;
  gap: 12px;
}
.widget-time, .info-widget-time, #clockCard, .home-time-card {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}
.widget-battery, .info-widget-battery, #batteryCard {
  background: #A7F3D0 !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}
.widget-ip, .info-widget-ip, #ipCard {
  background: #FBCFE8 !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}

/* Sosmed / profile home card */
.sosmed-card, .home-profile-card, .creator-card {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
  border-radius: 16px !important;
  color: #0A0A0A !important;
}
.sosmed-card img, .home-profile-card img, .creator-card img,
.profile-avatar img {
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.stat-pill, .member-stat, .online-stat {
  background: #FEF08A !important;
  border: 3px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  border-radius: 999px !important;
  color: #0A0A0A !important;
  font-weight: 800 !important;
}
.online-stat, .stat-online {
  background: #A7F3D0 !important;
}
.online-dot, .status-dot-online {
  background: #22c55e !important;
  box-shadow: 0 0 0 2px #000, 0 0 8px #22c55e !important;
  animation: nbPulse 1.4s ease infinite;
}
@keyframes nbPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

/* Social links */
.sosmed-link, .social-row a, a.tiktok-link, a.ig-link {
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: var(--nb-spring) !important;
  color: #0A0A0A !important;
}
.sosmed-link:hover, .social-row a:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 #000 !important;
}

footer, .app footer {
  color: #0A0A0A !important;
}
footer::before {
  content: none;
}

/* ---- Bottom nav floating dock ---- */
.bottom-nav {
  background: #DDD6FE !important;
  border: 3px solid #000 !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 #000 !important;
  backdrop-filter: none !important;
  margin: 0 12px 12px !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  bottom: 12px !important;
  padding: 8px !important;
}
.nav-item {
  color: #0A0A0A !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: var(--nb-spring) !important;
  background: transparent !important;
  border: 2px solid transparent !important;
}
.nav-item .material-symbols-outlined { color: #0A0A0A !important; }
.nav-item.active {
  background: #60A5FA !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 12px !important;
}
.nav-item.active .material-symbols-outlined { color: #0A0A0A !important; }

/* ---- Chat ---- */
body.chat-fullscreen #page-chat,
body.chat-fullscreen .chat-list-view,
body.chat-fullscreen .chat-room-view,
.chat-container, .chat-messages {
  background: #F3F4F6 !important;
  color: #0A0A0A !important;
}
.chat-list-header, .chat-header, .chat-room-header {
  background: #FFFFFF !important;
  border-bottom: 3px solid #000 !important;
  color: #0A0A0A !important;
}
.chat-list-header h2 {
  color: #0A0A0A !important;
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 10px !important;
  padding: 4px 12px !important;
  display: inline-block !important;
  font-weight: 900 !important;
}
.chat-conv-item, .chat-list-item {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 #000 !important;
  margin-bottom: 12px !important;
  transition: var(--nb-spring) !important;
}
.chat-conv-item:first-child,
.chat-conv-global {
  background: #A5F3FC !important;
}
.chat-conv-item:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 6px 6px 0 #000 !important;
}
.chat-conv-item strong { color: #0A0A0A !important; font-weight: 800 !important; }
.chat-conv-item small, .chat-conv-preview { color: #525252 !important; }
.chat-conv-avatar, #chatRoomAvatar {
  border: 3px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  background: #DDD6FE !important;
}
.chat-badge, #chatOnlineCount, .chat-room-sub {
  background: #A7F3D0 !important;
  color: #0A0A0A !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 2px 2px 0 #000 !important;
}

/* Bubbles */
.chat-bubble {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 #000 !important;
}
.chat-bubble.own {
  background: #DDD6FE !important;
}
.chat-bubble.admin {
  background: #FEF08A !important;
}
.chat-name, .chat-name.user, .chat-name.admin {
  color: #0A0A0A !important;
  text-shadow: none !important;
  font-weight: 800 !important;
}
.chat-name-you {
  background: #FACC15 !important;
  border: 2px solid #000 !important;
  border-radius: 6px !important;
  padding: 0 6px !important;
  font-size: 11px !important;
}
.chat-text, .chat-time { color: #0A0A0A !important; }
.chat-time { opacity: 0.65; }
.chat-avatar, .chat-avatar-fallback {
  border: 2px solid #000 !important;
}

/* Chat input */
.chat-input-wrap {
  background: #FFFFFF !important;
  border-top: 3px solid #000 !important;
}
.chat-input-wrap input {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
  box-shadow: 2px 2px 0 #000 !important;
}
.chat-attach-btn {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 #000 !important;
  color: #0A0A0A !important;
}
#chatSendBtn, .chat-send-btn {
  background: #34D399 !important;
  border: 3px solid #000 !important;
  border-radius: 50% !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
}
.chat-attach-menu, .chat-room-menu {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}
.chat-room-menu .chat-menu-item,
.chat-attach-menu button,
.chat-menu-item {
  color: #0A0A0A !important;
  background: transparent !important;
}
.chat-room-menu .chat-menu-text strong,
.chat-menu-text strong { color: #0A0A0A !important; }
.chat-room-menu .chat-menu-item:hover,
.chat-attach-menu button:hover {
  background: #FEF08A !important;
}

/* ---- Profile ---- */
#page-profile h1, .profile-title {
  color: #0A0A0A !important;
  font-weight: 900 !important;
}
.profile-card {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
}
.profile-card h3 { color: #0A0A0A !important; font-weight: 800 !important; }
.profile-avatar {
  border: 4px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  background: #DDD6FE !important;
}
.profile-label { color: #525252 !important; font-weight: 700 !important; }
.history-list, .history-empty {
  border: 3px dashed #000 !important;
  background: #FEF08A !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}

/* ---- Modals ---- */
.auth-modal {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px) !important;
}
.compact-modal-card, .ban-card {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 4px solid #000 !important;
  border-radius: 16px !important;
  box-shadow: 8px 8px 0 #000 !important;
}
.compact-modal-card h2, .ban-card h3 { color: #0A0A0A !important; }
.compact-modal-card .auth-sub, .ban-card p { color: #404040 !important; }

/* ---- Calculator / tools ---- */
.calc-btn {
  border: 3px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  transition: var(--nb-spring) !important;
}
.calc-btn:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 0 0 0 #000 !important;
}
.calc-eq { background: #34D399 !important; }
.calc-op { background: #A5F3FC !important; }
.calc-fn { background: #FBCFE8 !important; }

/* Progress */
.progress {
  border: 3px solid #000 !important;
  background: #E5E5E5 !important;
  border-radius: 8px !important;
}
.progress span, #progressBar {
  background: #60A5FA !important;
  border-radius: 4px !important;
}

/* Secure badge / chips */
.secure, .hub-badge, .unread-badge, .chat-conv-unread {
  background: #FB7185 !important;
  color: #fff !important;
  border: 2px solid #000 !important;
  border-radius: 999px !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 800 !important;
}
.format-chip, .format-chips span {
  background: #A7F3D0 !important;
  border: 2px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  border-radius: 999px !important;
  color: #0A0A0A !important;
  font-weight: 700 !important;
}

/* App shell */
.app {
  color: #0A0A0A !important;
}
.topbar { margin-bottom: 28px; }

/* Force light on old dark overrides */
body.bg-white .converter-card,
body.bg-white .feature-card,
body.bg-white .hd-card,
body.bg-white .chat-container,
body.bg-white .bottom-nav {
  /* already handled */
}

/* Desktop sidebar nav */
@media (min-width: 900px) {
  .bottom-nav {
    background: #DDD6FE !important;
    border-radius: 0 16px 16px 0 !important;
  }
  .desktop-nav-toggle {
    background: #FACC15 !important;
  }
}

/* Reveal animation keep */
.feature-card.reveal-pending {
  opacity: 0;
  transform: translateY(24px);
}
.feature-card.reveal-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Call bubbles */
.chat-call-bubble {
  border: 3px solid #000 !important;
  background: #A7F3D0 !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 #000 !important;
  color: #0A0A0A !important;
}

/* HD deploy */
.hd-mode-btn {
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  font-weight: 800 !important;
}
.hd-mode-btn.active {
  background: #60A5FA !important;
}
.hd-drop {
  border: 3px dashed #000 !important;
  background: #FEF08A !important;
  border-radius: 14px !important;
}
.brat-api-box {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
}
.brat-api-url {
  background: #F3F4F6 !important;
  color: #0A0A0A !important;
  border: 2px solid #000 !important;
}
.brat-api-hint { color: #404040 !important; }
.brat-api-copy {
  background: #60A5FA !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  font-weight: 800 !important;
}


/* ---- Home hub widgets (specific classes) ---- */
.neon-sub {
  color: #0A0A0A !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  display: inline-block !important;
  background: #DDD6FE !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 10px !important;
  padding: 4px 12px !important;
  text-shadow: none !important;
}
.hub-status-box {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
  padding: 14px !important;
}
.hub-status-row .hub-status-box:nth-child(1) { background: #A7F3D0 !important; }
.hub-status-row .hub-status-box:nth-child(2) { background: #FBCFE8 !important; }
.hub-status-label {
  color: #0A0A0A !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.hub-status-box strong, #liveClock, #batteryLevel, #ipDisplay {
  color: #0A0A0A !important;
  font-weight: 900 !important;
}
.hub-card {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  box-shadow: 6px 6px 0 #000 !important;
  border-radius: 18px !important;
  color: #0A0A0A !important;
  padding: 18px !important;
}
.hub-avatar img, .hub-avatar {
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 50% !important;
}
.hub-title h2 { color: #0A0A0A !important; font-weight: 900 !important; }
.hub-title p {
  color: #404040 !important;
  background: #FEF08A !important;
  border: 2px solid #000 !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-weight: 600 !important;
}
.hub-link, .hub-social a, a.hub-social-btn {
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.hub-link:hover, .hub-social a:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 #000 !important;
}
.home-sosmed .hub-card a[href*="tiktok"] {
  background: #A5F3FC !important;
}
.home-sosmed .hub-card a[href*="instagram"] {
  background: #FBCFE8 !important;
}
#hubOnlineCount {
  color: #0A0A0A !important;
}


/* ============================================================
   POLISH FIXES — logo, nav, theme, search list
============================================================ */

/* Brand Finz: ringkas, bukan kotak dobel */
.brand, a.brand, .brand-neon {
  background: #FACC15 !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  text-decoration: none !important;
  -webkit-text-fill-color: #0A0A0A !important;
  text-shadow: none !important;
  animation: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  width: auto !important;
  max-width: max-content !important;
  transform: none !important;
}
.brand .material-symbols-outlined,
.brand span:not(.brand-text) { display: none !important; }
.brand::before, .brand::after { display: none !important; content: none !important; }

/* Hero title: teks gelap kontras di ungu pastel */
.home-title, #heroTitle {
  background: #DDD6FE !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  text-shadow: none !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  font-size: clamp(22px, 6vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  display: inline-block !important;
  transform: rotate(-1deg) !important;
  max-width: 100% !important;
}

/* Bottom nav: CENTER floating pill (mobile) */
.bottom-nav,
body.chat-fullscreen .bottom-nav,
body.chat-fullscreen:not(.chat-in-room) .bottom-nav,
body.bg-white .bottom-nav,
body.bg-black .bottom-nav {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 10px !important;
  background: #DDD6FE !important;
  border: 3px solid #000 !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 #000 !important;
  z-index: 200 !important;
  backdrop-filter: none !important;
}
body.chat-in-room .bottom-nav {
  display: none !important;
}
.nav-item {
  flex: 0 0 auto !important;
  min-width: 64px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  color: #0A0A0A !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
.nav-item .material-symbols-outlined {
  color: #0A0A0A !important;
  filter: none !important;
  font-size: 22px !important;
}
.nav-label { color: #0A0A0A !important; font-weight: 700 !important; }
.nav-item.active {
  background: #60A5FA !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
  transform: none !important;
}

/* Desktop: tetap center dock, bukan sidebar kiri */
@media (min-width: 900px) {
  .bottom-nav,
  body.chat-fullscreen .bottom-nav {
    left: 50% !important;
    top: auto !important;
    bottom: 20px !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    width: max-content !important;
    height: auto !important;
    border-radius: 18px !important;
  }
  .desktop-nav-toggle { display: none !important; }
  .desktop-nav-backdrop { display: none !important; }
  body.desktop-nav-open .bottom-nav {
    transform: translateX(-50%) !important;
  }
}

/* Search feature cards: SEMUA biru muda */
#featureGrid .feature-card,
#featureGrid .feature-card:nth-child(n),
.feature-card,
.feature-card:nth-child(4n+1),
.feature-card:nth-child(4n+2),
.feature-card:nth-child(4n+3),
.feature-card:nth-child(4n+4) {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}
.feature-card:hover {
  transform: translate(-3px, -3px) !important;
  box-shadow: 7px 7px 0 #000 !important;
  background: #7DD3FC !important;
}
.feature-card h3,
.feature-card strong,
.feature-card .feature-name { color: #0A0A0A !important; }
.feature-card p,
.feature-card small,
.feature-card .feature-desc { color: #334155 !important; }
.feature-card .feature-icon,
.feature-card .ico-wrap {
  background: #0A0A0A !important;
  color: #A5F3FC !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
}

/* Theme: MODE SIANG */
body.bg-white {
  background: #F3F4F6 !important;
  color: #0A0A0A !important;
}
body.bg-white .bg-grid { opacity: 0.4 !important; }

/* Theme: MODE MALAM — neo dark */
body.bg-black {
  background: #0f0f12 !important;
  color: #f5f5f5 !important;
}
body.bg-black .bg-grid {
  opacity: 0.2 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px) !important;
}
body.bg-black .home-title,
body.bg-black #heroTitle {
  background: #4c1d95 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #000 !important;
}
body.bg-black .hub-card,
body.bg-black .feature-card,
body.bg-black .converter-card,
body.bg-black .profile-card,
body.bg-black .chat-conv-item,
body.bg-black .chat-bubble {
  background: #1a1a22 !important;
  color: #f5f5f5 !important;
  border-color: #000 !important;
}
body.bg-black .hub-status-box {
  background: #1e293b !important;
  color: #f5f5f5 !important;
}
body.bg-black .hub-title h2,
body.bg-black .hub-status-box strong,
body.bg-black .hub-status-label,
body.bg-black .feature-card h3,
body.bg-black .feature-card p,
body.bg-black .neon-sub {
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
}
body.bg-black .bottom-nav {
  background: #312e81 !important;
}
body.bg-black .nav-item,
body.bg-black .nav-item .material-symbols-outlined,
body.bg-black .nav-label {
  color: #e2e8f0 !important;
}
body.bg-black .nav-item.active {
  background: #60A5FA !important;
  color: #0A0A0A !important;
}
body.bg-black .nav-item.active .material-symbols-outlined {
  color: #0A0A0A !important;
}
body.bg-black .brand,
body.bg-black .brand-neon {
  background: #FACC15 !important;
  color: #0A0A0A !important;
}
body.bg-black input,
body.bg-black textarea,
body.bg-black select,
body.bg-black .profile-input,
body.bg-black #featureSearch {
  background: #1a1a22 !important;
  color: #f5f5f5 !important;
  border-color: #000 !important;
}
body.bg-black .chat-header,
body.bg-black .chat-list-header,
body.bg-black .chat-input-wrap {
  background: #15151c !important;
  color: #f5f5f5 !important;
  border-color: #000 !important;
}
body.bg-black .chat-bubble.own { background: #3730a3 !important; }
body.bg-black .chat-text,
body.bg-black .chat-name,
body.bg-black .chat-time { color: #f5f5f5 !important; }

/* Theme toggle button tetap bisa diklik */
#themeToggle {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 50 !important;
  position: relative !important;
}


/* Brand Finz — teks jelas, tidak hilang */
a.brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #FACC15 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  line-height: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
  animation: none !important;
  background-image: none !important;
}
a.brand * {
  display: inline !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  animation: none !important;
  font-weight: 900 !important;
  font-size: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}
a.brand .material-symbols-outlined { display: none !important; }

/* Cari Fitur title — satu badge, tidak dobel */
.search-page-title,
.search-header h2 {
  display: inline-block !important;
  background: #FACC15 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: none !important;
  background-image: none !important;
  margin: 0 auto 16px !important;
}
.search-page-title::before,
.search-page-title::after,
.search-header h2::before,
.search-header h2::after {
  content: none !important;
  display: none !important;
}
.search-header {
  text-align: center !important;
}
/* jangan apply brand-neon gradient ke search */
.search-header .brand-neon {
  background: #FACC15 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  animation: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}


/* ============================================================
   UX FIX v3 — widgets, chat WA-like, night/day, profile title
============================================================ */

/* Semua widget Informasi (waktu, baterai, IP) satu warna cyan */
.home-info .hub-status-box,
.hub-status-row.standalone .hub-status-box,
.hub-status-row.standalone .hub-status-box:nth-child(1),
.hub-status-row.standalone .hub-status-box:nth-child(2) {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  color: #0A0A0A !important;
}
.home-info .hub-status-box strong,
.home-info .hub-status-label,
#liveClock, #batteryLevel, #ipDisplay {
  color: #0A0A0A !important;
}
body.bg-black .home-info .hub-status-box,
body.bg-black .hub-status-row.standalone .hub-status-box {
  background: #1e3a5f !important;
  color: #f1f5f9 !important;
}
body.bg-black .home-info .hub-status-box strong,
body.bg-black .home-info .hub-status-label,
body.bg-black #liveClock,
body.bg-black #batteryLevel,
body.bg-black #ipDisplay {
  color: #f1f5f9 !important;
}

/* Search cards: day = cyan terang, night = biru gelap */
body.bg-white #featureGrid .feature-card,
body.bg-white .feature-card {
  background: #A5F3FC !important;
  color: #0A0A0A !important;
}
body.bg-black #featureGrid .feature-card,
body.bg-black .feature-card {
  background: #1e3a5f !important;
  color: #e2e8f0 !important;
  border-color: #000 !important;
}
body.bg-black .feature-card h3,
body.bg-black .feature-card strong,
body.bg-black .feature-card .feature-name {
  color: #f8fafc !important;
}
body.bg-black .feature-card p,
body.bg-black .feature-card small,
body.bg-black .feature-card .feature-desc {
  color: #94a3b8 !important;
}
body.bg-black .feature-card .feature-icon,
body.bg-black .feature-card .ico-wrap {
  background: #0f172a !important;
  color: #7dd3fc !important;
}
body.bg-black #featureSearch,
body.bg-black .search-input {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border-color: #000 !important;
}

/* Pengaturan Akun — satu teks, tidak dobel */
.profile-main-title {
  display: inline-block !important;
  background: #FACC15 !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
  border-radius: 12px !important;
  padding: 10px 18px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  animation: none !important;
  background-image: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  margin: 0 0 18px !important;
}
.profile-main-title::before,
.profile-main-title::after {
  content: none !important;
  display: none !important;
}

/* ---- CHAT: WhatsApp-like backgrounds ---- */
/* LIGHT */
body.bg-white.chat-fullscreen #page-chat,
body.bg-white.chat-fullscreen .chat-list-view,
body.bg-white.chat-fullscreen .chat-room-view,
body.bg-white.chat-fullscreen .chat-container,
body.bg-white.chat-fullscreen .chat-messages,
body.bg-white #page-chat,
body.bg-white .chat-list-view,
body.bg-white .chat-room-view,
body.bg-white .chat-container,
body.bg-white .chat-messages {
  background: #ECE5DD !important; /* WA light chat wallpaper tone */
  color: #0A0A0A !important;
}
body.bg-white .chat-list-view,
body.bg-white #chatListView {
  background: #FFFFFF !important;
}
body.bg-white .chat-list-header,
body.bg-white .chat-header {
  background: #F0F2F5 !important;
  border-bottom: 3px solid #000 !important;
  color: #0A0A0A !important;
}
body.bg-white .chat-conv-item {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
body.bg-white .chat-conv-item:first-child,
body.bg-white .chat-conv-global {
  background: #A5F3FC !important;
}
body.bg-white .chat-bubble {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
body.bg-white .chat-bubble.own {
  background: #D9FDD3 !important; /* WA outgoing green-ish */
}
body.bg-white .chat-bubble.admin {
  background: #FEF08A !important;
}
body.bg-white .chat-input-wrap {
  background: #F0F2F5 !important;
  border-top: 3px solid #000 !important;
}
body.bg-white .chat-input-wrap input {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}

/* DARK — abu-abu gelap seperti WA */
body.bg-black.chat-fullscreen #page-chat,
body.bg-black.chat-fullscreen .chat-list-view,
body.bg-black.chat-fullscreen .chat-room-view,
body.bg-black.chat-fullscreen .chat-container,
body.bg-black.chat-fullscreen .chat-messages,
body.bg-black #page-chat,
body.bg-black .chat-list-view,
body.bg-black .chat-room-view,
body.bg-black .chat-container,
body.bg-black .chat-messages {
  background: #0b141a !important;
  color: #e9edef !important;
}
body.bg-black .chat-list-view,
body.bg-black #chatListView {
  background: #111b21 !important;
}
body.bg-black .chat-list-header,
body.bg-black .chat-header {
  background: #202c33 !important;
  border-bottom: 3px solid #000 !important;
  color: #e9edef !important;
}
body.bg-black .chat-list-header h2,
body.bg-black #chatRoomTitle,
body.bg-black .chat-room-titles h2 {
  color: #e9edef !important;
  -webkit-text-fill-color: #e9edef !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
body.bg-black .chat-conv-item {
  background: #202c33 !important;
  color: #e9edef !important;
  border-color: #000 !important;
}
body.bg-black .chat-conv-item:first-child,
body.bg-black .chat-conv-global {
  background: #1e3a5f !important;
}
body.bg-black .chat-conv-item strong {
  color: #e9edef !important;
}
body.bg-black .chat-conv-item small,
body.bg-black .chat-conv-preview {
  color: #8696a0 !important;
}
body.bg-black .chat-bubble {
  background: #202c33 !important;
  color: #e9edef !important;
  border-color: #000 !important;
}
body.bg-black .chat-bubble.own {
  background: #005c4b !important; /* WA dark outgoing */
  color: #e9edef !important;
}
body.bg-black .chat-bubble.admin {
  background: #3f3f1a !important;
  color: #fef08a !important;
}
body.bg-black .chat-text,
body.bg-black .chat-name,
body.bg-black .chat-time {
  color: #e9edef !important;
}
body.bg-black .chat-input-wrap {
  background: #202c33 !important;
  border-top: 3px solid #000 !important;
}
body.bg-black .chat-input-wrap input {
  background: #2a3942 !important;
  color: #e9edef !important;
  border-color: #000 !important;
}
body.bg-black .chat-attach-btn {
  background: #2a3942 !important;
  color: #e9edef !important;
}
body.bg-black #chatSendBtn,
body.bg-black .chat-send-btn {
  background: #00a884 !important;
  color: #fff !important;
}

/* GLOBAL CHAT title: tanpa garis bawah */
#chatRoomTitle,
.chat-room-titles h2,
.chat-room-titles {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.chat-room-titles h2::after,
#chatRoomTitle::after,
.chat-room-titles::after {
  display: none !important;
  content: none !important;
  border: none !important;
  height: 0 !important;
  background: none !important;
}
/* kalau underline dari border-bottom di badge online, biarkan online saja */
#chatOnlineCount {
  border-bottom: none !important;
}

/* Chat list title badge */
body.bg-white .chat-list-header h2 {
  background: #A5F3FC !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
}
body.bg-black .chat-list-header h2 {
  background: #1e3a5f !important;
  color: #e9edef !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 10px !important;
  padding: 6px 14px !important;
}

/* Home night: waktu widget konsisten */
body.bg-black .hub-status-row .hub-status-box:nth-child(1),
body.bg-black .hub-status-row .hub-status-box:nth-child(2) {
  /* member/online di sosmed tetap beda opsional; info section sudah di-set di atas */
}


/* ============================================================
   UX FIX v4 — history, private chat night, sosmed widgets unify
============================================================ */

/* ---- Riwayat Aktivitas ---- */
.history-list,
.history-empty,
#historyList,
.history-item,
.history-card,
.history-day-group {
  background: #FFFFFF !important;
  border: 3px solid #000 !important;
  border-style: solid !important;
  box-shadow: 3px 3px 0 #000 !important;
  border-radius: 14px !important;
  color: #0A0A0A !important;
}
body.bg-black .history-list,
body.bg-black .history-empty,
body.bg-black #historyList,
body.bg-black .history-item,
body.bg-black .history-card,
body.bg-black .history-day-group {
  background: #2a2a32 !important;
  color: #e5e5e5 !important;
  border-color: #000 !important;
}

/* item riwayat: garis pemisah antar aktivitas */
.history-item,
.history-card,
#historyList > div,
.history-day-group > div {
  border-bottom: 2px solid #d4d4d8 !important;
  border-left: 4px solid #60A5FA !important;
  margin-bottom: 10px !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  background: #f4f4f5 !important;
  color: #0A0A0A !important;
  box-shadow: 2px 2px 0 #000 !important;
  border-top: 2px solid #000 !important;
  border-right: 2px solid #000 !important;
}
body.bg-black .history-item,
body.bg-black .history-card,
body.bg-black #historyList > div,
body.bg-black .history-day-group > div {
  background: #1f1f27 !important;
  color: #f4f4f5 !important;
  border-bottom-color: #3f3f46 !important;
  border-left-color: #60A5FA !important;
}

/* warna garis kiri beda per jenis (kalau ada data-type / class) */
.history-item[data-type="mediafire"],
.history-card[data-type="mediafire"] { border-left-color: #FACC15 !important; }
.history-item[data-type="tiktok"],
.history-card[data-type="tiktok"] { border-left-color: #22d3ee !important; }
.history-item[data-type="socialdl"],
.history-item[data-type="instagram"],
.history-card[data-type="instagram"] { border-left-color: #F472B6 !important; }
.history-item[data-type="brat"],
.history-card[data-type="brat"] { border-left-color: #a3e635 !important; }
.history-item[data-type="converter"],
.history-card[data-type="converter"] { border-left-color: #C084FC !important; }

.history-item strong,
.history-card strong,
.history-item .history-title {
  color: inherit !important;
  font-weight: 800 !important;
}
.history-item small,
.history-card small,
.history-item .history-time {
  color: #525252 !important;
}
body.bg-black .history-item small,
body.bg-black .history-card small,
body.bg-black .history-item .history-time {
  color: #a1a1aa !important;
}

/* tanggal header riwayat */
.history-date,
.history-day-label {
  color: #0A0A0A !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #000 !important;
  padding-bottom: 6px !important;
  margin: 12px 0 8px !important;
}
body.bg-black .history-date,
body.bg-black .history-day-label {
  color: #e5e5e5 !important;
  border-bottom-color: #52525b !important;
}

/* ---- Chat pribadi ikut mode malam ---- */
body.bg-black .chat-conv-item,
body.bg-black #chatDmList .chat-conv-item,
body.bg-black .chat-list-item {
  background: #202c33 !important;
  color: #e9edef !important;
  border: 3px solid #000 !important;
}
body.bg-black .chat-conv-item strong,
body.bg-black .chat-list-item strong {
  color: #e9edef !important;
}
body.bg-black .chat-conv-item small,
body.bg-black .chat-conv-preview {
  color: #8696a0 !important;
}
body.bg-white .chat-conv-item:not(:first-child) {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
body.bg-white .chat-conv-item strong { color: #0A0A0A !important; }

/* ---- Member / Online / TikTok / Instagram = sama kaya waktu-baterai-ip ---- */
.hub-status-row .hub-status-box,
.hub-card .hub-status-box,
.hub-social-item,
.hub-link,
a.hub-social-btn,
.home-sosmed .hub-social-item,
.hub-card a[href*="tiktok"],
.hub-card a[href*="instagram"] {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
  border-radius: 14px !important;
}
body.bg-black .hub-status-row .hub-status-box,
body.bg-black .hub-card .hub-status-box,
body.bg-black .hub-social-item,
body.bg-black .hub-link,
body.bg-black a.hub-social-btn,
body.bg-black .hub-card a[href*="tiktok"],
body.bg-black .hub-card a[href*="instagram"] {
  background: #1e3a5f !important;
  color: #f1f5f9 !important;
}

/* teks hitam siang / putih malam */
body.bg-white .hub-status-box,
body.bg-white .hub-status-box strong,
body.bg-white .hub-status-label,
body.bg-white .hub-title h2,
body.bg-white .hub-title p,
body.bg-white .hub-social-info strong,
body.bg-white .hub-social-info small,
body.bg-white .hub-card,
body.bg-white .neon-sub {
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
body.bg-black .hub-status-box,
body.bg-black .hub-status-box strong,
body.bg-black .hub-status-label,
body.bg-black .hub-title h2,
body.bg-black .hub-social-info strong,
body.bg-black .hub-social-info small,
body.bg-black .hub-card,
body.bg-black .neon-sub,
body.bg-black .hub-card a {
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
}
/* quote box tetap kuning dengan teks hitam (kontras) */
body.bg-black .hub-title p {
  background: #FEF08A !important;
  color: #0A0A0A !important;
  -webkit-text-fill-color: #0A0A0A !important;
}
body.bg-white .hub-title p {
  background: #FEF08A !important;
  color: #0A0A0A !important;
}

/* hub-card container */
body.bg-white .hub-card {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
body.bg-black .hub-card {
  background: #15151c !important;
  color: #f1f5f9 !important;
}

/* profile history section title */
body.bg-white .profile-card h3,
body.bg-white .profile-card {
  color: #0A0A0A !important;
}
body.bg-black .profile-card h3 {
  color: #f1f5f9 !important;
}
body.bg-black .profile-card {
  background: #15151c !important;
  color: #f1f5f9 !important;
}
body.bg-black .profile-label {
  color: #a1a1aa !important;
}
body.bg-black .profile-input {
  background: #1f1f27 !important;
  color: #f1f5f9 !important;
}

/* garis kiri berdasarkan data-type action */
.history-item[data-type="mediafire"] { border-left: 5px solid #FACC15 !important; }
.history-item[data-type="tiktok"] { border-left: 5px solid #22d3ee !important; }
.history-item[data-type="socialdl"] { border-left: 5px solid #F472B6 !important; }
.history-item[data-type="brat"] { border-left: 5px solid #a3e635 !important; }
.history-item[data-type="converter"] { border-left: 5px solid #C084FC !important; }
.history-item[data-type="currency"] { border-left: 5px solid #34D399 !important; }
.history-item[data-type="resolution"] { border-left: 5px solid #60A5FA !important; }
.history-item[data-type="htmldeploy"] { border-left: 5px solid #FB7185 !important; }
.history-item[data-type="resizer"] { border-left: 5px solid #818CF8 !important; }

/* pastikan teks history tidak putih di kuning */
.history-item, .history-item * {
  text-shadow: none !important;
}
body.bg-white .history-item,
body.bg-white .history-item .history-item-info,
body.bg-white .history-item strong {
  color: #0A0A0A !important;
}
body.bg-black .history-item,
body.bg-black .history-item .history-item-info,
body.bg-black .history-item strong {
  color: #f4f4f5 !important;
}


/* ---- Voice note WA bar + mic send ---- */
.chat-composer-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
.chat-composer-row.hidden { display: none !important; }

#chatSendBtn.chat-send-btn,
.chat-send-btn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 50% !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
#chatSendBtn.is-mic {
  background: #25D366 !important;
  color: #fff !important;
}
#chatSendBtn.is-send {
  background: #25D366 !important;
  color: #fff !important;
}
#chatSendBtn .material-symbols-outlined {
  font-size: 26px !important;
  color: #fff !important;
}

.chat-attach-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 2px 2px 0 #000 !important;
  color: #0A0A0A !important;
}
.chat-attach-btn .material-symbols-outlined {
  font-size: 24px !important;
  color: #0A0A0A !important;
}
body.bg-black .chat-attach-btn {
  background: #2a3942 !important;
  color: #e9edef !important;
}
body.bg-black .chat-attach-btn .material-symbols-outlined { color: #e9edef !important; }

/* Attach menu rapi: icon + label sejajar */
.chat-attach-menu {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px !important;
  min-width: 160px !important;
  background: #fff !important;
  border: 3px solid #000 !important;
  box-shadow: 5px 5px 0 #000 !important;
  border-radius: 14px !important;
  z-index: 50 !important;
}
.chat-attach-menu.hidden { display: none !important; }
.chat-attach-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border: none !important;
  background: transparent !important;
  color: #0A0A0A !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  text-align: left !important;
}
.chat-attach-menu button .material-symbols-outlined {
  font-size: 22px !important;
  width: 28px !important;
  text-align: center !important;
  color: #0A0A0A !important;
}
.chat-attach-menu button:hover { background: #FEF08A !important; }
body.bg-black .chat-attach-menu {
  background: #202c33 !important;
}
body.bg-black .chat-attach-menu button {
  color: #e9edef !important;
}
body.bg-black .chat-attach-menu button .material-symbols-outlined {
  color: #e9edef !important;
}

/* Record bar */
.vn-record-bar {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 8px 4px !important;
}
.vn-record-bar.hidden { display: none !important; }
.vn-record-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 8px !important;
}
.vn-timer {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #e9edef !important;
  font-variant-numeric: tabular-nums !important;
}
body.bg-white .vn-timer { color: #0A0A0A !important; }
.vn-dots { color: #8696a0 !important; letter-spacing: 2px !important; }
.vn-record-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.vn-del-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #3f1d24 !important;
  border: 3px solid #000 !important;
  color: #f87171 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 #000 !important;
}
.vn-del-btn .material-symbols-outlined { font-size: 24px !important; color: #f87171 !important; }
.vn-pause-btn {
  flex: 1 !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: #3a3a42 !important;
  border: 3px solid #000 !important;
  color: #fff !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 #000 !important;
}
.vn-pause-btn.is-resume {
  background: #0d4f3c !important;
  color: #86efac !important;
}
.vn-pause-btn .material-symbols-outlined { font-size: 22px !important; }
.vn-send-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  border: 3px solid #000 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 #000 !important;
}
.vn-send-btn .material-symbols-outlined { font-size: 24px !important; color: #fff !important; }

.vn-paused-preview {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  background: #1a1a22 !important;
  border: 2px solid #000 !important;
  border-radius: 12px !important;
}
.vn-paused-preview.hidden { display: none !important; }
.vn-preview-play {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
}
.vn-preview-wave {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 20px !important;
}
.vn-preview-wave i {
  display: block !important;
  width: 3px !important;
  height: 6px !important;
  background: #25D366 !important;
  border-radius: 2px !important;
}
.vn-preview-wave i:nth-child(2n) { height: 12px !important; }
.vn-preview-wave i:nth-child(3n) { height: 18px !important; }
.vn-preview-time {
  font-weight: 700 !important;
  color: #e9edef !important;
  font-size: 13px !important;
}

body.bg-white .vn-pause-btn { background: #e5e5e5 !important; color: #0A0A0A !important; }
body.bg-white .vn-pause-btn.is-resume { background: #d1fae5 !important; color: #065f46 !important; }
body.bg-white .vn-del-btn { background: #fee2e2 !important; }
body.bg-white .vn-paused-preview { background: #f4f4f5 !important; }
body.bg-white .vn-preview-play { color: #0A0A0A !important; }
body.bg-white .vn-preview-time { color: #0A0A0A !important; }

/* Live voice level bars */
.vn-dots.vn-live {
  display: inline-flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  height: 18px !important;
  min-width: 60px !important;
}
.vn-dots.vn-live i {
  display: inline-block !important;
  width: 3px !important;
  height: 4px !important;
  background: #25D366 !important;
  border-radius: 2px !important;
  transition: height 0.08s linear !important;
}
body.bg-white .vn-dots.vn-live i { background: #16a34a !important; }

.chat-voice-bubble.playing .vn-wave i {
  animation: vnBar 0.5s ease-in-out infinite alternate !important;
}
@keyframes vnBar {
  from { transform: scaleY(0.4); }
  to { transform: scaleY(1); }
}


/* Google login — mode siang teks hitam */
body.bg-white .auth-google,
body.bg-white button.auth-google {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  font-weight: 800 !important;
}
body.bg-white .auth-google img { opacity: 1 !important; }
body.bg-black .auth-google {
  background: #1f1f27 !important;
  color: #f5f5f5 !important;
  border: 3px solid #000 !important;
}

/* Incoming call modal */
.incoming-call-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
}
.incoming-call-modal.hidden { display: none !important; }
.incoming-call-card {
  background: #202c33;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  color: #fff;
  min-width: 260px;
}
.incoming-call-ico {
  width: 72px; height: 72px; margin: 0 auto 12px;
  border-radius: 50%; background: #25D366;
  display: grid; place-items: center;
  border: 3px solid #000;
}
.incoming-call-ico .material-symbols-outlined { font-size: 36px; color: #fff; }
.incoming-call-actions { display: flex; gap: 12px; margin-top: 18px; justify-content: center; }
.incoming-reject, .incoming-accept {
  border: 3px solid #000; border-radius: 12px; padding: 12px 18px;
  font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 #000;
}
.incoming-reject { background: #FB7185; color: #0A0A0A; }
.incoming-accept { background: #25D366; color: #0A0A0A; }

/* Desktop: bottom nav → hamburger kanan atas */
@media (min-width: 900px) {
  .desktop-nav-toggle {
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 300 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    background: #FACC15 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 #000 !important;
    color: #0A0A0A !important;
    cursor: pointer !important;
  }
  .desktop-nav-toggle .material-symbols-outlined {
    font-size: 28px !important;
    color: #0A0A0A !important;
  }
  .bottom-nav,
  body.chat-fullscreen .bottom-nav,
  body.bg-white .bottom-nav,
  body.bg-black .bottom-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    transform: translateX(110%) !important;
    width: 280px !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 16px 0 0 16px !important;
    margin: 0 !important;
    z-index: 290 !important;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }
  body.desktop-nav-open .bottom-nav {
    transform: translateX(0) !important;
  }
  .desktop-nav-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.35) !important;
    z-index: 280 !important;
  }
  body.desktop-nav-open .desktop-nav-backdrop {
    display: block !important;
  }
  .nav-item {
    width: 80% !important;
    min-width: 0 !important;
  }
}
@media (max-width: 899px) {
  .desktop-nav-toggle,
  .desktop-nav-backdrop {
    display: none !important;
  }
}

.history-item[data-type="spotify"] { border-left: 5px solid #1DB954 !important; }


/* Base64 panel selalu terlihat di page devtools */
#page-devtools #devtoolsBase64Panel { display: block !important; }
#page-devtools #devtoolsJsonPanel { display: none !important; }

/* Home light mode: MEMBER / ONLINE / TikTok / IG samakan gaya battery-time-ip (cyan pastel) */
body.bg-white .hub-status-box,
body.bg-white .hub-status-row .hub-status-box {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
}
body.bg-white .hub-status-label,
body.bg-white .hub-status-box strong {
  color: #0A0A0A !important;
}
body.bg-white .hub-card a.tiktok-link,
body.bg-white .hub-card a.ig-link,
body.bg-white .sosmed-link,
body.bg-white .hub-card .social-row a {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
}
body.bg-white .hub-card a.tiktok-link *,
body.bg-white .hub-card a.ig-link * {
  color: #0A0A0A !important;
}

/* Bottom nav mode malam selalu gelap (termasuk di chat) */
body.bg-black .bottom-nav,
body:not(.bg-white) .bottom-nav,
body.bg-black.chat-fullscreen .bottom-nav,
body:not(.bg-white).chat-fullscreen .bottom-nav {
  background: #0f172a !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
}
body.bg-black .bottom-nav .nav-item,
body:not(.bg-white) .bottom-nav .nav-item {
  color: #e2e8f0 !important;
}
body.bg-black .bottom-nav .nav-item.active,
body:not(.bg-white) .bottom-nav .nav-item.active {
  background: #38bdf8 !important;
  color: #0A0A0A !important;
  border: 2px solid #000 !important;
}
body.bg-black .bottom-nav .nav-item .material-symbols-outlined,
body:not(.bg-white) .bottom-nav .nav-item .material-symbols-outlined {
  color: inherit !important;
}
body.bg-black .bottom-nav .nav-label,
body:not(.bg-white) .bottom-nav .nav-label {
  color: inherit !important;
}

/* Mode siang nav tetap terang */
body.bg-white .bottom-nav {
  background: #EEF2FF !important;
  border: 3px solid #000 !important;
}

/* Hub social items light mode = cyan sama waktu/baterai/ip */
body.bg-white .hub-social-item {
  background: #A5F3FC !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000 !important;
  color: #0A0A0A !important;
}
body.bg-white .hub-social-item small,
body.bg-white .hub-social-item strong,
body.bg-white .hub-social-item span {
  color: #0A0A0A !important;
}
/* Override pastel hijau/pink di light mode */
body.bg-white .hub-status-box:nth-child(1),
body.bg-white .hub-status-box:nth-child(2) {
  background: #A5F3FC !important;
}


/* ========== DESKTOP NAV FIX (akhir, override semua) ========== */
@media (min-width: 900px) {
  /* Hamburger kanan atas */
  .desktop-nav-toggle {
    display: grid !important;
    place-items: center !important;
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 1200 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    background: #FACC15 !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 #000 !important;
    color: #0A0A0A !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  .desktop-nav-toggle .material-symbols-outlined {
    font-size: 26px !important;
    color: #0A0A0A !important;
  }

  /* Nav panel: sidebar kanan, sembunyi sampai dibuka */
  .bottom-nav,
  body.chat-fullscreen .bottom-nav,
  body.bg-white .bottom-nav,
  body.bg-black .bottom-nav,
  body.chat-in-room .bottom-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 260px !important;
    max-width: 80vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 80px 16px 24px !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 8px !important;
    border-radius: 16px 0 0 16px !important;
    transform: translateX(110%) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
    z-index: 1180 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
  }

  body.desktop-nav-open .bottom-nav,
  body.desktop-nav-open.chat-fullscreen .bottom-nav,
  body.desktop-nav-open.chat-in-room .bottom-nav {
    transform: translateX(0) !important;
    display: flex !important;
  }

  .desktop-nav-backdrop {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,0.4) !important;
    z-index: 1170 !important;
  }
  body.desktop-nav-open .desktop-nav-backdrop {
    display: block !important;
  }

  .bottom-nav .nav-item {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .bottom-nav .nav-label {
    display: inline !important;
    font-size: 14px !important;
  }
}

@media (max-width: 899px) {
  .desktop-nav-toggle,
  .desktop-nav-backdrop {
    display: none !important;
  }
  .bottom-nav {
    /* mobile: tetap bottom bar */
    position: fixed !important;
    bottom: 16px !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    height: auto !important;
    flex-direction: row !important;
    padding: 8px 14px !important;
    border-radius: 18px !important;
  }
  body.chat-in-room .bottom-nav {
    display: none !important;
  }
}


/* ========== NUCLEAR FIX: desktop chat jangan tampil strip nav di tengah ========== */
@media (min-width: 900px) {
  /* Saat TERTUTUP: benar-benar tidak terlihat, tidak di tengah */
  body:not(.desktop-nav-open) #bottomNav,
  body:not(.desktop-nav-open) .bottom-nav {
    position: fixed !important;
    top: 0 !important;
    right: -280px !important;
    left: auto !important;
    bottom: 0 !important;
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
    height: 100vh !important;
    transform: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 1180 !important;
  }

  /* Saat TERBUKA */
  body.desktop-nav-open #bottomNav,
  body.desktop-nav-open .bottom-nav {
    right: 0 !important;
    left: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Chat list / fullscreen: tetap sembunyikan jika nav tertutup */
  body.chat-fullscreen:not(.desktop-nav-open) #bottomNav,
  body.chat-fullscreen:not(.desktop-nav-open) .bottom-nav,
  body.chat-in-room:not(.desktop-nav-open) #bottomNav,
  body.chat-in-room:not(.desktop-nav-open) .bottom-nav {
    right: -280px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* ============================================================
   FEATURE GRID: transisi smooth saat buka / ganti kategori
============================================================ */
@keyframes featureCardEnter {
  from { opacity: 0; transform: translateY(26px) scale(0.95); }
}
.feature-card.feature-card-enter {
  animation: featureCardEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(60ms + var(--i, 0) * 55ms);
}
#featureGrid {
  transition: opacity 0.17s ease, transform 0.17s ease;
}
#featureGrid.feature-grid-leaving {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
.feature-back-btn { transition: background 0.2s, border-color 0.2s, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1); }
.feature-back-btn:active { transform: scale(0.88); }
.feature-back-btn:hover .material-symbols-outlined { transform: translateX(-2px); }
.feature-back-btn .material-symbols-outlined { transition: transform 0.2s ease; }
@media (prefers-reduced-motion: reduce) {
  .feature-card.feature-card-enter { animation: none; }
  #featureGrid { transition: none; }
}


/* ============================================================
   PAGE ENTER / LEAVE: halaman fitur (Base64, TikTok, dst.) masuk smooth
   Catatan: .page-section default display:none -> transition TIDAK bisa jalan
   dari display:none, makanya dulu halaman muncul mendadak. Pakai keyframe.
============================================================ */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(44px) scale(0.965); }
}
@keyframes pageInnerEnter {
  from { opacity: 0; transform: translateY(28px); }
}
.page-section.active-page {
  animation: pageEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* lapisan kedua: isi halaman menyusul sedikit lebih lambat (efek berlapis) */
.page-section.active-page:not(#page-chat) > *:not(.feature-back-btn):not(#featureGrid) {
  animation: pageInnerEnter 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s backwards;
}
.page-section.active-page > .feature-back-btn {
  animation: pageInnerEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s backwards;
}
/* animasi keluar saat menu diklik */
.page-section.active-page.page-leaving {
  opacity: 0;
  transform: translateY(-14px) scale(0.985);
  transition: opacity 0.23s ease, transform 0.23s ease;
  animation: none;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .page-section.active-page,
  .page-section.active-page > * { animation: none !important; }
  .page-section.active-page.page-leaving { transition: none; }
}