:root{color-scheme:light;--primary: #00AA7B;--primary-dark: #008f67;--secondary: #8EB8CD;--text: #2d334a;--bg: #f8fafc;--card-bg: #fff;--error: #dc2626}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;overflow:hidden}body{display:flex;align-items:center;justify-content:center;min-height:100dvh;padding:16px}#app{width:100%;max-width:420px}.card{background:var(--card-bg);border:1px solid #e5e7eb;border-radius:16px;padding:20px;box-shadow:0 8px 24px #00000014}h1{font-size:20px;text-align:center;margin-bottom:16px;color:var(--text)}.status{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px}.status p{font-size:14px;color:#666}.status.ok{color:var(--primary);padding:8px 12px;background:#e6f7f2;border-radius:8px;text-align:center;font-weight:600}.status.err{color:var(--error);padding:8px 12px;background:#fef2f2;border-radius:8px;text-align:center;font-weight:600}.spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.upload-section{text-align:center}.instruction{font-size:15px;color:#666;margin-bottom:20px}.upload-buttons{display:flex;flex-direction:column;gap:12px}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:12px;border:none;font-size:16px;font-weight:600;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s,background-color .2s}.btn:active{transform:scale(.98)}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:#eef2ff;color:var(--text);border:1px solid #dbeafe}.btn-secondary:hover{background:#e0e7ff}.btn-send{width:100%;margin-top:16px;background:var(--primary);color:#fff;font-size:18px;padding:16px}.preview{margin-top:12px;border-radius:10px;overflow:hidden;background:#f1f5f9;min-height:60px;max-height:80px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}.preview img{max-width:100%;max-height:70px;display:block}.preview.hidden{display:none}.uploading-section{text-align:center;padding:20px}.uploading-section p{margin:12px 0;color:#666}.progress-bar{width:100%;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin:12px 0}.progress-fill{height:100%;background:var(--primary);transition:width .3s ease}.progress-text{font-weight:600;color:var(--primary)}.btn-cancel{margin-top:16px;background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}.btn-cancel:hover{background:#e2e8f0;color:var(--text)}.error-section{text-align:center;padding:20px}.error-message{color:var(--error);font-size:15px;margin-bottom:20px}.card.controller{padding:12px;height:95dvh;display:flex;flex-direction:column}.card.controller h1{font-size:16px;margin-bottom:8px}.actions{margin-top:10px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.grid2 button,.emotes button{padding:14px 12px;border-radius:12px;border:none;background:#f1f5f9;color:#334155;font-weight:700;font-size:14px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative;box-shadow:0 4px #cbd5e1;transition:transform .1s,box-shadow .1s}.grid2 button:active,.emotes button:active{transform:translateY(4px);box-shadow:none}.emotes{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}.emotes button{font-size:20px;padding:10px}.virtual-pad-container{display:flex;justify-content:center;align-items:center;margin-top:16px;-webkit-user-select:none;user-select:none;touch-action:none!important;flex:-webkit-fit-content}.virtual-pad{position:relative;width:200px;height:200px;background:radial-gradient(circle at 50% 50%,#f0f4f8,#dbeafe);border-radius:50%;border:4px solid #fff;box-shadow:0 10px 25px #0000001a,inset 0 4px 10px #fffc,inset 0 -4px 10px #0000000d;cursor:pointer}.pad-arrow{position:absolute;color:#94a3b8;font-size:24px;pointer-events:none;font-family:inherit}.pad-arrow.up{top:10px;left:50%;transform:translate(-50%)}.pad-arrow.down{bottom:10px;left:50%;transform:translate(-50%)}.pad-arrow.left{left:10px;top:50%;transform:translateY(-50%)}.pad-arrow.right{right:10px;top:50%;transform:translateY(-50%)}.pad-stick{position:absolute;top:50%;left:50%;width:60px;height:60px;margin-top:-30px;margin-left:-30px;background:radial-gradient(circle at 30% 30%,#fff,#f1f5f9);border-radius:50%;box-shadow:0 4px 10px #00000026,inset 0 -4px 4px #0000000d;transition:transform .05s linear;pointer-events:none;z-index:10}.pad-feedback{position:absolute;width:100%;height:100%;border-radius:50%;background:conic-gradient(from 337.5deg,transparent 0deg,rgba(0,170,123,.2) 22.5deg,rgba(0,170,123,.2) 22.5deg,transparent 45deg);pointer-events:none;opacity:0;transition:opacity .15s,transform .1s}.pad-feedback.active{opacity:1}.dpad-hint{text-align:center;font-size:13px;color:#888;margin-top:12px;font-weight:500}.preview-talk-container{display:flex;gap:8px;margin:8px 0;align-items:stretch}.talk-buttons-container{flex:1;display:flex;flex-direction:column;gap:6px}.preview-half{flex:1;border-radius:10px;overflow:hidden;background:#f1f5f9;min-height:80px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb}.preview-half img{max-width:100%;max-height:80px;display:block}.talk-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:12px;border:2px solid var(--primary);background:linear-gradient(135deg,#e6f7f2,#d0f0e6);color:var(--primary-dark);font-weight:700;font-size:14px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s,background-color .2s,box-shadow .2s}.talk-button:active{transform:scale(.98);background:var(--primary);color:#fff}.talk-button.recording{transform:scale(1.02);background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#dc2626;color:#fff;box-shadow:0 0 30px #ef444499;animation:pulse-recording .8s ease-in-out infinite}.talk-button.processing{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b;color:#92400e;pointer-events:none;animation:pulse-processing 1.5s ease-in-out infinite}.talk-button.recorded{background:linear-gradient(135deg,#dbeafe,#bfdbfe);border-color:#3b82f6;color:#1e40af}.send-button{background:linear-gradient(135deg,#22c55e,#16a34a)!important;border-color:#16a34a!important;color:#fff!important;font-size:16px!important;padding:14px!important;animation:pulse-send 1s ease-in-out infinite}.send-button:active{background:linear-gradient(135deg,#16a34a,#15803d)!important;transform:scale(.98)}@keyframes pulse-send{0%,to{box-shadow:0 0 10px #22c55e66}50%{box-shadow:0 0 25px #22c55eb3}}.talk-button .mic-icon{width:32px;height:32px;transition:transform .2s}.talk-button.recording .mic-icon{stroke:#fff;animation:mic-pulse .5s ease-in-out infinite}.talk-button.processing .mic-icon{stroke:#92400e;opacity:.7}@keyframes pulse-recording{0%,to{box-shadow:0 0 20px #ef444466;transform:scale(1.02)}50%{box-shadow:0 0 40px #ef4444b3;transform:scale(1.05)}}@keyframes pulse-processing{0%,to{opacity:1}50%{opacity:.8}}@keyframes mic-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.talk-status{text-align:center;font-size:14px;color:#666;padding:8px;background:#f8fafc;border-radius:8px;margin-bottom:8px}.talk-status.hidden{display:none}.talk-status.ai-response{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b;color:#92400e;font-size:16px;font-weight:600;padding:12px 16px;line-height:1.5;animation:ai-response-appear .3s ease-out}@keyframes ai-response-appear{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.connection-indicator{position:absolute;top:12px;right:12px;width:12px;height:12px;border-radius:50%;transition:background-color .3s,box-shadow .3s}.connection-indicator.connected{background-color:#22c55e;box-shadow:0 0 8px #22c55e99}.connection-indicator.checking{background-color:#eab308;box-shadow:0 0 8px #eab30899;animation:pulse-checking 1s ease-in-out infinite}.connection-indicator.disconnected{background-color:#ef4444;box-shadow:0 0 8px #ef444499}@keyframes pulse-checking{0%,to{opacity:1}50%{opacity:.5}}.card.controller{position:relative;padding:12px 12px 80px}.controller-preview{border-radius:10px;overflow:hidden;background:#f1f5f9;min-height:80px;height:20%;max-height:120px;display:flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;margin-bottom:10px}.controller-preview img{max-width:100%;max-height:80px;display:block}.controller-footer,.chat-footer{position:absolute;bottom:0;left:0;right:0;padding:16px 12px;background:var(--card-bg);border-radius:0 0 16px 16px;display:flex;gap:12px;z-index:100;box-shadow:0 -4px 20px #0000000d}.footer-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 10px;border-radius:16px;border:none;font-weight:800;font-size:16px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .1s cubic-bezier(.3,0,.5,1),box-shadow .1s cubic-bezier(.3,0,.5,1);white-space:nowrap;position:relative;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}.footer-button:active{transform:translateY(6px);box-shadow:none!important}.footer-button .footer-icon{width:24px;height:24px;flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));stroke-width:2.5px}.footer-button.chat-button{background:var(--primary);box-shadow:0 6px 0 var(--primary-dark)}.footer-button.chat-button:active{background:var(--primary)}.footer-button.move-button{flex:.8;background:#3b82f6;box-shadow:0 6px #1d4ed8}.footer-button.move-button:active{background:#3b82f6}.chat-footer .footer-button.talk-button{flex:1.2;background:var(--primary);box-shadow:0 6px 0 var(--primary-dark)}.chat-footer .footer-button.talk-button:active{background:var(--primary)}.chat-footer .footer-button.talk-button.recording{background:#ef4444;box-shadow:0 6px #b91c1c;animation:none}.chat-footer .footer-button.talk-button.recording:active{background:#ef4444}.chat-footer .footer-button.talk-button.recording span{content:"おくる！"}.chat-footer .footer-button.talk-button.processing{background:#f59e0b;box-shadow:0 6px #b45309;pointer-events:none;transform:translateY(6px);box-shadow:none;opacity:.8}.chat-footer .footer-button.talk-button.expired{background:#94a3b8;box-shadow:0 6px #64748b;cursor:not-allowed}.chat-footer .footer-button.talk-button.expired:active{transform:none;box-shadow:0 6px #64748b}.card.chat-screen{position:relative;padding:12px 12px 90px;height:95dvh;display:flex;flex-direction:column}.chat-container{flex:1;overflow-y:auto;padding:8px 0;display:flex;flex-direction:column;gap:12px}.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#64748b;font-size:15px;text-align:center;padding:20px}.chat-empty-avatar{width:120px;height:120px;border-radius:50%;background:#e6f7f2;display:flex;align-items:center;justify-content:center;font-size:48px;overflow:hidden}.chat-empty-avatar img{width:100%;height:100%;object-fit:contain}.chat-empty-title{font-size:22px;font-weight:700;color:var(--primary);margin:0}.chat-empty-steps{display:flex;flex-direction:column;gap:12px;margin-top:8px}.chat-empty-step{display:flex;align-items:center;gap:12px;background:#f8fafc;padding:12px 16px;border-radius:12px;text-align:left}.step-number{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-text{font-size:14px;color:var(--text);line-height:1.4}.chat-empty-hint{margin-top:8px;font-size:13px;color:#94a3b8}.chat-message{display:flex;align-items:flex-end;gap:8px;max-width:95%}.chat-message.user{align-self:flex-end;flex-direction:row-reverse}.chat-message.ai{align-self:flex-start}.chat-avatar{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}.chat-avatar img{width:100%;height:100%;object-fit:contain}.chat-avatar.user-avatar{display:none}.chat-avatar.ai-avatar{background:#d0f0e6}.chat-bubble{padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.5;word-wrap:break-word}.chat-bubble.user-bubble{background:#3b82f6;color:#fff;border-bottom-right-radius:4px;max-width:90%}.chat-bubble.ai-bubble{background:linear-gradient(135deg,#e6f7f2,#d0f0e6);color:var(--text);border:1px solid var(--primary);border-bottom-left-radius:4px;max-width:100%;font-size:18px}.chat-screen .talk-status{margin:8px 0;text-align:center;font-size:14px;color:#666;padding:8px;background:#f8fafc;border-radius:8px}.hidden{display:none!important}@media (max-width: 380px){.card{padding:16px}h1{font-size:18px}.btn{padding:12px 16px;font-size:15px}.dpad{grid-template-columns:50px 50px 50px;grid-template-rows:50px 50px 50px}}.talk-button.expired,.chat-footer .footer-button.talk-button.expired{background:#e5e7eb;border-color:#9ca3af;color:#6b7280;pointer-events:none;opacity:.7}.talk-button.expired:active,.chat-footer .footer-button.talk-button.expired:active{transform:none;background:#e5e7eb;color:#6b7280}.chat-expired-notice{background:linear-gradient(135deg,#fef3c7,#fde68a);border:2px solid #f59e0b;border-radius:12px;padding:16px;margin:8px 0;text-align:center}.chat-expired-notice p{margin:0;font-size:16px;font-weight:600;color:#92400e}.chat-expired-notice .chat-expired-hint{margin-top:8px;font-size:14px;font-weight:400;color:#b45309}