/* =========================
   HOARDING WEALTH — APP SCROLLBAR
   Overlay style (ChatGPT-like)
========================= */

/* =========================
   DEFAULT (hidden)
========================= */

body,
.hw-main-content,
.et_pb_section_1_tb_header {
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent;
}

/* =========================
   SHOW ON SCROLL (via JS)
========================= */

html.hw-scrolling body,
html.hw-scrolling .hw-main-content,
html.hw-scrolling .et_pb_section_1_tb_header {
  scrollbar-color: rgba(0, 0, 0, 0.45) transparent;
}

/* =========================
   HOVER STATE (optional polish)
========================= */

body:hover,
.hw-main-content:hover,
.et_pb_section_1_tb_header:hover {
  scrollbar-color: rgba(0, 0, 0, 0.35) transparent;
}

/* =========================
   WEBKIT (Chrome / Edge / Safari)
   ⚠️ DO NOT SET WIDTH → keeps overlay behavior
========================= */

/* Default invisible */
body::-webkit-scrollbar-thumb,
.hw-main-content::-webkit-scrollbar-thumb,
.et_pb_section_1_tb_header::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}

/* Show on scroll */
html.hw-scrolling body::-webkit-scrollbar-thumb,
html.hw-scrolling .hw-main-content::-webkit-scrollbar-thumb,
html.hw-scrolling .et_pb_section_1_tb_header::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.45);
}

/* Hover (soft) */
body:hover::-webkit-scrollbar-thumb,
.hw-main-content:hover::-webkit-scrollbar-thumb,
.et_pb_section_1_tb_header:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35);
}

/* Track always invisible */
body::-webkit-scrollbar-track,
.hw-main-content::-webkit-scrollbar-track,
.et_pb_section_1_tb_header::-webkit-scrollbar-track {
  background: transparent;
}