/* Cartão "Nova mensagem" (na página da caixa) e a tela de escrever dentro dele, no estilo do Gmail. */

/* ---------- o cartão ---------- */
.gvm-card { position: fixed; z-index: 150; right: 24px; bottom: 0; width: 560px; height: min(600px, calc(100vh - 80px)); display: flex; flex-direction: column; background: #fff; border-radius: 14px 14px 0 0; box-shadow: 0 12px 40px -8px rgba(60, 20, 20, .38), 0 0 0 1px rgba(60, 20, 20, .06); overflow: hidden; animation: gvm-sobe .18s ease-out; }
@keyframes gvm-sobe { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.gvm-card.fechando { opacity: .6; pointer-events: none; }
.gvm-card.max { right: 10vw; left: 10vw; width: auto; height: 82vh; bottom: 6vh; border-radius: 14px; }
.gvm-card.min { height: 44px; }
.gvm-card.min .gvm-card-frame { visibility: hidden; }
.gvm-card-topo { flex: none; height: 44px; display: flex; align-items: center; gap: 2px; padding: 0 8px 0 18px; background: #f6eeee; color: var(--gv-tinta, #2a0f10); cursor: pointer; }
.gvm-card-titulo { flex: 1; font-size: 14px; font-weight: 600; }
.gvm-card-topo button { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #5f4a4c; cursor: pointer; padding: 0; transition: background .12s; }
.gvm-card-topo button:hover { background: #e9d9da; color: #2a0f10; }
.gvm-card-frame { flex: 1; width: 100%; border: 0; background: #fff; }
@media (max-width: 1023px) { .gvm-card { display: none; } }

/* ---------- a tela de escrever (dentro do iframe do cartão) ---------- */
body.gvm-fr, body.gvm-fr #layout { background: #fff !important; }
body.gvm-fr #layout { display: block !important; height: 100vh !important; position: static !important; }
body.gvm-fr #layout-sidebar, body.gvm-fr #layout-menu, body.gvm-fr #layout-content > .header, body.gvm-fr #layout-content > .footer, body.gvm-fr .gvm-navtop { display: none !important; }
body.gvm-fr #layout-content { position: static !important; width: 100% !important; height: 100vh !important; display: flex !important; flex-direction: column; border: 0 !important; padding: 0 !important; margin: 0 !important; }
body.gvm-fr #compose-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 !important; }
body.gvm-fr #compose-content > form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden !important; padding: 0 !important; margin: 0; }
body.gvm-fr #compose-content .formbuttons { display: none !important; }

/* cabeçalhos: linhas finas, sem caixas */
body.gvm-fr .compose-headers { flex: none; }
body.gvm-fr .compose-headers .form-group.row { display: flex !important; align-items: center; margin: 0 !important; padding: 0 16px; min-height: 42px; border-bottom: 1px solid var(--gv-linha, #f1e4e4); }
body.gvm-fr .compose-headers .form-group.row.hidden { display: none !important; }
body.gvm-fr .compose-headers .form-group.row.gvm-oculto { display: none !important; }
body.gvm-fr .compose-headers label.col-form-label, body.gvm-fr .compose-headers .title { flex: none; width: 54px; padding: 0; font-size: 13px; color: #8a6567; }
body.gvm-fr .compose-headers .col-sm-10, body.gvm-fr .compose-headers .col-10 { flex: 1; max-width: none; width: auto; padding: 0; }
body.gvm-fr .compose-headers input.form-control, body.gvm-fr .compose-headers .recipient-input, body.gvm-fr .compose-headers select.form-control { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 40px; font-size: 14px; color: var(--gv-tinta, #2a0f10); }
body.gvm-fr .compose-headers .input-group, body.gvm-fr .compose-headers .recipient-input { border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.gvm-fr .compose-headers .input-group-append .btn, body.gvm-fr .compose-headers a.icon { border: 0 !important; background: transparent !important; color: #8a6567 !important; }
body.gvm-fr .gvm-cc { margin-left: auto; display: inline-flex; gap: 12px; padding-left: 12px; }
body.gvm-fr .gvm-cc a { font-size: 13px; color: #8a6567 !important; text-decoration: none; }
body.gvm-fr .gvm-cc a:hover { color: var(--gv-coral-esc, #c93a3f) !important; text-decoration: underline; }

/* editor ocupa o resto do cartão */
body.gvm-fr #composebodycontainer, body.gvm-fr .compose-body, body.gvm-fr #compose-body-container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.gvm-fr .tox.tox-tinymce { flex: 1 1 auto; border: 0 !important; height: auto !important; min-height: 0; }
body.gvm-fr .tox .tox-toolbar, body.gvm-fr .tox .tox-toolbar__primary { background: #fbf8f8 !important; border-top: 1px solid var(--gv-linha, #f1e4e4); }
body.gvm-fr .tox .tox-tbtn { color: #5f4a4c; border-radius: 6px; }
body.gvm-fr .tox .tox-tbtn:hover { background: #f4eaea; }
body.gvm-fr .tox .tox-tbtn--enabled, body.gvm-fr .tox .tox-tbtn--enabled:hover { background: var(--gv-coral-bg, #fdecec); color: var(--gv-coral-esc, #c93a3f); }
body.gvm-fr textarea#composebody { flex: 1 1 auto; border: 0 !important; resize: none; padding: 14px 16px; font-size: 14px; }

/* selos dos anexos */
body.gvm-fr .gvm-canexos { flex: none; padding: 0 16px; max-height: 96px; overflow: auto; }
body.gvm-fr .gvm-canexos:empty { display: none; }
body.gvm-fr .gvm-canexos ul.attachmentslist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 8px 0; padding: 0; }
body.gvm-fr .gvm-canexos ul.attachmentslist li { display: inline-flex; align-items: center; height: 30px; margin: 0; padding: 0 10px; border: 1px solid #e6d5d6; border-radius: 999px; background: #fff; font-size: 12.5px; max-width: 260px; }
body.gvm-fr .gvm-canexos ul.attachmentslist li a.name { color: var(--gv-tinta, #2a0f10) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.gvm-fr .gvm-canexos ul.attachmentslist li a.delete { margin-left: 8px; color: #8a6567 !important; }

/* barra de baixo: Enviar + ícones */
body.gvm-fr .gvm-cbar { flex: none; display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 16px; border-top: 1px solid var(--gv-linha, #f1e4e4); background: #fff; }
body.gvm-fr .gvm-cbar .gvm-enviar { height: 38px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gv-coral, #E5484D) !important; color: #fff !important; font-weight: 600; font-size: 14px; box-shadow: 0 8px 18px -10px rgba(201, 58, 63, .9); cursor: pointer; transition: background .14s, transform .12s; }
body.gvm-fr .gvm-cbar .gvm-enviar:hover { background: #ee5a5f !important; }
body.gvm-fr .gvm-cbar .gvm-enviar:active { transform: scale(.97); }
body.gvm-fr .gvm-cbar .gvm-enviar:before, body.gvm-fr .gvm-cbar .gvm-enviar svg { display: none !important; }
body.gvm-fr .gvm-cbar-icones { display: flex; align-items: center; gap: 2px; }
body.gvm-fr .gvm-clipe { width: 38px; height: 38px; display: inline-grid !important; place-items: center; border-radius: 50%; color: #5f4a4c !important; background: none !important; }
body.gvm-fr .gvm-clipe:hover { background: #f4eaea !important; }
body.gvm-fr .gvm-clipe .inner { display: none !important; }
body.gvm-fr .gvm-clipe:before { font-size: 18px !important; color: inherit !important; }

/* ícone do clipe (anexar) desenhado por nós */
body.gvm-fr .gvm-clipe:before { content: "" !important; display: block; width: 20px !important; height: 20px !important; font-size: 0 !important; background: currentColor !important; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='m21 11.5-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6L15 6.5'/></svg>") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='m21 11.5-8.6 8.6a5.5 5.5 0 0 1-7.8-7.8l8.6-8.6a3.7 3.7 0 0 1 5.2 5.2l-8.6 8.6a1.8 1.8 0 0 1-2.6-2.6L15 6.5'/></svg>") center / contain no-repeat; }