:root {
  --background: 43 47% 96%;
  --foreground: 158 29% 12%;
  --primary: 156 68% 31%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 92% 56%;
  --secondary-foreground: 156 45% 11%;
  --muted: 43 28% 88%;
  --muted-foreground: 156 13% 38%;
  --destructive: 3 72% 49%;
  --destructive-foreground: 0 0% 100%;
  --border: 43 25% 78%;
  --card: 0 0% 100%;
  --card-foreground: 158 29% 12%;
  --shadow-sm: 0 4px 12px hsl(156 45% 12% / 0.08);
  --shadow-md: 0 12px 28px hsl(156 45% 12% / 0.14);
  --shadow-lg: 0 24px 60px hsl(156 45% 12% / 0.2);
  --transition-fast: 140ms ease;
  --transition-smooth: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --radius-sm: 0.7rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}

.dark {
  --background: 0 0% 0%;
  --foreground: 0 0% 96%;
  --primary: 156 52% 44%;
  --primary-foreground: 0 0% 100%;
  --secondary: 38 78% 52%;
  --secondary-foreground: 0 0% 5%;
  --muted: 0 0% 10%;
  --muted-foreground: 0 0% 72%;
  --destructive: 3 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 18%;
  --card: 0 0% 6%;
  --card-foreground: 0 0% 96%;
  --shadow-sm: 0 4px 12px hsl(0 0% 0% / 0.35);
  --shadow-md: 0 12px 28px hsl(0 0% 0% / 0.45);
  --shadow-lg: 0 24px 60px hsl(0 0% 0% / 0.55);
}

* { box-sizing: border-box; }
html { height: 100%; height: 100dvh; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-size: 16px; overflow: hidden; }
body { margin: 0; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; background: radial-gradient(circle at top left, hsl(var(--secondary) / 0.14), transparent 34rem), radial-gradient(circle at 85% 20%, hsl(var(--primary) / 0.1), transparent 28rem), hsl(var(--background)); color: hsl(var(--foreground)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#root { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.dark body { background: hsl(var(--background)); }
button, input, textarea, select { font: inherit; }
input, textarea, select { font-size: 16px; color: hsl(var(--foreground)); }
select option { color: #111; background: #fff; }
.dark select option { color: #f5f5f5; background: #111; }
img, video, canvas, svg { max-width: 100%; }
button, a { touch-action: manipulation; }
button { min-height: 44px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); }
button:active { transform: scale(0.98); }
.app-shell { height: 100vh; height: 100dvh; min-height: 0; width: 100%; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); display: flex; flex-direction: column; }
.app-shell > header { flex: 0 0 auto; }
.app-shell > main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.safe-top { padding-top: calc(0.75rem + env(safe-area-inset-top)); }
body > :not(#root):is(a, button, div)[style*="position: fixed"][style*="bottom"][style*="right"] { display: none !important; }
.intro-screen { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: #000; color: #fff; }
.intro-content { position: relative; z-index: 2; width: min(92vw, 760px); padding: 2rem 1.25rem; text-align: center; }
.intro-mark { margin: 0 auto 1rem; display: grid; height: 5.5rem; width: 5.5rem; place-items: center; border: 2px solid #00e5ff; border-radius: 1.5rem; background: linear-gradient(135deg, #00e5ff, #f000ff, #ffe600, #00ff88); color: #030303; font-size: 1.35rem; font-weight: 1000; }
.intro-content h1, .intro-content p { margin: 0; font-weight: 1000; background: linear-gradient(90deg, #00e5ff, #f000ff, #ffe600, #00ff88); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.intro-content h1 { font-size: clamp(2rem, 9vw, 5rem); letter-spacing: -0.05em; }
.intro-content p { margin-top: 0.85rem; font-size: clamp(1rem, 4vw, 2rem); line-height: 1.25; }
.butterfly { position: absolute; z-index: 1; font-size: clamp(1.8rem, 5vw, 3.7rem); filter: saturate(1.9) hue-rotate(145deg); opacity: 0.88; animation: butterflyFly 6s linear infinite, butterflyWing 0.7s ease-in-out infinite alternate; }
.butterfly-one { left: -12%; top: 16%; animation-delay: 0s, 0s; }
.butterfly-two { left: -18%; top: 62%; animation-delay: 0.55s, 0.12s; font-size: clamp(1.5rem, 4vw, 3rem); }
.butterfly-three { left: 20%; top: 108%; animation-name: butterflyRise, butterflyWing; animation-duration: 5.6s, 0.65s; animation-delay: 0.2s, 0.06s; }
.butterfly-four { right: -15%; top: 34%; animation-name: butterflyFlyReverse, butterflyWing; animation-duration: 6.3s, 0.75s; animation-delay: 0.9s, 0.18s; }
.butterfly-five { left: 55%; top: -14%; animation-name: butterflyDrop, butterflyWing; animation-duration: 5.2s, 0.62s; animation-delay: 0.4s, 0.08s; }
@keyframes butterflyFly { 0% { transform: translate3d(0,0,0) rotate(-12deg) scale(1); } 35% { transform: translate3d(42vw,-8vh,0) rotate(10deg) scale(1.08); } 70% { transform: translate3d(78vw,10vh,0) rotate(-8deg) scale(0.96); } 100% { transform: translate3d(122vw,-3vh,0) rotate(12deg) scale(1.04); } }
@keyframes butterflyFlyReverse { 0% { transform: translate3d(0,0,0) rotate(12deg) scale(1); } 100% { transform: translate3d(-125vw,18vh,0) rotate(-14deg) scale(1.05); } }
@keyframes butterflyRise { 0% { transform: translate3d(0,0,0) rotate(-8deg); } 100% { transform: translate3d(35vw,-125vh,0) rotate(18deg); } }
@keyframes butterflyDrop { 0% { transform: translate3d(0,0,0) rotate(15deg); } 100% { transform: translate3d(-25vw,125vh,0) rotate(-12deg); } }
@keyframes butterflyWing { from { scale: 0.86 1; } to { scale: 1.1 0.92; } }
.glass-card { background: hsl(var(--card) / 0.94); border: 1px solid hsl(var(--border) / 0.85); box-shadow: var(--shadow-md); backdrop-filter: blur(12px); }
.dark .glass-card { background: hsl(var(--card)); border-color: hsl(var(--border)); }
.chat-main { min-height: 0; }
.full-chat-main { min-height: 0; padding-left: 0.5rem; padding-right: 0.5rem; padding-bottom: calc(5.75rem + env(safe-area-inset-bottom)); }
.chat-card { flex: 1 1 auto; height: auto; min-height: 0; }
.full-chat-main .chat-card { height: 100%; min-height: 0; width: 100%; }
.chat-messages { background: radial-gradient(circle at 12px 12px, hsl(var(--primary) / 0.08) 2px, transparent 2.5px), radial-gradient(circle at 38px 38px, hsl(var(--secondary) / 0.08) 2px, transparent 2.5px), hsl(var(--muted) / 0.34); background-size: 52px 52px; }
.dark .chat-messages { background: radial-gradient(circle at 12px 12px, hsl(var(--primary) / 0.13) 2px, transparent 2.5px), radial-gradient(circle at 38px 38px, hsl(var(--secondary) / 0.09) 2px, transparent 2.5px), hsl(0 0% 3%); }
.chat-bubble { border-radius: 1.05rem; font-size: 1rem; line-height: 1.62; }
.chat-bubble-user { border-bottom-right-radius: 0.25rem; background: linear-gradient(135deg, hsl(var(--primary)), hsl(156 65% 38%)); }
.chat-bubble-helper { border: 1px solid hsl(var(--border) / 0.5); border-bottom-left-radius: 0.25rem; background: hsl(var(--card) / 0.96); }
.assistant-heading { margin-top: 0.25rem; font-weight: 1000; color: hsl(var(--primary)); }
.chat-composer { background: hsl(var(--background) / 0.94); }
.dark .chat-composer { background: hsl(0 0% 4% / 0.96); }
.neon-logo { position: relative; background: conic-gradient(from 135deg, #00d6e6, #7c3aed, #d946ef, #facc15, #22c55e, #00d6e6); box-shadow: 0 0 6px rgb(0 214 230 / 0.55), 0 0 12px rgb(217 70 239 / 0.28), inset 0 0 10px rgb(255 255 255 / 0.22); text-shadow: 0 0 4px rgb(255 255 255 / 0.75), 0 0 8px rgb(0 214 230 / 0.5); }
.dark .neon-logo { box-shadow: 0 0 5px rgb(0 214 230 / 0.42), 0 0 10px rgb(217 70 239 / 0.2), inset 0 0 8px rgb(255 255 255 / 0.14); }
.neon-logo-large { animation: neonPulse 2.6s ease-in-out infinite alternate; }
.neon-icon { background: conic-gradient(from 150deg, rgb(0 214 230 / 0.18), rgb(217 70 239 / 0.16), rgb(34 197 94 / 0.16), rgb(0 214 230 / 0.18)); border: 1px solid rgb(0 214 230 / 0.32); box-shadow: 0 0 8px rgb(0 214 230 / 0.22), inset 0 0 10px rgb(217 70 239 / 0.12); filter: saturate(1.1); }
.neon-words, .neon-loading-text { color: #f8ffff; background: linear-gradient(90deg, rgb(0 214 230 / 0.14), rgb(217 70 239 / 0.14), rgb(250 204 21 / 0.14)); border: 1px solid rgb(0 214 230 / 0.34); box-shadow: 0 0 7px rgb(0 214 230 / 0.24), 0 0 12px rgb(217 70 239 / 0.16); text-shadow: 0 0 4px rgb(255 255 255 / 0.7), 0 0 8px rgb(0 214 230 / 0.42); }
.neon-loading-text { display: inline-block; border-radius: 999px; padding: 0.25rem 0.55rem; }
@keyframes neonPulse { from { filter: brightness(1) saturate(1.08); } to { filter: brightness(1.1) saturate(1.22); } }
.message-bubble { animation: riseIn 260ms ease both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.skeleton { position: relative; overflow: hidden; background: hsl(var(--muted)); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, hsl(var(--card) / 0.55), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { 100% { transform: translateX(100%); } }
.custom-scrollbar::-webkit-scrollbar { width: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.focus-ring:focus-visible { outline: 3px solid hsl(var(--secondary) / 0.55); outline-offset: 2px; }
.master-button { position: fixed; right: 0.65rem; bottom: 5.2rem; z-index: 30; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card) / 0.76); color: hsl(var(--muted-foreground)); padding: 0.28rem 0.65rem; font-size: 0.72rem; font-weight: 800; opacity: 0.55; backdrop-filter: blur(10px); }
.master-button:hover { opacity: 1; }
.bottom-tabs { position: fixed; left: 50%; bottom: calc(0.55rem + env(safe-area-inset-bottom)); z-index: 25; display: grid; width: min(94vw, 560px); transform: translateX(-50%); grid-template-columns: repeat(5, 1fr); gap: 0.25rem; border: 1px solid hsl(var(--border) / 0.8); border-radius: 1.35rem; background: hsl(var(--card) / 0.92); padding: 0.35rem; box-shadow: var(--shadow-lg); backdrop-filter: blur(16px); }
.bottom-tab { display: grid; min-height: 50px; place-items: center; gap: 0.08rem; border: 0; border-radius: 1rem; background: transparent; color: hsl(var(--foreground)); padding: 0.45rem 0.15rem; font-size: 1.08rem; font-weight: 900; text-decoration: none; }
.bottom-tab span { font-size: 0.68rem; font-weight: 900; }
.bottom-tab:hover { background: hsl(var(--primary) / 0.1); }
@media (display-mode: standalone) { header { user-select: none; } }
@media (min-width: 1024px) { .app-shell main { min-height: 0; } }
@media (max-width: 640px) { html { font-size: 16px; } body { font-size: 16px; } .glass-card { border-radius: var(--radius-md) !important; } .message-bubble > div.chat-bubble { max-width: 94% !important; } .chat-main { min-height: 0; } .chat-card, .full-chat-main .chat-card { height: 100%; min-height: 0; } .full-chat-main { padding-left: 0.2rem; padding-right: 0.2rem; padding-top: 0.35rem; padding-bottom: calc(5.35rem + env(safe-area-inset-bottom)); } .chat-top { padding: 0.5rem 0.7rem; } .chat-bubble { font-size: 0.98rem; line-height: 1.6; } .chat-messages { padding: 0.65rem !important; } .chat-composer { padding: 0.55rem !important; } .chat-composer input, .chat-composer textarea, .chat-composer button, .chat-composer label { min-height: 44px; } header .safe-top { align-items: center; gap: 0.35rem; padding-top: calc(0.35rem + env(safe-area-inset-top)); padding-bottom: 0.38rem; } header .neon-logo { height: 2.25rem; width: 2.25rem; font-size: 0.92rem; border-radius: 0.75rem; } header h1 { font-size: 0.92rem !important; } header p { display: none; } .header-brand { flex: 0 1 7.6rem; gap: 0.4rem !important; } .header-actions { flex: 1 1 auto; max-width: none !important; gap: 0.22rem !important; } .header-action-text, .header-icon-button { min-height: 34px !important; padding: 0.36rem 0.5rem !important; font-size: 0.72rem !important; } .header-icon-button { min-width: 34px; } .notify-ask { padding: 0.6rem !important; font-size: 0.78rem !important; } main.mobile-tight { padding-top: 0.45rem; padding-bottom: calc(5.7rem + env(safe-area-inset-bottom)); } }
@media (max-width: 420px) { .mobile-tight { padding-left: 0.45rem; padding-right: 0.45rem; } .full-chat-main.mobile-tight { padding-left: 0.1rem; padding-right: 0.1rem; padding-bottom: calc(5.15rem + env(safe-area-inset-bottom)); } .bottom-tabs { width: 98vw; bottom: calc(0.25rem + env(safe-area-inset-bottom)); padding: 0.25rem; border-radius: 1.1rem; } .bottom-tab { min-height: 46px; border-radius: 0.85rem; font-size: 0.98rem; padding: 0.25rem 0.05rem; } .bottom-tab span { font-size: 0.57rem; } .master-button { bottom: 4.55rem; } }
@media (max-width: 360px) { html { font-size: 15px; } .mobile-tight { padding-left: 0.35rem; padding-right: 0.35rem; } .full-chat-main.mobile-tight { padding-left: 0.05rem; padding-right: 0.05rem; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } header .mobile-tight { gap: 0.2rem; } .header-brand { flex-basis: 6.2rem; } header .neon-logo { height: 1.9rem; width: 1.9rem; font-size: 0.78rem; } .header-action-text, .header-icon-button { min-height: 32px !important; padding-left: 0.36rem !important; padding-right: 0.36rem !important; font-size: 0.66rem !important; } .chat-card, .full-chat-main .chat-card { height: 100%; min-height: 0; } }