* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: #ececec; font: 15px system-ui, sans-serif; }
#unity-canvas { display: block; width: 100%; height: 100%; background: #fff; }
#story-ai-toggle { display: none !important; position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 10; border-radius: 50%; width: 48px; height: 48px; background: #f6c865; color: #15151d; font-weight: 800; box-shadow: 0 4px 18px #0008; }
#story-ai-panel { position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: min(390px, calc(100vw - 24px)); overflow: auto; padding: 16px; border-radius: 16px; background: #161d30; color: #f8fafc; box-shadow: 0 12px 40px #000a; text-align: left; }
#story-ai-panel[hidden], #story-ai-toggle[hidden], #story-ai-panel [hidden] { display: none !important; }
#story-ai-panel header, #story-ai-panel nav, #story-ai-panel .buttons { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#story-ai-panel header { font-size: 17px; margin-bottom: 12px; }
#story-ai-panel nav { margin-bottom: 16px; }
#story-ai-panel nav button { flex: 1; }
#story-ai-panel button { border: 0; border-radius: 8px; padding: 10px 12px; background: #f6c865; color: #172033; font: inherit; cursor: pointer; }
#story-ai-panel button.selected { background: #fff; }
#story-ai-panel button:disabled { opacity: .45; cursor: default; }
#story-ai-panel #ai-close { padding: 2px 10px; font-size: 24px; }
#story-ai-panel label { display: block; margin: 12px 0; line-height: 1.4; }
#story-ai-panel input:not([type=checkbox]):not([type=range]), #story-ai-panel textarea, #story-ai-panel select { display: block; width: 100%; margin-top: 5px; padding: 9px; border: 1px solid #64748b; border-radius: 7px; background: #0e1423; color: #fff; font: inherit; }
#story-ai-panel input[type=range] { display: block; width: 100%; }
#story-ai-panel .checkbox { display: flex; align-items: flex-start; gap: 8px; }
#story-ai-panel .buttons { flex-wrap: wrap; justify-content: flex-start; margin: 12px 0; }
#story-ai-panel output { display: block; min-height: 24px; margin: 12px 0; overflow-wrap: anywhere; }
#story-ai-panel #ai-line, #story-ai-panel #ai-match { padding: 10px; border-radius: 8px; background: #25324a; }
#story-ai-panel #ai-video { width: 100%; max-height: 240px; object-fit: contain; background: #000; }
#story-ai-panel small { display: block; color: #b9c7d9; }
#story-ai-panel #ai-status { min-height: 20px; color: #f6c865; }
#story-ai-capture { position: fixed; z-index: 30; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); border: 0; border-radius: 999px; padding: 16px 28px; background: #000; color: #fff; font: 700 18px system-ui, sans-serif; }
#story-ai-capture[hidden] { display: none; }