/* Nova Mail — thèmes « Live » : fonds animés doux (Sunset, Aurora, Nebula, Midnight).
   Tout est en CSS (transform / opacity) : léger pour la batterie, mis en pause
   quand l'onglet est caché, et figé si le système demande moins d'animations. */

#novaLive{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#novaLive>*{position:absolute;will-change:transform,opacity}
html[data-nova-live]{background:#03060d;--th-scene:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));--th-hero:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
html[data-nova-live] body{background:transparent!important}
html.nova-live-paused #novaLive *,html.nova-live-paused #novaLive{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){#novaLive *{animation:none!important}}

/* Panneaux en verre : le décor reste visible derrière, le texte reste lisible. */
html[data-nova-live] .side,html[data-nova-live] .list{backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2)}
html[data-nova-live] .reader{backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
/* Accueil vide du lecteur : la scène Live remplace le décor fixe. */
html[data-nova-live] .emptyglassscene{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02))!important}

/* Cartes et boutons en verre clair : le décor se devine à travers (immersion). */
html[data-nova-live]{
  --th-message:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  --th-message-hover:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.055));
  --th-message-active:linear-gradient(115deg,color-mix(in srgb,var(--purple) 30%,transparent),color-mix(in srgb,var(--purple2) 20%,transparent));
  --th-nav:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  --th-card:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  --th-input:rgba(255,255,255,.06);
}
html[data-nova-live] .msg,html[data-nova-live] .nav button,html[data-nova-live] .navsection #customFoldersNav button{
  backdrop-filter:blur(6px) saturate(1.15);-webkit-backdrop-filter:blur(6px) saturate(1.15);
  border-color:rgba(255,255,255,.10)}
html[data-nova-live] #msgs .msg{background:var(--th-message)!important}
html[data-nova-live] #msgs .msg.unread{background:linear-gradient(145deg,color-mix(in srgb,var(--purple) 14%,transparent),rgba(255,255,255,.04))!important}
html[data-nova-live] #msgs .msg:hover{background:var(--th-message-hover)!important;border-color:rgba(255,255,255,.18)}
html[data-nova-live] #msgs .msg.active{background:var(--th-message-active)!important}
html[data-nova-live] .msg.active{border-color:color-mix(in srgb,var(--purple) 55%,rgba(255,255,255,.2))}

/* ------------------------------------------------------------ étoiles (communes) */
#novaLive .stars{left:0;top:0;width:1px;height:1px;border-radius:50%;background:transparent}
#novaLive .stars.s1{animation:nl-twinkle 5.5s ease-in-out infinite alternate}
#novaLive .stars.s2{animation:nl-twinkle 8s ease-in-out -3s infinite alternate}
#novaLive .stars.s3{animation:nl-twinkle 11s ease-in-out -6s infinite alternate}
@keyframes nl-twinkle{0%{opacity:.35}100%{opacity:1}}

/* ------------------------------------------------------------ SUNSET */
html[data-nova-live="sunset"]{
  --th-side:linear-gradient(180deg,rgba(52,16,48,.36),rgba(34,10,34,.32));
  --th-list:linear-gradient(180deg,rgba(48,15,44,.32),rgba(30,9,30,.30));
  --th-reader:linear-gradient(160deg,rgba(30,10,30,.58),rgba(22,8,24,.62));
}
#novaLive.sunset .sky{inset:0;background:linear-gradient(180deg,#160a2c 0%,#341350 24%,#7a2468 46%,#d24e62 63%,#f8894f 76%,#ffbe6e 86%,#ffd99a 100%)}
#novaLive.sunset .glow{left:50%;bottom:4vh;width:150vmax;height:80vmin;margin-left:-75vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,170,100,.55),rgba(255,110,90,.25) 45%,transparent 75%);animation:nl-breathe 10s ease-in-out infinite alternate}
#novaLive.sunset .sun{left:50%;bottom:12vh;width:30vmin;height:30vmin;margin-left:-15vmin;border-radius:50%;
  background:radial-gradient(circle,#fff6d6 0%,#ffe08f 38%,#ffab55 62%,rgba(255,140,80,0) 72%);animation:nl-sun 9s ease-in-out infinite alternate}
@keyframes nl-sun{0%{transform:translateY(0) scale(1);opacity:.92}100%{transform:translateY(1.2vh) scale(1.05);opacity:1}}
@keyframes nl-breathe{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.08);opacity:1}}
#novaLive.sunset .cloud{border-radius:50%;background:radial-gradient(closest-side,rgba(255,190,200,.38),rgba(255,140,170,.18) 55%,transparent 75%);animation:nl-drift linear infinite}
#novaLive.sunset .cloud.c1{top:16vh;width:46vw;height:9vh;animation-duration:150s;animation-delay:-20s}
#novaLive.sunset .cloud.c2{top:30vh;width:34vw;height:7vh;animation-duration:115s;animation-delay:-80s;opacity:.8}
#novaLive.sunset .cloud.c3{top:8vh;width:28vw;height:6vh;animation-duration:180s;animation-delay:-130s;opacity:.6}
#novaLive.sunset .cloud.c4{top:42vh;width:52vw;height:8vh;animation-duration:200s;animation-delay:-40s;opacity:.55}
@keyframes nl-drift{0%{transform:translateX(-60vw)}100%{transform:translateX(130vw)}}
#novaLive.sunset .hills{left:0;right:0;bottom:0;height:30vh;background-repeat:no-repeat;background-size:100% 100%}
#novaLive.sunset .hills.back{height:34vh;opacity:.9;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 170C180 120 330 160 500 140C690 118 850 175 1040 150C1210 128 1330 160 1440 145V320H0Z' fill='%234a1745'/%3E%3C/svg%3E")}
#novaLive.sunset .hills.front{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 220C200 170 360 205 540 188C720 172 880 228 1060 205C1220 186 1330 215 1440 200V320H0Z' fill='%231e0a24'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------ AURORA */
html[data-nova-live="aurora"]{
  --th-side:linear-gradient(180deg,rgba(6,40,52,.36),rgba(3,22,34,.32));
  --th-list:linear-gradient(180deg,rgba(6,36,48,.32),rgba(3,20,32,.30));
  --th-reader:linear-gradient(160deg,rgba(3,24,34,.58),rgba(4,12,24,.62));
}
#novaLive.aurora .sky{inset:0;background:linear-gradient(180deg,#010712 0%,#03132a 42%,#062537 72%,#08303c 100%)}
#novaLive.aurora .band{left:-30vw;width:160vw;height:50vh;border-radius:50%;filter:blur(20px);mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 55%,transparent 100%)}
#novaLive.aurora .band.b1{top:4vh;background:linear-gradient(90deg,transparent 5%,rgba(70,255,170,.75) 28%,rgba(40,230,220,.65) 48%,rgba(120,100,255,.5) 70%,transparent 92%);animation:nl-aurora 19s ease-in-out infinite alternate}
#novaLive.aurora .band.b2{top:14vh;background:linear-gradient(90deg,transparent 8%,rgba(40,210,255,.55) 30%,rgba(80,255,180,.6) 55%,rgba(170,90,255,.45) 78%,transparent 95%);animation:nl-aurora 27s ease-in-out -9s infinite alternate-reverse}
#novaLive.aurora .band.b3{top:24vh;height:34vh;opacity:.7;background:linear-gradient(90deg,transparent 10%,rgba(150,90,255,.5) 35%,rgba(60,240,200,.55) 60%,transparent 90%);animation:nl-aurora 35s ease-in-out -17s infinite alternate}
@keyframes nl-aurora{0%{transform:translateX(-7vw) skewX(-14deg) scaleY(.9);opacity:.6}50%{opacity:1}100%{transform:translateX(7vw) skewX(10deg) scaleY(1.25);opacity:.75}}
#novaLive.aurora .mountains{left:0;right:0;bottom:0;height:30vh;background-repeat:no-repeat;background-size:100% 100%}
#novaLive.aurora .mountains.back{height:36vh;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 200L110 150L200 185L320 105L440 175L560 120L690 195L820 110L950 180L1070 135L1190 195L1310 145L1440 185V320H0Z' fill='%23072636'/%3E%3C/svg%3E")}
#novaLive.aurora .mountains.front{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath d='M0 250L150 190L290 240L420 180L560 250L700 200L860 262L1000 212L1150 265L1300 222L1440 255V320H0Z' fill='%23030f18'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------ NEBULA */
html[data-nova-live="nebula"]{
  --th-side:linear-gradient(180deg,rgba(20,16,52,.36),rgba(10,9,32,.32));
  --th-list:linear-gradient(180deg,rgba(18,14,48,.32),rgba(9,8,30,.30));
  --th-reader:linear-gradient(160deg,rgba(12,10,32,.58),rgba(7,6,22,.62));
}
#novaLive.nebula .sky{inset:0;background:radial-gradient(ellipse at 50% 45%,#0e0b2c 0%,#07061a 55%,#030310 100%)}
#novaLive.nebula .cloud{width:80vmax;height:80vmax;border-radius:50%;mix-blend-mode:screen}
#novaLive.nebula .cloud.n1{left:-12vmax;top:-22vmax;background:radial-gradient(closest-side,rgba(150,85,255,.85),rgba(105,60,235,.38) 55%,transparent 75%);animation:nl-neb1 46s ease-in-out infinite alternate}
#novaLive.nebula .cloud.n2{right:-18vmax;top:-8vmax;background:radial-gradient(closest-side,rgba(60,130,255,.62),rgba(40,90,220,.26) 55%,transparent 75%);animation:nl-neb2 58s ease-in-out infinite alternate}
#novaLive.nebula .cloud.n3{left:14vw;bottom:-34vmax;background:radial-gradient(closest-side,rgba(235,85,220,.7),rgba(175,60,205,.3) 55%,transparent 75%);animation:nl-neb1 64s ease-in-out -20s infinite alternate-reverse}
#novaLive.nebula .cloud.n4{right:8vw;bottom:-18vmax;width:60vmax;height:60vmax;background:radial-gradient(closest-side,rgba(60,220,255,.38),transparent 70%);animation:nl-neb2 52s ease-in-out -30s infinite alternate}
@keyframes nl-neb1{0%{transform:translate(0,0) rotate(0) scale(1)}100%{transform:translate(9vw,6vh) rotate(25deg) scale(1.15)}}
@keyframes nl-neb2{0%{transform:translate(0,0) rotate(0) scale(1.1)}100%{transform:translate(-8vw,8vh) rotate(-20deg) scale(.95)}}
#novaLive.nebula .dust{left:0;top:0;width:1px;height:1px;border-radius:50%;animation:nl-rise 140s linear infinite}
#novaLive.nebula .dust.d2{animation-duration:200s;animation-delay:-70s;opacity:.7}
@keyframes nl-rise{0%{transform:translateY(0)}100%{transform:translateY(-100vh)}}

/* ------------------------------------------------------------ MIDNIGHT */
html[data-nova-live="midnight"]{
  --th-side:linear-gradient(180deg,rgba(14,18,28,.36),rgba(7,9,16,.32));
  --th-list:linear-gradient(180deg,rgba(13,16,26,.32),rgba(6,8,14,.30));
  --th-reader:linear-gradient(160deg,rgba(8,10,18,.58),rgba(4,6,12,.62));
}
#novaLive.midnight .sky{inset:0;background:linear-gradient(180deg,#010208 0%,#050a18 55%,#0a1226 100%)}
#novaLive.midnight .horizon{left:0;right:0;bottom:-20vh;height:55vh;background:radial-gradient(ellipse at 50% 100%,rgba(70,100,180,.22),transparent 70%)}
#novaLive.midnight .moon{top:9vh;left:44vw;width:11vmin;height:11vmin;border-radius:50%;
  background:radial-gradient(circle at 62% 38%,rgba(150,160,190,.35) 0 9%,transparent 10%),radial-gradient(circle at 38% 64%,rgba(150,160,190,.3) 0 7%,transparent 8%),radial-gradient(circle at 35% 35%,#f7f8ff,#d4dbef 55%,#a7b2cf 100%);
  box-shadow:0 0 50px 14px rgba(200,215,255,.22),0 0 140px 50px rgba(120,150,230,.12);animation:nl-moon 12s ease-in-out infinite alternate}
@keyframes nl-moon{0%{box-shadow:0 0 50px 14px rgba(200,215,255,.18),0 0 140px 50px rgba(120,150,230,.10)}100%{box-shadow:0 0 60px 18px rgba(200,215,255,.28),0 0 170px 60px rgba(120,150,230,.15)}}
#novaLive.midnight .shoot{width:18vmin;height:2px;border-radius:2px;opacity:0;transform-origin:left center;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));animation:nl-shoot 13s linear infinite}
#novaLive.midnight .shoot.t1{top:14vh;left:18vw}
#novaLive.midnight .shoot.t2{top:30vh;left:55vw;animation-duration:19s;animation-delay:-7s}
@keyframes nl-shoot{0%,90%{opacity:0;transform:rotate(18deg) translateX(0)}92%{opacity:1}97%{opacity:0;transform:rotate(18deg) translateX(30vw)}100%{opacity:0}}

/* ------------------------------------------------------------ aperçus dans les réglages */
.themechoice[data-live] .themepreview{background-size:200% 200%;animation:nl-preview 8s ease-in-out infinite alternate}
.themechoice[data-live="sunset"] .themepreview{background-image:radial-gradient(circle at 50% 78%,#ffe08f 0 12%,rgba(255,160,90,.6) 22%,transparent 40%),linear-gradient(180deg,#341350,#b33b66 55%,#ffad60)}
.themechoice[data-live="aurora"] .themepreview{background-image:linear-gradient(100deg,transparent 15%,rgba(70,255,170,.55) 40%,rgba(120,100,255,.45) 65%,transparent 85%),linear-gradient(180deg,#020a18,#062a3a)}
.themechoice[data-live="nebula"] .themepreview{background-image:radial-gradient(circle at 25% 30%,rgba(140,80,255,.7),transparent 45%),radial-gradient(circle at 75% 70%,rgba(220,80,220,.5),transparent 45%),linear-gradient(145deg,#0e0b2c,#05040f)}
.themechoice[data-live="midnight"] .themepreview{background-image:radial-gradient(circle at 78% 26%,#eef2ff 0 7%,rgba(200,215,255,.35) 10%,transparent 22%),radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 40% 60%,#fff,transparent),radial-gradient(1px 1px at 60% 20%,#fff,transparent),linear-gradient(180deg,#02030a,#0a1226)}
@keyframes nl-preview{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.livebadge{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-size:9.5px;font-weight:800;letter-spacing:.08em;vertical-align:2px;color:#fff;background:linear-gradient(110deg,var(--theme-a),var(--theme-b));box-shadow:0 0 10px color-mix(in srgb,var(--theme-a) 40%,transparent)}

/* Aurora en WebGL : la toile remplace le décor CSS. */
#novaLive .gl{inset:0;width:100%;height:100%;display:block}
#novaLive.has-gl>:not(.gl){display:none}

/* Aurora : verre plus clair et moins flou, pour voir les rideaux danser derrière. */
html[data-nova-live="aurora"]{
  --th-side:linear-gradient(180deg,rgba(4,24,34,.22),rgba(3,16,26,.2));
  --th-list:linear-gradient(180deg,rgba(4,22,32,.2),rgba(3,14,24,.18));
}
html[data-nova-live="aurora"] .side,html[data-nova-live="aurora"] .list{backdrop-filter:blur(3px) saturate(1.15);-webkit-backdrop-filter:blur(3px) saturate(1.15)}
html[data-nova-live="aurora"] #msgs .msg{background:linear-gradient(145deg,rgba(6,20,30,.42),rgba(4,14,24,.32))!important}