:root{--color-primary: #2f6fed;--color-primary-dark: #1f52b8;--color-secondary: #6b7280;--color-background: #f7f8fa;--color-surface: #ffffff;--color-sidebar-bg: #f0f2f6;--color-text: #1f2430;--color-text-muted: #5b6472;--color-success: #1e8e5a;--color-warning: #b45309;--color-border: #e2e5eb;--color-avatar-bg: #f5a623;--radius: 12px;--content-width: 960px;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--color-background);color:var(--color-text);font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased}#app{max-width:var(--content-width);margin:0 auto;min-height:100vh;background:var(--color-surface)}@media (min-width: 768px){#app{min-height:auto;margin-top:24px;margin-bottom:24px;border-radius:var(--radius);border:1px solid var(--color-border);box-shadow:0 1px 3px #0000000f;overflow:hidden}}.app-shell{display:flex;flex-direction:column;min-height:100vh}@media (min-width: 768px){.app-shell{flex-direction:row;min-height:600px}}.sidebar{background:var(--color-sidebar-bg);padding:20px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--color-border)}@media (min-width: 768px){.sidebar{width:320px;flex-shrink:0;border-bottom:none;border-right:1px solid var(--color-border);overflow-y:auto}}.sidebar__chip{align-self:flex-start;font-size:.75rem;font-weight:600;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;padding:4px 12px}.progress-track{height:6px;background:var(--color-border);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:var(--color-primary);transition:width .3s ease}.sidebar__image{width:100%;border-radius:var(--radius);border:1px solid var(--color-border);display:block}.sidebar__title{font-size:1.1rem;margin:0}.sidebar__narrative{color:var(--color-text);margin:0;font-size:.95rem}.main-panel{flex:1;display:flex;flex-direction:column;min-width:0}.main-panel__header{padding:14px 20px;border-bottom:1px solid var(--color-border);text-align:center;font-size:.8rem;color:var(--color-text-muted)}.main-panel__question{font-weight:600;margin:0;padding:16px 20px 0}.main-panel__body{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}.chat-thread{display:flex;flex-direction:column;gap:14px}.message{display:flex;gap:10px;max-width:100%}.message--ai{align-items:flex-start}.message--user{justify-content:flex-end}.message__avatar{width:32px;height:32px;border-radius:999px;background:var(--color-avatar-bg);color:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem}.message__content{display:flex;flex-direction:column;gap:4px;max-width:85%}.message__author{font-size:.8rem;font-weight:600;color:var(--color-avatar-bg)}.message__bubble{padding:12px 14px;border-radius:var(--radius);font-size:.95rem;white-space:pre-wrap}.message--ai .message__bubble{background:var(--color-surface);border:1px solid var(--color-border)}.message--user .message__bubble{background:#eef3ff;color:var(--color-text);border:1px solid #d3e0fb}.message__bubble--fallback:after{content:" (offline fallback)";font-size:.75rem;opacity:.7}.message__time{font-size:.72rem;color:var(--color-text-muted)}.chat-loading{align-self:flex-start;color:var(--color-text-muted);font-size:.9rem;font-style:italic}.composer{display:flex;gap:10px;align-items:flex-end;padding:14px 20px;border-top:1px solid var(--color-border)}.composer__field{flex:1;display:flex;flex-direction:column;gap:4px}textarea.response-input{font:inherit;padding:10px 14px;border-radius:20px;border:1px solid var(--color-border);resize:none;min-height:44px;max-height:140px}textarea.response-input:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.composer__send{width:44px;height:44px;border-radius:999px;border:none;background:var(--color-primary);color:#fff;font-size:1.1rem;cursor:pointer;flex-shrink:0}.composer__send:hover:not(:disabled){background:var(--color-primary-dark)}.composer__send:disabled{opacity:.5;cursor:default}.char-counter{font-size:.75rem;color:var(--color-text-muted);text-align:right}.char-counter--limit{color:var(--color-warning)}.choice-list{display:flex;flex-direction:column;gap:8px}.choice-button{text-align:left;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);font:inherit;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}.choice-button:hover:not(:disabled){border-color:var(--color-primary)}.choice-button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.choice-button[aria-pressed=true]{border-color:var(--color-primary);background:#eef3ff;font-weight:600}.choice-button:disabled{cursor:default;opacity:.6}.feedback-box{padding:12px 14px;border-radius:var(--radius);background:#eef8f2;border:1px solid var(--color-success);color:var(--color-text)}.feedback-box--warning{background:#fff8ec;border-color:var(--color-warning)}.primary-button{align-self:flex-start;padding:10px 20px;border-radius:var(--radius);border:none;background:var(--color-primary);color:#fff;font:inherit;font-weight:600;cursor:pointer}.primary-button:hover:not(:disabled){background:var(--color-primary-dark)}.primary-button:disabled{opacity:.5;cursor:default}.error-box{margin:20px;padding:16px;border-radius:var(--radius);background:#fdecec;border:1px solid #e05656;color:var(--color-text)}.rating-row{display:flex;flex-direction:column;gap:8px}.rating-scale{display:flex;gap:8px}.rating-scale button{width:40px;height:40px;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);font:inherit;cursor:pointer}.rating-scale button[aria-pressed=true]{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}.completion-screen{padding:32px 20px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}@media (max-width: 480px){.main-panel__body{padding:14px 16px}.message__content{max-width:92%}}