/* ================================================================
   DAV STRAINS WORKROOM — fab-mood.css  v4.0
   Floating Action Button + Mood Sheet + Mobile fixes
   Upload to: assets/css/fab-mood.css
   ================================================================ */

/* ════════════════════════════════════════════════════════
   1. FLOATING PLAY BUTTON (FAB)
   ════════════════════════════════════════════════════════ */
#davFAB {
  position: fixed;
  right: 20px;
  bottom: calc(var(--dav-bottom-menu, 92px) + 18px);
  z-index: 9990;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, rgba(15,25,50,.96), rgba(5,14,30,.98));
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.10);
  transition: transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
#davFAB:hover { transform: scale(1.07); box-shadow: 0 12px 38px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.15); }
#davFAB.is-playing { box-shadow: 0 8px 30px rgba(102,199,255,.3), 0 0 0 1px rgba(102,199,255,.3); }
#davFAB.is-playing:hover { box-shadow: 0 12px 38px rgba(102,199,255,.4), 0 0 0 1px rgba(102,199,255,.4); }

#davFAB .fab-icon { position: absolute; width: 22px; height: 22px; }
#davFAB .fab-prog {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* Remove old sticky player on ALL screens in v4 */
/* sticky-player kept visible — strip player is at top */
/* body padding-top managed by style.css --dav-top-player var */

/* FAB on mobile — moved up from nav */
@media (max-width: 720px) {
  #davFAB {
    right: 14px;
    bottom: calc(var(--dav-bottom-menu, 76px) + 14px);
    width: 52px;
    height: 52px;
  }
}

/* ════════════════════════════════════════════════════════
   2. MOOD / GENRE SHEET
   ════════════════════════════════════════════════════════ */
#davMoodSheet {
  position: fixed;
  inset: 0;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
#davMoodSheet.open { pointer-events: auto; opacity: 1; }

.mood-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3,8,18,.72);
  backdrop-filter: blur(6px);
}

.mood-sheet-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(8,16,32,.98);
  border-top: 1px solid rgba(255,255,255,.12);
  border-radius: 24px 24px 0 0;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
  max-height: 80dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
#davMoodSheet.open .mood-sheet-panel { transform: translateY(0); }

.mood-sheet-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,.22);
  border-radius: 99px;
  margin: 14px auto 18px;
}

.mood-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
  text-align: center;
}

.mood-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding-bottom: 8px;
}

.mood-pill-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 14px 8px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: var(--mood-color, rgba(255,255,255,.06));
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.mood-pill-btn:active { transform: scale(.94); }
.mood-pill-btn.active {
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}
.mood-pill-icon { font-size: 22px; line-height: 1; }
.mood-pill-label { font-size: 11px; font-weight: 600; text-align: center; line-height: 1.3; }
.mood-pill-count {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 9px; font-weight: 700;
  background: rgba(255,255,255,.18);
  padding: 1px 5px; border-radius: 99px;
  color: rgba(255,255,255,.72);
}

.mood-sheet-note {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12px; color: rgba(255,255,255,.5); text-align: center;
}
.mood-sheet-note a { color: var(--gold, #f0c46c); }

/* ════════════════════════════════════════════════════════
   3. READER PANEL — FIX CHAPTER CUTOFF
   ════════════════════════════════════════════════════════ */
.reader-panel {
  /* Remove any height/max-height constraints that cut off content */
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}
.reader-panel p,
.reader-panel div,
.dav-preview-zone,
.dav-content-zone {
  overflow: visible !important;
  max-height: none !important;
}
/* Ensure reveal animation doesn't leave content hidden */
.reader-panel .reveal,
.reader-panel .reveal.visible,
.dav-preview-zone .reveal,
.dav-content-zone .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ════════════════════════════════════════════════════════
   4. HIDE DOWNLOAD BUTTONS ON NON-STORE PAGES
   ════════════════════════════════════════════════════════ */
/* JS adds .is-store to body on store/WC pages */
body:not(.dav-is-store) .tl-action--dl { display: none !important; }

/* ════════════════════════════════════════════════════════
   5. BOTTOM NAV — SVG ICONS
   ════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  .bottom-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(255,255,255,.65);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 8px 0;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav a svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
  .bottom-nav a strong { display: none; } /* hide old Unicode icons */
  .bottom-nav a[aria-current="page"] { color: #66c7ff; }
  .bottom-nav a[aria-current="page"] svg { stroke: #66c7ff; }
  .bottom-nav {
    height: auto;
    min-height: 60px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ════════════════════════════════════════════════════════
   6. PMPRO TABLE HIDE
   ════════════════════════════════════════════════════════ */
.pmpro_levels_table,
table.pmpro_levels,
.pmpro_level_cost_text,
#pmpro_levels_table {
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   7. MOBILE SAFE AREA + BODY PADDING
   ════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :root { --dav-bottom-menu: 60px; }
  body {
    padding-top: var(--dav-top-player, 94px) !important;
    padding-bottom: calc(var(--dav-bottom-menu) + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Cookie banner above bottom nav */
  .cookie-banner {
    bottom: calc(var(--dav-bottom-menu) + env(safe-area-inset-bottom, 0px) + 10px) !important;
    left: 10px; right: 10px;
  }
  /* WhatsApp float (still in footer on mobile — this is in footer now) */
  .whatsapp-float { display: none !important; }
  /* WooCommerce sidebar hidden on mobile */
  .woocommerce-page .widget-area,
  .woocommerce-page aside.widget-area { display: none !important; }
}

/* ════════════════════════════════════════════════════════
   8. READING MODE — BODY CLASSES
   ════════════════════════════════════════════════════════ */
body.reader-mode-sepia .reader-panel {
  background: #f5ead4 !important;
  color: #2c1f0e !important;
}
body.reader-mode-dark .reader-panel {
  background: #111827 !important;
  color: #e2e8f0 !important;
}
body.reader-mode-dark .reader-panel h2,
body.reader-mode-dark .reader-panel h3 {
  color: #f1f5f9 !important;
}