/* ════════ Magic Mail ════════ */

/* Envelope button in the dashboard topbar */
.mm-envelope{
    position:relative;
    background:linear-gradient(135deg,#ffffff,#f3f0ff);
    border:none;
    color:#6a4cc4;
    height:52px;padding:0 20px 0 16px;border-radius:26px;
    display:inline-flex;align-items:center;gap:10px;
    cursor:pointer;margin-right:12px;flex-shrink:0;
    box-shadow:0 4px 14px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .15s ease,box-shadow .15s ease;
}
.mm-envelope::before{
    content:'';position:absolute;inset:0;border-radius:26px;
    box-shadow:0 0 0 0 rgba(255,255,255,.6);
    animation:mm-ring 2.8s ease-out infinite;pointer-events:none;
}
@keyframes mm-ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}70%,100%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.mm-envelope:hover{
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 8px 22px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.6);
}
.mm-envelope:active{transform:translateY(-1px) scale(1.01);}
.mm-env-icon{position:relative;display:inline-flex;animation:mm-pulse 2.6s ease-in-out infinite;}
.mm-env-icon svg{width:26px;height:26px;display:block;}
@keyframes mm-pulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.mm-env-spark{
    position:absolute;top:-9px;right:-11px;font-size:13px;
    animation:mm-twinkle 2.2s ease-in-out infinite;
}
@keyframes mm-twinkle{0%,100%{opacity:.4;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(15deg)}}
.mm-env-label{font-weight:800;font-size:14px;letter-spacing:.2px;white-space:nowrap;}
@media(max-width:560px){
    .mm-envelope{padding:0;width:48px;height:48px;border-radius:16px;justify-content:center;}
    .mm-env-label{display:none;}
}

/* ════════ Modal ════════ */
.mm-modal-overlay{
    position:fixed;inset:0;z-index:100000;
    background:rgba(20,16,45,.55);backdrop-filter:blur(3px);
    display:flex;align-items:center;justify-content:center;padding:20px;
    opacity:0;transition:opacity .25s ease;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.mm-modal-overlay.mm-open{opacity:1;}
.mm-modal{
    position:relative;background:#fff;border-radius:20px;width:100%;max-width:440px;
    box-shadow:0 24px 70px rgba(20,16,45,.45);
    transform:translateY(16px) scale(.97);transition:transform .25s ease;
    overflow:hidden;
}
.mm-open .mm-modal{transform:translateY(0) scale(1);}
.mm-close{
    position:absolute;top:12px;right:14px;z-index:3;
    background:rgba(0,0,0,.06);border:none;border-radius:50%;
    width:30px;height:30px;font-size:20px;line-height:1;cursor:pointer;color:#555;
    display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.mm-close:hover{background:rgba(0,0,0,.12);}

.mm-modal-head{
    text-align:center;padding:26px 26px 14px;
    background:linear-gradient(135deg,#6a4cc4,#a8487e);color:#fff;
}
.mm-modal-env{font-size:40px;line-height:1;margin-bottom:6px;animation:mm-bob 3s ease-in-out infinite;}
@keyframes mm-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.mm-modal-title{margin:0;font-size:1.3rem;font-weight:800;}
.mm-modal-intro{margin:8px 0 0;font-size:13px;opacity:.92;line-height:1.5;}

.mm-modal-body{padding:20px 24px 24px;}
.mm-label{display:block;font-size:12px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;}
.mm-field{
    width:100%;box-sizing:border-box;border:1px solid #ddd;border-radius:10px;
    padding:10px 12px;font-size:14px;font-family:inherit;margin-bottom:14px;
    transition:border-color .15s,box-shadow .15s;
}
.mm-field:focus{outline:none;border-color:#6a4cc4;box-shadow:0 0 0 3px rgba(106,76,196,.15);}
.mm-msg{resize:vertical;min-height:90px;}
.mm-count{text-align:right;font-size:12px;color:#aaa;margin:-8px 0 14px;}
.mm-send{
    width:100%;border:none;border-radius:12px;cursor:pointer;
    background:linear-gradient(135deg,#6a4cc4,#a8487e);color:#fff;
    font-size:15px;font-weight:800;padding:13px;
    box-shadow:0 6px 18px rgba(106,76,196,.35);transition:filter .15s,transform .1s;
}
.mm-send:hover:not(:disabled){filter:brightness(1.07);}
.mm-send:active:not(:disabled){transform:translateY(1px);}
.mm-send:disabled{opacity:.6;cursor:not-allowed;}
.mm-status{margin-top:10px;font-size:13px;color:#c0392b;text-align:center;min-height:18px;}

/* ════════ Success state ════════ */
.mm-success{display:none;text-align:center;padding:36px 26px 30px;}
.mm-modal.mm-sent .mm-modal-body{display:none;}
.mm-modal.mm-sent .mm-modal-head{display:none;}
.mm-modal.mm-sent .mm-success{display:block;}
.mm-success-anim{position:relative;height:80px;margin-bottom:8px;}
.mm-fly-env{
    position:absolute;left:50%;top:50%;font-size:46px;
    animation:mm-fly 1.1s ease-in forwards;
}
@keyframes mm-fly{
    0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
    60%{opacity:1}
    100%{transform:translate(60px,-160px) scale(.4) rotate(25deg);opacity:0}
}
.mm-wand{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-size:40px;opacity:0;animation:mm-wand 1.4s ease-out forwards;
}
@keyframes mm-wand{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-20deg)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(10deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}
.mm-success-msg{font-size:1.15rem;font-weight:800;color:#6a4cc4;margin-bottom:18px;}
.mm-done{
    background:#f0edfa;border:none;border-radius:10px;color:#6a4cc4;font-weight:700;
    padding:10px 28px;cursor:pointer;font-size:14px;transition:background .15s;
}
.mm-done:hover{background:#e4def5;}

@media(max-width:480px){
    .mm-envelope{width:42px;height:42px;}
    .mm-modal-title{font-size:1.15rem;}
}