/* Genexts Diwali look (diwali.js): diyas, a faint rangoli, a warm glow and the "Happy Diwali" greeting.
   It sits on top of the normal teal look and stays quiet: gold and saffron only in the small lamps. */

body.diwali { --dw-gold: #f5b942; --dw-gold-text: #f2c063; }
html[data-theme="light"] body.diwali { --dw-gold: #d99a1e; --dw-gold-text: #b7791f; }

/* ---------- the greeting ---------- */
body.diwali #chat-empty { position: relative; }
body.diwali #chat-empty > *:not(.dw-rangoli) { position: relative; z-index: 1; }
body.diwali #chat-empty h2 { line-height: 1.25; }
body.diwali #chat-empty h2 .dw-name { color: var(--dw-gold-text); }
body.diwali #chat-empty h2 .dw-sub { display: block; margin-top: .45rem; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; opacity: .72; }
html[data-theme] body.diwali #chat-empty .chat-empty-mark { border-color: color-mix(in srgb, var(--dw-gold) 40%, transparent) !important;
  box-shadow: 0 0 22px color-mix(in srgb, var(--dw-gold) 22%, transparent); }
body.diwali #chat-empty .chat-empty-mark .dw-diya { width: 30px; height: 27px; }
body.diwali #welcome-greeting .highlight { color: var(--dw-gold-text); -webkit-text-fill-color: var(--dw-gold-text); background: none; }

.dw-off { margin-top: 1.1rem; background: none; border: 0; padding: 4px 8px; font: inherit; font-size: .78rem; color: var(--r-text-3, #8b8b94);
  cursor: pointer; border-radius: 8px; opacity: .8; }
.dw-off:hover { opacity: 1; text-decoration: underline; }

/* the rangoli behind the greeting */
.dw-rangoli { display: none; }
body.diwali .dw-rangoli { display: block; position: absolute; left: 50%; top: 50%; width: min(440px, 92vw); height: auto; transform: translate(-50%, -54%);
  color: var(--dw-gold); opacity: .09; pointer-events: none; z-index: 0; animation: dw-turn 240s linear infinite; }
html[data-theme="light"] body.diwali .dw-rangoli { opacity: .12; }
body.birthday .dw-rangoli { display: none !important; }
@keyframes dw-turn { from { transform: translate(-50%, -54%) rotate(0); } to { transform: translate(-50%, -54%) rotate(360deg); } }

/* ---------- diyas on the sides (only on the chat and home pages) ---------- */
.dw-decor { display: none; position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
body.diwali:has(#chat-view:not(.hidden)) .dw-decor,
body.diwali:has(#main-view:not(.hidden)) .dw-decor { display: block; }
body.diwali.birthday .dw-side { display: none; }        /* the birthday balloons take the sides */

.dw-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255, 176, 59, .10), rgba(255, 176, 59, 0) 70%); }
html[data-theme="light"] .dw-glow { background: radial-gradient(60% 100% at 50% 100%, rgba(245, 158, 11, .08), rgba(245, 158, 11, 0) 70%); }

.dw-side { position: absolute; top: 0; bottom: 0; width: 80px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 18px; padding: 0 0 132px; color: var(--dw-gold); }
.dw-side.left { left: 252px; }                          /* just right of the 236px menu */
body.rail-small .dw-side.left { left: 84px; }
.dw-side.right { right: 14px; }
.dw-side .dw-diya:nth-of-type(2) { margin-inline-start: 22px; }
.dw-side .dw-spark:nth-of-type(2) { margin-inline-end: 24px; }

.dw-diya { overflow: visible; }
.dw-diya .dw-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: dw-flicker 2.4s ease-in-out var(--d, 0s) infinite alternate; }
.dw-diya .dw-halo { animation: dw-halo 3.2s ease-in-out var(--d, 0s) infinite alternate; }
@keyframes dw-flicker {
  0%   { transform: scale(1, 1) rotate(-1.5deg); }
  50%  { transform: scale(.94, 1.06) rotate(1.5deg); }
  100% { transform: scale(1.03, .96) rotate(-.5deg); }
}
@keyframes dw-halo { from { opacity: .75; } to { opacity: 1; } }
.dw-spark { opacity: .55; animation: dw-twinkle 3.6s ease-in-out var(--d, 0s) infinite; }
@keyframes dw-twinkle { 0%, 100% { opacity: .15; transform: scale(.7); } 50% { opacity: .7; transform: scale(1); } }

@media (max-width: 1100px) { .dw-side { width: 56px; } .dw-side .dw-diya { transform: scale(.85); } }
@media (max-width: 768px) {
  .dw-side { display: none; }                            /* phones: just the glow, the rangoli and the greeting */
  body.diwali .dw-rangoli { width: min(340px, 88vw); }
}
@media (prefers-reduced-motion: reduce) {
  .dw-diya .dw-flame, .dw-diya .dw-halo, .dw-spark, body.diwali .dw-rangoli { animation: none; }
}