/* A focused composition surface with native Roundcube fields, upload and editor controls. */
html body.task-mail.action-compose #layout-content {background:var(--wm-soft)}
html body.action-compose #layout-content > .header {justify-content:space-between;align-items:center;padding:0 20px;gap:16px;overflow:visible}
html body.action-compose #layout-content > .header .wm-compose-title {display:block;flex:0 0 auto;margin:0;text-align:left;font-size:1.15rem;font-weight:600;letter-spacing:-.025em}
html body.action-compose #layout-content > .header #messagetoolbar {margin-left:auto;white-space:nowrap}
html body.action-compose #layout-content .header .menu.toolbar a {min-width:38px;padding:.45rem .5rem;font-size:.95rem}
html body.action-compose #compose-content {display:flex;flex-direction:column;padding:24px;overflow:auto;min-height:0;gap:0}
html body.action-compose #compose-content > form {display:flex;flex:1;flex-direction:column;overflow:visible;min-height:380px;max-width:1050px;width:100%;margin:0 auto;background:var(--wm-panel);border:1px solid var(--wm-line);border-radius:16px 16px 0 0;box-shadow:0 8px 26px rgba(20,35,60,.04);padding:0}
html body.action-compose #compose-headers {padding:20px 24px 12px;border-bottom:1px solid var(--wm-line);margin:0}
html body.action-compose .compose-headers > .form-group {margin:0 0 12px;align-items:center}
html body.action-compose .compose-headers > .form-group:last-child {margin-bottom:0}
html body.action-compose .compose-headers .col-form-label {flex:0 0 76px;max-width:76px;color:var(--wm-muted);font-size:.82rem;font-weight:500;padding:0 12px 0 0}
html body.action-compose .compose-headers .col-10 {flex:1;max-width:none;min-width:0;padding:0}
html body.action-compose .compose-headers .row {margin-left:0;margin-right:0}
html body.action-compose .compose-headers .form-control,
html body.action-compose .compose-headers .recipient-input {min-height:42px;height:auto;border:1px solid var(--wm-line);border-radius:9px;background:var(--wm-panel);color:var(--wm-ink);font-size:.9rem;box-shadow:none}
html body.action-compose #compose-subject {font-size:1rem;font-weight:500;letter-spacing:-.015em;padding:.55rem .8rem}
html body.action-compose .compose-headers .input-group-text {background:var(--wm-panel);border-color:var(--wm-line);min-width:38px;justify-content:center;color:var(--wm-muted)}
html body.action-compose .compose-headers .input-group-text:hover {color:var(--wm-link);background:var(--wm-hover)}
html body.action-compose .compose-headers .recipient-input .recipient {border-radius:6px;background:var(--wm-hover);color:var(--wm-ink);border-color:var(--wm-line);font-size:.85rem}
html body.action-compose #composebodycontainer {display:flex;flex-direction:column;flex:1;min-height:230px;margin:0;padding:12px 24px 20px}
.wm-editor-caption {font-size:.78rem;font-weight:500;color:var(--wm-muted);padding:0 0 10px}
html body.action-compose #composebodycontainer .html-editor {display:flex;flex-direction:column;flex:1;min-height:200px}
html body.action-compose #composebody {background:var(--wm-panel);color:var(--wm-ink);border:0;border-radius:0;resize:vertical;min-height:180px;padding:12px 0;line-height:1.8;font-size:1rem;box-shadow:none;flex:1}
html body.action-compose #composebody:focus {outline:none;box-shadow:none}
html body.action-compose .html-editor .editor-toolbar {border:0;border-bottom:1px solid var(--wm-line);background:var(--wm-soft);color:var(--wm-muted);border-radius:8px 8px 0 0}
html body.action-compose .tox.tox-tinymce {border:1px solid var(--wm-line);border-radius:10px;min-height:190px}
html body.action-compose #compose-content > .wm-compose-actions {display:flex;align-items:center;flex-wrap:wrap;gap:12px;width:100%;max-width:1050px;margin:0 auto;padding:16px 24px;background:var(--wm-panel);border:1px solid var(--wm-line);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 8px 26px rgba(20,35,60,.04)}
html body.action-compose .wm-compose-actions .send {min-height:43px;border-radius:9px;font-size:.9rem;font-weight:600;padding:10px 18px;letter-spacing:0}
html body.action-compose .wm-compose-actions .float-right {margin-left:auto;float:none!important}
html body.action-compose .wm-compose-actions .extwin {font-size:.75rem;padding:6px;white-space:normal;line-height:1.4;color:var(--wm-muted)}
html body.action-compose #composestatusbar.wm-compose-status {position:static;font-size:.75rem;line-height:1.4;white-space:normal;flex:1;color:var(--wm-muted);margin:0}
html body.action-compose #layout-sidebar.sidebar-right {min-width:260px;max-width:280px;flex:0 0 260px;background:var(--wm-panel)}
html body.action-compose #layout-sidebar > .scroller {padding:20px 16px}
html body.action-compose #compose-attachments {border:1px dashed var(--wm-input-line);border-radius:12px;min-height:156px;padding:18px 12px 14px;margin:0;background:var(--wm-soft)}
html body.action-compose #compose-attachments:after {display:none}
html body.action-compose #compose-attachments .upload-form {margin:0;text-align:center}
html body.action-compose #compose-attachments .upload-form .hint {font-size:.77rem;line-height:1.6;margin-bottom:14px;color:var(--wm-muted)}
html body.action-compose #compose-attachments .btn-secondary {font-size:.79rem;font-weight:500;white-space:normal;line-height:1.4;padding:9px 12px;background:var(--wm-panel);border-color:var(--wm-line);box-shadow:none}
html body.action-compose .wm-compose-details {margin-top:22px;border-top:1px solid var(--wm-line);padding-top:16px}
html body.action-compose .wm-compose-details > summary {font-size:.85rem;font-weight:600;color:var(--wm-ink);cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px}
html body.action-compose .wm-compose-details > summary:after {content:'+';font-size:1.3rem;font-weight:400;color:var(--wm-muted)}
html body.action-compose .wm-compose-details[open] > summary:after {content:'−'}
html body.action-compose .wm-compose-details > summary::-webkit-details-marker {display:none}
html body.action-compose #compose-options {padding:10px 0 0}
html body.action-compose #compose-options label {font-size:.78rem;line-height:1.55;color:var(--wm-muted)}
html body.action-compose #compose-options .form-control,
html body.action-compose #compose-options .custom-select {font-size:.78rem}
@media (max-width:1024px) {html body.action-compose #compose-content {padding:16px}html body.action-compose #layout-content > .header {padding:0 12px;gap:8px}html body.action-compose .header .wm-compose-title {font-size:1rem!important}html body.action-compose #compose-headers {padding:16px 18px 10px}html body.action-compose #composebodycontainer {padding:12px 18px 16px}html body.action-compose #compose-content > .wm-compose-actions {padding:14px 18px}}
@media (max-width:767px) {
 html body.action-compose #layout-sidebar.sidebar-right {max-width:none;min-width:0;flex:1}
 html body.action-compose #layout-content > .header {padding:0 .25rem;overflow:hidden;justify-content:center}
 html body.action-compose #layout-content > .header .wm-compose-title {display:none}
 html body.action-compose #compose-content {padding:12px;overflow:auto}
 html body.action-compose #compose-content > form {min-height:380px;border-radius:12px 12px 0 0}
 html body.action-compose #compose-headers {padding:16px 14px 10px}
 html body.action-compose .compose-headers .col-form-label {flex-basis:52px;max-width:52px;font-size:.76rem}
 html body.action-compose #composebodycontainer {padding:12px 14px 16px;min-height:220px}
 html body.action-compose #compose-content > .wm-compose-actions {padding:12px 14px;gap:8px;border-radius:0 0 12px 12px}
 html body.action-compose #composestatusbar.wm-compose-status {flex-basis:100%;order:3}
 html body.action-compose .wm-compose-actions .float-right {display:none}
}

.wm-editor-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.wm-editor-heading .wm-editor-caption {padding:0}
.wm-format-toggle {display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:500;color:var(--wm-muted);margin:0;cursor:pointer}
.wm-format-toggle input {accent-color:var(--wm-blue);width:16px;height:16px}
html body.action-compose #composebodycontainer .mce-i-html {display:none!important}
.wm-format-disabled {border:1px solid var(--wm-line);border-radius:9px 9px 0 0;background:var(--wm-soft);overflow:hidden;color:var(--wm-muted);pointer-events:none;user-select:none}
.wm-format-disabled[hidden] {display:none}
.wm-format-disabled :is(button,.tox-tbtn) {opacity:.45;cursor:default!important;pointer-events:none}
.wm-format-disabled .tox-toolbar-overlord {background:var(--wm-soft)}
.wm-format-disabled .tox-toolbar__primary {display:flex;flex-wrap:wrap;background:var(--wm-soft)}
.wm-format-disabled .tox-toolbar__group {display:flex;align-items:center;padding:0 5px;border-right:1px solid var(--wm-line)}
.wm-format-disabled button {border:0;background:transparent;color:var(--wm-muted);min-height:32px;padding:3px 8px;display:inline-flex;align-items:center;gap:5px}
.wm-format-disabled svg {width:24px;height:24px;fill:currentColor}
html body.action-compose .wm-format-plain #composebody {border:1px solid var(--wm-line);border-top:0;border-radius:0 0 9px 9px;padding:16px;resize:vertical}
html.dark-mode body.action-compose .tox .tox-toolbar,
html.dark-mode body.action-compose .tox .tox-toolbar__primary,
html.dark-mode body.action-compose .tox .tox-toolbar-overlord,
html.dark-mode body.action-compose .tox .tox-edit-area,
html.dark-mode body.action-compose .tox .tox-sidebar-wrap {background:var(--wm-panel);border-color:var(--wm-line)}
html.dark-mode body.action-compose .tox .tox-tbtn {color:var(--wm-ink)}
html.dark-mode body.action-compose .tox .tox-tbtn svg {fill:currentColor}
html.dark-mode body.action-compose .tox .tox-tbtn:hover,
html.dark-mode body.action-compose .tox .tox-tbtn--enabled {background:var(--wm-hover);color:var(--wm-ink)}
html body.action-compose .wm-upload-prompt {margin:0 0 12px;font-size:.85rem;font-weight:500;line-height:1.65;color:var(--wm-ink)}
@media(max-width:480px) {.wm-editor-heading {gap:6px}.wm-format-toggle {font-size:.7rem}.wm-format-disabled .tox-toolbar__group {padding:0 2px}}

@media(max-width:767px) {
 .wm-format-disabled .tox-toolbar__primary > .tox-toolbar__group:nth-child(3),
 .wm-format-disabled .tox-toolbar__primary > .tox-toolbar__group:nth-child(4) {display:none}
}

/* Avoid a white about:blank editor while TinyMCE loads its content stylesheet. */
html body.action-compose #composebody_ifr {visibility:hidden;background:var(--wm-panel)}
html body.action-compose #composebody_ifr[data-wm-theme-ready="true"] {visibility:visible}
@media(min-width:768px) {
 html body.action-compose #layout-content > .header,
 html body.action-compose #layout-sidebar > .header {height:68px;min-height:68px;flex:0 0 68px;line-height:normal;align-items:center}
 html body.action-compose #layout-content > .header {padding:8px 20px}
 html body.action-compose #layout-content > .header :is(#messagetoolbar,.menu.toolbar) {height:auto;line-height:normal;display:flex;align-items:center}
 html body.action-compose #layout-content > .header :is(#messagetoolbar,.menu.toolbar) ul,
 html body.action-compose #layout-content > .header :is(#messagetoolbar,.menu.toolbar) li {height:auto;line-height:normal;margin:0;padding:0}
 html body.action-compose #layout-content > .header :is(#messagetoolbar,.menu.toolbar) a {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:44px;min-height:44px;padding:3px 10px;line-height:1.2;box-sizing:border-box}
 html body.action-compose #layout-content > .header :is(#messagetoolbar,.menu.toolbar) a:before {height:20px!important;line-height:20px;font-size:1.2rem;flex:0 0 20px}
 html body.action-compose #layout-content > .header :is(#messagetoolbar,.menu.toolbar) span.inner {line-height:1.2;font-size:.78rem}
 html body.action-compose #layout-content > .header > a.button {height:44px;line-height:44px;align-self:center}
 html body.action-compose #layout-sidebar > .header .header-title {margin:0;line-height:1.4}
}
html body.action-compose #layout-content > .header > .wm-compose-minimize {height:32px;min-height:32px;line-height:1.2;padding:6px 10px;align-self:center;box-sizing:border-box;flex-shrink:0}
@media(max-width:767px) {
 html body.action-compose #layout-content > .header > a.button {height:44px;min-height:44px;line-height:44px;align-self:center}
 html body.action-compose #layout-content > .header > a.button:before {line-height:44px}
}