#modeNav .nav-fold-group { margin:6px 0; }
#modeNav .nav-fold-title { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; text-align:left; border:1px solid #505767; border-radius:12px; padding:10px 9px; font-size:15px; background:var(--panel,#202126); color:inherit; }
#modeNav .nav-fold-title span:first-child { flex:1; }
#modeNav .nav-fold-current { width:100%; font-size:11px; color:#7ea1ff; margin-top:5px; }
#modeNav .nav-fold-items { padding:5px 0 0 7px; border-left:2px solid #465579; margin-left:5px; }
#modeNav .nav-fold-items[hidden],#modeNav .nav-fold-current[hidden] { display:none!important; }
#modeNav .nav-fold-items button { width:100%; font-size:14px; }
.web-voice-tools { display:flex; align-items:center; gap:10px; padding:6px 0; flex-wrap:wrap; }
.web-voice-tools button { background:#557cf0; color:white; border:1px solid #7296ff; border-radius:9px; padding:7px 15px; cursor:pointer; }
.web-voice-tools button[aria-pressed="true"] { background:#b43b4c; }
.web-voice-tools span { color:#8f9bb0; font-size:12px; }
.web-voice-dialog { width:min(440px,90vw); max-height:85vh; overflow:auto; background:#242730; color:#f3f5fa; border:1px solid #627296; border-radius:16px; padding:20px; }
.web-voice-dialog::backdrop { background:#0009; }
.web-voice-dialog img { display:block; width:240px; max-width:100%; margin:15px auto; background:white; padding:10px; }
.web-voice-dialog textarea { width:100%; min-height:150px; }
.web-voice-dialog button { margin:5px; padding:8px 12px; border-radius:8px; }

/* Prompt height: 58px -> 116px; preserve width and workflow. */
#modeContent[data-mode="general"] textarea.prompt {
    height:116px!important;
    min-height:116px!important;
    overflow-y:auto;
}

.detail-web-heading { font-size:18px; margin:8px 0; }
.detail-web-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.detail-web-grid:has(.detail-web-tile:only-child) { grid-template-columns:1fr; }
.detail-web-grid .single-drop { width:100%; height:250px; min-height:0; position:relative; overflow:hidden; }
.detail-web-eight { grid-template-columns:repeat(4,minmax(0,1fr)); }
.detail-web-eight .single-drop { height:155px; }
.detail-web-tile .source-entry { width:100%; margin-top:5px; }
.detail-web-choices { display:flex; gap:8px; margin-top:12px; }
.detail-web-choices button.active { background:#577ef4; }
.detail-web-note { color:#aab4c4; font-size:13px; margin:12px 0; }

.detail-web-tile .source-entry,.detail-web-choices button { background:#292c33;color:#fff;border:1px solid #626d82;border-radius:9px;padding:8px 10px;cursor:pointer; }
.detail-web-choices button.active { background:#557cf0; }

/* Detail references: full image visible; taller single-image workspace. */
#modeContent .detail-web-grid:has(> .detail-web-tile:only-child) .single-drop {
  height:clamp(380px,60vh,600px);
}
#modeContent .detail-web-grid .single-drop > img.reference-preview-image {
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
  aspect-ratio:auto!important;
}
@media(max-width:760px) {
  #modeContent .detail-web-grid:has(> .detail-web-tile:only-child) .single-drop {
    height:clamp(280px,55vh,440px);
  }
}

/* Enlarge two-image and eight-image detail panels. */
#modeContent .detail-web-grid:not(:has(> .detail-web-tile:only-child)) .single-drop {
  height:clamp(320px,42vh,420px);
}
#modeContent .detail-web-grid.detail-web-eight {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
#modeContent .detail-web-grid.detail-web-eight:not(:has(> .detail-web-tile:only-child)) .single-drop {
  height:clamp(280px,35vh,360px);
}
@media(max-width:760px) {
  #modeContent .detail-web-grid:not(:has(> .detail-web-tile:only-child)) {
    grid-template-columns:1fr;
  }
  #modeContent .detail-web-grid:not(:has(> .detail-web-tile:only-child)) .single-drop {
    height:clamp(280px,50vh,380px);
  }
}

/* Explicit layout fallback without :has support. */
#modeContent .detail-web-grid {grid-template-columns:minmax(0,1fr)!important;}
#modeContent .detail-web-grid .single-drop {height:clamp(380px,60vh,600px)!important;}

#modeContent[data-mode="knitDesign"] .detail-web-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#modeContent[data-mode="knitDesign"] .detail-web-grid .single-drop {height:clamp(280px,35vh,360px)!important;}

#modeContent[data-mode="knitPanel"] .detail-web-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#modeContent[data-mode="knitPanel"] .detail-web-grid .single-drop {height:clamp(280px,35vh,360px)!important;}

#modeContent[data-mode="knitUnfold"] .detail-web-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#modeContent[data-mode="knitUnfold"] .detail-web-grid .single-drop {height:clamp(320px,42vh,420px)!important;}

#modeContent[data-mode="knitToShoe"] .detail-web-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#modeContent[data-mode="knitToShoe"] .detail-web-grid .single-drop {height:clamp(320px,42vh,420px)!important;}

@media(max-width:760px){
#modeContent .detail-web-grid .single-drop {height:clamp(280px,55vh,440px)!important;}
#modeContent[data-mode="knitDesign"] .detail-web-grid {grid-template-columns:minmax(0,1fr)!important;}
#modeContent[data-mode="knitDesign"] .detail-web-grid .single-drop {height:clamp(280px,50vh,380px)!important;}
#modeContent[data-mode="knitPanel"] .detail-web-grid {grid-template-columns:minmax(0,1fr)!important;}
#modeContent[data-mode="knitPanel"] .detail-web-grid .single-drop {height:clamp(280px,50vh,380px)!important;}
#modeContent[data-mode="knitUnfold"] .detail-web-grid {grid-template-columns:minmax(0,1fr)!important;}
#modeContent[data-mode="knitUnfold"] .detail-web-grid .single-drop {height:clamp(280px,50vh,380px)!important;}
#modeContent[data-mode="knitToShoe"] .detail-web-grid {grid-template-columns:minmax(0,1fr)!important;}
#modeContent[data-mode="knitToShoe"] .detail-web-grid .single-drop {height:clamp(280px,50vh,380px)!important;}
}