.mail-composer{width:100%;overflow:hidden;border:1px solid #d9e0e7;border-radius:12px;background:#fff;box-shadow:0 4px 16px rgba(27,43,56,.05)}
.mail-composer [hidden]{display:none!important}
.mail-addresses{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:16px;padding:18px 20px;background:#fff;border-bottom:1px solid #e3e8ed}
.mail-addresses label{display:grid;gap:7px;color:#263642;font-size:13px;font-weight:700}.mail-addresses input{min-width:0;width:100%;height:42px;border:1px solid #c7d1da;border-radius:8px;padding:0 12px;font:inherit;background:#fff}.mail-addresses input:focus{outline:3px solid rgba(91,61,245,.16);border-color:#5b3df5}
.mail-compose-pane{display:flex;flex-direction:column;min-height:420px;border-right:0;background:#fff}.mail-toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:10px 14px;background:#f6f8fa;border-bottom:1px solid #dfe5eb}.toolbar-group{display:flex;align-items:center;overflow:hidden;border:1px solid #d5dce3;border-radius:7px;background:#fff}.toolbar-group button,.toolbar-group select,.toolbar-group label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:34px;height:34px;margin:0;padding:0 9px;border:0;border-right:1px solid #e2e7ec;border-radius:0;background:#fff;color:#263642;font:600 13px/1 system-ui;cursor:pointer}.toolbar-group button:last-child,.toolbar-group label:last-child{border-right:0}.toolbar-group button:hover{background:#eeeafd;color:#452bd1}.toolbar-group select{justify-content:flex-start;max-width:130px;outline:0}.toolbar-group label{gap:4px}.toolbar-group input[type=color]{width:17px;height:17px;padding:0;border:0;background:transparent;cursor:pointer}
.rich-mail-editor,.mail-source{box-sizing:border-box;flex:1;min-height:290px;margin:0;border:0;padding:28px 30px;font:15px/1.6 system-ui;background:#fff}.rich-mail-editor:focus{outline:0}.mail-source{resize:vertical;font-family:ui-monospace,Consolas,monospace;background:#17212b;color:#e8eef2}.mail-attachments{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid #e1e6eb;background:#fbfcfd;color:#334651;font-size:13px;font-weight:700}.mail-attachments input{max-width:300px;font:inherit}.mail-attachments small{overflow:hidden;color:#6a7b87;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.mail-send-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid #dfe5eb;background:#fff}.mail-send-row small{color:#6a7b87}.mail-send-row .primary{min-width:154px;margin:0;padding:11px 20px}
.mail-preview-details{border-top:1px solid #e1e6eb;background:#f7f9fb}.mail-preview-details>summary{padding:12px 20px;color:#4c35c7;font-size:13px;font-weight:700;cursor:pointer}.mail-preview-pane{padding:0 20px 20px}.mail-preview-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:13px}.mail-preview-heading span{border-radius:99px;background:#e0e5eb;padding:4px 8px;color:#60717d;font-size:11px}.mail-preview{display:block;width:100%;height:440px;border:1px solid #dbe2e8;border-radius:9px;background:#fff}
@media(max-width:700px){.mail-addresses{grid-template-columns:1fr;padding:15px}.mail-toolbar{gap:5px;padding:8px}.toolbar-group{max-width:100%}.toolbar-group select{max-width:104px}.rich-mail-editor,.mail-source{padding:20px;min-height:260px}.mail-attachments{align-items:flex-start;flex-direction:column}.mail-send-row{align-items:stretch;flex-direction:column}.mail-send-row .primary{width:100%}.mail-preview-pane{padding:0 14px 14px}.mail-preview{height:340px}}