/* Potipha - shared design system. Dark gold/rose theme, Playfair Display
   for headings, Inter for body text - matches the app's established brand. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.hidden{ display:none !important; }

:root{
  --gold:#D4AF37; --gold2:#F5D060; --rose:#E8A0BF;
  --bg:#07070E; --surface:#111118; --card:#14141F; --card2:#1A1A2A;
  --border:rgba(212,175,55,.16); --border2:rgba(212,175,55,.32);
  --text:#EDE9E3; --muted:#8A8AA0; --muted2:#4A4A5E;
  --green:#6DD98C; --red:#FF7070; --blue:#7EC8E3;
  --radius:14px;
}

html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter',-apple-system,sans-serif;
  min-height:100vh;
  font-size:15px; line-height:1.5;
  overflow-x:hidden; /* safety net: no single row (see .post-actions) should
    ever be able to force the whole page wider than the viewport again */
}
h1,h2,h3,.brand{ font-family:'Playfair Display',Georgia,serif; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button, input, textarea, select{ font-family:inherit; font-size:inherit; color:inherit; }
button{ cursor:pointer; }

/* ---------- layout ---------- */
.container{ max-width:640px; margin:0 auto; padding:0 16px 60px; }
.container-wide{ max-width:960px; margin:0 auto; padding:0 16px 60px; }

nav.topnav{
  position:sticky; top:0; z-index:100;
  background:rgba(7,7,14,.92); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 18px; height:58px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.2rem; flex-shrink:0;
  background:linear-gradient(120deg,var(--gold),var(--gold2));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.brand img{ width:32px; height:32px; border-radius:9px; }
.nav-links{ display:flex; align-items:center; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0; }
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{ padding:8px 12px; border-radius:8px; font-size:14px; color:var(--muted); font-weight:600; white-space:nowrap; flex-shrink:0; }
.nav-links a:hover, .nav-links a.active{ color:var(--gold); background:rgba(212,175,55,.08); }
.nav-links .badge{ background:var(--rose); color:#1a0510; font-size:10px; font-weight:800; border-radius:999px; padding:1px 6px; margin-left:4px; }

/* ---------- desktop nav overflow scroll affordance ----------
 * .nav-links has always scrolled horizontally on a narrow-ish
 * desktop/laptop window (too many links to fit), but its scrollbar is
 * deliberately hidden (scrollbar-width:none above, matches every other
 * horizontal-scroll strip in this app - .live-strip, .pymk-row, etc).
 * That's fine on a touchscreen, but left NO visible way for a
 * mouse/trackpad user to know there was more menu, or reach it - the
 * earlier items (Feed, Live) or later ones (Settings, Log out) could
 * scroll out of view with nothing on screen hinting they were still
 * there. These buttons (shown/hidden by the script in header.php, only
 * when there's actually something in that direction to scroll to) are
 * the fix. */
.nav-scroll-btn{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:var(--card2); border:1px solid var(--border2); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; line-height:1; padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.nav-scroll-btn:hover{ background:rgba(212,175,55,.16); }
.nav-scroll-btn[hidden]{ display:none; }

/* ---------- search ---------- */
.topnav-search{ display:flex; align-items:center; gap:6px; flex:1; max-width:280px; margin:0 10px; }
.topnav-search input{ width:100%; padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--text); font-size:13px; }
.topnav-search input:focus{ outline:none; border-color:var(--gold); }
.topnav-search button{ background:none; border:none; color:var(--muted); font-size:15px; cursor:pointer; flex-shrink:0; padding:4px; }
.topnav-search button:hover{ color:var(--gold); }
.search-result-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.search-result-row:last-child{ border-bottom:none; }
.search-result-row .meta{ flex:1; min-width:0; }
.search-result-row .name{ font-weight:700; }
.search-result-row .name a{ color:var(--text); }
.search-result-row .username{ color:var(--muted); font-size:13px; }
.search-result-actions{ display:flex; gap:8px; flex-shrink:0; }

/* ---------- emoji picker ---------- */
.emoji-btn{ background:none; border:none; font-size:17px; cursor:pointer; padding:6px 8px; line-height:1; border-radius:8px; flex-shrink:0; }
.emoji-btn:hover{ background:rgba(212,175,55,.1); }
.emoji-picker{
  position:absolute; z-index:200; background:var(--card); border:1px solid var(--border2);
  border-radius:12px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:grid; grid-template-columns:repeat(8, 1fr); gap:2px; width:236px;
}
.emoji-picker button{ background:none; border:none; font-size:18px; padding:5px; border-radius:6px; cursor:pointer; }
.emoji-picker button:hover{ background:rgba(212,175,55,.12); }

/* ---------- @mention autocomplete ---------- */
.mention-menu{
  position:absolute; z-index:200; background:var(--card); border:1px solid var(--border2);
  border-radius:12px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  max-height:260px; overflow-y:auto;
}
.mention-menu-item{
  display:flex; align-items:center; gap:8px; width:100%; padding:7px 8px; border-radius:8px;
  background:none; border:none; text-align:left; cursor:pointer; font-family:inherit;
}
.mention-menu-item .avatar{ width:26px; height:26px; flex-shrink:0; }
.mention-menu-name{ font-weight:600; font-size:13.5px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mention-menu-username{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:auto; padding-left:6px; }
.mention-menu-item:hover, .mention-menu-item.selected{ background:rgba(212,175,55,.12); }

/* ---------- cards / surfaces ---------- */
.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; }
.card + .card{ margin-top:14px; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 20px; border-radius:10px; border:none; font-weight:700; font-size:14px;
  transition:transform .12s ease, opacity .12s ease; }
.btn:active{ transform:scale(.97); }
.btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1200; }
.btn-gold:hover{ opacity:.92; }
.btn-ghost{ background:transparent; border:1px solid var(--border2); color:var(--text); }
.btn-ghost:hover{ background:rgba(212,175,55,.08); }
.btn-danger{ background:rgba(255,112,112,.12); color:var(--red); border:1px solid rgba(255,112,112,.3); }
.btn-block{ width:100%; }
.btn-sm{ padding:7px 14px; font-size:13px; }

/* ---------- forms ---------- */
label{ display:block; font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:700; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], input[type=number], textarea, select{
  width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:10px;
  padding:12px 14px; color:var(--text); margin-bottom:16px; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--gold); }
textarea{ resize:vertical; min-height:80px; }
.field-error{ color:var(--red); font-size:13px; margin:-10px 0 14px; }

/* ---------- alerts ---------- */
.alert{ padding:12px 16px; border-radius:10px; font-size:14px; margin-bottom:16px; }
.alert-success{ background:rgba(109,217,140,.1); border:1px solid rgba(109,217,140,.35); color:var(--green); }
.alert-error{ background:rgba(255,112,112,.1); border:1px solid rgba(255,112,112,.35); color:var(--red); }
.alert-info{ background:rgba(126,200,227,.1); border:1px solid rgba(126,200,227,.35); color:var(--blue); }

/* ---------- auth pages ---------- */
.auth-wrap{ max-width:400px; margin:60px auto; padding:0 16px; }
.auth-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:32px 28px; }
.auth-card h1{ font-size:1.8rem; margin-bottom:6px; background:linear-gradient(120deg,var(--gold),var(--gold2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.auth-sub{ color:var(--muted); font-size:13px; margin-bottom:24px; }
.auth-switch{ text-align:center; margin-top:18px; font-size:13px; color:var(--muted); }
.auth-switch a{ color:var(--gold); font-weight:700; }

/* ---------- post / feed ---------- */
.composer textarea{ margin-bottom:10px; }
.media-btn{ width:38px; height:38px; border-radius:50%; background:var(--surface); border:1.5px solid var(--border);
  font-size:17px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.media-btn:hover{ border-color:var(--gold); }
.media-chip{ display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; padding:7px 10px; margin:-4px 0 10px; font-size:12.5px; color:var(--text); }
.media-chip-remove{ background:transparent; border:none; color:var(--muted); font-size:13px; padding:2px 4px; }
.media-chip-remove:hover{ color:var(--red); }

/* ---------- "AI" suggestion chips (composer caption assist,
   smart-reply chips under a post's comment box) - see includes/ai.php ---------- */
.ai-suggestions{ display:flex; flex-wrap:wrap; gap:6px; margin:-2px 0 10px; }
.ai-chip{ background:rgba(212,175,55,.08); border:1px solid var(--border2); color:var(--text);
  border-radius:999px; padding:6px 12px; font-size:12.5px; cursor:pointer; transition:background .15s, border-color .15s; }
.ai-chip:hover{ background:rgba(212,175,55,.16); border-color:var(--gold); }
.post{ padding:16px 0; border-bottom:1px solid var(--border); }
.post:last-child{ border-bottom:none; }
.post-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.avatar{ width:42px; height:42px; border-radius:50%; object-fit:cover; background:var(--surface); border:1px solid var(--border); }
.avatar-sm{ width:30px; height:30px; }
.post-name{ font-weight:700; font-size:14px; }
.post-name a:hover{ color:var(--gold); }
.post-time{ color:var(--muted); font-size:12px; }
.post-body{ font-size:15px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.post-media{ margin-top:10px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
/* flex-wrap is load-bearing here: a post can show up to ten of these
   (like, comment, views, share, download, message, gift, boost, edit,
   delete) at once, and without wrapping they force the whole page wider
   than a phone's viewport instead of just flowing onto a second line. */
.post-actions{ display:flex; flex-wrap:wrap; gap:2px 6px; margin-top:12px; align-items:center; }
.post-actions button{ background:transparent; border:none; color:var(--muted); font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; }
.post-actions button:hover{ background:rgba(212,175,55,.08); color:var(--text); }
.post-actions button.liked{ color:var(--rose); }
.post-actions button.liked .ico{ transform:scale(1.1); }

.comments{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
.comment{ display:flex; gap:8px; margin-bottom:10px; }
.comment-bubble{ background:var(--surface); border-radius:12px; padding:8px 12px; flex:1; }
.comment-name{ font-weight:700; font-size:13px; }
.comment-body{ font-size:13.5px; }
.comment-reply{ margin-left:38px; padding-left:12px; border-left:2px solid var(--border); }
.comment-time{ font-size:10.5px; color:var(--muted); margin-top:3px; }
.comment-actions{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.comment-action-link{
  font-size:12.5px; font-weight:700; color:var(--text);
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  padding:5px 11px; border-radius:999px; line-height:1.3; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
}
.comment-action-link:hover{ color:var(--gold); border-color:var(--border2); background:rgba(212,175,55,.1); }
.comment-like-btn{
  background:rgba(255,255,255,.05); border:1px solid var(--border); color:var(--text);
  font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:999px; cursor:pointer;
}
.comment-like-btn .ico{ font-size:13px; }
.comment-like-btn:hover{ border-color:var(--border2); background:rgba(212,175,55,.1); color:var(--gold); }
.comment-like-btn.liked{ color:var(--rose); border-color:rgba(232,160,191,.4); background:rgba(232,160,191,.08); }
.comment-like-btn.liked .ico{ transform:scale(1.1); }
.comment-form{ display:flex; gap:8px; margin-top:10px; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:8px; }
.comment-form input{ margin-bottom:0; flex:1; background:transparent; border:none; padding:6px 4px; }
.comment-form input:focus{ outline:none; }

/* ---------- profile ---------- */
.profile-header{ display:flex; align-items:center; gap:18px; padding:24px 0; }
.profile-header .avatar{ width:84px; height:84px; }
.profile-stats{ display:flex; gap:20px; margin-top:8px; font-size:13px; color:var(--muted); }
.profile-stats b{ color:var(--text); }

/* ---------- stat tiles / wallet ---------- */
.stat-row{ display:flex; gap:12px; flex-wrap:wrap; }
.stat-tile{ flex:1; min-width:130px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
.stat-tile .v{ font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:800; color:var(--gold); }
.stat-tile .k{ font-size:12px; color:var(--muted); margin-top:2px; }

.amount-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.amount-btn{ background:var(--surface); border:1.5px solid var(--border); border-radius:10px; padding:14px 8px; text-align:center; font-weight:700; }
.amount-btn:hover, .amount-btn.selected{ border-color:var(--gold); color:var(--gold); }

/* ---------- messages / thread ---------- */
.msg-thread{ display:flex; flex-direction:column; gap:12px; max-height:60vh; overflow-y:auto; padding-bottom:4px; }
.msg-row{ display:flex; flex-direction:column; max-width:75%; }
.msg-row.msg-mine{ align-self:flex-end; align-items:flex-end; }
.msg-row.msg-theirs{ align-self:flex-start; align-items:flex-start; }
.msg-bubble{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:9px 13px; font-size:14px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.msg-mine .msg-bubble{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1200; border:none; }
.msg-time{ font-size:11px; color:var(--muted); margin-top:3px; }
.msg-action-link{ margin-left:6px; opacity:.7; text-decoration:none; }
.msg-action-link:hover{ opacity:1; }
.msg-form{ display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.msg-form input{ margin-bottom:0; flex:1; }
/* Inline edit textareas swapped in over post-body / comment-body / msg-bubble
   by editPost()/editComment()/editMessage() in app.js - kept minimal so they
   inherit the surrounding element's width rather than fighting it. */
.inline-edit-box{ width:100%; box-sizing:border-box; font:inherit; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:8px 10px; resize:vertical; margin-bottom:6px; }
.inline-edit-actions{ display:flex; gap:8px; }

/* ---------- gift catalog ---------- */
.gift-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.pill{ padding:7px 16px; border-radius:999px; font-size:12.5px; font-weight:700; border:1px solid var(--border2);
  background:transparent; color:var(--muted); }
.pill:hover, .pill.active{ background:var(--gold); border-color:var(--gold); color:#1a1200; }
.gift-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:14px; }
.gift-card{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px 14px 14px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.gift-card:hover{ border-color:var(--border2); }
.gift-emoji{ font-size:2.4rem; line-height:1; }
.gift-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:.95rem; }
.gift-desc{ font-size:11px; color:var(--muted); line-height:1.4; min-height:28px; }
.gift-price{ font-weight:800; color:var(--gold); font-size:1rem; margin:2px 0 6px; }
.gift-card form{ width:100%; }
.gift-badge{ position:absolute; top:10px; right:10px; font-size:8.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; padding:3px 7px; border-radius:6px; }
.gift-badge-popular{ background:rgba(212,175,55,.18); color:var(--gold); }
.gift-badge-luxury{ background:rgba(232,160,191,.18); color:var(--rose); }
.gift-badge-trending{ background:rgba(109,217,140,.15); color:var(--green); }
.gift-badge-rare{ background:rgba(126,200,227,.18); color:var(--blue); }

/* ---------- live streaming ---------- */
.live-strip{ display:flex; gap:14px; overflow-x:auto; padding:14px 2px 18px; -webkit-overflow-scrolling:touch; }
.live-strip-item{ display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; width:64px; text-align:center; }
.live-strip-item{ position:relative; }
.live-strip-item .avatar{ width:56px; height:56px; border:2px solid var(--red); padding:2px; }
.live-strip-dot{ position:absolute; top:0; right:8px; width:9px; height:9px; border-radius:50%; background:var(--red); border:2px solid var(--bg); }
.live-strip-name{ font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:64px; }

.gift-promo-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.boost-promo-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }

/* ---------- verified badge ($10k+ lifetime gifted - profile.php, render_post()) ---------- */
.verified-badge{
  display:inline-flex; align-items:center; justify-content:center; margin-left:4px;
  width:16px; height:16px; border-radius:50%; background:var(--blue,#7EC8E3);
  color:#08202b; font-size:10px; font-weight:900; vertical-align:middle; line-height:1;
}

/* ---------- share menu (render_post() in includes/render.php) ---------- */
.share-wrap{ position:relative; display:inline-block; }
.share-menu{
  position:absolute; top:100%; left:0; z-index:150; margin-top:4px;
  background:var(--card); border:1px solid var(--border2); border-radius:10px;
  padding:6px; min-width:160px; box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.share-menu a{ padding:8px 10px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--text); }
.share-menu a:hover{ background:rgba(212,175,55,.1); color:var(--gold); }

/* ---------- @mention links (render_body() in includes/render.php) ---------- */
.mention-link{ color:var(--gold); font-weight:600; text-decoration:none; }
.mention-link:hover{ text-decoration:underline; }

/* ---------- boost badge (render_post(), boost_post.php) ---------- */
.boost-badge{
  display:inline-flex; align-items:center; gap:3px; margin-left:6px; font-size:10.5px; font-weight:800;
  color:#1a1200; background:linear-gradient(135deg,var(--gold),var(--gold2));
  padding:2px 8px; border-radius:999px; vertical-align:middle; letter-spacing:.2px;
}

/* ---------- "people you may know" widget (index.php) ---------- */
.pymk-card{ margin-bottom:16px; }
.pymk-title{ font-weight:700; margin-bottom:12px; }
.pymk-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.pymk-item{
  flex:0 0 140px; background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.pymk-item .avatar{ width:52px; height:52px; margin-bottom:2px; }
.pymk-name{ font-weight:700; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.pymk-username{ font-size:11.5px; color:var(--muted); }
.pymk-reason{ font-size:10.5px; color:var(--muted); min-height:26px; line-height:1.3; }
.pymk-item .btn{ margin-top:4px; }

/* ---------- "suggested for you" cards interspersed in the feed
   (index.php) - the same reason/follow markup as .pymk-item above (reuses
   followFromPymk() in app.js to actually follow + dismiss), but laid out
   as a full-width row matching .post's rhythm instead of the horizontal-
   scroll widget's fixed-width tile, since these live directly in the
   feed between posts rather than in their own strip. Overrides the
   .pymk-item rules it also carries (for the JS hide-on-follow hook) that
   don't make sense at full width. ---------- */
.suggested-card{
  flex:none; width:auto; display:block; text-align:left;
  padding:14px 0; border-bottom:1px solid var(--border);
  background:var(--surface); margin:0 -18px; padding-left:18px; padding-right:18px;
}
.suggested-card-label{ font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--gold); margin-bottom:8px; }
.suggested-card-body{ display:flex; align-items:center; gap:12px; }
.suggested-card-body .avatar{ width:48px; height:48px; flex-shrink:0; }
.suggested-card-info{ flex:1; min-width:0; }
.suggested-card-info .pymk-name{ white-space:normal; }
.suggested-card-body .btn{ flex-shrink:0; }

/* ---------- video "up next" suggestions (inline in the feed after you
   press play, and the persistent list on watch.php) - see
   suggested_videos() in includes/functions.php and handleVideoPlay() /
   initVideoSuggestions() in app.js. ---------- */
.up-next-inline{ margin-top:2px; display:flex; flex-direction:column; gap:8px; padding-top:10px; }
.up-next-inline .up-next-label{ font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--muted); }
.up-next-card{
  display:flex; gap:10px; align-items:center; padding:8px; border-radius:10px;
  border:1px solid var(--border); background:var(--surface); text-decoration:none; color:inherit;
}
.up-next-card:hover{ border-color:var(--gold); }
.up-next-thumb{ width:88px; height:56px; object-fit:cover; border-radius:6px; background:#000; flex-shrink:0; }
.up-next-info{ min-width:0; flex:1; }
.up-next-caption{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.up-next-meta{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-top:4px; }
.up-next-meta .avatar{ width:18px; height:18px; }
.up-next-card-title{ font-weight:700; margin-bottom:10px; }

/* ---------- gift shop hero (gifts.php) ----------
 * Styled after a reference mockup supplied for this page, adapted to a
 * white-and-gold backdrop (by request) rather than the rest of the app's
 * dark theme - .gift-shop-page wraps the hero/filters/grid in a light
 * panel with its own text-color variables so it reads correctly against
 * a white background, while the surrounding chrome (top nav, mobile tab
 * bar) stays the app's normal dark theme for consistency. */
.gift-shop-page{
  --gs-text:#1A1200; --gs-muted:#8A7A4A; --gs-border:rgba(212,175,55,.35);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9E9 100%);
  border-radius:24px; padding:8px 8px 28px; margin-bottom:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}

.gift-shop-hero{ position:relative; z-index:1; text-align:center; padding:40px 16px 16px; }
.gift-shop-eyebrow{ font-size:11px; letter-spacing:4px; text-transform:uppercase; color:#B8860B; margin-bottom:14px; font-weight:700; }
.gift-shop-title{
  font-family:'Playfair Display',Georgia,serif; font-size:clamp(2rem, 6vw, 3.6rem); font-weight:900; line-height:1.1;
  background:linear-gradient(135deg,#B8860B 0%,#D4AF37 45%,#F5D060 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.gift-shop-subtitle{ margin-top:12px; font-size:1rem; color:var(--gs-muted); font-weight:400; }

.gift-shop-filters{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:16px 16px 0; }
.gift-shop-filters .pill{ color:var(--gs-muted); border-color:var(--gs-border); background:rgba(212,175,55,.06); }
.gift-shop-filters .pill:hover, .gift-shop-filters .pill.active{ background:linear-gradient(135deg,#D4AF37,#F5D060); border-color:#D4AF37; color:#1A1200; }

.gift-shop-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px;
  padding:28px 20px 8px; max-width:1280px; margin:0 auto;
}
.gift-shop-card{
  background:#FFFFFF; border:1px solid var(--gs-border); border-radius:20px;
  padding:26px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:10px;
  position:relative; overflow:hidden; text-align:center;
  box-shadow:0 2px 10px rgba(184,134,11,.08);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s;
  animation:gift-card-in .5s ease both;
}
.gift-shop-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(212,175,55,.1) 0%, transparent 70%);
  pointer-events:none;
}
.gift-shop-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 18px 40px rgba(184,134,11,.2); border-color:#D4AF37; }
.gift-shop-card:hover .gift-shop-emoji{ transform:scale(1.15) rotate(-3deg); }
@keyframes gift-card-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

.gift-shop-emoji{ font-size:2.6rem; line-height:1; transition:transform .3s ease; filter:drop-shadow(0 4px 10px rgba(212,175,55,.35)); }
.gift-shop-name{ font-family:'Playfair Display',Georgia,serif; font-size:1rem; font-weight:700; color:var(--gs-text); }
.gift-shop-desc{ font-size:11.5px; color:var(--gs-muted); line-height:1.5; min-height:2.2em; }
.gift-shop-price-row{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:2px; }
.gift-shop-price{ font-size:1.05rem; font-weight:800; color:#B8860B; letter-spacing:-.5px; }
.gift-shop-card .btn{ width:100%; margin-top:2px; }
.gift-shop-card .btn-ghost{ background:rgba(212,175,55,.08); border:1px solid var(--gs-border); color:#8A6D00; }
.gift-shop-card .btn-ghost:hover{ background:rgba(212,175,55,.16); }

.gift-toast{
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(80px);
  background:linear-gradient(135deg,#D4AF37,#F5D060); color:#1A1200; font-weight:700; font-size:14px;
  padding:14px 28px; border-radius:999px; box-shadow:0 8px 32px rgba(212,175,55,.4);
  z-index:9999; transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s; opacity:0; pointer-events:none;
}
.gift-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }

/* ---------- generic toast (showToast() in app.js) ----------
 * Replaces the browser's native alert() dialog everywhere in the app -
 * alert() blocks the whole page and shows the site's domain/origin in
 * its own chrome (e.g. "127.0.0.1:8010 says…"), which reads like a
 * browser warning rather than part of the app. This is the same
 * bottom-of-screen pill idea as .gift-toast above, just neutral-styled
 * and reusable for any message instead of gold/gift-specific. */
.toast{
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(80px);
  background:var(--card); color:var(--text); font-weight:600; font-size:14px;
  padding:13px 24px; border-radius:999px; border:1px solid var(--border2);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  z-index:9999; transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s; opacity:0; pointer-events:none;
  max-width:calc(100vw - 32px); text-align:center;
}
.toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }
.toast.toast-error{ border-color:rgba(255,112,112,.4); color:var(--red); }

@media (max-width:500px){
  .gift-shop-grid{ grid-template-columns:repeat(2,1fr); gap:12px; padding:20px 12px 8px; }
  .gift-shop-emoji{ font-size:2.1rem; }
}

/* ---------- celebrations ---------- */
.celebration-strip{ margin-bottom:16px; }
.celebration-strip-title{ font-weight:700; margin-bottom:10px; }
.celebration-strip-row{ display:flex; gap:16px; overflow-x:auto; padding:2px 2px 6px; -webkit-overflow-scrolling:touch; }
.celebration-item{ display:flex; flex-direction:column; align-items:center; gap:6px; flex-shrink:0; width:96px; text-align:center; }
.celebration-item .avatar{ width:56px; height:56px; border:2px solid var(--gold); padding:2px; }
.celebration-name{ font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:96px; }
.celebration-type{ font-size:11px; color:var(--muted); }
.event-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.event-row:last-child{ border-bottom:none; }
.live-video-wrap{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; }
.live-video-wrap video{ width:100%; height:100%; object-fit:cover; background:#000; }
.live-video-badge{ position:absolute; left:10px; bottom:10px; background:rgba(7,7,14,.75); backdrop-filter:blur(6px);
  color:var(--text); font-size:12px; font-weight:700; padding:5px 10px; border-radius:999px; }
.live-chat-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow-y:auto; margin-bottom:10px; font-size:13.5px; }
.live-chat-msg{ line-height:1.5; word-break:break-word; }
.live-chat-msg b{ color:var(--gold); }

/* ---------- in-stream mini-games (live_broadcast.php / live_view.php,
   assets/js/live.js's LiveGames module) ---------- */
.live-game-question{ font-weight:700; margin-bottom:10px; }
.live-game-options{ display:flex; flex-direction:column; gap:8px; }
.live-game-opt-btn{ width:100%; justify-content:flex-start; text-align:left; }
.live-game-locked{ background:rgba(212,175,55,.08); border:1px solid var(--border2); border-radius:10px;
  padding:12px; font-size:13.5px; margin-bottom:10px; }
.live-game-results{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.live-game-bar-row{ font-size:13px; }
.live-game-bar-label{ margin-bottom:3px; font-weight:600; }
.live-game-bar-track{ background:var(--surface); border:1px solid var(--border); border-radius:999px; height:10px; overflow:hidden; }
.live-game-bar-fill{ background:linear-gradient(90deg,var(--gold),var(--gold2)); height:100%; transition:width .3s ease; }
.live-game-bar-pct{ color:var(--muted); font-size:12px; margin-top:2px; }
.live-game-bar-row.correct .live-game-bar-label{ color:var(--green); }
.live-game-bar-row.mine .live-game-bar-fill{ background:linear-gradient(90deg,var(--blue),var(--gold)); }
.live-game-winner{ margin-top:6px; font-weight:600; color:var(--gold); }
.live-game-form{ display:flex; flex-direction:column; gap:0; margin-top:14px; padding-top:14px; border-top:1px solid var(--border); }
.live-game-form label{ margin-top:10px; }
.live-game-form button{ margin-top:14px; }

/* ---------- notifications / list rows ---------- */
.list-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
.list-row:last-child{ border-bottom:none; }
.list-row .meta{ flex:1; }
.list-row .unread-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); }
.gift-log-emoji{ width:40px; height:40px; border-radius:10px; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }

/* A generic placeholder in place of a real avatar image, for an
   anonymous gift-sender (see api/post_gifters.php, notifications.php,
   earnings.php) - same box/circle sizing as .avatar so it drops into any
   spot a real <img class="avatar"> would, just with a masked-face emoji
   centered instead of a photo. */
.avatar-anon{ display:flex; align-items:center; justify-content:center; font-size:20px; }

/* ---------- clickable like/gift counts on a post (includes/render.php)
   open the "who" behind the number - see openLikersModal()/
   openGiftersModal() in assets/js/app.js, and the shared #list-modal-*
   markup in includes/footer.php. ---------- */
.count-link{ cursor:pointer; text-decoration:underline; text-decoration-color:transparent; transition:text-decoration-color .15s; }
.count-link:hover{ text-decoration-color:currentColor; }
.gift-indicator{ padding:7px 12px; color:var(--muted); font-weight:600; font-size:13px; background:none; border:none; cursor:pointer; }
.gift-indicator:hover{ color:var(--gold); }

.list-modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:2000;
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:600px){
  .list-modal-overlay{ align-items:center; }
}
.list-modal{
  background:var(--card); border:1px solid var(--border); border-radius:16px 16px 0 0;
  width:100%; max-width:440px; max-height:75vh; display:flex; flex-direction:column;
  overflow:hidden;
}
@media (min-width:600px){
  .list-modal{ border-radius:16px; }
}
.list-modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:16px 18px;
  border-bottom:1px solid var(--border); font-weight:700;
}
.list-modal-close{ background:none; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:4px 8px; }
.list-modal-close:hover{ color:var(--text); }
.list-modal-body{ overflow-y:auto; padding:6px 18px 18px; }
.list-modal-body .list-row{ text-decoration:none; color:inherit; }

/* ---------- wider variant for the in-stream gift grid ----------
 * openLiveGiftModal() (assets/js/app.js) adds this to the same shared
 * .list-modal the likers/gifters lists use - the gift grid (.gift-grid,
 * defined above) needs real width to lay out more than one card per row,
 * unlike those simple single-column lists. Stripped again in
 * closeListModal() so it doesn't leak into the next likers/gifters modal. */
.list-modal-wide{ max-width:640px; max-height:85vh; }

/* ---------- TikTok-style live gift celebration banners ----------
 * Rendered by pollGiftCelebrations()/renderGiftCelebration() in
 * assets/js/live.js, one .live-gift-celebration-item per new gift, stacked
 * bottom-up over the live video (.live-video-wrap is already
 * position:relative). Same slide-in/fade-out shape as .gift-toast above,
 * just built to stack several at once instead of replacing a single pill. */
.live-gift-celebration-box{
  position:absolute; left:10px; right:10px; bottom:44px;
  display:flex; flex-direction:column-reverse; gap:6px;
  pointer-events:none; z-index:5;
}
.live-gift-celebration-item{
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(135deg, rgba(212,175,55,.92), rgba(245,208,96,.92));
  color:#1A1200; font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.35);
  max-width:100%; opacity:0; transform:translateY(16px) scale(.96);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
.live-gift-celebration-item.show{ opacity:1; transform:translateY(0) scale(1); }
.live-gift-celebration-emoji{ font-size:18px; line-height:1; flex-shrink:0; }
.live-gift-celebration-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.confirm-modal{ max-width:360px; }
.confirm-modal-body{ padding:22px 20px 6px; font-weight:600; line-height:1.4; }
.confirm-modal-actions{ display:flex; gap:10px; justify-content:flex-end; padding:16px 20px 20px; }
.confirm-modal-actions .btn{ padding:9px 16px; }

/* ---------- misc ---------- */
.muted{ color:var(--muted); }
.tag{ display:inline-block; font-size:11px; padding:2px 9px; border-radius:999px; background:rgba(212,175,55,.12); color:var(--gold); }
.empty-state{ text-align:center; padding:50px 20px; color:var(--muted); }
.page-title{ font-size:1.5rem; margin:24px 0 16px; }
.divider{ border:none; border-top:1px solid var(--border); margin:18px 0; }

/* ---------- mobile bottom taskbar ---------- */
.mobile-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:rgba(7,7,14,.96); backdrop-filter:blur(16px);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  align-items:stretch; justify-content:space-around;
}
.mobile-tabbar a, .mobile-tabbar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:6px 2px; border-radius:10px; color:var(--muted);
  background:none; border:none; font-family:inherit; cursor:pointer;
}
.mobile-tabbar a.active, .mobile-tabbar button.active{ color:var(--gold); }
.mobile-tab-icon{ position:relative; font-size:20px; line-height:1; }
.mobile-tab-label{ font-size:10px; font-weight:700; }
/* Was 8px - easy to miss at a glance on a real phone screen, which is
   exactly the complaint (mobile-tab-dot is the unread indicator on the
   Live/Messages/Alerts icons in the bottom tab bar - see header.php).
   Bumped up, given a bit of glow so it doesn't just blend into the icon
   next to it, and a slow pulse so a NEW unread item actually catches the
   eye instead of relying on the user noticing a static dot. */
.mobile-tab-dot{
  position:absolute; top:-4px; right:-8px; width:13px; height:13px;
  border-radius:50%; background:var(--red); border:2px solid var(--bg);
  box-shadow:0 0 0 3px rgba(255,112,112,.35);
  animation:mobile-tab-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes mobile-tab-dot-pulse{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 3px rgba(255,112,112,.35); }
  50%{ transform:scale(1.2); box-shadow:0 0 0 5px rgba(255,112,112,.18); }
}

/* the "More" panel that pops up above the tab bar - same fixed-bottom-sheet
 * idea, just for the pages that don't fit as their own icon (Earnings,
 * Games, Settings, Log out). */
.mobile-more-menu{
  display:flex; flex-direction:column; gap:2px;
  position:fixed; left:10px; right:10px; bottom:calc(70px + env(safe-area-inset-bottom));
  z-index:101; background:var(--card); border:1px solid var(--border2);
  border-radius:14px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.mobile-more-menu a{
  display:block; padding:12px 14px; border-radius:10px;
  color:var(--text); font-weight:600; font-size:14px;
}
.mobile-more-menu a:hover, .mobile-more-menu a:active{ background:rgba(212,175,55,.1); color:var(--gold); }

@media (max-width:600px){
  /* Clear the fixed bottom tab bar (see .mobile-tabbar) instead of
     sitting underneath/overlapping it. */
  .toast, .gift-toast{ bottom:calc(76px + env(safe-area-inset-bottom)); }
  .container, .container-wide{ padding:0 12px 60px; }
  .profile-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .amount-grid{ grid-template-columns:repeat(2,1fr); }
  nav.topnav{ padding:0 10px; }
  .brand{ font-size:1rem; gap:6px; }
  .brand img{ width:26px; height:26px; }
  .nav-links, .nav-scroll-btn{ display:none; }
  .msg-row{ max-width:88%; }
  .mobile-tabbar{ display:flex; }
  body{ padding-bottom:64px; }
  .topnav-search{ margin:0 8px; max-width:none; }
}

@media (max-width:400px){
  .brand span, .brand{ font-size:.92rem; }
  .brand{ gap:4px; }
  .topnav-search{ margin:0 6px; }
  .topnav-search input{ padding:7px 10px; font-size:12px; }
}