/* Berina full redesign styles: glassmorphism, gradients, cinematic layout, particles */
:root{
  --bg-1: #0b1020;
  --navbar-height: 72px;
  --glass-1: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.08);
  --accent-1: #7c3aed;
  --accent-2: #6dd3ff;
  --muted: #98a0b3;
}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{background:linear-gradient(180deg,#071025 0%, #071427 45%, #08111b 100%);overflow:visible;color:#e6eef9}
/* animated background overlay */
.chat-welcome{position:fixed;top:calc(var(--navbar-height) + 82px);left:0;right:0;bottom:calc(220px + env(safe-area-inset-bottom));display:flex;align-items:flex-start;justify-content:flex-start;padding-top:8px;z-index:20}
#particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.hero{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 20px 8px;box-sizing:border-box;max-height:360px;overflow:visible;justify-content:flex-start}
/* orb */
.hero-orb-wrap{position:relative;width:260px;height:260px;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-orb{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:6;background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));box-shadow:0 20px 50px rgba(12,16,40,0.45), inset 0 2px 10px rgba(255,255,255,0.03);}
.hero-orb img{width:78%;height:78%;object-fit:contain}
.orb-ring{position:absolute;inset:0;border-radius:50%;z-index:3;opacity:0.7;pointer-events:none;transition:opacity .5s}
/* glowing halo */
.orb-halo{position:absolute;inset:-8px;border-radius:50%;z-index:2;background:radial-gradient(circle at 40% 30%, rgba(124,58,237,0.22), rgba(6,214,210,0.06) 40%, rgba(4,8,20,0) 60%)}
/* sequential language overlay centered on the mascot */
#hello-orbit{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:visible;display:flex;align-items:center;justify-content:center}
.hero-language-rotator{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;pointer-events:none;text-align:center;display:flex;align-items:center;justify-content:center;min-width:100%}
.hero-language-text{display:block;max-width:min(88vw, 520px);padding:0.25rem 0.75rem;font-weight:800;font-size:clamp(2rem, 6vw, 4.9rem);line-height:0.95;letter-spacing:0.08em;text-transform:uppercase;color:rgba(17,24,39,0.72);text-shadow:none;opacity:0;transition:opacity .55s ease, transform .55s ease;transform:translateY(8px);white-space:nowrap}
.hero-language-text.is-visible{opacity:1;transform:translateY(0)}
.hero-language-text.is-dark{color:rgba(17,24,39,0.46)}

/* Force dark text for greetings in light theme; preserve bright text in dark mode */
html.dark .hero-language-text{color:rgba(255,255,255,0.34);text-shadow:0 10px 35px rgba(15,23,42,0.18)}

/* Ensure hero and welcome titles use dark text in light theme */
.hero-title, .welcome-title { color: #111827; }
html.dark .hero-title, html.dark .welcome-title { color: #f1f5f9; }
.hello-text{display:none !important}
.hello-text.glow{display:none !important}
/* title and subtitle */
.hero-title{font-size:36px;line-height:1.02;margin:0;font-weight:800;text-align:center}
.hero-title .accent{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:760px;color:var(--muted);text-align:center;font-size:15px;margin:0}
/* action card */
.hero-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.03);box-shadow:0 12px 40px rgba(2,6,23,0.6)}
.hero-action-btn{padding:10px 12px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,0.04);color:#dfe9ff;font-weight:700;cursor:pointer;transition:transform .28s, box-shadow .28s}
.hero-action-btn:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(124,58,237,0.16);border-color:rgba(124,58,237,0.3)}
.hero-input .input-box{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.03);color:#dfe9ff}
/* cinematic transitions */
.fade-hidden{opacity:0;transform:translateY(8px) scale(.995);transition:opacity .45s ease, transform .45s ease}
/* responsive tweaks */
@media(max-width:900px){
  .hero{padding:10px 16px 8px}
  .hero-title{font-size:26px}
  .hero-orb-wrap{width:240px;height:240px}
  .hero-orb{width:150px;height:150px}
}
@media(max-width:520px){
  .hero{gap:10px;padding:20px 12px 8px}
  .hero-title{font-size:23px;line-height:1.08}
  .hero-sub{font-size:13px;max-width:96vw}
  .hero-card{flex-direction:column;align-items:stretch;padding:12px}
  .hero-action-btn{width:100%;padding:9px 11px}
  .hero-orb-wrap{width:220px;height:220px}
  .hero-orb{width:136px;height:136px}
  .hero-language-text{font-size:clamp(1.5rem, 8vw, 3rem);letter-spacing:0.06em}
}
@media(max-width:380px){
  .hero-orb-wrap{width:190px;height:190px}
  .hero-orb{width:116px;height:116px}
  .hero-language-text{font-size:clamp(1.35rem, 9vw, 2.5rem)}
}
/* small helpers */
.center-full{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
/* ensure chat content sits on top of hero after hide */
.chat-app{position:relative;z-index:30;padding-bottom:120px}

/* make navbar fixed so hero doesn't slide under it */
#navbar{position:fixed;top:0;left:0;right:0;height:var(--navbar-height);z-index:60;background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.18));box-shadow:0 6px 20px rgba(8,10,20,0.06)}
html.dark #navbar{background:linear-gradient(180deg, rgba(2,6,23,0.82), rgba(2,6,23,0.28));box-shadow:0 6px 22px rgba(0,0,0,0.45)}

/* ensure page content starts after navbar */
body { padding-top: var(--navbar-height); }

/* Fix: pin input area to bottom to avoid overlapping hero */
.chat-input-wrapper{position:fixed;left:0;right:0;bottom:0;z-index:100;padding:14px 18px;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));pointer-events:none;}
.chat-input-wrapper > *{pointer-events:auto}
html.dark .chat-input-wrapper{background:linear-gradient(180deg, rgba(2,6,23,0.9), rgba(2,6,23,0.86));}

/* ensure hello orbit can overflow the hero without being clipped */
#hello-orbit{overflow:visible}

/* Disable blur/backdrop-filter inside the Berina welcome area to remove visual blur effects */
#berina-welcome, #berina-welcome * {
  filter: none !important;
  -webkit-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}