/* Medidas reais da referência (ver docs/09-design-tokens-umbler.md).
   Carregado antes de light-theme.css, que deve continuar sendo o último. */

/* Modal: 500px, raio 16, fundo #1A1D20, borda 1px #3D4047, sem sombra */
dialog {
  background: var(--bg-modal, var(--bg-list));
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 16px);
  padding: 0;
  width: 500px;
  max-width: calc(100vw - 32px);
  box-shadow: none;
}
dialog form { padding: 0 24px 16px; }
dialog h2 { font-size: 16px; font-weight: 600; margin: 0; padding: 16px 0 8px; line-height: 24px; }
dialog label { font-size: 14px; margin: 12px 0; }
dialog input,
dialog textarea,
dialog select {
  background: transparent;
  border: 2px solid var(--border);
  border-radius: var(--radius-control, 16px);
  padding: 6px 12px;
  font-size: 14px;
  min-height: 41px;
}
dialog textarea { min-height: 80px; }
dialog input:focus,
dialog textarea:focus,
dialog select:focus { outline: none; border-color: var(--accent); }

/* Botões do modal: altura 40, pílula (raio 30). Primário = accent; secundário = contorno. */
.dialog-actions button,
dialog form > div:last-child button {
  min-height: 40px;
  padding: 7px 16px;
  border-radius: var(--radius-button, 30px);
  border: 2px solid rgba(255, 255, 255, .24);
  background: transparent;
  color: #DEE2E6;
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
}
.dialog-actions button.primary,
dialog form > div:last-child button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.dialog-actions button.primary:hover,
dialog form > div:last-child button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Botão genérico do app: 40px de altura como na referência */
.button { min-height: 40px; }

/* Barra de rolagem oculta (referência usa scrollbar-size 0) é apenas visual; mantida a rolagem */

/* Tema claro: contorno e texto dos botões secundários do modal */
.preference-light .dialog-actions button:not(.primary),
.preference-light dialog form > div:last-child button:not(.primary) {
  color: var(--text);
  border-color: var(--border);
}

dialog .dialog-actions button,
dialog form > div:last-child button { height: 40px; min-height: 40px; box-sizing: border-box; }

/* Linha de conversa: min-height real da Umbler (95px) */
.conversation-column button.conversation { min-height: 95px; }
.conversation-column button.conversation { padding-top: 10px; padding-bottom: 10px; }