/* App do NUVON OS — conversa ao centro, gaveta à esquerda.
   Uma só implementação, duas larguras: no celular a gaveta é sobreposta e
   desliza; a partir de 1024 px fica fixa (248 px, o token --nv-sidebar).
   A conversa nunca passa de 880 px (--nv-container-narrow). */

html, body { height: 100%; }
body { overflow: hidden; }

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ── Gaveta ────────────────────────────────────────────────────────────── */

.gaveta {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  width: var(--nv-sidebar);
  padding: var(--nv-space-5) var(--nv-space-3);
  /* iOS instalado como PWA (apple-mobile-web-app-status-bar-style:
     black-translucent) desenha o conteudo por baixo da status bar/notch —
     sem isto, a marca no topo da gaveta ficava cortada por trás dela. */
  padding-top: max(var(--nv-space-5), env(safe-area-inset-top));
  padding-bottom: max(var(--nv-space-5), env(safe-area-inset-bottom));
  box-sizing: border-box;
  background: var(--nv-surface);
  border-right: 1px solid var(--nv-border-subtle);
  box-shadow: var(--nv-shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-1);
  transform: translateX(-100%);
  transition: transform var(--nv-duration-base) var(--nv-ease-out);
}
.gaveta[data-aberta="sim"] { transform: translateX(0); }

.scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: var(--nv-scrim);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nv-duration-base) var(--nv-ease-out),
              backdrop-filter var(--nv-duration-base) var(--nv-ease-out);
}
.scrim[data-visivel="sim"] {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(var(--nv-blur-glass));
  -webkit-backdrop-filter: blur(var(--nv-blur-glass));
}

.gaveta__marca {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  padding: var(--nv-space-1) var(--nv-space-3) var(--nv-space-5);
}
.gaveta__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--nv-space-2);
  font-size: var(--nv-text-xs);
  color: var(--nv-text-muted);
}
.gaveta__estado-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--os-voz-ouvindo); flex: none; }

.gaveta__item {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  height: var(--nv-control-height);
  padding: 0 var(--nv-space-3) 0 27px;
  border: 0;
  border-radius: var(--nv-radius-md);
  background: transparent;
  color: var(--nv-text-secondary);
  font-family: inherit;
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--nv-duration-fast) var(--nv-ease-out),
              color var(--nv-duration-fast) var(--nv-ease-out);
}
.gaveta__item:hover { background: var(--nv-surface-glass); color: var(--nv-text-primary); }
.gaveta__item[aria-current="page"] {
  background: var(--nv-tint-purple);
  color: var(--nv-text-primary);
  padding-left: var(--nv-space-3);
}
/* A régua norte marca a área ativa — mesmo papel do indicador na identidade. */
.gaveta__item[aria-current="page"]::before {
  content: "";
  width: 3px; height: 18px; border-radius: 2px;
  background: var(--os-norte);
  flex: none;
}
.gaveta__item svg { flex: none; }
.gaveta__item[aria-current="page"] svg { color: var(--nv-purple-500); }
.gaveta__rotulo { flex: 1; }

.gaveta__contagem {
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--nv-radius-pill);
  background: rgba(255, 177, 94, .14);
  border: 1px solid rgba(255, 177, 94, .4);
  color: var(--nv-orange-300);
  font-family: var(--nv-font-mono);
  font-size: 11px;
  display: grid; place-items: center;
}
.gaveta__ponto { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* Janelas de chat pessoais (ver public/js/conversas.js) — vivem entre os
   itens de navegação fixos e o separador do rodapé. */
.gaveta__nova-conversa {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  height: var(--nv-control-height);
  padding: 0 var(--nv-space-3) 0 27px;
  border: 0;
  border-radius: var(--nv-radius-md);
  background: transparent;
  color: var(--nv-purple-300);
  font-family: inherit;
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.gaveta__nova-conversa:hover { background: var(--nv-surface-glass); }
.gaveta__nova-conversa svg { flex: none; }

.gaveta__conversas {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.gaveta__conversa {
  display: flex;
  align-items: center;
  gap: var(--nv-space-2);
  height: var(--nv-control-height);
  padding: 0 var(--nv-space-2) 0 27px;
  border-radius: var(--nv-radius-md);
  color: var(--nv-text-secondary);
  font-size: var(--nv-text-sm);
  cursor: pointer;
}
.gaveta__conversa:hover { background: var(--nv-surface-glass); color: var(--nv-text-primary); }
.gaveta__conversa[data-ativa="sim"] { background: var(--nv-tint-purple); color: var(--nv-text-primary); }
.gaveta__conversa svg { flex: none; }
.gaveta__conversa-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gaveta__conversa-acao {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border: 0;
  border-radius: var(--nv-radius-sm);
  background: transparent;
  color: var(--nv-text-muted);
  cursor: pointer;
}
.gaveta__conversa:hover .gaveta__conversa-acao { display: inline-flex; }
.gaveta__conversa-acao:hover { background: var(--nv-surface-glass-hover); color: var(--nv-text-primary); }
.gaveta__conversa-vazio {
  padding: var(--nv-space-3) var(--nv-space-3) var(--nv-space-3) 27px;
  font-size: var(--nv-text-xs);
  color: var(--nv-text-muted);
}

.gaveta__separador { height: 1px; background: rgba(200, 189, 177, .1); margin: var(--nv-space-2) var(--nv-space-3); }
.gaveta__rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--nv-space-3); }

.gaveta__servicos {
  padding: var(--nv-space-3);
  border-radius: var(--nv-radius-md);
  border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface-raised);
  display: flex; flex-direction: column; gap: var(--nv-space-2);
}
.gaveta__pontos { display: flex; gap: 6px; }
.gaveta__utilizador {
  display: flex; align-items: center; gap: var(--nv-space-3);
  padding: var(--nv-space-2) var(--nv-space-3);
}
.gaveta__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--nv-graphite-700);
  display: grid; place-items: center;
  font-size: var(--nv-text-xs); font-weight: var(--nv-weight-semibold);
  color: var(--nv-text-primary); flex: none;
}

/* ── Conteúdo ──────────────────────────────────────────────────────────── */

.conteudo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.barra {
  height: var(--nv-header-height);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  padding: 0 var(--nv-space-4);
  /* mesma razão da .gaveta acima: sem isto, o botão de menu e o título
     ficavam por baixo da status bar/notch no PWA instalado no iPhone. */
  padding-top: env(safe-area-inset-top);
  height: calc(var(--nv-header-height) + env(safe-area-inset-top));
  box-sizing: border-box;
  border-bottom: 1px solid var(--nv-border-subtle);
  background: var(--nv-bg);
}
.barra__menu {
  width: var(--nv-control-height); height: var(--nv-control-height);
  border-radius: 50%;
  border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface-glass);
  color: var(--nv-text-secondary);
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background var(--nv-duration-fast) var(--nv-ease-out);
}
.barra__menu:hover { background: var(--nv-surface-glass-hover); color: var(--nv-text-primary); }
.barra__titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.barra__area { font-size: var(--nv-text-lg); font-weight: var(--nv-weight-semibold); color: var(--nv-text-primary); }
.barra__sub { font-size: var(--nv-text-xs); color: var(--nv-text-muted); }

.area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: none;
}
.area[data-ativa="sim"] { display: flex; flex-direction: column; }

.area__interior {
  width: 100%;
  max-width: var(--nv-container-narrow);
  margin: 0 auto;
  padding: var(--nv-space-6) var(--nv-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-5);
}

/* ── Conversa ──────────────────────────────────────────────────────────── */

#area-conversa[data-ativa="sim"] { display: flex; flex-direction: column; overflow: hidden; }

.conversa__lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--nv-space-4);
  padding: var(--nv-space-6) var(--nv-space-5);
  width: 100%;
  max-width: var(--nv-container-narrow);
  margin: 0 auto;
}

.bolha { display: flex; gap: var(--nv-space-2); animation: osIn var(--nv-duration-base) var(--nv-ease-out) both; }
.bolha--eu { justify-content: flex-end; }
.bolha--nuvon { align-items: flex-end; }

.bolha__texto {
  max-width: 80%;
  padding: 10px 14px;
  font-size: var(--nv-text-sm);
  line-height: 1.45;
  color: var(--nv-text-primary);
}
.bolha--eu .bolha__texto {
  border-radius: 12px 12px 2px 12px;
  background: var(--nv-tint-purple);
  border: 1px solid var(--nv-border-purple);
}
.bolha--nuvon .bolha__texto {
  border-radius: 12px 12px 12px 2px;
  background: var(--nv-surface-raised);
  border: 1px solid var(--nv-border-subtle);
}
/* Nota de correcao de STT ("#texto certo") — nem "eu" nem "nuvon", um
   aviso discreto centrado, para nao parecer mais um turno da conversa. */
.bolha--correcao { justify-content: center; }
.bolha--correcao .bolha__texto {
  max-width: 90%;
  padding: 6px 12px;
  font-size: 12px;
  font-style: italic;
  color: var(--nv-text-muted);
  background: transparent;
  border: 1px dashed var(--nv-border-subtle);
  border-radius: var(--nv-radius-md);
}

.bolha__coluna { display: flex; flex-direction: column; gap: 6px; max-width: 80%; }
.bolha__coluna .bolha__texto { max-width: none; }
.bolha__texto code {
  font-family: var(--nv-font-mono); font-size: .9em; padding: 1px 5px;
  border-radius: 4px; background: var(--nv-surface-sunken, rgba(0,0,0,.08));
}
.bolha__texto a { color: var(--nv-purple-300); }
.bolha__traco {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  font-family: var(--nv-font-mono); font-size: 11px; color: var(--nv-text-muted);
}

.bolha__rotulagem { display: flex; gap: 4px; }
.bolha__rotulagem button {
  border: 1px solid var(--nv-border-subtle); background: transparent; border-radius: 8px;
  padding: 2px 8px; font-size: 12px; line-height: 1.6; color: var(--nv-text-muted); cursor: pointer;
}
.bolha__rotulagem button:hover { border-color: var(--nv-text-muted); color: var(--nv-text-secondary); }
.bolha__rotulagem-feito { font-size: 11px; color: var(--nv-text-muted); }

/* Três pontos em cobre enquanto pensa — nunca um spinner. */
.pensando { display: flex; gap: 5px; align-items: center; height: 40px; padding: 0 14px;
  border-radius: 12px 12px 12px 2px; background: var(--nv-surface-raised); border: 1px solid var(--nv-border-subtle); }
.pensando span { width: 6px; height: 6px; border-radius: 50%; background: var(--os-voz-pensando); animation: osDots 1.2s ease-in-out infinite; }
.pensando span:nth-child(2) { animation-delay: .15s; }
.pensando span:nth-child(3) { animation-delay: .3s; }

/* Cartão de aprovação dentro da conversa. */
.aprovacao {
  display: flex; flex-direction: column; gap: 14px;
  padding: var(--nv-space-5);
  border-radius: var(--nv-radius-md);
  border: 1px solid var(--os-aprov-pendente);
  background: var(--nv-gradient-card), var(--nv-surface);
  transition: border-color var(--nv-duration-base) var(--nv-ease-out),
              box-shadow var(--nv-duration-base) var(--nv-ease-out);
  animation: osIn var(--nv-duration-base) var(--nv-ease-out) both;
}
.aprovacao[data-estado="confirmado"] { border-color: var(--os-aprov-confirmado); box-shadow: 0 0 32px rgba(72, 209, 143, .18); }
.aprovacao[data-estado="enviando"], .aprovacao[data-estado="aceite"] { border-color: var(--nv-purple-500); }
.aprovacao[data-estado="recusado"] { border-color: var(--nv-border-subtle); opacity: .72; }
/* A ferramenta correu e falhou — nao e "confirmado" (verde), e um erro real. */
.aprovacao[data-estado="falhou"] { border-color: var(--os-perigo); box-shadow: 0 0 32px rgba(255, 95, 95, .18); }

.aprovacao__topo { display: flex; justify-content: space-between; align-items: center; gap: var(--nv-space-2); }
.aprovacao__titulo { font-size: var(--nv-text-base); font-weight: var(--nv-weight-semibold); line-height: 1.35; color: var(--nv-text-primary); }
.aprovacao__args {
  font-family: var(--nv-font-mono); font-size: var(--nv-text-xs); line-height: 1.6;
  color: var(--nv-text-secondary);
  padding: 10px 12px; border-radius: var(--nv-radius-sm); background: var(--nv-surface-strong);
  overflow-x: auto;
}
.aprovacao__regua { height: 2px; border-radius: 2px; background: var(--nv-surface-strong); overflow: hidden; }
.aprovacao__progresso { height: 100%; width: 0; background: var(--os-aprov-pendente); transition: width var(--nv-duration-slow) var(--nv-ease-out), background var(--nv-duration-base); }
.aprovacao__acoes { display: flex; gap: var(--nv-space-2); }
.aprovacao__acoes .botao { flex: 1; }
.aprovacao__acoes .botao--secundario { flex: 0 0 auto; }
.aprovacao__pronto {
  display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-3);
  animation: osIn var(--nv-duration-slow) var(--nv-ease-out) both;
}
.aprovacao__pronto strong { font-family: var(--nv-font-display); font-weight: 600; font-size: var(--nv-text-xl); color: var(--nv-text-primary); }
.aprovacao__pronto strong span { color: var(--nv-orange-500); }

/* Composer — a barra de escrever, colada em baixo. */
.composer {
  flex: none;
  border-top: 1px solid var(--nv-border-subtle);
  background: var(--nv-bg);
  padding: var(--nv-space-4) var(--nv-space-5);
  padding-bottom: max(var(--nv-space-4), env(safe-area-inset-bottom));
}
.composer__interior {
  width: 100%; max-width: var(--nv-container-narrow); margin: 0 auto;
  display: flex; align-items: flex-end; gap: var(--nv-space-3);
}
.composer__campo {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--nv-space-3);
  min-height: var(--nv-control-height);
  padding: 0 14px;
  background: var(--nv-surface-strong);
  border: 1px solid var(--nv-border-input);
  border-radius: var(--nv-radius-pill);
  transition: border-color var(--nv-duration-fast) var(--nv-ease-out), box-shadow var(--nv-duration-fast) var(--nv-ease-out);
}
.composer__campo:focus-within { border-color: var(--nv-orange-500); box-shadow: var(--nv-shadow-focus); }
.composer__campo textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: none; background: transparent;
  padding: 12px 0; max-height: 120px;
  font-family: var(--nv-font-body); font-size: var(--nv-text-sm); line-height: 1.45;
  color: var(--nv-text-primary);
}
.composer__campo textarea::placeholder { color: var(--nv-text-muted); }

.composer__botao {
  width: var(--nv-control-height); height: var(--nv-control-height);
  border-radius: 50%; border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface-glass); color: var(--nv-text-secondary);
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background var(--nv-duration-fast) var(--nv-ease-out),
              border-color var(--nv-duration-fast) var(--nv-ease-out),
              color var(--nv-duration-fast) var(--nv-ease-out),
              transform var(--nv-duration-fast) var(--nv-ease-out);
}
.composer__botao:hover { background: var(--nv-surface-glass-hover); color: var(--nv-text-primary); transform: translateY(var(--nv-lift-hover)); }
.composer__botao:active { transform: scale(var(--nv-press-scale)); }
/* A única ação cheia da tela — o orçamento de laranja 1+2. */
.composer__botao--enviar { background: var(--nv-action-primary); border-color: transparent; color: var(--nv-text-on-action); }
.composer__botao--enviar:hover { background: var(--nv-action-primary-hover); color: var(--nv-text-on-action); }
.composer__botao--enviar:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Gravando: roxo, porque ouvir é roxo. */
.composer__botao--gravando { background: var(--os-voz-ouvindo); border-color: transparent; color: #fff; animation: osPulse 1.6s ease-in-out infinite; }
/* Carregar e segurar (push-to-talk, ver voz.js): sem isto, um dedo mantido
   sobre o botão dispara scroll/seleção/menu de contexto do sistema em vez
   de só gravar — achado real em testes no iOS. */
#gravar { touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Tira de sugestoes: rola na horizontal em vez de empilhar. Empilhada, num
   celular, comia meia tela antes de a conversa comecar. */
.composer__sugestoes {
  display: flex; gap: var(--nv-space-2); margin-bottom: var(--nv-space-3);
  width: 100%; max-width: var(--nv-container-narrow); margin-left: auto; margin-right: auto;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.composer__sugestoes::-webkit-scrollbar { display: none; }
.sugestao {
  flex: none; white-space: nowrap;
  height: var(--nv-control-height-sm); padding: 0 14px;
  border-radius: var(--nv-radius-pill); border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface-glass); color: var(--nv-text-secondary);
  font-family: inherit; font-size: var(--nv-text-sm); cursor: pointer;
  transition: border-color var(--nv-duration-fast), color var(--nv-duration-fast), background var(--nv-duration-fast);
}
.sugestao:hover { border-color: var(--nv-border-purple); color: var(--nv-text-primary); background: var(--nv-tint-purple); }

/* ── Listas e cartões das outras áreas ─────────────────────────────────── */

.grelha { display: grid; gap: var(--nv-space-3); }
.grelha--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grelha--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.linha {
  display: flex; align-items: center; gap: var(--nv-space-3);
  padding: var(--nv-space-4);
  border-radius: var(--nv-radius-md);
  border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface);
}
.linha__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha__nome { font-size: var(--nv-text-sm); font-weight: var(--nv-weight-medium); color: var(--nv-text-primary); }
.linha__detalhe { font-family: var(--nv-font-mono); font-size: var(--nv-text-xs); color: var(--nv-text-muted); }

/* Interruptor — desliza em 140 ms; a cor confirma, não o movimento. */
.interruptor {
  width: 52px; height: 30px; border-radius: var(--nv-radius-pill);
  border: 1px solid var(--nv-border-input); background: var(--nv-surface-strong);
  position: relative; cursor: pointer; padding: 0; flex: none;
  transition: background var(--nv-duration-fast) var(--nv-ease-out), border-color var(--nv-duration-fast) var(--nv-ease-out);
}
.interruptor__botao {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--nv-text-primary);
  transition: transform var(--nv-duration-fast) var(--nv-ease-out);
}
.interruptor[aria-checked="true"] { background: var(--nv-purple-600); border-color: rgba(130, 87, 255, .6); }
.interruptor[aria-checked="true"] .interruptor__botao { transform: translateX(22px); }

.barra-progresso { height: 4px; border-radius: 2px; background: var(--nv-surface-strong); overflow: hidden; }
.barra-progresso__valor { height: 100%; background: var(--os-norte); }

.vazio {
  display: flex; flex-direction: column; align-items: center; gap: var(--nv-space-3);
  padding: var(--nv-space-8) var(--nv-space-5);
  text-align: center; color: var(--nv-text-muted);
}
.vazio strong { font-family: var(--nv-font-display); font-weight: 600; font-size: var(--nv-text-xl); color: var(--nv-text-secondary); }

/* Selo de modo demonstração — honesto e sempre visível. */
.selo-demo {
  display: inline-flex; align-items: center; gap: var(--nv-space-2);
  padding: 4px 10px; border-radius: var(--nv-radius-pill);
  border: 1px solid rgba(185, 162, 255, .4);
  background: rgba(130, 87, 255, .12);
  font-size: 11px; font-weight: var(--nv-weight-medium); color: var(--nv-purple-300);
  white-space: nowrap;
}

.aviso-demo {
  display: flex; align-items: flex-start; gap: var(--nv-space-3);
  padding: var(--nv-space-4);
  border-radius: var(--nv-radius-md);
  border: 1px solid rgba(185, 162, 255, .3);
  background: rgba(130, 87, 255, .08);
  font-size: var(--nv-text-sm); line-height: 1.5; color: var(--nv-text-secondary);
}

/* ── Definições (endereço do Core) — painel em vez de prompt() ──────────── */

.definicoes-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: var(--nv-scrim);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--nv-duration-base) var(--nv-ease-out),
              backdrop-filter var(--nv-duration-base) var(--nv-ease-out);
}
.definicoes-fundo[data-visivel="sim"] {
  opacity: 1; pointer-events: auto;
  backdrop-filter: blur(var(--nv-blur-glass)); -webkit-backdrop-filter: blur(var(--nv-blur-glass));
}

.definicoes {
  position: fixed; z-index: 61;
  top: 50%; left: 50%;
  width: min(420px, calc(100vw - var(--nv-space-5) * 2));
  max-height: calc(100vh - var(--nv-space-6) * 2);
  overflow-y: auto;
  padding: var(--nv-space-5);
  border-radius: var(--nv-radius-lg);
  background: var(--nv-gradient-card), var(--nv-surface-raised);
  border: 1px solid var(--nv-border-subtle);
  box-shadow: var(--nv-shadow-md);
  display: flex; flex-direction: column; gap: var(--nv-space-4);
  transform: translate(-50%, -50%) scale(.96);
  opacity: 0; pointer-events: none;
  transition: opacity var(--nv-duration-base) var(--nv-ease-out),
              transform var(--nv-duration-base) var(--nv-ease-out);
}
.definicoes[data-visivel="sim"] { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.definicoes__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--nv-space-3); }
.definicoes__topo h2 {
  margin: 0; font-family: var(--nv-font-display); font-size: var(--nv-text-lg);
  font-weight: 600; color: var(--nv-text-primary);
}
.definicoes__fechar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--nv-border-subtle);
  background: var(--nv-surface-glass); color: var(--nv-text-secondary);
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background var(--nv-duration-fast) var(--nv-ease-out), color var(--nv-duration-fast) var(--nv-ease-out);
}
.definicoes__fechar:hover { background: var(--nv-surface-glass-hover); color: var(--nv-text-primary); }
.definicoes__corpo { display: flex; flex-direction: column; gap: var(--nv-space-3); }
.definicoes__texto { margin: 0; font-size: var(--nv-text-sm); line-height: 1.5; color: var(--nv-text-secondary); }
.definicoes__acoes { display: flex; justify-content: flex-end; gap: var(--nv-space-2); }

/* ── Larguras ──────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .gaveta { position: relative; transform: none; box-shadow: none; flex: none; }
  .scrim { display: none; }
  .barra { padding: 0 var(--nv-space-6); }
}

/* O modo "desktop" força a gaveta fixa mesmo em janela estreita — é a
   página que existe para uso em tela grande. */
.app[data-modo="desktop"] .gaveta { position: relative; transform: none; box-shadow: none; flex: none; }
.app[data-modo="desktop"] .scrim { display: none; }

/* Gaveta recolhida em tela grande: some por inteiro e devolve a largura à
   conversa. O sanduíche na barra traz de volta. Anima a largura junto com o
   deslize para não haver salto. */
@media (min-width: 1024px) {
  .gaveta {
    overflow: hidden;
    transition: transform var(--nv-duration-base) var(--nv-ease-out),
                width var(--nv-duration-base) var(--nv-ease-out),
                padding var(--nv-duration-base) var(--nv-ease-out),
                border-color var(--nv-duration-base) var(--nv-ease-out);
  }
  .app[data-gaveta="recolhida"] .gaveta {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    border-right-color: transparent;
  }
}
.app[data-modo="desktop"] .gaveta {
  overflow: hidden;
  transition: transform var(--nv-duration-base) var(--nv-ease-out),
              width var(--nv-duration-base) var(--nv-ease-out),
              padding var(--nv-duration-base) var(--nv-ease-out),
              border-color var(--nv-duration-base) var(--nv-ease-out);
}
.app[data-modo="desktop"][data-gaveta="recolhida"] .gaveta {
  width: 0;
  padding-left: 0;
  padding-right: 0;
  border-right-color: transparent;
}

/* O sanduíche só desaparece quando a gaveta está aberta e fixa — se está
   recolhida, é ele que a traz de volta. O selector tem de ser o da barra:
   o botão de recolher, dentro da gaveta, partilha a classe e não pode
   desaparecer justamente quando é preciso. */
@media (min-width: 1024px) {
  .app:not([data-gaveta="recolhida"]) .barra > .barra__menu { display: none; }
}
.app[data-modo="desktop"]:not([data-gaveta="recolhida"]) .barra > .barra__menu { display: none; }

@media (max-width: 560px) {
  .grelha--2, .grelha--3 { grid-template-columns: 1fr; }
  .area__interior { padding: var(--nv-space-5) var(--nv-space-4); }
  .conversa__lista { padding: var(--nv-space-5) var(--nv-space-4); }
  .composer { padding-left: var(--nv-space-4); padding-right: var(--nv-space-4); }
}