:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color-scheme:dark;background:#212121;color:#ececec}
*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}
button{color:inherit;background:#353535;border:1px solid #505050;border-radius:10px;padding:9px 12px;cursor:pointer;transition:background .12s ease}button:hover:not(:disabled){background:#454545}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #eee;outline-offset:2px}
button:disabled{opacity:.5;cursor:not-allowed}.primary{background:#eee;color:#1e1e1e;border-color:#eee;font-weight:600}.primary:hover:not(:disabled){background:#d6d6d6}.subtle{border:0;background:transparent}
.hidden{display:none!important}.shell{height:100dvh;display:flex;flex-direction:column}
.login{display:grid;place-items:center;flex:1;padding:20px}.login form{width:min(380px,100%);display:flex;flex-direction:column;gap:12px;border:1px solid #344156;border-radius:12px;padding:28px;background:#131e2e}
h1{margin:0;font-size:21px}.login p{color:#aab7c9;margin:0 0 8px}
input,textarea{background:#303030;border:1px solid #555;color:#eee;border-radius:10px;padding:10px;min-width:0}
textarea{resize:vertical}.workspace{height:100%;min-height:0;display:flex;flex-direction:column}
.topbar{height:50px;padding:9px 13px;border-bottom:1px solid #304159;display:flex;align-items:center;gap:12px}.topbar strong{font-size:14px}
#identity{color:#a6b3c6;margin-left:auto;font-size:12px}.columns{display:flex;flex:1;min-height:0}
.sidebar{width:265px;flex:none;background:#171717;border-right:none;display:flex;flex-direction:column;padding:12px;gap:14px}
.actions{display:flex;flex-direction:column;gap:8px}.section-title{font-size:12px;color:#a6b3c6}
#chatList{overflow:auto;list-style:none;margin:0;padding:0;flex:1}
#chatList li{display:flex;align-items:center;padding:4px 2px;gap:4px}
#chatList li button.open{border:0;text-align:left;background:transparent;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
#chatList li button.open:hover{background:#25354a}
#chatList li button.remove{padding:4px 7px;font-size:11px;color:#b8c6d9}
.chat{min-width:0;display:flex;flex:1;flex-direction:column;background:#212121}
.chat-head{height:42px;border-bottom:1px solid #304159;display:flex;justify-content:space-between;align-items:center;padding:5px 12px;gap:8px}
#chatLabel{font-size:12px;color:#b8c6d9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.viewport{display:grid;place-items:center;flex:1;overflow:hidden;min-height:150px;background:#212121;position:relative;touch-action:none;user-select:none}
.viewport img{display:block;max-width:100%;max-height:100%;object-fit:contain;touch-action:none}
.viewport p{padding:18px;color:#a7b7c9;text-align:center;font-size:14px}
.composer{background:#303030;border:1px solid #464646;border-radius:24px;padding:15px 18px;display:flex;flex-direction:column;gap:9px;width:min(790px,calc(100% - 36px));margin:8px auto 14px}
.composer label{font-size:12px;color:#bccbdd}.composer-actions{display:flex;align-items:center;gap:9px;justify-content:space-between}
#upload{width:190px;max-width:56%;font-size:12px;padding:5px}
.admin{margin:24px auto;width:min(900px,95%);display:flex;flex-direction:column;gap:12px}
.admin-frame{height:55dvh;display:grid;place-items:center;border:1px solid #304159;border-radius:8px;overflow:hidden}
.admin-frame img{max-width:100%;max-height:100%}#adminStatus{color:#b4c5d7}

.login-help{border:1px solid #344156;border-radius:8px;padding:9px 11px;font-size:12px;color:#b8cadc}
.login-help summary{cursor:pointer;font-weight:600;color:#d7e8fb}
.login-help p{margin:8px 0;color:#b8cadc;overflow-wrap:anywhere}
.login-help code{font-size:11px;overflow-wrap:anywhere}
.admin-choice{font-size:12px;align-self:center;text-decoration:underline}
.setup-notice{background:#17273b;border-bottom:1px solid #3d5676;padding:15px 17px;max-height:43vh;overflow:auto;font-size:13px}
.setup-notice strong{font-size:15px}
.setup-notice p{margin:7px 0;line-height:1.5;color:#b9cde0}
.setup-notice .setup-error{color:#ffc98d;font-weight:600}
.setup-notice button{margin-top:8px}
.admin-steps{background:#17263a;border:1px solid #344a63;padding:15px 15px 15px 35px;border-radius:9px;font-size:13px;line-height:1.65}
.admin-steps li{margin:4px 0}
.admin-readiness{padding:13px;background:#17263a;border:1px solid #385272;border-radius:8px}
.chatgpt-auth{padding:12px 14px;background:#303030;border:1px solid #555;border-radius:11px}
.chatgpt-auth strong{display:block;font-size:15px}
.chatgpt-auth p{margin:6px 0 0;font-size:13px;line-height:1.6;color:#d1d1d1}
.admin-readiness p{margin:6px 0 0;font-size:13px;color:#b6c7d7}
.admin-controls{display:flex;gap:8px;flex-wrap:wrap}
.admin-security-note{font-size:12px;color:#acbdcc}
@media(max-width:700px){.setup-notice{padding:10px;max-height:37vh}.admin{margin:12px auto}.admin-frame{height:38dvh}}
#status{position:absolute;right:12px;bottom:14px;max-width:min(500px,90vw);font-size:12px;pointer-events:none;color:#f1dba9;min-height:18px}

/* ChatGPT-style shell: neutral palette, compact navigation, centered composer. */
.login{background:#212121}.login form{background:transparent;border:0;width:min(405px,100%);padding:35px 24px}
.login h1{text-align:center;font-size:27px;font-weight:600;margin:0 0 4px}
.login p{text-align:center}.login input{height:46px;background:#303030;border-color:#565656}
.login-help{background:#262626;border-color:#414141}.login-help summary{color:#eee}
.admin-choice{color:#c3c3c3;text-decoration:underline}.login form .primary{padding:12px}
.sidebar .actions{gap:3px}.sidebar .actions button{background:transparent;text-align:left;border:0;border-radius:10px;height:42px;font-weight:500;font-size:13px;padding-left:13px}
.sidebar .actions button:hover{background:#303030}.section-title{color:#aaa;padding:4px 11px;font-size:12px;font-weight:600}
#chatList li button.open{border-radius:10px;padding:10px 11px;font-size:13px}
#chatList li button.open:hover{background:#303030}
#chatList li button.remove{background:transparent;border:0}.sidebar #identity{margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.topbar{border:0;height:56px;padding:10px 18px;flex-direction:row-reverse;justify-content:space-between}
.topbar strong{font-size:18px;font-weight:600;color:#eaeaea}.topbar #identity{margin:0;color:#999}
.chat-head{border:0;height:45px;padding:5px 19px}.chat-head #chatLabel{color:#aeaeae;font-size:12px}
.viewport p{font-size:14px;color:#a5a5a5}.viewport #emptyView{font-size:19px;line-height:1.4}
.composer textarea{background:transparent;border:0;border-radius:0;outline:0;min-height:40px;max-height:180px;font-size:14px;color:#eee;padding:0}
.composer textarea:focus{outline:0}.composer textarea::placeholder{color:#aaa}
.composer .composer-actions{justify-content:space-between;align-items:center}
.composer .attachment{background:#383838;border:1px solid #555;border-radius:100px;padding:6px 12px;cursor:pointer}
.composer .attachment:hover{background:#4a4a4a}
.composer #sendText{height:34px;min-width:52px;background:#eee;color:#222;border:0;border-radius:100px;font-weight:600}
.composer #sendText:disabled{background:#555;color:#bdbdbd}
#upload:disabled{display:none}.setup-notice{background:#292827;border-color:#5d4b37;border-radius:15px;width:min(700px,calc(100% - 24px));margin:0 auto}
.setup-notice p{line-height:1.6;font-size:13px;color:#c8c8c8}.setup-notice strong{font-size:15px}
.setup-notice .setup-error{color:#ffc491}.setup-notice button{background:#373737}
.admin{background:#212121;color:#eee}.admin h1{font-weight:600;font-size:24px}
.admin-readiness{background:#303030;border:1px solid #484848}
.admin-steps{background:#292929;border:1px solid #424242}.admin-security-note{color:#d2bbab}
.admin-frame{background:#191919;border-color:#3a3a3a;border-radius:12px}
.admin-project-discovery{background:#2b2b2b;border:1px solid #505050;border-radius:12px;padding:13px 15px;font-size:13px;line-height:1.5}.admin-project-discovery p{font-size:12px;color:#c4c4c4;overflow-wrap:anywhere}.admin-project-discovery #adminProjectsOutput{max-height:180px;overflow:auto}.admin-project-row{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #454545}.admin-project-row span{overflow-wrap:anywhere;min-width:0;flex:1}.admin-project-row button{flex:none;padding:6px 10px;font-size:12px}.admin-controls button{padding:12px}.admin-key-controls{display:flex;gap:6px;flex-wrap:wrap}.admin-key-controls button{padding:7px 12px;background:#343434;border:1px solid #555;border-radius:8px;font-size:12px}.admin-frame img{position:relative;z-index:2}
.admin.operator-mode{width:min(1260px,calc(100% - 32px));margin:12px auto;gap:9px}
.admin.operator-mode h1{font-size:19px}
.admin.operator-mode #browserRoleHelp{font-size:13px;color:#b8b8b8;margin:0 0 2px}
.admin.operator-mode .admin-readiness{padding:10px 14px}
.admin.operator-mode .admin-frame{height:min(72dvh,890px);min-height:360px;background:#171717}
.admin.operator-mode .admin-frame img{max-width:100%;max-height:100%;object-fit:contain;cursor:default;touch-action:none}
.admin.operator-mode .admin-controls button{padding:9px 13px}
.admin.operator-mode .admin-project-discovery{margin-top:8px}
@media(max-width:700px){
  .admin.operator-mode{width:calc(100% - 16px);margin:7px auto}
  .admin.operator-mode .admin-frame{height:56dvh;min-height:240px}
}
#adminNext{line-height:1.6;color:#b9b9b9}
#status{background:#453b31;border:1px solid #6e5743;border-radius:9px;padding:9px}
@media(max-width:700px){.sidebar{top:0}.chat-head{justify-content:flex-start}.composer{width:calc(100% - 16px);margin:5px 8px 8px}.setup-notice{max-height:40vh}.topbar{padding:8px 12px}.admin{margin:14px auto}}
.mobile-only{display:none}
@media(max-width:700px){
 .topbar{height:46px}.mobile-only{display:block}
 .sidebar{position:absolute;z-index:5;top:90px;bottom:0;width:min(78vw,270px);box-shadow:7px 0 18px #0006}
 .sidebar.collapsed{display:none}
 .chat-head{height:44px}.viewport{min-height:90px}
 .composer{padding:7px}.composer textarea{min-height:42px;max-height:120px}
}


/* ChatGPT mobile navigation pattern, used at desktop and mobile sizes.
   Drawer stays closed until explicitly opened; no permanent side column. */
:root{background:#0d0d0d;color:#ececec;color-scheme:dark}
body{overflow:hidden;background:#0d0d0d}
.workspace{height:100dvh;min-height:0;background:#0d0d0d;overflow:hidden}
.mobile-appbar{height:70px;min-height:70px;padding:11px 18px;display:grid;grid-template-columns:52px minmax(0,1fr) 52px;align-items:center;gap:8px;background:#0d0d0d}
.icon-button{border:0;border-radius:50%;background:#272727;width:46px;height:46px;display:grid;place-items:center;line-height:1;padding:0}
.icon-button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-button:hover:not(:disabled){background:#363636}
.mode-switch{display:flex;align-items:center;justify-self:center;width:210px;max-width:100%;height:48px;padding:4px;border-radius:28px;background:#393939;gap:3px;font-size:15px}
.mode-switch span{display:grid;place-items:center;flex:1;height:40px;border-radius:23px;white-space:nowrap}
.mode-selected{background:#242424;color:#f3f3f3;font-weight:600}
.mode-unavailable{color:#a9a9a9;cursor:not-allowed;opacity:.65}
.new-chat-top{justify-self:end}
.columns{position:relative;display:flex;min-height:0;flex:1;overflow:hidden}
.sidebar-backdrop{position:fixed;inset:0;z-index:50;width:100%;height:100%;border:0;border-radius:0;padding:0;background:#0009}
.sidebar-backdrop:hover:not(:disabled){background:#0009}
.sidebar{position:fixed;z-index:51;top:0;bottom:0;left:0;width:min(288px,86vw);max-width:calc(100vw - 42px);padding:21px 16px max(22px,env(safe-area-inset-bottom));gap:14px;box-shadow:13px 0 35px #0008;background:#202020;border:0;display:flex;flex-direction:column;overflow:hidden}
.sidebar.collapsed{display:none!important}
.sidebar-heading{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:8px;padding:0 5px 5px}
.sidebar-heading strong{font-size:23px;font-weight:650;letter-spacing:-.6px}
.sidebar-heading .icon-button{background:transparent;font-size:28px;width:36px;height:36px;font-weight:300;color:#bbb}
.sidebar-heading .icon-button:hover:not(:disabled){background:#343434}
.sidebar .actions{gap:3px;display:flex;flex-direction:column}
.sidebar .actions button{display:flex;gap:12px;align-items:center;height:46px;text-align:left;font-size:15px;padding:7px 12px;border-radius:12px;background:transparent;border:0;font-weight:500}
.sidebar .actions button:hover:not(:disabled){background:#333}
.sidebar .actions button:disabled{opacity:.35}
.sidebar .action-icon{display:inline-grid;place-items:center;font-size:23px;width:26px;line-height:1}
.sidebar .section-title{font-size:12px;font-weight:650;color:#aaa;padding:10px 9px 4px;margin:0}
#chatList{overflow-y:auto;overflow-x:hidden;min-height:0;flex:1;scrollbar-width:thin}
#chatList li{padding:2px 0;gap:2px}
#chatList li button.open{padding:10px;font-size:14px;color:#eee;min-width:0}
.sidebar-footer{border-top:1px solid #414141;padding:10px 2px 0}
.sidebar-logout{width:100%;border:0;background:transparent;text-align:left;padding:13px 12px;font-size:14px}
.sidebar-logout:hover:not(:disabled){background:#333}
.chat{min-width:0;min-height:0;background:#0d0d0d;flex:1;position:relative;display:flex;flex-direction:column}
.chat-head{min-height:35px;height:35px;flex:none;padding:3px 22px;border:0;background:transparent;justify-content:center}
.chat:not(.has-chat) .chat-head{display:none}
#chatLabel{font-size:13px;color:#acacac;max-width:calc(100% - 125px);text-align:center}
#closeTemporary{position:absolute;right:12px;top:0;border-radius:24px;padding:6px 12px;font-size:12px;background:#292929}
.viewport{background:#0d0d0d;min-height:0;flex:1;overflow:hidden;display:grid;place-items:center}
.viewport img{max-width:100%;max-height:100%;object-fit:contain}
.viewport p#emptyView{font-size:clamp(20px,3.5vw,30px);color:#e9e9e9;font-weight:400;padding:16px;text-align:center;margin:0}
.composer-wrap{flex:none;width:100%;padding:0 18px max(16px,env(safe-area-inset-bottom));background:#0d0d0d;position:relative;z-index:2}
.composer{position:relative;background:#282828;border:1px solid #414141;border-radius:34px;padding:7px 10px;display:block;width:min(820px,100%);margin:0 auto;box-shadow:none}
.composer-main{display:flex;align-items:center;gap:10px;min-height:44px;min-width:0}
.composer-main button{flex:none}
.composer-plus{font-size:29px;font-weight:300;line-height:1;background:transparent;border:0;padding:0;width:34px;height:38px;display:grid;place-items:center;color:#f0f0f0}
.composer-plus:hover:not(:disabled){background:#3e3e3e;border-radius:50%}
.composer textarea{min-width:0;flex:1;min-height:25px;max-height:115px;height:auto;padding:7px 0;line-height:26px;resize:none;background:transparent;border:0;font-size:15px}
.composer textarea:disabled{opacity:1;-webkit-text-fill-color:#aaa}
.composer textarea::placeholder{color:#a6a6a6}
.composer-mic{border:0;background:transparent;width:30px;height:34px;padding:2px;display:grid;place-items:center}
.composer-mic svg{width:21px;height:21px;fill:none;stroke:#f1f1f1;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.composer-mic:disabled{opacity:.38}
.composer-send{width:36px;min-width:36px;height:36px;border-radius:50%;padding:0;background:#eee;color:#161616;border:0;font-size:24px;display:grid;place-items:center;font-weight:600}
.composer-send:hover:not(:disabled){background:#d7d7d7}
.composer-send:disabled{background:#454545;color:#999;opacity:1}
.composer-menu{position:absolute;bottom:calc(100% + 13px);left:0;width:min(275px,calc(100vw - 40px));background:#303030;border:1px solid #494949;border-radius:17px;padding:8px;display:flex;flex-direction:column;gap:3px;box-shadow:0 8px 32px #0009}
.composer-menu button{text-align:left;border:0;background:transparent;padding:12px;border-radius:10px}
.composer-menu button:hover:not(:disabled){background:#414141}
#upload[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.setup-notice{position:absolute;z-index:20;left:50%;top:8px;transform:translateX(-50%);width:min(490px,calc(100% - 24px));margin:0;padding:14px 16px;max-height:min(260px,45dvh);overflow:auto;background:#2c2c2c;border:1px solid #555;border-radius:15px;box-shadow:0 12px 35px #0009}
.setup-notice strong{font-size:14px}
.setup-notice p{font-size:13px;line-height:1.45;margin:7px 0;color:#d1d1d1}
#setupInstructions,#setupActionError{display:none}
.setup-notice button{padding:7px 10px;margin-top:5px;font-size:12px;background:#414141}
#status{position:fixed;z-index:60;bottom:calc(102px + env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);min-height:0;max-width:min(530px,calc(100vw - 30px));text-align:center;background:#38332d;border:1px solid #695340;color:#f5dfbf;border-radius:12px;padding:10px 14px;pointer-events:none;overflow-wrap:anywhere}
#status:empty{display:none}
@media(max-width:700px){
  .mobile-appbar{height:62px;min-height:62px;padding:7px 13px;grid-template-columns:46px minmax(0,1fr) 46px}
  .icon-button{width:42px;height:42px}
  .mode-switch{width:178px;height:42px;padding:3px;font-size:14px}
  .mode-switch span{height:36px}
  .sidebar{width:min(285px,84vw);top:0;bottom:0;padding:19px 14px max(16px,env(safe-area-inset-bottom))}
  .chat-head{height:34px;min-height:34px}
  .viewport{min-height:0}
  .viewport p#emptyView{font-size:23px}
  .composer-wrap{padding:0 11px max(12px,env(safe-area-inset-bottom))}
  .composer{border-radius:32px;padding:6px 9px;width:100%}
  .composer-main{gap:6px}
  .composer-main textarea{font-size:14px}
  .setup-notice{top:0;max-height:34dvh}
  #status{bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media(max-width:360px){
  .mode-switch{width:154px}
  .composer-main{gap:3px}
  .composer-mic{width:25px}
}


/* Operator login: the original browser image is the entire interface. */
body:has(.admin.operator-mode:not(.hidden)){overflow:hidden}
.admin.operator-mode{width:100%;height:100dvh;max-height:100dvh;margin:0;padding:0;gap:0;overflow:hidden}
.admin.operator-mode>h1,.admin.operator-mode>#browserRoleHelp,
.admin.operator-mode>.chatgpt-auth,.admin.operator-mode>.admin-controls,
.admin.operator-mode>label,.admin.operator-mode>#adminText,
.admin.operator-mode>#adminType,.admin.operator-mode>.admin-key-controls,
.admin.operator-mode>.admin-project-discovery,.admin.operator-mode>.admin-security-note{display:none!important}
.admin.operator-mode .admin-frame{flex:1;min-height:0;height:auto;max-height:none;border:0;border-radius:0;margin:0}
.admin.operator-mode .admin-frame img{outline:none}
.admin.operator-mode .admin-frame img:focus-visible{outline:2px solid #7e9ac0;outline-offset:-2px}
.admin.operator-mode #adminLogout{position:fixed;top:7px;left:8px;z-index:5;opacity:.75;padding:6px 10px;font-size:12px}
/* On-screen keyboard bridge for the image-only CEF viewport.
   Invisible but focusable during a real touch gesture. */
.admin-frame{position:relative}
.remote-keyboard-proxy{position:absolute;left:8px;top:8px;width:2px;height:2px;
  min-width:0;min-height:0;padding:0;border:0;opacity:0;pointer-events:none;
  background:transparent;color:transparent;font-size:16px;z-index:1}
.remote-keyboard-proxy:focus{outline:0}
/* Operator's page remains a direct ChatGPT login viewport, not a technical dashboard. */
.admin.operator-mode .admin-readiness,
.admin.operator-mode .admin-project-discovery,
.admin.operator-mode .admin-security-note{display:none}
.admin.operator-mode .chatgpt-auth{padding:10px 14px}
.admin.operator-mode .chatgpt-auth p{font-size:12px;margin:3px 0 0}
.admin.operator-mode .admin-controls{gap:7px}
.admin.operator-mode #browserRoleHelp{margin:0;color:#bbb}
.admin.operator-mode .admin-frame{margin-top:0}