.app-header{position:fixed;top:0;left:0;right:0;height:50px;background:#333;color:#fff;display:flex;align-items:center;justify-content:center;z-index:1000;box-shadow:0 2px 4px rgba(0,0,0,.2)}.route-title{margin:0;font-size:1.2rem;font-weight:500;text-align:center}.app-root{padding-top:50px}.app-container{height:calc(100vh - 50px)!important}@media (max-width:768px){.app-root{padding-top:0}.app-container{height:100vh!important}}:root{--primary-color:#4caf50;--secondary-color:#2196f3;--text-color:#333;--background-color:#f5f5f5;--avatar-background:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,Helvetica Neue,sans-serif;color:var(--text-color);background-color:var(--background-color);line-height:1.6}#app{min-height:100vh;margin:0 auto}#app,.avatar-container{display:flex;flex-direction:column}.avatar-container{height:100%;background-color:var(--avatar-background);align-items:center}.canvas-container{width:100%;height:400px;position:relative}.interaction-container{width:100%;padding:10px;border-radius:8px;background-color:var(--avatar-background);box-shadow:0 4px 6px rgba(0,0,0,.1)}.input-container{display:flex;gap:10px}button{background-color:var(--primary-color);color:#fff;border:none;border-radius:50%;min-width:50px;min-height:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s}button:hover{background-color:#45a049}input[type=text]{flex-grow:1;padding:12px 20px;border:2px solid #ddd;border-radius:25px;font-size:16px;outline:none;transition:border-color .3s}input[type=text]:focus{border-color:var(--primary-color)}.subtitles{margin-top:20px;text-align:center;min-height:60px;font-size:18px;font-weight:500}.recording{animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,0,0,.4)}70%{box-shadow:0 0 0 10px rgba(255,0,0,0)}to{box-shadow:0 0 0 0 rgba(255,0,0,0)}}