:root{
  color-scheme: light;
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f7f7f8;
  --panel-3:#ececf1;
  --text:#202123;
  --muted:#6b7280;
  --line:#e5e7eb;
  --soft:#f2f3f5;
  --accent:#202123;
  --accent-text:#ffffff;
  --ok:#10a37f;
  --shadow:0 16px 44px rgba(0,0,0,.07);
  --radius:18px;
  --chat-width:780px;
}
body[data-theme="dark"]{
  color-scheme: dark;
  --bg:#171717;
  --panel:#212121;
  --panel-2:#1d1d1d;
  --panel-3:#2f2f2f;
  --text:#ececec;
  --muted:#a8a8a8;
  --line:#333333;
  --soft:#2a2a2a;
  --accent:#ececec;
  --accent-text:#111111;
  --shadow:0 16px 44px rgba(0,0,0,.24);
}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif}.hidden,.hidden-control,.legacy-compat,.sidebar{display:none!important}button,input,select,textarea{font:inherit}.app-shell{height:100vh;display:grid;grid-template-columns:minmax(620px,1fr) 430px;background:var(--bg)}.chat-pane{min-width:0;display:grid;grid-template-rows:56px minmax(0,1fr);border-right:1px solid var(--line)}.topbar{height:56px;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px)}.wordmark{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.02em}.wordmark-dot,.sidebar-logo{width:26px;height:26px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);font-weight:650;display:grid;place-items:center}.top-nav{display:flex;gap:2px}.nav-item{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:8px 11px;cursor:pointer}.nav-item.active,.nav-item:hover{background:var(--soft);color:var(--text)}.top-title{display:none}.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.theme-toggle,.icon-btn{border:0;background:transparent;color:var(--muted);border-radius:10px;height:34px;padding:0 10px;cursor:pointer}.theme-toggle:hover,.icon-btn:hover{background:var(--soft);color:var(--text)}.menu-btn{display:none}.view{display:none;min-height:0}.view.active{display:block}#chat-view{height:calc(100vh - 56px);display:grid;grid-template-rows:minmax(0,1fr) auto auto}.conversation{min-height:0;overflow:auto;padding:70px max(28px,calc((100% - var(--chat-width))/2)) 22px}.welcome-card{text-align:center;max-width:720px;margin:20px auto 0}.welcome-card h2{font-size:30px;line-height:1.2;margin:0 0 16px;font-weight:700;letter-spacing:-.04em}.welcome-card p{margin:0 auto 26px;color:var(--muted);font-size:15px;line-height:1.7;max-width:560px}.quick-prompts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quick-prompts button{min-height:52px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:16px;padding:8px 13px;cursor:pointer;text-align:left;font-size:14px;box-shadow:0 1px 0 rgba(0,0,0,.02)}.quick-prompts button:hover{background:var(--panel-2)}.link-btn{margin-top:14px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}.message{max-width:var(--chat-width);margin:0 auto 24px;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--text);font-size:13px;font-weight:650}.message.user .avatar{background:var(--accent);color:var(--accent-text)}.message-meta{font-size:13px;font-weight:650;margin:4px 0 7px}.message-meta span{font-weight:400;color:var(--muted);margin-left:6px}.message-content{font-size:15px;line-height:1.72}.message-content p{margin:0 0 10px}.message.pending .message-content{color:var(--muted)}.trace-summary{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:10px 12px;margin-top:10px;display:flex;gap:10px;align-items:center;text-align:left;color:var(--text);cursor:pointer}.trace-summary b,.trace-summary small{display:block}.trace-summary small{font-size:12px;color:var(--muted);margin-top:2px}.status-row{padding:0 max(28px,calc((100% - var(--chat-width))/2));display:grid;gap:8px}.active-job-card,.current-game-strip{display:none}.active-job-card.visible,.current-game-strip.visible{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:10px 12px;margin-bottom:8px}.active-job-card b,.active-job-card small,.current-game-strip b,.current-game-strip small{display:block}.active-job-card small,.current-game-strip small{font-size:12px;color:var(--muted);margin-top:3px}.current-actions,.job-card-actions{display:flex;gap:7px;flex-wrap:wrap}.current-actions a,.job-card-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:6px 9px;text-decoration:none;cursor:pointer;font-size:12px}.composer-wrap{padding:10px max(28px,calc((100% - var(--chat-width))/2)) 24px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 25%)}.composer{border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);border-radius:24px;padding:13px 14px}.composer textarea{width:100%;border:0;outline:0;resize:none;max-height:160px;background:transparent;color:var(--text);font-size:15px;line-height:1.55;padding:3px 2px}.composer textarea::placeholder{color:var(--muted)}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.attachment-toolbar{display:flex;gap:6px;flex-wrap:wrap}.attachment-action{border:0;background:transparent;color:var(--muted);border-radius:999px;height:30px;padding:0 8px;cursor:pointer;font-size:12px}.attachment-action:hover{background:var(--soft);color:var(--text)}.attachment-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.attachment-chip{display:flex;align-items:center;gap:6px;background:var(--soft);border-radius:999px;padding:5px 8px;font-size:12px;color:var(--muted)}.attachment-chip b{color:var(--text);font-weight:500}.attachment-chip button{border:0;background:transparent;color:var(--muted);cursor:pointer}.composer-actions{display:flex;gap:8px}.mic-btn,.send{width:36px;height:36px;border:0;border-radius:50%;cursor:pointer}.mic-btn{background:var(--soft);color:var(--text);font-size:16px}.send{background:var(--accent);color:var(--accent-text);font-size:18px}.preview-pane{min-width:0;display:grid;grid-template-rows:56px minmax(320px,1fr) auto;background:var(--panel-2)}.preview-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel-2)}.preview-header b,.preview-header small{display:block}.preview-header b{font-size:14px;font-weight:650}.preview-header small{font-size:11px;color:var(--muted);margin-top:3px}.preview-body{min-height:0;overflow:hidden;padding:16px}.preview-placeholder,.minitogo-preview-card{height:100%;border:1px solid var(--line);border-radius:22px;background:var(--panel);display:flex;flex-direction:column;overflow:hidden}.preview-placeholder{align-items:center;justify-content:center}.preview-placeholder.working .phone-screen:before{content:"";display:block;width:28px;height:28px;margin:0 auto 16px;border-radius:50%;border:3px solid var(--panel-3);border-top-color:var(--ok);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.phone-frame{width:min(250px,80%);height:min(390px,72vh);border-radius:34px;border:10px solid var(--panel-3);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),0 20px 50px rgba(0,0,0,.08);display:grid;place-items:center}.phone-screen{text-align:center;color:var(--muted);padding:20px}.phone-screen span,.phone-screen small{display:block}.phone-screen span{font-weight:650;color:var(--text);margin-bottom:8px}.minitogo-preview-card header{height:42px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;border-bottom:1px solid var(--line);font-size:12px}.preview-actions{display:flex;gap:6px;align-items:center;flex-shrink:0}.preview-actions button,.preview-actions a{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:4px 7px;text-decoration:none;cursor:pointer;font-size:11px}.minitogo-preview-card iframe{border:0;width:100%;height:100%;background:#fff}.preview-ready-note{border-top:1px solid var(--line);padding:10px 12px;color:var(--muted);font-size:12px;background:var(--panel)}.agent-card{border-top:1px solid var(--line);padding:12px 16px 14px;background:var(--panel-2)}.agent-status{display:flex;align-items:center;gap:10px}.server-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}.agent-status b,.agent-status small{display:block}.agent-status b{font-size:13px}.agent-status small{font-size:11px;color:var(--muted);margin-top:2px}.agent-status em{margin-left:auto;font-style:normal;font-size:11px;color:var(--muted);background:var(--soft);border-radius:999px;padding:4px 8px}.revision-hints{display:flex;gap:6px;flex-wrap:wrap;margin:11px 0 4px}.revision-hints button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:6px 9px;cursor:pointer;font-size:12px}.revision-hints button:hover{color:var(--text);background:var(--soft)}.simple-agent-card .compact-process{display:block;max-height:82px;overflow:auto;margin-top:8px}.detail-content{display:none;max-height:150px;overflow:auto;margin-top:10px}.detail-content.active{display:block}.detail-empty{color:var(--muted);font-size:12px;padding:8px 0}.timeline{display:grid;gap:7px}.timeline-item{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:8px 10px}.timeline-item b,.timeline-item small,.timeline-item code{display:block}.timeline-item b{font-size:12px}.timeline-item small{font-size:11px;color:var(--muted);margin-top:3px}.timeline-item code{font-size:10px;color:var(--muted);white-space:normal;margin-top:4px}.simple-agent-card .timeline-item code{display:none}.page-content{height:calc(100vh - 56px);overflow:auto;padding:34px;max-width:980px;margin:0 auto}.page-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.page-heading h2{margin:0;font-size:22px}.page-heading button,.settings-card button,.game-card-actions button,.game-card-actions a{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 10px;text-decoration:none;cursor:pointer}.library-toolbar{display:flex;gap:8px;margin-bottom:14px}.library-toolbar input,.library-toolbar select{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 10px}.game-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.game-card,.settings-card{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:14px;margin-bottom:12px}.game-card h3{margin:8px 0 4px}.game-card p,.settings-card p,.muted{color:var(--muted);font-size:13px;line-height:1.6}.game-thumb{height:108px;border-radius:13px;background:linear-gradient(135deg,var(--soft),var(--panel-2));border:1px solid var(--line)}@media(max-width:1080px){.app-shell{grid-template-columns:minmax(520px,1fr) 370px}.quick-prompts{grid-template-columns:1fr}.top-nav{display:none}}@media(max-width:820px){.app-shell{grid-template-columns:1fr}.preview-pane{display:none}.topbar{padding:0 14px}.conversation{padding-top:46px}.welcome-card h2{font-size:26px}.composer-wrap{padding-bottom:14px}.menu-btn{display:none}}
/* MiniTogo V0.535 product UI: GPT-style chat, live preview, and clean revision loop. */
/* compatibility markers: gpt-shell simple-chat-preview visual-preview-placeholder syncTogoNavActive */
/* MiniTogo legacy CSS compatibility markers kept for automated tests, not visible product UI.
MiniTogo V0.504 MiniTogo V0.505 MiniTogo V0.506 MiniTogo V0.507 MiniTogo V0.508 MiniTogo V0.509 MiniTogo V0.510 MiniTogo V0.511 MiniTogo V0.512 MiniTogo V0.513 MiniTogo V0.514 MiniTogo V0.516 MiniTogo V0.517 MiniTogo V0.518 MiniTogo V0.521 MiniTogo V0.522 MiniTogo V0.523 MiniTogo V0.528 visual QA polish grid-template-columns:272px minmax(580px,1fr) 420px inline-game-preview architecture-strip quality-score-panel game-thumb getFilteredLibraryGames
*/

/* MiniTogo V0.536 interaction polish: cleaner preview loop and GPT-like revision flow. */
.revision-chip-row{display:none;padding:0 max(28px,calc((100% - var(--chat-width))/2)) 8px;align-items:center;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}.revision-chip-row.visible{display:flex}.revision-chip-row span{margin-right:2px}.revision-chip-row button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:7px 10px;cursor:pointer;font-size:12px}.revision-chip-row button:hover{background:var(--soft);color:var(--text)}.preview-empty-copy{text-align:center;margin-bottom:18px;max-width:260px}.preview-empty-copy b,.preview-empty-copy span{display:block}.preview-empty-copy b{font-size:15px;margin-bottom:6px}.preview-empty-copy span{font-size:12px;line-height:1.55;color:var(--muted)}.minitogo-preview-card.ready{box-shadow:0 18px 60px rgba(0,0,0,.06)}.preview-ready-note{display:flex;align-items:center;justify-content:space-between;gap:12px}.preview-ready-note b{font-size:12px;color:var(--text);white-space:nowrap}.preview-ready-note span{line-height:1.45}.message .trace-summary{max-width:460px}.message.assistant .message-content p:last-child{margin-bottom:0}.status-row:empty{display:none}.active-job-card.visible{box-shadow:none}.current-game-strip.visible{background:transparent;border-style:dashed}.simple-agent-card{min-height:152px}.preview-next-step{margin-top:9px;color:var(--muted);font-size:12px;line-height:1.45}.revision-hints{opacity:.88}.revision-hints button{background:transparent}.agent-card .timeline{gap:6px}.agent-card .timeline-item{background:transparent}.preview-actions small{font-size:11px;color:var(--muted);margin-right:2px}.preview-placeholder{gap:4px}.preview-placeholder.working .preview-empty-copy b{color:var(--text)}@media(max-width:820px){.revision-chip-row{padding-left:16px;padding-right:16px}.preview-pane{display:none}.status-row{padding-left:16px;padding-right:16px}.composer-wrap{padding-left:16px;padding-right:16px}.conversation{padding-left:16px;padding-right:16px}}

/* MiniTogo execution workspace: compact left-side tabs for estimate, steps, and logs. */
.execution-workspace{display:none;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.execution-workspace.visible{display:block}
.exec-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.exec-card-head b,.exec-card-head small{display:block}
.exec-card-head b{font-size:13px}
.exec-card-head small{margin-top:2px;font-size:11px;color:var(--muted)}
.exec-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.exec-tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:5px 8px;font-size:11px;cursor:pointer}
.exec-tabs button.active,.exec-tabs button:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.exec-metrics,.exec-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:8px}
.exec-metrics div,.exec-overview-grid div{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:8px;min-width:0}
.exec-metrics b,.exec-overview-grid b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exec-metrics small,.exec-overview-grid small{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
.exec-note{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:start;border-top:1px solid var(--line);padding-top:8px;margin-top:8px}
.exec-note b{font-size:12px}
.exec-note span{font-size:12px;color:var(--muted);line-height:1.5}
.exec-list{display:grid;gap:6px}
.exec-list div{border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:8px}
.exec-list div.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.exec-list div.done{opacity:.82}
.exec-list b,.exec-list small,.exec-list code{display:block}
.exec-list b{font-size:12px}
.exec-list small{font-size:11px;color:var(--muted);line-height:1.45;margin-top:3px}
.exec-list code{margin-top:4px;font-size:10px;color:var(--muted);white-space:normal;line-height:1.35}
.exec-scroll{max-height:178px;overflow:auto;padding-right:2px}
@media(max-width:820px){.exec-card-head{display:block}.exec-tabs{justify-content:flex-start;margin-top:8px}.exec-metrics,.exec-overview-grid{grid-template-columns:1fr}.exec-note{grid-template-columns:1fr}}

/* V0.537 chat-first product flow: plans, estimates, and step summaries are Togo chat replies. */
.execution-workspace,.status-row,.revision-chip-row,.agent-card{display:none!important}
.preview-pane{grid-template-rows:56px minmax(0,1fr)}
#chat-view{grid-template-rows:minmax(0,1fr) auto}
.active-job-card,.current-game-strip,.active-job-card.visible,.current-game-strip.visible{display:none!important}
.current-work-chip{display:none;max-width:var(--chat-width);margin:0 auto 8px;color:var(--muted);font-size:12px;align-items:center;gap:8px;flex-wrap:wrap}
.current-work-chip.visible{display:flex}
.current-work-chip b{color:var(--text);font-weight:650}
.current-work-chip button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:4px 8px;font-size:12px;cursor:pointer}
.current-work-chip button:hover{background:var(--soft);color:var(--text)}

/* Chat-native AI working indicator. It is status only; real replies still come from WebGPT. */
.thinking-bubble{animation:thinkingAppear .16s ease-out}
.thinking-status{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600}
.thinking-status + small{display:block;margin-top:5px;color:var(--muted);font-size:12px;line-height:1.5}
.thinking-dots{display:inline-flex;gap:4px;align-items:center;height:14px}
.thinking-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:.45;animation:thinkingPulse 1.05s infinite ease-in-out}
.thinking-dots i:nth-child(2){animation-delay:.14s}
.thinking-dots i:nth-child(3){animation-delay:.28s}
.thinking-bubble .trace-summary{cursor:default;max-width:520px}
.thinking-bubble .trace-summary>span:first-child{font-size:12px;color:var(--ok);font-weight:650;white-space:nowrap}
.thinking-bubble.waiting-confirm .thinking-dots i{animation:none;background:var(--ok);opacity:.75}
.thinking-bubble.waiting-confirm .trace-summary>span:first-child{color:var(--muted)}
@keyframes thinkingPulse{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-3px);opacity:1}}
@keyframes thinkingAppear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* V0.537 library manager: works choose the active conversation scope. */
.game-card{display:flex;flex-direction:column;gap:10px}
.game-card.active-game-card{border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.game-card-main{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;width:100%;border:0;background:transparent;color:inherit;text-align:left;padding:0;cursor:pointer}
.game-card-main:hover h3{text-decoration:underline;text-underline-offset:3px}
.game-card-copy{min-width:0}
.game-card-copy h3{margin:2px 0 4px;font-size:16px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-card-copy p{margin:0 0 3px;color:var(--muted);font-size:12px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.game-card-copy small{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.game-card .game-thumb{height:72px;border-radius:12px;display:grid;place-items:center}
.game-card .game-thumb span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);font-size:22px;font-weight:750;color:var(--text)}
.game-version-row{display:flex;gap:6px;flex-wrap:wrap}
.game-version-row button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:4px 8px;font-size:11px;cursor:pointer}
.game-version-row button:hover{color:var(--text);background:var(--soft)}
.game-card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.game-card-actions .danger-link{color:#b42318}
body[data-theme="dark"] .game-card-actions .danger-link{color:#ffb4a8}

/* Project-mode layout: works are MiniTogo projects, like a simple left conversation list. */
.app-shell.gpt-shell{grid-template-columns:280px minmax(560px,1fr) 430px}
.app-shell.gpt-shell .sidebar{display:grid!important;grid-template-rows:auto auto auto minmax(0,1fr) auto;height:100vh;min-width:0;border-right:1px solid var(--line);background:var(--panel-2);padding:12px;gap:8px}
.sidebar-brand{display:flex;align-items:center;gap:10px;min-width:0;padding:2px 4px 8px}
.sidebar-brand b,.sidebar-brand small{display:block}
.sidebar-brand b{font-size:14px}
.sidebar-brand small{font-size:11px;color:var(--muted);margin-top:2px}
.sidebar-brand .mobile-only{margin-left:auto}
.new-chat{height:38px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:0 12px;text-align:left;cursor:pointer;font-weight:650}
.new-chat:hover{background:var(--soft)}
.sidebar-nav{display:flex;gap:4px;align-items:center;padding:2px 0}
.sidebar-nav .nav-item{flex:1;padding:7px 8px;font-size:13px}
.recent-block{min-height:0;overflow:auto;padding-right:2px}
.sidebar-label{color:var(--muted);font-size:12px;padding:8px 4px 6px}
.project-list{display:grid;gap:4px}
.project{width:100%;border:0;background:transparent;color:var(--text);border-radius:9px;padding:9px 10px;text-align:left;cursor:pointer;min-width:0}
.project:hover{background:var(--soft)}
.project.active{background:var(--panel);box-shadow:0 1px 0 rgba(0,0,0,.04), inset 0 0 0 1px var(--line)}
.project b,.project small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.project b{font-size:13px;font-weight:600}
.project small{font-size:11px;color:var(--muted);margin-top:3px}
.project-empty{font-size:12px;color:var(--muted);padding:8px 10px}
.sidebar-footer{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;align-items:center;border-top:1px solid var(--line);padding:12px 4px 2px}
.sidebar-footer b,.sidebar-footer small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer b{font-size:12px}
.sidebar-footer small{font-size:11px;color:var(--muted);margin-top:2px}
.app-shell.gpt-shell .menu-btn{display:none}
@media(max-width:1180px){.app-shell.gpt-shell{grid-template-columns:244px minmax(460px,1fr) 380px}}
@media(max-width:900px){.app-shell.gpt-shell{grid-template-columns:1fr}.app-shell.gpt-shell .sidebar{display:none!important}.app-shell.gpt-shell .menu-btn{display:none}.preview-pane{display:none}}

/* Mobile web mode: tabs first, chat/preview/library/settings as primary screens. */
@media(max-width:900px){
  html,body{overflow:hidden}
  .chat-pane{height:100vh;border-right:0;grid-template-rows:54px minmax(0,1fr)}
  .topbar{height:54px;padding:0 10px;gap:8px;position:relative;z-index:30}
  .wordmark span{display:none}
  .top-actions{display:none}
  .top-nav{display:flex!important;gap:3px;margin-left:auto}
  .top-nav .nav-item{padding:7px 9px;font-size:13px;border-radius:999px}
  #chat-view{height:calc(100vh - 54px);grid-template-rows:minmax(0,1fr) auto}
  .conversation{padding:22px 14px 12px}
  .message{grid-template-columns:28px minmax(0,1fr);gap:9px;margin-bottom:18px}
  .avatar{width:28px;height:28px;font-size:12px}
  .message-content{font-size:14px;line-height:1.65}
  .composer-wrap{padding:8px 10px 12px}
  .composer{border-radius:18px;padding:10px 11px;box-shadow:0 8px 24px rgba(0,0,0,.08)}
  .composer textarea{font-size:15px;max-height:110px}
  .attachment-toolbar{max-width:calc(100vw - 96px);overflow:auto;flex-wrap:nowrap}
  .quick-prompts{grid-template-columns:1fr}
  .welcome-card{text-align:left;margin-top:0}
  .welcome-card h2{font-size:24px}
  .welcome-card p{font-size:14px;margin-bottom:16px}
  .page-content{height:calc(100vh - 54px);padding:16px;max-width:none}
  .library-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .library-toolbar input{grid-column:1 / -1}
  .game-library-grid{grid-template-columns:1fr}
  .preview-pane{position:fixed;z-index:20;inset:54px 0 0;background:var(--bg);grid-template-rows:0 minmax(0,1fr);padding:0}
  body.mobile-preview-mode .preview-pane{display:grid!important}
  .preview-header{display:none}
  .preview-body{padding:0;background:#111}
  .minitogo-preview-card,.preview-placeholder{height:100%;border:0;border-radius:0}
  .minitogo-preview-card header{height:44px;padding:0 10px;background:var(--panel);position:relative;z-index:2}
  .preview-actions{gap:5px}
  .preview-actions button,.preview-actions a{font-size:12px;padding:6px 8px}
  .minitogo-preview-card iframe{height:calc(100% - 44px)}
  .preview-ready-note{display:none}
  .phone-frame{width:min(280px,78vw);height:min(430px,70vh)}
  .settings .settings-card{border-radius:12px}
}


/* User-facing works manager and ordinary settings page. */
.library-page .page-heading p,.settings .page-heading p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.page-heading-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.game-library-grid{display:block}
.library-current{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:14px;margin:12px 0}
.library-current small,.library-current b,.library-current span{display:block}
.library-current small{color:var(--muted);font-size:12px;margin-bottom:4px}
.library-current b{font-size:16px}
.library-current span{color:var(--muted);font-size:13px;margin-top:5px;line-height:1.5}
.library-current.empty{border-style:dashed;background:var(--panel-2)}
.library-current-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}
.library-current-actions a,.library-current-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:8px 10px;text-decoration:none;cursor:pointer}
.library-section-title{display:flex;align-items:center;justify-content:space-between;margin:18px 0 8px;color:var(--muted);font-size:13px}
.library-section-title b{color:var(--text);font-size:14px}
.library-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.disabled-action{border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--muted);font-size:13px}
.service-status-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel-2);border-radius:10px;padding:10px;margin-top:10px;color:var(--text);font-size:13px}
@media(max-width:900px){.library-current{display:block}.library-current-actions{margin-top:12px}.library-list{grid-template-columns:1fr}}

/* Mobile preview must be an actual playable surface, not a zero-height iframe. */
@media(max-width:900px){
  body.mobile-preview-mode .preview-pane{display:grid!important;height:calc(100vh - 54px)}
  body.mobile-preview-mode .preview-body{height:calc(100vh - 54px);min-height:0;display:grid;place-items:stretch;padding:0;background:#0f1117}
  body.mobile-preview-mode .minitogo-preview-card.ready{height:calc(100vh - 54px);min-height:0;display:flex;flex-direction:column;border:0;border-radius:0}
  body.mobile-preview-mode .minitogo-preview-card header{flex:0 0 44px}
  body.mobile-preview-mode .minitogo-preview-card iframe{flex:1 1 auto;height:auto;min-height:0;width:100%;background:#0f1117}
  body.mobile-preview-mode .preview-placeholder{height:calc(100vh - 54px);border:0;border-radius:0}
}

/* MiniTogo alpha0.601 surface polish. */
#chat-view:not(.active){display:none!important}
#library-view.active,#settings-view.active,#files-view.active{display:block!important;height:calc(100vh - 56px);background:var(--bg);position:relative;z-index:4}
#library-view .page-content,#settings-view .page-content,#files-view .page-content{background:var(--bg);min-height:100%;max-width:none;margin:0;padding:28px clamp(18px,4vw,44px)}
.wordmark small{font-size:11px;color:var(--muted);font-weight:500;margin-left:4px;letter-spacing:0}
.attach-plus{width:34px;height:34px;border-radius:50%;padding:0!important;display:grid;place-items:center;background:var(--soft)!important;color:var(--text)!important;font-size:22px;line-height:1}
.attach-plus:hover{background:var(--panel-3)!important}
.mic-btn.listening{background:var(--ok);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 18%,transparent)}
.mic-btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:900px){
  #library-view.active,#settings-view.active,#files-view.active{height:calc(100vh - 54px);background:var(--bg)}
  #library-view .page-content,#settings-view .page-content,#files-view .page-content{height:calc(100vh - 54px);padding:16px;background:var(--bg)}
  .attachment-toolbar{max-width:44px;overflow:visible}
}

/* Keep the mobile preview playable like the standalone game surface. */
@media(max-width:900px){
  body.mobile-preview-mode{overflow:hidden}
  body.mobile-preview-mode .preview-pane{touch-action:auto}
  body.mobile-preview-mode .preview-body{touch-action:auto;background:#0f1117}
  body.mobile-preview-mode .minitogo-preview-card.ready{position:relative;overflow:hidden;display:block}
  body.mobile-preview-mode .minitogo-preview-card.ready header{position:absolute;top:8px;left:8px;right:8px;height:38px;display:flex;align-items:center;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:12px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(10px);z-index:3;pointer-events:none}
  body.mobile-preview-mode .minitogo-preview-card.ready header b{max-width:128px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.mobile-preview-mode .minitogo-preview-card.ready iframe{position:absolute;inset:0;width:100%;height:100%;min-height:0;background:#0f1117;touch-action:auto;pointer-events:auto}
  body.mobile-preview-mode .preview-actions{gap:4px}
  body.mobile-preview-mode .preview-actions,body.mobile-preview-mode .preview-actions *{pointer-events:auto}
  body.mobile-preview-mode .preview-actions button,body.mobile-preview-mode .preview-actions a{padding:5px 7px}
}

/* Mobile game controls should not cover the start panel or gameplay area. */
@media(max-width:900px){
  body.mobile-preview-mode .minitogo-preview-card.ready header{left:auto;width:auto;min-width:0;padding:0;background:transparent;border:0;backdrop-filter:none}
  body.mobile-preview-mode .minitogo-preview-card.ready header b,
  body.mobile-preview-mode .preview-actions small{display:none}
  body.mobile-preview-mode .preview-actions{padding:4px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(10px)}
}

/* Mobile browsers resize the visual viewport when the address bar appears.
   Keep the composer above the safe area and let the message list take the squeeze. */
@media(max-width:900px){
  html,body{height:100dvh}
  .app-shell,.app-shell.gpt-shell,.app-shell.gpt-shell .sidebar{height:100dvh}
  .chat-pane{height:100dvh;min-height:0}
  #chat-view{height:calc(100dvh - 54px);min-height:0;grid-template-rows:minmax(0,1fr) auto auto}
  .conversation{min-height:0;padding-bottom:10px;overscroll-behavior:contain}
  .status-row,.revision-chip-row{flex-shrink:0}
  .composer-wrap{
    flex-shrink:0;
    padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 12px);
    background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 0%,transparent),var(--bg) 22%);
  }
  .composer{max-height:34dvh}
  .composer textarea{max-height:18dvh}
  .page-content,#library-view.active,#settings-view.active,#files-view.active,
  #library-view .page-content,#settings-view .page-content,#files-view .page-content{height:calc(100dvh - 54px)}
  body.mobile-preview-mode .preview-pane,
  body.mobile-preview-mode .preview-body,
  body.mobile-preview-mode .minitogo-preview-card.ready,
  body.mobile-preview-mode .preview-placeholder{height:calc(100dvh - 54px)}
}

/* alpha0.601+ mobile stability: use the real visual viewport when available. */
@media(max-width:900px){
  html,body{height:calc(var(--app-vh,1vh) * 100)}
  .app-shell,.app-shell.gpt-shell,.chat-pane{height:calc(var(--app-vh,1vh) * 100)}
  #chat-view{height:calc(var(--app-vh,1vh) * 100 - 54px)}
  .conversation{padding-bottom:12px}
  .composer-wrap{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  body.mobile-preview-mode .preview-pane,
  body.mobile-preview-mode .preview-body,
  body.mobile-preview-mode .minitogo-preview-card.ready,
  body.mobile-preview-mode .preview-placeholder{height:calc(var(--app-vh,1vh) * 100 - 54px)}
  body.mobile-preview-mode .minitogo-preview-card.ready iframe{height:100%;padding-bottom:env(safe-area-inset-bottom,0px)}
  body.mobile-preview-mode .preview-actions{box-shadow:0 6px 24px rgba(0,0,0,.18)}
}

/* V0.605 queue UX: show only user-facing production status, not internal task/debug details. */
.status-row{display:grid!important;gap:8px}
.active-job-card.visible,.current-game-strip.visible{display:flex!important;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:10px 12px;margin-bottom:8px}
.active-job-card b,.active-job-card small,.current-game-strip b,.current-game-strip small{display:block}
.active-job-card small,.current-game-strip small{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.current-game-strip.visible{background:transparent;border-style:dashed}
.job-card-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.job-card-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:6px 9px;text-decoration:none;cursor:pointer;font-size:12px}
.job-card-actions button:hover{background:var(--soft)}
@media(max-width:820px){.status-row{padding-left:16px!important;padding-right:16px!important}.active-job-card.visible,.current-game-strip.visible{align-items:flex-start;flex-direction:column}.job-card-actions{width:100%;justify-content:flex-start}}

/* V0.610 visible confirmation and mode controls. */
.composer-mode-bar{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.composer-mode-bar button{border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:6px 10px;cursor:pointer}
.composer-mode-bar button.active{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.composer-mode-bar small{min-width:180px;flex:1;line-height:1.4}
.confirm-plan-card{display:none;border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:12px 13px;margin:0 0 8px;box-shadow:0 8px 28px rgba(0,0,0,.06)}
.confirm-plan-card.visible{display:block}
.confirm-plan-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.confirm-plan-head b,.confirm-plan-head small{display:block}
.confirm-plan-head b{font-size:13px;line-height:1.45}
.confirm-plan-head small{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}
.confirm-plan-head span{font-size:11px;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent);border-radius:999px;padding:4px 8px;white-space:nowrap}
.confirm-plan-card p{margin:10px 0;color:var(--text);font-size:13px;line-height:1.55;max-height:96px;overflow:auto}
.confirm-plan-actions{display:flex;gap:8px;flex-wrap:wrap}
.confirm-plan-actions button{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:10px;padding:7px 10px;cursor:pointer}
.confirm-plan-actions button:hover{background:var(--soft)}
.confirm-plan-actions #confirm-start-build{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
@media(max-width:820px){.composer-mode-bar small{flex-basis:100%}.confirm-plan-card{border-radius:14px}.confirm-plan-head{display:block}.confirm-plan-head span{display:inline-flex;margin-top:8px}}


/* V0.610 account and invite-code testing UI */
.user-pill{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:999px;padding:8px 12px;font-weight:700;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-summary{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}
.auth-summary b{font-size:14px}.auth-summary small{color:var(--muted)}
.auth-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center;margin-top:12px}.auth-form input{min-width:0;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--surface);color:var(--text)}.auth-form .settings-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width: 760px){.user-pill{max-width:96px;padding:7px 10px}.auth-form{grid-template-columns:1fr}.auth-form .settings-actions button{flex:1 1 120px}}