.message{display:flex;gap:12px;max-width:85%}.message.user{align-self:flex-end;flex-direction:row-reverse}.message.assistant{align-self:flex-start}.message-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;background:#f8f9fa;box-shadow:0 2px 8px #0000001a}.message-content{display:flex;flex-direction:column;gap:4px}.message.user .message-content{align-items:flex-end}.message.assistant .message-content{align-items:flex-start}.message-bubble{padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.5;word-wrap:break-word;max-width:100%}.message.user .message-bubble{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom-right-radius:4px}.message.assistant .message-bubble{background:#f8f9fa;color:#212529;border-bottom-left-radius:4px;box-shadow:0 2px 8px #0000000d}.message-timestamp{font-size:11px;color:#6c757d;padding:0 4px}@media (max-width: 768px){.message{max-width:90%}.message-avatar{width:32px;height:32px;font-size:16px}.message-bubble{padding:10px 14px;font-size:14px}}.chat-interface{display:flex;flex-direction:column;height:100%;background:#fff}.messages-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px}.messages-container::-webkit-scrollbar{width:8px}.messages-container::-webkit-scrollbar-track{background:#f1f1f1}.messages-container::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.messages-container::-webkit-scrollbar-thumb:hover{background:#555}.welcome-message{background:linear-gradient(135deg,#667eea15,#764ba215);border-radius:12px;padding:24px;text-align:center}.welcome-message h2{color:#667eea;margin-bottom:16px;font-size:24px}.welcome-message p{color:#495057;margin-bottom:12px}.welcome-message ul{list-style:none;padding:0;margin:16px 0}.welcome-message li{padding:8px 0;color:#6c757d}.welcome-message li:before{content:"✓ ";color:#667eea;font-weight:700;margin-right:8px}.typing-indicator{display:flex;gap:4px;padding:12px 16px;background:#f8f9fa;border-radius:18px;width:fit-content;margin-left:0}.typing-dot{width:8px;height:8px;background:#6c757d;border-radius:50%;animation:typing 1.4s infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typing{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-10px)}}.input-container{display:flex;gap:12px;padding:20px;background:#f8f9fa;border-top:1px solid #dee2e6}.message-input{flex:1;padding:12px 16px;border:2px solid #dee2e6;border-radius:24px;font-size:15px;outline:none;transition:border-color .2s}.message-input:focus{border-color:#667eea}.message-input:disabled{background:#e9ecef;cursor:not-allowed}.voice-button,.send-button{padding:12px 24px;border:none;border-radius:24px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;outline:none}.voice-button{background:#f8f9fa;color:#495057;border:2px solid #dee2e6}.voice-button:hover:not(:disabled){background:#e9ecef;transform:scale(1.05)}.voice-button.recording{background:#dc3545;color:#fff;border-color:#dc3545;animation:pulse-red 1.5s infinite}@keyframes pulse-red{0%,to{box-shadow:0 0 #dc3545b3}50%{box-shadow:0 0 0 10px #dc354500}}.send-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.send-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.send-button:disabled,.voice-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 768px){.input-container{padding:12px;gap:8px}.message-input{font-size:14px;padding:10px 14px}.voice-button,.send-button{padding:10px 16px;font-size:14px}}.avatar-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.avatar{position:relative;display:flex;flex-direction:column;align-items:center;gap:2vh}.bruno-avatar-wrapper{position:relative;width:100%;max-width:45vw;max-height:75dvh;margin:0 auto}.bruno-base{display:block;width:70dvh;height:auto;max-height:75dvh;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.bruno-viseme-face{position:absolute;top:2.33dvh;left:50.5%;transform:translate(-50.5%);pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:10.5dvh;height:auto}@media (max-width: 768px){.bruno-avatar-wrapper{max-width:50vw;max-height:75dvh}.bruno-base{width:60dvh;max-height:75dvh}.bruno-viseme-face{width:9dvh;top:2dvh}}@media (max-width: 480px){.bruno-avatar-wrapper{max-width:45vw;max-height:75dvh}.bruno-base{width:55dvh;max-height:75dvh}.bruno-viseme-face{width:7.7dvh;top:3.4dvh}}.status-badge{position:absolute;bottom:-4vh;background:#667eeae6;color:#fff;padding:.8vh 1.6vw;border-radius:2vh;font-size:1.4vh;font-weight:500;box-shadow:0 4px 12px #00000026}.app-container{max-width:100%;width:100%;height:100dvh;background:url(/back.jpg) center center / cover no-repeat;background-attachment:fixed;display:flex;flex-direction:column;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0}.app-header{background:#1e3a8af2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;height:5dvh;padding:0 3vw;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 20px #0003;border-bottom:2px solid rgba(96,165,250,.3);flex-shrink:0}.header-brand{display:flex;align-items:center;gap:1vw}.brand-logo{display:flex;align-items:center;justify-content:center;width:4vh;height:4vh;background:#ffffff1a;border-radius:8px;padding:.4vh}.app-header h1{font-size:2.2vh;font-weight:700;letter-spacing:.5px;margin:0}.connection-status{display:flex;align-items:center;gap:.5vw;font-size:1.3vh;background:#ffffff1a;padding:.6vh 1.2vw;border-radius:20px;font-weight:500}.status-indicator{width:.8vh;height:.8vh;border-radius:50%;animation:pulse 2s infinite}.status-indicator.connected{background-color:#4ade80;box-shadow:0 0 8px #4ade80}.status-indicator.disconnected{background-color:#f87171;box-shadow:0 0 8px #f87171}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.app-main{height:85dvh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:1vh 2vw;flex-shrink:0}.avatar-section{width:100%;height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;padding:0;position:relative;padding-left:5vw}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;width:auto;max-width:90vw;height:auto;max-height:80vh}.comic-balloon{position:absolute;left:100%;top:10%;margin-left:2vw;background:#fff;border:.4vh solid #1e3a8a;border-radius:2.4vh;padding:1.5vh 2vw;width:35vw;min-width:25vw;max-width:40vw;max-height:50vh;overflow-y:auto;box-shadow:0 8px 24px #1e3a8a40;font-size:1.8vh;line-height:1.6;z-index:10;animation:balloon-appear .3s ease-out;display:flex;flex-direction:column}.comic-balloon::-webkit-scrollbar{width:6px}.comic-balloon::-webkit-scrollbar-track{background:#f1f3f5;border-radius:10px}.comic-balloon::-webkit-scrollbar-thumb{background:#1e3a8a;border-radius:10px}@keyframes balloon-appear{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.comic-balloon:before{content:"";position:absolute;left:-2.2vh;top:20%;transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:1.6vh 2.2vh 1.6vh 0;border-color:transparent white transparent transparent;filter:drop-shadow(-.4vh 0 0 #1e3a8a)}.balloon-text{color:#1e293b;word-wrap:break-word;font-weight:500;white-space:pre-wrap}.balloon-text .sentence{display:block;opacity:0;animation:sentence-appear .4s ease-out forwards;margin-bottom:.8em}.balloon-text .sentence:last-child{margin-bottom:0}@keyframes sentence-appear{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.balloon-typing{display:flex;gap:6px;justify-content:center;padding:8px 0}.balloon-typing .typing-dot{width:1vh;height:1vh;background:linear-gradient(135deg,#3b82f6,#1e3a8a);border-radius:50%;animation:typing 1.4s infinite}.balloon-typing .typing-dot:nth-child(2){animation-delay:.2s}.balloon-typing .typing-dot:nth-child(3){animation-delay:.4s}.balloon-thinking{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 0;color:#1e3a8a;font-weight:600;font-size:1rem}.balloon-thinking .thinking-text{animation:fade-pulse 1.5s ease-in-out infinite}.balloon-thinking .thinking-dots{display:flex;gap:4px}.balloon-thinking .thinking-dot{width:.8vh;height:.8vh;background:linear-gradient(135deg,#3b82f6,#1e3a8a);border-radius:50%;animation:typing 1.4s infinite}.balloon-thinking .thinking-dot:nth-child(1){animation-delay:0s}.balloon-thinking .thinking-dot:nth-child(2){animation-delay:.2s}.balloon-thinking .thinking-dot:nth-child(3){animation-delay:.4s}@keyframes fade-pulse{0%,to{opacity:1}50%{opacity:.6}}.mic-button-container{height:10dvh;display:flex;justify-content:center;align-items:center;padding:0 2vw;background:#1e3a8ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid rgba(96,165,250,.3);flex-shrink:0}.mic-button{display:flex;align-items:center;justify-content:center;width:7dvh;height:7dvh;padding:0;border:none;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 8px 24px #3b82f680;outline:none}.mic-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 32px #3b82f6b3;background:linear-gradient(135deg,#60a5fa,#3b82f6)}.mic-button:active:not(:disabled){transform:translateY(-1px)}.mic-button.recording{background:linear-gradient(135deg,#ef4444,#dc2626);animation:pulse-recording 1.5s infinite}@keyframes pulse-recording{0%,to{box-shadow:0 0 #ef4444b3}50%{box-shadow:0 0 0 25px #ef444400}}.mic-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.mic-icon{font-size:3.5dvh;line-height:1}@media (max-width: 768px){.app-header{padding:1dvh 2vw}.app-header h1{font-size:1.8dvh}.brand-logo{width:3dvh;height:3dvh}.brand-logo svg{width:2.4dvh;height:2.4dvh}.connection-status{font-size:1.1dvh;padding:.4dvh 1vw}.app-main{padding:1vw}.avatar-section{padding:0}.avatar-container{max-width:95vw}.comic-balloon{position:absolute;left:100%;top:5%;margin-left:1.5vw;width:40vw;min-width:30vw;max-width:45vw;font-size:1.5dvh;padding:1dvh 1.5vw;max-height:35dvh}.comic-balloon:before{top:15%}.mic-button-container{padding:1.2dvh 2vw}.mic-button{width:6dvh;height:6dvh}}@media (max-width: 480px){.app-header{padding:.8dvh 1.5vw}.app-header h1{font-size:1.6dvh}.brand-logo{width:2.8dvh;height:2.8dvh}.brand-logo svg{width:2dvh;height:2dvh}.connection-status{font-size:1dvh;padding:.3dvh .8vw}.status-indicator{width:.5dvh;height:.5dvh}.app-main{padding:.5vw}.avatar-section{padding:0;flex-direction:row;justify-content:flex-start;align-items:flex-start}.avatar-container{max-width:42vw;flex-direction:row;margin-left:0;align-self:flex-start}.comic-balloon{position:absolute;left:100%;top:10%;margin-left:1vw;width:50vw;min-width:auto;max-width:52vw;font-size:1.3dvh;padding:.7dvh 1vw;max-height:35dvh}.comic-balloon:before{left:-1.5dvh;top:15%;transform:translateY(-50%);border-width:1dvh 1.5dvh 1dvh 0}.mic-button-container{padding:1dvh 1.5vw}.mic-button{width:5.5dvh;height:5.5dvh}.mic-icon{font-size:2.5dvh}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}