:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{width:100%;min-height:100vh;margin:0;padding:0}body{min-width:320px}.login-page{box-sizing:border-box;background:linear-gradient(#b4e8fb 0%,#9ddbf5 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.login-container{color:#2d4d5f;background:linear-gradient(#f9fdff 0%,#eef8ff 100%);border:1px solid #70bce68c;border-radius:16px;width:min(460px,100%);padding:32px 24px 24px;box-shadow:0 16px 40px #276d8e33}.login-title{color:#1f7fab;margin:0 0 20px;font-family:Consolas,Courier,monospace;font-size:clamp(28px,4vw,38px);line-height:1.12}.login-form{gap:10px;display:grid}.login-input{box-sizing:border-box;color:#334b58;background:#fff;border:2px solid #b4e0f6;border-radius:12px;outline:none;width:100%;padding:12px 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.login-input:focus{border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e833}.login-input::placeholder{color:#6d8998}.login-message{color:#c0392b;margin:4px 0 0;font-size:14px}.login-button,.register-button{color:#2a5f7d;cursor:pointer;background:#fff;border:2px solid #7dcdf2;border-radius:999px;width:100%;min-height:46px;margin-top:6px;font-size:15px;font-weight:700;transition:border-color .2s,transform .15s,box-shadow .2s,background-color .2s}.login-button:hover,.register-button:hover{background:#eef8ff;border-color:#47b5e7;transform:translateY(-1px);box-shadow:0 6px 14px #48addf38}.forgot-password-container{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px;display:flex}.forgot-text,.register-text{color:#3f667a;font-size:14px}.forgot-password{color:#1f7fab;cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;font-weight:600}.forgot-password:hover{text-decoration:underline}.register-container{margin-top:16px}.register-page{box-sizing:border-box;background:linear-gradient(#b4e8fb 0%,#9ddbf5 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.registe-container{color:#2d4d5f;background:linear-gradient(#f9fdff 0%,#eef8ff 100%);border:1px solid #70bce68c;border-radius:16px;width:min(460px,100%);padding:32px 24px 24px;box-shadow:0 16px 40px #276d8e33}.registe-container h1{color:#1f7fab;margin:0 0 18px;font-family:Consolas,Courier,monospace;font-size:clamp(28px,4vw,36px);line-height:1.12}.register-form{gap:10px;display:grid}.register-input{box-sizing:border-box;color:#334b58;background:#fff;border:2px solid #b4e0f6;border-radius:12px;outline:none;width:100%;padding:12px 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.register-input:focus{border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e833}.register-input::placeholder{color:#6d8998}.register-button{color:#2a5f7d;cursor:pointer;background:#fff;border:2px solid #7dcdf2;border-radius:999px;width:100%;min-height:46px;margin-top:6px;font-size:15px;font-weight:700;transition:border-color .2s,transform .15s,box-shadow .2s,background-color .2s}.register-button:hover{background:#eef8ff;border-color:#47b5e7;transform:translateY(-1px);box-shadow:0 6px 14px #48addf38}.forgot-page{box-sizing:border-box;background:linear-gradient(#b4e8fb 0%,#9ddbf5 100%);place-items:center;min-height:100vh;padding:24px;display:grid}.forgot-container{color:#2d4d5f;background:linear-gradient(#f9fdff 0%,#eef8ff 100%);border:1px solid #70bce68c;border-radius:16px;width:min(460px,100%);padding:32px 24px 24px;box-shadow:0 16px 40px #276d8e33}.forgot-container h1{color:#1f7fab;margin:0 0 18px;font-family:Consolas,Courier,monospace;font-size:clamp(28px,4vw,36px);line-height:1.12}.forgot-form{gap:10px;display:grid}.forgot-input{box-sizing:border-box;color:#334b58;background:#fff;border:2px solid #b4e0f6;border-radius:12px;outline:none;width:100%;padding:12px 14px;font-size:16px;transition:border-color .2s,box-shadow .2s}.forgot-input:focus{border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e833}.forgot-input::placeholder{color:#6d8998}.forgot-message{color:#c0392b;margin:4px 0 0;font-size:14px}.forgot-message.success{color:#1b7f4a}.forgot-button{color:#2a5f7d;cursor:pointer;background:#fff;border:2px solid #7dcdf2;border-radius:999px;width:100%;min-height:46px;margin-top:6px;font-size:15px;font-weight:700;transition:border-color .2s,transform .15s,box-shadow .2s,background-color .2s}.forgot-button:hover{background:#eef8ff;border-color:#47b5e7;transform:translateY(-1px);box-shadow:0 6px 14px #48addf38}.back-to-login{justify-content:center;margin-top:14px;display:flex}.back-to-login button{color:#1f7fab;cursor:pointer;background:0 0;border:none;padding:0;font-size:14px;font-weight:600}.back-to-login button:hover{text-decoration:underline}:root{--sidebar-width:260px;--page-gap:24px;--input-height:74px}.dashboard-container{background:linear-gradient(#b4e8fb 0%,#9ddbf5 100%);width:100vw;height:100vh;font-family:Inter,sans-serif;display:flex;position:relative;overflow:hidden}.dashboard-content{flex-direction:column;height:100vh;margin-left:250px;padding:20px;display:flex}.mobile-menu-btn,.mobile-drawer-overlay{display:none}.dashboard-sidebar{width:var(--sidebar-width);box-sizing:border-box;z-index:20;background:linear-gradient(#dceaf2 0%,#d1e5f1 100%);flex-direction:column;gap:15px;height:100vh;padding:30px 20px;display:flex;position:fixed;top:0;left:0;box-shadow:8px 0 24px #2c617c1f}.dashboard-title{color:#1f7fab;margin-bottom:15px;font-family:Consolas,monospace;font-size:28px;font-weight:700}.sidebar-btn{color:#59b6e1;cursor:pointer;text-align:left;background-color:#fff;border:2px solid #9ad9f5;border-radius:30px;width:100%;padding:12px;font-family:Consolas,monospace;font-size:18px;font-weight:700;transition:transform .2s,border-color .2s,box-shadow .2s,background-color .2s}.sidebar-btn:hover{background-color:#f3fbff;border:2px solid #67c2ee;transform:translateY(-1px);box-shadow:0 6px 14px #2981ac2e}.chat-list{border-top:1px solid #3a527514;flex-direction:column;gap:8px;max-height:55vh;margin-bottom:8px;padding-top:12px;display:flex;overflow-y:auto}.chat-item{cursor:pointer;color:#2d5162;background:#eef8ff;border-radius:8px;align-items:center;gap:8px;padding:10px 12px;font-size:14px;transition:background .15s,transform .12s;display:flex}.chat-item:hover{background:#d7f0fd;transform:translateY(-1px)}.active-chat{color:#24506a;background:#8cd5f3;font-weight:600}.dashboard-main{top:0;left:var(--sidebar-width);right:0;bottom:calc(var(--input-height) + (var(--page-gap)*2));padding:30px var(--page-gap)16px;box-sizing:border-box;-webkit-overflow-scrolling:touch;flex-direction:column;align-items:flex-start;gap:16px;display:flex;position:absolute;overflow-y:auto}.welcome-text{text-align:center;color:#f4fcff;text-shadow:0 5px 15px #215a7533;pointer-events:none;width:100%;max-width:800px;margin:0 auto;padding-top:6%;font-family:Consolas,monospace;font-size:42px;font-weight:800}.chat-system,.chat-user{word-wrap:break-word;border-radius:16px;width:fit-content;max-width:70%;padding:14px 18px;font-size:17px;line-height:1.5;animation:.3s ease-out fadeIn;box-shadow:0 2px 8px #0000000d}.chat-system{color:#406174;background:#fff;border-bottom-left-radius:4px;margin-right:auto}.chat-user{color:#fff;background:#67c3ef;border-bottom-right-radius:4px;margin-left:auto}.agent-running-badge{color:#1f7fab;background:#e8f7ff;border:1px solid #9ad9f5;border-radius:999px;align-self:flex-start;padding:6px 12px;font-size:13px;font-weight:700;box-shadow:0 2px 8px #1f7fab26}.agent-finished-badge{color:#1f8a4a;background:#edfdf1;border:1px solid #b8ebc8;border-radius:999px;align-self:flex-start;padding:6px 12px;font-size:13px;font-weight:700;box-shadow:0 2px 8px #1f8a4a24}.chat-socket-lane{flex-direction:column;gap:12px;width:100%;display:flex}.agent-log-bundle{width:min(75%,900px);padding:10px 12px}.agent-session-block{flex-direction:column;gap:12px;width:100%;display:flex}.agent-log-details{width:100%}.agent-log-details summary{cursor:pointer;color:#2c5f78;outline:none;font-weight:700}.agent-log-content{border-top:1px solid #d6ebf7;flex-direction:column;gap:6px;max-height:220px;margin-top:10px;padding-top:8px;display:flex;overflow-y:auto}.agent-log-line{color:#3e5f70;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.4}.dashboard-input-bar{bottom:var(--page-gap);left:calc(var(--sidebar-width) + var(--page-gap));right:var(--page-gap);min-height:var(--input-height);box-sizing:border-box;z-index:30;background:#f8fcff;border:1px solid #b5e3f8;border-radius:30px;align-items:center;padding:12px 16px;transition:border-color .25s;display:flex;position:fixed;box-shadow:0 8px 20px #358fb62e}.dashboard-input-bar:focus-within{border-color:#3ab2e5}.dashboard-input{color:#626f78;background:0 0;border:none;outline:none;flex:1;padding:8px;font-family:Inter,sans-serif;font-size:18px}.dashboard-input::placeholder{color:#7d7b7b}.dashboard-bar-btn{cursor:pointer;color:#3ea9de;background:0 0;border:none;border-radius:8px;padding:6px 10px;font-size:26px;transition:all .18s}.dashboard-bar-btn:hover{background:#edf8ff;transform:scale(1.04)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.dashboard-main::-webkit-scrollbar{width:8px;height:8px}.chat-list::-webkit-scrollbar{width:8px;height:8px}.dashboard-main::-webkit-scrollbar-track{background:0 0}.chat-list::-webkit-scrollbar-track{background:0 0}.dashboard-main::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.chat-list::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}.dashboard-main::-webkit-scrollbar-thumb:hover{background:#ffffff80}.chat-list::-webkit-scrollbar-thumb:hover{background:#ffffff80}@media (max-width:900px){:root{--sidebar-width:220px;--page-gap:16px;--input-height:68px}.dashboard-sidebar{padding:20px 14px}.dashboard-title{font-size:22px}.sidebar-btn{font-size:16px}}@media (max-width:700px){:root{--sidebar-width:280px;--input-height:64px}.mobile-menu-btn{color:#2d5b72;z-index:80;background:#fff;border:2px solid #9ad9f5;border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;padding:0;display:inline-flex;position:fixed;top:10px;left:10px;box-shadow:0 6px 14px #2981ac33}.mobile-menu-icon{justify-content:center;align-items:center;width:100%;height:100%;font-size:23px;line-height:1;display:inline-flex;transform:translateY(-1px)}.mobile-drawer-overlay{z-index:50;background:#1c3b4d59;display:block;position:fixed;inset:0}.dashboard-sidebar{height:100vh;width:var(--sidebar-width);z-index:60;border-bottom:none;transition:transform .25s;position:fixed;top:0;left:0;transform:translate(-100%);box-shadow:8px 0 22px #215a7538}.dashboard-sidebar.mobile-open{transform:translate(0)}.dashboard-container{overflow:hidden}.dashboard-main{top:0;left:0;right:0;bottom:calc(var(--input-height) + (var(--page-gap)*2));min-height:0;padding:60px var(--page-gap)calc(var(--input-height) + (var(--page-gap)*2));position:absolute}.dashboard-input-bar{left:var(--page-gap);right:var(--page-gap);border-radius:18px;bottom:12px}.chat-system,.chat-user{max-width:88%}}.hidden{display:none}.center{justify-content:center;align-items:center;display:flex}.chat-system,.chat-user{transition:transform .12s,box-shadow .12s}.chat-system:hover,.chat-user:hover{box-shadow:0 4px 12px #0000001a}.modal-overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:999;background:#152a3773;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{color:#2d4d5f;background:linear-gradient(#f9fdff 0%,#eef8ff 100%);border:1px solid #70bce68c;border-radius:16px;width:min(700px,100%);max-height:min(82vh,760px);padding:28px 24px 22px;animation:.18s ease-out modalIn;position:relative;overflow-y:auto;box-shadow:0 16px 40px #276d8e40}.modal-content.user-credentials-modal{flex-direction:column;width:min(980px,100%);height:min(82vh,760px);max-height:min(82vh,760px);display:flex;overflow:hidden}.modal-title{color:#1f7fab;margin:0 30px 14px 0;font-family:Consolas,monospace;font-size:28px}.modal-label{color:#41697e;margin-bottom:8px;font-size:14px;font-weight:700;display:block}.modal-textarea{resize:none;color:#334b58;box-sizing:border-box;background:#fff;border:2px solid #b4e0f6;border-radius:12px;outline:none;width:100%;height:clamp(180px,38vh,300px);max-height:100%;margin:6px 0 0;padding:12px 14px;font-size:16px;line-height:1.45;transition:border-color .2s,box-shadow .2s}.modal-textarea:focus{border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e833}.modal-close{color:#4f7f95;cursor:pointer;background:#fff;border:2px solid #b6e1f6;border-radius:50%;justify-content:center;align-items:center;width:34px;height:34px;padding:0;font-size:18px;line-height:1;transition:transform .15s,border-color .2s,background-color .2s;display:inline-flex;position:absolute;top:1rem;right:1rem}.modal-close:hover{background:#f2fbff;border-color:#79c8ee;transform:scale(1.05)}.save-btn{color:#2a5f7d;cursor:pointer;background:#fff;border:2px solid #7dcdf2;border-radius:999px;min-width:170px;margin-top:16px;padding:11px 18px;font-size:15px;font-weight:700;transition:border-color .2s,transform .15s,box-shadow .2s,background-color .2s}.save-btn:hover{background:#eef8ff;border-color:#47b5e7;transform:translateY(-1px);box-shadow:0 6px 14px #48addf38}@keyframes modalIn{0%{opacity:0;transform:translateY(6px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}.setting-btn{color:#59b6e1;cursor:pointer;text-align:left;background-color:#fff;border:2px solid #9ad9f5;border-radius:30px;width:45%;padding:6px;font-family:Consolas,monospace;font-size:14px;font-weight:700;transition:transform .2s,border-color .2s,box-shadow .2s,background-color .2s}.setting-btn:hover{background-color:#f3fbff;border:2px solid #67c2ee;transform:translateY(-1px);box-shadow:0 6px 14px #2981ac2e}.small-input{z-index:30;background:#f8fcff;border:1px solid #b5e3f8;border-radius:30px;align-items:center;padding:12px;transition:border-color .25s;display:flex;box-shadow:0 8px 20px #358fb62e}.small-input::placeholder{color:#7d7b7b}.user-credentials-modal .password-verification-group{text-align:center;flex-direction:column;align-items:center;gap:12px;margin:8px 0 12px;display:flex}.user-credentials-modal .password-prompt{margin:0}.user-credentials-modal .password-input{box-sizing:border-box;width:min(360px,100%);margin:0 auto;display:block}.user-credentials-modal .verify-identity-btn{text-align:center;width:auto;min-width:180px;margin:0 auto;display:block}.user-creds-container{grid-template-columns:1fr 1fr;gap:20px;height:100%;min-height:0;display:grid}.general-creds-container,.services-container{background:#fff;border:1px solid #cfe8f6;border-radius:12px;padding:16px}.general-creds-container h3,.services-container h3{color:#2a5f7d;margin:0 0 12px}.services-container{flex-direction:column;min-height:0;display:flex}.credentials-tabs{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.credentials-tab{color:#3f6c82;cursor:pointer;background:#f5fcff;border:1px solid #b8dff2;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700}.credentials-tab.active{color:#fff;background:#67c3ef;border-color:#67c3ef}.credentials-tab-body{flex:1;min-height:0;overflow:hidden}.services-grid{grid-template-columns:1fr;gap:10px;padding-right:4px;display:grid}.cards-scroll{height:100%;padding-right:4px;overflow-y:auto}.user-credentials-body{flex:1;min-height:0;overflow:hidden}.user-credentials-body>.user-creds-container>.general-creds-container,.user-credentials-body>.user-creds-container>.services-container{min-height:0;overflow:hidden}.user-credentials-body>.user-creds-container>.general-creds-container{overflow-y:auto}.service-card{text-align:left;cursor:pointer;background:#f8fdff;border:1px solid #c9e6f6;border-radius:10px;flex-direction:column;gap:4px;width:100%;padding:10px 12px;transition:border-color .2s,transform .15s,box-shadow .2s;display:flex}.service-card:hover{border-color:#79c8ee;transform:translateY(-1px);box-shadow:0 6px 12px #2981ac24}.service-card-name{color:#2a5f7d;font-size:15px;font-weight:700}.service-card-username{color:#507588;font-size:13px}.services-empty-state{color:#648295;margin:2px 0 8px;font-size:14px}.service-detail-header{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.back-services-btn{text-align:center;width:auto;min-width:90px}.service-detail-actions{gap:10px;margin-top:8px;display:flex}.delete-service-btn{color:#ab4d4d;border-color:#eab8b8}.credentials-add-btn{text-align:center;align-self:flex-start;width:auto;min-width:190px;margin-top:12px}.creds-field{flex-direction:column;gap:6px;margin-bottom:12px;display:flex}.creds-field:last-child{margin-bottom:0}.creds-field label{color:#43667a;font-size:14px;font-weight:600}.creds-field input:not([type=checkbox]){box-sizing:border-box;color:#24485b;background:#fbfeff;border:1px solid #b8dff2;border-radius:10px;outline:none;width:100%;height:42px;padding:0 12px;font-size:15px;transition:border-color .2s,box-shadow .2s,background-color .2s}.creds-field input:not([type=checkbox])::placeholder{color:#88a5b4}.creds-field input:not([type=checkbox]):focus{background:#fff;border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e82e}.creds-field select{box-sizing:border-box;color:#24485b;background:#fbfeff;border:1px solid #b8dff2;border-radius:10px;outline:none;width:100%;height:42px;padding:0 12px;font-size:15px;transition:border-color .2s,box-shadow .2s,background-color .2s}.creds-field select:focus{background:#fff;border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e82e}.creds-textarea{box-sizing:border-box;color:#24485b;resize:vertical;background:#fbfeff;border:1px solid #b8dff2;border-radius:10px;outline:none;width:100%;min-height:110px;padding:10px 12px;font-family:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s,background-color .2s}.creds-textarea::placeholder{color:#88a5b4}.creds-textarea:focus{background:#fff;border-color:#52b9e8;box-shadow:0 0 0 3px #52b9e82e}.creds-helper-text{color:#648295;margin:2px 0 0;font-size:12px}.creds-checkbox-row{flex-direction:row;justify-content:space-between;align-items:center}.creds-checkbox-row input[type=checkbox]{width:18px;height:18px}@media (max-width:760px){.user-creds-container{grid-template-columns:1fr}}.modal-title-divider{background-color:#0cf72b;width:100%}.live-browser-container{background:#1a1a1a;border:1px solid #333;border-radius:12px;width:60%;margin:20px 0;overflow:hidden;box-shadow:0 10px 30px #00000080}.browser-header{color:#ccc;text-transform:uppercase;background:#333;padding:8px 15px;font-size:.8rem;font-weight:700}.browser-frame-wrapper{-webkit-user-select:none;user-select:none;outline:none;width:100%;position:relative}.browser-frame-wrapper.browser-interactive{cursor:pointer;outline-offset:-2px;outline:2px solid #4fc3f7}.browser-frame-wrapper.browser-interactive:focus{outline:2px solid #29b6f6}.browser-frame{pointer-events:none;width:100%;height:auto;display:block}
