/* ============================================================================
   responsive.css — carregado por ULTIMO, de proposito.
   Media query nao aumenta especificidade: se este arquivo viesse antes de
   components.css, uma regra base como `.presets { grid-template-columns:
   repeat(3,1fr) }` venceria o breakpoint sem nenhum aviso. Ultimo na cascata,
   o comportamento e o esperado.
   ========================================================================= */

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVO
   Tres formas, nao uma encolhida: desktop tem ponteiro preciso e espaco pra
   trabalhar em paralelo; tablet perde a coluna de fotos; celular vira uma
   pilha — foto em cima, controles embaixo, no alcance do polegar.
   ═══════════════════════════════════════════════════════════════════════ */

.editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── ≥1600: mais respiro dos dois lados ── */
@media (min-width: 1600px) {
  :root { --presets-w: 320px; --inspector-w: 404px; }
  .presets { grid-template-columns: repeat(3, 1fr); }
}

/* ── ≤1439: aperta as laterais antes de cortar qualquer coisa ── */
@media (max-width: 1439px) {
  :root { --presets-w: 252px; --inspector-w: 340px; }
}

/* ── ≤1279 ── */
@media (max-width: 1279px) {
  :root { --presets-w: 228px; --inspector-w: 316px; }
}

/* ══ ≤1099: os dois painéis nao cabem mais lado a lado ══
   A partir daqui eles viram um painel so, com abas. Espremer os dois deixaria
   a miniatura de preset pequena demais pra decidir alguma coisa por ela —
   e decidir pela miniatura e a razao de ela existir. */
@media (max-width: 1099px) {
  :root { --inspector-w: 324px; }

  .stage { grid-template-columns: minmax(0, 1fr) var(--inspector-w); }
  .viewer { grid-column: 1; grid-row: 1 / span 2; }

  .side {
    grid-column: 2;
    grid-row: 2;
    border-left: 1px solid var(--separator);
    border-right: 0;
  }
  .side:not(.is-active) { display: none; }
  .side__head { display: none; }

  .panetabs {
    display: flex;
    grid-column: 2; grid-row: 1;
    padding: 0 var(--gap-3);
    background: var(--material);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-left: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
  }
  .stage { grid-template-rows: auto minmax(0, 1fr); }
  .presets { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≤899 ── */
@media (max-width: 899px) {
  :root { --inspector-w: 296px; }
}

/* ── ≤719: uma coluna. Foto em cima, controles embaixo. ── */
@media (max-width: 719px) {
  :root { --toolbar-h: 48px; }

  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .viewer   { grid-column: 1; grid-row: 1; }
  .panetabs {
    grid-column: 1; grid-row: 2;
    border-left: 0;
    border-top: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
    padding: 0 var(--gap-3);
  }
  .side {
    grid-column: 1; grid-row: 3;
    border-left: 0;
    height: 40vh; min-height: 210px; max-height: 380px;
  }

  .viewer__surface { padding: var(--gap-3); }
  /* Topo no celular: voltar encostado na esquerda, nome no meio, ações na
     direita. Cada canto com uma função só — nada de dois grupos disputando o
     mesmo espaço quando a tela encolhe. */
  .toolbar {
    gap: var(--gap-1);
    padding: 0 var(--gap-2);
    padding-top: env(safe-area-inset-top);
    height: calc(var(--toolbar-h) + env(safe-area-inset-top));
  }
  .toolbar__group--start { min-width: 0; }
  .toolbar__divider { display: none; }
  .wordmark--project {
    font-size: .875rem; font-weight: var(--w-medium); letter-spacing: -.01em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* O nome do arquivo é o botão de trocar a foto — mas não cabe aqui. No
     celular quem faz esse papel é o ícone ao lado de exportar. */
  .filename { display: none; }
  #btnRedo  { display: none; }             /* refazer é raro; desfazer fica */
  #btnExport { height: 30px; padding: 0 13px; }

  .picker__title { font-size: 1.25rem; }
  .picker__sub { font-size: .75rem; }
  .presets { grid-template-columns: repeat(4, 1fr); }
  .preset__name { font-size: .5625rem; }
}

/* ── no desktop o nome do arquivo já troca a foto; o ícone é redundante ── */
@media (min-width: 720px) {
  #btnSwap { display: none; }
}

/* ── ≤479: celular estreito ── */
@media (max-width: 479px) {
  :root { --gap-4: .875rem; }
  .side { height: 42vh; }
  .presets { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .home__inner { padding-left: var(--gap-3); padding-right: var(--gap-3); }
  .newtile { min-height: 148px; }
  .btn { height: 32px; }              /* alvo de toque mais generoso */
  .icon-btn { width: 34px; height: 34px; }
  .segmented__item { padding: 6px 10px; }
}

/* ── altura curta (celular deitado): o visor nao pode sumir ── */
@media (max-height: 560px) and (max-width: 899px) {
  .side { height: 36vh; max-height: 240px; }
  .picker__art { display: none; }
}

/* ── ponteiro grosso: alvos maiores, nada dependendo de hover ── */
@media (hover: none) and (pointer: coarse) {
  .slider { height: 30px; }
  .slider__thumb { width: 19px; height: 19px; margin-left: -9.5px; }
  .group__reset { opacity: 1; }
  .row { padding-bottom: var(--gap-3); }
}

/* ══════════════════════════════════════════════════════════════════════════
   CELULAR: a lista no rodapé e a gaveta
   ══════════════════════════════════════════════════════════════════════════
   Um painel fixo de 44% da altura come metade da tela mesmo quando ninguém
   está mexendo nele — e a foto, que é o que a pessoa veio olhar, fica
   espremida. Aqui o rodapé é só uma lista de assuntos: tocar num deles sobe a
   gaveta com o conteúdo, tocar de novo devolve a tela inteira pra foto.
   ═══════════════════════════════════════════════════════════════════════ */

.toolbelt { display: none; }

@media (max-width: 719px) {
  :root { --toolbelt-h: 54px; --drawer-h: min(46vh, 400px); }

  /* a foto ocupa tudo; o resto flutua por cima */
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr);
  }
  .viewer { grid-column: 1; grid-row: 1; }
  .panetabs { display: none; }

  /* ── a lista ── */
  .toolbelt {
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: flex;
    gap: 2px;
    padding: 6px var(--gap-2) calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto;
    scrollbar-width: none;
    background: var(--material);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--separator);
    /* rolagem horizontal sem barra e sem parar no meio de um item */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .toolbelt::-webkit-scrollbar { display: none; }

  .toolbelt__item {
    flex: 0 0 auto;
    scroll-snap-align: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 9px;
    font-size: .8125rem; letter-spacing: -.004em;
    color: var(--label-2);
    white-space: nowrap;
    transition: transform 90ms ease-out, background-color 150ms ease-out,
                color 150ms ease-out;
  }
  .toolbelt__item:active { transform: scale(.95); }
  .toolbelt__item.is-selected {
    background: var(--label);
    color: #fff;
    font-weight: var(--w-medium);
  }

  /* ── a gaveta ── */
  .side {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--toolbelt-h) + env(safe-area-inset-bottom));
    z-index: 39;
    height: var(--drawer-h);
    border: 0;
    border-top: 1px solid var(--separator);
    border-radius: 0;                 /* reto: a gaveta encosta na lista */
    box-shadow: 0 -8px 32px rgba(0,0,0,.10);
    transform: translateY(100%);
    will-change: transform;
    /* pan-y e não none: `none` impedia rolar o conteúdo da gaveta, e o gesto
       de rolagem acabava indo pro arrasto do painel. Quem arrasta a gaveta é
       só a faixa da alça, no topo (ver toolbelt.js). */
    touch-action: pan-y;
  }
  .side:not(.is-open) { display: none; }
  .side.is-open { display: flex; }

  /* alça de arrasto — e a única faixa que puxa a gaveta */
  .side.is-open::before {
    content: "";
    position: absolute; top: 8px; left: 50%;
    width: 40px; height: 4px; margin-left: -20px;
    border-radius: 999px;
    background: var(--separator-firm);
  }
  .side__head { display: none; }
  .side__scroll { padding-top: var(--gap-4); }

  /* em Ajustes, só o grupo escolhido — a lista do rodapé já é a navegação */
  #paramGroups.is-single .group { display: none; border-bottom: 0; }
  #paramGroups.is-single .group.is-shown { display: block; }
  #paramGroups.is-single .group__head { display: none; }
  #paramGroups.is-single .group__body { padding-top: var(--gap-2); }
  #paramGroups.is-single ~ .side__footer { display: none; }

  /* a barra de enquadramento sobe pra não ficar atrás da lista */
  .framebar, .zoombar { bottom: calc(var(--toolbelt-h) + env(safe-area-inset-bottom) + 10px); }

  .presets { padding-bottom: var(--gap-5); }
}

@media (max-width: 479px) {
  .toolbelt__item { height: 40px; padding: 0 12px; font-size: .75rem; border-radius: 8px; }
}

/* ─────────────  presets na horizontal, no celular  ─────────────
   Uma grade vertical de 21 presets vira um rolo comprido dentro de uma gaveta
   baixa: a pessoa rola muito e vê pouco. Em fila horizontal, o polegar
   percorre a lista com um gesto só e a gaveta fica com a altura de uma
   miniatura — sobrando tela pra foto, que é o que se está tentando avaliar. */
@media (max-width: 719px) {
  /* a gaveta passa a ter a altura do conteúdo, com teto */
  .side {
    height: auto;
    max-height: var(--drawer-h);
  }

  .presets { padding: 0 0 var(--gap-4); }
  .presets__section { padding: var(--gap-3) var(--gap-3) var(--gap-2); }

  .presets__grid {
    display: flex;
    gap: var(--gap-2);
    padding: 2px var(--gap-3) 4px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* o dedo rola a fila; o arrasto da gaveta não rouba o gesto */
    touch-action: pan-x;
  }
  .presets__grid::-webkit-scrollbar { display: none; }

  .preset {
    flex: 0 0 auto;
    width: 78px;
    scroll-snap-align: center;
  }
  .preset__name {
    height: 2.4em;
    font-size: .625rem;
  }
}

@media (max-width: 479px) {
  .preset { width: 72px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MARGEM LATERAL NO CELULAR
   Um respiro único, 1.35em, em todas as telas. Em em e não px: acompanha o
   tamanho de texto que a pessoa escolheu no aparelho, então quem usa fonte
   grande não fica com o texto colado na borda.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 719px) {
  :root { --margem-lateral: 1.35em; }

  .home__bar,
  .home__inner,
  .profile .home__bar,
  .profile__inner,
  .picker .home__bar,
  .picker__body,
  .toolbar,
  .auth__sheet,
  .auth__top,
  .toolbelt,
  .side__scroll,
  .side__head,
  .presets,
  .presets__section,
  .panetabs {
    padding-left: var(--margem-lateral);
    padding-right: var(--margem-lateral);
  }

  /* quem já tem recuo próprio herda o mesmo eixo */
  .group__head, .group__body { padding-left: 0; padding-right: 0; }
  .presets__grid {
    margin-left: calc(-1 * var(--margem-lateral));
    margin-right: calc(-1 * var(--margem-lateral));
    padding-left: var(--margem-lateral);
    padding-right: var(--margem-lateral);
  }
  .side__footer { padding-left: 0; padding-right: 0; }
  .sheet { padding-left: var(--margem-lateral); padding-right: var(--margem-lateral); }
  .viewer__surface { padding-left: var(--margem-lateral); padding-right: var(--margem-lateral); }
}