/* Moldura de preview no estilo WhatsApp — compartilhada entre as telas que
 * mostram uma pré-visualização de mensagem: lista de modelos (modal "Visualizar"),
 * formulário de modelo (preview ao vivo) e detalhe de mensagem (aba "Detalhes").
 * Antes cada tela reimplementava essas classes localmente com pequenas
 * divergências de padding/gap; unificado aqui usando os valores do detalhe
 * de mensagem, que era a versão mais completa.
 */
.chat-frame {
    border-radius: var(--tblr-border-radius);
    overflow: hidden;
    border: 1px solid var(--tblr-border-color);
}

.chat-frame-header {
    background: #005e54;
    color: #fff;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.chat-bubble {
    background: #d9fdd3;
    max-width: 320px;
    margin-left: auto;
    transition: max-width .15s ease, background-color .15s ease, color .15s ease;
}

/* Tema escuro real do WhatsApp (independente do dark mode do próprio painel)
 * — toggle local só na tela de edição de modelos, ver template-form-assist.js. */
.chat-frame.theme-dark { border-color: #0b141a; }
.chat-frame.theme-dark .chat-frame-header { background: #202c33; color: #e9edef; }
.chat-frame.theme-dark > div { background: #0b141a !important; }
.chat-frame.theme-dark .chat-bubble { background: #005c4b; color: #e9edef; }
.chat-frame.theme-dark .chat-bubble #preview-text { color: #e9edef !important; }

/* Preview responsivo: celular (padrão) vs. WhatsApp Web. */
.chat-frame.preview-desktop .chat-bubble { max-width: 100%; font-size: 1.02rem; }
.chat-frame.preview-desktop .chat-frame-header { padding: .6rem 1.25rem; }

/* Skeleton do editor enquanto o módulo do Tiptap ainda não carregou do CDN. */
.editor-skeleton { display: flex; flex-direction: column; gap: .5rem; padding: .25rem 0; }
.editor-skeleton .skeleton-line {
    height: .85rem; border-radius: 4px;
    background: linear-gradient(90deg, var(--tblr-bg-surface-secondary) 25%, var(--tblr-border-color) 50%, var(--tblr-bg-surface-secondary) 75%);
    background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.editor-skeleton .skeleton-line:nth-child(2) { width: 80%; }
.editor-skeleton .skeleton-line:nth-child(3) { width: 55%; }
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .editor-skeleton .skeleton-line { animation: none; } }