/* Mobile adjustments */
@media (max-width: 600px) {
  /* (tamanhos das barras agora vêm do sistema --tb-u no toolbar.css, então o
     redimensionar funciona no mobile também — os fixos daqui foram removidos.) */
  #ctx-menu { width: 240px; padding: 12px; }
  .ctx-colors-grid { grid-template-columns: repeat(8, 1fr); }

  /* Bottom toolbar: centered, scrollable, safe-area aware */
  #tb-tools {
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 6px;
    gap: 1px;
    padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  }
  #tb-tools::-webkit-scrollbar { display: none; }

  /* O #tb-tools tem overflow (scroll) no mobile, que recortava o cantinho de
     resize quando ele ficava pra fora da pílula. Traz pra dentro pra continuar
     visível e pegável no celular. */
  .tb-resize { right: 0; bottom: 0; }

  /* Color triangle: scale wheel down on mobile */
  #pop-color-triangle { width: 88vw; max-width: 320px; }
  #ct-wheel { width: 100%; height: auto; aspect-ratio: 1 / 1; }

  /* Canvas size dialog: full-width on phones */
  #pop-canvas-size { width: 94vw; max-width: 380px; }

  /* Zoom + rotação: canto inferior-direito, acima da barra de baixo. Saem do
     topo-direita (onde agora ficam o pomodoro e o título), sem brigar com a
     barra de ferramentas embaixo nem com o mode-bar (que fica embaixo à esq). */
  #zoom-bar {
    bottom: 72px;
    top: auto;
    left: auto;
    right: 14px;
    transform: none;
    z-index: 22;
  }
  #rot-bar {
    bottom: 110px;
    top: auto;
    left: auto;
    right: 14px;
    transform: none;
    z-index: 22;
  }

  /* Layers popup narrower on mobile */
  #pop-layers { min-width: 200px; }

  /* Mode bar: raise above bottom toolbar (toolbar ~50px + 14px gap) */
  #mode-bar { bottom: 72px; left: 14px; }
}