/* Compartilhado entre o convite original e a prévia. Sem imagens ou fontes externas. */
:root { --mp-ink:#3d352c; --mp-soft:#675d52; --mp-paper:#fffaf5; --mp-line:#ded4c8; --mp-moss:#4f5945; }
[data-premium-mural] .wall-grid { display:block; }
[data-premium-mural] #message-form[hidden] { display:none !important; }
[data-premium-mural] button, .mp-dialog button { font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.mp-write-card { display:flex; align-items:center; flex-wrap:wrap; gap:20px; padding:24px; border:1px solid var(--mp-line); background:var(--mp-paper); border-radius:20px; max-width:1000px; margin:0 auto 28px; color:var(--mp-ink); }
.mp-write-icon { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border:1px solid #d5c6b2; border-radius:50%; font-size:24px; color:#83643f; }
.mp-write-copy { flex:1; min-width:160px; }
.mp-write-copy strong { display:block; font-family:Georgia,serif; font-size:24px; line-height:1.25; font-weight:400; }
.mp-write-copy p { font-size:14px; line-height:1.6; margin:8px 0 0; color:var(--mp-soft); }
.mp-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; border:1px solid var(--mp-line); border-radius:12px; background:var(--mp-paper); color:var(--mp-ink); font-weight:600!important; line-height:1.3; text-decoration:none; }
.mp-primary { background:var(--mp-moss); border-color:var(--mp-moss); color:#fffaf5; }
.mp-button:disabled,.mp-reader-arrow:disabled { opacity:.5; cursor:default; }
.mp-reader-toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:1000px; margin:0 auto 16px; }
.mp-total { margin:0; font-size:14px; color:var(--mp-soft); }
.mp-modes { display:flex; align-items:center; padding:4px; border:1px solid var(--mp-line); border-radius:13px; background:var(--mp-paper); }
.mp-mode { min-height:44px; border:0; background:transparent; padding:9px 14px; border-radius:9px; color:var(--mp-soft); font-size:14px!important; }
.mp-mode[aria-pressed=true] { background:#eee5da; color:var(--mp-ink); }
#message-list.mp-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:1000px; margin:0 auto; max-height:620px; max-height:min(70dvh,620px); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; padding:3px 10px 16px 3px; border:0; align-items:start; -webkit-overflow-scrolling:touch; }
#message-list.mp-list-flow { max-height:none; overflow:visible; }
.mp-note { position:relative; min-width:0; padding:26px 24px 22px; background:var(--mp-paper); border:1px solid var(--mp-line); border-radius:16px; color:var(--mp-ink); }
.mp-quote-mark { display:block; font:42px/1 Georgia,serif; color:#ae8b5b; height:30px; }
.mp-note-text { white-space:pre-wrap; line-height:1.7; font-size:17px; overflow-wrap:anywhere; word-break:normal; }
.mp-note-text p { margin:0 0 12px; }.mp-note-text p:last-child { margin-bottom:0; }.mp-note-text ul,.mp-note-text ol { margin:10px 0; padding-left:24px; }
.mp-note-footer { margin-top:24px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-top:1px solid #ebe2d8; padding-top:16px; }
.mp-note-footer strong { display:block; font:600 14px/1.5 system-ui,sans-serif; overflow-wrap:anywhere; }
.mp-note-footer time { font:12px/1.5 system-ui,sans-serif; color:var(--mp-soft); }
.mp-read-note { min-height:44px; padding:7px 10px; border:0; border-radius:8px; color:var(--mp-moss); background:transparent; font-size:13px!important; white-space:nowrap; }
.mp-empty { grid-column:1/-1; padding:36px 20px; color:var(--mp-soft); text-align:center; font-size:16px; line-height:1.7; }
.mp-wall-success { flex:0 0 100%; margin:0; padding-top:14px; border-top:1px solid var(--mp-line); font-size:14px; color:#2f6a40; line-height:1.6; }
body.mp-modal-open { overflow:hidden; position:fixed; top:var(--mp-scroll-y); left:0; right:0; width:100%; }
.mp-dialog { position:fixed; box-sizing:border-box; padding:0; width:min(680px,calc(100% - 40px)); max-width:680px; height:auto; max-height:calc(var(--mp-vh,100vh) - 40px); margin:auto; border:1px solid var(--mp-line); border-radius:24px; background:var(--mp-paper); color:var(--mp-ink); box-shadow:0 26px 100px #181c1a45; font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; overflow:hidden; }
.mp-dialog[open] { display:flex; flex-direction:column; }
.mp-dialog::backdrop { background:#20271f99; backdrop-filter:blur(5px); }
.mp-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-shrink:0; padding:20px 24px; border-bottom:1px solid var(--mp-line); }
.mp-dialog-head h2 { margin:0; font:400 23px/1.25 Georgia,serif; color:var(--mp-ink); }
.mp-close { flex:0 0 44px; width:44px; height:44px; border:1px solid var(--mp-line); border-radius:50%; font:400 28px/1 system-ui,sans-serif!important; color:var(--mp-ink); background:transparent; }
.mp-compose-form { overflow:auto; overscroll-behavior:contain; min-height:0; display:flex; flex-direction:column; -webkit-overflow-scrolling:touch; }
.mp-compose-name { padding:18px 24px 10px; }
.mp-name-label { display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--mp-soft); }
.mp-name,.mp-select,.mp-emoji-search { width:100%; max-width:100%; min-height:44px; padding:11px 12px; border:1px solid var(--mp-line); border-radius:9px; background:#fff; color:var(--mp-ink); font:16px/1.4 system-ui,sans-serif; }
.mp-name { min-height:48px; }
.mp-tools { display:flex; align-items:center; flex-wrap:nowrap; gap:5px; border-bottom:1px solid var(--mp-line); margin:0 24px; padding:6px 0 10px; }
.mp-tool { display:grid; place-items:center; width:44px; min-width:44px; height:44px; border:0; border-radius:9px; padding:0; background:transparent; color:var(--mp-ink); font-size:18px!important; line-height:1; }
.mp-tool[aria-pressed=true],.mp-tool[aria-expanded=true] { background:#e9dfd1; }
.mp-bold { font-weight:750!important; }.mp-italic { font-style:italic!important; font-family:Georgia,serif!important; }.mp-underline { text-decoration:underline; text-underline-offset:3px; }
.mp-more { font-size:17px!important; font-family:Georgia,serif!important; }
.mp-color-label { display:grid; place-items:center; position:relative; width:44px; height:44px; border-radius:9px; cursor:pointer; }
.mp-color-label input { width:32px; height:32px; cursor:pointer; padding:0; border:0; border-radius:50%; background:transparent; }
.mp-color-label input::-webkit-color-swatch-wrapper { padding:3px; }.mp-color-label input::-webkit-color-swatch { border:1px solid #cbbfae; border-radius:50%; }.mp-color-label input::-moz-color-swatch { border:1px solid #cbbfae; border-radius:50%; }
.mp-extra-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:10px 24px 0; padding:10px; border:1px solid var(--mp-line); border-radius:12px; background:#f4ede3; }
.mp-extra-tools .mp-select { width:auto; flex:1 1 130px; min-width:0; }
.mp-writing { padding:18px 24px 16px; flex:1; }
.mp-editor-label { display:block; margin:0 0 10px; font-size:13px; font-weight:600; color:var(--mp-soft); }
.mp-editor { min-height:210px; outline:0; font-size:18px; line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; padding:12px 0; caret-color:var(--mp-moss); }
.mp-editor:empty:before { content:attr(data-placeholder); color:#8b8175; pointer-events:none; }
.mp-editor p,.mp-editor div { margin:0 0 12px; }.mp-editor ul,.mp-editor ol { padding-left:24px; margin:10px 0; }
.mp-editor-hint { color:var(--mp-soft); font-size:12px; line-height:1.6; margin:12px 0 0; }
.mp-compose-footer { position:sticky; bottom:0; flex-shrink:0; background:var(--mp-paper); border-top:1px solid var(--mp-line); padding:14px 24px 20px; }
.mp-footer-meta { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.mp-public-note { margin:0; color:var(--mp-soft); font-size:12px; max-width:300px; line-height:1.5; }
.mp-character-count { font-size:12px; color:var(--mp-soft); white-space:nowrap; font-variant-numeric:tabular-nums; }
.mp-character-count.mp-limit { color:#963d33; }
.mp-compose-status { margin:8px 0; font-size:13px; line-height:1.5; color:var(--mp-moss); min-height:0; }
.mp-compose-status:empty { margin:12px 0 0; }
.mp-compose-footer .mp-button { width:100%; }
.mp-emoji-panel { margin:12px 24px 0; border:1px solid var(--mp-line); border-radius:12px; padding:12px; background:#f4ede3; }
.mp-emoji-filters { display:flex; flex-wrap:wrap; gap:8px; }.mp-emoji-search { flex:1 1 180px; min-width:0; }.mp-emoji-filters .mp-select { flex:0 1 155px; }
.mp-emoji-grid { max-height:240px; overflow:auto; overscroll-behavior:contain; padding:8px 0; -webkit-overflow-scrolling:touch; }
.mp-emoji-category h3 { margin:14px 0 7px; font-size:12px; font-weight:600; color:var(--mp-soft); }
.mp-emoji-cells { display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:2px; }
.mp-emoji-choice { min-width:44px; min-height:44px; border:0; background:transparent; border-radius:8px; font-size:25px!important; line-height:1.2; padding:5px; }
.mp-emoji-hint { font-size:12px; color:var(--mp-soft); line-height:1.5; margin:8px 0 0; }
.mp-reader { height:min(780px,calc(var(--mp-vh,100vh) - 40px)); }
.mp-reader-content { flex:1; min-height:0; display:flex; align-items:center; align-items:safe center; overflow:auto; overscroll-behavior:contain; padding:28px; -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.mp-note-full { width:100%; border:0; background:transparent; padding:0; }
.mp-note-full .mp-quote-mark { height:55px; font-size:80px; }
.mp-note-full .mp-note-text { font-size:clamp(20px,3vw,26px); line-height:1.65; }
.mp-note-full .mp-note-footer { margin-top:40px; }
.mp-reader-nav { position:relative; z-index:2; display:flex; flex:0 0 auto; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; border-top:1px solid var(--mp-line); background:var(--mp-paper); }
.mp-reader-arrow { width:52px; height:48px; border:1px solid var(--mp-line); border-radius:12px; background:transparent; color:var(--mp-ink); font-size:24px!important; }
.mp-reader-counter { font-size:14px; color:var(--mp-soft); font-variant-numeric:tabular-nums; }
.mp-dialog [hidden],[data-premium-mural] [hidden] { display:none!important; }
.mp-dialog :focus-visible,[data-premium-mural] button:focus-visible,#message-list.mp-list:focus-visible { outline:3px solid #86724f; outline-offset:3px; }
.mp-editor:focus-visible { outline:0; box-shadow:inset 0 -2px #9d8c70; }
@media(hover:hover) { .mp-tool:hover,.mp-close:hover,.mp-emoji-choice:hover,.mp-read-note:hover { background:#eee4d8; }.mp-primary:hover { background:#37412e; } }
@media(max-width:640px) {
  .mp-write-card { padding:20px; gap:14px; border-radius:16px; }
  .mp-write-copy strong { font-size:23px; }.mp-write-copy p { font-size:13px; }
  .mp-write-card>.mp-primary { flex-basis:100%; width:100%; margin-top:4px; }
  #message-list.mp-list { grid-template-columns:minmax(0,1fr); max-height:65vh; max-height:65dvh; gap:12px; padding-right:6px; }
  .mp-note { padding:22px 20px; }.mp-note-text { font-size:16px; }
  .mp-dialog { top:var(--mp-vtop,0px); bottom:auto; left:0; right:0; width:100%; max-width:none; height:var(--mp-vh,100dvh); max-height:var(--mp-vh,100dvh); margin:0; border:0; border-radius:0; }
  .mp-dialog-head { padding:calc(10px + env(safe-area-inset-top,0px)) 18px 12px; }
  .mp-dialog-head h2 { font-size:21px; max-width:260px; }
  .mp-compose-form { flex:1; }.mp-compose-name { padding:16px 18px 6px; }
  .mp-tools { margin:0 18px; gap:3px; padding-bottom:8px; }.mp-tool { width:42px; min-width:42px; height:44px; }
  .mp-color-label { width:42px; }.mp-extra-tools { margin:10px 18px 0; }
  .mp-writing { padding:18px; min-height:150px; }.mp-editor { min-height:180px; font-size:18px; }
  .mp-compose-footer { padding:12px 18px calc(14px + env(safe-area-inset-bottom,0px)); }
  .mp-emoji-panel { margin:10px 18px 0; }.mp-emoji-grid { max-height:190px; }
  .mp-reader-content { padding:28px 24px; align-items:flex-start; }.mp-note-full { margin:auto 0; }
  .mp-reader-nav { padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px)); }
}
/* On desktop, let only the guestbook leave the narrow mobile invitation column. */
@media(min-width:900px) {
  .invite { overflow:visible; }
  .invite > .message-wall {
    position:relative;
    left:50%;
    width:min(calc(100vw - 80px),1080px);
    max-width:1080px;
    margin-left:0;
    transform:translateX(-50%);
    padding-inline:clamp(28px,5vw,64px);
    border-radius:18px;
    box-shadow:0 18px 50px rgba(0,0,0,.16);
  }
}
@media(max-width:350px) { .mp-dialog-head h2 { font-size:19px; }.mp-tools { gap:0; margin-inline:12px; }.mp-tool { min-width:40px; width:40px; }.mp-color-label { width:40px; }.mp-write-icon { display:none; }.mp-modes .mp-mode { padding-inline:10px; } }
.mp-viewport-tight .mp-composer .mp-compose-footer { position:static; }
.mp-viewport-tight .mp-composer .mp-dialog-head { padding-block:8px; }
.mp-viewport-tight .mp-composer .mp-editor { min-height:100px; }
@media(prefers-reduced-motion:no-preference) { .mp-button,.mp-tool,.mp-read-note,.mp-close { transition:background .16s ease,color .16s ease; } }
@media(forced-colors:active) { .mp-button,.mp-tool,.mp-note,.mp-dialog,.mp-close,.mp-reader-arrow { border:1px solid CanvasText; }.mp-editor:focus-visible { outline:2px solid Highlight; } }

/* ---------- Compositor Estilo Gmail no Mural ---------- */
.mp-gmail-box {
  max-width: 1000px;
  margin: 0 auto 36px;
  border: 1px solid var(--mp-line);
  border-radius: 18px;
  background: var(--mp-paper);
  box-shadow: 0 12px 36px rgba(0,0,0,0.06);
  overflow: hidden;
  color: var(--mp-ink);
}
.mp-gmail-head {
  padding: 16px 22px 14px;
  background: #f7f1e7;
  border-bottom: 1px solid var(--mp-line);
}
.mp-gmail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 600 1.15rem/1.3 Georgia, serif;
  color: var(--mp-ink);
}
.mp-gmail-heading svg {
  width: 20px;
  height: 20px;
  stroke: var(--mp-moss);
  fill: none;
  stroke-width: 2;
}
.mp-gmail-meta {
  display: grid;
  gap: 8px;
}
.mp-gmail-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mp-gmail-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mp-soft);
  min-width: 60px;
}
.mp-gmail-input {
  flex: 1;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--mp-line);
  border-radius: 8px;
  background: #fff;
  font: 0.95rem/1.3 system-ui, sans-serif;
  color: var(--mp-ink);
}
.mp-gmail-to {
  font-size: 0.92rem;
  color: var(--mp-moss);
  font-weight: 500;
}
.mp-gmail-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  background: #faf5ed;
  border-bottom: 1px solid var(--mp-line);
}
.mp-gmail-select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--mp-line);
  border-radius: 6px;
  background: #fff;
  font: 0.85rem system-ui, sans-serif;
  color: var(--mp-ink);
  cursor: pointer;
}
.mp-gmail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--mp-ink);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}
.mp-gmail-btn:hover { background: #ece2d2; }
.mp-gmail-btn.is-active, .mp-gmail-btn[aria-pressed="true"] {
  background: #e1d3be;
  border-color: #c9b79e;
}
.mp-gmail-sep {
  width: 1px;
  height: 20px;
  background: var(--mp-line);
  margin-inline: 4px;
}
.mp-gmail-color-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
}
.mp-gmail-color-label input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.mp-gmail-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #baa992;
}
.mp-gmail-editor-wrap {
  padding: 16px 22px;
  background: #fff;
  min-height: 150px;
}
.mp-gmail-editor {
  min-height: 120px;
  outline: none;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--mp-ink);
}
.mp-gmail-editor:empty:before {
  content: attr(data-placeholder);
  color: #a29584;
  pointer-events: none;
}
.mp-gmail-preview {
  margin: 14px 22px;
  padding: 14px 18px;
  border: 1px dashed #d5c7b3;
  border-radius: 12px;
  background: #fdfaf6;
}
.mp-gmail-preview-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mp-soft);
  margin-bottom: 8px;
}
.mp-gmail-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px 16px;
  background: #f7f1e7;
  border-top: 1px solid var(--mp-line);
}
.mp-gmail-send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 22px;
  border: none;
  border-radius: 9px;
  background: var(--mp-moss);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.mp-gmail-send:hover { background: #3c4533; }
.mp-gmail-send:disabled { opacity: .6; cursor: not-allowed; }
.mp-gmail-count {
  font-size: 0.82rem;
  color: var(--mp-soft);
}
.mp-gmail-status {
  font-size: 0.88rem;
  color: var(--mp-moss);
  font-weight: 500;
  flex-basis: 100%;
}