/* Hosey Mail — 2026.11 responsive and compose finishing layer.
 * Scoped to hosey-mail; added after the original skin styles.
 */
:root{
 --hosey-polish-green:#187e6e;
 --hosey-polish-green-hover:#115e53;
 --hosey-polish-white:#fff;
 --hosey-polish-soft:#f5faf6;
 --hosey-polish-border:#dde9e1;
}

/* Desktop compose workspace: every pixel of the content region belongs to Hosey,
   including the area behind the bottom actions and the editor edges. */
html:not(.dark-mode) body.task-mail.action-compose,
html:not(.dark-mode) body.task-mail.action-compose #layout,
html:not(.dark-mode) body.task-mail.action-compose #layout-content,
html:not(.dark-mode) body.task-mail.action-compose #compose-content,
html:not(.dark-mode) body.task-mail.action-compose #compose-content>form,
html:not(.dark-mode) body.task-mail.action-compose #composebodycontainer,
html:not(.dark-mode) body.task-mail.action-compose #compose-content>.formbuttons {
 background-color:#fff!important;
}
body.task-mail.action-compose #layout{
 gap:0!important;padding:0!important;margin:0!important;
 align-items:stretch!important;min-height:0!important
}
body.task-mail.action-compose #layout-content{
 height:100%!important;min-height:0!important;
 box-sizing:border-box!important;margin:0!important;
 padding:0!important;border:0!important;
 display:flex!important;flex-direction:column!important;
}
body.task-mail.action-compose #compose-content{
 box-sizing:border-box!important;display:flex!important;
 flex:1 1 auto!important;flex-direction:column!important;
 height:auto!important;min-height:0!important;max-height:100%!important;
 margin:0!important;padding:0!important;
 overflow:hidden!important;border:0!important
}
body.task-mail.action-compose #compose-content>form{
 box-sizing:border-box!important;display:flex!important;
 flex-direction:column!important;flex:1 1 auto!important;
 min-height:0!important;max-height:100%!important;
 margin:0!important;padding:0!important;overflow:hidden!important
}
body.task-mail.action-compose #composebodycontainer{
 box-sizing:border-box!important;min-width:0!important;
 min-height:0!important;flex:1 1 auto!important;
 background:#fff!important;
}
body.task-mail.action-compose #compose-content>.formbuttons{
 box-sizing:border-box!important;position:relative!important;
 left:auto!important;right:auto!important;bottom:auto!important;
 flex:0 0 75px!important;width:100%!important;
 margin:0!important;min-height:75px!important;height:75px!important;
 background:#fff!important;border:0!important;
 border-top:1px solid var(--hosey-polish-border)!important;
 box-shadow:none!important;z-index:2!important
}
body.task-mail.action-compose #compose-content>.formbuttons .float-right{
 margin-left:auto!important;margin-right:4px!important;
 display:flex!important;align-items:center!important;min-width:0!important
}

/* No leftover blue bootstrap links under the editor. */
body.task-mail.action-compose #compose-content>.formbuttons a,
body.task-mail.action-compose #compose-content>.formbuttons a.extwin,
body.task-mail.action-compose #compose-content>.formbuttons a.extwin .inner,
body.task-mail.action-compose #compose-content>.formbuttons a.btn-link,
body.task-mail.action-compose #compose-content>.formbuttons a.btn-link .inner{
 color:var(--hosey-polish-green)!important;text-decoration:none!important;
 font-weight:750!important
}
body.task-mail.action-compose #compose-content>.formbuttons a:hover,
body.task-mail.action-compose #compose-content>.formbuttons a:focus-visible{
 color:var(--hosey-polish-green-hover)!important;
 text-decoration:underline!important;text-underline-offset:3px
}
body.task-mail.action-compose #compose-content>.formbuttons a.extwin:before{
 color:var(--hosey-polish-green)!important
}
body.task-mail.action-compose #compose-content>.formbuttons .btn-primary.send,
body.task-mail.action-compose #compose-content>.formbuttons button.send{
 color:white!important;background:var(--hosey-polish-green)!important;
 border-color:var(--hosey-polish-green)!important;
}
body.task-mail.action-compose #compose-content>.formbuttons .btn-primary.send:hover{
 background:var(--hosey-polish-green-hover)!important;
 border-color:var(--hosey-polish-green-hover)!important
}

/* Small desktops and tablets keep a readable toolbar without spilling outside
   the viewport. */
@media (min-width:769px) and (max-width:1150px){
 body.task-mail.action-compose #layout-sidebar.sidebar-right{
  flex:0 0 265px!important;min-width:240px!important;
  width:265px!important;max-width:265px!important
 }
 body.task-mail.action-compose #compose-headers{
  padding:10px 15px!important
 }
 body.task-mail.action-compose #composebodycontainer{
  padding:8px 12px 0!important
 }
 body.task-mail.action-compose #messagetoolbar{
  gap:0!important
 }
 body.task-mail.action-compose #messagetoolbar>a{
  min-width:0!important;padding:7px 6px!important
 }
}

/* Mobile: let the original Roundcube selected-screen router control visibility.
   Earlier rules expanded all columns at once and clipped the editor. */
@media (max-width:768px){
 html:not(.dark-mode) body:not(.task-login) #layout{
   background:#f8fbf8!important
 }
 body:not(.task-login):not(.task-error) #layout{
   width:100%!important;height:100dvh!important;
   min-height:0!important;overflow:hidden!important
 }
 body:not(.task-login):not(.task-error) #layout>div:not(#layout-menu){
   height:100%!important;max-height:100%!important;
   min-width:0!important;box-sizing:border-box!important
 }
 body:not(.task-login):not(.task-error) #layout-content{
   width:auto!important;min-width:0!important;max-width:100%!important;
   flex:1 1 auto!important;overflow:hidden!important
 }
 body:not(.task-login):not(.task-error) #layout-list,
 body:not(.task-login):not(.task-error) #layout-sidebar:not(.sidebar-right){
   min-width:0!important;max-width:100%!important;
   flex:1 1 auto!important
 }
 body:not(.task-login) #layout>div>.header{
   height:55px!important;min-height:55px!important;
   flex:0 0 55px!important;padding:0 12px!important
 }
 body.task-mail.action-compose #layout-content>.header{
   height:55px!important;min-height:55px!important;
   flex:0 0 55px!important;padding:0 8px!important
 }
 body.task-mail.action-compose #layout-sidebar.sidebar-right{
   min-width:0!important;max-width:100%!important;
   flex:1 1 auto!important;height:100%!important
 }
 body.task-mail.action-compose #compose-headers{
   padding:9px 12px!important
 }
 body.task-mail.action-compose #compose-headers .form-group.row{
   display:flex!important;flex-wrap:nowrap!important;
   margin-bottom:8px!important;min-width:0!important
 }
 body.task-mail.action-compose #compose-headers .col-2{
   flex:0 0 80px!important;max-width:80px!important;
   padding-right:6px!important;min-width:0!important
 }
 body.task-mail.action-compose #compose-headers .col-10{
   flex:1 1 auto!important;max-width:none!important;
   min-width:0!important;padding:0!important
 }
 body.task-mail.action-compose #compose-headers label{
   font-size:11px!important
 }
 body.task-mail.action-compose #compose-headers .input-group{
   width:100%!important;min-width:0!important;
   flex-wrap:nowrap!important
 }
 body.task-mail.action-compose #compose-headers input,
 body.task-mail.action-compose #compose-headers select,
 body.task-mail.action-compose #compose-headers .recipient-input{
   min-width:0!important;max-width:100%!important;
   width:100%!important;min-height:38px!important
 }
 body.task-mail.action-compose #composebodycontainer{
   min-height:0!important;padding:8px 10px 0!important
 }
 body.task-mail.action-compose #composebodycontainer textarea{
   min-height:105px!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons{
   min-height:60px!important;height:60px!important;
   flex-basis:60px!important;padding:6px 10px!important;
   gap:6px!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons .send{
   min-width:120px!important;min-height:42px!important;
   font-size:12px!important;padding:8px 14px!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons .float-right{
   min-width:0!important;overflow:hidden!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons a.extwin{
   font-size:11px!important;white-space:normal!important;
   display:inline-flex!important;align-items:center!important;
   gap:4px!important;max-width:100%!important;
 }
 body.task-mail.action-compose #messagetoolbar{
   min-width:0!important;max-width:100%!important;
   overflow-x:auto!important;scrollbar-width:none!important;
 }
 body.task-mail.action-compose #messagetoolbar::-webkit-scrollbar{
   display:none!important
 }
 body.task-mail.action-compose #messagetoolbar a.hosey-send-top{
   min-width:90px!important;min-height:40px!important;
   padding:8px 12px!important
 }
}

/* Narrow phone: native menu remains a popover; attachments open from Options.
   Show only the working pane so there is no horizontal page scrolling. */
@media (max-width:480px){
 html.layout-phone body:not(.task-login) #layout-menu.popover{
   width:min(285px,calc(100vw - 22px))!important;
   max-width:calc(100vw - 22px)!important;min-width:0!important;
   z-index:1100!important
 }
 html.layout-phone body:not(.task-login) #layout-menu.popover #taskmenu{
   width:100%!important;max-width:100%!important;min-width:0!important
 }
 html.layout-phone body:not(.task-login) #layout-menu.popover #taskmenu a .inner{
   display:block!important
 }
 html.layout-phone body:not(.task-login) #layout-menu.popover .hosey-brand-full{
   display:block!important;width:170px!important
 }
 html.layout-phone body:not(.task-login) #layout-menu.popover .hosey-brand-mark{
   display:none!important
 }
 /* Roundcube shows/hides screens using .hidden (not .selected). */
 html.layout-phone body.task-mail.action-compose #layout-sidebar.sidebar-right:not(.hidden){
   display:flex!important;flex:1 1 auto!important;
   width:100%!important;height:100%!important
 }
 html.layout-phone body.task-mail.action-compose #layout-content{
   width:100%!important;flex:1 1 auto!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons .float-right a.extwin{
   font-size:0!important;line-height:1!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons .float-right a.extwin:before{
   font-size:21px!important;line-height:1.2!important
 }
 body.task-mail.action-compose #compose-headers .col-2{
   flex-basis:72px!important;max-width:72px!important
 }
 body.task-mail.action-compose #compose-headers .form-control{
   font-size:14px!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons .send{
   min-width:116px!important
 }
}

/* Dark mode keeps the palette consistently dark rather than bright strips. */
html.dark-mode body.task-mail.action-compose,
html.dark-mode body.task-mail.action-compose #layout,
html.dark-mode body.task-mail.action-compose #layout-content,
html.dark-mode body.task-mail.action-compose #compose-content,
html.dark-mode body.task-mail.action-compose #compose-content>form,
html.dark-mode body.task-mail.action-compose #composebodycontainer,
html.dark-mode body.task-mail.action-compose #compose-content>.formbuttons{
 background:#203a3d!important
}
html.dark-mode body.task-mail.action-compose #compose-content>.formbuttons{
 border-top-color:#385b51!important
}
html.dark-mode body.task-mail.action-compose #compose-content>.formbuttons a.extwin{
 color:#96e1c2!important
}

/* Respect native Roundcube layout router on phones/tablets.
   Specificity must beat previous full-skin display:flex!important rules. */
@media(max-width:768px){
 html body:not(.task-login):not(.task-error) #layout > #layout-menu.hidden,
 html body:not(.task-login):not(.task-error) #layout > #layout-list.hidden,
 html body:not(.task-login):not(.task-error) #layout > #layout-sidebar.hidden,
 html body:not(.task-login):not(.task-error) #layout > #layout-content.hidden,
 html body.task-mail.action-compose #layout > #layout-content.hidden,
 html body.task-mail.action-compose #layout > #layout-sidebar.sidebar-right.hidden{
  display:none!important
 }
 html body.task-mail.action-compose #layout > #layout-content:not(.hidden){
  display:flex!important;flex:1 1 auto!important
 }
 html body.task-mail.action-compose #layout > #layout-sidebar.sidebar-right:not(.hidden){
  display:flex!important;flex:1 1 auto!important
 }
}