/* ===================================================================
   JLPT GREETING BANNER STYLES — Extracted from jlpt-site-fixed-v2
   Includes: greeting card, avatar (kanji 3D), sun orb, waveform,
   time-based themes (asa/hiru/yu/yoru), live badge, particles
   =================================================================== */

#ai-greeting-banner{background:linear-gradient(135deg,rgba(192,132,252,0.08) 0%,rgba(129,140,248,0.06) 50%,rgba(52,211,153,0.04) 100%);border:1px solid rgba(192,132,252,0.18);border-radius:14px;padding:10px 14px;margin-bottom:4px;position:relative;overflow:hidden}
#ai-greeting-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(192,132,252,0.5),rgba(129,140,248,0.5),transparent)}
.greeting-inner{display:flex;align-items:center;gap:10px}
.greeting-avatar{width:34px;height:34px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,rgba(192,132,252,0.25),rgba(129,140,248,0.2));border:1px solid rgba(192,132,252,0.3);display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 0 14px rgba(192,132,252,0.2)}
.greeting-text{flex:1}
.greeting-hello{font-family:serif;font-size:14px;background:linear-gradient(135deg,#e8e6f0,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2px}
.greeting-sub{font-size:10px;color:rgba(232,230,240,0.55);font-family:'DM Mono',monospace}
.greeting-insight{font-size:11px;color:rgba(232,230,240,0.75);margin-top:4px;line-height:1.4;padding-top:4px;border-top:1px solid rgba(255,255,255,0.06)}
.greeting-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,0.6);flex-shrink:0}
.mh-waveform{position:absolute;bottom:0;left:0;right:0;height:40px;overflow:hidden;pointer-events:none}
#ai-greeting-banner{width:100%;position:relative;margin-bottom:4px;animation:cardEntrance 0.6s cubic-bezier(0.22,1,0.36,1) both}
#ai-greeting-banner::before{content:'';position:absolute;inset:-1px;border-radius:20px;background: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));z-index:-1;opacity:0.5;filter: none;animation:outerHalo 6s ease-in-out infinite}
.greeting-card{position:relative;border-radius:18px;overflow:hidden;isolation:isolate;background:rgba(9,7,18,0.92);border:1px solid rgba(255,255,255,0.07);box-shadow:0 1px 0 rgba(255,255,255,0.05) inset,0 8px 32px rgba(0,0,0,0.55);animation:borderBreath 5s ease-in-out infinite}
.greeting-card::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse 70% 55% at 10% 50%,rgba(192,132,252,0.07) 0%,transparent 65%),radial-gradient(ellipse 45% 70% at 90% 15%,rgba(52,211,153,0.04) 0%,transparent 60%),radial-gradient(ellipse 55% 45% at 55% 100%,rgba(129,140,248,0.05) 0%,transparent 55%);animation:auroraShift 10s ease-in-out infinite alternate}
.greeting-card::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(192,132,252,0.0) 15%,rgba(192,132,252,0.55) 38%,rgba(255,255,255,0.65) 50%,rgba(129,140,248,0.55) 62%,rgba(52,211,153,0.25) 82%,transparent 100%);animation:topShimmer 5s ease-in-out infinite;z-index:2}
.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:rgba(52,211,153,0.50);text-transform:uppercase;z-index:3;animation:liveAppear 0.4s ease 0.8s both}
.glive-dot{width:4px;height:4px;border-radius:50%;background:#34d399;animation:livePing 2s ease-in-out infinite}
.greeting-inner{display:flex;align-items:center;gap:10px;padding:10px 14px 18px 12px;position:relative;z-index:2}
.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:linear-gradient(145deg,rgba(192,132,252,0.18),rgba(129,140,248,0.12),rgba(52,211,153,0.08)) !important;border:1px solid rgba(192,132,252,0.25) !important;box-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) !important;animation:avatarHolo 6s ease-in-out infinite !important}
.greeting-avatar::before{content:'';position:absolute;inset:-5px;border-radius:18px;border:1px solid rgba(192,132,252,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(129,140,248,0.08);animation:avatarRing 3.5s ease-in-out infinite 0.6s;pointer-events:none}
.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-3d{font-family:'Noto Serif JP','Yu Mincho',serif;font-size:16px;font-weight:900;position:relative;z-index:2;color:#fff;text-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);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}
.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:linear-gradient(120deg,#f4f0ff 0%,#ddd6fe 25%,#c084fc 50%,#a78bfa 72%,#93c5fd 90%) !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:linear-gradient(90deg,rgba(192,132,252,0.60),rgba(129,140,248,0.50),rgba(52,211,153,0.55)) !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:rgba(220,215,240,0.75) !important;background:rgba(192,132,252,0.07) !important;border:1px solid rgba(192,132,252,0.16) !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(192,132,252,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}
.greeting-dot{width:7px !important;height:7px !important;border-radius:50% !important;background:#34d399 !important;flex-shrink:0;position:relative;z-index:3;align-self:flex-start;margin-top:4px;box-shadow:0 0 4px rgba(52,211,153,0.7),0 0 8px rgba(52,211,153,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(52,211,153,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(52,211,153,0.15);animation:dotRingG 2.8s ease-in-out infinite 0.4s}
.sun-orb{width:72px !important;height:72px !important;border-radius:50% !important;background:none !important;box-shadow:none !important;position:relative;flex-shrink:0;align-self:center !important;display:flex !important;align-items:center;justify-content:center}
.sun-glow-ring{position:absolute;border-radius:50%;border-style:solid;pointer-events:none;z-index:2}
.sun-ring-1{width:58px;height:58px;border-width:2px;border-color:rgba(255,215,0,0.55);box-shadow:0 0 10px rgba(255,215,0,0.3),inset 0 0 8px rgba(255,200,0,0.1);animation:sunRing 3s ease-in-out infinite}
.sun-ring-2{width:70px;height:70px;border-width:1px;border-color:rgba(255,165,0,0.25);animation:sunRing 3s ease-in-out infinite 0.5s}
.sun-video-circle{position:absolute;width:48px;height:48px;border-radius:50%;overflow:hidden;z-index:3;box-shadow:0 0 10px 3px rgba(255,215,0,0.8),0 0 22px 8px rgba(255,160,0,0.5),0 0 36px 14px rgba(255,100,0,0.25);border:2px solid rgba(255,220,80,0.85);animation:sunPulse 3s ease-in-out infinite}
.sun-video{width:100%;height:100%;object-fit:cover;border-radius:50%}
.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-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{position:absolute;bottom:-1px;left:0;width:200%;height:20px;animation:waveScroll2 6s linear infinite}
.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{position:absolute;bottom:-1px;left:0;width:200%;height:14px;animation:waveScroll3 4s linear infinite}
.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}

/* --- Keyframe animations used by the greeting banner --- */
@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);box-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)}33%{transform:translateY(-3px) scale(1.02);box-shadow:0 0 0 3px rgba(192,132,252,0.09),0 0 22px rgba(192,132,252,0.32),inset 0 1px 0 rgba(255,255,255,0.14)}66%{transform:translateY(-1px) scale(1.01);box-shadow:0 0 0 2px rgba(129,140,248,0.07),0 0 16px rgba(129,140,248,0.25),inset 0 1px 0 rgba(255,255,255,0.12)}}
@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(192,132,252,0.18)}}
@keyframes cardEntrance{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dotCore{0%,100%{transform:scale(1);box-shadow:0 0 4px rgba(52,211,153,0.7),0 0 8px rgba(52,211,153,0.3)}50%{transform:scale(1.2);box-shadow:0 0 7px rgba(52,211,153,0.9),0 0 14px rgba(52,211,153,0.5)}}
@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(192,132,252,0.14);box-shadow:0 0 6px rgba(192,132,252,0.05),inset 0 1px 0 rgba(255,255,255,0.04)}50%{border-color:rgba(192,132,252,0.28);box-shadow:0 0 12px rgba(192,132,252,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 sunPulse{0%,100%{box-shadow:0 0 10px 3px rgba(255,215,0,0.8),0 0 22px 8px rgba(255,160,0,0.5),0 0 36px 14px rgba(255,100,0,0.25)}50%{box-shadow:0 0 16px 5px rgba(255,230,0,1),0 0 30px 12px rgba(255,165,0,0.7),0 0 50px 20px rgba(255,100,0,0.4)}}
@keyframes sunRing{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:.12;transform:scale(1.2)}}
@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%)}}

/* ====================================================================
   N2 BUNPO INTEGRATION — Layout glue for the host page
   Keeps the banner narrow and centered like the rest of the bunpo content.
   ==================================================================== */
#ai-greeting-banner{
  max-width: 720px;
  margin: 16px auto 8px;
  padding: 0 12px;
  box-sizing: border-box;
  /* The extracted rules give #ai-greeting-banner a translucent panel
     background by default; here we want the visible card to be the
     .greeting-card child, so the outer wrapper stays transparent. */
  background: transparent !important;
  border: 0 !important;
}
#ai-greeting-banner::before{ display:none !important; }
#ai-greeting-banner > .greeting-card{
  margin: 0;
}
/* Hide decorative corners — they reference selectors not present here */
#ai-greeting-banner .gc{ display:none; }

/* ====================================================================
   LIGHT MODE — the base rules above are tuned for a near-black card
   on a dark page (light text, neon-purple glows on a dark backdrop).
   On data-theme="light" the page background is pale (#f5f5f5) and the
   card text is dark, so the original purple-on-black palette is
   recolored using the site's existing --card-bg / --text / --muted /
   --accent-purple variables to keep contrast correct and avoid the
   neon glows fighting with a bright background.
   ==================================================================== */
:root[data-theme="light"] #ai-greeting-banner .greeting-card{
  background: var(--card-bg);
  border-color: var(--card-border);
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 6px 20px rgba(0,0,0,0.08);
}
:root[data-theme="light"] #ai-greeting-banner .greeting-card::before{
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%, rgba(123,31,162,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%, rgba(76,175,80,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, rgba(2,119,189,0.05) 0%, transparent 55%);
}
:root[data-theme="light"] #ai-greeting-banner .greeting-card::after{
  background: linear-gradient(90deg, transparent 0%, rgba(123,31,162,0.0) 15%, rgba(123,31,162,0.35) 38%, rgba(0,0,0,0.25) 50%, rgba(2,119,189,0.35) 62%, rgba(76,175,80,0.20) 82%, transparent 100%);
}
:root[data-theme="light"] #ai-greeting-banner .greeting-avatar{
  background: linear-gradient(145deg, var(--pink-soft), rgba(123,31,162,0.10)) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 0 0 2px rgba(123,31,162,0.06), 0 0 10px rgba(123,31,162,0.10), inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
:root[data-theme="light"] #ai-greeting-banner .kanji-3d{
  color: var(--accent-purple-bg);
  text-shadow: none;
}
:root[data-theme="light"] #ai-greeting-banner .greeting-hello{
  background: linear-gradient(120deg, var(--accent-purple-bg) 0%, var(--accent-purple) 50%, var(--accent-blue) 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 .greeting-sub{
  background: linear-gradient(90deg, var(--accent-purple-bg), var(--accent-blue), #4caf50) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
:root[data-theme="light"] #ai-greeting-banner .greeting-insight{
  color: var(--text) !important;
  background: var(--card-bg-alt) !important;
  border-color: var(--card-border) !important;
  box-shadow: none !important;
}
:root[data-theme="light"] #ai-greeting-banner .greeting-live-badge{
  color: rgba(76,175,80,0.75);
}

/* ====================================================================
   SEPIA MODE ("Kertas Hangat") — warm cream background with brown
   ink text; the dark neon-on-black palette is replaced with the
   sepia variables so the card reads as warm paper, not a dark panel
   dropped onto cream.
   ==================================================================== */
body.sepia-mode #ai-greeting-banner .greeting-card{
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 6px 20px rgba(74,56,38,0.10) !important;
}
body.sepia-mode #ai-greeting-banner .greeting-card::before{
  background:
    radial-gradient(ellipse 70% 55% at 10% 50%, rgba(181,101,29,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 70% at 90% 15%, rgba(124,154,58,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 45% at 55% 100%, rgba(61,114,164,0.05) 0%, transparent 55%) !important;
}
body.sepia-mode #ai-greeting-banner .greeting-card::after{
  background: linear-gradient(90deg, transparent 0%, transparent 15%, rgba(181,101,29,0.35) 38%, rgba(74,56,38,0.30) 50%, rgba(61,114,164,0.30) 62%, rgba(124,154,58,0.20) 82%, transparent 100%) !important;
}
body.sepia-mode #ai-greeting-banner .greeting-avatar{
  background: linear-gradient(145deg, var(--pink-soft), rgba(181,101,29,0.10)) !important;
  border-color: var(--card-border) !important;
  box-shadow: 0 0 0 2px rgba(181,101,29,0.08), 0 0 10px rgba(181,101,29,0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
body.sepia-mode #ai-greeting-banner .kanji-3d{
  color: var(--pink) !important;
  text-shadow: none !important;
}
body.sepia-mode #ai-greeting-banner .greeting-hello{
  background: linear-gradient(120deg, var(--pink) 0%, #8a4fa0 50%, #3d72a4 100%) !important;
  background-size: 220% 100% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.sepia-mode #ai-greeting-banner .greeting-sub{
  background: linear-gradient(90deg, var(--pink), #3d72a4, #7c9a3a) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
body.sepia-mode #ai-greeting-banner .greeting-insight{
  color: var(--text) !important;
  background: var(--card-bg-alt) !important;
  border-color: var(--card-border) !important;
  box-shadow: none !important;
}
body.sepia-mode #ai-greeting-banner .greeting-live-badge{
  color: rgba(124,154,58,0.85) !important;
}