/* Estúdio Pixel — responsivo (tablet + mobile) */

.pixel-studio__backdrop {
  display: none !important;
}

.pixel-studio {
  max-width: 100vw;
  overflow-x: hidden;
}

:root {
  --studio-bar-h: 68px;
  --studio-dock-safe: env(safe-area-inset-bottom, 0px);
  --studio-dock-estimated: 118px;
}

/* ── Tablet (≤900px) ───────────────────────────────────── */

@media (max-width: 900px) {
  :root {
    --studio-panel-w: min(100vw - 1rem, 320px);
    --pix-square: 44px;
    --studio-mobile-tab-rail: clamp(52px, 14vw, 68px);
    /* Tipografia modular — escala fluida (legível em telemóvel) */
    --pix-font-xs: clamp(12px, 3.2vw, 14px);
    --pix-font-sm: clamp(13px, 3.5vw, 15px);
    --pix-font-md: clamp(14px, 3.8vw, 16px);
    --pix-font-lg: clamp(15px, 4.1vw, 17px);
    --pix-font-xl: clamp(16px, 4.4vw, 18px);
    --pix-font-btn: clamp(14px, 3.75vw, 17px);
    --pix-font-wide: var(--pix-font-btn);
    --studio-mobile-tab-font: var(--pix-font-md);
    --studio-drawer-head-h: calc(max(10px, env(safe-area-inset-top, 0px)) + 52px);
    --pix-btn-pad-y: clamp(8px, 2.1vw, 10px);
    --pix-btn-pad-x: clamp(10px, 2.8vw, 14px);
    --pix-btn-wide-h: clamp(38px, 10vw, 44px);
    --pix-wide-min-w: clamp(118px, 36vw, 140px);
  }

  .pixel-studio {
    font-size: var(--pix-font-md);
  }

  .pix-tabs--studio .pix-tabs__btn,
  .color-picker-drop__tab {
    font-size: var(--pix-font-md);
  }

  .layer-slider,
  .layer-slider__label,
  .layer-slider__val {
    font-size: var(--pix-font-md);
  }

  .panel-title,
  .layer-panel-head__title,
  .studio-panel-drawer-head__title {
    font-size: var(--pix-font-lg);
  }

  .panel-hint,
  .layer-merge-drop__hint {
    font-size: var(--pix-font-sm);
  }

  /* Botões com texto — mesma escala modular */
  .pix-btn,
  .pix-btn__label,
  .pixel-studio__new .pix-btn,
  .pixel-studio__save .pix-btn,
  .studio-modal .pix-btn,
  .layer-merge-drop .pix-btn,
  .layer-panel-head__merge,
  .layer-popover__item,
  .dock-shapes-drop__items button,
  .dock-shapes-menu button,
  .dock-lasso-drop__items button,
  .studio-context-menu button,
  .studio-resize .pix-btn {
    font-size: var(--pix-font-btn);
  }

  .pix-btn__label {
    line-height: var(--pix-line-height);
  }

  .pixel-studio__new .pix-btn__face,
  .pixel-studio__save .pix-btn__face {
    min-height: var(--pix-btn-wide-h);
  }

  .pixel-studio {
    --studio-logo-size: 48px;
    --studio-bar-h: calc(12px + max(var(--studio-logo-size), var(--studio-rail-size)));
  }

  .pixel-studio__panel-stack {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: var(--studio-drawer-head-h);
  }

  .pixel-studio__panel-body {
    overflow: visible;
  }

  .pixel-studio__panel-content {
    flex: 1 0 auto;
    min-height: 0;
    overflow: visible;
  }

  .pixel-studio__bar {
    padding: 6px 12px;
    gap: 8px;
    position: relative;
    z-index: 10050;
  }

  #studio-canvas.pixel-studio__center,
  .pixel-studio.is-panel-collapsed #studio-canvas.pixel-studio__center {
    inset: 0;
    right: 0;
  }

  .pixel-studio:not(.is-panel-collapsed) #studio-canvas.pixel-studio__center {
    right: 0;
  }

  .pixel-studio__backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 10030;
    border: none;
    padding: 0;
    margin: 0;
    background: rgba(54, 66, 72, 0.45);
    cursor: pointer;
  }

  .pixel-studio__backdrop[hidden] {
    display: none !important;
  }

  .studio-panel-drawer-head {
    display: none;
  }

  .pixel-studio__right {
    display: flex;
    top: 0;
    left: auto;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    box-shadow: -4px 0 0 var(--sprout-border);
    z-index: 10040;
    border-left: 2px solid var(--sprout-border);
    border-radius: 0;
  }

  .pixel-studio:not(.is-panel-collapsed) .pixel-studio__right {
    transform: translateX(0);
  }

  .pixel-studio.is-panel-collapsed .pixel-studio__right {
    pointer-events: none;
  }

  /* ── Painel lateral mobile: hierarquia clara, áreas com scroll ── */
  .pixel-studio__right {
    width: min(100vw, 400px);
    max-width: 100vw;
  }

  .studio-side-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .studio-side-nav__btn {
    flex: none;
    width: 100%;
  }

  .studio-side-nav__btn .pix-btn__face {
    min-height: 44px;
  }

  .pixel-studio__panel-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    overflow: hidden;
  }

  /* Tabs horizontais — fill width, sem gap nem padding lateral */
  .pix-tabs--studio {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-shrink: 0;
    gap: 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--sprout-panel-dark);
    border: none;
  }

  .pix-tabs--studio .pix-tabs__btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 2.75rem;
    margin: 0;
    padding: 10px 4px;
    border: none;
    border-radius: 0;
    background: var(--sprout-panel-dark);
    box-shadow: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sprout-ink-muted);
    -webkit-tap-highlight-color: transparent;
  }

  .pix-tabs--studio .pix-tabs__btn:not(.is-active) {
    border: none;
  }

  .pix-tabs--studio .pix-tabs__btn.is-active {
    padding: 10px 4px;
    margin: 0;
    background: var(--sprout-panel-light);
    color: var(--sprout-ink);
    border: none;
    border-radius: 0;
    box-shadow: none;
    z-index: 1;
    animation: none;
  }

  .pix-tabs--studio .pix-tabs__btn:active {
    animation: none;
  }

  .pix-tabs--studio .pix-tabs__btn:not(.is-active):hover {
    background: var(--sprout-panel);
    color: var(--sprout-ink);
  }

  .pix-tabs--studio .pix-tabs__btn:focus-visible {
    outline: 2px solid var(--sprout-focus, #5b9fd4);
    outline-offset: -2px;
  }

  .pix-tabs--studio .pix-tabs__btn span {
    display: block;
    width: max-content;
    max-width: 100%;
    height: auto;
    font-family: var(--pix-font);
    font-size: var(--studio-mobile-tab-font);
    font-weight: var(--pix-font-weight-bold);
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transform: none;
  }

  .sprout-ui .pix-tabs--studio .pix-tabs__btn {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .sprout-ui .pix-tabs--studio .pix-tabs__btn:not(.is-active) {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .sprout-ui .pix-tabs--studio .pix-tabs__btn.is-active {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .pixel-studio__panel-content {
    flex: 1 0 auto;
    min-height: 0;
    min-width: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: var(--sprout-panel-light);
  }

  .pixel-studio__save {
    flex-shrink: 0;
  }

  /* Um único scroll: coluna da direita (Camadas + Camada ativa juntos) */
  .pixel-studio__panel-content > .studio-panel {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    overflow-y: visible;
  }

  .pixel-studio__panel-content > .studio-panel[data-panel="layer"].is-active {
    flex: 0 0 auto;
    min-height: auto;
    width: 100%;
    box-sizing: border-box;
    border-top: none;
    box-shadow: none;
  }

  .pixel-studio__panel-content > .studio-panel.is-active {
    border-top: none;
    box-shadow: none;
  }

  .studio-panel {
    padding: 12px;
    gap: 12px;
  }

  .studio-panel[data-panel="layer"] {
    display: none;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }

  .studio-panel[data-panel="layer"].is-active {
    display: flex;
  }

  .studio-panel-scroll--layer {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    overflow-y: visible;
    box-sizing: border-box;
    border: 2px solid var(--sprout-border);
    border-top: none;
    border-bottom: none;
    border-left: none;
    --studio-layer-panel-inset-x: 12px;
    --studio-layer-panel-padding-top: 12px;
  }

  .studio-panel[data-panel="layer"] .layer-panel-head {
    flex-shrink: 0;
    border-top: none;
    box-shadow: none;
  }

  .studio-panel-scroll--layer .studio-layers-scroll {
    flex: 0 0 auto;
    flex-grow: 0;
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: visible;
    overflow-y: visible;
  }

  .studio-panel-scroll--layer .studio-layers {
    overflow: visible;
  }

  .studio-panel-scroll--layer .layer-active-controls {
    margin: 0;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    border-top: 2px dashed var(--sprout-border);
    border-bottom: none;
    flex-shrink: 0;
  }

  .studio-panel[data-panel="layer"] .panel-hint--layer-tools {
    display: none;
  }

  .studio-layers li {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    min-height: 48px;
  }

  .layer-name-row--has-actions .layer-hover-zone {
    display: none;
  }

  .layer-name-row--has-actions .layer-actions {
    gap: 6px;
  }

  .layer-name-row--has-actions .layer-actions .layer-menu {
    display: inline-flex;
    width: var(--layer-row-control-size);
    min-width: var(--layer-row-control-size);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border: 2px solid var(--sprout-border);
    box-shadow: var(--neo-raised);
  }

  .layer-name-input {
    font-size: max(16px, var(--pix-font-md));
    min-width: 0;
  }

  .layer-slider .pix-range {
    --range-hit-h: 36px;
    height: var(--range-hit-h);
  }

  .layer-slider input[type="range"] {
    height: var(--range-hit-h);
    min-height: var(--range-hit-h);
  }

  .layer-slider input[type="range"]::-webkit-slider-runnable-track {
    margin-block: calc((var(--range-hit-h) - var(--range-track-h)) / 2);
  }

  .studio-palette,
  .studio-custom-palette {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .studio-panel-footer {
    margin: 0;
    width: 100%;
    padding: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    border-top: 2px solid var(--sprout-border);
    background: var(--sprout-panel);
  }

  .pixel-studio__coords {
    display: none;
    grid-column: 1 / -1;
  }

  /* Navegação — painel à esquerda do chevron; abrir empurra o toggle só no eixo X */
  .pixel-studio__nav-tools {
    --studio-nav-mobile-gap: 6px;
    left: calc(16px + env(safe-area-inset-left, 0px));
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    padding: 0;
    gap: var(--studio-nav-mobile-gap);
    overflow: visible;
    transition: gap 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .pixel-studio.is-nav-mobile-collapsed .pixel-studio__nav-tools {
    gap: 0;
  }

  .nav-mobile-toggle {
    display: inline-flex;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: none;
  }

  .nav-mobile-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: var(--studio-control-size);
    max-width: var(--studio-control-size);
    min-width: var(--studio-control-size);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      min-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .pixel-studio.is-nav-mobile-collapsed .nav-mobile-panel {
    width: 0;
    max-width: 0;
    min-width: 0;
    margin: 0;
    padding: 0;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(0);
    transition:
      width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      min-width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease,
      visibility 0s linear 0.32s;
  }

  .nav-tool {
    width: var(--studio-control-size);
    height: var(--studio-control-size);
    min-height: var(--studio-control-size);
    flex-shrink: 0;
  }

  :root {
    --studio-dock-mobile-handle: calc(var(--dock-tool-size) + 20px);
  }

  .pixel-studio.is-dock-mobile-collapsed {
    --studio-dock-estimated: var(--studio-dock-mobile-handle);
  }

  /* Dock: barra inferior full-width (não segue o centro do canvas) */
  .pixel-studio__dock {
    --dock-grid-gap: 8px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px max(8px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left));
    grid-template-columns: unset;
    grid-template-rows: unset;
    overflow-x: hidden;
    overflow-y: visible;
    transition: padding 0.24s ease;
  }

  .dock-mobile-primary-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
    flex-shrink: 0;
  }

  .dock-tools-mobile-bar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--dock-grid-gap, 6px);
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dock-tools-mobile-bar__side {
    display: contents;
  }

  .dock-tools-mobile-bar__side--start > .dock-tool:nth-child(1) {
    grid-column: 1;
    justify-self: center;
  }

  .dock-tools-mobile-bar__side--start > .dock-tool:nth-child(2) {
    grid-column: 2;
    justify-self: center;
  }

  .dock-tools-mobile-bar__side--start > .dock-tool:nth-child(3) {
    grid-column: 3;
    justify-self: center;
  }

  .dock-tools-mobile-bar > .dock-mobile-toggle {
    grid-column: 4;
    justify-self: center;
  }

  .dock-tools-mobile-bar__side--end > .dock-tool:nth-child(1) {
    grid-column: 5;
    justify-self: center;
  }

  .dock-tools-mobile-bar__side--end > .dock-tool:nth-child(2) {
    grid-column: 6;
    justify-self: center;
  }

  .dock-tools-mobile-bar__side--end > .dock-shapes {
    grid-column: 7;
    justify-self: center;
  }

  .dock-tools-mobile-bar .dock-hud-tool,
  .dock-tools-mobile-bar .dock-shapes {
    flex: 0 0 auto;
  }

  .dock-mobile-primary-row,
  .dock-mobile-toggle {
    display: flex !important;
  }

  .dock-mobile-panel {
    display: flex !important;
  }

  .dock-mobile-toggle.dock-hud-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dock-tool-size);
    height: var(--dock-tool-size);
    min-width: var(--dock-tool-size);
    min-height: var(--dock-tool-size);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    background: var(--sprout-panel-dark);
    border: 2px solid var(--sprout-border);
    box-shadow: var(--neo-inset);
    color: var(--sprout-ink);
  }

  .sprout-ui .dock-mobile-toggle.dock-hud-tool {
    background-color: var(--sprout-panel-dark) !important;
    border-radius: var(--pix-radius) !important;
    box-shadow: var(--neo-inset) !important;
  }

  .dock-mobile-toggle.dock-hud-tool:hover {
    background: var(--sprout-highlight);
  }

  .sprout-ui .dock-mobile-toggle.dock-hud-tool:hover {
    background-color: var(--sprout-highlight) !important;
  }

  .dock-mobile-toggle.dock-hud-tool.is-active,
  .dock-mobile-toggle.dock-hud-tool.is-open,
  .dock-mobile-toggle.dock-hud-tool.is-shape-active {
    background: var(--sprout-panel-dark);
    box-shadow: var(--neo-inset);
  }

  .sprout-ui .dock-mobile-toggle.dock-hud-tool.is-active,
  .sprout-ui .dock-mobile-toggle.dock-hud-tool.is-open,
  .sprout-ui .dock-mobile-toggle.dock-hud-tool.is-shape-active {
    background-color: var(--sprout-panel-dark) !important;
    box-shadow: var(--neo-inset) !important;
  }

  .dock-mobile-toggle.dock-hud-tool .pix-icon {
    opacity: 0.95;
  }

  .nav-mobile-toggle.nav-tool {
    background: var(--sprout-panel-dark);
    box-shadow: var(--neo-inset);
  }

  .dock-tool--desktop-bar,
  .dock-hud-sep--desktop-bar,
  #studio-shapes-desktop {
    display: none !important;
  }

  .dock-tool--mobile-extra {
    display: inline-flex;
  }

  .dock-mobile-secondary-bar__spacer {
    display: none !important;
  }

  .dock-hud-sep--mobile-extra {
    display: none !important;
  }

  .dock-mobile-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    max-height: 480px;
    opacity: 1;
    pointer-events: auto;
    transition: max-height 0.28s ease, opacity 0.2s ease, gap 0.24s ease;
  }

  .pixel-studio.is-dock-mobile-collapsed .dock-mobile-panel {
    max-height: 0;
    opacity: 0;
    gap: 0;
    pointer-events: none;
  }

  .pixel-studio.is-dock-mobile-collapsed .pixel-studio__dock {
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }

  .pixel-studio__dock.is-dock-mobile-bounce {
    animation: pix-mobile-sheet-bounce 0.36s steps(6);
    transform-origin: bottom center;
  }

  .dock-grid--tools {
    grid-column: 1 / -1;
    min-width: 0;
    max-width: 100%;
  }

  .dock-grid--colors {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--dock-grid-gap, 6px);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: unset;
  }

  .dock-hud-colors {
    grid-column: unset;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    align-self: stretch;
  }

  .dock-swatches-bar {
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dock-grid-gap, 6px);
  }

  .dock-swatches {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    gap: 3px;
  }

  .dock-layer-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dock-grid-gap, 6px);
    flex: 0 0 auto;
    width: auto;
  }

  .dock-layer-actions .dock-hud-tool,
  .dock-layer-actions .dock-hud-btn {
    grid-column: auto;
    width: var(--dock-tool-size);
    height: var(--dock-tool-size);
    min-width: var(--dock-tool-size);
    min-height: var(--dock-tool-size);
  }

  /* Secundária: 5 ferramentas + 2 layer actions na mesma grelha; cores na linha de baixo */
  .dock-mobile-secondary-bar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--dock-grid-gap, 6px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
    box-sizing: border-box;
    overflow: visible;
  }

  .dock-mobile-secondary-bar .dock-tools-secondary,
  .dock-mobile-secondary-bar .dock-grid--colors {
    display: contents;
  }

  .dock-mobile-secondary-bar .dock-hud-colors {
    grid-row: 2;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .dock-mobile-secondary-bar .dock-layer-actions {
    grid-row: 1;
    grid-column: 6 / 8;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: stretch;
    gap: var(--dock-grid-gap, 6px);
    width: 100%;
    min-width: 0;
  }

  .dock-mobile-secondary-bar .dock-layer-actions .dock-hud-tool,
  .dock-mobile-secondary-bar .dock-layer-actions .dock-hud-btn {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    grid-column: auto;
  }

  .dock-mobile-secondary-bar #studio-dock-layer-add,
  .dock-mobile-secondary-bar #studio-dock-layer-del {
    grid-column: auto;
    align-self: center;
    justify-self: center;
  }

  .dock-mobile-secondary-bar .dock-tools-secondary-tail {
    display: contents;
  }

  .dock-mobile-secondary-bar .dock-tool--mobile-extra {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
  }

  .dock-mobile-secondary-bar #studio-undo {
    grid-row: 1;
    grid-column: 2;
    justify-self: center;
  }

  .dock-mobile-secondary-bar #studio-redo {
    grid-row: 1;
    grid-column: 3;
    justify-self: center;
  }

  .dock-mobile-secondary-bar #studio-clear {
    grid-row: 1;
    grid-column: 4;
    justify-self: center;
  }

  .dock-mobile-secondary-bar #studio-dock-pin {
    grid-row: 1;
    grid-column: 5;
    justify-self: center;
  }

  .pixel-studio.is-panel-collapsed .pixel-studio__dock {
    max-width: none;
  }

  .dock-grid--dock-reveal {
    max-height: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    pointer-events: auto;
  }

  /* Ferramentas — scroll horizontal (esquerda / direita) */
  .dock-grid--tools {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dock-grid-gap, 6px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left));
    margin: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scroll-padding-inline: max(8px, env(safe-area-inset-left));
    scrollbar-width: none;
    grid-template-columns: unset;
  }

  .pixel-studio__dock.is-dock-pinned .dock-grid--tools,
  .pixel-studio__dock:hover .dock-grid--tools,
  .pixel-studio__dock:focus-within .dock-grid--tools,
  .pixel-studio__dock.is-shapes-menu-open .dock-grid--tools,
  .pixel-studio__dock.is-color-picker-open .dock-grid--tools {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .dock-grid--tools::-webkit-scrollbar {
    display: none;
  }

  .dock-mobile-secondary-bar .dock-grid--tools {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  .dock-mobile-secondary-bar .dock-grid--tools > * {
    grid-column: auto;
  }

  .dock-mobile-secondary-bar .dock-grid--tools > .dock-tool--mobile-extra,
  .dock-mobile-secondary-bar .dock-grid--tools #studio-undo,
  .dock-mobile-secondary-bar .dock-grid--tools #studio-redo,
  .dock-mobile-secondary-bar .dock-grid--tools #studio-clear,
  .dock-mobile-secondary-bar .dock-grid--tools #studio-dock-pin {
    flex: 0 0 auto;
  }

  .dock-grid--tools > *,
  .dock-grid--tools .dock-shapes {
    flex: 0 0 auto;
    scroll-snap-align: start;
    grid-column: auto;
  }

  .dock-hud-tool,
  .dock-hud-btn,
  .dock-shapes,
  .dock-hud-sep {
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .dock-hud-sep {
    width: 2px;
    min-width: 2px;
  }

  .dock-hud-btn,
  .dock-hud-tool,
  .pix-btn,
  .pix-tabs__btn,
  .layer-eye,
  .layer-lock {
    touch-action: manipulation;
  }

  .dock-swatch {
    border-radius: var(--pix-radius-sm);
  }

  .layer-slider input:not([type="range"]) {
    min-height: 32px;
  }

  .studio-modal__actions {
    flex-direction: column;
  }

  .studio-modal__actions .pix-btn--wide {
    flex: none;
    width: 100%;
  }
}

/* ── Mobile (≤600px) ──────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --studio-bar-h: 52px;
  }

  html, body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  #studio-canvas.pixel-studio__center {
    touch-action: none;
  }

  .studio-palette,
  .studio-custom-palette {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  :root {
    --studio-dock-estimated: 124px;
    --layer-row-control-size: 36px;
  }

  .pixel-studio__dock {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    bottom: 0;
    padding: 8px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom, 0px))
      max(6px, env(safe-area-inset-left));
    row-gap: 6px;
    overflow-x: hidden;
  }

  .dock-grid--tools {
    padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right));
  }

  .dock-hud-colors {
    padding: 4px;
  }

  .color-mode__left {
    gap: 4px;
  }

  .color-mode-swatch--fill {
    left: var(--color-mode-offset, 8px);
  }

  .dock-hud-sep {
    height: calc(var(--dock-tool-size) - 8px);
    margin: 0 2px;
  }

  .pt-toast {
    top: calc(var(--studio-bar-h) + 8px);
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    text-align: center;
  }

  .pt-toast.is-visible {
    transform: none;
  }
}

/* ── Mobile estreito (≤380px) ───────────────────────────── */

@media (max-width: 380px) {
  :root {
    --studio-mobile-tab-rail: clamp(48px, 13vw, 56px);
    --pix-font-xs: clamp(12px, 3.4vw, 13px);
    --pix-font-sm: clamp(13px, 3.6vw, 14px);
    --pix-font-md: clamp(14px, 3.9vw, 15px);
    --pix-font-lg: clamp(15px, 4.2vw, 16px);
    --pix-font-xl: clamp(16px, 4.5vw, 17px);
    --pix-font-btn: clamp(14px, 3.85vw, 16px);
    --pix-font-wide: var(--pix-font-btn);
    --pix-btn-wide-h: clamp(40px, 12vw, 44px);
  }

  .studio-layers li {
    gap: 6px;
  }

  .layer-name-input {
    flex: 1 1 100%;
    order: 3;
  }

  .layer-lock {
    flex-shrink: 0;
  }
}

/* ── Mobile: modais e drops como bottom sheet (acima do drawer 10040) ── */
@media (max-width: 900px) {
  .pixel-studio__sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(54, 66, 72, 0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .pixel-studio.is-mobile-sheet-open .pixel-studio__sheet-backdrop {
    display: block;
  }

  .studio-modal {
    z-index: 10100;
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .studio-modal__backdrop {
    z-index: 0;
    display: none;
  }

  .studio-modal__drop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    z-index: 1;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .studio-modal__drop.is-content-visible {
    transform: translateY(0);
  }

  .studio-modal__seed {
    display: none !important;
  }

  .studio-modal__drop.is-seed-only .studio-modal__card,
  .studio-modal__drop.is-width-open .studio-modal__card,
  .studio-modal__drop.is-height-open .studio-modal__card,
  .studio-modal__drop.is-content-visible .studio-modal__card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(85dvh, 480px);
    border-radius: var(--pix-radius) var(--pix-radius) 0 0;
    opacity: 1;
  }

  #studio-color-picker:not([hidden]),
  #studio-color-picker-bg:not([hidden]),
  .pix-drop--mobile-sheet:not([hidden]) {
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: translateY(100%) !important;
    z-index: 10100 !important;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #studio-color-picker.is-content-visible:not([hidden]),
  #studio-color-picker-bg.is-content-visible:not([hidden]),
  .pix-drop--mobile-sheet.is-content-visible:not([hidden]) {
    transform: translateY(0) !important;
  }

  #studio-color-picker .color-picker-drop__card,
  #studio-color-picker-bg .color-picker-drop__card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--pix-radius) var(--pix-radius) 0 0;
    opacity: 1;
    max-height: min(85dvh, 38rem);
  }

  #studio-color-picker .color-picker-drop__seed,
  #studio-color-picker-bg .color-picker-drop__seed {
    display: none !important;
  }

  #studio-color-picker.is-seed-only .color-picker-drop__card,
  #studio-color-picker.is-width-open .color-picker-drop__card,
  #studio-color-picker.is-height-open .color-picker-drop__card,
  #studio-color-picker.is-content-visible .color-picker-drop__card,
  #studio-color-picker-bg.is-seed-only .color-picker-drop__card,
  #studio-color-picker-bg.is-width-open .color-picker-drop__card,
  #studio-color-picker-bg.is-height-open .color-picker-drop__card,
  #studio-color-picker-bg.is-content-visible .color-picker-drop__card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(85dvh, 38rem) !important;
    opacity: 1 !important;
  }

  #studio-color-picker.is-content-visible .color-picker-drop__content,
  #studio-color-picker-bg.is-content-visible .color-picker-drop__content {
    opacity: 1;
  }

  .pix-drop--mobile-sheet .dock-shapes-drop__seed,
  .pix-drop--mobile-sheet .dock-lasso-drop__seed,
  .pix-drop--mobile-sheet .layer-merge-drop__seed,
  .pix-drop--mobile-sheet .color-picker-drop__seed {
    display: none !important;
  }

  .pix-drop--mobile-sheet .dock-shapes-drop__card,
  .pix-drop--mobile-sheet .dock-lasso-drop__card,
  .pix-drop--mobile-sheet .layer-merge-drop__card,
  .pix-drop--mobile-sheet .color-picker-drop__card,
  .pix-drop--mobile-sheet.is-seed-only .dock-shapes-drop__card,
  .pix-drop--mobile-sheet.is-seed-only .color-picker-drop__card,
  .pix-drop--mobile-sheet.is-width-open .color-picker-drop__card,
  .pix-drop--mobile-sheet.is-height-open .color-picker-drop__card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--pix-radius) var(--pix-radius) 0 0;
    opacity: 1;
  }

  #studio-color-picker.color-picker-drop,
  #studio-color-picker-bg.color-picker-drop,
  .pix-drop--mobile-sheet.color-picker-drop {
    width: 100% !important;
    max-width: 100% !important;
  }

  .pix-drop--mobile-sheet .dock-shapes-drop__card,
  .pix-drop--mobile-sheet .layer-merge-drop__card {
    max-height: min(70dvh, 360px);
  }

  .pix-drop--mobile-sheet.is-content-visible .dock-shapes-drop__items,
  .pix-drop--mobile-sheet.is-content-visible .layer-merge-drop__content,
  .pix-drop--mobile-sheet.is-content-visible .color-picker-drop__content {
    opacity: 1;
  }

  /* Bottom sheets — bounce no topo, base fixa em baixo (dois pulos) */
  #studio-color-picker.is-content-visible .color-picker-drop__card,
  #studio-color-picker-bg.is-content-visible .color-picker-drop__card,
  .pix-drop--mobile-sheet.is-content-visible .dock-shapes-drop__card,
  .pix-drop--mobile-sheet.is-content-visible .dock-lasso-drop__card,
  .pix-drop--mobile-sheet.is-content-visible .layer-merge-drop__card,
  .pix-drop--mobile-sheet.is-content-visible .color-picker-drop__card,
  .studio-modal__drop.is-content-visible .studio-modal__card {
    animation: pix-mobile-sheet-bounce 0.36s steps(6);
    transform-origin: bottom center;
  }

  /* Opções da camada — dropdown ancorado ao ⋮ (embaixo + esquerda), nunca bottom sheet */
  #studio-layer-popover.layer-popover.pix-drop {
    width: 11.5rem !important;
    max-width: min(11.5rem, calc(100vw - 16px)) !important;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 !important;
    transition: none;
    z-index: 10150 !important;
  }

  #studio-layer-popover.layer-popover.pix-drop.pix-drop--anchor-start {
    transform: none;
  }

  #studio-layer-popover .layer-popover__seed {
    display: block !important;
  }

  #studio-layer-popover .layer-popover__card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--pix-radius) !important;
    max-height: none !important;
  }

  #studio-layer-popover.is-content-visible .layer-popover__card {
    animation: pix-pop-all 0.28s steps(4);
    transform-origin: center center;
  }

  /* Biblioteca — grelha responsiva full-width (touch) */
  .color-picker-drop__grid--library {
    --library-slot-min: clamp(42px, 11vw, 52px);
    --library-slot-gap: clamp(8px, 2vw, 12px);
    --custom-palette-plus: calc(var(--library-slot-min) * 0.4);
    grid-template-columns: repeat(auto-fill, minmax(var(--library-slot-min), 1fr));
    grid-auto-rows: auto;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-inline: 8px;
    box-sizing: border-box;
  }

  .color-picker-drop__grid--library .dock-swatch,
  .color-picker-drop__grid--library .color-picker-drop__slot {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
  }

  .color-picker-drop__grid--library .custom-palette-slot__plus {
    font-size: var(--custom-palette-plus);
    line-height: 1;
  }
}

/* Paisagem em telemóvel: drawer continua full-width */
@media (max-width: 900px) and (orientation: landscape) {
  .pixel-studio__right {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    transform: translateX(100%);
  }

  .pixel-studio:not(.is-panel-collapsed) .pixel-studio__right {
    transform: translateX(0);
  }
}