.iso-viewport{display:flex;justify-content:center;align-items:center;perspective:1000px;font-family:'Segoe UI',sans-serif;position:relative}.iso-viewport.fullscreen{background:#080808;height:100vh;width:100vw;overflow:hidden;margin:0}.iso-viewport.embedded{min-height:550px;height:auto;width:100%;overflow:visible;background:radial-gradient(circle,#1a1a1a 0,#000 100%);border-top:1px solid #222;border-bottom:1px solid #222;margin-bottom:50px;padding-bottom:30px}.iso-scene{position:relative;transform:rotateX(60deg) rotateZ(-45deg);width:300px;height:300px;transform-style:preserve-3d;transition:transform .5s ease}.layer{position:absolute;width:200px;height:200px;left:50px;top:50px;background:rgba(15,15,15,.9);border:2px solid #333;box-shadow:0 0 20px rgba(0,0,0,.5);transition:all .3s;display:flex;justify-content:center;align-items:center;font-weight:700;color:rgba(255,255,255,.2);font-size:2rem;text-transform:uppercase;cursor:pointer;pointer-events:auto}.layer:hover{filter:brightness(1.3);transform:translateZ(20px)}.layer-1{transform:translateZ(0);border-color:#333;animation:float1 4s ease-in-out infinite;background:radial-gradient(circle,#222 0,#111 100%)}.layer-2{transform:translateZ(40px);border-color:#05a;animation:float2 4s ease-in-out infinite;box-shadow:0 0 15px rgba(0,85,170,.3);background:rgba(0,85,170,.1)}.layer-3{transform:translateZ(80px);border-color:#a0f;animation:float3 4s ease-in-out infinite;box-shadow:0 0 30px rgba(170,0,255,.4);background:rgba(170,0,255,.15)}.layer-4{transform:translateZ(100px);border-color:#00d4ff;animation:float4 4s ease-in-out infinite;box-shadow:0 0 45px rgba(0,212,255,.4);background:rgba(0,212,255,.15)}@keyframes float1{0%,100%{transform:translateZ(0)}50%{transform:translateZ(10px)}}@keyframes float2{0%,100%{transform:translateZ(40px)}50%{transform:translateZ(60px)}}@keyframes float3{0%,100%{transform:translateZ(80px)}50%{transform:translateZ(110px)}}@keyframes float4{0%,100%{transform:translateZ(120px)}50%{transform:translateZ(160px)}}.icon{transform:rotateZ(45deg) rotateX(0);font-size:1.5rem;text-shadow:0 0 10px currentColor;pointer-events:none}.l1-text{color:#555}.l2-text{color:#05a}.l3-text{color:#a0f;font-size:2rem}.l4-text{color:#00d4ff;font-size:2rem}.ui-container{position:absolute;bottom:30px;width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;z-index:100;gap:15px;padding:0 20px;box-sizing:border-box}.ai-response-wrapper{background:rgba(10,10,10,.85);border:1px solid #00d4ff;border-radius:8px;box-shadow:0 0 30px rgba(0,212,255,.1);backdrop-filter:blur(10px);display:none;position:relative;margin-top:15px;padding:15px 20px}.ai-response-wrapper::before{content:'JOAI CORE AI';position:absolute;top:-10px;left:10px;background:#000;color:#00d4ff;font-size:.7rem;padding:0 5px;border:1px solid #00d4ff;z-index:10}.ai-response-content{color:#fff;font-size:.95rem;line-height:1.5;text-align:left;max-height:350px;overflow-y:auto;width:100%}.ai-response-content::-webkit-scrollbar{width:6px}.ai-response-content::-webkit-scrollbar-track{background:rgba(0,0,0,.3);border-radius:3px}.ai-response-content::-webkit-scrollbar-thumb{background:#00d4ff;border-radius:3px}.ai-response-content::-webkit-scrollbar-thumb:hover{background:#fff}.default-title{text-align:center;transition:opacity .3s}.default-title h1{color:#fff;margin:0;font-size:2.5rem;letter-spacing:2px}.default-title p{color:#00d4ff;text-transform:uppercase;letter-spacing:4px;font-size:.9rem;margin-top:5px}.input-group{display:flex;width:100%;gap:10px}input[type=text]{flex-grow:1;background:rgba(255,255,255,.05);border:1px solid #333;padding:12px 15px;border-radius:4px;color:#fff;font-family:'Segoe UI',sans-serif;outline:0;transition:border-color .3s}input[type=text]:focus{border-color:#00d4ff;background:rgba(255,255,255,.1)}.btn-send{background:#00d4ff;color:#000;border:none;padding:0 25px;border-radius:4px;font-weight:700;cursor:pointer;transition:all .2s;text-transform:uppercase;font-size:.9rem}.btn-send:hover{background:#fff;box-shadow:0 0 15px #fff}.btn-upload{background:0 0;color:#666;border:1px dashed #444;padding:5px 15px;border-radius:4px;font-size:.75rem;cursor:pointer;margin-top:5px;transition:all .2s}.btn-upload.active,.btn-upload:hover{color:#00d4ff;border-color:#00d4ff;background:rgba(0,212,255,.05)}.typing-indicator span{display:inline-block;width:5px;height:5px;background-color:#00d4ff;border-radius:50%;animation:typing 1s infinite ease-in-out;margin-right:3px}.typing-indicator span:nth-child(1){animation-delay:0s}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}.typing-indicator span:nth-child(4){animation-delay:.6s}@keyframes typing{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.response-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px;border-top:1px solid rgba(0,212,255,.2);padding-top:10px}.btn-action{background:rgba(0,0,0,.5);border:1px solid #333;color:#aaa;padding:5px 10px;font-size:.8rem;border-radius:4px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:5px}.btn-action:hover{border-color:#00d4ff;color:#00d4ff;background:rgba(0,212,255,.1)}.btn-action.reset:hover{border-color:#f44;color:#f44;background:rgba(255,68,68,.1)}