/* Touch tablet workspace
   Tablets are a distinct editing context: do not inherit either desktop mouse windows
   or phone-wide sheets merely because their viewport happens to be wide. */

@media (hover:none) and (pointer:coarse) and (min-width:600px){
  :root{--tablet-edge:24px;--tablet-control:46px;--tablet-radius:18px}
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-height:64px;padding-inline:var(--tablet-edge);column-gap:12px}
  .topbar-left,.topbar-center,.topbar-right{gap:8px;min-width:0}
  .topbar-left{grid-column:1;overflow:hidden}
  .topbar-center{grid-column:2;margin:0!important}
  .topbar-right{grid-column:3;justify-content:flex-end;overflow:hidden}
  .brand-btn{height:46px!important;min-width:0!important;width:clamp(206px,26vw,300px)!important;padding-inline:14px!important;font-size:14px!important}
  .topbar-project,.topbar-project-menu,.topbar-size,.topbar-undo{min-height:46px!important;height:46px!important}
  .topbar-project{padding-inline:14px;font-size:13px}
  .topbar-project-menu{padding-inline:13px;font-size:13px}
  .topbar-size{padding-inline:13px!important;font-size:13px!important}
  .topbar-undo{width:46px!important}

  /* Common tablet dialog geometry and reachable controls. */
  .modal-x,.layer-close-btn{width:44px!important;height:44px!important}
  .modal-head{min-height:62px;padding:10px 18px!important;font-size:18px!important}
  .modal-head>span{font-size:18px!important}
  .modal-footer{padding:12px 18px calc(14px + env(safe-area-inset-bottom))!important}
  .modal-footer .primary-btn,#settingsGenerateBtn{min-height:50px!important;font-size:16px!important}
  .sheet-panel{width:min(660px,calc(100vw - 48px));max-width:660px;border-radius:var(--tablet-radius) var(--tablet-radius) 0 0}
  .sheet-btn{min-height:50px;font-size:16px}
  .sheet-cancel{min-height:50px}
  .board-size-panel{width:min(680px,calc(100vw - 48px))!important;max-width:680px!important}
  .board-size-panel #sizeChips{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
  .board-size-panel .size-preset-chip{min-height:48px!important;height:48px!important;padding:7px 10px!important;font-size:13px!important}
  .board-size-panel input[type="number"],.board-size-panel #sizeConfirm{min-height:46px!important;height:46px!important;font-size:15px!important}

  /* Tablet colour browser: compact header and one dedicated scrolling swatch pane. */
  #colorPickerModal.drawer{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:0;overflow:hidden;padding:0;background:var(--apple-surface-raised,var(--white));border:1px solid var(--apple-separator,var(--bd));box-shadow:0 22px 56px rgba(15,23,42,.22)}
  #colorPickerModal .drawer-handle{display:none}
  #colorPickerModal .drawer-title{position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;margin:0;padding:0 60px 0 20px;border-bottom:1px solid var(--apple-separator,var(--bd));font-size:18px;text-align:center}
  #colorPickerModal .color-picker-close{position:absolute;top:10px;right:12px;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--apple-fill,var(--bg));color:var(--apple-secondary,var(--t2));font-size:28px;font-weight:300;line-height:1;cursor:pointer}
  #colorPickerModal .color-picker-close:active{transform:scale(.92);background:var(--apple-separator,var(--bd))}
  #colorPickerModal .drawer-search{z-index:2;margin:0;padding:12px 16px 10px;background:var(--apple-surface-raised,var(--white));border-bottom:1px solid var(--apple-separator,var(--bd))}
  #colorPickerModal .drawer-search input{min-height:44px;padding:8px 13px;font-size:16px;border-radius:11px}
  /* Explicit tracks avoid the flex sizing defect seen on tablet WebKit. */
  #colorPickerModal .drawer-grid{display:grid;grid-template-rows:auto minmax(0,1fr);height:100%;min-height:0;overflow:hidden;padding:12px 16px 16px}
  #colorPickerModal .series-tabs{min-height:0;margin:0 -2px 10px;padding:0 2px 2px;overflow-x:auto;white-space:nowrap}
  #colorPickerModal .picker-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));align-content:start;min-height:0;height:100%;overflow-y:auto;gap:9px;padding:2px;scrollbar-gutter:stable;overscroll-behavior:contain}
  #colorPickerModal .color-picker-item{width:auto;height:58px;min-width:58px;border-radius:10px}
  #colorPickerModal .color-picker-label{right:2px;bottom:3px;left:2px;overflow:hidden;color:#172033;font-size:10px;font-weight:750;line-height:13px;text-align:center;text-overflow:ellipsis;text-shadow:0 1px 1px rgba(255,255,255,.75);white-space:nowrap;opacity:.88}

  /* Layer content gets touch-sized rows. */
  #layerPanelOverlay .layer-panel-head{min-height:62px;padding:10px 16px!important;font-size:18px}
  #layerPanelOverlay .layer-list{padding:10px 12px!important}
  #layerPanelOverlay .layer-item{min-height:70px;gap:10px;padding:9px 10px;margin-bottom:7px;border-radius:12px}
  #layerPanelOverlay .layer-item .layer-name{font-size:15px}
  #layerPanelOverlay .layer-item .layer-vis-btn,#layerPanelOverlay .layer-item .layer-lock-btn,#layerPanelOverlay .layer-item .layer-act-btn{width:42px;height:42px;font-size:17px}
  #layerPanelOverlay .layer-item .layer-opacity{width:64px;height:20px}
  #layerPanelOverlay .layer-item .layer-op-val{width:36px;font-size:11px}
  #layerPanelOverlay .layer-panel-footer{padding:12px 14px calc(14px + env(safe-area-inset-bottom))!important}
  #layerPanelOverlay .layer-add-btn{min-height:50px;padding:12px;font-size:16px;border-radius:12px}

  /* Context actions remain a bottom sheet for finger interaction. */
  .layer-sheet-panel:not(.is-desktop-context){width:min(660px,calc(100vw - 48px));max-width:660px}
  .layer-sheet-panel:not(.is-desktop-context) .layer-sheet-card{min-height:54px;padding:10px 12px;font-size:15px}
}

/* Landscape tablet: retain canvas visibility with bounded side panels and desktop-like
   density only where it benefits editing. */
@media (hover:none) and (pointer:coarse) and (min-width:900px) and (orientation:landscape){
  /* Settings window: keep a readable working width instead of stretching every
     form row across the full tablet viewport. */
  #settingsModal{align-items:center!important;justify-content:center!important;padding:48px!important}
  #settingsModal .modal-panel-settings{width:min(1040px,calc(100vw - 112px))!important;max-width:1040px!important;height:min(840px,calc(100dvh - 96px));max-height:calc(100dvh - 96px);border-radius:20px!important;overflow:hidden}
  #settingsModal .modal-panel-settings .modal-head{min-height:64px;padding:10px 24px!important}
  #settingsModal .modal-panel-settings .modal-body{display:grid!important;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:start;gap:20px;padding:20px 24px 24px!important;overflow-y:auto!important;overscroll-behavior:contain}
  #settingsModal .modal-panel-settings .settings-column{display:flex!important;flex-direction:column;gap:16px;min-width:0}
  #settingsModal .modal-panel-settings .param-group{margin:0;padding:0}
  #settingsModal .modal-panel-settings .settings-preview-wrap{min-height:240px;margin:0;padding:14px}
  #settingsModal .modal-panel-settings #settingsPreviewCanvas{max-height:250px}
  #settingsModal .modal-panel-settings .generation-simple-note{margin-bottom:10px;padding:9px 12px;font-size:13px}
  #settingsModal .modal-panel-settings .modal-footer{flex:0 0 auto;padding:14px 24px calc(16px + env(safe-area-inset-bottom))!important;box-shadow:0 -8px 20px rgba(0,0,0,.06)}
  #settingsModal .modal-panel-settings .modal-footer .primary-btn{min-height:52px!important}

  /* Editing toolbar: both rows share one three-zone grid so a tablet does not
     inherit the stretched, phone-oriented two-row capsule. */
  .bottom-area{bottom:max(18px,env(safe-area-inset-bottom));width:min(1120px,calc(100vw - 64px));max-width:none}
  .float-capsule{width:100%;max-width:none;padding:8px 12px;gap:4px;border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.12)}
  .float-row{display:grid;grid-template-columns:minmax(178px,1fr) auto minmax(178px,1fr);align-items:center;column-gap:14px;min-height:48px}
  .float-row .float-left{justify-self:start;min-width:0;padding:0}
  .float-row .float-tools{justify-self:center;justify-content:center;flex:none;max-width:min(100%,610px);padding:0;overflow:visible}
  .float-row .float-right{justify-self:end;padding:0}
  .float-row-top .float-tools{gap:4px}
  .float-row-bottom .float-tools{gap:2px}
  .float-row-bottom .float-left{gap:6px}
  .float-row-bottom .float-right{gap:6px}
  .float-row-bottom .float-divider{display:none}
  .float-btn{min-height:44px;padding-inline:11px;font-size:13px}
  .float-btn.icon-only,.float-set{width:44px;min-width:44px;height:44px}
  .float-stat{min-height:44px;padding-inline:10px}
  .float-play{width:auto;min-width:96px;height:46px;padding:0 16px;border-radius:12px;font-size:14px}
  .float-play .float-label{display:inline}
  .float-row-bottom .float-tools .float-btn{min-height:40px;padding-inline:9px;color:var(--t3)}

  #colorPickerModal.drawer{top:clamp(80px,11dvh,112px);bottom:clamp(44px,7dvh,72px);left:50%;right:auto;width:min(900px,calc(100vw - 112px));max-height:none;border-radius:18px;transform:translate(-50%,-8px);opacity:0;visibility:hidden}
  #colorPickerModal.drawer.show{transform:translate(-50%,0);opacity:1;visibility:visible}
  #colorPickerModal .picker-color-grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px}
  #colorPickerModal .color-picker-item{height:60px;min-width:62px}
  #colorPickerModal .color-picker-label{font-size:11px;line-height:15px}

  /* More actions are a compact task sheet, not a full-width phone action board. */
  #layerSheetOverlay{display:flex;align-items:center;justify-content:center;padding:24px}
  #layerSheetOverlay .layer-sheet-panel:not(.is-desktop-context){position:relative;left:auto;right:auto;bottom:auto;width:min(680px,calc(100vw - 48px));max-width:680px;max-height:calc(100dvh - 48px);padding:12px 18px 18px;border-radius:18px;transform:translateY(12px) scale(.985);overflow:auto}
  #layerSheetOverlay.show .layer-sheet-panel:not(.is-desktop-context){transform:translateY(0) scale(1)}
  #layerSheetOverlay .layer-sheet-drag{display:none}
  #layerSheetOverlay .layer-sheet-head{min-height:48px;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--apple-separator,var(--bd))}
  #layerSheetOverlay .layer-sheet-title{font-size:18px;color:var(--t)}
  #layerSheetOverlay .layer-sheet-close{width:42px;height:42px;border-radius:50%}
  #layerSheetOverlay .layer-sheet-opacity{margin-bottom:14px}
  #layerSheetOverlay .layer-sheet-op-head{font-size:14px;margin-bottom:8px}
  #layerSheetOverlay .layer-sheet-op-slider{height:28px}
  #layerSheetOverlay .layer-sheet-rename-row{margin-bottom:14px;gap:10px}
  #layerSheetOverlay .layer-sheet-rename-input{height:48px;padding:10px 14px;font-size:16px}
  #layerSheetOverlay .layer-sheet-rename-btn{width:52px;height:48px;font-size:20px}
  #layerSheetOverlay .layer-sheet-grid,#layerSheetOverlay .layer-sheet-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  #layerSheetOverlay .layer-sheet-grid{margin-bottom:10px}
  #layerSheetOverlay .layer-sheet-card{min-height:76px;padding:10px 8px;border-radius:12px}
  #layerSheetOverlay .layer-sheet-card span{font-size:13px}

  /* 导入图片后的主体保留窗：横屏平板采用明确的“标题 / 可滚动工作区 / 固定操作栏”结构。
     不让预览图或多行工具去挤压底部确认按钮。 */
  #localSegmentationModal.segmentation-modal{align-items:center!important;justify-content:center!important;padding:24px!important}
  #localSegmentationModal .segmentation-panel{width:min(980px,calc(100vw - 80px))!important;max-width:980px!important;height:calc(100dvh - 48px)!important;max-height:calc(100dvh - 48px)!important;min-height:0!important;border-radius:20px!important;overflow:hidden!important}
  #localSegmentationModal .modal-head{min-height:58px!important;padding:8px 20px!important}
  #localSegmentationModal .segmentation-workarea{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important}
  #localSegmentationModal .segmentation-stage{flex:1 1 0!important;min-height:150px!important;margin:0 20px!important}
  #localSegmentationModal .segmentation-status-row{padding:6px 20px 0!important}
  #localSegmentationModal .segmentation-status{font-size:12px!important}
  #localSegmentationModal .segmentation-tools{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px 20px 10px!important}
  #localSegmentationModal .segmentation-tools .secondary-btn{width:100%;min-width:0;min-height:40px;padding:7px 8px!important;white-space:nowrap}
  #localSegmentationModal .segmentation-tools label{grid-column:span 2;min-width:0;margin:0;padding:0 8px}
  #localSegmentationModal .segmentation-actions{display:flex!important;flex-wrap:nowrap!important;gap:10px;padding:12px 20px calc(14px + env(safe-area-inset-bottom))!important}
  #localSegmentationModal .segmentation-actions>*{flex:1 1 0;min-width:0;min-height:48px!important;padding-inline:14px!important;white-space:nowrap}

  #layerPanelOverlay.layer-panel-overlay{top:76px!important;right:18px!important;bottom:18px!important;left:auto!important;width:min(460px,calc(100vw - 48px))!important;height:auto!important;max-height:none!important;padding:0!important;border-radius:18px!important;overflow:hidden!important;transform:translateX(calc(100% + 28px))!important;opacity:0!important;pointer-events:none!important}
  #layerPanelOverlay.layer-panel-overlay.show{transform:translateX(0)!important;opacity:1!important;pointer-events:auto!important}
  #layerPanelOverlay .layer-panel{height:100%!important;overflow:hidden!important}
}

/* Xiaomi Browser sometimes exposes a touch tablet as hover:hover / pointer:fine.
   Apply the editing geometry from the real viewport, not that unreliable capability hint. */
@media (min-width:900px) and (orientation:landscape){
  /* Android 平板浏览器偶尔把触屏误报为 pointer:fine；仍须应用主体保留窗口的横屏安全布局。 */
  html.android-touch-runtime #localSegmentationModal.segmentation-modal{align-items:center!important;justify-content:center!important;padding:24px!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-panel{width:min(980px,calc(100vw - 80px))!important;max-width:980px!important;height:calc(100dvh - 48px)!important;max-height:calc(100dvh - 48px)!important;min-height:0!important;border-radius:20px!important;overflow:hidden!important}
  html.android-touch-runtime #localSegmentationModal .modal-head{min-height:58px!important;padding:8px 20px!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-workarea{min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-stage{flex:1 1 0!important;min-height:150px!important;margin:0 20px!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-status-row{padding:6px 20px 0!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-tools{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:8px 20px 10px!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-tools .secondary-btn{width:100%;min-width:0;min-height:40px;padding:7px 8px!important;white-space:nowrap}
  html.android-touch-runtime #localSegmentationModal .segmentation-tools label{grid-column:span 2;min-width:0;margin:0;padding:0 8px}
  html.android-touch-runtime #localSegmentationModal .segmentation-actions{display:flex!important;flex-wrap:nowrap!important;gap:10px;padding:12px 20px calc(14px + env(safe-area-inset-bottom))!important}
  html.android-touch-runtime #localSegmentationModal .segmentation-actions>*{flex:1 1 0;min-width:0;min-height:48px!important;padding-inline:14px!important;white-space:nowrap}

  html.android-touch-runtime .bottom-area{bottom:max(18px,env(safe-area-inset-bottom));width:min(1120px,calc(100vw - 64px));max-width:none}
  html.android-touch-runtime .float-capsule{width:100%;max-width:none;padding:8px 12px;gap:4px;border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.12)}
  html.android-touch-runtime .float-row{display:grid;grid-template-columns:minmax(178px,1fr) auto minmax(178px,1fr);align-items:center;column-gap:14px;min-height:48px}
  html.android-touch-runtime .float-row .float-left{justify-self:start;min-width:0;padding:0}
  html.android-touch-runtime .float-row .float-tools{justify-self:center;justify-content:center;flex:none;max-width:min(100%,610px);padding:0;overflow:visible}
  html.android-touch-runtime .float-row .float-right{justify-self:end;padding:0}
  html.android-touch-runtime .float-row-top .float-tools{gap:4px}
  html.android-touch-runtime .float-row-bottom .float-tools{gap:2px}
  html.android-touch-runtime .float-row-bottom .float-divider{display:none}
  html.android-touch-runtime .float-btn{min-height:44px;padding-inline:11px;font-size:13px}
  html.android-touch-runtime .float-btn.icon-only,html.android-touch-runtime .float-set{width:44px;min-width:44px;height:44px}
  html.android-touch-runtime .float-stat{min-height:44px;padding-inline:10px}
  html.android-touch-runtime .float-play{width:auto;min-width:96px;height:46px;padding:0 16px;border-radius:12px;font-size:14px}
  html.android-touch-runtime .float-play .float-label{display:inline}
  html.android-touch-runtime .float-row-bottom .float-tools .float-btn{min-height:40px;padding-inline:9px;color:var(--t3)}
}

/* Portrait tablet: a framed sheet avoids the awkward phone-wide slab and preserves
   spatial context behind it. */
@media (hover:none) and (pointer:coarse) and (min-width:600px) and (orientation:portrait){
  #settingsModal{align-items:flex-end!important;padding:0 32px!important}
  #settingsModal .modal-panel-settings{width:min(760px,calc(100vw - 64px))!important;max-width:760px!important;max-height:min(86dvh,1040px);border-radius:20px 20px 0 0!important}
  #settingsModal .modal-panel-settings .modal-body{padding:14px 20px 18px!important;overscroll-behavior:contain}
  #settingsModal .modal-panel-settings .param-group{padding:0}
  #settingsModal .modal-panel-settings .modal-footer{padding:12px 20px calc(16px + env(safe-area-inset-bottom))!important;box-shadow:0 -8px 20px rgba(0,0,0,.06)}

  #colorPickerModal.drawer{left:24px;right:24px;top:auto;bottom:0;width:auto;max-height:min(82dvh,980px);border-radius:20px 20px 0 0;transform:translateY(100%)}
  #colorPickerModal.drawer.show{transform:translateY(0)}
  #colorPickerModal .picker-color-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:9px}

  #layerPanelOverlay.layer-panel-overlay{left:24px!important;right:24px!important;top:auto!important;bottom:0!important;width:auto!important;height:min(62dvh,720px)!important;max-height:calc(100dvh - 88px)!important;padding:0!important;border-radius:20px 20px 0 0!important;overflow:hidden!important;transform:translateY(calc(100% + 20px))!important;opacity:0!important;pointer-events:none!important}
  #layerPanelOverlay.layer-panel-overlay.show{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important}
  #layerPanelOverlay .layer-panel{height:100%!important;overflow:hidden!important}
}

/* Narrow portrait tablets and large phones: keep controls readable without forcing
   the desktop density used above. */
@media (hover:none) and (pointer:coarse) and (max-width:599px){
  #colorPickerModal .picker-color-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
  #colorPickerModal .color-picker-item{width:auto;height:54px;min-width:46px}
  #colorPickerModal .color-picker-label{font-size:9px;line-height:12px;opacity:.9}
}