.app-mock-frame{--mock-w:980px;--mock-h:580px;width:100%;max-width:var(--mock-w);aspect-ratio:980/580;min-width:0;overflow:hidden;box-shadow:0 28px 80px #0000008c,0 0 0 1px #ffffff0a;container-type:inline-size}.app-mock-sizer-inner{width:var(--mock-w);height:var(--mock-h);transform:scale(min(1, calc(100cqi / var(--mock-w))));transform-origin:0 0}.app-mock{--bg-primary:#0f0f0f;--bg-secondary:#111;--bg-tertiary:#1a1a1a;--bg-quaternary:#252525;--bg-ladder:#05070a;--bg-bar:#111;--bg-chat-input:#1a1a1a;--accent:#f97316;--accent-dark:#573215;--accent-hover:#fb923c;--text-primary:#f5f5f5;--text-secondary:#a0a0a0;--text-tertiary:#5a5a5a;--text-success:#22c55e;--text-error:#ef4444;--border:#333;--border-secondary:#222;--border-ladder:#2a2a3e;--ladder-rail:#bbb;--ladder-wire:#bbb;--ladder-wire-active:#4a9eff;--tag-name:#4a9eff;--user-bubble:#6366f1;--agent-bubble:#1a1a1a;color:var(--text-primary);-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-font-smoothing:antialiased;background:0 0;font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif}.app-mock .app-container{width:var(--mock-w);height:var(--mock-h);background:var(--bg-primary);border:1px solid var(--border);border-radius:10px;flex-direction:column;display:flex;position:relative;overflow:hidden}.app-mock .title-bar{background:var(--bg-bar);border-bottom:1px solid var(--border-secondary);flex-shrink:0;justify-content:space-between;align-items:center;height:32px;padding:0 10px 0 12px;display:flex}.app-mock .title-bar-brand{color:var(--text-secondary);align-items:center;gap:8px;font-size:.75rem;display:flex}.app-mock .title-bar-brand img{object-fit:contain;width:18px;height:18px}.app-mock .title-bar-controls{align-items:center;gap:6px;display:flex}.app-mock .title-bar-btn{width:28px;height:22px;color:var(--text-secondary);border-radius:3px;place-items:center;display:grid}.app-mock .title-bar-download{border:1px solid var(--accent);height:20px;color:var(--accent);pointer-events:auto;letter-spacing:.02em;background:0 0;border-radius:999px;justify-content:center;align-items:center;padding:0 4px;font-size:.62rem;font-weight:500;line-height:1;text-decoration:none;transition:padding .22s,background .15s,color .15s,border-color .15s;display:inline-flex;overflow:hidden}.app-mock .title-bar-download svg{flex-shrink:0}.app-mock .title-bar-download-label{opacity:0;white-space:nowrap;max-width:0;margin-left:0;transition:max-width .28s,margin .28s,opacity .18s;display:inline-block;overflow:hidden}.app-mock-frame:is(:hover,:focus-within) .title-bar-download{padding:0 8px 0 6px}.app-mock-frame:is(:hover,:focus-within) .title-bar-download-label{opacity:1;max-width:4.6rem;margin-left:5px}.app-mock .title-bar-download:hover{background:var(--accent);border-color:var(--accent);color:#111}.app-mock .chat-window{flex:1;grid-template-columns:155px minmax(0,1fr) 24px 330px;min-height:0;transition:grid-template-columns .32s;display:grid}.app-mock .chat-window>*{min-height:0}.app-mock .chat-window.ide-collapsed{grid-template-columns:0 0 24px minmax(0,1fr)}.app-mock .chat-window.ide-collapsed .ide-sidebar,.app-mock .chat-window.ide-collapsed .ide-viewer{opacity:0;pointer-events:none;border-right-width:0}.app-mock .ide-sidebar{background:var(--bg-bar);border-right:1px solid var(--border-secondary);flex-direction:column;min-width:0;transition:opacity .2s,border-width .32s;display:flex;overflow:hidden}.app-mock .ide-sidebar-header{border-bottom:1px solid var(--border-secondary);align-items:center;gap:1px;height:30px;padding:0 8px;display:flex}.app-mock .ide-icon-btn{width:20px;height:20px;color:var(--text-tertiary);background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid}.app-mock .ide-icon-btn.active{color:var(--text-primary);background:var(--bg-quaternary)}.app-mock .ide-sidebar-view{flex-direction:column;flex:1;min-height:0;display:flex}.app-mock .ide-sidebar-view-title{letter-spacing:.04em;text-transform:uppercase;height:28px;color:var(--text-secondary);justify-content:space-between;align-items:center;padding:0 12px;font-size:.6rem;display:flex}.app-mock .ide-tree{flex:1;padding:2px 0;overflow:hidden}.app-mock .ide-tree-row{width:100%;height:22px;font:inherit;text-align:left;color:var(--text-secondary);background:0 0;border:0;align-items:center;gap:3px;padding-right:4px;font-size:.65rem;display:flex}.app-mock .ide-tree-row>span:not(.rll){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.app-mock .ide-tree-row svg{flex-shrink:0}.app-mock .ide-tree-row.selected{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--text-primary)}.app-mock .ide-tree-row .rll{letter-spacing:.04em;color:var(--text-tertiary);border:1px solid var(--border);border-radius:2px;margin-left:auto;padding:0 3px;font-family:Consolas,Monaco,monospace;font-size:.5rem;line-height:1.3}.app-mock .ide-doc-row{width:100%;font:inherit;text-align:left;color:var(--text-secondary);background:0 0;border:0;align-items:center;gap:4px;padding:4px 8px;display:flex}.app-mock .ide-doc-row.selected{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--text-primary)}.app-mock .ide-doc-row .doc-title{font-size:.7rem;line-height:1.25}.app-mock .ide-doc-badge{color:var(--text-secondary);border:1px solid var(--border);border-radius:3px;margin-top:3px;padding:0 5px;font-family:Consolas,Monaco,monospace;font-size:.65rem;display:inline-block}.app-mock .ide-viewer{background:var(--bg-ladder);border-right:1px solid var(--border-secondary);flex-direction:column;min-width:0;transition:opacity .2s,border-width .32s;display:flex;overflow:hidden}.app-mock .ide-viewer-header{background:var(--bg-bar);border-bottom:1px solid var(--border-secondary);flex-shrink:0;align-items:center;height:30px;padding:0 12px;display:flex}.app-mock .ide-viewer-breadcrumb{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;font-family:Consolas,Monaco,monospace;font-size:.6rem;overflow:hidden}.app-mock .ide-viewer-body{overscroll-behavior:auto;flex:1;min-height:0;overflow:auto}.app-mock .mock-scroll-pane,.app-mock .ladder-scroll-area{scrollbar-width:thin;scrollbar-color:#4a4a4a transparent}.app-mock .mock-scroll-pane::-webkit-scrollbar{width:5px;height:5px}.app-mock .ladder-scroll-area::-webkit-scrollbar{width:5px;height:5px}.app-mock .mock-scroll-pane::-webkit-scrollbar-track{background:0 0}.app-mock .ladder-scroll-area::-webkit-scrollbar-track{background:0 0}.app-mock .mock-scroll-pane::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:99px}.app-mock .ladder-scroll-area::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:99px}.app-mock .ide-viewer-body>.scene-fade{min-height:100%}.app-mock .ide-doc-toolbar{z-index:1;border-bottom:1px solid var(--border-secondary);background:var(--bg-bar);align-items:center;gap:14px;height:28px;padding:0 14px;display:flex}.app-mock .ide-doc-tab{color:var(--text-tertiary);padding:6px 0 5px;font-size:.65rem}.app-mock .ide-doc-tab.active{color:var(--text-primary);box-shadow:inset 0 -1px #fff}.app-mock .ide-doc-export{background:color-mix(in srgb, var(--text-success) 10%, transparent);height:20px;color:var(--text-success);font:inherit;letter-spacing:.02em;border:0;border-radius:4px;margin-left:auto;padding:0 9px;font-size:.62rem;font-weight:650;line-height:20px}.app-mock .ide-doc-md{max-width:520px;padding:18px 22px 24px}.app-mock .ide-doc-md h3{margin:0 0 10px;font-size:1rem;font-weight:650}.app-mock .ide-doc-md h4{color:var(--text-secondary);margin:16px 0 8px;font-size:.7rem;font-weight:650}.app-mock .ide-doc-md p,.app-mock .ide-doc-md li{color:var(--text-secondary);font-size:.7rem;line-height:1.5}.app-mock .ide-doc-md ol{margin:0;padding-left:18px}.app-mock .ide-doc-md p.ide-doc-meta{letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);margin:-4px 0 12px;font-family:Consolas,Monaco,monospace;font-size:.62rem}.app-mock .ide-doc-md code{color:var(--text-primary);font-family:Consolas,Monaco,monospace;font-size:.62rem}.app-mock .ide-doc-table{border-collapse:collapse;width:100%;margin:0 0 4px;font-size:.65rem}.app-mock .ide-doc-table th,.app-mock .ide-doc-table td{text-align:left;border-bottom:1px solid var(--border-secondary);color:var(--text-secondary);padding:4px 8px 4px 0}.app-mock .ide-doc-table th{letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);font-size:.58rem;font-weight:650}.app-mock .ide-doc-table code{font-size:.62rem}.app-mock .ide-action-bar{z-index:2;background:var(--bg-bar);border-right:1px solid var(--border-secondary);width:24px;color:var(--text-tertiary);flex-direction:column;justify-content:space-between;align-items:center;padding:6px 0;display:flex;position:relative}.app-mock .ide-action-btn{width:20px;height:20px;color:inherit;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid;position:relative}.app-mock .ide-action-bar-footer{flex-direction:column;align-items:center;gap:8px;display:flex}.app-mock .chat-main{background:var(--bg-primary);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.app-mock .chat-header{z-index:2;background:var(--bg-bar);border-bottom:1px solid var(--border-secondary);flex-shrink:0;justify-content:space-between;align-items:center;height:30px;padding:0 8px;display:flex;position:relative}.app-mock .chat-header-left{min-width:0;color:var(--text-tertiary);align-items:center;gap:8px;display:flex}.app-mock .chat-header-btn{height:20px;color:inherit;font:inherit;background:0 0;border:0;place-items:center;padding:0 3px;display:grid;position:relative}.app-mock .project-chip{background:var(--bg-tertiary);border:1px solid var(--border);height:20px;color:var(--text-primary);border-radius:999px;align-items:center;gap:6px;padding:0 8px;font-family:Consolas,Monaco,monospace;font-size:.65rem;display:flex}.app-mock .project-chip .dot{background:var(--text-success);border-radius:50%;width:7px;height:7px}.app-mock .chat-header-right{color:var(--text-secondary);align-items:center;gap:4px;font-size:.65rem;display:flex}.app-mock .chat-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.app-mock .chat-messages{overscroll-behavior:auto;flex-direction:column;flex:1;gap:12px;min-height:0;padding:14px 10px;display:flex;overflow:hidden auto}.app-mock .chat-messages>*{flex-shrink:0}.app-mock .msg-user{background:var(--user-bubble);color:#fff;border-radius:12px 12px 4px;align-self:flex-end;max-width:90%;padding:8px 12px;font-size:.75rem;line-height:1.4;animation:.28s ease-out app-mock-fade-up}.app-mock .msg-agent{background:var(--agent-bubble);border:1px solid var(--border-secondary);border-radius:12px 12px 12px 4px;align-self:flex-start;max-width:100%;padding:10px 12px;font-size:.7rem;line-height:1.45;animation:.28s ease-out app-mock-fade-up}.app-mock .msg-agent p{margin:0 0 8px}.app-mock .msg-agent p:last-child{margin-bottom:0}.app-mock .msg-download-link{color:var(--accent)}.app-mock .msg-agent ol,.app-mock .msg-agent ul{margin:0 0 8px;padding-left:18px}.app-mock .msg-agent code{color:var(--tag-name);font-family:Consolas,Monaco,monospace;font-size:.72rem}.app-mock .msg-agent strong{font-weight:650}.app-mock .stream-caret{width:6px;color:var(--accent);margin-left:1px;animation:1s step-end infinite app-mock-blink;display:inline-block}.app-mock .timeline{color:var(--text-secondary);align-self:flex-start;font-family:Consolas,Monaco,monospace;font-size:.7rem;animation:.22s ease-out app-mock-fade-up}.app-mock .timeline.working{color:var(--accent)}.app-mock .dots:after{content:"";animation:1.1s steps(4,end) infinite app-mock-dots}.app-mock .tool-line{align-items:center;gap:6px;display:flex}.app-mock .tool-line .mark{border:1px solid var(--text-tertiary);border-radius:50%;width:7px;height:7px}.app-mock .tool-line.pending .mark{animation:1s ease-in-out infinite app-mock-pulse}.app-mock .tool-line.done .mark{background:var(--text-success);border-color:var(--text-success)}.app-mock .tool-line .tool-name{color:var(--text-secondary)}.app-mock .tool-line .tool-arg{color:var(--text-tertiary)}.app-mock .system-line{color:var(--text-tertiary);align-self:flex-start;font-family:Consolas,Monaco,monospace;font-size:.7rem}.app-mock .doc-chip{background:var(--accent);color:#111;border-radius:999px;align-items:center;margin-top:8px;padding:5px 10px;font-size:.65rem;font-weight:600;display:inline-flex}.app-mock .chat-input-area{z-index:2;flex-shrink:0;padding:8px;position:relative}.app-mock .composer{background:var(--bg-chat-input);border:1px solid var(--border);border-radius:10px;padding:8px 10px;position:relative;overflow:visible}.app-mock .composer textarea{resize:none;width:100%;height:32px;color:var(--text-primary);background:0 0;border:0;outline:none;font-family:inherit;font-size:.8rem;line-height:1.2;overflow-y:auto}.app-mock .composer textarea::placeholder{color:var(--text-tertiary)}.app-mock .composer-row{color:var(--text-secondary);align-items:center;gap:4px;margin-top:2px;font-size:.65rem;display:flex}.app-mock .composer-row .spacer{flex:1}.app-mock .composer-mode{font:inherit;color:var(--text-secondary);background:0 0;border:0;border-radius:4px;align-items:center;gap:3px;padding:2px 4px;display:flex}.app-mock .composer-menu-wrap{position:relative}.app-mock .composer-menu{border:1px solid var(--border);background:var(--bg-secondary);z-index:8;border-radius:8px;min-width:92px;padding:4px;position:absolute;bottom:calc(100% + 6px);left:0;box-shadow:0 10px 28px #00000080}.app-mock .composer-menu-models{min-width:148px}.app-mock .composer-menu button{width:100%;font:inherit;text-align:left;color:var(--text-secondary);background:0 0;border:0;border-radius:5px;padding:5px 8px;font-size:.65rem;display:block}.app-mock .composer-menu button.active{color:var(--text-primary);background:var(--bg-quaternary)}.app-mock [data-tip]:after{content:attr(data-tip);z-index:20;border:1px solid var(--border);color:var(--text-primary);letter-spacing:.01em;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;background:#2a2a2a;border-radius:5px;padding:4px 8px;font-size:.62rem;font-weight:500;line-height:1.2;transition:opacity .1s,transform .1s,visibility .1s;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%)translateY(4px)}.app-mock [data-tip-side=bottom]:after{top:calc(100% + 6px);bottom:auto;transform:translate(-50%)translateY(-4px)}.app-mock [data-tip-side=right]:after{top:50%;bottom:auto;left:calc(100% + 6px);transform:translate(-4px,-50%)}@media (min-width:768px){.app-mock .hit{pointer-events:auto;cursor:pointer}.app-mock .hint{pointer-events:auto;cursor:help}.app-mock .mock-scroll-pane{pointer-events:auto}.app-mock .ide-icon-btn.hit:hover:not(.active),.app-mock .ide-action-btn.hit:hover{color:var(--text-secondary);background:var(--bg-tertiary)}.app-mock .chat-header-btn.hint:hover{color:var(--text-primary)}.app-mock .ide-tree-row.hit:hover:not(.selected),.app-mock .ide-doc-row.hit:hover:not(.selected){background:var(--bg-tertiary)}.app-mock .ide-doc-export.hit:hover{filter:brightness(1.08)}.app-mock .composer-mode.hit:hover,.app-mock .composer-mode.hit.open,.app-mock .composer-menu button:hover{color:var(--text-primary);background:var(--bg-quaternary)}.app-mock .send-btn.hit:hover:not(.replay){background:var(--accent-hover)}.app-mock .send-btn.replay.hit:hover{background:#e4e4e4}.app-mock .composer textarea.hit{cursor:text;-webkit-user-select:text;user-select:text}.app-mock .msg-download-link:hover{color:var(--accent-hover)}.app-mock [data-tip]:hover:after,.app-mock [data-tip]:focus-visible:after{opacity:1;visibility:visible;transition-delay:.18s;transform:translate(-50%)translateY(0)}.app-mock [data-tip-side=bottom]:hover:after,.app-mock [data-tip-side=bottom]:focus-visible:after{transform:translate(-50%)translateY(0)}.app-mock [data-tip-side=right]:hover:after,.app-mock [data-tip-side=right]:focus-visible:after{transform:translateY(-50%)}}.app-mock .send-btn{background:var(--accent);color:#111;border:0;border-radius:999px;place-items:center;width:22px;height:22px;padding:0;display:grid;position:relative}.app-mock .send-btn.stop{background:var(--bg-quaternary);color:var(--text-primary);border-radius:5px}.app-mock .send-btn.replay{background:color-mix(in srgb, var(--text-secondary) 20%, transparent);color:#111}.app-mock .activity-line{background:color-mix(in srgb, var(--accent) 35%, transparent);transform-origin:50%;height:1px;animation:1.5s ease-in-out infinite app-mock-activity;position:absolute;bottom:0;left:10%;right:10%}.app-mock .ladder-diagram-container{background:var(--bg-ladder);border:1px solid var(--border-ladder);border-radius:8px;padding:8px}.app-mock .ladder-diagram-container.ide-ladder-container{border:0;border-radius:0;min-height:100%}.app-mock .msg-agent .ladder-diagram-container{margin-top:10px}.app-mock .ladder-scroll-area{overflow:auto hidden}.app-mock .ladder-svg{font-family:Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;display:block}@keyframes app-mock-fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes app-mock-blink{50%{opacity:0}}@keyframes app-mock-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}@keyframes app-mock-pulse{0%,to{opacity:.35}50%{opacity:1}}@keyframes app-mock-activity{0%{opacity:.2;transform:scaleX(.15)}50%{opacity:1;transform:scaleX(1)}to{opacity:.2;transform:scaleX(.15)}}.app-mock .scene-fade{animation:1.4s both app-mock-scene-in}.app-mock .ide-viewer-body.scene-fade{animation-delay:.52s}.app-mock .chat-messages.scene-fade{animation-delay:.22s}@keyframes app-mock-scene-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:reduce){.app-mock *{transition:none!important;animation:none!important}}