.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);padding:0 20px;background:var(--bg-surface);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10}.header-left{display:flex;align-items:center;gap:12px}.app-title{font-size:18px;font-weight:700;letter-spacing:-.3px;color:var(--text)}.header-model-badge{font-size:11px;font-weight:500;padding:3px 8px;border-radius:20px;background:var(--bg-secondary);color:var(--text-secondary)}.header-center{flex:1;text-align:center}.header-branch-name{font-size:14px;font-weight:500;color:var(--text-secondary);background:var(--bg-sidebar);padding:4px 14px;border-radius:20px}.header-right{display:flex;align-items:center;gap:4px}.app-body{display:flex;flex:1;overflow:hidden}.sidebar-toggle,.sidebar-header-mobile,.sidebar-overlay{display:none}.sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--bg-sidebar);border-right:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;z-index:20}.sidebar-section{display:flex;flex-direction:column;gap:8px}.sidebar-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary)}.sidebar-hint{font-size:12px;color:var(--text-muted);line-height:1.5}.branch-list{display:flex;flex-direction:column;gap:4px}.branch-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;border:none;border-radius:var(--radius-sm);background:transparent;cursor:pointer;text-align:left;font-family:var(--font-sans);transition:background .15s}.branch-item:hover{background:var(--bg-secondary)}.branch-item.active{background:var(--bg-surface);box-shadow:var(--shadow-sm);border:1px solid var(--border)}.branch-name{font-size:13px;font-weight:500;color:var(--text)}.branch-count{font-size:11px;color:var(--text-muted)}.fork-controls{display:flex;gap:6px;align-items:center}.fork-input{flex:1}.save-controls{display:flex;flex-direction:column;gap:8px}.save-actions{display:flex;gap:6px}.load-list{display:flex;flex-direction:column;gap:4px;max-height:200px;overflow-y:auto}.load-item{display:flex;align-items:center;gap:4px}.load-name{flex:1;justify-content:flex-start;text-align:left;font-size:13px}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px;text-align:center}.empty-icon{color:var(--text-muted);margin-bottom:8px}.empty-state h2{font-size:24px;font-weight:700;color:var(--text)}.empty-subtitle{font-size:15px;color:var(--text-secondary);line-height:1.7;max-width:420px}.story-display{flex:1;overflow-y:auto;padding:24px 32px 106px;display:flex;flex-direction:column;gap:8px}.segment{padding:20px 24px;border-radius:var(--radius-lg);transition:background .2s}.segment-user{background:var(--bg-surface);border:1px solid var(--border-light)}.segment-llm{background:var(--bg-llm);border:1px solid rgba(108,99,255,.12)}.segment-header{margin-bottom:12px}.segment-role-badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.3px;text-transform:uppercase}.badge-user{background:var(--bg-user-label);color:#fff}.badge-llm{background:var(--bg-llm-label);color:#fff}.segment-content{font-family:var(--font-serif);font-size:16px;line-height:1.8;color:var(--text)}.segment-content p{margin-bottom:1em}.segment-content p:last-child{margin-bottom:0}.segment-content em{font-style:italic;color:var(--text-secondary)}.segment-content .thought{color:var(--text-secondary);font-style:italic}.segment-content blockquote{border-left:3px solid var(--bg-accent);padding:4px 0 4px 16px;margin:12px 0;color:var(--text);font-style:normal}.segment-content blockquote p{margin-bottom:.3em}.streaming-cursor{display:inline-block;margin-left:2px}.cursor-dot{display:inline-block;width:8px;height:8px;background:var(--bg-accent);border-radius:50%;animation:blink .8s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.2}}.segment-header{display:flex;align-items:center;justify-content:space-between}.segment-edit-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}.segment:hover .segment-edit-btn{opacity:1}.segment-edit-btn:hover{background:var(--bg-secondary);color:var(--text)}.segment-editing{outline:2px solid var(--bg-accent);outline-offset:-2px}.segment-edit-area{display:flex;flex-direction:column;gap:10px}.segment-edit-textarea{font-family:var(--font-serif);font-size:15px;line-height:1.7;min-height:80px;resize:vertical}.segment-edit-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.edit-hint{font-size:12px;color:var(--text-muted)}.segment-edit-buttons{display:flex;align-items:center;gap:6px}.input-area-wrapper{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 16px);padding:0 32px 16px;flex-shrink:0}.story-input{background:var(--bg-surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:12px 16px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:8px}.story-textarea{border:none!important;resize:none;padding:4px 0!important;font-family:var(--font-serif);font-size:15px;line-height:1.7;min-height:60px;max-height:200px;box-shadow:none!important}.story-textarea:focus{box-shadow:none!important}.input-row{width:100%}.input-actions{display:flex;align-items:center;justify-content:space-between}.input-actions-left,.input-actions-right{display:flex;align-items:center;gap:6px}.instruction-bar{display:flex;align-items:center;gap:8px;padding:8px 0 4px;border-bottom:1px solid var(--border-light)}.instruction-label{font-size:13px;font-weight:600;color:var(--text-secondary);white-space:nowrap}.instruction-input{flex:1}.notification{position:fixed;bottom:80px;left:50%;transform:translate(-50%);background:var(--text);color:#fff;padding:10px 24px;border-radius:var(--radius);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);z-index:100;animation:fadeInUp .2s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translate(-50%) translateY(8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:50;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-surface);border-radius:var(--radius-lg);width:440px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:modalIn .2s ease-out}@keyframes modalIn{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0}.modal-header h2{font-size:18px;font-weight:700}.modal-body{padding:20px 24px;display:flex;flex-direction:column;gap:20px}.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:16px 24px;border-top:1px solid var(--border-light)}.form-group{display:flex;flex-direction:column;gap:6px}.form-label{font-size:13px;font-weight:600;color:var(--text)}.form-hint{font-size:12px;color:var(--text-muted);line-height:1.5}.form-hint a{color:var(--bg-accent);text-decoration:none}.form-hint a:hover{text-decoration:underline}.radio-group{display:flex;flex-direction:column;gap:8px}.radio-label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}.radio-label input[type=radio]{accent-color:var(--bg-accent)}@media(max-width:900px){.sidebar-toggle{display:inline-flex}.btn-label{display:none}.sidebar-overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:19;opacity:0;pointer-events:none;transition:opacity .25s}.sidebar-overlay.open{opacity:1;pointer-events:auto}.sidebar-header-mobile{display:flex;align-items:center;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--border-light);margin-bottom:4px}.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:20;transform:translate(-100%);transition:transform .25s ease;width:min(300px,80vw);border-right:1px solid var(--border);box-shadow:var(--shadow-lg)}.sidebar.open{transform:translate(0)}.app-header{padding:0 12px;height:52px}.app-title{font-size:16px}.header-model-badge{display:none}.header-branch-name{font-size:12px;padding:3px 10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.story-display{padding:16px 16px 100px}.segment{padding:14px 16px}.segment-content{font-size:15px;line-height:1.7}.segment-edit-btn{opacity:1;width:36px;height:36px}.input-area-wrapper{padding:0 12px 12px}.story-input{padding:10px 14px;border-radius:var(--radius)}.story-textarea{font-size:15px;min-height:48px;max-height:150px}.segment-edit-textarea{font-size:15px;min-height:100px}.segment-edit-actions{flex-direction:column;align-items:stretch;gap:8px}.segment-edit-buttons{justify-content:flex-end}.empty-state{padding:24px 20px}.empty-state h2{font-size:20px}.empty-subtitle{font-size:14px}.notification{bottom:72px;left:16px;right:16px;transform:none;text-align:center;font-size:13px}.modal{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;display:flex;flex-direction:column}.modal-body{flex:1;overflow-y:auto}.modal-footer{flex-shrink:0}.provider-options{gap:6px}.provider-btn{padding:12px 10px;font-size:13px}}.branch-graph{display:flex;flex-direction:column;max-height:360px;overflow-y:auto;overflow-x:hidden}.branch-graph-node{display:flex;flex-direction:column}.branch-graph-row{display:flex;align-items:stretch;padding:4px 0;border-radius:var(--radius-sm);transition:background .15s}.branch-graph-row:hover{background:var(--bg-secondary)}.branch-graph-row.active{background:var(--bg-surface);border:1px solid var(--border-light);margin:-1px;padding:3px 0}.branch-graph-content{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:2px 8px 2px 4px}.branch-graph-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.branch-graph-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:4px;flex-wrap:wrap}.branch-graph-badges{display:inline-flex;align-items:center;gap:4px}.main-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:10px;background:#e8b800;color:#1a1a1a}[data-theme=dark] .main-badge{background:#d4a800;color:#0f0f0f}.forked-badge{font-size:9px;font-weight:500;padding:1px 5px;border-radius:8px;background:var(--bg-sidebar);color:var(--text-secondary)}.branch-graph-id{display:flex;align-items:center;gap:4px}.branch-graph-id code{font-size:10px;color:var(--text-muted);background:var(--bg);padding:1px 5px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;max-width:160px;white-space:nowrap}.branch-graph-meta{font-size:11px;color:var(--text-muted)}.tree-lines{display:inline-flex;flex-direction:column;width:18px;flex-shrink:0}.tree-line{display:block;width:18px;height:50%;border-right:1.5px solid var(--border)}.tree-line-empty{border-right:none}.tree-connector{display:inline-block;width:12px;flex-shrink:0;position:relative}.tree-connector:before{content:"";position:absolute;top:0;left:0;width:10px;height:50%;border-left:1.5px solid var(--border);border-bottom:1.5px solid var(--border);border-radius:0 0 0 6px}.tree-connector-last:before{border-left:1.5px solid var(--border);border-bottom:1.5px solid var(--border)}.branch-graph-children{display:flex;flex-direction:column}.branch-graph-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--border-light)}.legend-item{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted)}@media(max-width:900px){.branch-graph{max-height:280px}.branch-graph-id code{max-width:80px}.branch-graph-name{font-size:12px}}@media(max-width:480px){.branch-graph-content{flex-direction:column;align-items:flex-start;gap:6px}.branch-graph-id code{max-width:120px}}.header-branch-id{display:inline-flex;align-items:center;margin-left:8px}.header-branch-id code{font-size:11px;color:var(--text-muted);background:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-family:var(--font-sans);cursor:default}.segment-header-actions,.segment-llm-actions{display:flex;align-items:center;gap:4px}.segment-action-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;font-size:11px;font-weight:500;font-family:var(--font-sans);opacity:0;transition:opacity .15s,background .15s,color .15s;white-space:nowrap}.segment:hover .segment-action-btn{opacity:1}.segment-action-btn:hover{background:var(--bg-secondary);color:var(--text)}.segment-action-btn svg{flex-shrink:0}.branch-info-icon{font-size:10px;color:var(--text-muted);cursor:help;opacity:.7;margin-left:1px}.save-regen-btn{display:inline-flex;align-items:center;gap:4px}.segment-inline-instr{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background:var(--bg-secondary);border-radius:var(--radius-sm);border:1px solid var(--border-light)}.segment-inline-instr .instruction-label{font-size:12px;font-weight:600;color:var(--text-secondary);white-space:nowrap}.segment-inline-instr .instruction-input{flex:1;font-size:13px}.branch-manager-modal{width:520px;max-width:90vw}.branch-manager-list{display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}.branch-manager-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border-light);transition:background .15s}.branch-manager-item:hover{background:var(--bg-secondary)}.branch-manager-item.active{border-color:var(--bg-accent);background:var(--bg-surface)}.branch-manager-item-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.branch-manager-item-name{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}.active-badge{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:1px 6px;border-radius:10px;background:var(--bg-accent);color:#fff}.branch-manager-item-id{display:flex;align-items:center;gap:4px}.branch-manager-item-id code{font-size:11px;color:var(--text-muted);background:var(--bg-surface);padding:1px 6px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;max-width:220px;white-space:nowrap}.copy-id-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}.copy-id-btn:hover{color:var(--text)}.branch-manager-item-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}.parent-badge{font-size:9px;font-weight:500;padding:1px 5px;border-radius:8px;background:var(--bg-sidebar);color:var(--text-secondary)}.branch-total-badge{display:inline-flex;align-items:center;justify-content:center;margin-left:6px;font-size:10px;font-weight:600;padding:1px 7px;border-radius:10px;background:var(--bg-secondary);color:var(--text-secondary);vertical-align:middle}.branch-item-wrapper{display:flex;align-items:center;gap:2px;border-radius:var(--radius-sm)}.branch-item-wrapper.active{background:var(--bg-surface);box-shadow:var(--shadow-sm);border:1px solid var(--border)}.branch-item-wrapper .branch-item{flex:1;border:none;background:transparent;padding:8px 12px;border-radius:0}.branch-item-wrapper .branch-item.active{box-shadow:none;border:none}.branch-copy-id{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0;opacity:0;transition:opacity .15s}.branch-item-wrapper:hover .branch-copy-id{opacity:1}.branch-copy-id:hover{color:var(--text)}@media(max-width:900px){.branch-copy-id{opacity:1;width:36px;height:36px}.segment-action-btn{opacity:1}.segment-llm-actions{flex-wrap:wrap}.branch-manager-modal{width:100vw;max-width:100vw}.branch-manager-item-id code{max-width:120px}.header-branch-id{display:none}}@media(max-width:480px){.story-display{padding:12px 10px 90px}.segment{padding:12px}.segment-content{font-size:14px}.story-input{padding:8px 12px}.story-textarea{font-size:14px}.input-actions{flex-wrap:wrap;gap:6px}.input-actions-right,.instruction-bar{flex-wrap:wrap}.header-branch-name{max-width:80px;font-size:11px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f8f7f4;--bg-surface: #ffffff;--bg-sidebar: #f2f0ec;--bg-llm: #eef0ff;--bg-llm-label: #6c63ff;--bg-user-label: #4a7c59;--bg-accent: #6c63ff;--bg-accent-hover: #5a52e0;--bg-secondary: #e8e6e0;--text: #1a1a2e;--text-secondary: #6b6b7b;--text-muted: #9a9aab;--text-on-accent: #ffffff;--border: #e2e0da;--border-light: #f0eee8;--radius: 10px;--radius-sm: 6px;--radius-lg: 14px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 16px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;--font-mono: "SFMono-Regular", Consolas, monospace;--sidebar-width: 260px;--header-height: 56px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px);--scrollbar-thumb: #c8c6c0;--scrollbar-track: transparent}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #141418;--bg-surface: #1e1e26;--bg-sidebar: #191920;--bg-llm: #1a1838;--bg-llm-label: #7c75ff;--bg-user-label: #3d8b55;--bg-accent: #7c75ff;--bg-accent-hover: #6a63e8;--bg-secondary: #282830;--text: #e8e6e0;--text-secondary: #9a98a8;--text-muted: #6b6b7b;--text-on-accent: #ffffff;--border: #2a2a35;--border-light: #22222c;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--scrollbar-thumb: #3a3a48;--scrollbar-track: transparent}}:root[data-theme=dark]{--bg: #141418;--bg-surface: #1e1e26;--bg-sidebar: #191920;--bg-llm: #1a1838;--bg-llm-label: #7c75ff;--bg-user-label: #3d8b55;--bg-accent: #7c75ff;--bg-accent-hover: #6a63e8;--bg-secondary: #282830;--text: #e8e6e0;--text-secondary: #9a98a8;--text-muted: #6b6b7b;--text-on-accent: #ffffff;--border: #2a2a35;--border-light: #22222c;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3);--shadow-md: 0 4px 16px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .5);--scrollbar-thumb: #3a3a48;--scrollbar-track: transparent}html,body,#root{height:100%}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}.input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;background:var(--bg-surface);color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}.input:focus{border-color:var(--bg-accent);box-shadow:0 0 0 3px #6c63ff1f}.input::placeholder{color:var(--text-muted)}select.input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%236b6b7b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,transform .1s,opacity .15s;white-space:nowrap}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-primary{background:var(--bg-accent);color:var(--text-on-accent)}.btn-primary:hover:not(:disabled){background:var(--bg-accent-hover)}.btn-secondary{background:var(--bg-secondary);color:var(--text)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--bg-secondary);color:var(--text)}.btn-sm{padding:5px 10px;font-size:13px}.btn-full{width:100%;justify-content:center}.btn-danger{color:#d32f2f}.btn-danger:hover{background:#d32f2f1a!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--scrollbar-track)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.theme-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--text)}.theme-toggle-switch{position:relative;width:44px;height:24px;background:var(--bg-secondary);border-radius:12px;transition:background .25s;flex-shrink:0}.theme-toggle-switch.active{background:var(--bg-accent)}.theme-toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--bg-surface);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .25s}.theme-toggle-switch.active .theme-toggle-knob{transform:translate(20px)}.provider-select{display:flex;flex-direction:column;gap:12px}.provider-options{display:flex;gap:8px}.provider-btn{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text);font-family:var(--font-sans);font-size:13px;font-weight:500;cursor:pointer;text-align:center;transition:border-color .15s,background .15s}.provider-btn:hover{border-color:var(--bg-accent)}.provider-btn.active{border-color:var(--bg-accent);background:var(--bg-llm)}