/* Final desktop geometry, after the historical generated stylesheets. */
#chatPage.chat-main.zordex-active .message.assistant.error {
  color: #fca5a5 !important;
  border-left: 3px solid #ef4444 !important;
  background: #291719 !important;
}
.app-shell, .app-main, #chatPage.chat-main, .conversation-stage { min-width: 0; }
#chatPage.chat-main.zordex-active {
  container: zordex-main / inline-size;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  box-sizing: border-box;
}
#chatPage.chat-main.zordex-active > .chat-header { grid-area: 1 / 1 !important; }
#chatPage.chat-main.zordex-active > .conversation-stage {
  grid-area: 2 / 1 !important;
  grid-template-columns: minmax(0, 1fr) 8px minmax(0, clamp(40%, var(--zordex-workbench-width, 55%), 68%)) !important;
  width: 100% !important;
  min-width: 0 !important;
}
#chatPage.chat-main.zordex-active > .conversation-stage:has(.zordex-start-state) {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}
#chatPage.chat-main.zordex-active > .conversation-stage:has(.zordex-start-state) > .message-list {
  grid-area: 1 / 1 !important;
  width: 100% !important;
}
#chatPage.chat-main.zordex-active > .conversation-stage:has(.zordex-start-state) > #zordexContextPanel,
#chatPage.chat-main.zordex-active > .conversation-stage:has(.zordex-start-state) > .zordex-v5-outer-resizer { display: none !important; }
#chatPage.chat-main.zordex-active > .s6-coding-tools {
  grid-area: 3 / 1 !important;
  justify-self: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  width: min(960px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  max-height: none !important;
  margin: 8px auto 6px !important;
  padding: 0 !important;
  gap: 6px !important;
  overflow: visible !important;
}
#chatPage.chat-main.zordex-active > .s6-coding-tools button { min-width: 0; font-size: 12px; }
#chatPage.chat-main.zordex-active > .composer {
  grid-area: 4 / 1 !important;
  justify-self: center !important;
  width: min(960px, calc(100% - 32px)) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 auto 12px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  max-height: none !important;
  transform: none !important;
}
#chatPage.chat-main.zordex-active .composer textarea { width: 100%; min-width: 0; box-sizing: border-box; }
#chatPage.chat-main.zordex-active .composer-tools { flex-wrap: wrap !important; min-width: 0; }
#chatPage.chat-main.zordex-active .message-list { min-width: 0 !important; max-width: 100%; overflow-x: hidden; padding: 24px 20px !important; }
#chatPage.chat-main.zordex-active .message { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#chatPage.chat-main.zordex-active #zordexContextPanel { min-width: 0 !important; grid-column: 3 !important; container: workbench / inline-size; }
#chatPage.chat-main.zordex-active .zordex-v5-outer-resizer { grid-column: 2 !important; }
#chatPage.chat-main.zordex-active .conversation-stage.zordex-v71-workbench-visible > #zordexContextPanel { display: block !important; }
#chatPage.chat-main.zordex-active .zordex-v5-body { grid-template-columns: minmax(90px, 25%) minmax(0, 1fr) !important; }
#chatPage.chat-main.zordex-active .zordex-v5-stage { grid-template-columns: minmax(0, 1fr) 7px minmax(0, 1fr) !important; }
#chatPage.chat-main.zordex-active .zordex-v5-build[data-view="code"] .zordex-v5-stage,
#chatPage.chat-main.zordex-active .zordex-v5-build[data-view="preview"] .zordex-v5-stage { grid-template-columns: minmax(0, 1fr) !important; }
#chatPage.chat-main.zordex-active .zordex-v5-nav { flex-wrap: wrap; gap: 6px; }
#chatPage.chat-main.zordex-active .zordex-v5-nav > div { min-width: 0; flex-wrap: wrap !important; }
@container workbench (max-width: 800px) {
  #chatPage.chat-main.zordex-active .zordex-v5-build[data-view="split"] .zordex-v5-stage { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  #chatPage.chat-main.zordex-active .zordex-v5-build[data-view="split"] .zordex-v5-inner-resizer { display: none !important; }
  #chatPage.chat-main.zordex-active .zordex-v5-build[data-view="split"] .zordex-v5-code { grid-area: 1 / 1 !important; width: 100% !important; height: 100% !important; }
  #chatPage.chat-main.zordex-active .zordex-v5-build[data-view="split"] .zordex-v5-preview { grid-area: 2 / 1 !important; width: 100% !important; height: 100% !important; }
}
@container zordex-main (max-width: 760px) {
  #chatPage.chat-main.zordex-active > .conversation-stage { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important; }
  #chatPage.chat-main.zordex-active .zordex-v5-outer-resizer { display: none !important; }
  #chatPage.chat-main.zordex-active #zordexContextPanel { grid-area: 2 / 1 !important; }
}
@media (min-width: 1101px) {
  body:not(.zordex-app-mode) .app-shell { grid-template-columns: 240px minmax(0, 1fr) !important; }
  body:not(.zordex-app-mode) .sidebar { display: flex; min-width: 0; }
  #chatPage.chat-main:not(.zordex-active) { grid-template-columns: minmax(0, 1fr) 190px !important; grid-template-rows: minmax(0, 1fr) auto !important; }
  #chatPage.chat-main:not(.zordex-active) > .conversation-stage { grid-area: 1 / 1 !important; }
  #chatPage.chat-main:not(.zordex-active) > .composer { grid-area: 2 / 1 !important; min-width: 0; }
  #chatPage.chat-main:not(.zordex-active) > .s6-zorqelia-tools {
    grid-area: 1 / 2 / 3 / 3 !important;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    align-self: stretch !important; justify-self: stretch !important; align-items: stretch !important; justify-content: flex-start !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    height: auto !important; min-height: 0 !important; margin: 0 !important;
    padding: 64px 12px 16px !important; gap: 8px !important; overflow-y: auto !important;
    border-left: 1px solid var(--border) !important; box-sizing: border-box;
  }
  #chatPage.chat-main:not(.zordex-active) > .s6-zorqelia-tools::before { content: "AI TOOLS" !important; display: block !important; font-size: 11px; color: #9ba5ad; margin-bottom: 6px; }
  #chatPage.chat-main:not(.zordex-active) > .s6-zorqelia-tools button { flex: 0 0 auto !important; width: 100% !important; min-height: 36px !important; white-space: normal !important; text-align: left; box-sizing: border-box; }
}


/* ZORDEX_PREVIEW_PANE_CONTROLS_V157
   A preview-only stage MUST have exactly one real grid child. The preceding
   generic body rule has higher specificity than v150 and kept a 25% file
   column alive. The generated resizer could also claim an implicit grid cell.
   Keep game rendering inside the sandboxed iframe without scaling it to 150px. */
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-body {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  width:100% !important;
  min-width:0 !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-files {
  display:none !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-editor {
  display:grid !important;
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-stage {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
  width:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-inner-resizer,
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-code {
  display:none !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-preview {
  display:grid !important;
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] #zordexV5PreviewFrame {
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  max-width:none !important;
  transform:none !important;
  transform-origin:top left !important;
}
/* Code-only has exactly one content pane too. */
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="code"] .zordex-v5-stage {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="code"] .zordex-v5-inner-resizer,
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="code"] .zordex-v5-preview {
  display:none !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="code"] .zordex-v5-code {
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
}
/* Clicking Normal/Expand switches between chat + workbench and a genuine
   workbench-focused layout, regardless of viewport width. */
#chatPage.chat-main.zordex-active.zordex-workbench-expanded > .conversation-stage.zordex-v71-workbench-visible {
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:minmax(0,1fr) !important;
}
#chatPage.chat-main.zordex-active.zordex-workbench-expanded > .conversation-stage > .message-list,
#chatPage.chat-main.zordex-active.zordex-workbench-expanded > .conversation-stage > .zordex-v5-outer-resizer {
  display:none !important;
}
#chatPage.chat-main.zordex-active.zordex-workbench-expanded > .conversation-stage.zordex-v71-workbench-visible > #zordexContextPanel {
  display:flex !important;
  grid-area:1 / 1 !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}
/* Build/Project must expose the selected panel, not just recolor the tab. */
#chatPage.chat-main.zordex-active #zordexContextPanel.zordex-v5-project > .zordex-v5-build {
  display:none !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel.zordex-v5-project > .zordex-v5-legacy {
  display:block !important;
  width:100%;
  min-width:0;
  box-sizing:border-box;
}
#chatPage.chat-main.zordex-active #zordexContextPanel.zordex-v5-project > .zordex-context-actions {
  display:flex !important;
  flex-wrap:wrap;
  gap:8px;
}
#chatPage.chat-main.zordex-active #zordexContextPanel.zordex-v5-project {
  overflow-y:auto !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel:not(.zordex-v5-project) > .zordex-v5-legacy {
  display:none !important;
}
/* Buttons stay visible and their pressed state matches the active layout. */
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-editor > header nav {
  display:flex !important;
  width:100% !important;
  max-width:100% !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-editor > header nav button {
  flex:1 1 0 !important;
  min-width:0 !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
}


/* ZORDEX_FULLSCREEN_PLAYABLE_PREVIEW_V158
   Use Preview space for the game, not the build logs and tabs. The rest
   of the workspace, including Files/Progress, remains accessible in Build. */
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-progress,
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-tabs {
  display:none !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-editor > header {
  min-height:42px !important;
  padding:4px 8px !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-build[data-view="preview"] .zordex-v5-editor > header nav {
  order:0 !important;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-v5-preview > header {
  display:flex !important;
  gap:8px;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-preview-open-v158 {
  appearance:none;
  flex:none;
  min-width:0;
  padding:3px 8px;
  margin-left:auto;
  border:1px solid #77cdb6;
  border-radius:5px;
  background:#29463d;
  color:#edfff8;
  font:600 12px/1.35 system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
#chatPage.chat-main.zordex-active #zordexContextPanel .zordex-preview-open-v158:focus-visible,
.zordex-preview-fullscreen-v158 button:focus-visible {
  outline:2px solid #91eed1;
  outline-offset:2px;
}
.zordex-preview-fullscreen-v158 {
  position:fixed;
  box-sizing:border-box;
  inset:0;
  margin:auto;
  padding:0;
  width:min(1480px,calc(100vw - 20px));
  max-width:calc(100vw - 20px);
  height:calc(100dvh - 20px);
  max-height:calc(100dvh - 20px);
  overflow:hidden;
  border:1px solid #526e64;
  border-radius:12px;
  background:#101719;
  color:#e8f5f1;
  box-shadow:0 24px 100px #000c;
}
.zordex-preview-fullscreen-v158[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
.zordex-preview-fullscreen-v158::backdrop {
  background:rgba(2,8,12,.88);
  backdrop-filter:blur(3px);
}
.zordex-preview-fullscreen-v158 > header {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 14px;
  border-bottom:1px solid #354b46;
  background:#1b2927;
}
.zordex-preview-fullscreen-v158 > header > strong {
  font:700 14px/1.35 system-ui,sans-serif;
  letter-spacing:.01em;
}
.zordex-preview-fullscreen-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
}
.zordex-preview-fullscreen-v158 button {
  appearance:none;
  min-height:34px;
  padding:5px 10px;
  border-radius:6px;
  border:1px solid #52675f;
  background:#243a35;
  color:#e8f5f1;
  font:600 12px/1.25 system-ui,sans-serif;
  cursor:pointer;
}
.zordex-preview-fullscreen-v158 button:hover { background:#36564a; }
.zordex-preview-fullscreen-v158 .zordex-preview-close-v158 {
  background:#493032;
  border-color:#966366;
}
.zordex-preview-fullscreen-controls output {
  min-width:43px;
  text-align:center;
  color:#d5ebdd;
  font:700 12px system-ui,sans-serif;
}
.zordex-preview-fullscreen-viewport-v158 {
  display:block;
  position:relative;
  width:100%;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  background:#080a0c;
}
.zordex-preview-fullscreen-viewport-v158 > iframe {
  display:block;
  position:absolute;
  top:0;
  left:0;
  border:0;
  margin:0;
  padding:0;
  background:#101010;
  max-width:none;
}
.zordex-preview-fullscreen-v158 > footer {
  padding:6px 12px;
  font:11px/1.4 system-ui,sans-serif;
  color:#a9c0b9;
  background:#192522;
}
@media(max-width:680px) {
  .zordex-preview-fullscreen-v158 > header{padding:6px;gap:5px}
  .zordex-preview-fullscreen-v158 > header > strong{font-size:12px}
  .zordex-preview-fullscreen-v158 button{min-height:29px;padding:4px 7px}
  .zordex-preview-fullscreen-v158 > footer{font-size:10px}
}

/* ZORDEX_PROJECTS_LAYOUT_V1
   Project navigation must keep the coding viewport and its tools arranged
   horizontally. These rules only apply to installed Zordex, not Zorqelia. */
body.zordex-app-mode #chatPage.chat-main.zordex-active > .s6-coding-tools {
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  align-content:center !important;
  justify-content:flex-start !important;
  grid-area:3 / 1 !important;
  width:min(960px,calc(100% - 32px)) !important;
  max-width:calc(100% - 32px) !important;
  min-height:0 !important;
  height:auto !important;
  margin:6px auto !important;
  padding:0 !important;
  gap:7px !important;
  overflow:visible !important;
}
body.zordex-app-mode #chatPage.chat-main.zordex-active > .s6-coding-tools > button {
  flex:0 1 auto !important;
  min-width:0 !important;
  min-height:35px !important;
  width:auto !important;
  max-width:100% !important;
  padding:7px 12px !important;
  border-radius:9px !important;
  text-align:center !important;
  white-space:nowrap !important;
  font-size:12px !important;
}
body.zordex-app-mode .project-group {
  gap:6px;
  padding:6px 7px;
  margin:0 0 7px;
  border:1px solid #343c45;
  border-radius:11px;
  background:#1a2026;
  transition:background .18s ease,border-color .18s ease;
}
body.zordex-app-mode .project-group:hover {border-color:#566c7d;background:#202832;}
body.zordex-app-mode .project-group.active {border-color:#619785;background:#202d30;}
body.zordex-app-mode .project-group-open {
  min-width:0;
  padding:8px 5px;
  color:#e3ebf1;
  font-size:.8rem;
}
body.zordex-app-mode .project-group-open>span {
  display:grid;
  place-items:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:7px;
  background:#273841;
  color:#99d9ca;
}
body.zordex-app-mode .project-group-open strong {min-width:0;}
body.zordex-app-mode .project-add-chat,
body.zordex-app-mode .project-delete {
  width:30px;height:30px;
  border-radius:8px;
  transition:background .18s ease;
}
body.zordex-app-mode .project-chat-list {padding-left:11px;margin-left:12px;border-color:#3c4c58;}
body.zordex-app-mode .project-chat-list .chat-item {min-height:48px;max-width:100%;}
body.zordex-app-mode .project-chat-list .chat-item-open {padding:8px 9px;}
body.zordex-app-mode .project-empty {
  border-color:#3b4852;
  background:#1b2228;
  border-radius:10px;
  padding:13px;
  line-height:1.5;
}
body.zordex-app-mode #chatListWrap {min-height:0;overflow-y:auto;overscroll-behavior:contain;}
body.zordex-app-mode #newChatButton {min-height:37px;}
@media(max-width:900px) {
  body.zordex-app-mode #chatPage.chat-main.zordex-active > .s6-coding-tools > button {
    flex:1 1 145px !important;
  }
}