/* Existing controls are moved into native dialogs on compact screens. */
.mobile-only { display: none; }
.mobile-sheet { width: min(540px, calc(100% - 16px)); color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 20px; padding: 0; overflow: hidden; box-shadow: var(--shadow); }
.mobile-sheet::backdrop { background: #193b3280; }
.mobile-sheet[open] { display: flex; flex-direction: column; }
.mobile-sheet-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mobile-sheet-heading h2 { margin: 0; min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.mobile-sheet-heading button { flex: 0 0 44px; min-height: 44px; }
.mobile-sheet-body { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 12px; }
.mobile-sheet :focus-visible { outline: 3px solid #56856e; outline-offset: 2px; }
.mobile-menu .mobile-sheet-body { padding: 0 18px 18px; }
.mobile-menu section + section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 8px; }
.mobile-menu h3 { margin: 16px 0 12px; font-size: 14px; }
.mobile-menu-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mobile-menu-actions button { min-height: 48px; white-space: normal; padding: 10px; font-size: 13px; overflow-wrap: anywhere; }
.mobile-setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; font-size: 14px; }
.mobile-menu .volume-control { display: flex; width: 130px; }
.mobile-menu .volume-control input { min-height: 44px; }
.mobile-menu .canvas-help { position: static; max-width: none; margin: 14px 0; display: block; }
.mobile-menu .canvas-help summary { padding-block: 8px; }
.mobile-menu .leave-button { width: 100%; min-height: 48px; }

@media (max-width: 900px) {
  :root { --bar-content-height: 56px; }
  .welcome { height: var(--visible-height, 100dvh); min-height: 0; align-items: safe center; padding: max(12px, var(--safe-top)) max(12px, var(--safe-right)) max(12px, var(--safe-bottom)) max(12px, var(--safe-left)); }
  .welcome-card { margin-block: 8px; }
  .welcome-card h1 { white-space: normal; overflow-wrap: anywhere; line-height: 1.08; }
  .starting-sand { flex-wrap: wrap; }
  .starting-sand select { max-width: 100%; min-width: 0; min-height: 44px; }
  input:not([type="range"]):not([type="checkbox"]), textarea, select { font-size: 16px !important; }
  input, textarea, select { scroll-margin-block: 64px; }
  button, summary, input[type="range"] { touch-action: manipulation; }
  .language-toggle, .canvas-button, .icon-button, .close-button, .workspace-dialog button { min-height: 44px; }
  .compact-workspace .mobile-only { display: block; }
  .compact-workspace .session-bar { gap: 8px; }
  .compact-workspace .session-actions { gap: 4px; margin-left: auto; }
  .compact-workspace .session-actions .icon-button { display: inline-flex; width: 44px; min-width: 44px; height: 44px; }
  .compact-workspace .session-code-button { flex-shrink: 0; min-height: 44px; font-size: 12px; padding-inline: 8px; }
  .compact-workspace .app.active { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; padding: var(--bar-height) var(--safe-right) var(--safe-bottom) var(--safe-left); }
  .compact-workspace #three { border-radius: 0; box-shadow: none; }
  .compact-workspace .file-actions { display: none; }
  .compact-workspace .scene-quick { top: 8px; left: 8px; right: auto; gap: 4px; align-items: center; }
  .compact-workspace .scene-quick button { width: 44px; min-width: 44px; padding: 0; font-size: 22px; }
  .compact-workspace .scene-role { order: 1; padding: 0 4px; max-width: 85px; font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
  .compact-workspace .voice-status-panel { top: 8px; left: 190px; right: 8px; max-width: none; min-height: 44px; padding: 6px 8px; font-size: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .compact-workspace .voice-status-panel button { min-height: 44px; white-space: normal; }
  .compact-workspace .object-toolbar { top: 64px; left: 8px; right: 8px; width: max-content; max-width: calc(100% - 16px); transform: none; scrollbar-width: thin; }
  .compact-workspace .object-toolbar button { flex: 0 0 auto; min-height: 44px; min-width: 44px; font-size: 13px; }
  .compact-workspace .object-toolbar::-webkit-scrollbar { display: block; height: 3px; }
  .compact-workspace #objectDetailsBtn { order: -1; max-width: 130px; white-space: normal; }
  .compact-workspace .mobile-dock { position: absolute; z-index: 6; bottom: 0; left: 0; right: 0; padding: 6px 8px; background: #fffdf7f2; border-top: 1px solid var(--line); }
  #mobileNavigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  #mobileNavigation > button { position: static; min-height: 52px; min-width: 0; padding: 5px 8px; font-size: 12px; font-weight: 650; overflow-wrap: anywhere; }
  #mobileNavigation > [data-catalog-open] { background: var(--accent-dark); color: white; border-color: var(--accent-dark); }
  #mobileNavigation > button[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); }
  #mobileNavigation small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #mobileBrushSlot .brush-control { display: grid; grid-template-columns: auto minmax(60px, 1fr) 22px; padding: 0 6px 4px; gap: 10px; font-size: 12px; }
  #mobileBrushSlot .brush-control > span { display: block; }
  #mobileBrushSlot input { min-height: 44px; }
  .compact-workspace .chosen-cards { gap: 8px; touch-action: pan-y; }
  .compact-workspace .chosen-cards .placed-object-select { min-height: 148px; padding-top: 14px; }
  .compact-workspace .chosen-thumbnail { width: 48px; height: 48px; }
  .compact-workspace .chosen-cards .placed-object-delete { min-width: 44px; min-height: 44px; font-size: 23px; }
  .mobile-sheet, .app-dialog, .workspace-dialog {
    position: fixed; top: calc(var(--visible-top, 0px) + max(8px, var(--safe-top))); bottom: auto; left: var(--safe-left); right: var(--safe-right); margin: 0 auto;
    max-height: calc(var(--visible-height, 100dvh) - max(8px, var(--safe-top)) - max(8px, var(--safe-bottom)));
    max-width: calc(100% - var(--safe-left) - var(--safe-right) - 16px); overscroll-behavior: contain;
  }
  .mobile-sheet { height: calc(var(--visible-height, 100dvh) - max(8px, var(--safe-top)) - max(8px, var(--safe-bottom))); }
  .mobile-sheet .sidebar { display: flex; flex-direction: column; overflow: visible; gap: 12px; }
  .mobile-sheet .sidebar .tool-card { padding: 10px; overflow: visible; }
  .mobile-sheet #toolSeg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-sheet #toolSeg button { min-height: 66px; font-size: 11px; }
  .mobile-sheet .segmented-control { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-sheet .segmented-control button { min-height: 44px; font-size: 12px; }
  .mobile-sheet .sidebar .library-card { height: 480px; min-height: 380px; flex: 0 0 480px; }
  .mobile-sheet .section-heading { padding: 14px 14px 10px; }
  .mobile-sheet .sidebar .workspace-panel { padding: 14px; }
  .mobile-sheet .workspace-panel summary { min-height: 44px; display: flex; align-items: center; }
  .mobile-sheet .workspace-panel summary::before { content: '›'; padding-right: 10px; font-size: 22px; }
  .mobile-sheet .workspace-panel details[open] summary::before { content: '⌄'; }
  .mobile-sheet .workspace-panel :is(button, select) { min-height: 44px; }
  .mobile-sheet .palette-header { padding: 8px; }
  .mobile-sheet .search-input { height: 44px; padding-right: 46px; }
  .mobile-sheet .clear-search { width: 44px; height: 44px; top: 0; right: 0; }
  .mobile-sheet .category-tab { min-height: 44px; min-width: 44px; padding-inline: 10px; }
  .mobile-sheet .palette-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-auto-rows: 116px; padding: 8px; gap: 8px; }
  .mobile-sheet .chip-name { font-size: 12px; }
  .mobile-sheet .placed-objects-panel { gap: 8px; padding: 0 10px 10px; }
  .mobile-sheet .placed-object-select { min-height: 60px; }
  .mobile-sheet .placed-object-select small { font-size: 11px; }
  .mobile-sheet .placed-objects-list { overscroll-behavior: contain; }
  .workspace-dialog { width: min(680px, calc(100% - 16px)); padding: 16px; }
  .workspace-dialog header button { min-width: 44px; flex-shrink: 0; }
  .workspace-dialog .workspace-row > button { flex: 1 1 130px; }
  .workspace-dialog .workspace-row label { flex-basis: 100%; }
  .workspace-dialog :is(input, textarea, select) { max-width: 100%; min-width: 0; }
  .workspace-dialog .stage-entry strong { flex-basis: 100%; }
  .workspace-dialog .stage-entry button { flex: 1 1 100px; }
  .account-dialog { padding: 18px; }
  .app-dialog .dialog-heading { flex-shrink: 0; }
  .saved-trays li, .saved-trays .account-actions { flex-wrap: wrap; }
  .saved-trays .account-actions { flex-shrink: 1; }
  .chat-panel { top: calc(var(--visible-top, 0px) + var(--bar-height) + 4px); bottom: auto; right: max(4px, var(--safe-right)); width: min(430px, calc(100% - var(--safe-left) - var(--safe-right) - 8px)); height: calc(var(--visible-height, 100dvh) - var(--bar-height) - 8px - var(--safe-bottom)); border-radius: 16px; }
  .chat-header { padding: 10px 12px; }
  .chat-header .eyebrow { display: none; }
  .chat-header .close-button { min-width: 44px; }
  .chat-form { padding: 8px; }
  .chat-form textarea { resize: none; min-height: 44px; max-height: 76px; }
  .chat-messages { overscroll-behavior: contain; }
  .toast { bottom: calc(var(--safe-bottom) + 78px); }
  .card-picker { height: calc(var(--visible-height, 100dvh) - max(8px, var(--safe-top)) - max(8px, var(--safe-bottom))); padding: 14px; }
  .card-picker .deck-toolbar { flex-shrink: 0; }
  .deck-tabletop { min-width: 0; padding: 12px; }
  .deck-motion, .deck-switch { min-height: 44px; }
  .deck-library { width: min(600px, calc(100% - 16px)); padding: 16px; overflow: auto; }
}

@media (max-width: 600px) {
  .welcome-card { padding: 34px 22px 24px; }
  .welcome-copy { margin-block: 14px 20px; font-size: 14px; }
  .card-picker { padding: 12px; }
  .card-picker .dialog-heading { margin: 0 0 8px; }
  .card-picker .dialog-heading h2 { font-size: 22px; }
  .deck-toolbar { margin: 0 0 10px; }
  .deck-toolbar .catalog-intro { font-size: 12px; }
  .deck-search input { height: 44px; }
  .deck-stage { flex-direction: row; align-items: center; min-height: 190px; gap: 12px; padding: 8px 0 22px; }
  .deck-focus-card { --focus-height: clamp(150px, 43vw, 210px); transform: rotate(-2deg); }
  .deck-selection { width: auto; min-width: 0; max-width: none; text-align: left; }
  .deck-selection h3 { font-size: 23px; margin: 6px 0 12px; }
  .deck-selection-hint { display: none; }
  .deck-place { min-height: 48px; font-size: 12px; padding: 8px; }
  .deck-motion { font-size: 11px; padding: 4px; }
  .deck-bottom { grid-template-columns: minmax(0, 1fr) 76px; gap: 8px; }
  .deck-hand-heading { padding-inline: 0; }
  .deck-hand-heading h3 { font-size: 12px; }
  .deck-pagination { gap: 4px; }
  .deck-pagination button { flex: 0 0 44px; }
  .deck-keyboard-hint { display: none; }
  .deck-switch { min-width: 0; padding: 8px 0 18px; }
  .deck-switch-label { font-size: 11px; }
  .deck-switch-hint { display: none; }
  .category-decks { grid-template-columns: 1fr; }
  .category-deck { min-height: 68px; }
  .category-deck-copy strong { font-size: 14px; }
}

@media (max-width: 360px) {
  .mobile-sheet #toolSeg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .compact-workspace .scene-role { display: none; }
  .compact-workspace .voice-status-panel { left: auto; max-width: 48%; }
  .compact-workspace .mobile-dock { left: auto; width: min(440px, 60%); border: 1px solid var(--line); border-radius: 14px 0 0 0; }
  .compact-workspace #mobileNavigation > button { min-height: 44px; }
  .compact-workspace .chosen-cards .placed-object-select { min-height: 108px; padding: 8px; }
  .compact-workspace .chosen-thumbnail { width: 30px; height: 30px; }
}

@media (min-width: 600px) and (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .card-picker { padding: 10px; }
  .card-picker .dialog-heading { margin-bottom: 4px; }
  .card-picker .dialog-heading .eyebrow, .deck-toolbar .catalog-intro { display: none; }
  .deck-toolbar { margin-bottom: 6px; justify-content: flex-end; }
  .deck-tabletop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
  .deck-stage { min-height: 175px; padding: 4px 0 14px; gap: 16px; }
  .deck-focus-card { --focus-height: 160px; }
  .deck-selection h3 { font-size: 23px; }
  .deck-selection-hint { display: none; }
  .deck-bottom { grid-template-columns: minmax(0, 1fr) 76px; gap: 6px; }
  .deck-stack { width: 56px; height: 80px; }
  .deck-hand-heading { flex-wrap: wrap; gap: 4px; }
  .deck-hand { padding-block: 20px 10px; }
  .object-hand-card { width: 84px; flex-basis: 84px; height: 116px; }
  .deck-keyboard-hint, .deck-switch-hint { display: none; }
}

@media (pointer: coarse) {
  .workspace-dialog :is(input, textarea, select), .account-dialog input { font-size: 16px; }
  .workspace-dialog button, .workspace-panel button, .chosen-pager button { min-height: 44px; }
}