/* ===================================================================
   JLPT N3 GREETING BANNER — v18 (multi-theme)
   Modes  : dark (default) · light · sepia (body.sepia-mode)
   Themes : cosmic (default) · sakura · ocean · forest · ember · gold
   ===================================================================

   HOW THEMES WORK
   ───────────────
   A theme is activated by adding  data-gbtheme="<name>"  on
   #ai-greeting-banner.  The JS in greeting-banner.js writes this
   attribute when the user picks a theme from the palette.
   The six built-in theme names are:
     cosmic  sakura  ocean  forest  ember  gold

   Each theme defines four CSS custom-properties scoped to that
   selector, then the shared rules below consume them.
   ================================================================== */

/* ── 0. SHARED CUSTOM PROPERTIES (dark / cosmic default) ── */
#ai-greeting-banner {
  /* Accent colours — override per theme below */
  --gb-a1: 192, 132, 252;   /* primary accent  (RGB)  */
  --gb-a2: 129, 140, 248;   /* secondary accent (RGB) */
  --gb-a3:  52, 211, 153;   /* tertiary accent  (RGB) */

  /* Card surface */
  --gb-card-bg:  rgba(9, 7, 18, 0.92);
  --gb-card-border: rgba(255, 255, 255, 0.07);
  --gb-card-shadow: 0 8px 32px rgba(0,0,0,0.55);

  /* Text */
  --gb-hello-grad: linear-gradient(120deg,
      #f4f0ff 0%, #ddd6fe 25%, #c084fc 50%, #a78bfa 72%, #93c5fd 90%);
  --gb-sub-grad:   linear-gradient(90deg,
      rgba(192,132,252,0.60), rgba(129,140,248,0.50), rgba(52,211,153,0.55));
  --gb-insight-color: rgba(220,215,240,0.75);
  --gb-insight-bg:    rgba(192,132,252,0.07);
  --gb-insight-border:rgba(192,132,252,0.16);

  /* Live dot */
  --gb-live-color: rgba(52,211,153,0.50);
  --gb-live-dot:   #34d399;

  /* Avatar */
  --gb-av-bg:     linear-gradient(145deg, rgba(192,132,252,0.18), rgba(129,140,248,0.12), rgba(52,211,153,0.08));
  --gb-av-border: rgba(192,132,252,0.25);
  --gb-av-shadow: 0 0 0 2px rgba(192,132,252,0.05), 0 0 14px rgba(192,132,252,0.18), inset 0 1px 0 rgba(255,255,255,0.10);

  /* Kanji */
  --gb-kanji-color: #fff;
  --gb-kanji-shadow: 0 0 6px rgba(255,192,220,0.7), 0 0 14px rgba(192,132,252,0.55), 0 0 1px rgba(255,255,255,0.9);

  /* Halo / shimmer */
  --gb-halo-grad:   linear-gradient(135deg, rgba(192,132,252,0.25), rgba(129,140,248,0.12), rgba(52,211,153,0.12), rgba(249,168,212,0.10));
  --gb-shimmer-mid: rgba(192,132,252,0.55);
  --gb-shimmer-pk:  rgba(255,255,255,0.65);
  --gb-shimmer-sec: rgba(129,140,248,0.55);
  --gb-shimmer-tri: rgba(52,211,153,0.25);

  /* Wave colours */
  --gb-wave1: rgba(192,132,252,0.07);
  --gb-wave2: rgba(129,140,248,0.06);
  --gb-wave3: rgba(52,211,153,0.055);

  /* Aurora blobs */
  --gb-aurora1: rgba(192,132,252,0.07);
  --gb-aurora2: rgba(52,211,153,0.04);
  --gb-aurora3: rgba(129,140,248,0.05);
}

/* ══════════════════════════════════════════════════════════════
   1. THEMES (dark card base — used in dark mode AND as the
              card-inside-light-mode trick)
   ══════════════════════════════════════════════════════════════ */

/* ── SAKURA ── */
#ai-greeting-banner[data-gbtheme="sakura"] {
  --gb-a1: 249, 168, 212;
  --gb-a2: 244, 114, 182;
  --gb-a3: 251, 207, 232;
  --gb-hello-grad: linear-gradient(120deg, #fff0f6 0%, #fce7f3 25%, #f9a8d4 50%, #f472b6 72%, #ec4899 90%);
  --gb-sub-grad:   linear-gradient(90deg, rgba(249,168,212,0.70), rgba(244,114,182,0.60), rgba(251,207,232,0.65));
  --gb-insight-color: rgba(252,231,243,0.80);
  --gb-insight-bg:    rgba(249,168,212,0.08);
  --gb-insight-border:rgba(249,168,212,0.20);
  --gb-live-color: rgba(244,114,182,0.60);
  --gb-live-dot:   #f472b6;
  --gb-av-bg:     linear-gradient(145deg, rgba(249,168,212,0.20), rgba(244,114,182,0.12), rgba(251,207,232,0.08));
  --gb-av-border: rgba(249,168,212,0.30);
  --gb-av-shadow: 0 0 0 2px rgba(249,168,212,0.06), 0 0 14px rgba(249,168,212,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  --gb-kanji-shadow: 0 0 6px rgba(255,192,220,0.8), 0 0 14px rgba(249,168,212,0.65), 0 0 1px rgba(255,255,255,0.9);
  --gb-halo-grad:   linear-gradient(135deg, rgba(249,168,212,0.28), rgba(244,114,182,0.14), rgba(251,207,232,0.14), rgba(252,231,243,0.12));
  --gb-shimmer-mid: rgba(249,168,212,0.60);
  --gb-shimmer-pk:  rgba(255,255,255,0.70);
  --gb-shimmer-sec: rgba(244,114,182,0.60);
  --gb-shimmer-tri: rgba(251,207,232,0.30);
  --gb-wave1: rgba(249,168,212,0.08);
  --gb-wave2: rgba(244,114,182,0.06);
  --gb-wave3: rgba(251,207,232,0.06);
  --gb-aurora1: rgba(249,168,212,0.08);
  --gb-aurora2: rgba(251,207,232,0.05);
  --gb-aurora3: rgba(244,114,182,0.05);
}

/* ── OCEAN ── */
#ai-greeting-banner[data-gbtheme="ocean"] {
  --gb-a1:  56, 189, 248;
  --gb-a2:  14, 165, 233;
  --gb-a3:  99, 102, 241;
  --gb-hello-grad: linear-gradient(120deg, #e0f2fe 0%, #bae6fd 25%, #38bdf8 50%, #0ea5e9 72%, #6366f1 90%);
  --gb-sub-grad:   linear-gradient(90deg, rgba(56,189,248,0.70), rgba(14,165,233,0.60), rgba(99,102,241,0.55));
  --gb-insight-color: rgba(224,242,254,0.80);
  --gb-insight-bg:    rgba(56,189,248,0.08);
  --gb-insight-border:rgba(56,189,248,0.20);
  --gb-live-color: rgba(56,189,248,0.60);
  --gb-live-dot:   #38bdf8;
  --gb-av-bg:     linear-gradient(145deg, rgba(56,189,248,0.18), rgba(14,165,233,0.12), rgba(99,102,241,0.08));
  --gb-av-border: rgba(56,189,248,0.28);
  --gb-av-shadow: 0 0 0 2px rgba(56,189,248,0.06), 0 0 14px rgba(56,189,248,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
  --gb-kanji-shadow: 0 0 6px rgba(186,230,253,0.8), 0 0 14px rgba(56,189,248,0.60), 0 0 1px rgba(255,255,255,0.9);
  --gb-halo-grad:   linear-gradient(135deg, rgba(56,189,248,0.25), rgba(14,165,233,0.12), rgba(99,102,241,0.12), rgba(224,242,254,0.10));
  --gb-shimmer-mid: rgba(56,189,248,0.60);
  --gb-shimmer-pk:  rgba(255,255,255,0.70);
  --gb-shimmer-sec: rgba(14,165,233,0.55);
  --gb-shimmer-tri: rgba(99,102,241,0.28);
  --gb-wave1: rgba(56,189,248,0.07);
  --gb-wave2: rgba(14,165,233,0.06);
  --gb-wave3: rgba(99,102,241,0.055);
  --gb-aurora1: rgba(56,189,248,0.07);
  --gb-aurora2: rgba(99,102,241,0.04);
  --gb-aurora3: rgba(14,165,233,0.05);
}

/* ── FOREST ── */
#ai-greeting-banner[data-gbtheme="forest"] {
  --gb-a1:  52, 211, 153;
  --gb-a2:  16, 185, 129;
  --gb-a3: 110, 231, 183;
  --gb-hello-grad: linear-gradient(120deg, #ecfdf5 0%, #d1fae5 25%, #34d399 50%, #10b981 72%, #059669 90%);
  --gb-sub-grad:   linear-gradient(90deg, rgba(52,211,153,0.70), rgba(16,185,129,0.60), rgba(110,231,183,0.55));
  --gb-insight-color: rgba(209,250,229,0.80);
  --gb-insight-bg:    rgba(52,211,153,0.08);
  --gb-insight-border:rgba(52,211,153,0.20);
  --gb-live-color: rgba(52,211,153,0.65);
  --gb-live-dot:   #34d399;
  --gb-av-bg:     linear-gradient(145deg, rgba(52,211,153,0.18), rgba(16,185,129,0.12), rgba(110,231,183,0.08));
  --gb-av-border: rgba(52,211,153,0.28);
  --gb-av-shadow: 0 0 0 2px rgba(52,211,153,0.06), 0 0 14px rgba(52,211,153,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
  --gb-kanji-shadow: 0 0 6px rgba(209,250,229,0.8), 0 0 14px rgba(52,211,153,0.60), 0 0 1px rgba(255,255,255,0.9);
  --gb-halo-grad:   linear-gradient(135deg, rgba(52,211,153,0.25), rgba(16,185,129,0.12), rgba(110,231,183,0.14), rgba(209,250,229,0.10));
  --gb-shimmer-mid: rgba(52,211,153,0.60);
  --gb-shimmer-pk:  rgba(255,255,255,0.70);
  --gb-shimmer-sec: rgba(16,185,129,0.55);
  --gb-shimmer-tri: rgba(110,231,183,0.28);
  --gb-wave1: rgba(52,211,153,0.07);
  --gb-wave2: rgba(16,185,129,0.06);
  --gb-wave3: rgba(110,231,183,0.055);
  --gb-aurora1: rgba(52,211,153,0.07);
  --gb-aurora2: rgba(110,231,183,0.04);
  --gb-aurora3: rgba(16,185,129,0.05);
}

/* ── EMBER ── */
#ai-greeting-banner[data-gbtheme="ember"] {
  --gb-a1: 251, 146,  60;
  --gb-a2: 239,  68,  68;
  --gb-a3: 252, 211, 145;
  --gb-hello-grad: linear-gradient(120deg, #fff7ed 0%, #fed7aa 25%, #fb923c 50%, #ef4444 72%, #dc2626 90%);
  --gb-sub-grad:   linear-gradient(90deg, rgba(251,146,60,0.70), rgba(239,68,68,0.60), rgba(252,211,145,0.55));
  --gb-insight-color: rgba(254,215,170,0.80);
  --gb-insight-bg:    rgba(251,146,60,0.08);
  --gb-insight-border:rgba(251,146,60,0.20);
  --gb-live-color: rgba(239,68,68,0.60);
  --gb-live-dot:   #ef4444;
  --gb-av-bg:     linear-gradient(145deg, rgba(251,146,60,0.18), rgba(239,68,68,0.12), rgba(252,211,145,0.08));
  --gb-av-border: rgba(251,146,60,0.28);
  --gb-av-shadow: 0 0 0 2px rgba(251,146,60,0.06), 0 0 14px rgba(251,146,60,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
  --gb-kanji-shadow: 0 0 6px rgba(254,215,170,0.8), 0 0 14px rgba(251,146,60,0.60), 0 0 1px rgba(255,255,255,0.9);
  --gb-halo-grad:   linear-gradient(135deg, rgba(251,146,60,0.28), rgba(239,68,68,0.14), rgba(252,211,145,0.14), rgba(254,243,199,0.10));
  --gb-shimmer-mid: rgba(251,146,60,0.60);
  --gb-shimmer-pk:  rgba(255,255,255,0.70);
  --gb-shimmer-sec: rgba(239,68,68,0.55);
  --gb-shimmer-tri: rgba(252,211,145,0.28);
  --gb-wave1: rgba(251,146,60,0.08);
  --gb-wave2: rgba(239,68,68,0.06);
  --gb-wave3: rgba(252,211,145,0.055);
  --gb-aurora1: rgba(251,146,60,0.08);
  --gb-aurora2: rgba(252,211,145,0.04);
  --gb-aurora3: rgba(239,68,68,0.05);
}

/* ── GOLD ── */
#ai-greeting-banner[data-gbtheme="gold"] {
  --gb-a1: 251, 191,  36;
  --gb-a2: 245, 158,  11;
  --gb-a3: 253, 224, 132;
  --gb-hello-grad: linear-gradient(120deg, #fefce8 0%, #fef08a 25%, #fbbf24 50%, #f59e0b 72%, #d97706 90%);
  --gb-sub-grad:   linear-gradient(90deg, rgba(251,191,36,0.70), rgba(245,158,11,0.60), rgba(253,224,132,0.55));
  --gb-insight-color: rgba(254,249,195,0.80);
  --gb-insight-bg:    rgba(251,191,36,0.08);
  --gb-insight-border:rgba(251,191,36,0.20);
  --gb-live-color: rgba(245,158,11,0.65);
  --gb-live-dot:   #f59e0b;
  --gb-av-bg:     linear-gradient(145deg, rgba(251,191,36,0.18), rgba(245,158,11,0.12), rgba(253,224,132,0.08));
  --gb-av-border: rgba(251,191,36,0.28);
  --gb-av-shadow: 0 0 0 2px rgba(251,191,36,0.06), 0 0 14px rgba(251,191,36,0.22), inset 0 1px 0 rgba(255,255,255,0.12);
  --gb-kanji-shadow: 0 0 6px rgba(253,224,132,0.8), 0 0 14px rgba(251,191,36,0.60), 0 0 1px rgba(255,255,255,0.9);
  --gb-halo-grad:   linear-gradient(135deg, rgba(251,191,36,0.28), rgba(245,158,11,0.14), rgba(253,224,132,0.16), rgba(254,249,195,0.10));
  --gb-shimmer-mid: rgba(251,191,36,0.60);
  --gb-shimmer-pk:  rgba(255,255,255,0.72);
  --gb-shimmer-sec: rgba(245,158,11,0.55);
  --gb-shimmer-tri: rgba(253,224,132,0.28);
  --gb-wave1: rgba(251,191,36,0.08);
  --gb-wave2: rgba(245,158,11,0.06);
  --gb-wave3: rgba(253,224,132,0.055);
  --gb-aurora1: rgba(251,191,36,0.08);
  --gb-aurora2: rgba(253,224,132,0.04);
  --gb-aurora3: rgba(245,158,11,0.05);
}

/* ══════════════════════════════════════════════════════════════
   2. LAYOUT WRAPPER
   ══════════════════════════════════════════════════════════════ */
#ai-greeting-banner {
  max-width: 720px;
  margin: 16px auto 8px;
  padding: 0 12px;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  position: relative;
  animation: cardEntrance 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
#ai-greeting-banner::before { display: none !important; }
#ai-greeting-banner > .greeting-card { margin: 0; }
#ai-greeting-banner .gc { display: none; }

/* Outer halo ring */
#ai-greeting-banner::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: var(--gb-halo-grad);
  z-index: -1;
  opacity: 0.5;
  animation: outerHalo 6s ease-in-out infinite;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   3. CARD SHELL
   ══════════════════════════════════════════════════════════════ */
.greeting-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: var(--gb-card-bg);
  border: 1px solid var(--gb-card-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, var(--gb-card-shadow);
  animation: borderBreath 5s ease-in-out infinite;
}

/* Aurora blobs */
.greeting-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%,  var(--gb-aurora1) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%,  var(--gb-aurora2) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, var(--gb-aurora3) 0%, transparent 55%);
  animation: auroraShift 10s ease-in-out infinite alternate;
}

/* Top shimmer line */
.greeting-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gb-a1), 0) 15%,
    var(--gb-shimmer-mid) 38%,
    var(--gb-shimmer-pk)  50%,
    var(--gb-shimmer-sec) 62%,
    var(--gb-shimmer-tri) 82%,
    transparent 100%);
  animation: topShimmer 5s ease-in-out infinite;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   4. LIVE BADGE
   ══════════════════════════════════════════════════════════════ */
.greeting-scan { display: none; }

.greeting-live-badge {
  position: absolute;
  top: 12px; right: 38px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.18em;
  color: var(--gb-live-color);
  text-transform: uppercase;
  z-index: 3;
  animation: liveAppear 0.4s ease 0.8s both;
}
.glive-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gb-live-dot);
  animation: livePing 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════════════
   5. INNER LAYOUT
   ══════════════════════════════════════════════════════════════ */
.greeting-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 18px 12px;
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   6. AVATAR
   ══════════════════════════════════════════════════════════════ */
.greeting-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  background: var(--gb-av-bg) !important;
  border: 1px solid var(--gb-av-border) !important;
  box-shadow: var(--gb-av-shadow) !important;
  animation: avatarHolo 6s ease-in-out infinite !important;
}
.greeting-avatar::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  border: 1px solid rgba(var(--gb-a1), 0.18);
  animation: avatarRing 3.5s ease-in-out infinite;
  pointer-events: none;
}
.greeting-avatar::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 22px;
  border: 1px solid rgba(var(--gb-a2), 0.08);
  animation: avatarRing 3.5s ease-in-out infinite 0.6s;
  pointer-events: none;
}

/* Time-of-day avatar tints (work across all themes) */
.avatar-asa  { background: linear-gradient(145deg, rgba(255,180,200,0.20), rgba(249,168,212,0.14), rgba(192,132,252,0.10)) !important; border-color: rgba(249,168,212,0.30) !important; }
.avatar-hiru { background: linear-gradient(145deg, rgba(251,191,36,0.18),  rgba(250,210,100,0.12), rgba(52,211,153,0.10))  !important; border-color: rgba(251,191,36,0.28)  !important; }
.avatar-yu   { background: linear-gradient(145deg, rgba(251,146,60,0.18),  rgba(249,115,22,0.12),  rgba(192,132,252,0.10)) !important; border-color: rgba(251,146,60,0.28)  !important; }

.ksak-bg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* ── Kanji ── */
.kanji-3d {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 16px;
  font-weight: 900;
  position: relative;
  z-index: 2;
  color: var(--gb-kanji-color);
  text-shadow: var(--gb-kanji-shadow);
  animation: kanjiFloat 5s ease-in-out infinite;
}
.kanji-asa  { text-shadow: 0 0 6px rgba(255,192,210,0.8), 0 0 16px rgba(249,168,212,0.60), 0 0 1px rgba(255,255,255,0.9) !important; }
.kanji-hiru { text-shadow: 0 0 6px rgba(255,235,150,0.8), 0 0 16px rgba(251,191,36,0.60),  0 0 1px rgba(255,255,255,0.9) !important; }
.kanji-yu   { text-shadow: 0 0 6px rgba(255,200,150,0.8), 0 0 16px rgba(251,146,60,0.60),  0 0 1px rgba(255,255,255,0.9) !important; }

/* ══════════════════════════════════════════════════════════════
   7. TEXT AREA
   ══════════════════════════════════════════════════════════════ */
.greeting-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 3;
}

.greeting-hello {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-style: italic;
  background: var(--gb-hello-grad) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: holoText 7s ease-in-out infinite !important;
  margin-bottom: 3px !important;
  letter-spacing: 0.1px;
  line-height: 1.3;
}

.greeting-sub {
  font-family: 'DM Mono', 'Courier New', monospace !important;
  font-size: 9.5px !important;
  background: var(--gb-sub-grad) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  animation: none !important;
}
#greeting-time {
  background: inherit !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.greeting-insight {
  display: inline-block !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: var(--gb-insight-color) !important;
  background: var(--gb-insight-bg) !important;
  border: 1px solid var(--gb-insight-border) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
  box-shadow: 0 0 8px rgba(var(--gb-a1), 0.06), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  animation: insightGlow 5s ease-in-out infinite, insightSlideIn 0.5s ease 0.3s both !important;
}
.greeting-insight::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  animation: insightSweep 6s ease-in-out infinite;
  pointer-events: none;
}

/* Online dot (removed from HTML in v17, but keep the rule) */
.greeting-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--gb-live-dot) !important;
  flex-shrink: 0;
  position: relative; z-index: 3;
  align-self: flex-start;
  margin-top: 4px;
  box-shadow: 0 0 4px rgba(var(--gb-a3),0.7), 0 0 8px rgba(var(--gb-a3),0.3) !important;
  animation: dotCore 2.8s ease-in-out infinite !important;
}
.greeting-dot::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gb-a3),0.35);
  animation: dotRingG 2.8s ease-in-out infinite;
}
.greeting-dot::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gb-a3),0.15);
  animation: dotRingG 2.8s ease-in-out infinite 0.4s;
}

/* ══════════════════════════════════════════════════════════════
   8. WAVE FOOTER
   ══════════════════════════════════════════════════════════════ */
.mh-waveform {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.mh-wave-1 { position:absolute; bottom:-1px; left:0; width:200%; height:28px; animation:waveScroll1 8s linear infinite; }
.mh-wave-2 { position:absolute; bottom:-1px; left:0; width:200%; height:20px; animation:waveScroll2 6s linear infinite; }
.mh-wave-3 { position:absolute; bottom:-1px; left:0; width:200%; height:14px; animation:waveScroll3 4s linear infinite; }

.mh-wave-1::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Cpath d='M0 22 Q50 5 100 22 Q150 39 200 22 Q250 5 300 22 Q350 39 400 22 L400 44 L0 44 Z' fill='rgba(192%2C132%2C252%2C0.07)'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 50% 28px;
}
.mh-wave-2::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32'%3E%3Cpath d='M0 16 Q40 4 80 16 Q120 28 160 16 Q200 4 240 16 Q280 28 320 16 Q360 4 400 16 L400 32 L0 32 Z' fill='rgba(129%2C140%2C248%2C0.06)'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 50% 20px;
}
.mh-wave-3::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22'%3E%3Cpath d='M0 11 Q33 3 66 11 Q99 19 132 11 Q165 3 198 11 Q231 19 264 11 Q297 3 330 11 Q363 19 400 11 L400 22 L0 22 Z' fill='rgba(52%2C211%2C153%2C0.055)'/%3E%3C/svg%3E") repeat-x bottom;
  background-size: 50% 14px;
}

/* ══════════════════════════════════════════════════════════════
   9. THEME PICKER UI  — visible strip inside the banner footer
      Layout: label "Tema:" + 6 pill buttons, centred below content
   ══════════════════════════════════════════════════════════════ */

/* Wrapper — sits below .greeting-inner, above the wave */
.gb-theme-picker {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 12px 12px;
  /* subtle divider from greeting content */
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 2px;
  padding-top: 8px;
}

/* "Tema:" label */
.gb-theme-label {
  font-family: 'DM Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-right: 2px;
  white-space: nowrap;
  user-select: none;
}

/* Each pill button */
.gb-theme-swatch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 5px;
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease,
              background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  user-select: none;
  /* reset browser button styles */
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}

/* Colour dot inside each pill */
.gb-theme-swatch::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* colour set per-theme below */
}

.gb-theme-swatch:hover {
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,0.25);
}

.gb-theme-swatch.active {
  border-color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.12);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 3px 10px rgba(0,0,0,0.30);
  transform: translateY(-1px);
}

/* Per-theme dot colours */
.gb-swatch-cosmic::before { background: linear-gradient(135deg,#c084fc,#34d399); }
.gb-swatch-sakura::before { background: linear-gradient(135deg,#f9a8d4,#f472b6); }
.gb-swatch-ocean::before  { background: linear-gradient(135deg,#38bdf8,#6366f1); }
.gb-swatch-forest::before { background: linear-gradient(135deg,#34d399,#10b981); }
.gb-swatch-ember::before  { background: linear-gradient(135deg,#fb923c,#ef4444); }
.gb-swatch-gold::before   { background: linear-gradient(135deg,#fbbf24,#f59e0b); }

/* Sepia mode overrides — warm tones for the pill row */
body.sepia-mode #ai-greeting-banner .gb-theme-label {
  color: rgba(74,56,38,0.50);
}
body.sepia-mode #ai-greeting-banner .gb-theme-swatch {
  border-color: rgba(181,101,29,0.20);
  background: rgba(181,101,29,0.05);
  color: rgba(74,56,38,0.60);
}
body.sepia-mode #ai-greeting-banner .gb-theme-swatch:hover {
  border-color: rgba(181,101,29,0.45);
  background: rgba(181,101,29,0.10);
  color: rgba(74,56,38,0.90);
}
body.sepia-mode #ai-greeting-banner .gb-theme-swatch.active {
  border-color: rgba(181,101,29,0.70);
  background: rgba(181,101,29,0.14);
  color: #4a3826;
}
body.sepia-mode #ai-greeting-banner .gb-theme-picker {
  border-top-color: rgba(181,101,29,0.12);
}

/* ══════════════════════════════════════════════════════════════
   10. LIGHT MODE  (:root[data-theme="light"])
       Kartu PUTIH BERSIH — semua teks gelap & kontras tinggi.
   ══════════════════════════════════════════════════════════════ */

:root[data-theme="light"] #ai-greeting-banner .greeting-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,0.09) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.10),
    0 1px 0 rgba(255,255,255,1) inset !important;
}

/* Aurora blobs — versi terang, sangat subtle */
:root[data-theme="light"] #ai-greeting-banner .greeting-card::before {
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%,  rgba(var(--gb-a1),0.06) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%,  rgba(var(--gb-a2),0.04) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, rgba(var(--gb-a3),0.04) 0%, transparent 55%) !important;
}

/* Top shimmer line — lebih gelap supaya terlihat di latar putih */
:root[data-theme="light"] #ai-greeting-banner .greeting-card::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gb-a1),0.0) 15%,
    rgba(var(--gb-a1),0.50) 38%,
    rgba(var(--gb-a1),0.70) 50%,
    rgba(var(--gb-a2),0.50) 62%,
    rgba(var(--gb-a3),0.25) 82%,
    transparent 100%) !important;
}

/* Outer halo — softer untuk mode terang */
:root[data-theme="light"] #ai-greeting-banner::after {
  opacity: 0.25 !important;
}

/* Animasi border breath pakai warna gelap */
:root[data-theme="light"] #ai-greeting-banner .greeting-card {
  animation: borderBreathLight 5s ease-in-out infinite !important;
}
@keyframes borderBreathLight {
  0%,100% { border-color: rgba(0,0,0,0.10); }
  50%      { border-color: rgba(var(--gb-a1),0.35); }
}

/* ── Avatar: background putih + border aksen berwarna ── */
:root[data-theme="light"] #ai-greeting-banner .greeting-avatar {
  background: linear-gradient(145deg,
    rgba(var(--gb-a1),0.12),
    rgba(var(--gb-a2),0.08),
    rgba(var(--gb-a3),0.06)) !important;
  border: 1.5px solid rgba(var(--gb-a1),0.40) !important;
  box-shadow:
    0 0 0 3px rgba(var(--gb-a1),0.08),
    0 0 12px rgba(var(--gb-a1),0.15),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;
}

/* ── Kanji: warna gelap + shadow aksen ── */
:root[data-theme="light"] #ai-greeting-banner .kanji-3d {
  color: #1e0a3c !important;
  text-shadow:
    0 0 8px rgba(var(--gb-a1),0.30),
    0 1px 2px rgba(0,0,0,0.12) !important;
}
:root[data-theme="light"] #ai-greeting-banner .kanji-asa {
  color: #6b1f4a !important;
  text-shadow: 0 0 8px rgba(249,168,212,0.50), 0 1px 2px rgba(0,0,0,0.10) !important;
}
:root[data-theme="light"] #ai-greeting-banner .kanji-hiru {
  color: #7a4a00 !important;
  text-shadow: 0 0 8px rgba(251,191,36,0.50), 0 1px 2px rgba(0,0,0,0.10) !important;
}
:root[data-theme="light"] #ai-greeting-banner .kanji-yu {
  color: #7c2d00 !important;
  text-shadow: 0 0 8px rgba(251,146,60,0.50), 0 1px 2px rgba(0,0,0,0.10) !important;
}

/* ── Greeting hello: gradient gelap, terbaca di putih ── */
:root[data-theme="light"] #ai-greeting-banner .greeting-hello {
  background: linear-gradient(120deg,
    #4c1d95 0%, #6d28d9 30%, #7c3aed 55%, #2563eb 80%, #0369a1 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Tema sakura — hello teks lebih gelap */
:root[data-theme="light"] #ai-greeting-banner[data-gbtheme="sakura"] .greeting-hello {
  background: linear-gradient(120deg, #9d174d 0%, #be185d 40%, #db2777 70%, #7c3aed 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="light"] #ai-greeting-banner[data-gbtheme="ocean"] .greeting-hello {
  background: linear-gradient(120deg, #0c4a6e 0%, #0369a1 40%, #0284c7 70%, #4338ca 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="light"] #ai-greeting-banner[data-gbtheme="forest"] .greeting-hello {
  background: linear-gradient(120deg, #14532d 0%, #166534 40%, #15803d 70%, #0f766e 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="light"] #ai-greeting-banner[data-gbtheme="ember"] .greeting-hello {
  background: linear-gradient(120deg, #7c2d12 0%, #9a3412 40%, #c2410c 70%, #991b1b 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="light"] #ai-greeting-banner[data-gbtheme="gold"] .greeting-hello {
  background: linear-gradient(120deg, #78350f 0%, #92400e 40%, #b45309 70%, #d97706 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Sub (monospace kecil): warna gelap solid ── */
:root[data-theme="light"] #ai-greeting-banner .greeting-sub {
  background: linear-gradient(90deg,
    rgba(var(--gb-a1),1.0),
    rgba(var(--gb-a2),0.85),
    rgba(var(--gb-a3),0.90)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: brightness(0.55) !important;   /* gelapkan agar kontras di putih */
}

/* ── Insight badge: background abu terang, teks gelap ── */
:root[data-theme="light"] #ai-greeting-banner .greeting-insight {
  color: #1e1b2e !important;
  background: rgba(var(--gb-a1),0.07) !important;
  border: 1px solid rgba(var(--gb-a1),0.25) !important;
  box-shadow: 0 1px 4px rgba(var(--gb-a1),0.08), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

/* ── Live badge & dot ── */
:root[data-theme="light"] #ai-greeting-banner .greeting-live-badge {
  color: rgba(var(--gb-a1),0.75) !important;
  filter: brightness(0.65) !important;
}
:root[data-theme="light"] #ai-greeting-banner .glive-dot {
  background: rgb(var(--gb-a1)) !important;
  filter: brightness(0.7) !important;
}

/* ── Theme picker pills di mode terang ── */
:root[data-theme="light"] #ai-greeting-banner .gb-theme-picker {
  border-top-color: rgba(0,0,0,0.08) !important;
}
:root[data-theme="light"] #ai-greeting-banner .gb-theme-label {
  color: rgba(0,0,0,0.40) !important;
}
:root[data-theme="light"] #ai-greeting-banner .gb-theme-swatch {
  border-color: rgba(0,0,0,0.14) !important;
  background: rgba(0,0,0,0.03) !important;
  color: rgba(0,0,0,0.55) !important;
}
:root[data-theme="light"] #ai-greeting-banner .gb-theme-swatch:hover {
  border-color: rgba(var(--gb-a1),0.50) !important;
  background: rgba(var(--gb-a1),0.07) !important;
  color: rgba(0,0,0,0.80) !important;
  filter: brightness(0.85);
}
:root[data-theme="light"] #ai-greeting-banner .gb-theme-swatch.active {
  border-color: rgba(var(--gb-a1),0.80) !important;
  background: rgba(var(--gb-a1),0.12) !important;
  color: rgba(0,0,0,0.90) !important;
  filter: brightness(0.75);
  box-shadow: 0 0 0 2px rgba(var(--gb-a1),0.15), 0 2px 6px rgba(0,0,0,0.10) !important;
}

/* Wave di mode terang — sedikit lebih terlihat */
:root[data-theme="light"] #ai-greeting-banner .mh-wave-1::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Cpath d='M0 22 Q50 5 100 22 Q150 39 200 22 Q250 5 300 22 Q350 39 400 22 L400 44 L0 44 Z' fill='rgba(var(--gb-a1)%2C0.08)'/%3E%3C/svg%3E") !important;
  background-size: 50% 28px !important;
}
:root[data-theme="light"] #ai-greeting-banner .mh-wave-2::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32'%3E%3Cpath d='M0 16 Q40 4 80 16 Q120 28 160 16 Q200 4 240 16 Q280 28 320 16 Q360 4 400 16 L400 32 L0 32 Z' fill='rgba(var(--gb-a2)%2C0.06)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 20px !important;
}
:root[data-theme="light"] #ai-greeting-banner .mh-wave-3::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22'%3E%3Cpath d='M0 11 Q33 3 66 11 Q99 19 132 11 Q165 3 198 11 Q231 19 264 11 Q297 3 330 11 Q363 19 400 11 L400 22 L0 22 Z' fill='rgba(var(--gb-a3)%2C0.055)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 14px !important;
}
/* Scan line — lebih terang di light mode */
:root[data-theme="light"] #ai-greeting-banner .greeting-scan {
  background: linear-gradient(90deg, transparent, rgba(var(--gb-a1),0.06), transparent) !important;
}

/* Live dot pulse warna terang */
:root[data-theme="light"] #ai-greeting-banner .glive-dot {
  animation: livePingLight 2s ease-in-out infinite !important;
}
@keyframes livePingLight {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--gb-a1),0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 0 3px rgba(var(--gb-a1),0); transform: scale(1.1); }
}

/* ══════════════════════════════════════════════════════════════
   11. SEPIA / READ MODE  (body.sepia-mode)
       Banner COKLAT HANGAT SOLID — seperti kulit buku vintage.
       Semua elemen memakai palet coklat & teks krem terbaca.
   ══════════════════════════════════════════════════════════════ */

/* ── Card: coklat kayu hangat solid ── */
body.sepia-mode #ai-greeting-banner .greeting-card {
  background: #5c3317 !important;          /* coklat kayu */
  border: 1.5px solid rgba(255,200,140,0.22) !important;
  box-shadow:
    0 4px 24px rgba(40,20,5,0.35),
    0 1px 0 rgba(255,220,170,0.18) inset !important;
}

/* Aurora blobs — hangat keemasan */
body.sepia-mode #ai-greeting-banner .greeting-card::before {
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%,  rgba(255,180,80,0.12)  0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%,  rgba(200,120,40,0.08)  0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, rgba(255,210,130,0.10) 0%, transparent 55%) !important;
}

/* Top shimmer — cahaya lilin */
body.sepia-mode #ai-greeting-banner .greeting-card::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,200,120,0.0)  15%,
    rgba(255,200,120,0.55) 38%,
    rgba(255,230,170,0.70) 50%,
    rgba(220,160,80,0.50)  62%,
    rgba(200,140,60,0.25)  82%,
    transparent 100%) !important;
}

/* Outer halo — sinar coklat tua */
body.sepia-mode #ai-greeting-banner::after {
  background: linear-gradient(135deg,
    rgba(180,100,30,0.30),
    rgba(140,80,20,0.18),
    rgba(200,140,60,0.18),
    rgba(255,200,120,0.12)) !important;
  opacity: 0.6 !important;
}

/* Border breath animation — coklat ke emas */
body.sepia-mode #ai-greeting-banner .greeting-card {
  animation: borderBreathSepia 5s ease-in-out infinite !important;
}
@keyframes borderBreathSepia {
  0%,100% { border-color: rgba(255,200,140,0.20); }
  50%      { border-color: rgba(255,180,80,0.45);  }
}

/* ── Avatar: lingkaran gelap coklat tua + border emas ── */
body.sepia-mode #ai-greeting-banner .greeting-avatar {
  background: linear-gradient(145deg,
    rgba(255,180,80,0.22),
    rgba(200,120,40,0.15),
    rgba(255,210,130,0.10)) !important;
  border: 1.5px solid rgba(255,190,100,0.50) !important;
  box-shadow:
    0 0 0 3px rgba(255,180,80,0.10),
    0 0 14px rgba(200,120,40,0.25),
    inset 0 1px 0 rgba(255,230,170,0.30) !important;
}

/* ── Kanji: krem cerah di atas coklat gelap ── */
body.sepia-mode #ai-greeting-banner .kanji-3d {
  color: #ffe4b0 !important;
  text-shadow:
    0 0 8px rgba(255,180,80,0.60),
    0 0 18px rgba(200,120,40,0.40),
    0 1px 2px rgba(40,20,5,0.50) !important;
}
body.sepia-mode #ai-greeting-banner .kanji-asa  { color: #ffd0b0 !important; }
body.sepia-mode #ai-greeting-banner .kanji-hiru { color: #ffe880 !important; }
body.sepia-mode #ai-greeting-banner .kanji-yu   { color: #ffbf88 !important; }

/* ── Greeting hello: gradient krem — emas — oranye hangat ── */
body.sepia-mode #ai-greeting-banner .greeting-hello {
  background: linear-gradient(120deg,
    #fff3d0 0%,
    #ffd580 30%,
    #ffb347 55%,
    #ff8c42 78%,
    #ffe0a0 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── Sub text: krem muted ── */
body.sepia-mode #ai-greeting-banner .greeting-sub {
  background: linear-gradient(90deg,
    rgba(255,210,140,0.80),
    rgba(255,180,90,0.70),
    rgba(220,170,100,0.75)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: none !important;
}

/* ── Insight badge: coklat lebih gelap, teks krem ── */
body.sepia-mode #ai-greeting-banner .greeting-insight {
  color: #ffe4b0 !important;
  background: rgba(255,180,80,0.12) !important;
  border: 1px solid rgba(255,190,100,0.30) !important;
  box-shadow: 0 0 8px rgba(200,120,40,0.10), inset 0 1px 0 rgba(255,230,170,0.10) !important;
}

/* ── Live badge ── */
body.sepia-mode #ai-greeting-banner .greeting-live-badge {
  color: rgba(255,220,130,0.75) !important;
}
body.sepia-mode #ai-greeting-banner .glive-dot {
  background: #f5a623 !important;
  box-shadow: 0 0 4px rgba(245,166,35,0.80), 0 0 8px rgba(245,166,35,0.40) !important;
}

/* ── Wave footer — coklat gelap ── */
body.sepia-mode #ai-greeting-banner .mh-wave-1::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44'%3E%3Cpath d='M0 22 Q50 5 100 22 Q150 39 200 22 Q250 5 300 22 Q350 39 400 22 L400 44 L0 44 Z' fill='rgba(40%2C20%2C5%2C0.25)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 28px !important;
}
body.sepia-mode #ai-greeting-banner .mh-wave-2::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32'%3E%3Cpath d='M0 16 Q40 4 80 16 Q120 28 160 16 Q200 4 240 16 Q280 28 320 16 Q360 4 400 16 L400 32 L0 32 Z' fill='rgba(40%2C20%2C5%2C0.18)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 20px !important;
}
body.sepia-mode #ai-greeting-banner .mh-wave-3::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 22'%3E%3Cpath d='M0 11 Q33 3 66 11 Q99 19 132 11 Q165 3 198 11 Q231 19 264 11 Q297 3 330 11 Q363 19 400 11 L400 22 L0 22 Z' fill='rgba(255%2C180%2C80%2C0.12)'/%3E%3C/svg%3E") repeat-x bottom !important;
  background-size: 50% 14px !important;
}

/* ── Theme picker pills di mode baca ── */
body.sepia-mode #ai-greeting-banner .gb-theme-picker {
  border-top-color: rgba(255,200,140,0.18) !important;
}
/* Scan line — hangat di sepia mode */
body.sepia-mode #ai-greeting-banner .greeting-scan {
  background: linear-gradient(90deg, transparent, rgba(255,200,120,0.10), transparent) !important;
}
body.sepia-mode #ai-greeting-banner .gb-theme-label {
  color: rgba(255,220,160,0.50) !important;
}
body.sepia-mode #ai-greeting-banner .gb-theme-swatch {
  border-color: rgba(255,200,140,0.22) !important;
  background: rgba(255,180,80,0.08) !important;
  color: rgba(255,220,160,0.65) !important;
}
body.sepia-mode #ai-greeting-banner .gb-theme-swatch:hover {
  border-color: rgba(255,190,100,0.55) !important;
  background: rgba(255,180,80,0.16) !important;
  color: #ffe4b0 !important;
}
body.sepia-mode #ai-greeting-banner .gb-theme-swatch.active {
  border-color: rgba(255,190,100,0.80) !important;
  background: rgba(255,180,80,0.22) !important;
  color: #fff3d0 !important;
  box-shadow: 0 0 0 2px rgba(255,180,80,0.18), 0 2px 8px rgba(40,20,5,0.25) !important;
}

/* ══════════════════════════════════════════════════════════════
   12. KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════════ */
@keyframes auroraShift {
  0%   { opacity:0.6; transform:scale(1) translate(0,0); }
  50%  { opacity:1;   transform:scale(1.02) translate(1.5%,0.5%); }
  100% { opacity:0.7; transform:scale(1.01) translate(-0.5%,-0.3%); }
}
@keyframes avatarHolo {
  0%,100% { transform:translateY(0) scale(1); }
  33%  { transform:translateY(-3px) scale(1.02); }
  66%  { transform:translateY(-1px) scale(1.01); }
}
@keyframes avatarRing {
  0%,100% { opacity:.5; transform:scale(1); }
  50% { opacity:.08; transform:scale(1.1); }
}
@keyframes borderBreath {
  0%,100% { border-color:rgba(255,255,255,0.07); }
  50%  { border-color:rgba(var(--gb-a1),0.18); }
}
@keyframes cardEntrance {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes dotCore {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.2); }
}
@keyframes dotRingG {
  0%,100% { opacity:.5; transform:scale(1); }
  50% { opacity:.08; transform:scale(1.4); }
}
@keyframes holoText {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
@keyframes insightGlow {
  0%,100% { border-color:rgba(var(--gb-a1),0.14); box-shadow:0 0 6px rgba(var(--gb-a1),0.05),inset 0 1px 0 rgba(255,255,255,0.04); }
  50% { border-color:rgba(var(--gb-a1),0.28); box-shadow:0 0 12px rgba(var(--gb-a1),0.10),inset 0 1px 0 rgba(255,255,255,0.07); }
}
@keyframes insightSlideIn {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes insightSweep {
  0%   { left:-100%; opacity:0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { left:100%; opacity:0; }
}
@keyframes kanjiFloat {
  0%,100% { transform:translateY(0) scale(1); filter:brightness(1); }
  40%  { transform:translateY(-2px) scale(1.04); filter:brightness(1.1); }
  70%  { transform:translateY(-1px) scale(1.02); filter:brightness(1.06); }
}
@keyframes liveAppear {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes livePing {
  0%,100% { box-shadow:0 0 0 0 rgba(52,211,153,0.5); transform:scale(1); }
  50%  { box-shadow:0 0 0 3px rgba(52,211,153,0); transform:scale(1.1); }
}
@keyframes outerHalo {
  0%,100% { opacity:0.3; }
  50% { opacity:0.55; }
}
@keyframes topShimmer {
  0%   { opacity:0.2; transform:scaleX(0.4) translateX(-40%); }
  50%  { opacity:0.8; transform:scaleX(1) translateX(0); }
  100% { opacity:0.2; transform:scaleX(0.4) translateX(40%); }
}
@keyframes waveScroll1 { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
@keyframes waveScroll2 { from{transform:translateX(-8%)}  to{transform:translateX(-58%)} }
@keyframes waveScroll3 { from{transform:translateX(-4%)}  to{transform:translateX(-54%)} }

/* ══════════════════════════════════════════════════════════════
   13. JS-DRIVEN THEME FALLBACK  (data-pagetheme set by greeting-banner.js)
       Redundant layer — works even if :root[data-theme] selectors fail.
   ══════════════════════════════════════════════════════════════ */

#ai-greeting-banner[data-pagetheme="light"] .greeting-card {
  background: #ffffff !important;
  border: 1.5px solid rgba(0,0,0,0.09) !important;
}
#ai-greeting-banner[data-pagetheme="light"] .greeting-hello {
  background: linear-gradient(120deg, #4c1d95 0%, #6d28d9 30%, #7c3aed 55%, #2563eb 80%, #0369a1 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#ai-greeting-banner[data-pagetheme="light"] .greeting-sub {
  background: linear-gradient(90deg, rgba(109,40,217,1.0), rgba(99,102,241,0.85), rgba(52,211,153,0.90)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: brightness(0.55) !important;
}
#ai-greeting-banner[data-pagetheme="light"] .greeting-insight {
  color: #1e1b2e !important;
  background: rgba(109,40,217,0.07) !important;
  border: 1px solid rgba(109,40,217,0.25) !important;
}
#ai-greeting-banner[data-pagetheme="light"] .kanji-3d {
  color: #1e0a3c !important;
}
#ai-greeting-banner[data-pagetheme="light"] .greeting-avatar {
  background: linear-gradient(145deg, rgba(192,132,252,0.12), rgba(129,140,248,0.08), rgba(52,211,153,0.06)) !important;
  border: 1.5px solid rgba(192,132,252,0.40) !important;
}
#ai-greeting-banner[data-pagetheme="light"] .greeting-live-badge {
  color: rgba(109,40,217,0.65) !important;
  filter: brightness(0.65) !important;
}
#ai-greeting-banner[data-pagetheme="light"] .glive-dot {
  background: #7c3aed !important;
  filter: brightness(0.7) !important;
}

#ai-greeting-banner[data-pagetheme="sepia"] .greeting-card {
  background: #5c3317 !important;
  border: 1.5px solid rgba(255,200,140,0.22) !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .greeting-hello {
  background: linear-gradient(120deg, #fff3d0 0%, #ffd580 30%, #ffb347 55%, #ff8c42 78%, #ffe0a0 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .greeting-sub {
  background: linear-gradient(90deg, rgba(255,210,140,0.80), rgba(255,180,90,0.70), rgba(220,170,100,0.75)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .greeting-insight {
  color: #ffe4b0 !important;
  background: rgba(255,180,80,0.12) !important;
  border: 1px solid rgba(255,190,100,0.30) !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .kanji-3d {
  color: #ffe4b0 !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .greeting-avatar {
  background: linear-gradient(145deg, rgba(255,180,80,0.22), rgba(200,120,40,0.15), rgba(255,210,130,0.10)) !important;
  border: 1.5px solid rgba(255,190,100,0.50) !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .greeting-live-badge {
  color: rgba(255,220,130,0.75) !important;
}
#ai-greeting-banner[data-pagetheme="sepia"] .glive-dot {
  background: #f5a623 !important;
}