/*
 * Promtek Mail — compose workspace v9
 *
 * A desktop-only presentation layer for Roundcube 1.7.1's native composer.
 * Every functional control remains the original Roundcube control; the
 * companion script only repositions those controls and restores them below
 * the desktop breakpoint.
 */

html:not(.iframe) body.task-mail.action-compose {
  --promtek-compose-sidebar-width: clamp(252px, 18vw, 276px);
  --promtek-compose-toolbar-height: 58px;
  --promtek-compose-row-height: 44px;
  --promtek-compose-radius: 8px;
}

html:not(.iframe) body.task-mail.action-compose .promtek-recipient-shortcuts,
html:not(.iframe) body.task-mail.action-compose .promtek-editor-mode {
  display: none;
}

@media screen and (min-width: 769px) {
  /* Keep the work area broad and the options rail close to the mockup. */
  html:not(.iframe) body.task-mail.action-compose #layout-content {
    min-width: 0;
  }

  html:not(.iframe) body.task-mail.action-compose #layout-sidebar {
    flex: 0 0 var(--promtek-compose-sidebar-width) !important;
    width: var(--promtek-compose-sidebar-width) !important;
    min-width: var(--promtek-compose-sidebar-width) !important;
    max-width: var(--promtek-compose-sidebar-width) !important;
    border-left-color: var(--promtek-border) !important;
  }

  /* Compact command bar with panel-aware centering when room permits. */
  html:not(.iframe) body.task-mail.action-compose #layout-content > .header,
  html:not(.iframe) body.task-mail.action-compose #layout-sidebar > .header {
    box-sizing: border-box;
    height: var(--promtek-compose-toolbar-height) !important;
    min-height: var(--promtek-compose-toolbar-height) !important;
    max-height: var(--promtek-compose-toolbar-height) !important;
    color: var(--promtek-text) !important;
    background-color: var(--promtek-content) !important;
    border-bottom: 1px solid var(--promtek-border) !important;
  }

  html:not(.iframe) body.task-mail.action-compose #layout-content > .header {
    padding: 0 !important;
    container-name: promtek-compose-header;
    container-type: inline-size;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header > .task-menu-button,
  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header > .header-title {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose #messagetoolbar {
    display: flex !important;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start !important;
    gap: 2px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: var(--promtek-compose-toolbar-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: visible !important;
    white-space: nowrap;
  }

  html:not(.iframe) body.task-mail.action-compose #messagetoolbar > a,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a:not(.dropdown),
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > button.promtek-toolbar-send {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    color: var(--promtek-text) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 400;
    line-height: 32px !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > button.promtek-toolbar-send {
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > button.promtek-toolbar-send::before {
    content: "\f1d8";
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    margin: 0 !important;
    color: inherit !important;
    font-family: "Icons";
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > a::before,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a:not(.dropdown)::before {
    float: none !important;
    flex: 0 0 auto;
    width: 1em !important;
    height: auto !important;
    margin: 0 !important;
    color: inherit !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar .inner {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    line-height: inherit !important;
    text-overflow: clip !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    height: 34px !important;
    margin: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a.dropdown {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 22px !important;
    min-width: 22px !important;
    height: 34px !important;
    margin: 0 4px 0 -7px !important;
    padding: 0 !important;
    color: var(--promtek-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 6px 6px 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a.dropdown .inner {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .spacer {
    display: block !important;
    flex: 0 0 1px !important;
    width: 1px !important;
    height: 24px !important;
    margin: 0 7px !important;
    background-color: var(--promtek-border) !important;
  }

  /* The attachment action remains prominent in the always-visible right rail. */
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > a.attach {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > a:hover,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton:hover > a,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > button.promtek-toolbar-send:hover,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > a:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > button.promtek-toolbar-send:focus-visible {
    color: var(--promtek-text) !important;
    background-color: var(--promtek-selection-hover) !important;
    border-color: transparent !important;
    outline: 2px solid var(--promtek-accent) !important;
    outline-offset: -2px;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar .disabled,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar button:disabled {
    color: var(--promtek-faint) !important;
    background-color: transparent !important;
    opacity: 0.62;
    cursor: default;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-extwin {
    margin-left: auto !important;
    color: var(--promtek-muted) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-extwin::before {
    color: inherit !important;
  }

  /* Remove the old bottom command strip after its controls are moved. */
  html:not(.iframe) body.task-mail.action-compose
    #compose-content > .formbuttons.promtek-formbuttons-empty {
    display: none !important;
  }

  /* A flat, compact header stack instead of three large boxed inputs. */
  html:not(.iframe) body.task-mail.action-compose #compose-content {
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-content > form.formcontent.scroller {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html:not(.iframe) body.task-mail.action-compose #compose-objects {
    flex: 0 0 auto;
    margin: 8px 22px 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose #compose-objects:empty {
    display: none;
  }

  html:not(.iframe) body.task-mail.action-compose #compose-headers {
    flex: 0 0 auto;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 22px 0;
    background-color: var(--promtek-content);
    border-bottom: 1px solid var(--promtek-border);
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group {
    display: flex;
    align-items: stretch;
    min-height: var(--promtek-compose-row-height);
    margin: 0 !important;
    border-bottom: 1px solid var(--promtek-border);
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group:last-child,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers #compose_subject {
    border-bottom: 0;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group > label.col-form-label {
    display: flex;
    flex: 0 0 72px;
    align-items: center;
    box-sizing: border-box;
    width: 72px;
    max-width: 72px;
    min-height: var(--promtek-compose-row-height);
    margin: 0;
    padding: 0 12px 0 0 !important;
    color: var(--promtek-muted);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group > .col-10 {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: var(--promtek-compose-row-height);
    padding: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: 36px;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .form-control,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .custom-select,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input {
    box-sizing: border-box;
    min-height: 36px !important;
    margin: 0 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 0.9rem;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .form-control,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .custom-select {
    flex: 1 1 auto;
    width: 100%;
    height: 36px !important;
    padding-right: 24px !important;
    padding-left: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    min-width: 80px;
    padding-right: 4px !important;
    padding-left: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input.focus,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .form-control:focus,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .custom-select:focus {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .form-group:focus-within {
    border-bottom-color: var(--promtek-accent);
    box-shadow: inset 0 -1px 0 var(--promtek-accent);
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input li.recipient {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    max-width: min(100%, 360px);
    min-height: 28px;
    margin: 2px 5px 2px 0 !important;
    padding: 0 7px 0 10px !important;
    color: var(--promtek-text) !important;
    background-color: var(--promtek-selection) !important;
    border: 1px solid var(--promtek-border) !important;
    border-radius: 15px !important;
    line-height: 26px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input li.input {
    flex: 1 1 150px;
    min-width: 120px;
    margin: 0 !important;
    padding: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input input {
    width: 100% !important;
    height: 30px !important;
    min-width: 80px;
    padding: 0 !important;
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 0.88rem;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input input::placeholder {
    color: var(--promtek-faint);
    opacity: 1;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-append {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-text {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--promtek-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-text:hover,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-text:focus-visible {
    color: var(--promtek-text) !important;
    background-color: var(--promtek-selection-hover) !important;
    outline: 2px solid var(--promtek-accent) !important;
    outline-offset: -2px;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers #compose-subject {
    font-size: 0.96rem;
    font-weight: 600;
  }

  html:not(.iframe) body.task-mail.action-compose .promtek-recipient-shortcuts {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    margin: 0 5px 0 8px;
  }

  html:not(.iframe) body.task-mail.action-compose
    .promtek-recipient-shortcut {
    height: 28px;
    margin: 0;
    padding: 0 5px;
    color: var(--promtek-link);
    background: transparent;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 28px;
    cursor: pointer;
  }

  html:not(.iframe) body.task-mail.action-compose
    .promtek-recipient-shortcut:hover,
  html:not(.iframe) body.task-mail.action-compose
    .promtek-recipient-shortcut:focus-visible {
    color: var(--promtek-link-hover);
    background-color: var(--promtek-selection-hover);
    outline: 2px solid var(--promtek-accent);
    outline-offset: -2px;
  }

  /* Editor canvas and its genuine TinyMCE/plain-text tools. */
  html:not(.iframe) body.task-mail.action-compose #composebodycontainer {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 260px;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: var(--promtek-text) !important;
    background-color: var(--promtek-content) !important;
    border: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer > .editor-toolbar {
    position: static !important;
    order: -1;
    flex: 0 0 42px;
    box-sizing: border-box;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 0 184px 0 16px !important;
    color: var(--promtek-text) !important;
    background-color: var(--promtek-control) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--promtek-border) !important;
    border-radius: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose.promtek-compose-enhanced
    #composebodycontainer > .editor-toolbar .mce-i-html {
    visibility: hidden !important;
    pointer-events: none;
  }

  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer > #composebody {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    margin: 0 !important;
    padding: 22px 24px !important;
    overflow: auto !important;
    resize: none !important;
    color: var(--promtek-text) !important;
    background-color: var(--promtek-content) !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 0.96rem;
    line-height: 1.55;
  }

  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer > .tox.tox-tinymce {
    flex: 1 1 auto;
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    margin: 0 !important;
    overflow: hidden;
    background-color: var(--promtek-content) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .tox-toolbar-overlord,
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .tox-toolbar,
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .tox-toolbar__primary,
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .tox-toolbar__overflow {
    min-height: 42px;
    color: var(--promtek-text) !important;
    background-color: var(--promtek-control) !important;
    border-color: var(--promtek-border) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .tox-toolbar__primary {
    box-sizing: border-box;
    padding-right: 184px !important;
    border-bottom: 1px solid var(--promtek-border) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .promtek-native-editor-toggle,
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .promtek-native-editor-toggle-group {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose .promtek-editor-mode {
    position: absolute;
    z-index: 12;
    top: 6px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 30px;
    padding: 2px;
    background-color: var(--promtek-content);
    border: 1px solid var(--promtek-border);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  html:not(.iframe) body.task-mail.action-compose
    .promtek-editor-mode button {
    height: 24px;
    margin: 0;
    padding: 0 9px;
    color: var(--promtek-muted);
    background: transparent;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.72rem;
    line-height: 24px;
    cursor: pointer;
  }

  html:not(.iframe) body.task-mail.action-compose
    .promtek-editor-mode button.is-active {
    color: var(--promtek-text);
    background-color: var(--promtek-selection);
  }

  html:not(.iframe) body.task-mail.action-compose
    .promtek-editor-mode button:hover,
  html:not(.iframe) body.task-mail.action-compose
    .promtek-editor-mode button:focus-visible {
    color: var(--promtek-text);
    background-color: var(--promtek-selection-hover);
    outline: 2px solid var(--promtek-accent);
    outline-offset: -2px;
  }

  /* Right rail: compact upload target, attachment cards, compact options. */
  html:not(.iframe) body.task-mail.action-compose #layout-sidebar > .header {
    justify-content: flex-start !important;
    padding: 0 16px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-sidebar > .header .header-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--promtek-text) !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    text-align: left;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-sidebar > .scroller {
    box-sizing: border-box;
    padding: 0 !important;
    background-color: var(--promtek-content);
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments.file-upload {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 15px 14px 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments.file-upload::before,
  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments.file-upload::after {
    display: none !important;
    content: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .upload-form {
    display: flex;
    flex-direction: column-reverse;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--promtek-faint);
    font-size: 0.7rem;
    line-height: 1.35;
    text-align: center;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .upload-form > :not(button) {
    margin: 0 !important;
    color: var(--promtek-faint) !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .btn-secondary.attach {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 12px !important;
    color: var(--promtek-link) !important;
    background: transparent !important;
    border: 1px dashed var(--promtek-border) !important;
    border-radius: var(--promtek-compose-radius) !important;
    box-shadow: none !important;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 38px;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .btn-secondary.attach::before {
    margin: 0 !important;
    color: inherit !important;
    font-size: 0.86rem !important;
    line-height: 1 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .btn-secondary.attach:hover,
  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .btn-secondary.attach:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments.file-upload.droptarget.active,
  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments.file-upload.droptarget.hover {
    color: var(--promtek-link-hover) !important;
    background-color: var(--promtek-selection-hover) !important;
    border-color: var(--promtek-accent) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px var(--promtek-focus-ring) !important;
  }

  html:not(.iframe) body.task-mail.action-compose #attachment-list {
    display: grid;
    gap: 7px;
    box-sizing: border-box;
    width: 100%;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose #attachment-list:empty {
    display: none;
  }

  html:not(.iframe) body.task-mail.action-compose #attachment-list > li {
    display: flex !important;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    margin: 0 !important;
    padding: 5px 7px !important;
    overflow: hidden;
    color: var(--promtek-text);
    background-color: var(--promtek-control);
    border: 1px solid var(--promtek-border);
    border-radius: var(--promtek-compose-radius);
    line-height: 1.25 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #attachment-list > li::before {
    flex: 0 0 22px;
    width: 22px;
    height: auto !important;
    margin: 0 4px 0 0 !important;
    color: var(--promtek-link);
    line-height: 1 !important;
    text-align: center;
  }

  html:not(.iframe) body.task-mail.action-compose
    #attachment-list > li a.filename {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    padding: 0 4px !important;
    line-height: 1.25 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #attachment-list .attachment-name,
  html:not(.iframe) body.task-mail.action-compose
    #attachment-list .attachment-size {
    color: inherit !important;
    font-size: 0.76rem;
  }

  html:not(.iframe) body.task-mail.action-compose
    #attachment-list .attachment-size {
    color: var(--promtek-faint) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #attachment-list a.delete,
  html:not(.iframe) body.task-mail.action-compose
    #attachment-list a.cancelupload,
  html:not(.iframe) body.task-mail.action-compose
    #attachment-list a.dropdown {
    flex: 0 0 26px;
    width: 26px;
    height: 30px !important;
    color: var(--promtek-muted);
    line-height: 30px !important;
    text-align: center;
  }

  html:not(.iframe) body.task-mail.action-compose #compose-options {
    box-sizing: border-box;
    margin: 14px 0 0 !important;
    padding: 14px !important;
    background: transparent !important;
    border-top: 1px solid var(--promtek-border);
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options .promtek-options-kicker {
    margin: 0 0 11px;
    color: var(--promtek-faint);
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options > .form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    min-height: 34px;
    margin: 0 0 5px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options > .form-group > label.col-form-label {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 5px 10px 5px 0 !important;
    color: var(--promtek-text);
    font-size: 0.77rem;
    line-height: 1.35;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options > .form-group > .col-6 {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    max-width: 132px;
    margin: 0;
    padding: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-select {
    width: auto !important;
    min-width: 104px;
    max-width: 132px;
    height: 32px !important;
    margin: 0;
    padding: 0 24px 0 8px !important;
    color: var(--promtek-text) !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    font-size: 0.76rem;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-select:hover,
  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-select:focus-visible {
    background-color: var(--promtek-selection-hover) !important;
    border-color: var(--promtek-border) !important;
    outline: 2px solid var(--promtek-accent) !important;
    outline-offset: -2px;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-control,
  html:not(.iframe) body.task-mail.action-compose
    #compose-options .form-check {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-control-label {
    margin: 0 !important;
  }
}

/* On phone/tablet layouts the script restores Roundcube's original DOM. */
@media screen and (max-width: 768px) {
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .promtek-native-editor-toggle,
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer .promtek-native-editor-toggle-group {
    display: initial !important;
  }
}

/*
 * v2 live-DOM corrections
 *
 * Roundcube's Elastic UI creates toolbar clones in a generated footer and
 * Bootstrap keeps several compose rows wrap-enabled. These final rules target
 * the rendered DOM observed on the installed Promtek skin.
 */
html:not(.iframe) body.task-mail.action-compose {
  --promtek-compose-sidebar-width: 252px;
}

@media screen and (min-width: 769px) {
  /* Make the command bar genuinely horizontal and left-aligned. */
  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header #messagetoolbar {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > a,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a:not(.dropdown),
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-send,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-extwin {
    position: static !important;
    flex-direction: row !important;
    align-items: center !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > a::before,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .dropbutton > a:not(.dropdown)::before,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-send::before,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-extwin::before {
    position: static !important;
    inset: auto !important;
    display: inline-block !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-send {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 2px 0 0 !important;
    padding: 0 10px !important;
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 32px !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-send:hover,
  html:not(.iframe) body.task-mail.action-compose
    #messagetoolbar > .promtek-toolbar-send:focus-visible {
    color: var(--promtek-text) !important;
    background: var(--promtek-selection-hover) !important;
    border-color: transparent !important;
    outline: 2px solid var(--promtek-accent) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
  }

  /* The footer only contains Roundcube's duplicate compose actions. */
  html:not(.iframe) body.task-mail.action-compose.promtek-compose-toolbar-ready
    #layout-content > .content-frame-navigation {
    display: none !important;
  }

  /* The top Send clone is live; suppress only its native duplicate below. */
  html:not(.iframe) body.task-mail.action-compose.promtek-compose-toolbar-ready
    #compose-content > .formbuttons > button.send {
    display: none !important;
  }

  /* Keep sender, recipients, shortcuts, and row actions on one line. */
  html:not(.iframe) body.task-mail.action-compose #compose-headers {
    padding-top: 4px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group > .col-10,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group {
    flex-wrap: nowrap !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group {
    align-items: center !important;
    min-height: 44px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group > label.col-form-label,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .compose-headers > .form-group > .col-10 {
    min-height: 44px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group {
    align-content: center !important;
    min-width: 0 !important;
    height: auto !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .form-control,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .custom-select,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input {
    align-content: center !important;
    overflow: visible !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .promtek-recipient-shortcuts,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-append {
    flex: 0 0 auto !important;
  }

  /* Remove the inherited orange box/underline around the whole To row. */
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .form-group:focus-within,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .col-10:focus-within,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group:focus-within,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input.focus,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input:focus-within {
    background: transparent !important;
    border-color: var(--promtek-border) !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input.focus,
  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .recipient-input:focus-within {
    border: 0 !important;
  }

  /* Match the mockup's quiet editor canvas. */
  html:not(.iframe) body.task-mail.action-compose
    #composebodycontainer > #composebody {
    font-family: inherit !important;
  }

  /* Vertically center the sidebar heading and prevent option-row wrapping. */
  html:not(.iframe) body.task-mail.action-compose
    #layout-sidebar > .header {
    display: flex !important;
    align-items: center !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-sidebar > .header .header-title {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options > .form-group {
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options > .form-group > label.col-form-label {
    min-width: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options > .form-group > .col-6 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 34px !important;
    max-width: 116px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-select {
    min-width: 96px !important;
    max-width: 116px !important;
  }

  /*
   * Elastic removes #messagetoolbar and renders its children inside
   * ul#toolbar-menu > li. Style that final structure directly.
   */
  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header > #toolbar-menu {
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--promtek-compose-toolbar-height) !important;
    margin: 0 !important;
    padding: 0 14px !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    list-style: none !important;
    white-space: nowrap !important;
    column-gap: 14px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header > .toolbar-menu-button {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li {
    position: static !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    list-style: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > a,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > button,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    position: static !important;
    display: inline-flex;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > a::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > button::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a:not(.dropdown)::before {
    position: static !important;
    inset: auto !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 1.2rem !important;
    line-height: 1.25rem !important;
    text-align: center !important;
    vertical-align: middle !important;
    opacity: 0.76 !important;
    transform: none !important;
  }

  /* Use Font Awesome's lighter outline cuts where that family has them. */
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.send::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu button.send::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.save::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.responses::before {
    font-weight: 400 !important;
  }

  /* Reuse the folder palette so actions feel native to the Promtek skin. */
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.send::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu button.send::before {
    color: var(--promtek-folder-sent) !important;
    font-size: 1.2rem !important;
    opacity: 0.96 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.save::before {
    color: var(--promtek-folder-drafts) !important;
    font-size: 1.2rem !important;
    opacity: 0.96 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.signature::before {
    color: var(--promtek-folder-archive) !important;
    font-size: 1.2rem !important;
    opacity: 0.96 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.responses::before {
    color: var(--promtek-folder-inbox) !important;
    font-size: 1.2rem !important;
    opacity: 0.96 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu a.spellcheck::before {
    color: var(--promtek-folder-junk) !important;
    font-size: 1.2rem !important;
    opacity: 0.96 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu .inner {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    line-height: 1.2 !important;
    text-overflow: clip !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton {
    position: static !important;
    display: inline-flex;
    flex: 0 0 auto !important;
    align-items: center !important;
    column-gap: 2px !important;
    box-sizing: border-box !important;
    height: 34px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    outline: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    height: 32px !important;
    padding-right: 5px !important;
    border: 0 !important;
    border-radius: 5px 0 0 5px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a.dropdown {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 32px !important;
    margin: 0 4px 0 0 !important;
    padding: 0 !important;
    color: var(--promtek-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 6px 6px 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a.dropdown::before {
    position: static !important;
    inset: auto !important;
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.55rem !important;
    line-height: 1 !important;
    opacity: 0.65 !important;
    transform: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a.dropdown .inner {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.spacer {
    display: block !important;
    flex: 0 0 1px !important;
    width: 1px !important;
    min-width: 1px !important;
    height: 24px !important;
    margin: 0 -7px !important;
    background: var(--promtek-border) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-options-item,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-attach-item {
    display: none !important;
  }

  /* Optically balance the Signature-to-Responses gap with its neighbors. */
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-responses-item {
    margin-left: -14px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item {
    margin-left: auto !important;
    margin-right: 4px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-send {
    color: var(--promtek-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: 500 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-extwin {
    color: var(--promtek-muted) !important;
    background: transparent !important;
    border-color: var(--promtek-border) !important;
    overflow: hidden !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item > .promtek-toolbar-extwin:hover {
    color: var(--promtek-text) !important;
    background: var(--promtek-selection-hover) !important;
    border-color: var(--promtek-border) !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item > .promtek-toolbar-extwin:hover .inner {
    color: var(--promtek-text) !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item > .promtek-toolbar-extwin:focus-visible {
    color: var(--promtek-text) !important;
    background: var(--promtek-selection-hover) !important;
    border-color: var(--promtek-muted) !important;
    outline: 1px solid var(--promtek-muted) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > a:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > button:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton:focus-within {
    color: var(--promtek-text) !important;
    background: var(--promtek-selection-hover) !important;
    border-color: var(--promtek-muted) !important;
    outline: 1px solid var(--promtek-muted) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a:focus-visible {
    background: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  /* Bounded mouse-hover accents keep every label inside one quiet surface. */
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > a:hover:not(:focus-visible):not(.disabled),
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > button:hover:not(:focus-visible):not(.disabled),
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton:hover {
    color: var(--promtek-text) !important;
    overflow: hidden !important;
    background: var(--promtek-selection-hover) !important;
    border-color: var(--promtek-border) !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton:hover > a:not(:focus-visible),
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > a:hover:not(:focus-visible):not(.disabled) .inner,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > button:hover:not(:focus-visible):not(.disabled) .inner,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton:hover > a:not(:focus-visible) .inner {
    color: var(--promtek-text) !important;
    background: transparent !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-text:hover,
  html:not(.iframe) body.task-mail.action-compose
    .promtek-recipient-shortcut:hover,
  html:not(.iframe) body.task-mail.action-compose
    .promtek-editor-mode button:hover,
  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-select:hover {
    outline: 0 !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-headers .input-group-text:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    .promtek-recipient-shortcut:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    .promtek-editor-mode button:focus-visible,
  html:not(.iframe) body.task-mail.action-compose
    #compose-options .custom-select:focus-visible {
    outline: 1px solid var(--promtek-muted) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .btn-secondary.attach:hover {
    border-color: var(--promtek-border) !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #compose-attachments .btn-secondary.attach:focus-visible {
    border-color: var(--promtek-muted) !important;
    outline: 1px solid var(--promtek-muted) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu .disabled {
    color: var(--promtek-faint) !important;
    background: transparent !important;
    opacity: 0.62 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu .disabled::before,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu .disabled > a::before {
    color: var(--promtek-faint) !important;
    opacity: 0.58 !important;
  }
}

/*
 * Center against the compose panel itself, not the browser viewport. This
 * keeps browser zoom and display scaling from disabling the centered layout.
 */
@container promtek-compose-header (min-width: 960px) {
  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header > #toolbar-menu {
    position: relative !important;
    justify-content: center !important;
    padding-right: 200px !important;
    padding-left: 200px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item {
    position: absolute !important;
    top: 50% !important;
    right: 4px !important;
    bottom: auto !important;
    left: auto !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-extwin {
    width: max-content !important;
    max-width: none !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-extwin .inner {
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    color: inherit !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
  }
}

/*
 * User-supplied compose-toolbar row refinement (v9).
 * Kept last so it decisively replaces the older v8 geometry.
 */
@media screen and (min-width: 769px) {
  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header {
    position: relative !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #layout-content > .header > #toolbar-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    column-gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 56px !important;
    overflow: visible !important;
    list-style: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-responses-item,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.spacer {
    margin: 0 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > a,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > button,
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .dropbutton > a:not(.dropdown) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 13.5px !important;
    line-height: 34px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu .inner {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* External window: out of flow, icon only, quiet. */
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    bottom: auto !important;
    left: auto !important;
    width: 34px !important;
    max-width: 34px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-extwin {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    max-width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    overflow: hidden !important;
    color: var(--promtek-muted) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-extwin .inner {
    display: none !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li.promtek-toolbar-extwin-item
      > .promtek-toolbar-extwin:hover:not(:focus-visible):not(.disabled) {
    color: var(--promtek-text) !important;
    background: var(--promtek-selection-hover) !important;
    border: 0 !important;
  }

  /* Send: soft amber tint, primary without shouting. */
  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-send {
    padding: 0 12px !important;
    color: #7a4a0a !important;
    background: #fbf1e4 !important;
    border: 1px solid #edd9b8 !important;
    font-weight: 500 !important;
  }

  html:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-send:hover:not(:focus-visible):not(.disabled) {
    color: #7a4a0a !important;
    background: #f6e6ce !important;
    border-color: #e3cba2 !important;
  }

  html.dark-mode:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-send {
    color: #f0c68a !important;
    background: #2a2015 !important;
    border-color: #4a3820 !important;
  }

  html.dark-mode:not(.iframe) body.task-mail.action-compose
    #toolbar-menu > li > .promtek-toolbar-send:hover:not(:focus-visible):not(.disabled) {
    color: #f7d9ae !important;
    background: #342718 !important;
    border-color: #5c4728 !important;
  }
}