:root{--bg-dark: #09090b;--bg-panel: rgba(24, 24, 27, .7);--border-color: rgba(255, 255, 255, .1);--text-primary: #f8fafc;--text-secondary: #94a3b8;--accent-color: #3b82f6;--accent-hover: #2563eb;--accent-glow: rgba(59, 130, 246, .4);--danger-color: #ef4444;--danger-glow: rgba(239, 68, 68, .4);--glass-blur: blur(12px);--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;--shadow-glow: 0 0 20px var(--accent-glow);--shadow-danger: 0 0 20px var(--danger-glow)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--bg-dark);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}.app-container{display:flex;height:100dvh;width:100vw;position:relative}.glass-panel{background:var(--bg-panel);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border-color)}.sidebar{width:280px;height:100%;border-right:1px solid var(--border-color);display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:40}@media(max-width:768px){.sidebar{position:absolute;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}}.sidebar-header{padding:20px;border-bottom:1px solid var(--border-color)}.sidebar-content{flex:1;overflow-y:auto;padding:10px}.main-content{flex:1;display:flex;flex-direction:column;height:100%;position:relative}.top-nav{height:60px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--border-color);background:#09090bcc;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);z-index:10}.chat-scroll-area{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:24px}.message{display:flex;flex-direction:column;gap:8px;max-width:85%}.message.self{align-self:flex-end}.message.bot{align-self:flex-start}.bubble{padding:16px;border-radius:var(--radius-lg);font-size:16px;line-height:1.5;box-shadow:0 4px 6px -1px #0000001a}.bubble.self{background:#2b2b30cc;border-bottom-right-radius:4px}.bubble.bot{background:var(--bg-panel);border:1px solid var(--border-color);border-bottom-left-radius:4px}.translation-large{font-size:24px;font-weight:500;margin-bottom:8px;color:#fff}.source-small{font-size:14px;color:var(--text-secondary)}.nuance-block{margin-top:12px;padding-top:12px;border-top:1px solid var(--border-color);font-size:14px;color:#a1a1aa}.markdown-body p:first-child{margin-top:0}.markdown-body p:last-child{margin-bottom:0}.markdown-body strong,.markdown-body b{font-weight:600;color:#fff}.markdown-body ul,.markdown-body ol{margin-left:20px;margin-top:8px;margin-bottom:8px}.markdown-body p{margin-top:8px;margin-bottom:8px}.controls-area{padding:20px;border-top:1px solid var(--border-color);background:#09090be6;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);display:flex;flex-direction:column;gap:16px}.direction-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}button{cursor:pointer;border:none;border-radius:var(--radius-md);padding:12px 16px;font-size:16px;font-weight:500;transition:all .2s ease;background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;gap:8px}button:hover{background:#ffffff1a}button:active{transform:scale(.98)}button.primary{background:var(--accent-color);border-color:var(--accent-color)}button.primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-glow)}button.listening{background:var(--danger-color);border-color:var(--danger-color);animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%{box-shadow:0 0 0 0 var(--danger-glow)}70%{box-shadow:0 0 0 15px #ef444400}to{box-shadow:0 0 #ef444400}}textarea,input{background:#0003;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px;color:var(--text-primary);font-family:inherit;font-size:16px;width:100%;resize:vertical}textarea:focus,input:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px var(--accent-glow)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}