/* ============================================================
   ItnaOne All-Device Handsome Compose UI V1.0.0
   Desktop + Tablet + iPhone Safari/PWA + Android Chrome/PWA
   This stylesheet is intentionally loaded LAST.
   ============================================================ */

:root{
  --io-final-blue:#0b57d0;
  --io-final-cyan:#13aee8;
  --io-final-text:#202124;
  --io-final-muted:#6b7789;
  --io-final-line:#dbe4ef;
  --io-final-soft:#f6f9fd;
  --io-final-card:#ffffff;
  --io-final-shadow:0 18px 52px rgba(31,61,103,.10);
  --io-final-shadow-soft:0 7px 22px rgba(31,61,103,.055);
}

/* ---------- Compose stage ---------- */
body.compose-page .itnaone-view-stage{
  margin-top:0!important;
  padding-top:0!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(11,87,208,.055),transparent 28%),
    linear-gradient(180deg,#f4f8fd 0%,#f9fbfe 62%,#f5f8fc 100%)!important;
}

body.compose-page .compose-v6.io-compose-premium{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:min(100%,1080px)!important;
  max-width:1080px!important;
  min-width:0!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:24px 18px calc(112px + env(safe-area-inset-bottom,0px))!important;
  transform:none!important;
  box-sizing:border-box!important;
}

body.compose-page .compose-v6-card.io-compose-card{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(201,214,231,.95)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.99)!important;
  box-shadow:var(--io-final-shadow)!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* ---------- Header ---------- */
body.compose-page .compose-v6-header.io-compose-header{
  position:relative!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  inset:auto!important;
  z-index:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  width:100%!important;
  min-height:96px!important;
  margin:0!important;
  padding:21px 25px!important;
  gap:16px!important;
  border:0!important;
  border-bottom:1px solid #e8edf4!important;
  background:linear-gradient(135deg,#fff 0%,#f7fbff 100%)!important;
  transform:none!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-heading{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}

body.compose-page .io-compose-kicker{
  display:block!important;
  margin:0 0 7px!important;
  color:#71819a!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.15em!important;
}

body.compose-page .io-compose-heading h1{
  margin:0!important;
  padding:0!important;
  color:var(--io-final-text)!important;
  font-size:30px!important;
  line-height:1.08!important;
  font-weight:820!important;
  letter-spacing:-.025em!important;
}

body.compose-page .io-compose-heading p{
  display:block!important;
  margin:7px 0 0!important;
  color:#75839a!important;
  font-size:14px!important;
  line-height:1.35!important;
}

body.compose-page .io-compose-head-actions{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  gap:9px!important;
  margin:0!important;
  padding:0!important;
}

body.compose-page .io-compose-head-send,
body.compose-page .io-compose-close{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border-radius:16px!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-head-send{
  border:1px solid #d5e5fa!important;
  background:#eef6ff!important;
  color:var(--io-final-blue)!important;
  box-shadow:0 7px 18px rgba(11,87,208,.08)!important;
}

body.compose-page .io-compose-close{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#526173!important;
}

body.compose-page .io-compose-head-send svg,
body.compose-page .io-compose-close svg{
  width:22px!important;
  height:22px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* ---------- Form ---------- */
body.compose-page .compose-v6-form.io-compose-form{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:15px!important;
  margin:0!important;
  padding:21px 23px 27px!important;
  transform:none!important;
  box-sizing:border-box!important;
}

/* ---------- Common fields ---------- */
body.compose-page .io-compose-field{
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:64px!important;
  margin:0!important;
  padding:0 17px!important;
  gap:10px!important;
  border:1px solid var(--io-final-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--io-final-shadow-soft)!important;
  transform:none!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-field:focus-within{
  border-color:#8db8f5!important;
  box-shadow:0 0 0 4px rgba(11,87,208,.07),0 9px 24px rgba(31,61,103,.06)!important;
}

body.compose-page .io-compose-field-icon{
  display:grid!important;
  place-items:center!important;
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  margin:0!important;
  padding:0!important;
  color:#506782!important;
}

body.compose-page .io-compose-field-icon svg,
body.compose-page .io-compose-contact-link svg{
  width:22px!important;
  height:22px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

body.compose-page .io-compose-field label{
  position:static!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  color:#4e5e72!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:760!important;
  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
}

body.compose-page .io-compose-field input,
body.compose-page .io-compose-field input[type="text"]{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:60px!important;
  min-height:60px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#202124!important;
  font-family:inherit!important;
  font-size:16px!important;
  line-height:60px!important;
  text-align:left!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-field input::placeholder{
  color:#9aa6b5!important;
  opacity:1!important;
}

/* ---------- To ---------- */
body.compose-page .io-compose-field-to{
  grid-template-columns:25px auto minmax(0,1fr) 38px!important;
}

body.compose-page #compose-to{
  width:100%!important;
  min-width:0!important;
}

body.compose-page .io-compose-contact-link{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:13px!important;
  background:#f0f6ff!important;
  color:var(--io-final-blue)!important;
  text-decoration:none!important;
  visibility:visible!important;
  opacity:1!important;
  box-sizing:border-box!important;
}

/* ---------- Cc / Bcc ---------- */
body.compose-page .io-compose-split{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:13px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-field-compact{
  grid-template-columns:auto minmax(0,1fr)!important;
  gap:8px!important;
  min-width:0!important;
  padding-left:15px!important;
  padding-right:15px!important;
}

body.compose-page .io-compose-field-compact .io-compose-field-icon{
  display:none!important;
}

body.compose-page .io-compose-field-compact label{
  min-width:32px!important;
}

body.compose-page .io-compose-field-compact input{
  width:100%!important;
  min-width:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* ---------- Subject ---------- */
body.compose-page .io-compose-subject{
  grid-template-columns:27px auto minmax(0,1fr)!important;
}

body.compose-page #compose-subject{
  width:100%!important;
  min-width:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* ---------- Editor ---------- */
body.compose-page .io-compose-editor{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--io-final-line)!important;
  border-radius:21px!important;
  background:#fff!important;
  box-shadow:0 8px 25px rgba(31,61,103,.05)!important;
  box-sizing:border-box!important;
}

/* Toolbar */
body.compose-page .io-compose-toolbar{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  gap:9px!important;
  margin:0!important;
  padding:10px!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid #e9eef5!important;
  background:linear-gradient(180deg,#fbfdff,#f7faff)!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-toolbar .io-compose-tool{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:46px!important;
  min-height:46px!important;
  margin:0!important;
  padding:0 8px!important;
  gap:7px!important;
  overflow:hidden!important;
  border:1px solid #dce5ef!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#43556e!important;
  box-shadow:0 4px 13px rgba(31,61,103,.035)!important;
  text-decoration:none!important;
  font:inherit!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:760!important;
  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-toolbar .io-compose-tool span{
  position:static!important;
  display:inline!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  clip:auto!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
}

body.compose-page .io-compose-toolbar .io-compose-tool svg{
  display:block!important;
  width:19px!important;
  height:19px!important;
  min-width:19px!important;
  flex:0 0 19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.85!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

body.compose-page .io-compose-toolbar .io-compose-tool:hover,
body.compose-page .io-compose-toolbar .io-compose-tool:focus-visible{
  border-color:#bed5f4!important;
  background:#f2f7ff!important;
  color:var(--io-final-blue)!important;
  outline:0!important;
}

/* Message */
body.compose-page .io-compose-message-label{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

body.compose-page #compose-body,
body.compose-page .io-compose-editor textarea{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:390px!important;
  max-height:none!important;
  margin:0!important;
  padding:22px 21px 27px!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#202124!important;
  font-family:inherit!important;
  font-size:16px!important;
  line-height:1.62!important;
  resize:vertical!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  box-sizing:border-box!important;
}

body.compose-page #compose-body::placeholder{
  color:#98a3b2!important;
  opacity:1!important;
}

/* ---------- Attachments ---------- */
body.compose-page .compose-v6-attachment.io-compose-attachment{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:17px!important;
  border:1px solid #dfe7f1!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fbfdff,#f8fbff)!important;
  box-shadow:var(--io-final-shadow-soft)!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-attachment-title{
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
}

body.compose-page .io-compose-attachment-icon{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:13px!important;
  background:#eef5ff!important;
  color:var(--io-final-blue)!important;
}

body.compose-page .io-compose-attachment-title strong{
  display:block!important;
  color:#31445e!important;
}

body.compose-page .io-compose-attachment-title small{
  display:block!important;
  margin-top:3px!important;
  color:#7a8798!important;
}

body.compose-page #compose-attachments{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:50px!important;
  margin:13px 0 0!important;
  padding:6px 8px!important;
  border:1px solid #d4deea!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#3c4654!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}

body.compose-page #compose-attachments::file-selector-button{
  min-height:37px!important;
  margin-right:9px!important;
  padding:0 13px!important;
  border:0!important;
  border-radius:11px!important;
  background:#edf4ff!important;
  color:var(--io-final-blue)!important;
  font-weight:750!important;
}

body.compose-page .io-compose-file-status{
  margin-top:8px!important;
  color:#778598!important;
  font-size:12px!important;
}

/* ---------- Schedule ---------- */
body.compose-page .io-compose-schedule{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid #dfe7f1!important;
  border-radius:19px!important;
  background:#fff!important;
  box-shadow:var(--io-final-shadow-soft)!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-schedule summary{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:54px!important;
  padding:0 16px!important;
  color:#344860!important;
  font-weight:760!important;
  cursor:pointer!important;
}

body.compose-page .io-compose-schedule label{
  display:block!important;
  padding:0 16px 8px!important;
  color:#526276!important;
  font-weight:650!important;
}

body.compose-page .io-compose-schedule small{
  display:block!important;
  padding:0 16px 15px!important;
  color:#798698!important;
}

body.compose-page .io-compose-schedule input[type="datetime-local"]{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-height:47px!important;
  margin:8px 0 4px!important;
  padding:0 11px!important;
  border:1px solid #ccd8e7!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#202124!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}

/* ---------- Footer tools ---------- */
body.compose-page .io-compose-footer-tools{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-footer-tools>a,
body.compose-page .io-compose-footer-tools>button{
  display:grid!important;
  grid-template-rows:24px auto!important;
  align-content:center!important;
  justify-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:64px!important;
  gap:4px!important;
  margin:0!important;
  padding:7px 4px!important;
  border:1px solid #dfe7f0!important;
  border-radius:16px!important;
  background:#fff!important;
  color:#44556c!important;
  box-shadow:0 5px 16px rgba(31,61,103,.035)!important;
  text-decoration:none!important;
  font:inherit!important;
  font-size:11px!important;
  font-weight:720!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-footer-tools svg{
  width:23px!important;
  height:23px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* ---------- Actions ---------- */
body.compose-page .compose-v6-actions.io-compose-actions{
  position:relative!important;
  inset:auto!important;
  z-index:3!important;
  clear:both!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:100%!important;
  gap:11px!important;
  margin:0!important;
  padding:3px 0 0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
  box-sizing:border-box!important;
}

body.compose-page .io-compose-send{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:154px!important;
  height:50px!important;
  gap:8px!important;
  margin:0!important;
  padding:0 24px!important;
  border:0!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#0b57d0 0%,#1473e6 70%,#16acd8 140%)!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:800!important;
  box-shadow:0 11px 23px rgba(11,87,208,.22)!important;
}

body.compose-page .io-compose-cancel{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:106px!important;
  height:50px!important;
  margin:0!important;
  padding:0 18px!important;
  border:1px solid #d4deea!important;
  border-radius:17px!important;
  background:#fff!important;
  color:#4b596c!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:720!important;
}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width:1024px){
  body.compose-page .compose-v6.io-compose-premium{
    max-width:920px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  body.compose-page .compose-v6-form.io-compose-form{
    padding:19px!important;
  }
}

/* ============================================================
   MOBILE — SAME CORE UI FOR IOS + ANDROID
   ============================================================ */
@media (max-width:760px){
  html,
  body.compose-page,
  body.compose-page.mail-ui-page{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.compose-page .itnaone-view-stage{
    margin-top:0!important;
    padding-top:0!important;
  }

  body.compose-page .compose-v6.io-compose-premium{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:8px 8px calc(125px + env(safe-area-inset-bottom,0px))!important;
    transform:none!important;
  }

  body.compose-page .compose-v6-card.io-compose-card{
    min-height:0!important;
    border-radius:22px!important;
  }

  body.compose-page .compose-v6-header.io-compose-header{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto!important;
    min-height:78px!important;
    margin:0!important;
    padding:14px 16px!important;
    transform:none!important;
  }

  body.compose-page .io-compose-kicker,
  body.compose-page .io-compose-heading p{
    display:none!important;
  }

  body.compose-page .io-compose-heading h1{
    font-size:24px!important;
    line-height:1.12!important;
  }

  body.compose-page .io-compose-head-send,
  body.compose-page .io-compose-close{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    border-radius:14px!important;
  }

  body.compose-page .compose-v6-form.io-compose-form{
    display:grid!important;
    gap:11px!important;
    padding:12px!important;
  }

  body.compose-page .io-compose-field{
    min-height:58px!important;
    padding-left:12px!important;
    padding-right:12px!important;
    gap:7px!important;
    border-radius:16px!important;
  }

  body.compose-page .io-compose-field label{
    font-size:14px!important;
  }

  body.compose-page .io-compose-field input,
  body.compose-page .io-compose-field input[type="text"]{
    height:55px!important;
    min-height:55px!important;
    line-height:55px!important;
    font-size:15px!important;
  }

  body.compose-page .io-compose-field-to{
    grid-template-columns:24px auto minmax(0,1fr) 36px!important;
  }

  body.compose-page .io-compose-contact-link{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:12px!important;
  }

  body.compose-page .io-compose-split{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:8px!important;
  }

  body.compose-page .io-compose-field-compact{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:4px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  body.compose-page .io-compose-field-compact label{
    min-width:0!important;
    font-size:13px!important;
  }

  body.compose-page .io-compose-field-compact input{
    font-size:14px!important;
  }

  body.compose-page .io-compose-subject{
    grid-template-columns:26px auto minmax(0,1fr)!important;
  }

  body.compose-page .io-compose-editor{
    border-radius:18px!important;
  }

  body.compose-page .io-compose-toolbar{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
    padding:7px!important;
  }

  body.compose-page .io-compose-toolbar .io-compose-tool{
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    gap:4px!important;
    padding:0 3px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }

  body.compose-page .io-compose-toolbar .io-compose-tool span{
    display:inline!important;
    max-width:100%!important;
    font-size:11px!important;
  }

  body.compose-page .io-compose-toolbar .io-compose-tool svg{
    width:17px!important;
    height:17px!important;
    min-width:17px!important;
    flex-basis:17px!important;
  }

  body.compose-page #compose-body,
  body.compose-page .io-compose-editor textarea{
    min-height:330px!important;
    padding:18px 16px 23px!important;
    font-size:15px!important;
    line-height:1.58!important;
  }

  body.compose-page .compose-v6-attachment.io-compose-attachment{
    padding:14px!important;
    border-radius:17px!important;
  }

  body.compose-page .io-compose-schedule{
    border-radius:17px!important;
  }

  body.compose-page .io-compose-footer-tools{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }

  body.compose-page .io-compose-footer-tools>a,
  body.compose-page .io-compose-footer-tools>button{
    min-height:59px!important;
    border-radius:14px!important;
    padding:6px 2px!important;
    font-size:10px!important;
  }

  body.compose-page .compose-v6-actions.io-compose-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 98px!important;
    gap:8px!important;
    padding-top:1px!important;
  }

  body.compose-page .io-compose-send,
  body.compose-page .io-compose-cancel{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    border-radius:15px!important;
  }

  /* Keep app dock above browser safe area */
  body.compose-page .mail-mobile-dock,
  body.compose-page .bottom-nav,
  body.compose-page .mobile-nav,
  body.compose-page .mail-bottom-nav{
    z-index:1000!important;
    padding-bottom:env(safe-area-inset-bottom,0px)!important;
    box-sizing:border-box!important;
  }
}

/* Small phones */
@media (max-width:430px){
  body.compose-page .compose-v6.io-compose-premium{
    padding-left:7px!important;
    padding-right:7px!important;
  }

  body.compose-page .compose-v6-header.io-compose-header{
    padding:13px 14px!important;
  }

  body.compose-page .io-compose-heading h1{
    font-size:22px!important;
  }

  body.compose-page .compose-v6-form.io-compose-form{
    padding:10px!important;
  }

  body.compose-page .io-compose-toolbar .io-compose-tool{
    flex-direction:column!important;
    gap:2px!important;
    height:50px!important;
    min-height:50px!important;
  }

  body.compose-page .io-compose-toolbar .io-compose-tool span{
    font-size:9.5px!important;
    line-height:1!important;
  }
}

/* Very narrow phones */
@media (max-width:350px){
  body.compose-page .io-compose-split{
    grid-template-columns:1fr!important;
  }

  body.compose-page .io-compose-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  body.compose-page .io-compose-toolbar .io-compose-tool{
    flex-direction:row!important;
    font-size:11px!important;
  }

  body.compose-page .io-compose-footer-tools{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}