/* 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-photo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 0 22px 12px;
  background: #fff;
}
.mp-gmail-photo-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--mp-line);
  border-radius: 8px;
  background: #faf5ed;
  color: var(--mp-ink);
  padding: 7px 11px;
  font-size: .86rem;
}
.mp-gmail-photo-button svg { width: 17px; height: 17px; }
.mp-gmail-photo-button small { color: var(--mp-soft); font-size: .72rem; }
.mp-gmail-photo-button:hover { background: #ece2d2; }
.mp-gmail-photo-button:disabled { opacity: .55; cursor: default; }
.mp-gmail-photo-hint { color: var(--mp-soft); font-size: .76rem; }
.mp-gmail-photo-selection { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 9px; }
.mp-gmail-photo-selection:empty { display: none; }
.mp-gmail-photo-slot { position: relative; }
.mp-gmail-photo-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 0;
  border-radius: 50%;
  background: #43382f;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
}
.mp-gmail-photo-remove:disabled { opacity: .5; }
.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%;
}

/* /festa reuses the same Gmail composer inside a true full-screen dialog. */
.mp-gmail-dialog { width:min(760px,calc(100% - 32px)); height:min(900px,calc(var(--mp-vh,100vh) - 32px)); max-height:calc(var(--mp-vh,100vh) - 32px); }
.mp-gmail-dialog .mp-gmail-box-fullscreen { display:flex; flex-direction:column; width:100%; height:100%; min-height:0; max-width:none; margin:0; overflow:hidden; border:0; border-radius:0; box-shadow:none; }
.mp-gmail-box-fullscreen .mp-gmail-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px 14px; flex:0 0 auto; }
.mp-gmail-box-fullscreen .mp-gmail-heading { grid-column:1; margin:0; }
.mp-gmail-box-fullscreen .mp-gmail-meta { grid-column:1; }
.mp-gmail-box-fullscreen .mp-gmail-head > .mp-close { grid-column:2; grid-row:1 / span 2; }
.mp-gmail-box-fullscreen .mp-gmail-toolbar { flex:0 0 auto; }
.mp-gmail-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.mp-gmail-box-fullscreen .mp-gmail-footer { flex:0 0 auto; }
.mp-gmail-box-fullscreen .mp-gmail-send { justify-content:center; }
.mp-gmail-dialog::backdrop { background:rgba(32,39,31,.72); }
.mp-sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.fx-wall.mp-list { grid-template-columns:minmax(0,1fr); max-height:min(70dvh,620px); overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; }
.fx-wall-status:empty { display:none; }
@media(max-width:640px) {
  .mp-gmail-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-gmail-box-fullscreen .mp-gmail-head { padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px; }
  .mp-gmail-box-fullscreen .mp-gmail-toolbar { gap:3px; padding:8px 10px; }
  .mp-gmail-box-fullscreen .mp-gmail-select { max-width:min(39vw,170px); }
  .mp-gmail-box-fullscreen .mp-gmail-editor-wrap { padding:14px 16px; }
  .mp-gmail-box-fullscreen .mp-gmail-photo-row { padding:0 16px 12px; }
  .mp-gmail-box-fullscreen .mp-gmail-preview { margin:10px 14px; padding:12px; }
  .mp-gmail-box-fullscreen .mp-gmail-footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px)); }
  .mp-gmail-box-fullscreen .mp-gmail-send { grid-column:1/-1; width:100%; min-height:48px; }
  .mp-gmail-box-fullscreen .mp-gmail-status { grid-column:1/-1; }
  .fx-wall.mp-list { max-height:min(62dvh,620px); }
}

/* ==========================================================================
   ADICIONAIS 2, 3, 4: Data/Hora, Miniaturas com cantos arredondados e Lightbox
   ========================================================================== */

/* Linha de data e hora do recado, alinhada à direita */
.mp-note-date-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 6px 0 8px;
  padding: 0;
}
.mp-note-datetime {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--mp-soft, #766d62);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Miniaturas de fotos e vídeos com cantos arredondados */
.mp-note-media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 12px;
}
.mp-note-thumb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 1px solid rgba(66, 57, 47, 0.15);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mp-note-thumb-btn:hover,
.mp-note-thumb-btn:focus-visible {
  transform: scale(1.04);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
  outline: 2px solid var(--mp-moss, #4f5b45);
  outline-offset: 2px;
}
.mp-note-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 11px;
}
.mp-note-video-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(20, 24, 18, 0.85);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Visualizador em tela cheia (Lightbox) */
.mp-lightbox-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(14, 17, 14, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  z-index: 99999;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.mp-lightbox-dialog[open] {
  display: flex;
}
.mp-lightbox-dialog::backdrop {
  background: rgba(14, 17, 14, 0.96);
}
.mp-lightbox-open {
  overflow: hidden !important;
}
.mp-lightbox-topbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 12px calc(16px + env(safe-area-inset-left, 0px));
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), transparent);
  z-index: 10;
}
.mp-lightbox-counter {
  font-size: 0.92rem;
  font-weight: 600;
  color: #f3f0ea;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.mp-lightbox-close {
  background: rgba(255, 255, 255, 0.16);
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  touch-action: manipulation;
}
.mp-lightbox-close:hover,
.mp-lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(1.06);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.mp-lightbox-stage {
  flex: 1 1 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}
.mp-lightbox-media-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.mp-lightbox-img {
  max-width: 95vw;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: 6px;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s ease-out;
  transform-origin: center center;
  will-change: transform;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
}
.mp-lightbox-video {
  max-width: 95vw;
  max-height: calc(100vh - 120px);
  border-radius: 6px;
  outline: none;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6);
  background: #000;
}
.mp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s ease, transform 0.15s ease;
  touch-action: manipulation;
}
.mp-lightbox-nav:hover:not(:disabled),
.mp-lightbox-nav:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.08);
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.mp-lightbox-nav:disabled {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
.mp-lightbox-prev {
  left: calc(14px + env(safe-area-inset-left, 0px));
}
.mp-lightbox-next {
  right: calc(14px + env(safe-area-inset-right, 0px));
}
@media (max-width: 480px) {
  .mp-lightbox-nav {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    background: rgba(0, 0, 0, 0.45);
  }
  .mp-lightbox-prev { left: 8px; }
  .mp-lightbox-next { right: 8px; }
  .mp-note-thumb-btn {
    width: 68px;
    height: 68px;
  }
}