*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:linear-gradient(135deg,#0f1419,#1a2e1a 40%,#0d1b0d);min-height:100vh;overflow-x:hidden;color:#e4e4e7}.heading{color:#f8fafc;font-size:2.5rem;font-weight:600;text-align:center;margin-bottom:2rem;text-shadow:0 2px 20px rgba(34,197,94,.4);letter-spacing:-.02em;background:linear-gradient(135deg,#22c55e,#16a34a,#84cc16);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}main{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:20px}.chat-container{width:100%;max-width:1000px;display:flex;flex-direction:column;background:#0f170fd9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:32px;border-radius:24px;box-shadow:0 25px 50px -12px #0009,0 0 0 1px #22c55e1a,inset 0 1px #22c55e1a;height:75vh;max-height:650px}.messages{display:flex;flex-direction:column;margin:0;height:100%;overflow-y:auto;padding:8px;gap:12px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.messages::-webkit-scrollbar{display:none}.assistant{background:linear-gradient(135deg,#1e2e1e,#2d3e2d);color:#e2f0e2;align-self:flex-start;border-radius:20px 20px 20px 4px;padding:16px 20px;margin:4px 0;max-width:85%;box-shadow:0 4px 12px #0000004d,0 0 0 1px #22c55e1a;font-size:15px;line-height:1.5;font-weight:400;animation:slideInLeft .4s cubic-bezier(.16,1,.3,1);position:relative}.assistant:before{content:"";position:absolute;left:-8px;bottom:8px;width:0;height:0;border-style:solid;border-width:0 12px 12px 0;border-color:transparent #2d3e2d transparent transparent}.user{background:linear-gradient(135deg,#16a34a,#22c55e,#15803d);color:#fff;align-self:flex-end;border-radius:20px 20px 4px;padding:16px 20px;margin:4px 0;max-width:85%;box-shadow:0 4px 16px #22c55e66,0 0 0 1px #ffffff1a;font-size:15px;line-height:1.5;font-weight:500;animation:slideInRight .4s cubic-bezier(.16,1,.3,1);position:relative}.user:before{content:"";position:absolute;right:-8px;bottom:8px;width:0;height:0;border-style:solid;border-width:0 0 12px 12px;border-color:transparent transparent #15803d transparent}@keyframes slideInLeft{0%{opacity:0;transform:translate(-24px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(24px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}.textbox{display:flex;align-items:center;gap:16px;margin-top:24px;padding:6px;background:#141e14cc;border-radius:28px;box-shadow:0 8px 32px #0000004d,0 0 0 1px #22c55e1a,inset 0 1px #22c55e1a;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:all .3s ease}.textbox>div:first-child{display:flex;gap:16px;align-items:center;flex:1}.textbox button{border-radius:50%;padding:14px;width:52px;height:52px;cursor:pointer;border:none;background:linear-gradient(135deg,#16a34a,#22c55e);transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #22c55e4d,0 0 0 1px #ffffff1a}.textbox button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 32px #22c55e80,0 0 0 1px #fff3;background:linear-gradient(135deg,#22c55e,#84cc16)}.textbox button:active{transform:translateY(0) scale(.98)}.textbox button img{width:18px;height:18px;filter:brightness(0) invert(1)}.voice-button{border-radius:50%;padding:14px;width:52px;height:52px;cursor:pointer;border:none;background:linear-gradient(135deg,#374151,#4b5563);transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;align-items:center;justify-content:center}.voice-button.listening{background:linear-gradient(135deg,#dc2626,#ef4444);animation:pulse 1.5s infinite;box-shadow:0 0 20px #ef444480}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 20px #ef444480}50%{transform:scale(1.05);box-shadow:0 0 30px #ef4444cc}to{transform:scale(1);box-shadow:0 0 20px #ef444480}}.textbox input[type=text]{border-radius:22px;flex:1;height:52px;border:2px solid transparent;padding:16px 24px;font-size:16px;font-weight:400;background:#2d3e2d99;color:#f1f5f9;transition:all .3s cubic-bezier(.16,1,.3,1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.textbox input[type=text]:focus{border:2px solid rgba(34,197,94,.5);outline:none;background:#2d3e2dcc;box-shadow:0 0 0 4px #22c55e1a,0 8px 32px #22c55e33}.textbox input[type=text]::placeholder{color:#a1b5a1;font-weight:400}.voice-input-container{display:flex;align-items:center;gap:8px;flex-shrink:0}.language-select{padding:8px 12px;border-radius:16px;border:2px solid rgba(34,197,94,.3);background:#2d3e2d99;color:#f1f5f9;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.language-select:focus{outline:none;border-color:#22c55e99;box-shadow:0 0 0 3px #22c55e1a}.language-select option{background:#1e2e1e;color:#f1f5f9}@media (max-width: 768px){.heading{font-size:2rem;margin-bottom:1.5rem}.chat-container{padding:24px;margin:12px;height:80vh;border-radius:20px}.textbox{flex-direction:column;padding:12px;gap:12px;margin-top:20px;border-radius:24px;align-items:stretch}.textbox>div:first-child{gap:12px}.voice-input-container{justify-content:center;width:100%;gap:12px}.language-select{flex:1;text-align:center;padding:10px 16px;font-size:15px}.textbox button,.voice-button{width:48px;height:48px;padding:12px}.textbox input[type=text]{height:48px;padding:14px 20px;font-size:15px}.received,.sent{max-width:90%;padding:14px 18px;font-size:14px}}@media (max-width: 480px){.chat-container{padding:20px;margin:8px;border-radius:16px}.heading{font-size:1.8rem}.textbox{padding:16px;gap:16px}.voice-input-container{gap:16px}.language-select{padding:12px 20px;font-size:16px;border-radius:20px}}