/* Responsive crops of the real IDE. The composition canvas is 560 × 704. */
html,body{margin:0;padding:0;overflow:hidden;background:transparent;min-height:0}
body{display:block;color:#cbd5e1;font-family:Inter,"Segoe UI",sans-serif}
.panel-shell{width:560px;max-width:100%;height:704px;margin:0 auto;position:relative}
.alva-window{width:100%;max-width:none;height:704px;background:#10111b;border:1px solid #2b3043;box-shadow:0 16px 40px #0003}
.demo-interface{height:100%;display:flex;flex-direction:column;position:relative}
.alva-chat-header,.alva-tabs,.alva-file-bar{flex-shrink:0}
.alva-composer{margin-top:auto;flex-shrink:0;background:#10111b}.composer-input{font-size:12px}
[data-mode-selected]{background:#083344;color:#67e8f9;border-color:#155e75}
.demo-stage{flex:1;min-height:0;padding:14px;overflow:auto;position:relative;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin;overscroll-behavior:contain}
.cue{opacity:0;visibility:hidden}.cue[data-at="0"]{opacity:1;visibility:visible}
.message{padding:11px 13px;border:1px solid #282c40;border-radius:11px;background:#171724;font-size:13px;line-height:1.65;overflow-wrap:anywhere;flex-shrink:0}
.message.user{align-self:flex-end;max-width:94%;background:#066b83;border-color:#087d96;color:#fff;border-radius:18px;font-weight:600}.speaker{color:#a78bfa;font-size:10px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:5px}.user .speaker{color:#67e8f9}.speaker svg{height:12px;width:12px}
.layers{position:relative;flex-shrink:0}.layers>.cue{position:absolute;inset:0}.short-layer{height:35px}.activity{color:#a5b4fc;font-size:12px;padding:9px 0}.switch-marker{font-size:11px;color:#67e8f9;text-align:center;border-top:1px solid #334155;padding:10px}
.provider-line{font-size:12px;line-height:1.8;color:#a5b4fc}.success{color:#6ee7b7;font-size:12px;line-height:1.65}
.demo-button,.selected{background:#123b50;border:1px solid #216078;border-radius:5px;padding:5px 9px;color:#67e8f9;font-size:11px;display:inline-block}.action{margin-top:9px}
.file-label{display:flex;justify-content:space-between;font-size:11px;color:#a5b4fc;padding-bottom:10px;border-bottom:1px solid #30364b}.file-label>span{font-size:10px;color:#94a3b8}
.demo-code{background:#0c0c14;border:1px solid #292e42;border-radius:7px;padding:15px;font:12px/1.8 "JetBrains Mono",Consolas,monospace;color:#a5d9c3;white-space:pre-wrap;overflow-wrap:anywhere}
.model-drop{display:flex;flex-direction:column;max-height:min(350px,calc(100% - 90px));pointer-events:auto;opacity:0;visibility:hidden;position:absolute;left:auto;right:12px;bottom:66px;width:300px;max-width:calc(100% - 24px);transform:none;z-index:10;border-radius:12px;background:#1e293b;overflow:hidden}
.md-list{flex:1;min-height:0;max-height:100%;touch-action:pan-y;overflow:auto;scroll-behavior:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#343754 #1e293b;padding:4px 6px 4px 0}
.md-group{position:sticky;top:0;z-index:1;min-height:30px;background:#090912;color:#6366f1;border-left:2px solid #0891b2;padding:5px 12px}.md-logo{background:transparent!important;color:#22d3ee;font-size:17px}.md-group .g-label{color:#7779ff;font-size:10px}
.md-logo{width:20px;height:20px;align-items:center;justify-content:center}
.md-logo img{display:block;width:20px;height:20px;object-fit:contain}
.md-logo .provider-logo-ollama{filter:invert(1)}
.md-item{min-height:36px;padding:8px 12px;gap:8px}.md-item .m-name{font-size:12px}.md-item .m-badge{font-size:9px;margin-left:auto}.md-list .m-check{display:none}
.md-item[aria-selected="true"]{background:#16445a;color:#67e8f9}.md-item[aria-selected="true"]:after{content:'✓';color:#22d3ee}
.model-drop[data-open="true"]{opacity:1!important;visibility:visible!important;transform:none!important}.model-drop[data-open="false"]{opacity:0!important;visibility:hidden!important;pointer-events:none}
#fallbackSlot{padding:0 12px;min-height:116px}.fallback-card{border:1px solid #705627;background:#2b241e;padding:13px;border-radius:10px}.fc-title{font-size:13px;font-weight:700;color:#fcd34d}.fc-text{font-size:12px;line-height:1.6;margin:7px 0;color:#e2d7c3}.fc-btns{display:flex;flex-wrap:wrap;gap:8px;font-size:10px}.fc-primary{background:#194155;color:#67e8f9;padding:7px;border-radius:5px}.fc-ghost{color:#cbd5e1;padding:7px}
.voice-overlay-demo{position:relative;height:158px;flex-shrink:0;z-index:3;background:radial-gradient(ellipse at center,#1c203830,transparent 75%)}
.voice-orb-slot{height:118px;position:relative}.voice-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px}.voice-orb{position:relative;width:91px;height:91px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff25;box-shadow:0 0 45px #8b5cf633}
.voice-orb svg{width:27px;height:27px;z-index:2;color:#fff}.voice-orb-core{position:absolute;inset:26px;background:#ffffff20;border-radius:50%}.voice-orb:after{content:"";position:absolute;inset:-9px;border:1px solid #ffffff14;border-radius:50%}
.voice-orb.connecting{background:linear-gradient(135deg,#84641c,#5e3d21)}.voice-orb.listening{background:linear-gradient(135deg,#1d625c,#28444f)}.voice-orb.speaking{background:linear-gradient(135deg,#68398a,#47305f)}.voice-status{font-size:13px}.voice-status.connecting{color:#fcd34d}.voice-status.listening{color:#67e8f9}.voice-status.speaking{color:#c4b5fd}
.mic-slash{position:absolute;width:34px;height:2px;background:#fff;transform:rotate(48deg);z-index:3}.voice-controls{min-height:36px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #2e3044;border-radius:10px;background:#141521;font-size:10px;color:#c4b5fd}.voice-picker{color:#cbd5e1;display:flex;gap:6px;align-items:center}.voice-picker small{font-size:9px;color:#94a3b8}.voice-end{background:#342230;color:#fda4af;padding:5px 9px;border-radius:6px}
.voice-body{flex:1;min-height:220px}.voice-chat{display:flex;flex-direction:column;gap:7px}.voice-chat .message{font-size:11.5px;padding:6px 9px;line-height:1.5}.voice-chat .speaker{font-size:9px;margin-bottom:1px}.voice-planning{display:flex;flex-direction:column;gap:13px;height:350px}.plan-document{border:1px solid #34334c;background:#141622;border-radius:8px;padding:15px}.plan-document h3{font-size:17px;margin:13px 0}.plan-point{font-size:13px;line-height:1.6;margin-top:12px}.plan-point small{color:#94a3b8;font-size:11px}
.demo-voice_plan .demo-stage{gap:4px}.demo-voice_plan .alva-file-bar{display:none}.demo-voice_plan .voice-body{overflow:visible}
.browser-ui{border:1px solid #37364e;border-radius:8px;overflow:hidden}.browser-bar{display:flex;align-items:center;gap:8px;background:#25213b;padding:7px;font-size:10px;color:#c4b5fd}.browser-bar .url{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#cbd5e1}.browser-bar .selected{padding:3px;font-size:9px}.tool{color:#fcd34d}
.feedback{padding:16px 22px;background:#f3f4f8;color:#202638;position:relative;height:237px}.app-brand{font-size:9px;letter-spacing:.7px}.feedback h2{font-size:21px;line-height:1.2;letter-spacing:-.6px;margin:10px 0 7px}.feedback p{font-size:10px;color:#68738b;margin-bottom:10px}.form-line{display:inline-block;width:48%;font-size:10px;padding:7px;background:white;border:1px solid #d8dce5;border-radius:4px;margin-right:2%;color:#727d91}.form-line+.form-line{margin-right:0}.feedback-button{display:block;background:#3b82f6;color:white;padding:9px 14px;border-radius:5px;font-weight:600;font-size:11px;margin-top:11px;width:max-content}.feedback-button.red{background:#ef4444}.page-layers{height:237px}.annotation-view{position:relative;flex-shrink:0}.annotation-rect{position:absolute;left:30px;top:218px;width:134px;height:39px;border:2px dashed #ef4444;transform-origin:top left;background:#ef44440a}.button-focus{position:relative;width:max-content}.button-focus .annotation-rect{inset:-5px;width:auto;height:auto}
.draw-toolbar{position:absolute;bottom:0;left:0;right:0;background:#1b1d30;display:flex;justify-content:space-between;align-items:center;padding:5px 9px;font-size:10px;height:30px}.draw-toolbar .selected{padding:3px;font-size:10px}.annotation-chat{height:102px}.attachment{font-size:10px;color:#a5b4fc;margin-bottom:8px}.prompt-preview{position:relative;border:1px solid #3b82f6;border-radius:8px;padding:12px 34px 12px 12px;background:#101521;font-size:12px;line-height:1.5}.send-demo{position:absolute;right:10px;bottom:11px;color:#67e8f9}.annotation-chat .message{padding:7px 10px;font-size:11px}.refresh-mask{position:absolute;inset:32px 0 0;background:#f3f4f8;display:flex;align-items:center;justify-content:center}.refresh-spinner{font-size:36px;color:#475569}
.db-header{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.live-badge,.local-badge{background:#123d3c;color:#6ee7b7;border:1px solid #255951;padding:3px 6px;border-radius:4px;font-size:10px}.db-tabs{font-size:10px;color:#94a3b8}.feedback-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.6}.feedback-table caption{text-align:left;color:#94a3b8;padding-bottom:8px;font-size:10px}.feedback-table th{text-align:left;color:#a5b4fc;font-weight:500;background:#191c2b}.feedback-table td,.feedback-table th{padding:10px 9px;border-bottom:1px solid #30364b}.feedback-table td:first-child{color:#e2e8f0;white-space:nowrap}
.telegram-stage{padding:10px 25px}.telegram{background:#101b27;border:1px solid #33475a;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;flex:1}.telegram-header{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#1b3041;font-size:14px}.telegram-header small{display:block;font-size:10px;margin-top:3px;color:#93a9bb}.telegram-avatar{width:34px;height:34px;display:grid;place-items:center;background:#8753cd;border-radius:50%;font-size:12px}.telegram-body{display:flex;flex-direction:column;gap:10px;padding:13px;flex:1}.bot-context{font-size:11px;line-height:1.8;background:#20303d;padding:10px;border-radius:10px}.bot-keyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.bot-keyboard span{padding:6px;background:#253748;border-radius:4px;text-align:center;font-size:9px}.telegram .message{font-size:12px;background:#223240;padding:9px 11px}.telegram .message.user{background:#066b83;border-color:#087d96}.telegram-input{border-top:1px solid #304355;padding:12px 16px;font-size:11px;color:#a0aabe;display:flex;justify-content:space-between}.telegram-input span{color:#38bdf8}
.deploy-methods{display:flex;gap:12px;align-items:center;font-size:10px;color:#94a3b8}.diff-card{border:1px solid #334155;border-radius:7px;overflow:hidden}.diff-card .file-label{padding:10px}.diff-file{display:flex;justify-content:space-between;font:11px/1.4 Consolas,monospace;padding:8px 11px;border-bottom:1px solid #293245}.diff-footer{padding:8px;display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:9px;background:#141b2a}.diff-footer small{font-size:9px}.diff-footer .demo-button,.diff-footer .selected{font-size:9px;padding:5px}.upload-layer{height:40px}.upload-status{font-size:11px;color:#93c5fd;padding:5px}.upload-meter{height:3px;background:#334155;margin-top:7px}.upload-meter span{display:block;width:100%;height:3px;background:#60a5fa;transform:scaleX(var(--upload));transform-origin:left}.deployed-browser{height:109px}.live-result{background:#f3f4f8;color:#202638;padding:12px 17px;display:flex;align-items:center;gap:20px;font-size:13px}.live-result .feedback-button{margin:0;font-size:10px}
.terminal-ui{background:#0c0c14;flex:1;border:1px solid #292e42;border-radius:8px;overflow:hidden}.terminal-header{display:flex;justify-content:space-between;padding:10px;background:#151521;font-size:11px}.terminal-header span{font-size:9px;color:#94a3b8}.terminal-ui .demo-code{border:0;border-radius:0;padding:12px;font-size:12px}.terminal-ui>.cue{position:absolute;left:15px;right:15px;top:222px}.terminal-input-layer{height:100px}.terminal-prompt{border:1px solid #2c5263;padding:13px;font-size:12px;border-radius:7px;background:#112333}.terminal-suggestion{padding:11px;border:1px solid #254853;border-radius:7px;background:#0c242b;font-size:11px}.terminal-suggestion code{font-size:13px;color:#67e8f9}.terminal-suggestion p{margin:7px 0;color:#94a3b8}.terminal-suggestion .demo-button{float:right;margin-top:-32px}
.version-code{height:137px}.versions{border:1px solid #30354a;border-radius:8px;padding:15px;background:#191d2d}.version-row{display:flex;gap:12px;padding-top:19px;font-size:12px}.version-row p{color:#94a3b8;font-size:10px;margin:5px 0}.version-row small{font-size:9px;color:#6ee7b7}.version-dot{width:12px;height:12px;background:#6366f1;border-radius:50%;margin-top:3px}.version-dot.green{background:#10b981}.restore-confirm{background:#27243c;border:1px solid #5a4d81;padding:13px;border-radius:7px;margin-top:14px;font-size:12px}.restore-confirm p{font-size:11px;color:#cbd5e1;margin:8px 0 12px}.versions>.success{padding-top:12px}.local-menu{background:#1a1b2b;border:1px solid #3b3d5a;border-radius:9px;padding:10px}.local-menu .m-dot{background:#c084fc}
.demo-interface *{animation:none!important;transition:none!important}
.demo-interface button,[role="button"]{cursor:pointer}.demo-interface button:hover,[role="button"]:hover{filter:brightness(1.3);background-color:#16445a;color:#67e8f9}.demo-interface :focus-visible{outline:2px solid #67e8f9;outline-offset:-2px}
.feedback-table tbody tr:hover,.version-row:hover,.diff-file:hover{background:#253248}
.demo-notice{position:absolute;z-index:30;left:12px;right:12px;top:12px;background:#15283c;color:#dbeafe;border:1px solid #35718d;border-radius:8px;padding:12px;font-size:12px;line-height:1.5;box-shadow:0 8px 24px #0008}.demo-notice[hidden]{display:none}.demo-notice button{float:right;background:transparent;color:inherit;border:0;font-size:18px;padding:0 5px}
.demo-voice_plan .file-strip,.demo-annotation .file-strip,.demo-db_bridge .file-strip,.demo-deployment .file-strip,.demo-deployment .alva-tabs,.demo-fallback_limit .file-strip,.demo-fallback_limit .alva-tabs{display:none}
.demo-telegram .alva-chat-header,.demo-telegram .alva-tabs,.demo-telegram .file-strip,.demo-terminal .alva-chat-header,.demo-terminal .alva-tabs,.demo-terminal .file-strip{display:none}
.demo-ollama #ollama-menu{position:absolute;left:14px;right:14px;top:14px;z-index:3}.demo-db_bridge .demo-stage,.demo-deployment .demo-stage{gap:9px}
@media(max-width:420px){.hdr-right .hdr-btn:nth-child(-n+2){display:none}.hdr-title{font-size:12px}.hdr-sub{font-size:10px}.demo-stage{padding:11px;gap:9px}.voice-picker small{display:none}.voice-controls{gap:10px}.voice-chat .message{font-size:11px}.demo-voice_plan .alva-tabs{display:none}.voice-orb-slot{height:100px}.voice-overlay-demo{height:140px}.voice-chat{gap:5px}.provider-line{font-size:11px}.feedback{padding-left:15px;padding-right:15px}.annotation-rect{left:23px}.diff-footer{flex-wrap:wrap}.diff-footer small{flex-basis:100%}.deploy-methods{gap:7px;font-size:9px}.deploy-methods .selected{font-size:9px}.live-result{gap:10px;font-size:11px}.feedback-table{font-size:11px}.feedback-table td,.feedback-table th{padding:8px 5px}.telegram-stage{padding:8px}.telegram-body{padding:10px;gap:8px}.terminal-suggestion .demo-button{float:none;margin:5px 0 0}.terminal-input-layer{height:124px}.message{font-size:12px}.mc-badge-plan{font-size:8px}.md-list{max-height:100%}.demo-interface .mode-tab{font-size:11px}}

/* Match the IDE conversation: expandable activity above the final answer. */
.agent-response{flex-shrink:0;min-width:0;width:100%}
.message.assistant{background:#213438;border:0;border-left:4px solid #22d3ee;border-radius:12px;color:#e2e8f0;padding:14px 16px}
.agent-activity{margin-bottom:10px;background:#22272e;border:1px solid #303844;border-radius:11px;color:#94a3b8;font-size:11px;line-height:1.6}
.agent-activity summary{cursor:pointer;padding:6px 11px;user-select:none}
.agent-activity>summary{display:flex;align-items:center;gap:8px;list-style:none}
.agent-activity>summary::-webkit-details-marker{display:none}
.agent-activity>summary::before{content:'›';font-size:16px}
.agent-activity[open]>summary::before{transform:rotate(90deg)}
.activity-chevron{margin-left:auto;font-size:16px}
.agent-activity[open]>summary .activity-chevron{transform:rotate(90deg)}
.agent-activity summary:hover{background:#2c3540;color:#e2e8f0;border-radius:10px}
.activity-content{padding:8px 11px 12px;border-top:1px solid #303844;max-height:190px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin}
.activity-content>small{color:#8293a8}
.reasoning-detail{margin:6px 0;background:#1c232b;border-radius:6px}
.reasoning-detail p{padding:0 10px 10px;margin:0;color:#cbd5e1}
.tool-calls strong{display:block;margin:6px 0;font-size:11px;font-weight:500}
.tool-call{padding:6px 8px;margin-top:5px;border:1px solid #34404b;border-radius:5px;background:#18232a;overflow-wrap:anywhere}
.tool-call>span{color:#34d399}.tool-call code{font:10px/1.6 Consolas,monospace;color:#cbd5e1;white-space:pre-wrap}
.md-list::-webkit-scrollbar{display:block;width:7px}
.md-list::-webkit-scrollbar-track{background:#1e293b}
.md-list::-webkit-scrollbar-thumb{background:#48516c;border-radius:8px}
.telegram-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* Deployment file summary, matched to the application's modified-files card. */
.demo-deployment .diff-card{flex-shrink:0;border:1px solid #304057;border-radius:13px;background:#1f2938;color:#cbd5e1}
.diff-heading{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;list-style:none;font-size:12px}
.diff-heading::-webkit-details-marker{display:none}.diff-heading strong{font-weight:600}.diff-chevron{color:#818cf8;font-size:20px;line-height:14px}.diff-details[open]>.diff-heading .diff-chevron{transform:rotate(90deg)}
.diff-count{padding:3px 7px;border-radius:5px;color:#818cf8;background:#29364a;font-size:11px}.diff-totals{margin-left:auto;font:600 10px/1.4 Consolas,monospace;white-space:nowrap}.diff-added{color:#00c8df}.diff-removed{color:#ff4757}
.diff-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 13px 12px}.diff-card button{font-family:inherit;cursor:pointer}.diff-chip,.diff-review{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:5px 7px;border:1px solid #334155;border-radius:5px;background:#263345;color:#cbd5e1;font-size:10px;font-weight:600;overflow-wrap:anywhere}.diff-review{color:#b0baff;background:#243751;border-color:#304f7c}
.demo-deployment .diff-file{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:38px;padding:7px 13px;border-top:1px solid #29364a;border-bottom:0;font:11px/1.4 Inter,"Segoe UI",sans-serif}.diff-stats{flex-shrink:0;border-radius:5px;background:#23364e;padding:4px 6px;font:600 10px/1.2 Consolas,monospace;white-space:nowrap}.diff-icon{flex-shrink:0}.diff-file strong{font-weight:650;color:#e2e8f0;overflow-wrap:anywhere;min-width:0}.diff-file small{font-size:10px;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-deploy{margin-left:auto;flex-shrink:0;border:1px solid #304f7c;background:#23364e;border-radius:4px;padding:3px 7px;font-size:10px;line-height:1.3}
.demo-deployment .diff-footer{border-top:1px solid #29364a;background:#1b2534;padding:10px 12px;flex-wrap:wrap}.diff-chip:hover,.diff-review:hover,.diff-deploy:hover{background:#314662}.diff-heading:hover{background:#253248}.diff-card button:focus-visible,.diff-heading:focus-visible,.diff-file:focus-visible{outline:2px solid #818cf8;outline-offset:-2px}.diff-file:focus{background:#293c54}
@media(max-width:420px){.demo-deployment .diff-file{gap:6px;padding:7px 10px}.diff-file small{display:none}.diff-heading{padding:10px;gap:7px}.diff-chips{padding:0 10px 10px}}