body { background:#0b0d10; color:#e9eef4; }
.navbar { background:#0f1318; border-bottom:1px solid #1c2330; }
.brand-grad { background:linear-gradient(135deg,#32d3ff,#6c5ce7,#ff6ec7); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.player-wrap { background:#000; border-radius:1rem; overflow:hidden; width:100%; max-width:860px; height:480px; margin:0 auto; position:relative; }
@media (max-width:900px){ .player-wrap{ height:auto; aspect-ratio:43/24; } }
video { width:100%; height:100%; display:block; background:#000; touch-action: pan-y; }
.chip { font-size:.85rem; background:#131924; border:1px solid #1f2a3a; padding:.25rem .55rem; border-radius:999px; display:inline-flex; align-items:center; gap:.35rem; }
.model-card { background:#0f1318; border:1px solid #1c2330; border-radius: 1.1rem; overflow:hidden; }
.model-card img { width:100%; height:180px; object-fit:cover; background:#000; display:block; }
.badge-row { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.suggestion { cursor:pointer; transition:transform .15s ease; }
.suggestion:hover { transform: translateY(-2px); }
a, a:hover { color:#9ad0ff; text-decoration:none; }
.form-select { background:#0f1318; color:#e9eef4; border-color:#1c2330; }
.share-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.5rem; }
.btn-share { display:flex; align-items:center; justify-content:center; gap:.4rem; }

/* --- Record dock --- */
#recDockToggle { position:fixed; right:1rem; bottom:1rem; z-index:1040; }
#recDock { position:fixed; right:1rem; bottom:4.2rem; width:min(360px, 92vw); max-height:55vh; overflow:auto; z-index:1040;
           background:#0f1318; border:1px solid #1c2330; border-radius:1rem; display:none; }
#recDock .rec-item{ border-bottom:1px solid #1c2330; padding:.6rem .8rem; }
#recDock .rec-item:last-child{ border-bottom:none; }
#recDock .progress{ height:.35rem; }

/* --- Chat modal --- */
.chat-box { background:#0f1318; border:1px solid #1c2330; border-radius:.8rem; padding:.6rem; height:300px; overflow:auto; }
.chat-msg { margin:.25rem 0; }
.chat-msg .time{ opacity:.6; font-size:.8rem; margin-left:.35rem; }
.chat-input { background:#0f1318; color:#e9eef4; border:1px solid #1c2330; }

/* --- Chat minibar (minimized state) --- */
.chat-minibar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom, 0));
  background:#0f1318;
  border:1px solid #1c2330;
  border-radius:999px;
  padding:.5rem .8rem;
  display:none;                 /* shown when minimized */
  z-index:1060;                 /* above .modal-backdrop (1050) */
  cursor:pointer;
  gap:.55rem;
  align-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.chat-minibar:hover{ transform:translateX(-50%) translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.45); }
.chat-minibar:active{ transform:translateX(-50%) translateY(0); }
.chat-minibar .dot{ width:8px; height:8px; border-radius:999px; background:#22c55e; display:inline-block; }
.chat-minibar .nick{ max-width:38vw; overflow:hidden; text-overflow:ellipsis; }
.chat-minibar .label{ opacity:.85; }

/* Optional: smaller screens – make tap target a bit larger */
@media (max-width:480px){
  .chat-minibar{ padding:.6rem .9rem; }
}

@media (pointer: coarse) { .btn { min-height:38px; } }
/* User pill */
#userPill { white-space: nowrap; }
#userBadge { vertical-align: middle; }

/* Simple “need topup” nudge */
.need-topup {
  background: #2a1313;
  border: 1px solid #732626;
  color: #ffd3d3;
  border-radius: .6rem;
  padding: .5rem .75rem;
}