/* =========================================================
   CLASS 8 · LIGHT THEME  (body.day-mode)
   Forest Green palette — natural, bright, clear
   ========================================================= */

body.day-mode { background: #edfff4 !important; color: #071808 !important; }
body.day-mode #bgCanvas8 { opacity: 0.07 !important; }
body.day-mode #rainCanvas { display: none !important; }

/* ── LEFT SIDEBAR ── */
body.day-mode .sidebar-8,
body.day-mode .left-sb8 {
  background: linear-gradient(180deg, #ccf5dc 0%, #b8edcc 100%) !important;
  border-right: 2px solid rgba(30,150,70,0.22) !important;
}
body.day-mode .sb-header-8 { border-bottom: 1px solid rgba(30,150,70,0.16) !important; }
body.day-mode .sb-brand-8 { color: #1a5c30 !important; }
body.day-mode .sb-logo-img-8 { filter: brightness(1) !important; }
body.day-mode .sb-toggle-8 { color: #2a7040 !important; background: none !important; border: none !important; }
body.day-mode .new-chat-8 {
  background: rgba(30,150,70,0.10) !important;
  border: 1.5px solid rgba(30,150,70,0.32) !important;
  color: #1a5c30 !important;
}
body.day-mode .new-chat-8:hover { background: rgba(30,150,70,0.18) !important; }
body.day-mode .sb-search-8 input {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.24) !important;
  color: #071808 !important;
}
body.day-mode .sb-search-8 input::placeholder { color: #4a9060 !important; }
body.day-mode .hist-label-8 { color: #4a9060 !important; }

body.day-mode #chatHistory8 > div,
body.day-mode [class*="chat-hist-item-8"] {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.16) !important;
  color: #071808 !important;
  box-shadow: 0 1px 5px rgba(20,120,60,0.06) !important;
}
body.day-mode [class*="hist-item"]:hover { background: #d8f5e4 !important; }
body.day-mode [class*="hist-item"].active {
  background: #c4efd4 !important;
  border-color: rgba(30,150,70,0.42) !important;
}

body.day-mode .sb-bottom-8 { border-top: 1px solid rgba(30,150,70,0.16) !important; }
body.day-mode .sb-btn-8 {
  background: rgba(20,130,60,0.08) !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  color: #1a5c30 !important;
}
body.day-mode .sb-btn-8:hover { background: rgba(20,130,60,0.16) !important; }
body.day-mode .upgrade-8 {
  background: rgba(30,180,80,0.12) !important;
  border-color: rgba(30,180,80,0.38) !important;
  color: #0d4a20 !important;
}
body.day-mode .user-row-8 { color: #071808 !important; }
body.day-mode #userName8 { color: #071808 !important; }
body.day-mode .user-email-8 { color: #2a7840 !important; }
body.day-mode .user-av-8 {
  background: rgba(20,130,60,0.14) !important;
  color: #1a5c30 !important;
  border-color: rgba(30,150,70,0.30) !important;
}
body.day-mode .user-menu-8 {
  background: #e8faf0 !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
}
body.day-mode .user-menu-8 button { color: #071808 !important; }
body.day-mode .col-btn-8 {
  background: rgba(30,150,70,0.10) !important;
  border-color: rgba(30,150,70,0.28) !important;
  color: #1a5c30 !important;
}

/* ── TOPBAR ── */
body.day-mode .topbar-8 {
  background: rgba(204,245,220,0.98) !important;
  border-bottom: 2px solid rgba(30,150,70,0.18) !important;
  box-shadow: 0 2px 14px rgba(20,120,60,0.08) !important;
}
body.day-mode .tb-title-8 { color: #1a5c30 !important; }
body.day-mode .tb-sub-8 { color: #4a9060 !important; }
body.day-mode .q-badge-8 { color: #2a7040 !important; }
body.day-mode .tb-btn-8 {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  color: #1a5c30 !important;
}
body.day-mode .tb-btn-8:hover {
  background: #d0f5e0 !important;
  border-color: rgba(30,150,70,0.44) !important;
}

/* ── MAIN / HOME ── */
body.day-mode .main-8 { background: #edfff4 !important; }
body.day-mode [id*="homeArea8"],
body.day-mode [class*="home-8"] { background: transparent !important; }
body.day-mode .home-greeting-8,
body.day-mode [id*="homeGreeting8"] {
  color: #1a5c30 !important;
  -webkit-text-fill-color: #1a5c30 !important;
  background: none !important;
}
body.day-mode [class*="subtitle-8"],
body.day-mode [id*="greetingSub8"] { color: #4a9060 !important; }
body.day-mode .chip-8 {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  color: #1a5c30 !important;
}
body.day-mode .chip-8:hover { background: #d0f5e0 !important; border-color: rgba(30,150,70,0.44) !important; }

/* ── CHAT MESSAGES ── */
body.day-mode #chatMessages8 { background: #edfff4 !important; }

body.day-mode .msg-8.bot .msg-bubble-8 {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.18) !important;
  box-shadow: 0 2px 12px rgba(20,120,60,0.07) !important;
  color: #071808 !important;
}
body.day-mode .msg-8.bot .msg-bubble-8,
body.day-mode .msg-8.bot .msg-bubble-8 * { color: #071808 !important; }
body.day-mode .msg-8.bot .msg-bubble-8 strong,
body.day-mode .msg-8.bot .msg-bubble-8 b { color: #1a5c30 !important; }
body.day-mode .msg-8.bot .msg-bubble-8 h1,
body.day-mode .msg-8.bot .msg-bubble-8 h2,
body.day-mode .msg-8.bot .msg-bubble-8 h3 { color: #1a5c30 !important; font-weight: 700 !important; }
body.day-mode .msg-8.bot .msg-bubble-8 em { color: #2a7840 !important; }
body.day-mode .msg-8.bot .msg-bubble-8 li { color: #071808 !important; }
body.day-mode .msg-8.bot .msg-bubble-8 code {
  background: #d4f5e2 !important;
  color: #1a5c30 !important;
  border: 1px solid rgba(30,150,70,0.22) !important;
}
body.day-mode .msg-8.bot .msg-bubble-8 pre {
  background: #d4f5e2 !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  border-radius: 8px !important;
}

body.day-mode .msg-8.user .msg-bubble-8 {
  background: rgba(30,150,70,0.09) !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  color: #071808 !important;
}
body.day-mode .msg-8.user .msg-bubble-8 * { color: #071808 !important; }
body.day-mode .msg-av-8 { background: rgba(20,130,60,0.12) !important; color: #1a5c30 !important; }
body.day-mode .mab-8 {
  background: #fff !important;
  border: 1px solid rgba(30,150,70,0.16) !important;
  color: #2a7040 !important;
}
body.day-mode .mab-8:hover { background: #d0f5e0 !important; }

/* ── INPUT ── */
body.day-mode .input-area-8 {
  background: rgba(200,245,218,0.97) !important;
  border-top: 2px solid rgba(30,150,70,0.16) !important;
}
body.day-mode .input-wrap-8 {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.24) !important;
  box-shadow: 0 2px 14px rgba(20,120,60,0.08) !important;
}
body.day-mode #inputField8 {
  background: transparent !important;
  color: #071808 !important;
  caret-color: #20a050 !important;
}
body.day-mode .send-btn-8 { background: #1e8040 !important; color: #fff !important; }
body.day-mode .input-btn-8 { background: rgba(30,150,70,0.08) !important; color: #2a7040 !important; }
body.day-mode [class*="disclaimer-8"] { color: #4a9060 !important; }

/* ── RIGHT PANEL / LIBRARY ── */
body.day-mode [class*="right-sb-8"],
body.day-mode [id*="rightSidebar8"] {
  background: linear-gradient(180deg, #ccf5dc 0%, #b8edcc 100%) !important;
  border-left: 2px solid rgba(30,150,70,0.20) !important;
}
body.day-mode .lib-label-8 { color: #1a5c30 !important; font-weight: 700 !important; }
body.day-mode .lib-item-8,
body.day-mode [class*="lib-item"] {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.16) !important;
  color: #071808 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  display: block !important;
}
body.day-mode .lib-link-8 {
  color: #1a7038 !important;
  background: rgba(20,130,60,0.06) !important;
  border: 1px solid rgba(30,150,70,0.16) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ── TOAST ── */
body.day-mode [id*="toast8"],
body.day-mode [class*="toast-8"] {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  color: #071808 !important;
}

/* ── MODALS ── */
body.day-mode [class*="modal"],
body.day-mode [class*="overlay-8"],
body.day-mode [class*="feat-overlay"] {
  background: rgba(0,14,4,0.50) !important;
  backdrop-filter: blur(14px) !important;
}
body.day-mode [class*="modal"] > div,
body.day-mode [class*="feat-overlay"] > div {
  background: #edfff4 !important;
  border: 2px solid rgba(30,150,70,0.26) !important;
  color: #071808 !important;
}
body.day-mode [class*="modal"] *,
body.day-mode [class*="feat-overlay"] * { color: #071808 !important; }
body.day-mode [class*="modal"] input,
body.day-mode [class*="modal"] textarea { background: #fff !important; border-color: rgba(30,150,70,0.22) !important; color: #071808 !important; }
body.day-mode [class*="setting-row-8"] {
  background: #d8f5e4 !important;
  border: 1px solid rgba(30,150,70,0.16) !important;
  border-radius: 8px !important;
}
body.day-mode [class*="setting-row-8"] * { color: #071808 !important; }

/* ── STICKY PANEL ── */
body.day-mode #stickyPanel {
  background: #edfff4 !important;
  border: 2px solid rgba(30,150,70,0.26) !important;
}
body.day-mode #stickyPanel * { color: #071808 !important; }
body.day-mode #stickyPanel textarea { background: #fff !important; border-color: rgba(30,150,70,0.22) !important; color: #071808 !important; }

/* ── SCROLLBAR ── */
body.day-mode ::-webkit-scrollbar-track { background: #ccf5dc; }
body.day-mode ::-webkit-scrollbar-thumb { background: rgba(30,150,70,0.30); border-radius: 3px; }


/* ── FEATURE BUTTONS (Flashcard, Memory Card, Save PDF, Read Aloud, Copy) ── */
body.day-mode .v16Btn {
  background: #fff !important;
  border: 1px solid rgba(30,150,70,0.22) !important;
  color: #1a5c30 !important;
}
body.day-mode .v16Btn:hover { background: #d0f5e0 !important; }
body.day-mode .v16Sat { color: #4a9060 !important; }
body.day-mode .v16SatBtn {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid rgba(30,150,70,0.18) !important;
  color: #1a5c30 !important;
}
body.day-mode .v16SatBtn:hover { background: #d0f5e0 !important; }
body.day-mode .v16SatBtn.chosen { background: rgba(30,150,70,0.14) !important; }

/* ── CHAT CANVAS — DAY MODE ──────────────────────────────── */
/* Make chatMessages8 transparent so chatCanvas8 shows through */
body.day-mode #chatMessages8 { background: transparent !important; }
body.day-mode #chatCanvas8 { opacity: 0.45 !important; }
body.day-mode .msg-8.bot .msg-bubble-8 {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(30,150,70,0.18) !important;
  box-shadow: 0 2px 12px rgba(20,120,60,0.08) !important;
  color: #071808 !important;
}
body.day-mode .msg-8.user .msg-bubble-8 {
  background: rgba(204,245,220,0.94) !important;
  backdrop-filter: blur(10px) !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
  color: #071808 !important;
}
body.day-mode .mab-8 {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(30,150,70,0.22) !important;
  color: #2a7040 !important;
}
body.day-mode .input-area-8 {
  background: rgba(200,245,218,0.97) !important;
}

/* ── ATTACHMENT CHIPS (file preview) ── */
body.day-mode .ex-attach-chip {
  background: #fff !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
}
body.day-mode .ex-attach-chip div { color: #0a1f0a !important; }
body.day-mode .ex-chip-x { color: rgba(26,92,48,0.45) !important; }
body.day-mode .ex-chip-x:hover { color: #1a5c30 !important; }

/* ── V16 FEATURES — DAY MODE OVERRIDES ──────────────────── */
/* Next Unlock bar below input */
body.day-mode #v16NextUnlock {
  background: rgba(210,245,225,0.96) !important;
  border: 1px solid rgba(30,150,70,0.22) !important;
}
body.day-mode .v16NUText {
  color: #2a6040 !important;
}
body.day-mode .v16NUText b {
  color: #1a5c30 !important;
}
body.day-mode .v16NUBar {
  background: rgba(30,150,70,0.15) !important;
}
body.day-mode .v16NUXp {
  color: #4a8060 !important;
}
body.day-mode .v16NUClose {
  color: rgba(30,100,60,0.4) !important;
}
body.day-mode .v16NUClose:hover { color: #1a5c30 !important; }

/* XP / Tier unlock celebration popup */
body.day-mode #v16LockPrev {
  background: rgba(240,255,248,0.98) !important;
  border: 1.5px solid rgba(30,150,70,0.26) !important;
  color: #071808 !important;
  box-shadow: 0 16px 60px rgba(20,120,60,0.18) !important;
}
body.day-mode #v16LockPrev * { color: #071808 !important; }
body.day-mode .v16LockDesc { color: #2a6040 !important; }
body.day-mode .v16LockProgress {
  background: rgba(30,150,70,0.12) !important;
}
body.day-mode .v16LockXPText { color: #4a8060 !important; }
body.day-mode .v16LockClose { color: rgba(30,100,60,0.35) !important; }
body.day-mode .v16LockClose:hover { color: #1a5c30 !important; }
body.day-mode .v16CelebTip {
  background: rgba(210,245,225,0.7) !important;
  color: #1a5c30 !important;
}

/* Tier panel modal */
body.day-mode #v16TierBox {
  background: #edfff4 !important;
  border: 1.5px solid rgba(30,150,70,0.26) !important;
  color: #071808 !important;
}
body.day-mode #v16TierBox * { color: #071808 !important; }
body.day-mode .v16TierRow-feats { color: #3a7050 !important; }
body.day-mode .v16TierRow-badge {
  background: rgba(30,150,70,0.10) !important;
  color: #1a5c30 !important;
}
body.day-mode .v16TPClose { color: rgba(30,100,60,0.35) !important; }
body.day-mode .v16TPClose:hover { color: #1a5c30 !important; }

/* Calculator */
body.day-mode #v16CalcBox {
  background: #edfff4 !important;
  border: 1.5px solid rgba(30,150,70,0.22) !important;
}
body.day-mode #v16CalcBox * { color: #071808 !important; }
body.day-mode #v16CalcDisplay {
  background: #d8f5e4 !important;
  border-color: rgba(30,150,70,0.18) !important;
}
body.day-mode #v16CalcExpr { color: #4a7060 !important; }
body.day-mode #v16CalcResult { color: #1a5c30 !important; }
body.day-mode .v16CB {
  background: rgba(30,150,70,0.10) !important;
  color: #1a5c30 !important;
}
body.day-mode .v16CB:hover {
  background: rgba(30,150,70,0.20) !important;
  color: #0a3020 !important;
}
body.day-mode .v16CB.fn {
  background: rgba(30,150,70,0.06) !important;
  color: #2a7040 !important;
}
body.day-mode .v16CalcHdr h3 { color: #1a5c30 !important; }
body.day-mode .v16CalcX { color: rgba(30,100,60,0.35) !important; }
body.day-mode .v16CalcX:hover { color: #1a5c30 !important; }