.chat-app{width:min(100%,1260px);min-height:650px;grid-template-rows:70px minmax(0,1fr)}
.agent-workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mascot-panel{min-width:0;padding:32px;background:radial-gradient(circle at 50% 35%,#ffe8ec 0,#f7d8dd 42%,#efd0ca 100%);border-right:1px solid #e4cecb;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:20px;overflow:hidden;position:relative}
.mascot-panel:before,.mascot-panel:after{content:'';position:absolute;border-radius:50%;background:#ffffff47;pointer-events:none}.mascot-panel:before{width:220px;height:220px;left:-95px;top:-80px}.mascot-panel:after{width:160px;height:160px;right:-70px;bottom:90px}
.mascot-stage{width:min(100%,430px);aspect-ratio:1;align-self:center;justify-self:center;position:relative;border-radius:36px;overflow:hidden;background:#f4ccd6;box-shadow:0 24px 65px #58122633;isolation:isolate}.mascot-stage img{width:100%;height:100%;display:block;object-fit:cover;user-select:none}.mascot-stage.is-speaking{animation:mascotBob .7s ease-in-out infinite alternate}.mascot-stage.is-speaking img{filter:saturate(1.04) brightness(1.02)}
.mascot-eyelid{position:absolute;top:46%;width:16%;height:0;z-index:2;border-radius:50% 50% 43% 43%;background:linear-gradient(180deg,#f8f0e9 0,#fff9f4 72%,#7d4a3a 76%,#f8f2ed 84%);transform:translateY(-50%);animation:mascotBlink 5.2s ease-in-out infinite;pointer-events:none}.mascot-eye-left{left:23.7%}.mascot-eye-right{right:23.7%;animation-delay:.03s}
.mascot-status{position:absolute;z-index:3;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:9px 13px;white-space:nowrap;border-radius:999px;color:#5f4246;background:#ffffffe6;box-shadow:0 8px 25px #3f0f1b29;font-size:9px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;backdrop-filter:blur(10px)}.mascot-status i{width:7px;height:7px;border-radius:50%;background:#5f9a5f}.mascot-status.speaking i,.mascot-status.listening i,.mascot-status.thinking i{background:#ad1730;animation:pulse 1s infinite}
.mascot-copy{position:relative;z-index:1;text-align:center}.mascot-copy .eyebrow{margin-bottom:6px}.mascot-copy h2{margin:0;font:700 29px/1.1 Georgia,serif;color:#361c21}.mascot-copy p{max-width:390px;margin:8px auto 0;color:#755b60;font:13px/1.5 Georgia,serif}
.chat-column{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;background:#fffaf7}.chat-body{padding:36px 28px}.starters{grid-template-columns:1fr;gap:9px}.starters button{min-height:68px;padding:15px 17px;flex-direction:row;align-items:center;justify-content:space-between;gap:15px}.starters span{align-self:auto}.composer-wrap{padding:10px 24px 18px}
@keyframes mascotBob{to{transform:translateY(-5px) rotate(.35deg)}}@keyframes mascotBlink{0%,43%,47%,100%{height:0}44.5%,45.5%{height:17%}}
@media(max-width:840px){.chat-shell{padding:0}.chat-app{height:100vh;min-height:640px;border:0;border-radius:0}.chat-header{padding:0 14px}.agent-workspace{grid-template-columns:1fr;grid-template-rows:225px minmax(0,1fr)}.mascot-panel{grid-template-columns:185px 1fr;grid-template-rows:1fr;align-items:center;padding:14px 20px;gap:20px;border-right:0;border-bottom:1px solid #e4cecb}.mascot-stage{width:180px;border-radius:24px}.mascot-status{bottom:8px;padding:6px 9px;font-size:7px}.mascot-copy{text-align:left}.mascot-copy h2{font-size:25px}.mascot-copy p{font-size:11px}.chat-body{padding:24px 16px}.welcome{padding-top:8px}.welcome h1{font-size:38px}.welcome>p{margin:13px auto 17px}.starters button{min-height:58px}.composer-wrap{padding:8px 12px 12px}}
@media(max-width:480px){.agent-workspace{grid-template-rows:190px minmax(0,1fr)}.mascot-panel{grid-template-columns:145px 1fr;padding:10px 14px;gap:14px}.mascot-stage{width:140px;border-radius:20px}.mascot-copy .eyebrow{letter-spacing:1.2px;font-size:7px}.mascot-copy h2{font-size:21px}.mascot-copy p{margin-top:5px}}
@media(prefers-reduced-motion:reduce){.mascot-stage,.mascot-eyelid{animation:none!important}}