/* After a confirmed server response show the actual sent message, not a blank compose screen. */
#conversation.sentReceiptMode #mailComposer,
#conversation.sentReceiptMode >.composerOptions,
#conversation.sentReceiptMode >.translationActions,
#conversation.sentReceiptMode #filePreview{display:none!important}
#conversation.sentReceiptMode .messages{min-height:0;overflow:auto;padding:12px}
.sentMailReceipt{
 box-sizing:border-box;width:100%;max-width:760px;margin:10px auto;padding:17px 15px;
 border:3px solid #087d43;border-radius:18px;background:#f3fcf5;
 color:#123e28;box-shadow:0 3px 11px #002b1530;
 direction:rtl;text-align:right;overflow-wrap:anywhere
}
.sentMailReceipt.isPartial{background:#fff9e9;border-color:#c59328;color:#5c4215}
.sentMailReceiptHeader{
 display:flex;align-items:center;gap:8px;font-size:clamp(20px,5vw,26px);
 font-weight:1000;line-height:1.25;margin-bottom:9px
}
.sentMailReceiptStatus{
 display:block;padding:10px;border-radius:11px;background:#ddf7e6;
 color:#075c33;font-size:clamp(15px,3.7vw,18px);font-weight:900;
 margin:9px 0 12px
}
.sentMailReceipt.isPartial .sentMailReceiptStatus{background:#fff0c9;color:#674a0b}
.sentMailReceiptMeta{display:grid;gap:8px;margin:12px 0}
.sentMailReceiptMetaRow{
 padding:8px 10px;border:1px solid #b7d6c2;border-radius:10px;background:#fff;
 font-size:clamp(14px,3.6vw,16px);line-height:1.4
}
.sentMailReceiptMetaRow strong{display:block;color:#075c33;margin-bottom:3px}
.sentMailReceiptBody{
 min-height:54px;padding:13px 11px;border-radius:11px;
 background:#fff;border:1px solid #a8ceba;color:#253b2c;
 white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;
 font-size:clamp(15px,3.7vw,17px)
}
.sentMailReceiptAttachments{margin:10px 0;font-size:14px}
.sentMailReceiptAttachments span{display:block;margin:4px 0;padding:7px 9px;background:#fff;border-radius:8px}
.sentMailReceiptButtons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.sentMailReceiptButtons button{
 box-sizing:border-box;min-width:0;min-height:53px;padding:9px 7px;
 border:2px solid #075e2c;border-radius:12px;background:#087d43;
 color:#fff;font:900 15px/1.3 Arial,sans-serif;cursor:pointer
}
.sentMailReceiptButtons button.sentMailReceiptSentFolder{background:#fff;color:#075e2c}
@media(max-width:370px){.sentMailReceiptButtons{grid-template-columns:1fr}}


/* While the request is pending, replace the composer with a clear wait state,
   then let the confirmed-send receipt take over atomically. */
#conversation.sendPendingMode #mailComposer,
#conversation.sendPendingMode .composerOptions,
#conversation.sendPendingMode .translationActions,
#conversation.sendPendingMode #filePreview{display:none!important}
.mailSendProgressOverlay{
 position:fixed;inset:0;z-index:2147483600;
 display:flex;align-items:center;justify-content:center;
 padding:18px;background:rgba(0,37,20,.76);direction:rtl;
}
.mailSendProgressCard{
 box-sizing:border-box;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:10px;
 width:min(460px,100%);max-height:85dvh;overflow:auto;
 padding:25px 18px;border:3px solid #a1d2b3;border-radius:18px;
 background:#fff;color:#0b4a2b;box-shadow:0 12px 35px #001c1066;
 text-align:center;overflow-wrap:anywhere;
}
.mailSendProgressSpinner{
 width:46px;height:46px;border:5px solid #d5ebe0;
 border-top-color:#0d864e;border-radius:50%;
 animation:mailSendProgressSpin .8s linear infinite;
}
@keyframes mailSendProgressSpin{to{transform:rotate(360deg)}}
.mailSendProgressCard strong{font-size:clamp(22px,5.5vw,28px);line-height:1.35}
.mailSendProgressCard p{margin:0;font-size:clamp(15px,4vw,18px);line-height:1.5}
.mailSendProgressCard .mailSendProgressTo,
.mailSendProgressCard .mailSendProgressSubject{
 font-size:15px;font-weight:800;
 padding:7px 9px;border-radius:9px;background:#eff8f1;
 width:100%;box-sizing:border-box;
}
.mailSendProgressCard .mailSendProgressTo:empty,
.mailSendProgressCard .mailSendProgressSubject:empty{display:none}
@media(prefers-reduced-motion:reduce){.mailSendProgressSpinner{animation:none}}


/* Confirmed-send screen independent from the mail composer DOM. */
.sentMailConfirmationOverlay{
 position:fixed;inset:0;z-index:2147483600;
 display:flex;align-items:flex-start;justify-content:center;
 padding:calc(env(safe-area-inset-top,0px) + 16px) 12px calc(env(safe-area-inset-bottom,0px) + 18px);
 box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
 background:#eaf4ed;direction:rtl;
}
.sentMailConfirmationOverlay .sentMailReceipt{
 flex:0 0 auto;margin:0 auto;max-width:680px;
 border-width:3px;box-shadow:0 10px 30px rgba(0,45,22,.17);
}
.sentMailConfirmationOverlay .sentMailReceiptHeader{
 font-size:clamp(22px,5.4vw,30px);color:#075e2c;
}
.sentMailConfirmationOverlay .sentMailReceiptBody{
 max-height:none;min-height:72px;white-space:pre-wrap;overflow-wrap:anywhere;
}
.sentMailConfirmationOverlay .sentMailReceiptButtons{
 position:sticky;bottom:0;z-index:1;
 padding:10px 0 3px;background:#f3fcf5;
}
@media(max-width:480px){
 .sentMailConfirmationOverlay{padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(env(safe-area-inset-bottom,0px) + 12px)}
 .sentMailConfirmationOverlay .sentMailReceipt{padding:14px 11px;border-radius:14px}
 .sentMailConfirmationOverlay .sentMailReceiptButtons button{font-size:14px}
}


/* A successful send must always have an obvious escape, even on small phones
   and when the attachment list makes the receipt taller than the viewport. */
.sentMailConfirmationOverlay{
 flex-direction:column!important;
 align-items:center!important;
 justify-content:flex-start!important;
}
.sentMailReceiptReturnBar{
 position:sticky;top:0;z-index:5;
 box-sizing:border-box;width:100%;max-width:680px;
 display:flex;justify-content:flex-start;align-items:center;
 padding:0 0 9px;margin:0;
 background:#eaf4ed;
}
.sentMailReceiptClose{
 min-height:49px;padding:10px 18px;border:2px solid #087d43;
 border-radius:12px;background:#fff;color:#075e2c;
 font:900 clamp(15px,4vw,18px)/1.2 Arial,sans-serif;
 cursor:pointer;box-shadow:0 2px 8px rgba(0,44,20,.12)
}
.sentMailReceiptClose:focus-visible{
 outline:3px solid #1764c7;outline-offset:2px
}
@media(max-width:480px){
 .sentMailReceiptReturnBar{padding-bottom:7px}
 .sentMailReceiptClose{min-height:47px;padding:8px 13px}
}