/* Window geometry and responsive controls. Keep the original desktop's chrome. */
:root { --taskbar-height: 39px; --viewport-height: 100dvh; }
html, body { width: 100%; overscroll-behavior: none; }
#desktop { width: 100%; height: var(--viewport-height); min-height: 0; }
.window { min-width: min(300px, calc(100vw - 16px)); max-width: calc(100% - 16px); max-height: calc(100% - var(--taskbar-height) - 16px); }
.image-window { width: min(81.4%, 1060px); height: min(86%, calc(69.5vw + 135px)); min-height: min(330px, calc(var(--viewport-height) - var(--taskbar-height) - 16px)); }
.window.maximized { left: 0!important; top: 0!important; right: 0!important; bottom: var(--taskbar-height)!important; width: 100%!important; height: calc(100% - var(--taskbar-height))!important; max-width: none; max-height: none; min-height: 0; }
.window-title { min-width: 0; }
.window-controls { flex: 0 0 auto; }
.canvas-scroll { display: flex; align-items: flex-start; background: #737373; }
.canvas-stage { position: relative; flex: 0 0 auto; margin: auto; }
.canvas-stage canvas { box-shadow: 0 0 0 1px #666; }
#selection-box { box-sizing: border-box; }
#text-entry { max-width: 100%; font-size: 16px; }
#taskbar { height: var(--taskbar-height); padding-bottom: calc(3px + env(safe-area-inset-bottom)); }
#start-button, .tray { flex-shrink: 0; }
#task-buttons { overflow-x: auto; scrollbar-width: none; }
#task-buttons::-webkit-scrollbar { display: none; }
.task-button { flex: 0 1 220px; min-width: 100px; }
#start-menu { bottom: var(--taskbar-height); max-height: calc(var(--viewport-height) - var(--taskbar-height) - 8px); max-width: calc(100% - 8px); overflow-y: auto; }
#menu-popup { max-width: calc(100% - 8px); max-height: calc(var(--viewport-height) - var(--taskbar-height) - 8px); overflow-y: auto; }
#system-dialog { max-height: calc(var(--viewport-height) - 24px); max-width: calc(100vw - 24px); min-width: 0; }
#dialog-body { overflow-y: auto; min-height: 0; }
#dialog-body input { font-size: 16px; }
#dialog-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#system-dialog .titlebar { flex-shrink: 0; }
.aux-content { min-width: 0; }
.folder-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.play-controls { flex-wrap: wrap; }
.visualizer { overflow: hidden; }
.visualizer i { flex-shrink: 1; }

@media (max-width: 680px), (max-width: 1000px) and (max-height: 500px) {
  :root { --taskbar-height: calc(48px + env(safe-area-inset-bottom)); --mobile-top: calc(98px + env(safe-area-inset-top)); }
  .desktop-icons { top: calc(8px + env(safe-area-inset-top)); left: 8px; right: 8px; width: auto; max-width: none; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 12px; }
  .desktop-icon { width: 84px; min-height: 76px; padding: 3px; gap: 4px; font-size: 11px; }
  .desktop-icon img { width: 36px; height: 36px; }
  .desktop-icon span { font-size: 11px; white-space: normal; line-height: 1.1; }
  .desktop-icon br { display: none; }
  .window:not(dialog):not(.maximized) {
    left: 6px!important; right: 6px!important; top: var(--mobile-top)!important;
    width: calc(100% - 12px)!important; height: calc(100% - var(--mobile-top) - var(--taskbar-height) - 6px)!important;
    max-width: none; max-height: none; min-width: 0; min-height: 0; resize: none;
  }
  .image-window:has(.paint-tools:not([hidden])) { min-height: 0; }
  .titlebar { height: 36px; min-height: 36px; font-size: 12px; padding: 2px 3px; gap: 5px; }
  .titlebar img { width: 19px; height: 19px; }
  .window-controls { gap: 3px; }
  .window-controls button, .titlebar>button { width: 30px; min-width: 30px; height: 30px; font-size: 21px; }
  .menubar { height: 36px; min-height: 36px; overflow-x: auto; scrollbar-width: none; }
  .menubar button { min-height: 34px; padding: 5px 9px; font-size: 13px; flex-shrink: 0; }
  .toolbar { height: 40px; min-height: 40px; gap: 2px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
  .toolbar .tool-button { width: 34px; min-width: 34px; height: 34px; padding: 4px; flex-shrink: 0; }
  .toolbar .tool-button svg { width: 22px; height: 22px; }
  .toolbar>.tool-button:nth-child(4) { margin-left: 2px; }
  .toolbar .paint-toggle { width: 36px; min-width: 36px; margin-left: auto; font-size: 0; position: sticky; right: 0; background: #c0c0c0; }
  .editor-body { display: grid; grid-template-columns: minmax(0,1fr) 17px; grid-template-rows: minmax(0,1fr); }
  .editor-body:has(.paint-tools:not([hidden])) { grid-template-rows: 54px minmax(0,1fr); }
  .paint-tools { grid-column: 1 / -1; width: auto; min-width: 0; border-right: 0; border-bottom: 2px solid #fff; display: flex; align-items: center; gap: 10px; padding: 3px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
  .tool-grid { display: flex; gap: 2px; flex-shrink: 0; }
  .paint-tools .tool-button { width: 38px; height: 38px; flex: 0 0 38px; }
  .paint-tools .tool-button svg { width: 22px; height: 22px; }
  .size-label { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; flex-shrink: 0; }
  .paint-tools .size-label select { width: 75px; min-height: 36px; margin: 0; font-size: 16px; }
  .fill-label { flex-shrink: 0; font-size: 13px; min-height: 38px; padding-right: 6px; }
  .fill-label input { width: 22px; height: 22px; margin-right: 5px; }
  .canvas-scroll { grid-column: 1; min-height: 0; }
  .scroll-decoration { grid-column: 2; min-height: 0; }
  .palette { height: 72px; min-height: 72px; padding: 4px; gap: 8px; overflow: hidden; }
  .current-colors { width: 42px; height: 46px; }
  .current-colors label, #custom-color { width: 30px; height: 30px; }
  .current-colors>span { width: 23px; height: 23px; left: 16px; top: 19px; }
  #swatches { min-width: 0; display: grid; grid-template-columns: repeat(14,28px); grid-template-rows: repeat(2,28px); gap: 3px; overflow-x: auto; padding: 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .swatch { width: 28px; height: 28px; border-width: 2px; }
  .palette-hint { display: none; }
  .statusbar { height: 25px; min-height: 25px; font-size: 10px; }
  .statusbar img { width: 18px; height: 18px; }
  #size-status { display: none; }
  #zoom-status { padding-left: 6px; }
  .resize-grip { display: none; }
  #start-button { font-size: 11px; padding: 2px 5px; height: 38px; gap: 4px; }
  #start-button img { width: 20px; height: 20px; }
  .task-button { height: 38px; min-width: 42px; flex: 1 0 42px; width: 42px; padding: 4px; justify-content: center; }
  .task-button span { display: none; }
  .task-button img { width: 22px; height: 22px; }
  .tray { height: 38px; padding: 0 4px; gap: 4px; font-size: 11px; }
  .tray button { min-height: 34px; min-width: 28px; font-size: 18px; }
  #menu-popup button { min-height: 40px; font-size: 14px; padding: 8px 12px; gap: 18px; }
  .start-items button { min-height: 44px; }
  .aux-content { padding: 10px; }
  .file-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .file-item { min-height: 92px; font-size: 13px; }
  .bevel, .note-actions button { min-height: 40px; }
  .play-controls { gap: 5px; }
  .play-controls>.bevel { min-width: 42px; }
  .volume-label { min-height: 40px; font-size: 13px; }
  .volume-label input { width: 76px; height: 32px; }
  .player-seek { height: 34px; }
  .notepad-window textarea { font-size: 16px; }
  #dialog-body { padding: 12px; }
  #dialog-body .dialog-actions { flex-wrap: wrap; }
}

@media (max-width: 680px) and (max-height: 540px), (max-width: 1000px) and (max-height: 500px) {
  :root { --mobile-top: 6px; }
  .desktop-icons { display: none; }
  .window:not(dialog):not(.maximized) { top: 6px!important; }
  .titlebar { height: 32px; min-height: 32px; }
  .menubar { height: 30px; min-height: 30px; }
  .menubar button { min-height: 28px; }
  .toolbar { height: 36px; min-height: 36px; }
  .palette { height: 44px; min-height: 44px; }
  #swatches { grid-template-columns: repeat(28,28px); grid-template-rows: 28px; }
  .current-colors { height: 35px; }
  .current-colors>span { top: 9px; }
  .statusbar { height: 22px; min-height: 22px; }
}
@media (pointer: coarse) and (min-width: 681px) {
  .window-controls button { width: 28px; height: 24px; }
  .menubar { height: 36px; min-height: 36px; }
  .menubar button { min-height: 34px; }
  .tool-button { min-width: 36px; }
}
@media print { .canvas-stage { margin: 0; } }