/* ============================================================
   PAIYPER THEME — CSS Custom Properties + Light/Dark Toggle
   Dark mode is default (existing black/green scheme).
   Light mode (html.light) uses the Paiyper blue palette.
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   GLOBAL MOBILE-SAFE BASE
   ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
}

/* Prevent any element from breaking out of viewport */
img, video, iframe, table {
  max-width: 100%;
}

/* Responsive utility classes */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .stack-mobile { flex-direction: column !important; }
  .full-mobile  { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .text-sm-mobile { font-size: 12px !important; }
  .p-sm-mobile { padding: 10px 12px !important; }
}

/* ──────────────────────────────────────────────────────────
   DARK MODE — BSV Gold palette
   ────────────────────────────────────────────────────────── */
:root {
  --p-bg:            #000000;
  --p-bg-2:          #111111;
  --p-bg-3:          #1a1a1a;
  --p-bg-4:          #050503;
  --p-bg-hover:      #1a1200;   /* dark gold hover */
  --p-bg-disabled:   #374151;
  --p-text:          #EAB300;   /* BSV gold */
  --p-text-2:        #F5CC33;   /* lighter gold */
  --p-text-bright:   #FFD740;   /* bright gold */
  --p-text-muted:    rgba(234,179,0,0.5);
  --p-text-on-accent:#000000;
  --p-accent:        #C89800;   /* medium gold — button backgrounds */
  --p-accent-2:      #D4A800;   /* button hover */
  --p-accent-3:      #EAB300;   /* main BSV gold */
  --p-border:        rgba(234,179,0,0.22);
  --p-border-2:      rgba(234,179,0,0.5);
  --p-border-soft:   #1a1a1a;
  --p-input-bg:      #111111;
  --p-link:          #F5CC33;
  --p-warn:          #eab308;
  --p-danger:        #dc2626;
  --p-stop:          #d32f2f;
}

/* ──────────────────────────────────────────────────────────
   DARK MODE — Tailwind green → BSV gold overrides
   ────────────────────────────────────────────────────────── */
html:not(.light) .text-green-400 { color: #EAB300 !important; }
html:not(.light) .text-green-300 { color: #F5CC33 !important; }
html:not(.light) .text-green-500 { color: #C89800 !important; }
html:not(.light) .text-green-600 { color: #A07800 !important; }
html:not(.light) .text-green-100 { color: #FFF3CC !important; }
html:not(.light) .bg-green-600   { background-color: #C89800 !important; color: #000 !important; }
html:not(.light) .bg-green-500   { background-color: #D4A800 !important; color: #000 !important; }
html:not(.light) .bg-green-700   { background-color: #A07800 !important; color: #000 !important; }
html:not(.light) .bg-green-900   { background-color: rgba(234,179,0,0.1) !important; }
html:not(.light) .hover\:bg-green-500:hover { background-color: #D4A800 !important; color: #000 !important; }
html:not(.light) .hover\:bg-green-600:hover { background-color: #C89800 !important; color: #000 !important; }
html:not(.light) .border-green-400 { border-color: #EAB300 !important; }
html:not(.light) .border-green-600 { border-color: #C89800 !important; }
html:not(.light) .border-green-700 { border-color: #A07800 !important; }
html:not(.light) .border-green-800 { border-color: rgba(234,179,0,0.3) !important; }
html:not(.light) .border-green-900 { border-color: rgba(234,179,0,0.15) !important; }
html:not(.light) .hover\:text-green-300:hover { color: #F5CC33 !important; }
html:not(.light) .hover\:text-green-200:hover { color: #FFD740 !important; }
html:not(.light) .hover\:border-green-600:hover { border-color: #C89800 !important; }
html:not(.light) .hover\:border-green-500:hover { border-color: #D4A800 !important; }
html:not(.light) .text-cyan-400  { color: #F5CC33 !important; }
html:not(.light) .text-cyan-300  { color: #FFD740 !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Paiyper Blue Palette
   ────────────────────────────────────────────────────────── */
html.light {
  --paiyper-blue-light:   #7DD8F8;
  --paiyper-blue-mid:     #29A8E0;
  --paiyper-blue-core:    #1A7DC4;
  --paiyper-blue-deep:    #1155A6;
  --paiyper-blue-darkest: #0D3D7A;

  --p-bg:            #FFFFFF;
  --p-bg-2:          #F4F8FC;
  --p-bg-3:          #E8F3FA;
  --p-bg-4:          #F0F7FD;
  --p-bg-hover:      rgba(41,168,224,0.10);
  --p-bg-disabled:   #A8CFEA;
  --p-text:          #0D2B4A;
  --p-text-2:        #1A7DC4;
  --p-text-bright:   #29A8E0;
  --p-text-muted:    #7A9BB5;
  --p-text-on-accent:#FFFFFF;
  --p-accent:        #1A7DC4;
  --p-accent-2:      #29A8E0;
  --p-accent-3:      #7DD8F8;
  --p-border:        #D0E8F5;
  --p-border-2:      #A8CFEA;
  --p-border-soft:   #E8F3FA;
  --p-input-bg:      #F0F7FD;
  --p-link:          #1A7DC4;
  --p-warn:          #8A6200;
  --p-danger:        #c0392b;
  --p-stop:          #c0392b;
}

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Global base
   ────────────────────────────────────────────────────────── */
html.light body {
  background-color: var(--p-bg) !important;
  color: var(--p-text) !important;
}

html.light a { color: var(--p-link) !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Tailwind background overrides
   ────────────────────────────────────────────────────────── */
html.light .bg-black    { background-color: var(--p-bg)   !important; }
html.light .bg-gray-900 { background-color: var(--p-bg-2) !important; }
html.light .bg-gray-800 { background-color: var(--p-bg-3) !important; }
html.light .bg-gray-700 { background-color: #dde8f3       !important; }
html.light .bg-gray-600 { background-color: #c5d8ea       !important; }

html.light .hover\:bg-gray-700:hover { background-color: #dde8f3       !important; }
html.light .hover\:bg-gray-800:hover { background-color: var(--p-bg-3) !important; }

/* Green → Blue accent backgrounds */
html.light .bg-green-600 { background-color: var(--p-accent)  !important; color: var(--p-text-on-accent) !important; }
html.light .bg-green-500 { background-color: var(--p-accent-2) !important; color: var(--p-text-on-accent) !important; }
html.light .bg-green-700 { background-color: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .bg-green-900 { background-color: rgba(17,85,166,0.15) !important; }

html.light .hover\:bg-green-500:hover { background-color: var(--p-accent-2) !important; color: var(--p-text-on-accent) !important; }
html.light .hover\:bg-green-600:hover { background-color: var(--p-accent)   !important; }

/* Blue buttons — remap to brand blue */
html.light .bg-blue-500 { background-color: var(--p-accent)   !important; }
html.light .bg-blue-600 { background-color: var(--p-text-2)   !important; }
html.light .bg-blue-800 { background-color: var(--paiyper-blue-deep, #1155A6) !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Tailwind text overrides
   ────────────────────────────────────────────────────────── */
html.light .text-green-400 { color: var(--p-text)    !important; }
html.light .text-green-300 { color: var(--p-text-2)  !important; }
html.light .text-green-500 { color: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .text-green-600 { color: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .text-green-100 { color: var(--p-text)    !important; }
html.light .text-cyan-400  { color: var(--p-accent)  !important; }
html.light .text-cyan-300  { color: var(--p-accent-2) !important; }
html.light .text-yellow-400 { color: #8A6200         !important; }

html.light .hover\:text-green-300:hover { color: var(--p-accent-2) !important; }
html.light .hover\:text-green-200:hover { color: var(--p-accent-2) !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Tailwind border overrides
   ────────────────────────────────────────────────────────── */
html.light .border-green-400 { border-color: var(--p-accent)   !important; }
html.light .border-green-600 { border-color: var(--p-border-2) !important; }
html.light .border-green-700 { border-color: var(--p-border-2) !important; }
html.light .border-green-800 { border-color: var(--p-border)   !important; }
html.light .border-green-900 { border-color: var(--p-border)   !important; }
html.light .border-gray-600  { border-color: var(--p-border-soft) !important; }
html.light .border-gray-700  { border-color: var(--p-border)   !important; }
html.light .border-gray-800  { border-color: var(--p-border-soft) !important; }
html.light .border-blue-400  { border-color: var(--p-accent)   !important; }

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Form inputs (global)
   ────────────────────────────────────────────────────────── */
html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="number"],
html.light input[type="search"],
html.light input[type="file"],
html.light select,
html.light textarea {
  background-color: var(--p-input-bg) !important;
  color: var(--p-text) !important;
  border-color: var(--p-border-2) !important;
}
html.light input::placeholder,
html.light textarea::placeholder {
  color: var(--p-text-muted) !important;
}
html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: var(--p-accent) !important;
  box-shadow: 0 0 0 3px rgba(41,168,224,0.18) !important;
  background-color: var(--p-bg) !important;
}

/* ──────────────────────────────────────────────────────────
   LIGHT MODE — Custom class overrides (per page)
   ────────────────────────────────────────────────────────── */

/* paiyper-editor.ejs */
html.light .page-card    { background: var(--p-bg-2) !important; border-color: var(--p-accent) !important; }
html.light .type-tile    { background: var(--p-bg) !important; border-color: var(--p-accent) !important; color: var(--p-text) !important; }
html.light .type-tile:hover { background: var(--p-bg-3) !important; border-color: var(--p-accent-2) !important; }
html.light .page-type-badge { background: rgba(41,168,224,0.15) !important; color: var(--p-accent) !important; }
html.light .field-input  { background: var(--p-input-bg) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light .field-input:focus { border-color: var(--p-accent) !important; }
html.light .avail-cell-on  { background: rgba(41,168,224,0.20) !important; color: var(--p-accent) !important; }
html.light .avail-cell-off { background: var(--p-bg-3) !important; }

/* ai-discover.ejs + ai-publisher.ejs */
html.light .user-bubble  { background: rgba(41,168,224,0.12) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light .ai-text      { background: var(--p-bg-2) !important; border-color: var(--p-border-soft) !important; color: var(--p-text) !important; }
html.light .chip         { border-color: var(--p-accent) !important; color: var(--p-accent) !important; background: var(--p-bg) !important; }
html.light .chip:hover   { background: var(--p-bg-3) !important; }

/* ai-publisher.ejs */
html.light #previewCol   { background: var(--p-bg-2) !important; }
html.light #userInput    { background: var(--p-input-bg) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light #userInput:focus { border-color: var(--p-accent) !important; }
html.light #sendBtn      { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }
html.light #sendBtn:disabled { background: var(--p-bg-disabled) !important; }
html.light .page-pill    { background: var(--p-bg-2) !important; border-color: var(--p-border-2) !important; color: var(--p-text) !important; }
html.light .page-pill .ptype { color: var(--p-text-muted) !important; }

/* paiyper-reader.ejs */
html.light .page-row     { background: var(--p-bg-2) !important; border-color: var(--p-border) !important; color: var(--p-text) !important; }
html.light .page-row:hover { border-color: var(--p-accent-2) !important; }
html.light .price-tag    { color: var(--p-text-2) !important; }
html.light .btn-open     { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }
html.light .btn-open:hover { background: var(--p-accent-2) !important; }
html.light .btn-view     { background: var(--paiyper-blue-deep, #1155A6) !important; color: #fff !important; }
html.light .btn-view:hover { background: var(--p-accent) !important; }

/* paiyper-page.ejs */
html.light .avail-on     { background: rgba(41,168,224,0.20) !important; color: var(--p-accent) !important; }

/* text-buyer.html */
html.light #ticker::before,
html.light #ticker::after { background: var(--p-accent) !important; opacity: 0.2 !important; }
html.light .tw-pre, html.light .tw-post, html.light .tw-chunk { color: var(--p-text) !important; }
html.light .tw-orp       { color: var(--p-accent) !important; }

/* media-buyer.html + video-buyer.html (bare button selector) */
html.light #stopBtn,
html.light #stopStream,
html.light #closeBtn,
html.light #panicBtn     { background: var(--p-stop) !important; color: #fff !important; }
html.light #fullPurchaseBtn { background: var(--paiyper-blue-deep, #1155A6) !important; color: #fff !important; }
html.light #status       { color: var(--p-warn) !important; }
html.light #timer        { color: var(--p-accent) !important; }
html.light #chapters button { background: var(--p-bg-2) !important; color: var(--p-text) !important; }
html.light #purchaseSummary {
  background: rgba(41,168,224,0.08) !important;
  border-color: var(--p-accent) !important;
}
html.light #purchaseSummary h3 { color: var(--p-accent) !important; }

/* buyer-search.html */
html.light .post         { background: var(--p-bg-2) !important; border-color: var(--p-border-2) !important; box-shadow: 0 2px 8px rgba(41,168,224,0.12) !important; }
html.light .post h3      { color: var(--p-accent) !important; }
html.light .media-badge  { background: var(--p-accent) !important; color: #fff !important; }
html.light .live-badge   { background: #d32f2f !important; }
html.light .upcoming-badge { background: var(--paiyper-blue-deep, #1155A6) !important; }
html.light .rating       { color: #8A6200 !important; }
html.light .meet-details { color: var(--p-accent) !important; }
html.light .viewer-count { color: var(--p-accent-2) !important; }

/* live-buyer.html */
html.light #liveChat     { background: var(--p-bg-2) !important; border-color: var(--p-border) !important; }
html.light #liveChat div { background: var(--p-bg-3) !important; }
html.light #chatMsg      { background: var(--p-bg-2) !important; color: var(--p-text) !important; border-color: var(--p-border-2) !important; }
html.light #sendChatBtn  { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }

/* publisher.html */
html.light #liveChatPublisher     { background: var(--p-bg-2) !important; border-color: var(--p-border) !important; }
html.light #liveChatPublisher div { background: var(--p-bg-3) !important; }
html.light #publisherViewerCount  { color: var(--p-accent) !important; }
html.light #chat          { background: var(--p-bg-2) !important; }
html.light #chat .you     { background: var(--p-accent) !important; color: var(--p-text-on-accent) !important; }
html.light #chat .buyer   { background: var(--p-bg-3) !important; color: var(--p-text) !important; }

/* meet-buyer.html */
html.light #status        { color: var(--p-warn) !important; }

/* video elements */
html.light video          { border-color: var(--p-border) !important; background: var(--p-bg-3) !important; }

/* ──────────────────────────────────────────────────────────
   THEME TOGGLE BUTTON
   ────────────────────────────────────────────────────────── */
#theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--p-border-2);
  background: var(--p-bg-2);
  color: var(--p-text);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
  line-height: 1;
  user-select: none;
}
#theme-toggle:hover {
  transform: scale(1.12);
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}

/* ── QR payment address box — shared hologram style ── */
#pillAddressBox {
  color: #4ade80 !important;
  position: relative;
  overflow: hidden;
}
#pillAddressBox::after {
  content: '';
  position: absolute;
  top: -20%; left: -60%; width: 40%; height: 140%;
  background: linear-gradient(105deg, transparent 20%, rgba(74,222,128,0.5) 50%, transparent 80%);
  animation: pillAddrSweep 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pillAddrSweep { 0% { left: -60%; } 100% { left: 130%; } }