/* Velvot Mail — Compose v2 standalone stylesheet
   Separated from Webmail so mailbox rebuilds cannot break New Mail. */

body.compose-v2-active main{
  min-width:0;
}

.compose-panel.compose-v2{
  position:relative!important;
  width:min(100%,980px)!important;
  max-width:980px!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
  background:#fff!important;
  border:1px solid #dce7f0!important;
  border-radius:16px!important;
  box-shadow:0 14px 38px rgba(26,66,104,.08)!important;
}

.compose-v2 form{
  display:grid!important;
  gap:0!important;
  width:100%!important;
}

.compose-v2 label{
  margin:0!important;
}

.compose-v2 .compose-recipient-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:end!important;
  border-bottom:1px solid #e7eef4!important;
}

.compose-v2 .compose-recipient-row label,
.compose-v2 .optional-recipient,
.compose-v2 .compose-subject-field{
  display:grid!important;
  grid-template-columns:74px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 18px!important;
  font-size:11px!important;
  font-weight:850!important;
  color:#587087!important;
  border-bottom:1px solid #e7eef4!important;
}

.compose-v2 .compose-recipient-row label{
  border-bottom:0!important;
}

.compose-v2 .compose-recipient-row input,
.compose-v2 .optional-recipient input,
.compose-v2 .compose-subject-field input{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  margin:0!important;
  padding:8px 0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#173a5d!important;
  font-size:14px!important;
}

.compose-v2 .recipient-toggle{
  min-height:32px!important;
  margin:0 18px 8px 0!important;
  padding:0 10px!important;
  border:1px solid #d9e5ef!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#1167d8!important;
  font-size:10px!important;
  font-weight:800!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}

.compose-v2 .optional-recipient{
  display:none!important;
}

.compose-v2 .optional-recipient.is-visible{
  display:grid!important;
}

.compose-editor-field{
  display:block!important;
  position:relative!important;
  min-height:390px!important;
  background:#fff!important;
}

.compose-field-label{
  display:block!important;
  padding:12px 18px 6px!important;
  color:#526d83!important;
  font-size:11px!important;
  font-weight:850!important;
}

.compose-formatbar{
  position:sticky!important;
  top:0!important;
  z-index:4!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  flex-wrap:wrap!important;
  min-height:48px!important;
  padding:8px 14px!important;
  border-top:1px solid #e7eef4!important;
  border-bottom:1px solid #e7eef4!important;
  background:#f8fbfd!important;
}

.compose-formatbar>span{
  width:1px!important;
  height:24px!important;
  margin:0 3px!important;
  background:#dce5ec!important;
}

.compose-formatbar button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:32px!important;
  height:32px!important;
  padding:0 8px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#385875!important;
  font-size:11px!important;
  font-weight:750!important;
  box-shadow:none!important;
}

.compose-formatbar button:hover{
  border-color:#d4e5f2!important;
  background:#eaf4fc!important;
  color:#0f69b6!important;
}

.compose-rich-editor{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:310px!important;
  max-height:620px!important;
  overflow:auto!important;
  padding:22px!important;
  border:0!important;
  outline:0!important;
  background:#fff!important;
  color:#243f58!important;
  font-family:inherit!important;
  font-size:14px!important;
  line-height:1.7!important;
  word-break:break-word!important;
  cursor:text!important;
}

.compose-rich-editor:empty:before{
  content:attr(data-placeholder)!important;
  color:#9aa9b6!important;
  pointer-events:none!important;
}

.compose-rich-editor p{
  margin:0 0 10px!important;
}

.compose-rich-editor blockquote{
  margin:12px 0!important;
  padding:7px 14px!important;
  border-left:3px solid #8fc8ee!important;
  background:#f7fbfe!important;
  color:#637c91!important;
}

.compose-rich-editor a{
  color:#1167d8!important;
}

.compose-attachments{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
  margin:12px 18px!important;
  padding:14px!important;
  border:1px dashed #bdd5e8!important;
  border-radius:11px!important;
  background:#f8fcff!important;
  color:#365a78!important;
  cursor:pointer!important;
}

.compose-attachments input[type="file"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  overflow:hidden!important;
}

.compose-drop-content{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}

.compose-drop-content b{
  color:#1167d8!important;
}

.compose-drop-content span{
  font-size:11px!important;
}

.compose-drop-content small{
  margin-left:auto!important;
  color:#8495a5!important;
  font-size:9px!important;
}

.compose-attachments.is-dragging{
  border-color:#1167d8!important;
  background:#eef8ff!important;
}

.attachment-summary{
  display:flex!important;
  gap:7px!important;
  flex-wrap:wrap!important;
}

.attachment-chip{
  display:inline-grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:7px!important;
  max-width:340px!important;
  padding:7px 8px 7px 10px!important;
  border:1px solid #dce7f0!important;
  border-radius:8px!important;
  background:#fff!important;
}

.attachment-chip b{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:10px!important;
}

.attachment-chip small{
  color:#7f91a2!important;
  font-size:9px!important;
}

.attachment-chip button{
  width:22px!important;
  height:22px!important;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#eef3f7!important;
  color:#60768b!important;
}

.compose-schedule-row{
  display:flex!important;
  justify-content:flex-end!important;
  padding:0 18px 10px!important;
}

.compose-schedule-row label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#657b90!important;
  font-size:10px!important;
}

.compose-schedule-row input{
  min-height:34px!important;
  padding:5px 8px!important;
  font-size:11px!important;
}

.compose-v2 .compose-actions{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  flex-wrap:wrap!important;
  padding:13px 18px!important;
  border-top:1px solid #e7eef4!important;
  border-radius:0 0 16px 16px!important;
  background:#fbfdff!important;
}

.compose-v2 .compose-actions button{
  min-height:38px!important;
  padding:0 16px!important;
}

.compose-v2 .compose-actions .compose-send{
  border-color:#1167d8!important;
  background:#1167d8!important;
  color:#fff!important;
}

.compose-v2 .compose-actions a{
  margin-left:2px!important;
  color:#687f94!important;
  font-size:11px!important;
  text-decoration:none!important;
}

.draft-save-status{
  margin-left:auto!important;
  color:#7b8d9e!important;
  font-size:9px!important;
}

.recipient-autocomplete{
  position:absolute!important;
  z-index:100!important;
  max-height:260px!important;
  overflow:auto!important;
  padding:5px!important;
  border:1px solid #dbe6ef!important;
  border-radius:10px!important;
  background:#fff!important;
  box-shadow:0 16px 38px rgba(24,62,98,.16)!important;
}

.recipient-autocomplete button{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:9px!important;
  align-items:center!important;
  width:100%!important;
  padding:8px!important;
  border:0!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#23445f!important;
  text-align:left!important;
}

.recipient-autocomplete button:hover{
  background:#eef7fd!important;
}

.recipient-autocomplete button>span:last-child{
  display:grid!important;
  min-width:0!important;
}

.recipient-autocomplete b{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
}

.recipient-autocomplete small{
  color:#7890a4!important;
  font-size:9px!important;
}

.recipient-avatar{
  width:32px!important;
  height:32px!important;
  border-radius:9px!important;
  background:#e8f4fd!important;
  color:#1167d8!important;
  display:grid!important;
  place-items:center!important;
  font-weight:900!important;
}

.compose-v2-recovery{
  width:min(100%,980px)!important;
  margin:0 auto 12px!important;
}

@media(max-width:700px){
  .compose-panel.compose-v2{
    border-radius:12px!important;
  }
  .compose-v2 .compose-recipient-row label,
  .compose-v2 .optional-recipient,
  .compose-v2 .compose-subject-field{
    grid-template-columns:52px minmax(0,1fr)!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .compose-formatbar{
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
  }
  .compose-rich-editor{
    min-height:300px!important;
    padding:16px!important;
  }
  .compose-drop-content small{
    width:100%!important;
    margin-left:0!important;
  }
  .compose-v2 .compose-actions{
    padding:11px 12px!important;
  }
  .draft-save-status{
    width:100%!important;
    margin-left:0!important;
  }
  .compose-schedule-row{
    justify-content:flex-start!important;
    padding:0 12px 10px!important;
  }
}

/* Outlook-style full workspace composer v6 */
body.compose-v2-active>main{
  min-height:100vh!important;
  height:100vh!important;
  padding:10px 12px!important;
  overflow:hidden!important;
}
body.compose-v2-active>main>header{display:none!important}
body.compose-v2-active .compose-panel.compose-v2{
  width:100%!important;
  max-width:none!important;
  height:calc(100vh - 20px)!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:12px!important;
  box-shadow:0 8px 28px rgba(18,54,87,.10)!important;
}
.compose-window-bar{
  min-height:54px;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:7px 10px 7px 12px;
  border-bottom:1px solid #dce7ef;
  background:linear-gradient(90deg,#f7fbfe,#fff);
}
.compose-window-title{display:flex;align-items:center;gap:10px;min-width:0}
.compose-window-title>span{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(145deg,#28b4ed,#0878d5);color:#fff;font-weight:900;
}
.compose-window-title>div{display:grid;min-width:0;line-height:1.15}
.compose-window-title b{font-size:13px;color:#173d61}
.compose-window-title small{font-size:9px;color:#7d91a3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compose-window-controls{display:flex;align-items:center;gap:4px}
.compose-window-controls button,.compose-window-controls a{
  width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;
  display:grid!important;place-items:center!important;border:1px solid transparent!important;
  border-radius:7px!important;background:transparent!important;color:#4d687e!important;
  font-size:17px!important;text-decoration:none!important;box-shadow:none!important;
}
.compose-window-controls button:hover,.compose-window-controls a:hover{background:#e5f1fa!important;color:#1167b5!important}
.compose-window-controls .compose-window-close:hover{background:#fff0f1!important;color:#bd2633!important}
body.compose-v2-active .compose-v2 form{
  flex:1 1 auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body.compose-v2-active .compose-editor-field{
  flex:1 1 auto!important;
  min-height:180px!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body.compose-v2-active .compose-rich-editor{
  flex:1 1 auto!important;
  min-height:160px!important;
  max-height:none!important;
  overflow:auto!important;
}
body.compose-v2-active .compose-formatbar{flex:0 0 auto!important}
body.compose-v2-active .compose-attachments{
  flex:0 0 auto!important;
  margin:8px 14px!important;
  padding:9px 12px!important;
}
body.compose-v2-active .compose-schedule-row{flex:0 0 auto!important;padding-bottom:7px!important}
body.compose-v2-active .compose-actions{
  position:sticky!important;
  bottom:0!important;
  z-index:8!important;
  flex:0 0 auto!important;
  margin:0!important;
  border-top:1px solid #dce7ef!important;
  background:#fff!important;
  box-shadow:0 -4px 14px rgba(19,57,91,.05)!important;
}
body.compose-window-expanded .compose-panel.compose-v2{
  position:fixed!important;
  inset:8px!important;
  z-index:1000!important;
  width:auto!important;
  height:auto!important;
  max-width:none!important;
  border-radius:11px!important;
  box-shadow:0 24px 70px rgba(5,24,43,.28)!important;
}
body.compose-window-expanded:before{
  content:"";position:fixed;inset:0;z-index:999;background:rgba(7,27,48,.38);backdrop-filter:blur(2px);
}
.attachment-summary{display:flex!important;gap:7px!important;flex-wrap:wrap!important}
.attachment-chip{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) 26px!important;
  align-items:center!important;
  gap:8px!important;
  min-width:210px!important;
  max-width:320px!important;
  padding:6px!important;
}
.attachment-preview{
  width:38px;height:38px;border-radius:7px;background:#e7f2fa;color:#397194;
  display:grid;place-items:center;font-size:8px;font-weight:900;overflow:hidden;
}
.attachment-preview img{width:100%;height:100%;object-fit:cover}
.attachment-details{display:grid;min-width:0}
.attachment-details b,.attachment-details small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:700px){
  body.compose-v2-active>main{height:auto!important;min-height:100vh!important;padding:4px!important;overflow:auto!important}
  body.compose-v2-active .compose-panel.compose-v2{height:auto!important;min-height:calc(100vh - 8px)!important;border-radius:8px!important}
  .compose-window-bar{position:sticky;top:0;z-index:10}
  .compose-window-expand{display:none!important}
  body.compose-v2-active .compose-rich-editor{min-height:300px!important}
  .attachment-chip{min-width:100%!important;max-width:100%!important}
}


/* Outlook-style in-webmail compose window v7 */
body.compose-overlay-open{overflow:hidden!important}
.outlook-compose-overlay{position:fixed;inset:0;z-index:1800;background:rgba(7,25,45,.26);display:flex;align-items:flex-end;justify-content:flex-end;padding:18px;backdrop-filter:blur(1px)}
.outlook-compose-popup{width:min(720px,calc(100vw - 36px));height:min(760px,calc(100vh - 36px));display:grid;grid-template-rows:46px minmax(0,1fr);overflow:hidden;border:1px solid #bed4e5;border-radius:12px;background:#fff;box-shadow:0 24px 70px rgba(5,24,43,.30)}
.outlook-compose-popup-bar{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 15px;background:linear-gradient(90deg,#0f6fbd,#1588d4);color:#fff;cursor:default}
.outlook-compose-popup-bar strong{font-size:13px;letter-spacing:.1px}
.outlook-compose-popup-bar>div{display:flex;align-items:center;gap:2px}
.outlook-compose-popup-bar button{width:34px!important;height:32px!important;min-height:32px!important;padding:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#fff!important;font-size:18px!important;box-shadow:none!important}
.outlook-compose-popup-bar button:hover{background:rgba(255,255,255,.18)!important}
.outlook-compose-popup-bar button[data-compose-close]:hover{background:#cf3542!important}
.outlook-compose-popup iframe{width:100%;height:100%;border:0;background:#fff}
.outlook-compose-overlay.is-maximized{padding:8px}
.outlook-compose-overlay.is-maximized .outlook-compose-popup{width:100%;height:100%;max-width:none;border-radius:9px}
.outlook-compose-overlay.is-minimized{pointer-events:none;background:transparent;backdrop-filter:none}
.outlook-compose-overlay.is-minimized .outlook-compose-popup{pointer-events:auto;width:320px;height:46px;border-radius:9px}
.outlook-compose-overlay.is-minimized iframe{display:none}
body.compose-embed-mode>aside,body.compose-embed-mode>.mobile-topbar,body.compose-embed-mode>.mobile-nav-backdrop{display:none!important}
body.compose-embed-mode>main{margin:0!important;width:100%!important;max-width:none!important;height:100vh!important;min-height:100vh!important;padding:0!important;overflow:hidden!important}
body.compose-embed-mode>main>header{display:none!important}
body.compose-embed-mode .compose-panel.compose-v2{width:100%!important;max-width:none!important;height:100vh!important;min-height:100vh!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
@media(max-width:700px){.outlook-compose-overlay{padding:0}.outlook-compose-popup,.outlook-compose-overlay.is-maximized .outlook-compose-popup{width:100%;height:100%;border:0;border-radius:0}.outlook-compose-overlay.is-minimized{padding:8px}.outlook-compose-overlay.is-minimized .outlook-compose-popup{width:calc(100vw - 16px);height:46px;border-radius:9px}}