/* ============================================================
   Sendemaske: Vorlagen und Terminvorschläge.
   Gehört zu mail-senden.js. Alles unter #emailOverlay, sonst
   gewinnt intentio-rahmen.css mit seinen ID-Regeln.
   ============================================================ */

/* Zwei beschriftete Knöpfe in einer Leiste voller Symbole: die
   .rte-btn ist 30px breit festgenagelt — hier darf sie wachsen. */
#emailOverlay .msn-gruppe{ display:inline-flex; align-items:center; gap:4px; }
#emailOverlay .rte-btn.msn-knopf{
  width:auto; height:28px; padding:0 10px 0 7px; display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--text-muted);
}
#emailOverlay .rte-btn.msn-knopf:hover{ color:var(--text); }
#emailOverlay .rte-btn.msn-knopf.an{
  background:var(--surface2); border-color:var(--border); color:var(--text);
}
#emailOverlay .rte-btn.msn-knopf .material-symbols-rounded{ font-size:17px; }

/* Das Klappfeld hängt unter der Leiste und schwebt über dem Text —
   es soll die Maske nicht auseinanderziehen. */
#emailOverlay .rte-toolbar{ position:relative; }
#emailOverlay .msn-feld{
  position:absolute; z-index:30; top:calc(100% + 6px); left:16px; right:16px;
  max-height:330px; overflow-y:auto; padding:8px; text-align:left;   /* mail-senden.js misst nach */
  background:var(--surface,#fff); border-radius:12px;
  box-shadow:0 14px 34px rgba(18,35,58,.2), 0 0 0 1px var(--border);
}
#emailOverlay .msn-laedt{ padding:14px; font-size:13px; color:var(--text-muted); }

/* ---- leer / Hinweis ---- */
#emailOverlay .msn-leer{ padding:16px 14px; text-align:center; color:var(--text-muted); }
#emailOverlay .msn-leer .material-symbols-rounded{ font-size:30px; opacity:.5; }
#emailOverlay .msn-leer b{ display:block; margin:6px 0 4px; font-size:13.5px; color:var(--text); }
#emailOverlay .msn-leer p{ margin:0; font-size:12.5px; line-height:1.5; }
#emailOverlay .msn-hinweis{
  display:flex; align-items:center; gap:6px; margin:2px 4px 8px; padding:7px 10px;
  border-radius:8px; background:var(--surface2); font-size:12.5px; color:var(--text-muted);
}
#emailOverlay .msn-hinweis.warn{ background:rgba(var(--accent-rgb),.1); color:var(--accent-dark,#c96a22); }
#emailOverlay .msn-hinweis .material-symbols-rounded{ font-size:16px; }
#emailOverlay .msn-feld code{
  padding:1px 4px; border-radius:4px; background:rgba(18,35,58,.07); font-size:11.5px;
}

/* ---- Vorlagenliste ---- */
#emailOverlay .msn-zeile{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; margin-bottom:2px;
  border:0; border-radius:9px; background:transparent; text-align:left; cursor:pointer;
}
#emailOverlay .msn-zeile:hover{ background:var(--surface2); }
#emailOverlay .msn-kat{
  flex:none; min-width:84px; padding:3px 8px; border-radius:20px; text-align:center;
  background:var(--surface2); font-size:11px; font-weight:700; color:var(--text-muted);
}
#emailOverlay .msn-zeile:hover .msn-kat{ background:var(--surface); }
#emailOverlay .msn-ztext{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#emailOverlay .msn-ztext b{ font-size:13px; color:var(--text); }
#emailOverlay .msn-ztext i{
  font-style:normal; font-size:12px; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---- Termine ---- */
#emailOverlay .msn-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 6px 8px; border-bottom:1px solid var(--border); margin-bottom:6px;
}
#emailOverlay .msn-kopf label{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-muted);
}
#emailOverlay .msn-kopf select{
  padding:5px 8px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); font-size:12.5px; color:var(--text);
}
#emailOverlay .msn-kopfhin{ font-size:11.5px; color:var(--text-muted); }
#emailOverlay .msn-tag{ padding:4px 6px 8px; }
#emailOverlay .msn-tagname{
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:5px;
}
#emailOverlay .msn-zeiten{ display:flex; flex-wrap:wrap; gap:5px; }
#emailOverlay .msn-zeit{
  padding:6px 11px; border:1px solid var(--border); border-radius:8px; cursor:pointer;
  background:var(--surface); font-size:12.5px; font-weight:600; color:var(--text);
  font-variant-numeric:tabular-nums;
}
#emailOverlay .msn-zeit:hover{ border-color:var(--accent); }
#emailOverlay .msn-zeit.an{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
#emailOverlay .msn-fuss{
  position:sticky; bottom:-8px; display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:4px -8px -8px; padding:9px 14px;
  border-top:1px solid var(--border); background:var(--surface,#fff);
  border-radius:0 0 12px 12px; font-size:12.5px; color:var(--text-muted);
}
#emailOverlay .msn-tun{
  display:inline-flex; align-items:center; gap:4px; padding:7px 13px; border:0;
  border-radius:9px; background:var(--accent); color:#fff; font-size:12.5px; font-weight:700;
  cursor:pointer;
}
#emailOverlay .msn-tun:disabled{ opacity:.4; cursor:default; }
#emailOverlay .msn-tun .material-symbols-rounded{ font-size:16px; }

/* ---- Der eingefügte Block im Editor ----
   In der Mail trägt er seine Farben selbst (inline). Im Editor nur
   ein Hinweis, dass das ein Stück ist und kein Fliesstext. */
#emailOverlay .em-compose-editor .vk-terminblock{ position:relative; }
#emailOverlay .em-compose-editor .vk-terminblock a{ pointer-events:none; }