/* A portrait coordinate plane stays attached to the device. The stage is
   mapped separately so the full source stays upright without crop/stretch. */
html.overlay-camera-layout,html.overlay-camera-layout body{width:100%;height:100%;min-height:0;overflow:hidden}
html.overlay-camera-layout .app{width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:0;display:block;overflow:hidden}
html.overlay-camera-layout #settingsDock{display:none}
html.overlay-camera-layout .camera-surface{position:fixed;top:var(--camera-view-top,0px);left:var(--camera-view-left,0px);width:var(--camera-view-width,100vw);height:var(--camera-view-height,100dvh);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);display:block;overflow:hidden;isolation:isolate;background:#000}
html.overlay-camera-layout #cameraSurface .camera-stage{position:absolute;top:var(--overlay-frame-y,0px);left:var(--overlay-frame-x,0px);width:var(--overlay-frame-width,100%);height:var(--overlay-frame-height,100%);flex:none;max-width:none;max-height:none;aspect-ratio:auto!important;border:0;border-radius:0;box-shadow:none;overflow:hidden}
html.overlay-camera-layout #cameraSurface .camera-stage video{object-fit:contain!important;border-radius:0}
html.overlay-camera-layout #cameraSurface .camera-stage[data-capture-mode="photo"] video,html.overlay-camera-layout #cameraSurface .camera-stage[data-capture-mode="photo"] .camera-transition-frame{object-fit:cover!important}
.preview-frame-label{position:absolute;z-index:4;left:6px;top:6px;max-width:calc(100% - 12px);padding:3px 6px;border-radius:6px;background:#000b;color:#fff;font-size:.68rem;line-height:1.25;pointer-events:none}
html.overlay-camera-layout #cameraSurface .permission-panel{padding:16px;overflow:auto;align-content:safe center;border-radius:0}
html.overlay-camera-layout .camera-device-controls{position:absolute;z-index:10;left:0;top:0;width:var(--device-width,100vw);height:var(--device-height,100dvh);transform:var(--device-matrix);transform-origin:0 0;pointer-events:none}
html.overlay-camera-layout .camera-device-controls button,html.overlay-camera-layout .camera-device-controls input{pointer-events:auto}
.device-upright{display:inline-grid;place-items:center;vertical-align:middle;transform:rotate(var(--device-ink-turn,0deg));transform-origin:center;max-width:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
html.overlay-camera-layout #cameraSurface .mode-control-row{position:absolute;z-index:14;top:var(--overlay-mode-top,8px);left:max(8px,var(--device-safe-left));right:max(8px,var(--device-safe-right));bottom:auto;width:auto;height:var(--overlay-mode-height,54px);min-height:54px;max-width:none;margin:0;padding:0;display:block}
html.overlay-camera-layout #cameraSurface .mode-switcher{position:absolute;top:50%;left:50%;right:auto;width:var(--overlay-mode-width,164px);max-width:none;min-width:98px;transform:translate(-50%,-50%);display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:rgba(12,14,18,.58);box-shadow:0 2px 8px #0007}
html.overlay-camera-layout #cameraSurface .microphone-status{position:absolute;top:50%;left:calc(50% + var(--overlay-mode-width,164px)/2 + 6px);right:auto;bottom:auto;width:var(--overlay-mic-width,64px);min-width:44px;height:54px;min-height:54px;max-height:none;padding:4px 5px;transform:translateY(-50%);display:grid;place-items:center;border-radius:14px;background:rgba(8,10,14,.66);box-shadow:0 2px 8px #0008}
html.overlay-camera-layout #cameraSurface .microphone-status>.device-upright{display:flex;flex-direction:column;gap:1px;overflow:visible;max-width:none}
html.overlay-camera-layout #cameraSurface .microphone-status-current{display:block;font-size:.65rem;line-height:1.05}
html.overlay-camera-layout #cameraSurface .microphone-state-line{display:flex;gap:3px;align-items:center;justify-content:center;font-size:var(--overlay-mic-font-size,.75rem);font-weight:800;line-height:1.05}
html.overlay-camera-layout #cameraSurface .microphone-status strong{font:inherit;letter-spacing:0}
html.overlay-camera-layout #cameraSurface .camera-top-controls{position:absolute;z-index:12;top:var(--overlay-toolbar-top,70px);left:max(8px,var(--device-safe-left));right:max(8px,var(--device-safe-right));bottom:auto;width:auto;height:auto;min-height:0;padding:0;margin:0;transform:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
html.overlay-camera-layout #cameraSurface .camera-top-controls>button{width:44px;height:44px;min-width:44px;min-height:44px;flex:0 0 44px;padding:4px;background:rgba(8,10,14,.48);box-shadow:0 2px 8px #0007;backdrop-filter:blur(4px)}
html.overlay-camera-layout #cameraSurface .camera-top-controls>button[aria-pressed="true"]{background:#fff;color:#050607}
html.overlay-camera-layout #cameraSurface .bottom-controls{position:absolute;z-index:12;left:max(8px,var(--device-safe-left));right:max(8px,var(--device-safe-right));top:auto;bottom:max(8px,var(--device-safe-bottom));width:auto;height:82px;min-height:82px;padding:0;margin:0;transform:none;display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:82px;align-items:center;justify-items:center;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
html.overlay-camera-layout #cameraSurface .bottom-controls::before,html.overlay-camera-layout #cameraSurface .bottom-controls::after{content:none!important;display:none!important}
html.overlay-camera-layout #cameraSurface .bottom-controls>button{background:rgba(8,10,14,.48);box-shadow:0 2px 8px #0008;backdrop-filter:blur(4px)}
html.overlay-camera-layout #cameraSurface .bottom-controls>.shutter-button{background:rgba(0,0,0,.18)}
html.overlay-camera-layout #cameraSurface .preview-button>.device-upright{width:100%;height:100%;overflow:visible}
html.overlay-camera-layout #cameraSurface .zoom-control{bottom:var(--overlay-zoom-bottom,112px);left:calc((100% + var(--device-safe-left) - var(--device-safe-right))/2);width:min(350px,calc(100% - var(--device-safe-left) - var(--device-safe-right) - 24px));pointer-events:auto}
html.overlay-camera-layout #cameraSurface .status-bar{bottom:var(--overlay-status-bottom,94px);left:max(14px,var(--device-safe-left));right:max(14px,var(--device-safe-right));pointer-events:none}
html.overlay-camera-layout #cameraSurface .recording-badge{position:absolute;z-index:11;top:var(--overlay-recording-top,124px);left:calc((100% + max(12px,var(--device-safe-left)) - max(12px,var(--device-safe-right)))/2);right:auto;max-width:calc(100% - max(12px,var(--device-safe-left)) - max(12px,var(--device-safe-right)));transform:translateX(-50%);overflow:visible}
html.overlay-camera-layout #cameraSurface[data-device-rotation="90"] button>.device-upright,html.overlay-camera-layout #cameraSurface[data-device-rotation="270"] button>.device-upright{max-width:36px}
html.overlay-camera-layout #cameraSurface[data-device-rotation="90"] #galleryButton>.device-upright,html.overlay-camera-layout #cameraSurface[data-device-rotation="270"] #galleryButton>.device-upright{max-width:none}
html.overlay-camera-layout #cameraSurface[data-device-rotation="90"] #microphoneStatusButton>.device-upright,html.overlay-camera-layout #cameraSurface[data-device-rotation="270"] #microphoneStatusButton>.device-upright{max-width:none}
.photo-frame-guide{position:absolute;z-index:3;pointer-events:none;border:1px dashed rgba(255,255,255,.85);box-shadow:0 0 0 1px #0005}
html.overlay-camera-layout .info-dialog .app-header{display:flex!important;margin:24px 0 12px}
html.overlay-camera-layout .info-dialog .camera-note,html.overlay-camera-layout .info-dialog .about-app{display:block!important}
html.overlay-camera-layout .settings-panel>.header-actions{grid-column:1/-1;justify-content:flex-end}
html.overlay-camera-layout.immersive-mode #cameraSurface .camera-top-controls{top:max(8px,var(--device-safe-top));left:auto;right:max(8px,var(--device-safe-right));width:auto;transform:none;display:flex}
html.overlay-camera-layout.immersive-mode #cameraSurface .camera-top-controls>:not(#fullscreenButton){display:none!important}
html.overlay-camera-layout.immersive-mode #cameraSurface .camera-top-controls .fullscreen-button{min-width:48px;width:48px;height:48px;flex-basis:48px}

/* Native range touch tracking must not be claimed by vertical page panning
   when the device coordinate plane is rotated. Keep the visible track slim. */
html.overlay-camera-layout #cameraSurface .zoom-control{min-height:46px;padding:0 10px;grid-template-columns:auto minmax(0,1fr) var(--zoom-readout-width,42px);touch-action:none}
html.overlay-camera-layout #cameraSurface #zoomRange{height:44px;margin:0;min-width:0;touch-action:none}
html.overlay-camera-layout #cameraSurface #zoomValue{font-variant-numeric:tabular-nums;width:var(--zoom-readout-width,42px);min-width:0;text-align:center}
html.overlay-camera-layout #cameraSurface .status-bar{left:calc((100% + var(--device-safe-left) - var(--device-safe-right))/2);right:auto;width:var(--overlay-status-extent,120px);height:var(--overlay-status-extent,120px);transform:translateX(-50%);display:grid;place-items:center}
html.overlay-camera-layout #cameraSurface .status-bar>.device-upright{display:flex;flex-direction:column;gap:2px;max-width:min(208px,calc(var(--device-width) - var(--device-safe-left) - var(--device-safe-right) - 24px));width:max-content;overflow:visible;white-space:normal;text-align:center;line-height:1.2}
html.overlay-camera-layout #cameraSurface .status-bar>.device-upright>span{white-space:normal;overflow-wrap:anywhere;max-width:100%}

/* The modal owns one scrolling body; the handle never competes with list pans. */
.gallery-dialog{position:fixed;inset:auto 0 var(--gallery-sheet-bottom,0px);margin:0 auto;width:min(100%,960px);height:var(--gallery-sheet-height,80dvh);max-height:var(--gallery-sheet-max-height,100dvh);transform:translateY(var(--gallery-sheet-offset,0px));padding:8px max(14px,env(safe-area-inset-right)) calc(13px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left));overflow:hidden;border-radius:18px 18px 0 0;border-bottom:0}
.gallery-dialog[open]{display:flex;flex-direction:column}
.gallery-sheet-sizing{display:flex;flex:0 0 44px}
.gallery-dialog .gallery-header{position:relative;top:auto;flex:0 0 auto;gap:8px;padding:0 0 8px;min-width:0}
.gallery-header>div{flex:1;min-width:0}.gallery-header h2{white-space:nowrap}
#gallerySheetBody{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.gallery-dialog .gallery-toolbar{position:sticky;top:0;display:flex;flex-wrap:wrap;gap:6px;padding:8px 0;align-items:center}
#gallerySelectionCount{flex:1 0 100%;font-weight:700}
#gallerySelectionNotice{margin:4px 0 10px}
.gallery-dialog:not(.is-selecting) .gallery-select{display:none}
.gallery-dialog .gallery-open{touch-action:pan-y;user-select:none;-webkit-touch-callout:none}
.gallery-card[data-selected="true"] .gallery-open{box-shadow:inset 0 0 0 3px #98cbff}
.gallery-dialog.is-resizing{user-select:none}
.gallery-dialog.gallery-actions-scroll .gallery-toolbar{position:relative;top:auto}

.camera-transition-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none;background:#000}.camera-transition-frame.mirrored{transform:scaleX(-1)}.camera-stage[data-transitioning="true"]::after{content:"切替中…";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;background:#0009;color:white;border-radius:8px;padding:6px 10px;font-size:.8rem;pointer-events:none}

/* Selection actions overlay the sheet; their clearance never changes on selection. */
.gallery-dialog { --gallery-action-bar-height: calc(58px + 1rem); }
#gallerySelectionButton { flex: 0 0 auto; min-width: 64px; min-height: 44px; white-space: nowrap; }
#galleryActionClearance { height: calc(var(--gallery-action-bar-height) + 12px); flex-shrink: 0; }
.gallery-dialog .gallery-action-dock {
  position: absolute; top: auto; bottom: max(6px, env(safe-area-inset-bottom, 0px));
  left: max(14px, env(safe-area-inset-left, 0px)); right: max(14px, env(safe-area-inset-right, 0px));
  z-index: 6; height: var(--gallery-action-bar-height); padding: 6px 8px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 44px;
  gap: 2px 6px; background: var(--panel, #181c22); border: 1px solid var(--line, #3b414c);
  border-radius: 16px; box-shadow: 0 -4px 18px #0005;
}
.gallery-action-status { grid-column: 1 / -1; min-width: 0; align-self: center; text-align: center; font-size: .75rem; line-height: 1.2; }
.gallery-action-status > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-dialog #gallerySelectionCount { font-size: inherit; font-weight: 600; }
.gallery-dialog #gallerySelectionNotice { margin: 0; font-size: inherit; }
.gallery-dialog .gallery-action-dock > button { grid-column: auto; min-width: 44px; min-height: 44px; padding: 8px; display: grid; place-items: center; }
.gallery-action-dock svg { display: block; width: 24px; height: 24px; }
@media (max-height: 400px) {
  .gallery-dialog #gallerySummary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 239px) {
  .gallery-dialog { --gallery-action-bar-height: calc(104px + 1rem); }
  .gallery-dialog .gallery-action-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) 44px 44px; }
}

/* Reserve both header controls before selection, including on narrow/large-text layouts. */
.gallery-dialog { container-name: history-sheet; container-type: inline-size; }
.gallery-dialog .gallery-header { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto auto; gap: 8px; align-items: center; }
.gallery-header > .gallery-selection-controls { grid-row: 2; grid-column: 1 / -1; display: grid; grid-template-columns: calc(6em + 24px) max(64px, calc(2em + 24px)); gap: 8px; justify-content: end; min-width: 0; font-size: .85rem; }
.gallery-header > .close-button { grid-row: 1; grid-column: 2; }
.gallery-header h2 { line-height: 1.2; }
.gallery-header #gallerySummary { height: 1.25em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-dialog .gallery-selection-controls > button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: inherit; white-space: nowrap; }
.gallery-dialog #selectAllButton { visibility: hidden; pointer-events: none; }
.gallery-dialog.is-selecting #selectAllButton { visibility: visible; pointer-events: auto; }
.gallery-dialog #exportPdfButton { padding: 6px; }
.gallery-dialog #exportPdfButton svg { width: 32px; height: 32px; }
@container history-sheet (min-width: calc(10rem + 150px)) {
  .gallery-dialog .gallery-header { grid-template-columns: minmax(0, 1fr) auto 44px; grid-template-rows: auto; }
  .gallery-header > .gallery-selection-controls { grid-row: 1; grid-column: 2; }
  .gallery-header > .close-button { grid-column: 3; }
}

/* One consolidated set of current-item actions; the content scrolls above it. */
.review-dialog[open] { display: flex; flex-direction: column; height: min(900px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
.review-dialog .review-layout { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.review-dialog .review-action-dock { flex: 0 0 60px; position: relative; bottom: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 8px 0; background: #111318; }
.review-action-dock > button { grid-column: auto !important; min-width: 44px; min-height: 44px; padding: 8px; display: grid; place-items: center; }
.review-action-dock svg { width: 24px; height: 24px; }
.review-action-dock #reviewPdfButton { padding: 6px; }
.review-action-dock #reviewPdfButton svg { width: 32px; height: 32px; }
.review-dialog .review-viewer, .review-dialog .review-media { min-height: 0; max-height: min(78dvh, calc(100dvh - 160px)); }
@media (max-width: 700px) {
  .review-dialog[open] { height: calc(100dvh - 8px); max-height: calc(100dvh - 8px); }
  .review-dialog .review-viewer, .review-dialog .review-media { max-height: min(48dvh, calc(100dvh - 160px)); }
}

/* Keep an expanded/localized title inside its reserved header column. */
.gallery-header h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Larger camera-rail controls only for roomy, mouse/keyboard-first viewports.
   Touch-first screens and short landscape viewports retain the existing UI. */
@media (min-width: 1000px) and (min-height: 600px) and (hover: hover) and (pointer: fine) {
  html.overlay-camera-layout #cameraSurface {
    --pc-controls-enabled: 1;
    --pc-utility-size: max(56px, calc(2.75rem + 12px));
    --pc-secondary-size: max(72px, calc(3.5rem + 16px));
    --pc-shutter-size: max(96px, calc(5rem + 16px));
    --pc-mic-width: max(80px, calc(4.5rem + 12px));
    --pc-mic-height: max(78px, calc(4rem + 14px));
  }
  html.overlay-camera-layout #cameraSurface .camera-top-controls { gap: 8px; }
  html.overlay-camera-layout #cameraSurface .camera-top-controls > button {
    width: var(--pc-utility-size); height: var(--pc-utility-size); min-width: var(--pc-utility-size); min-height: var(--pc-utility-size); flex-basis: var(--pc-utility-size);
    padding: 6px; font-size: .9rem;
  }
  html.overlay-camera-layout #cameraSurface .camera-top-controls > button svg { width: 28px; height: 28px; }
  html.overlay-camera-layout #cameraSurface .bottom-controls {
    height: var(--pc-shutter-size); min-height: var(--pc-shutter-size);
    grid-template-columns: var(--pc-secondary-size) 1fr var(--pc-secondary-size); grid-template-rows: var(--pc-shutter-size);
  }
  html.overlay-camera-layout #cameraSurface #galleryButton,
  html.overlay-camera-layout #cameraSurface #settingsButton { width: var(--pc-secondary-size); height: var(--pc-secondary-size); font-size: .9rem; }
  html.overlay-camera-layout #cameraSurface #settingsButton svg { width: 32px; height: 32px; }
  html.overlay-camera-layout #cameraSurface #settingsButton { font-size: 2rem; }
  html.overlay-camera-layout #cameraSurface #shutterButton { width: var(--pc-shutter-size); height: var(--pc-shutter-size); padding: 8px; }
  html.overlay-camera-layout #cameraSurface .mode-switcher > .mode-button { min-height: var(--pc-utility-size); font-size: 1.05rem; }
  html.overlay-camera-layout #cameraSurface .microphone-status { width: var(--pc-mic-width); height: var(--pc-mic-height); min-height: var(--pc-mic-height); }
  html.overlay-camera-layout #cameraSurface .microphone-status-current { font-size: .75rem; }
  html.overlay-camera-layout #cameraSurface .microphone-state-line { font-size: .9rem; }
  html.overlay-camera-layout #cameraSurface .camera-top-controls > button > .device-upright,
  html.overlay-camera-layout #cameraSurface .bottom-controls > button > .device-upright { max-width: none; }
  html.overlay-camera-layout #cameraSurface .mode-switcher > .mode-button > .device-upright { max-width: calc(var(--pc-utility-size) - 8px); }
  html.overlay-camera-layout.immersive-mode #cameraSurface .camera-top-controls .fullscreen-button { width: var(--pc-utility-size); height: var(--pc-utility-size); min-width: var(--pc-utility-size); flex-basis: var(--pc-utility-size); }
}