*{margin:0;padding:0;box-sizing:border-box}:root{--sky-top: #87CEEB;--sky-bottom: #E0F7FA;--grass: #7CB342;--grass-dark: #558B2F;--button-bg: #FFB800;--button-hover: #FFA000;--button-active: #FF6B6B;--bubble-ai: #FFF9C4;--bubble-user: #BBDEFB;--text-dark: #333}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Nunito,sans-serif;-webkit-font-smoothing:antialiased}.app{height:100%;display:flex;flex-direction:column;align-items:center;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 60%,var(--grass) 85%,var(--grass-dark) 100%);position:relative;overflow:hidden}.app__header{text-align:center;padding:2rem 1rem .5rem;z-index:2}.app__title{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:900;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.2);letter-spacing:.02em}.app__subtitle{font-size:clamp(.9rem,3vw,1.2rem);color:#ffffffe6;font-weight:700;margin-top:.25rem}.app__messages{flex:1;width:100%;max-width:600px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;z-index:2}.bubble{animation:bubbleIn .4s ease-out}.bubble--ai{align-self:flex-start;max-width:85%}.bubble--user{align-self:flex-end;max-width:85%}.bubble--error{align-self:center;background:#ffcdd2;padding:.75rem 1rem;border-radius:1rem;font-size:1rem;color:#b71c1c;font-weight:700}.bubble__content{display:flex;align-items:flex-start;gap:.5rem}.bubble--user .bubble__content{flex-direction:row-reverse}.bubble__avatar{font-size:1.5rem;flex-shrink:0;margin-top:.1rem}.bubble__text{background:var(--bubble-ai);padding:.75rem 1rem;border-radius:1.25rem;font-size:clamp(1rem,3.5vw,1.2rem);font-weight:700;color:var(--text-dark);line-height:1.5;box-shadow:0 2px 8px #0000001a}.bubble--user .bubble__text{background:var(--bubble-user)}.thinking-dots span{animation:blink 1.4s infinite both;font-size:2rem;font-weight:900}.thinking-dots span:nth-child(2){animation-delay:.2s}.thinking-dots span:nth-child(3){animation-delay:.4s}@keyframes blink{0%,80%,to{opacity:0}40%{opacity:1}}.app__button-area{padding:1.5rem;z-index:2}.talk-button{width:clamp(140px,35vw,200px);height:clamp(140px,35vw,200px);border-radius:50%;border:6px solid rgba(255,255,255,.8);background:var(--button-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 8px 32px #ff980066,0 0 #ffb80066;animation:pulse 2s ease-in-out infinite;position:relative;-webkit-tap-highlight-color:transparent}.talk-button:hover{transform:scale(1.08);box-shadow:0 12px 40px #ff980080,0 0 #ffb80066}.talk-button:active{transform:scale(.95)}.talk-button:disabled{cursor:not-allowed;opacity:.9}.talk-button--listening{background:var(--button-active);animation:listenPulse 1s ease-in-out infinite;border-color:#fff;box-shadow:0 8px 32px #ff6b6b80,0 0 #ff6b6b66}.talk-button--processing{background:#ffd54f;animation:spin 2s linear infinite}.talk-button--speaking{background:#81c784;animation:speakPulse .6s ease-in-out infinite;border-color:#fff}.talk-button__content{display:flex;flex-direction:column;align-items:center;gap:.25rem}.talk-button__emoji{font-size:clamp(2.5rem,8vw,4rem)}.talk-button__label{font-size:clamp(.7rem,2.5vw,.9rem);font-weight:900;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.2)}.bagger-icon{width:clamp(60px,15vw,90px);height:auto}@keyframes pulse{0%,to{box-shadow:0 8px 32px #ff980066,0 0 #ffb80066}50%{box-shadow:0 8px 32px #ff980066,0 0 0 20px #ffb80000}}@keyframes listenPulse{0%,to{transform:scale(1);box-shadow:0 8px 32px #ff6b6b80,0 0 #ff6b6b66}50%{transform:scale(1.1);box-shadow:0 8px 32px #ff6b6b80,0 0 0 25px #ff6b6b00}}@keyframes speakPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bubbleIn{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.driving-bagger{position:absolute;bottom:12%;font-size:clamp(2rem,6vw,3.5rem);animation:drive 15s linear infinite;z-index:1;filter:drop-shadow(2px 2px 2px rgba(0,0,0,.2))}@keyframes drive{0%{left:-10%;transform:scaleX(-1)}45%{left:100%;transform:scaleX(-1)}50%{left:100%;transform:scaleX(1)}95%{left:-10%;transform:scaleX(1)}to{left:-10%;transform:scaleX(-1)}}.cloud{position:absolute;font-size:3rem;opacity:.6;z-index:0;animation:float 20s ease-in-out infinite}.cloud--1{top:5%;left:10%;animation-duration:25s;font-size:2.5rem}.cloud--2{top:12%;right:15%;animation-duration:30s;animation-delay:-5s;font-size:2rem}.cloud--3{top:3%;right:40%;animation-duration:22s;animation-delay:-10s;font-size:3rem}@keyframes float{0%,to{transform:translate(0) translateY(0)}25%{transform:translate(30px) translateY(-10px)}50%{transform:translate(10px) translateY(5px)}75%{transform:translate(-20px) translateY(-5px)}}.sky-item{position:absolute;z-index:1;pointer-events:none;animation-timing-function:linear;animation-fill-mode:forwards;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.15))}.sky-item--ltr{animation-name:flyLTR}.sky-item--rtl{animation-name:flyRTL}@keyframes flyLTR{0%{left:-10%;opacity:0}5%{opacity:1}95%{opacity:1}to{left:110%;opacity:0}}@keyframes flyRTL{0%{right:-10%;opacity:0}5%{opacity:1}95%{opacity:1}to{right:110%;opacity:0}}.sky-item--bird.sky-item--ltr,.sky-item--vehicle.sky-item--ltr{transform:scaleX(-1)}.sky-item--bird{animation-name:flyLTR,birdBob;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,infinite;animation-fill-mode:forwards,none;animation-duration:inherit,.5s}.sky-item--bird.sky-item--rtl{animation-name:flyRTL,birdBob}.sky-item--bird.sky-item--ltr{animation-name:flyLTRFlipped,birdBobFlipped}@keyframes birdBob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes birdBobFlipped{0%,to{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-4px)}}@keyframes flyLTRFlipped{0%{left:-10%;opacity:0;transform:scaleX(-1)}5%{opacity:1;transform:scaleX(-1)}95%{opacity:1;transform:scaleX(-1)}to{left:110%;opacity:0;transform:scaleX(-1)}}.app__error{text-align:center;padding:3rem;color:#fff}.app__error h1{font-size:2rem;margin-bottom:1rem}.app__error p{font-size:1.2rem;font-weight:700}.app__messages::-webkit-scrollbar{width:6px}.app__messages::-webkit-scrollbar-track{background:transparent}.app__messages::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}