@font-face{font-family:system;src:local('Pretendard'),local('맑은 고딕')}*{box-sizing:border-box}body{margin:0;background:#f8f9f6;color:#171717;font-family:system,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:14px}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}button{border:0;background:none;color:inherit}h1,h2,h3,p{margin-top:0}h1{font-size:22px;margin:5px 0 0;letter-spacing:-.7px}h2{font-size:26px;letter-spacing:-1px}h3{font-size:14px}.brand{display:flex;align-items:center;gap:10px;font-size:29px;color:#171717;font-weight:600;white-space:nowrap}.brand span{font-size:18px;letter-spacing:-.8px}.eyebrow{font-size:13px;letter-spacing:1.7px;color:#171717;font-weight:700}.muted{color:#171717;line-height:1.8}.small{font-size:15px}.primary{background:#28543c;color:#fff;border-radius:10px;padding:14px 18px;font-weight:600}.primary:hover,.send-button:hover{background:#193c2a}.secondary{padding:10px 15px;border:1px solid #dce3da;border-radius:9px;background:#fff;font-size:15px;white-space:nowrap}.secondary:hover{background:#eff3eb}.full-width{width:100%}.text-button{font-size:15px;color:#171717}.icon-button{font-size:22px;padding:4px 8px}.divider{border-top:1px solid #e4e9e0;margin:24px 0}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#629568;margin-right:4px}.error{min-height:20px;color:#a53e38;font-size:15px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}
.app-shell{display:flex;height:100dvh;min-height:500px}.sidebar{width:230px;flex-shrink:0;background:#edf1e8;border-right:1px solid #e1e6db;padding:25px 18px;display:flex;flex-direction:column;gap:23px}.new-chat{border:1px solid #ccd6c7;border-radius:9px;padding:12px 18px;text-align:left;background:#f9fbf7;font-weight:600;font-size:16px}.sidebar nav{overflow:auto;flex:1;margin-top:-10px}.sidebar nav button{width:100%;text-align:left;padding:12px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;border-radius:8px;margin-bottom:4px;color:#171717}.sidebar nav button:hover,.sidebar nav .selected{background:#dfe8d9;color:#171717}.sidebar-bottom{border-top:1px solid #dce4d6;padding-top:16px;display:flex;justify-content:space-between;gap:10px;color:#171717;font-size:15px}.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{height:90px;padding:22px 34px;border-bottom:1px solid #e5e9e1;display:flex;align-items:center;justify-content:space-between;background:#fbfcf9}.work-area{flex:1;display:flex;min-height:0}.conversation{flex:1;min-width:0;max-width:1050px;display:flex;flex-direction:column;padding:0 40px 14px;margin:auto;height:100%}#messages{flex:1;overflow:auto;padding:30px 4px 20px;scrollbar-width:thin}.welcome{max-width:510px;margin:clamp(35px,12vh,130px) auto 50px}.welcome-icon{font-size:52px;color:#171717;margin-bottom:22px}.welcome h2{font-size:30px;margin-bottom:13px}.welcome p{line-height:1.8;color:#171717;font-size:16px}.suggestions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}.suggestions button{background:#fff;border:1px solid #e0e6da;padding:20px 16px;border-radius:12px;text-align:left;font-size:15px;line-height:1.7;display:flex;justify-content:space-between;gap:12px}.suggestions button:hover{border-color:#8ea581}.suggestions span{color:#171717}.message{margin:0 0 27px;padding:0 4px}.message.user{background:#edf2e8;border-radius:13px;padding:16px 18px;margin-left:35px}.message-label{font-size:14px;color:#171717;font-weight:600;margin-bottom:10px}.message-content{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.95;font-size:16px;color:#171717}.activity{font-size:15px;line-height:1.6;padding:10px 14px;color:#171717;border:1px solid #e1e7d9;border-radius:8px;background:#f1f5ed;margin-bottom:10px}#composer{border:1px solid #d5decd;border-radius:15px;background:#fff;padding:15px 17px 10px;box-shadow:0 4px 20px #344d1910}#composer:focus-within{border-color:#7f9d70}#message{width:100%;border:0;outline:0;resize:vertical;min-height:55px;max-height:180px;line-height:1.8;background:transparent;font-size:16px;color:#171717}#message::placeholder{color:#171717}.composer-bottom{display:flex;justify-content:space-between;align-items:center;color:#171717;font-size:14px}.composer-bottom>div{display:flex;align-items:center;gap:12px}.send-button{background:#315d3d;color:white;border-radius:9px;font-size:23px;width:35px;height:35px}.stop-button{color:#9f5146;font-size:15px}.composer-note{text-align:center;font-size:13px;color:#171717;margin:11px 0 0;line-height:1.6}.browser-panel{width:310px;flex-shrink:0;border-left:1px solid #e2e8dc;background:#f2f5ee;padding:25px 22px;overflow:auto}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.panel-heading h2{font-size:15px;letter-spacing:-.4px;margin:6px 0 0}.screen-wrap{background:#e5ebdf;border-radius:10px;overflow:hidden;min-height:155px;display:flex;align-items:center;justify-content:center;border:1px solid #dce5d5;margin-bottom:14px}.screen-wrap img{width:100%;display:block}#screen-empty{color:#171717;text-align:center;line-height:1.9;font-size:14px;padding:30px 12px}.browser-panel>.muted{margin:12px 0}.run-card{padding:12px 0;border-bottom:1px solid #e0e7d9}.run-card p{font-size:14px;line-height:1.7;margin:7px 0;color:#171717;overflow-wrap:anywhere}.run-status{font-size:13px;background:#dce8d4;padding:4px 8px;border-radius:5px;color:#171717}.run-status.failed,.run-status.cancelled,.run-status.interrupted{background:#f3e7df;color:#97664c}details{margin-top:25px;border:1px dashed #cdd8c4;padding:12px;border-radius:8px}summary{font-size:14px;color:#171717;cursor:pointer}pre{font-family:ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;color:#171717;line-height:1.6;max-height:300px;overflow:auto}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#263c2c;color:white;border-radius:10px;box-shadow:0 8px 25px #0002;z-index:10;max-width:90vw;font-size:15px;line-height:1.6}
.login-page{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 20% 15%,#e6edde,transparent 60%),#f6f8f2;padding:25px}.login-card{background:#fff;border:1px solid #e0e6d7;border-radius:22px;padding:40px 42px;width:100%;max-width:440px;box-shadow:0 20px 70px #3651190b}.login-card .brand{margin-bottom:45px}.login-card h1{font-size:25px;margin:13px 0}.login-card>.muted{font-size:15px;margin-bottom:32px}.login-card form>label{font-size:15px;font-weight:600;display:block;margin:17px 0 8px}.login-card input:not([type=checkbox]){border:1px solid #dce3d5;border-radius:9px;background:#fbfcf8;width:100%;padding:13px 12px;color:#171717}.login-card input:focus{outline:1px solid #7d9c71}.password-field{position:relative}.password-field input{padding-right:55px!important}.password-field button{position:absolute;right:9px;top:12px;font-size:14px;color:#171717}.login-options{display:flex;justify-content:space-between;margin:20px 0;color:#171717;font-size:15px}.login-options label{display:flex;align-items:center;gap:5px}.login-options input{accent-color:#365e3b}.login-submit{width:100%}.login-foot{font-size:13px;color:#171717;text-align:center;border-top:1px solid #edf0e7;margin-top:30px;padding-top:22px}.remote-page{height:100dvh;display:flex;flex-direction:column;background:#202a21}.remote-bar{height:70px;flex-shrink:0;background:#f4f7ee;display:flex;align-items:center;gap:20px;padding:14px 22px}.remote-bar span#connection-status{flex:1;font-size:15px;color:#171717}.remote-help{font-size:15px;color:#171717;padding:12px 22px;margin:0}.remote-page #remote-screen{flex:1;min-height:0}

/* Chat and the live browser share the available workspace equally. */
.sidebar{width:280px;padding:24px 14px;gap:20px}
.sidebar-bottom{flex-wrap:wrap}
.sidebar nav button{font-size:14px}
.control-active{background:#28543c;color:#fff;border-color:#28543c}
.control-active:hover{background:#193c2a}
.topbar{height:70px;padding:18px 24px}
.work-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.conversation{width:100%;max-width:none;margin:0;padding:0 22px 20px;height:100%;min-height:0}
.message-content,#message{font-size:16px;line-height:1.8}
.message.user{margin-left:12px}
.welcome h2{font-size:26px}
.browser-panel{width:auto;min-width:0;min-height:0;padding:18px;display:flex;flex-direction:column;overflow:auto;gap:14px}
.panel-heading{margin:0;gap:12px;flex-wrap:wrap;flex-shrink:0}
.panel-heading h2{font-size:18px;margin:0}
.screen-actions{display:flex;gap:8px;flex-wrap:wrap}
.browser-viewer{flex:1;min-height:280px;display:flex;min-width:0}
.viewer-card{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;overflow:hidden;border:1px solid #d5decd;border-radius:12px;background:#202a21}
#browser-frame{display:block;width:100%;flex:1;min-height:0;border:0;background:#202a21}
.viewer-toolbar{display:none}
.viewer-expanded{position:fixed;inset:0;z-index:30;padding:32px;min-height:0;background:#101810b8;backdrop-filter:blur(3px)}
.viewer-expanded .viewer-card{width:100%;height:100%;box-shadow:0 20px 80px #0006}
.viewer-expanded .viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:#f4f7ee;flex-shrink:0}
.viewer-toolbar h2{font-size:18px;margin:0}
.browser-panel details{margin:0;padding:12px;flex-shrink:0}
.run-history{max-height:220px;overflow:auto}
summary{font-size:15px}
.remote-page.embedded .remote-bar{display:none}
.remote-page.embedded #remote-screen{height:100%}
.remote-page #remote-screen{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#remote-screen video{width:100%;height:100%;object-fit:contain;touch-action:none;user-select:none}
.remote-keyboard{position:absolute;left:1px;bottom:1px;width:1px;height:1px;opacity:0;resize:none;padding:0;border:0}
.remote-notice{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:8px 12px;background:#172319e8;color:#171717;border-radius:8px;font-size:13px;pointer-events:none}
@media(max-width:1000px){.sidebar{width:65px;padding:20px 8px;align-items:center}.sidebar .brand{font-size:32px}.sidebar .brand span,.sidebar .eyebrow,.sidebar nav,.sidebar-bottom>span{display:none}.new-chat{font-size:0;padding:10px}.new-chat::before{content:'＋';font-size:23px}.sidebar-bottom{margin-top:auto}.sidebar-bottom button{font-size:13px;padding:0}.conversation{padding:0 16px 16px}.browser-panel{padding:14px}.welcome h2{font-size:23px}}
@media(max-width:640px){.app-shell{height:auto;min-height:100dvh}.sidebar{position:fixed;top:0;bottom:0;z-index:2}.workspace{margin-left:65px}.topbar{height:60px;padding:14px 16px}.work-area{display:flex;flex-direction:column}.conversation{height:calc(60dvh - 60px);min-height:320px}.browser-panel{border-left:0;border-top:1px solid #e2e8dc;min-height:420px}.browser-viewer{height:42dvh;flex:none}.viewer-expanded{height:auto;padding:12px}.welcome{margin:35px auto}.welcome h2{font-size:22px}.login-card{padding:30px 25px}.remote-bar{gap:10px;padding:10px}.remote-bar .brand span{font-size:15px}}
