/* Decorative effects never intercept input or reduce content contrast. */
:root{--tech-cyan:#60ccb8;--tech-glow:#4baf8b}
.chat-view,.auth-panel,.content-view{position:relative;isolation:isolate}
.chat-view::before,.content-view::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 12%,#64ceb510,transparent 45%),linear-gradient(#5c997806 1px,transparent 1px),linear-gradient(90deg,#5c997806 1px,transparent 1px);background-size:auto,38px 38px,38px 38px;mask-image:linear-gradient(#000,transparent 80%)}
.intro{background:radial-gradient(ellipse at 12% 85%,#c8e4c7,transparent 60%),radial-gradient(ellipse at 100% 0,#c9eee7,transparent 60%),#edf3e8}
.intro::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(#458e6910 1px,transparent 1px),linear-gradient(90deg,#458e6910 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(140deg,transparent 15%,#000 80%)}
.intro::after{border-color:#50a78930;box-shadow:0 0 0 45px #4b9b7710,0 0 0 90px #4b9b7708;animation:tech-orbit 14s ease-in-out infinite}
.brand .logo{position:relative;overflow:hidden;box-shadow:0 4px 16px #2f81602b,0 0 0 1px #87c09d45}
.brand .logo::after{content:'';position:absolute;inset:-80% -60%;background:linear-gradient(110deg,transparent 40%,#ffffff35 50%,transparent 60%);transform:translateX(-65%);animation:tech-sheen 9s ease-in-out infinite;pointer-events:none}
header{box-shadow:0 1px 0 #68b99a0b;position:relative}
header::after{content:'';position:absolute;bottom:-1px;left:0;width:120px;height:1px;background:linear-gradient(90deg,transparent,#64bba0,transparent);opacity:.6;pointer-events:none;animation:tech-header 12s ease-in-out infinite}
.welcome-icon{position:relative;overflow:visible;background:radial-gradient(circle,#e4f3df,#f3faf1);box-shadow:0 0 28px #65b59419,inset 0 0 0 1px #97cbb542}
.welcome-icon::before,.welcome-icon::after{content:'';position:absolute;inset:-9px;border-radius:26px;border:1px solid #7dc1a337;pointer-events:none}
.welcome-icon::before{border-top-color:#499e79;border-bottom-color:#499e79;animation:tech-rotate 24s linear infinite}
.welcome-icon::after{inset:-17px;border-radius:31px;border-style:dashed;opacity:.42;animation:tech-rotate 36s linear infinite reverse}
.welcome-icon>.icon{filter:drop-shadow(0 0 5px #4eaf8633)}
.welcome h1{position:relative}.welcome h1::after{content:'';display:block;width:38px;height:2px;background:linear-gradient(90deg,#3e8a69,#7ecdb7);margin:16px auto 0;border-radius:3px;box-shadow:0 0 8px #72c9ad50}
.welcome{position:relative}
.welcome::before{content:'';display:block;width:40px;height:40px;margin:0 auto 25px;border:1px solid #5ba58a70;border-radius:12px;background:radial-gradient(circle at 50% 50%,#5baf8c55 0 3px,transparent 4px),linear-gradient(135deg,#e2f3e5,#eaf9f5);box-shadow:0 0 0 7px #72bfa914,0 0 0 14px #72bfa909,0 0 28px #63b99d21;transform:rotate(45deg);animation:tech-core 8s ease-in-out infinite;pointer-events:none}
@keyframes tech-core{50%{transform:rotate(135deg);box-shadow:0 0 0 9px #72bfa914,0 0 0 18px #72bfa908,0 0 30px #63b99d29}}
.suggestion,.metric,.settings-grid>.card,.plan-card,.upload-box,.task-banner{position:relative}
.suggestion::after,.metric::after{content:'';position:absolute;right:12px;top:12px;width:8px;height:8px;border-top:1px solid #64aa8260;border-right:1px solid #64aa8260;pointer-events:none;transition:width .25s,height .25s,border-color .25s}
.suggestion:hover::after{width:13px;height:13px;border-color:#458e6f}
.suggestion:hover{box-shadow:0 6px 24px #2b785512,0 0 0 1px #83cbb622}
.composer{position:relative}.composer:focus-within{border-color:#6cb298;box-shadow:0 0 0 3px #5dad8e0c,0 8px 32px #33724b14}
.composer:focus-within::after{content:'';position:absolute;bottom:-1px;left:25%;right:25%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#77c7ac,transparent);pointer-events:none}
.messages[aria-busy="true"] .message.assistant:last-child .message-label::before{animation:tech-thinking 1.8s ease-in-out infinite}
.messages[aria-busy="true"] .message.assistant:last-child .message-label::after{content:'';width:22px;height:4px;background:radial-gradient(circle,#4a9776 2px,transparent 2.5px) 0 0/8px 4px;animation:tech-dots 1.4s ease-in-out infinite;pointer-events:none}
.status-dot.ready::before{box-shadow:0 0 0 3px #5aaf7c18,0 0 7px #5aaf7c40}
.primary{box-shadow:0 3px 10px #23654f20,inset 0 1px 0 #ffffff14}.primary:not(:disabled):hover{box-shadow:0 4px 16px #23654f30,inset 0 1px 0 #ffffff20}
.upload-box.dragover{background:linear-gradient(120deg,#e6f2de,#e1f4ed);box-shadow:0 0 0 3px #5aa68d18,inset 0 0 24px #69b6940e}
.sample{border-color:#b7d7c5}.sample-label::before{content:'';display:inline-block;width:5px;height:5px;margin:0 7px 2px 0;border-radius:50%;background:#569f7a;box-shadow:0 0 0 3px #75bf9520}
@keyframes tech-rotate{to{transform:rotate(360deg)}}
@keyframes tech-orbit{50%{transform:translate(-12px,18px);opacity:.65}}
@keyframes tech-sheen{0%,70%{transform:translateX(-65%)}90%,100%{transform:translateX(65%)}}
@keyframes tech-header{0%,100%{transform:translateX(0);opacity:.25}50%{transform:translateX(350px);opacity:.65}}
@keyframes tech-thinking{50%{box-shadow:0 0 0 5px #65b79316;color:#194e3d}}
@keyframes tech-dots{50%{opacity:.25}}
@media(max-width:700px){.chat-view::before,.content-view::before{background-size:auto,30px 30px,30px 30px}.welcome-icon::after{display:none}.welcome-icon::before{animation-duration:36s}header::after{animation:none;width:70px}.welcome h1::after{margin-top:12px}.intro::after{animation:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.welcome-icon::before{transform:rotate(12deg)}}
