@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap";:root{--bg-app:#f8fafc;--bg-card:#ffffffd9;--border-color:#e2e8f0;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--primary:#6366f1;--primary-hover:#4f46e5;--primary-light:#6366f11a;--gradient-user:linear-gradient(135deg, #6366f1 0%, #a855f7 100%);--bg-user-msg:#6366f1;--text-user-msg:#fff;--bg-ai-msg:#fff;--border-ai-msg:#e2e8f0;--text-ai-msg:#0f172a;--bg-correction:#fef2f2;--border-correction:#fee2e2;--text-correction-wrong:#ef4444;--text-correction-right:#10b981;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--font-sans:"Outfit", "Noto Sans JP", system-ui, sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg-app:#0f172a;--bg-card:#1e293bd9;--border-color:#334155;--text-primary:#f8fafc;--text-secondary:#cbd5e1;--text-muted:#64748b;--primary:#818cf8;--primary-hover:#6366f1;--primary-light:#818cf826;--gradient-user:linear-gradient(135deg, #818cf8 0%, #c084fc 100%);--bg-user-msg:#818cf8;--text-user-msg:#0f172a;--bg-ai-msg:#1e293b;--border-ai-msg:#334155;--text-ai-msg:#f8fafc;--bg-correction:#ef44441a;--border-correction:#ef444433;--text-correction-wrong:#f87171;--text-correction-right:#34d399;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);justify-content:center;align-items:center;min-height:100vh;transition:background-color .3s;display:flex;overflow:hidden}#root{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:100%;max-width:500px;height:100vh;box-shadow:var(--shadow-lg);flex-direction:column;display:flex;position:relative}@media (width<=500px){#root{border-left:none;border-right:none;max-width:100%}}.app-header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background-color:#ffffff0d;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.app-title-container{align-items:center;gap:10px;display:flex}.app-icon{background:var(--gradient-user);color:#fff;width:36px;height:36px;box-shadow:var(--shadow-md);border-radius:10px;justify-content:center;align-items:center;font-weight:700;display:flex}.app-title{letter-spacing:-.5px;font-size:18px;font-weight:700}.app-subtitle{color:var(--text-secondary);font-size:11px}.chat-messages{scroll-behavior:smooth;flex-direction:column;flex:1;gap:16px;padding:20px;display:flex;overflow-y:auto}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:3px}.message-row{width:100%;margin-bottom:4px;display:flex}.message-row.user{justify-content:flex-end}.message-row.ai{justify-content:flex-start}.message-bubble{max-width:85%;box-shadow:var(--shadow-sm);border-radius:18px;padding:12px 16px;font-size:15px;line-height:1.5;animation:.3s cubic-bezier(.16,1,.3,1) forwards fadeInBubble;position:relative}@keyframes fadeInBubble{0%{opacity:0;transform:translateY(10px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.message-row.user .message-bubble{background:var(--gradient-user);color:var(--text-user-msg);border-bottom-right-radius:4px}.message-row.ai .message-bubble{background-color:var(--bg-ai-msg);border:1px solid var(--border-ai-msg);color:var(--text-ai-msg);border-bottom-left-radius:4px}.speech-button{color:var(--text-muted);cursor:pointer;vertical-align:middle;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;margin-left:8px;padding:4px;transition:all .2s;display:inline-flex}.speech-button:hover{color:var(--primary);background-color:var(--primary-light)}.speech-button:active{transform:scale(.9)}.correction-card{border:1px solid var(--border-correction);background-color:var(--bg-correction);border-radius:12px;flex-direction:column;gap:8px;margin-top:10px;padding:12px;font-size:14px;animation:.3s slideDown;display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.correction-title{color:var(--text-secondary);align-items:center;gap:5px;font-size:12px;font-weight:700;display:flex}.correction-item{flex-direction:column;gap:2px;display:flex}.correction-wrong{color:var(--text-correction-wrong);align-items:center;gap:6px;text-decoration:line-through;display:flex}.correction-right{color:var(--text-correction-right);align-items:center;gap:6px;font-weight:500;display:flex}.correction-explanation{color:var(--text-secondary);border-top:1px dashed var(--border-color);margin-top:4px;padding-top:6px;font-size:13px}.input-area{border-top:1px solid var(--border-color);background-color:#ffffff05;align-items:center;gap:10px;padding:16px 20px;display:flex}.chat-input{border:1px solid var(--border-color);background-color:var(--bg-ai-msg);color:var(--text-primary);font-family:var(--font-sans);border-radius:24px;outline:none;flex:1;padding:12px 16px;font-size:15px;transition:all .2s}.chat-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.send-button{background:var(--gradient-user);color:#fff;cursor:pointer;width:44px;height:44px;box-shadow:var(--shadow-sm);border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex}.send-button:hover{box-shadow:var(--shadow-md);transform:scale(1.05)}.send-button:active{transform:scale(.95)}.send-button:disabled{background:var(--border-color);color:var(--text-muted);cursor:not-allowed;box-shadow:none;transform:none}.typing-indicator{align-items:center;gap:4px;padding:4px 8px;display:flex}.typing-dot{background-color:var(--text-muted);border-radius:50%;width:6px;height:6px;animation:1.4s ease-in-out infinite both bounce}.typing-dot:first-child{animation-delay:-.32s}.typing-dot:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.config-button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.config-button:hover{background-color:var(--primary-light);color:var(--primary)}.api-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background-color:#0006;justify-content:center;align-items:center;padding:20px;display:flex;position:absolute;inset:0}.api-modal{background-color:var(--bg-ai-msg);border:1px solid var(--border-color);width:100%;max-width:400px;box-shadow:var(--shadow-lg);border-radius:20px;flex-direction:column;gap:16px;padding:24px;display:flex}.api-modal-title{font-size:18px;font-weight:700}.api-modal-desc{color:var(--text-secondary);font-size:13px;line-height:1.5}.api-input-container{flex-direction:column;gap:6px;display:flex}.api-input-label{color:var(--text-muted);font-size:11px;font-weight:700}.api-input{border:1px solid var(--border-color);background-color:var(--bg-app);width:100%;color:var(--text-primary);border-radius:10px;outline:none;padding:10px 14px;font-size:14px}.api-input:focus{border-color:var(--primary)}.api-modal-buttons{justify-content:flex-end;gap:10px;margin-top:8px;display:flex}.btn-secondary{border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:10px;padding:8px 16px;font-size:14px;transition:all .2s}.btn-secondary:hover{background-color:var(--border-color)}.btn-primary{background:var(--gradient-user);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:8px 16px;font-size:14px;font-weight:500;transition:all .2s}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.mic-button{background-color:var(--bg-ai-msg);border:1px solid var(--border-color);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;box-shadow:var(--shadow-sm);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .2s;display:flex}.mic-button:hover{background-color:var(--primary-light);color:var(--primary);border-color:var(--primary)}.mic-button:active{transform:scale(.95)}.mic-button:disabled{background-color:var(--border-color);color:var(--text-muted);cursor:not-allowed;box-shadow:none;transform:none}.mic-button.recording{color:#fff;background:#ef4444;border-color:#ef4444;animation:1.5s infinite pulseMic}.mic-button.recording:hover{color:#fff;background:#dc2626;border-color:#dc2626}@keyframes pulseMic{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.voice-mode-overlay{z-index:200;background:radial-gradient(circle,#1e1b4b 0%,#0f172a 100%);justify-content:center;align-items:center;animation:.3s forwards fadeIn;display:flex;position:absolute;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.voice-mode-container{flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;padding:40px 24px;display:flex;position:relative}.voice-close-button{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffff1a;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex;position:absolute;top:20px;right:20px}.voice-close-button:hover{background:#fff3;transform:rotate(90deg)}.voice-close-button:active{transform:scale(.9)rotate(90deg)}.voice-orb-container{flex:1;justify-content:center;align-items:center;margin-top:40px;display:flex}.voice-orb{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);border-radius:50%;justify-content:center;align-items:center;width:130px;height:130px;transition:all .5s;display:flex;position:relative;box-shadow:0 0 40px #6366f199}.voice-orb:after{content:"";opacity:0;border:2px dashed #a855f766;border-radius:50%;transition:all .5s;position:absolute;inset:-10px}.voice-orb.idle{animation:3s ease-in-out infinite orbBreathe}@keyframes orbBreathe{0%,to{transform:scale(1);box-shadow:0 0 40px #6366f180}50%{transform:scale(1.05);box-shadow:0 0 50px #6366f1b3}}.voice-orb.listening{animation:1.5s ease-in-out infinite orbListening}.voice-orb.listening:after{opacity:1;animation:10s linear infinite spinDashed}@keyframes orbListening{0%{transform:scale(1);box-shadow:0 0 30px #6366f199,0 0 #a855f766}50%{transform:scale(1.08)}to{transform:scale(1);box-shadow:0 0 40px 10px #6366f100,0 0 0 25px #a855f700}}@keyframes spinDashed{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.voice-orb.thinking{background:linear-gradient(135deg,#a855f7 0%,#ec4899 100%);animation:2s linear infinite orbThinking;box-shadow:0 0 40px #ec4899b3}@keyframes orbThinking{0%{transform:scale(1.02)rotate(0)}to{transform:scale(1.02)rotate(360deg)}}.voice-orb.speaking{animation:.5s ease-in-out infinite alternate orbSpeaking;box-shadow:0 0 40px #6366f1b3}@keyframes orbSpeaking{0%{transform:scale(1.02)}to{transform:scale(1.15)}}.voice-orb-glow{filter:blur(5px);opacity:.6;background:radial-gradient(circle,#fffc 0%,#fff0 70%);border-radius:50%;width:80%;height:80%;position:absolute}.voice-status-container{text-align:center;margin-top:20px;margin-bottom:20px}.voice-status-title{color:#fff;letter-spacing:.5px;margin-bottom:6px;font-family:Outfit,sans-serif;font-size:24px;font-weight:700}.voice-status-desc{color:#94a3b8;font-size:14px}.voice-captions-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a99;border:1px solid #ffffff14;border-radius:20px;flex-direction:column;gap:16px;width:100%;padding:20px;display:flex}.caption-row{flex-direction:column;gap:4px;display:flex}.caption-label{text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-weight:700}.caption-row.user .caption-label{color:var(--primary)}.caption-row.ai .caption-label{color:#a855f7}.caption-text{color:#fff;word-break:break-word;font-size:14px;line-height:1.4}.header-actions{align-items:center;gap:8px;display:flex}.voice-mode-button{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.voice-mode-button:hover{background-color:var(--primary-light);color:var(--primary)}.onboarding-screen{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;width:100%;height:100%;padding:30px 24px;display:flex;overflow-y:auto}.onboarding-screen::-webkit-scrollbar{width:6px}.onboarding-screen::-webkit-scrollbar-thumb{background-color:var(--border-color);border-radius:3px}.onboarding-container{flex-direction:column;gap:24px;max-width:100%;display:flex}.onboarding-header{text-align:center;flex-direction:column;align-items:center;gap:12px;display:flex}.onboarding-logo{background:var(--gradient-user);color:#fff;width:48px;height:48px;box-shadow:var(--shadow-md);border-radius:14px;justify-content:center;align-items:center;font-family:Outfit,sans-serif;font-size:20px;font-weight:700;display:flex}.onboarding-title{letter-spacing:-.5px;background:var(--gradient-user);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Outfit,sans-serif;font-size:24px;font-weight:800}.onboarding-subtitle{color:var(--text-secondary);padding:0 10px;font-size:13px;line-height:1.5}.onboarding-features{flex-direction:column;gap:12px;display:flex}.feature-card{background-color:var(--bg-ai-msg);border:1px solid var(--border-ai-msg);box-shadow:var(--shadow-sm);border-radius:16px;gap:16px;padding:14px 16px;display:flex}.feature-icon{flex-shrink:0;justify-content:center;align-items:center;font-size:24px;display:flex}.feature-info{flex-direction:column;gap:4px;display:flex}.feature-title{color:var(--text-primary);font-size:14px;font-weight:700}.feature-desc{color:var(--text-secondary);font-size:12px;line-height:1.4}.onboarding-setup{border:1px dashed var(--border-color);background-color:#ffffff05;border-radius:20px;flex-direction:column;gap:16px;padding:20px;display:flex}.setup-title{color:var(--text-primary);border-bottom:1px solid var(--border-color);padding-bottom:8px;font-size:16px;font-weight:700}.setup-steps{flex-direction:column;gap:12px;display:flex}.step-item{align-items:flex-start;gap:10px;display:flex}.step-num{background:var(--primary);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-top:2px;font-size:11px;font-weight:700;display:flex}.step-text{color:var(--text-secondary);font-size:13px;line-height:1.4}.btn-api-link{text-align:center;color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:12px;margin:4px 0;padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:all .2s;display:block;box-shadow:0 4px 10px #10b98133}.btn-api-link:hover{transform:translateY(-1px);box-shadow:0 6px 14px #10b9814d}.btn-api-link:active{transform:translateY(0)}.setup-input-container{flex-direction:column;gap:10px;margin-top:6px;display:flex}.setup-api-input{border:1px solid var(--border-color);background-color:var(--bg-ai-msg);width:100%;color:var(--text-primary);border-radius:12px;outline:none;padding:12px 16px;font-size:14px;transition:all .2s}.setup-api-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.btn-setup-start{background:var(--gradient-user);color:#fff;cursor:pointer;width:100%;box-shadow:var(--shadow-md);border:none;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;transition:all .2s}.btn-setup-start:hover{opacity:.95;transform:translateY(-1px)}.btn-setup-start:active{transform:translateY(0)}.btn-setup-start:disabled{background:var(--border-color);color:var(--text-muted);cursor:not-allowed;box-shadow:none;transform:none}.setup-disclaimer{color:var(--text-muted);text-align:justify;font-size:11px;line-height:1.4}.level-selector-bar{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);z-index:5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-around;gap:8px;padding:8px 16px;display:flex}.level-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:4px;padding:8px 4px;font-size:12px;font-weight:500;transition:all .2s;display:flex}.level-btn:hover{background-color:var(--primary-light);color:var(--primary)}.level-btn.active{background-color:var(--primary-light);color:var(--primary);border-color:var(--primary);box-shadow:var(--shadow-sm);font-weight:600}.bubble-menu{border-top:1px dashed var(--border-color);gap:8px;margin-top:10px;padding-top:8px;display:flex}.bubble-menu-btn{border:1px solid var(--border-color);background-color:var(--bg-app);color:var(--text-secondary);cursor:pointer;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:500;transition:all .2s}.bubble-menu-btn:hover{border-color:var(--primary);color:var(--primary)}.bubble-menu-btn.active{background-color:var(--primary-light);color:var(--primary);border-color:var(--primary)}.reply-translation-panel{border-left:3px solid var(--primary);text-align:left;background-color:#6366f10d;border-radius:8px;margin-top:10px;padding:10px 12px;font-size:13px;animation:.2s slideDown}.reply-explanation-panel{text-align:left;background-color:#a855f70d;border-left:3px solid #a855f7;border-radius:8px;margin-top:10px;padding:10px 12px;font-size:13px;animation:.2s slideDown}.panel-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:10px;font-weight:700}.panel-text{color:var(--text-primary);line-height:1.45}