/* ============================================================
   layout.css — shell do app, topbar, palco das pages e halo
   ============================================================ */

/* --- Shell ------------------------------------------------ */
.app {
  position: relative;
  width: 100%;
  max-width: var(--shell-w);
  /* Uma fonte só para a altura: `--altura` é a área visível medida em
     `acompanharTeclado()` (js/app.js). O `100dvh` é só o valor do
     primeiro quadro, antes de o JS rodar. */
  height: var(--altura, 100dvh);
  margin-inline: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg);
  /* Offscreen sheets must not let focus/scrollIntoView pan the whole app. */
  overflow: clip;
  isolation: isolate;
}

@media (min-width: 520px) {
  body {
    display: grid;
    place-items: center;
    background: var(--bg);
  }
  .app {
    height: min(calc(var(--altura, 100dvh) * .92), 900px);
    border-radius: 44px;
    box-shadow: var(--sh-lg), 0 0 0 .5px rgba(39, 37, 31, .10);
  }
}

/* --- Topbar -----------------------------------------------
   As três faixas ficam presas à linha delas. Sem isso, escondendo a topbar
   (modo de edição) o palco escorregava para a linha `auto` e nascia com
   altura zero — a tela inteira ficava em branco.                        */
.topbar {
  grid-row: 1;
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: var(--gap-3);
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 14px 0;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* --- Palco (área das pages) -------------------------------- */
.stage {
  grid-row: 2;
  position: relative;
  z-index: 1;
  min-height: 0;
}

.view {
  background: var(--bg);
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(.985);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
}

.view[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Abrir uma conversa ou um bloco não aplica zoom, fade nem atraso de visibilidade. */
#view-chat, #view-soon, #view-blog { transform: none; transition: none; }
.view[data-active="false"] { pointer-events: none; }

/* --- Composer -----------------------------------------------
   A conversa passa atrás do campo e continua visível na margem inferior.
   Somente o limite final da tela encerra a área de rolagem. */
.dock {
  --dock-pb: 24px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  padding: 0 12px var(--dock-pb);
  pointer-events: none;
}
.dock > * { pointer-events: auto; }


@media (max-width: 899px) and (pointer: coarse) {
  :root[data-teclado-aberto="true"] .dock {
    --dock-pb: 24px;
  }
}

/* --- Editor em tela cheia --------------------------------- */
.app[data-editando="true"] .topbar { display: none; }

/* --- Editor embutido (page 2) ----------------------------- */
.editor-frame {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: var(--bg);
}

/* --- Estado vazio centralizado ---------------------------- */
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-4);
  padding: var(--gap-6) 32px;
  text-align: center;
}