@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css";:root{--bg-color:#0f172a;--top-pane:#1e293b;--bottom-pane:#0f172a;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-top:#10b981;--accent-bottom:#3b82f6;--agent-bg:#1e293bf2;--agent-border:#f59e0b;--agent-text:#fbbf24}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,sans-serif}body{background-color:var(--bg-color);min-height:100vh;color:var(--text-primary);justify-content:center;align-items:center;display:flex}#root{justify-content:center;align-items:center;width:100%;display:flex}.app-container{background-color:var(--bottom-pane);border:8px solid #000;border-radius:40px;flex-direction:column;flex-shrink:0;width:414px;height:896px;display:flex;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000080}.pane{flex-direction:column;flex:1;padding:30px 24px;display:flex;position:relative}.top-pane{background-color:var(--top-pane);transform:rotate(180deg)}.pane-divider{z-index:20;justify-content:center;align-items:center;height:0;display:flex;position:relative}.swap-button{background:var(--bg-color);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;border:2px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;font-size:.85rem;transition:color .2s,border-color .2s;display:flex;position:absolute}.swap-button:hover{color:var(--text-primary);border-color:#ffffff59}.location-badge{color:var(--text-secondary);opacity:.65;align-items:center;gap:5px;max-width:140px;font-size:.7rem;display:flex;position:absolute;left:24px}.location-badge i{flex-shrink:0;font-size:.65rem}.location-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.location-loading{opacity:.4}.debug-toggle{background:var(--bg-color);width:28px;height:28px;color:var(--text-secondary);cursor:pointer;opacity:.5;border:1.5px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:.75rem;transition:color .2s,border-color .2s,background-color .2s;display:flex;position:absolute;right:24px}.debug-toggle:hover{opacity:1;color:var(--text-primary)}.debug-toggle.active{opacity:1;color:#f59e0b;background:#f59e0b1a;border-color:#f59e0b}.app-wrapper{align-items:center;gap:24px;display:flex}.debug-spacer{flex-shrink:0;width:260px}.debug-sidebar{background:#0f172ae6;border:1px solid #f59e0b40;border-radius:16px;flex-direction:column;gap:10px;width:260px;max-height:500px;padding:16px;animation:.3s forwards fadeInSlideUp;display:flex;overflow-y:auto}.debug-header{color:#f59e0b;border-bottom:1px solid #f59e0b26;align-items:center;gap:6px;padding-bottom:8px;font-size:.78rem;font-weight:600;display:flex}.debug-thinking{color:var(--text-secondary);align-items:center;gap:8px;font-size:.8rem;display:flex}.debug-content{color:var(--text-secondary);white-space:pre-wrap;font-size:.8rem;line-height:1.6}.debug-decision{text-align:center;border-radius:8px;margin-top:4px;padding:6px 10px;font-size:.75rem;font-weight:600}.debug-decision.checked{color:#10b981;background:#10b9811f}.debug-decision.skipped{color:var(--text-secondary);background:#94a3b81a}.bottom-pane{background-color:var(--bottom-pane)}.lang-label{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:.9rem;font-weight:600;display:flex}.lang-selector-wrap{position:relative}.lang-selector{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:6px;padding:4px 8px;font-family:Inter,-apple-system,sans-serif;font-size:.9rem;font-weight:600;transition:background-color .2s,color .2s;display:flex}.lang-selector:hover{color:var(--text-primary);background-color:#ffffff14}.lang-selector i{opacity:.7;font-size:.7rem}.picker-overlay{z-index:9;position:fixed;inset:0}.lang-dropdown{z-index:10;background:#1e293b;border:1px solid #ffffff1a;border-radius:10px;min-width:120px;position:absolute;top:calc(100% + 4px);left:0;overflow:hidden;box-shadow:0 8px 24px #0006}.lang-option{width:100%;color:var(--text-secondary);cursor:pointer;text-align:left;background:0 0;border:none;padding:10px 16px;font-family:Inter,-apple-system,sans-serif;font-size:.9rem;transition:background-color .15s,color .15s;display:block}.lang-option:hover{color:var(--text-primary);background-color:#ffffff14}.lang-option.active{color:var(--text-primary);font-weight:600}.text-content{flex-direction:column;flex:1;justify-content:center;gap:15px;display:flex}.main-text{color:var(--text-primary);opacity:0;font-size:1.75rem;font-weight:700;line-height:1.3;animation:.4s forwards fadeUp;transform:translateY(10px)}.sub-text{color:var(--text-secondary);opacity:0;font-size:1.1rem;font-weight:400;animation:.4s .8s forwards fadeUp;transform:translateY(10px)}@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}.input-controls{justify-content:center;align-items:center;gap:12px;margin-top:20px;display:flex}.mode-toggle{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:1rem;transition:color .2s,background-color .2s;display:flex}.mode-toggle:hover{color:var(--text-primary);background-color:#ffffff1a}.text-input-form{flex:1;align-items:center;gap:8px;max-width:272px;display:flex}.text-input{color:var(--text-primary);background:#ffffff14;border:1px solid #ffffff26;border-radius:24px;outline:none;flex:1;min-width:0;padding:12px 18px;font-family:Inter,-apple-system,sans-serif;font-size:.95rem;transition:border-color .2s}.text-input::placeholder{color:var(--text-secondary);opacity:.6}.text-input:disabled{opacity:.35;cursor:not-allowed}.top-input:focus{border-color:#10b98180}.bottom-input:focus{border-color:#3b82f680}.send-button{color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1rem;transition:transform .2s,opacity .2s;display:flex}.send-button:disabled{opacity:.35;cursor:not-allowed}.send-button:not(:disabled):active{transform:scale(.95)}.top-send{background-color:var(--accent-top);box-shadow:0 4px 12px #10b98166}.bottom-send{background-color:var(--accent-bottom);box-shadow:0 4px 12px #3b82f666}.mic-button{color:#fff;cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:1.8rem;transition:transform .2s,box-shadow .2s;display:flex;position:relative;box-shadow:0 10px 25px #0000004d}.mic-button:active{transform:scale(.95)}.mic-button.listening{animation:1.5s infinite pulse}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #fff6}70%{transform:scale(1.05);box-shadow:0 0 0 15px #fff0}to{transform:scale(1);box-shadow:0 0 #fff0}}.top-mic{background-color:var(--accent-top);box-shadow:0 8px 20px #10b98166}.bottom-mic{background-color:var(--accent-bottom);box-shadow:0 8px 20px #3b82f666}.translating-indicator{color:var(--text-secondary);opacity:0;align-items:center;gap:8px;font-size:1rem;animation:.3s forwards fadeUp;display:flex}.agent-status-text{color:var(--text-secondary);font-size:.9rem}.translation-error{color:#f87171;opacity:0;flex-direction:column;align-items:center;gap:10px;font-size:.95rem;animation:.3s forwards fadeUp;display:flex}.retry-button{color:#f87171;cursor:pointer;background:#f871711f;border:1px solid #f871714d;border-radius:20px;padding:6px 18px;font-family:Inter,-apple-system,sans-serif;font-size:.85rem;transition:background .2s}.retry-button:hover{background:#f8717140}.response-text{color:var(--text-secondary);font-size:1.4rem}.subtle-agent-note{color:var(--text-secondary);-webkit-backdrop-filter:blur(8px);background:#0f172a99;border:1px solid #3b82f633;border-radius:12px;align-items:flex-start;gap:10px;margin-top:20px;padding:12px 16px;font-size:.9rem;animation:.5s forwards fadeInSlideUp;display:flex;box-shadow:0 4px 15px #0003}.subtle-agent-note strong{color:#60a5fa;font-weight:600}.subtle-agent-note>i{color:#60a5fa;flex-shrink:0;margin-top:2px;font-size:1.1rem}.agent-content{flex:1}.agent-dismiss{color:var(--text-secondary);cursor:pointer;opacity:.6;background:0 0;border:none;flex-shrink:0;padding:0;font-size:.9rem;transition:opacity .2s}.agent-dismiss:hover{opacity:1}@keyframes fadeInSlideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
