/* MENSAGENS RÁPIDAS — página da biblioteca, editor e prévia de envio. Usa os tokens do tema (claro/escuro) da V4. */

.qm-root { display: flex; flex-direction: column; gap: 12px; }
.qm-barra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qm-barra .leads-busca { flex: 1 1 260px; min-width: 0; }
.qm-barra select { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--surface); color: var(--ink); font: 13px var(--font-body); }
.qm-abas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qm-aba { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 13px; font: 13px var(--font-body); cursor: pointer; }
.qm-aba.on { background: var(--v4-chip-on-bg, #eaf8d4); border-color: var(--v4-chip-on-line, #a3eb2d); color: var(--v4-chip-on-ink, #2f5310); font-weight: 600; }
.qm-inativas { margin-left: auto; font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }

.qm-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.qm-item { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; }
.qm-item.inativa { opacity: .62; }
.qm-fav { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); line-height: 1; padding: 2px; border-radius: 6px; }
.qm-fav.on { color: #d79a00; }
.qm-fav:focus-visible, .qm-aba:focus-visible, .qm-var:focus-visible { outline: 2px solid var(--v4-lime, #a3eb2d); outline-offset: 2px; }
.qm-ico { font-size: 20px; }
.qm-main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.qm-main > .qm-resumo { max-width: 100%; }
.qm-main code, .qm-modal h3 code, .c2-tpl-usar code { font-size: 12px; background: var(--row-alt, #f4f7f1); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; color: var(--ink); font-weight: 500; }
.qm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.qm-chip { font-style: normal; font-size: 11px; border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; line-height: 18px; color: var(--muted); white-space: nowrap; }
.qm-chip.modo { border-color: #8cc653; color: #3d6f15; }
.qm-chip.pessoal { border-color: #93b4e6; color: #2b5797; }
.qm-chip.off { border-color: #e2a3a3; color: #a33; }
:root[data-theme="dark"] .qm-chip.modo { color: #b9ec91; border-color: #4f7a35; }
:root[data-theme="dark"] .qm-chip.pessoal { color: #a9c7f5; border-color: #3d5b8a; }
:root[data-theme="dark"] .qm-chip.off { color: #f2a9a9; border-color: #7a3b3b; }
.qm-resumo { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.qm-acoes .ghost-btn { padding: 5px 10px; font-size: 12.5px; }
.qm-perigo { color: #b91c1c !important; }
:root[data-theme="dark"] .qm-perigo { color: #f29b9b !important; }
.qm-item .qm-midia { grid-column: 1 / -1; }
.qm-midia img { max-width: min(320px, 100%); max-height: 260px; border-radius: 10px; display: block; }
.qm-midia img.qm-sticker { width: 140px; height: 140px; object-fit: contain; background: transparent; }
.qm-midia video { max-width: min(360px, 100%); max-height: 280px; border-radius: 10px; display: block; }
.qm-midia audio { width: min(360px, 100%); display: block; }

.qm-vendor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.qm-vendor-head h2 { margin: 0; font-size: 20px; }

/* editor e prévia */
.qm-modal { width: min(620px, 100%); }
.qm-modal form { display: flex; flex-direction: column; gap: 12px; }
.qm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qm-modal input:not([type=radio]):not([type=checkbox]), .qm-modal select, .qm-modal textarea { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: var(--bg); color: var(--ink); font: 14px var(--font-body); resize: vertical; min-width: 0; }
.qm-atalho { display: flex; align-items: center; gap: 4px; }
.qm-atalho > span { font-weight: 700; color: var(--muted); }
.qm-atalho input { flex: 1; }
.qm-modal small { font-weight: 400; color: var(--muted); font-size: 12px; }
.qm-modal fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.qm-modal legend { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 4px; }
.qm-modal fieldset label, .qm-check { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.qm-modal fieldset label small, .qm-check small { flex-basis: 100%; padding-left: 22px; }
.qm-modal label.off { color: var(--muted); }
.qm-check.off { color: var(--muted); }
.qm-vars { display: flex; flex-wrap: wrap; gap: 5px; margin-top: -4px; }
.qm-var { border: 1px dashed var(--line); background: var(--surface); color: var(--ink); border-radius: 8px; padding: 2px 8px; font: 12px ui-monospace, monospace; cursor: pointer; }
.qm-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qm-upload small.err, .qm-modal .err { color: #b91c1c; }
.qm-cats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.qm-cats li, .qm-cat-nova { display: flex; gap: 6px; align-items: center; }
.qm-cats input, .qm-cat-nova input { flex: 1; }
.qm-prev-dados { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
.qm-prev-dados dt { color: var(--muted); }
.qm-prev-dados dd { margin: 0; }
.qm-prev-texto { white-space: pre-wrap; word-break: break-word; background: var(--v4-bubble-out, #e7f7d3); color: var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; max-height: 260px; overflow-y: auto; }
:root[data-theme="dark"] .qm-prev-texto { background: #26402a; }
.c2-tpl-usar.primeira { background: var(--row-alt, #f4f7f1); }
.c2-tpl-usar .qm-chip { font-size: 10.5px; }

@media (max-width: 650px) {
  .qm-item { grid-template-columns: auto auto 1fr; }
  .qm-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .qm-grid2 { grid-template-columns: 1fr; }
  .qm-inativas { margin-left: 0; }
}