/* =========================================================
   epikmail Gmail-style compose toolbar
   Phase 2
   ========================================================= */

#V-PopupsCompose[data-epika-gmail-toolbar="1"] .modal-body {
  min-height: 0;
}

#V-PopupsCompose[data-epika-gmail-toolbar="1"] .tabs {
  flex: 1 1 auto;
  min-height: 0;

  /*
   * Native tabs still provide the editor panel,
   * but their visual tab selectors are removed.
   */
  display: block;
  overflow: hidden;
}

/* ---------------------------------------------------------
   Native header actions
   --------------------------------------------------------- */

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  header .epika-native-send,

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  header .button-save,

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  header .button-delete,

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  header .saved-text {
  display: none !important;
}

/*
 * Native upload element stays alive for Jua.
 */
#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  #composeUploadButton {
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: 0 !important;

  opacity: 0 !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   Remove native Text / Attachments visual tabs
   --------------------------------------------------------- */

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  .tabs > input[type="radio"],

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  .tabs > label {
  display: none !important;
}

/*
 * Body editor becomes the permanent visible panel.
 */
#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  .tabs > .tab-content:not(.attachmentAreaParent):not(#mailvelope-editor) {
  display: flex !important;
  visibility: visible !important;
  height: 100% !important;
  min-height: 200px;
  overflow: hidden;
}

#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  .textAreaParent {
  height: 100%;
  min-height: 200px;
  flex: 1 1 auto;
}

/*
 * Native attachment tab panel is no longer presented.
 * Its Knockout-bound attachmentList has been moved out by JS.
 */
#V-PopupsCompose[data-epika-gmail-toolbar="1"]
  .attachmentAreaParent {
  display: none !important;
}

/* ---------------------------------------------------------
   Formatting panel
   --------------------------------------------------------- */

#V-PopupsCompose .epika-compose-format-panel {
  display: none;
  flex: 0 0 auto;

  box-sizing: border-box;

  padding: 5px 12px;

  background: var(--dialog-bg-clr, #fff);

  border-top:
    1px solid rgba(128, 128, 128, 0.18);
}

#V-PopupsCompose.epika-formatting-open
  .epika-compose-format-panel {
  display: block;
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;

  gap: 2px;

  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;
}

/*
 * Hide Squire groups by default.
 * A group becomes visible when it contains one of our retained buttons.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar > .btn-group {
  display: none !important;
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar > .btn-group:has(.epika-format-keep) {
  display: inline-flex !important;
  align-items: center;
}

/*
 * Inside retained groups show only selected native actions.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button {
  display: none !important;
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep {
  display: inline-block !important;
}

/*
 * Inputs/selects belonging to non-selected native groups
 * should not leak into the compact toolbar.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar > input {
  display: none !important;
}

/* ---------------------------------------------------------
   Gmail-style attachment strip
   --------------------------------------------------------- */

#V-PopupsCompose .epika-compose-attachment-strip {
  flex: 0 0 auto;

  box-sizing: border-box;

  padding: 0 12px;

  background: var(--dialog-bg-clr, #fff);
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentList {
  list-style: none;

  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 6px 12px;

  margin: 0;
  padding: 0;
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentItem {
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;

  width: auto;
  max-width: 100%;

  margin: 5px 0;
  padding: 5px 8px;

  border: 1px solid rgba(128, 128, 128, 0.28);
  border-radius: 3px;

  background: rgba(128, 128, 128, 0.07);
}

/*
 * Gmail row does not need SnappyMail's large file icon.
 * Upload progress remains available through the model,
 * while filename/size/cancel stay native.
 */
#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentIcon {
  display: none !important;
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentNameParent {
  display: flex;
  align-items: center;

  min-width: 0;

  font-size: 13px;
  line-height: 20px;
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentName {
  display: inline-block;

  max-width: 300px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentSize {
  display: inline-block;

  margin-left: 5px;

  color: rgba(80, 80, 80, 0.72);
  white-space: nowrap;
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentSize::before {
  content: "(";
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentSize::after {
  content: ")";
}

#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentNameParent > .close {
  order: 3;

  position: static;

  float: none;

  margin: 0 0 0 7px !important;

  line-height: 18px;
  opacity: 0.65;
}

/* ---------------------------------------------------------
   Gmail-style bottom toolbar
   --------------------------------------------------------- */

#V-PopupsCompose .epika-compose-bottom-bar {
  box-sizing: border-box;

  flex: 0 0 auto;

  min-height: 58px;
  padding: 9px 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  background: var(--dialog-bg-clr, #fff);

  border-top:
    1px solid rgba(128, 128, 128, 0.18);

  position: relative;
  z-index: 20;
}

#V-PopupsCompose .epika-compose-bottom-left,
#V-PopupsCompose .epika-compose-bottom-right {
  display: flex;
  align-items: center;
  gap: 3px;
}

#V-PopupsCompose .epika-compose-send {
  appearance: none;

  border: 0;
  border-radius: 18px;

  min-width: 88px;
  height: 36px;

  padding: 0 22px;

  background: var(--main-color, #0b57d0);
  color: #fff;

  font: inherit;
  font-weight: 600;

  cursor: pointer;
}

#V-PopupsCompose .epika-compose-send:hover {
  filter: brightness(0.94);
}

#V-PopupsCompose .epika-compose-send:disabled {
  cursor: default;
  opacity: 0.55;
}

#V-PopupsCompose .epika-compose-tool {
  appearance: none;

  border: 0;
  background: transparent;

  min-width: 36px;
  height: 36px;

  padding: 0 8px;

  border-radius: 4px;

  color: inherit;

  font: inherit;
  font-size: 18px;
  line-height: 36px;

  cursor: pointer;
}

#V-PopupsCompose
  .epika-compose-tool:hover:not(:disabled),

#V-PopupsCompose
  .epika-compose-tool.is-active {
  background: rgba(128, 128, 128, 0.15);
}

#V-PopupsCompose .epika-compose-tool:disabled {
  cursor: default;
  opacity: 0.35;
}

#V-PopupsCompose .epika-format-symbol {
  display: inline-block;

  font-family: Arial, sans-serif;
  font-weight: 600;

  text-decoration: underline;
  text-underline-offset: 3px;
}

#V-PopupsCompose .epika-signature-symbol {
  font-size: 19px;
}

#V-PopupsCompose .epika-compose-delete {
  font-size: 17px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 600px) {
  #V-PopupsCompose .epika-compose-bottom-bar {
    padding-left: 8px;
    padding-right: 8px;
    gap: 5px;
  }

  #V-PopupsCompose .epika-compose-send {
    min-width: 72px;

    padding-left: 15px;
    padding-right: 15px;
  }

  #V-PopupsCompose .epika-compose-tool {
    min-width: 32px;

    padding-left: 6px;
    padding-right: 6px;
  }

  #V-PopupsCompose
    .epika-compose-attachment-strip
    .attachmentName {
    max-width: 180px;
  }
}

/* =========================================================
   epikmail Gmail compose polish
   ========================================================= */

/* Native font family + size group is explicitly retained. */
#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font.epika-format-font-group {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font select {
  display: inline-block !important;

  box-sizing: border-box;

  height: 30px;
  min-width: 86px;

  margin: 0;
  padding: 3px 24px 3px 8px;

  border: 0;
  border-radius: 4px;

  background-color: transparent;
  box-shadow: none;

  font-size: 13px;
  line-height: 24px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font select[data-action="fontSize"] {
  min-width: 68px;
}

/*
 * Do not expose mode, direction, targets or source controls
 * in the compact formatting row.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-mode,

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-dir,

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-targets,

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-changes {
  display: none !important;
}

/*
 * Compact Gmail-like native formatting buttons.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep {
  box-sizing: border-box;

  min-width: 30px;
  width: 30px;
  height: 30px;

  padding: 0 5px;

  border: 0;
  border-radius: 4px;

  background: transparent;
  box-shadow: none;

  font-size: 14px;
  line-height: 30px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep:hover {
  background: rgba(128, 128, 128, 0.14);
}

/* SVG icons: consistent on macOS / Windows / mobile. */
#V-PopupsCompose
  .epika-compose-tool svg {
  display: block;

  width: 20px;
  height: 20px;

  margin: auto;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

#V-PopupsCompose
  .epika-compose-delete svg {
  width: 19px;
  height: 19px;
}

/*
 * Keep native Squire color picker within the compose stacking context.
 */
#V-PopupsCompose[data-epika-gmail-toolbar="1"] {
  isolation: isolate;
}

#V-PopupsCompose
  .epika-compose-format-panel {
  position: relative;
  z-index: 40;
}

/* Slightly lighter attachment chips. */
#V-PopupsCompose
  .epika-compose-attachment-strip
  .attachmentItem {
  min-height: 34px;

  padding: 5px 9px;

  background: rgba(128, 128, 128, 0.045);

  border-color: rgba(128, 128, 128, 0.22);
  border-radius: 2px;
}

/* =========================================================
   epikmail Gmail-like formatting bar - final polish
   ========================================================= */

/*
 * One continuous Gmail-like capsule.
 */
#V-PopupsCompose
  .epika-compose-format-panel {
  padding: 7px 12px 6px;

  border-top: 0;

  background: var(--dialog-bg-clr, #fff);
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar {
  box-sizing: border-box;

  width: fit-content;
  max-width: 100%;

  min-height: 40px;

  padding: 4px 7px;

  display: flex !important;
  align-items: center;
  flex-wrap: wrap;

  gap: 1px;

  border: 0 !important;
  border-radius: 20px;

  background: rgba(232, 238, 247, 0.72) !important;

  box-shadow: none !important;
}

/*
 * Native groups lose their individual boxes.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar > .btn-group {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar > .btn-group:has(.epika-format-keep),

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font.epika-format-font-group,

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-changes.epika-format-history-group {
  display: inline-flex !important;
  align-items: center;
}

/*
 * Undo / redo group is visible, SOURCE remains hidden.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-changes
  [data-action="source"] {
  display: none !important;
}

/*
 * Font controls become text controls inside the same capsule.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font select {
  appearance: auto;

  height: 32px;

  margin: 0;

  padding: 0 4px;

  border: 0 !important;
  border-radius: 5px;

  outline: 0;

  background: transparent !important;

  box-shadow: none !important;

  color: inherit;

  font-size: 13px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font
  .epika-font-family {
  width: 104px;
  min-width: 104px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font
  .epika-font-size {
  width: 65px;
  min-width: 65px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  #squire-toolgroup-font select:hover {
  background: rgba(80, 90, 110, 0.08) !important;
}

/*
 * Every formatting action now looks like a Gmail toolbar icon,
 * not a Bootstrap button.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep {
  appearance: none;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  width: 32px;
  min-width: 32px;
  height: 32px;

  margin: 0;
  padding: 0;

  border: 0 !important;
  border-radius: 5px !important;

  background: transparent !important;

  box-shadow: none !important;

  color: #4d5156;

  font-size: 15px;
  line-height: 32px;
}

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep:hover:not(:disabled) {
  background: rgba(80, 90, 110, 0.10) !important;
}

/*
 * Native Squire active states vary by action/version.
 * Support the common variants without changing editor logic.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep.active,

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep.is-active,

#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep[aria-pressed="true"] {
  background: rgba(70, 110, 180, 0.16) !important;
}

/*
 * Disabled redo behaves like Gmail: present but subdued.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep:disabled {
  opacity: 0.28;
  cursor: default;
}

/*
 * SVG formatting icons.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  .squire-toolbar button.epika-format-keep svg {
  width: 18px;
  height: 18px;

  fill: none;
  stroke: currentColor;

  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;

  pointer-events: none;
}

/*
 * Keep B / I / U / text-color native glyphs clean.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="bold"],

#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="italic"],

#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="underline"],

#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="textColor"],

#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="backgroundColor"] {
  font-family: Arial, sans-serif;
}

/*
 * Remove strike/sub/sup from the Gmail-like compact set.
 */
#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="strike"],

#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="sub"],

#V-PopupsCompose
  .epika-compose-format-panel
  [data-action="sup"] {
  display: none !important;
}

/*
 * Responsive: still one visual capsule; it may wrap internally
 * on genuinely narrow compose windows.
 */
@media (max-width: 760px) {
  #V-PopupsCompose
    .epika-compose-format-panel
    .squire-toolbar {
    width: 100%;
    border-radius: 14px;
  }

  #V-PopupsCompose
    .epika-compose-format-panel
    #squire-toolgroup-font
    .epika-font-family {
    width: 94px;
    min-width: 94px;
  }
}

/* ==========================================================
   epikmail compose signature picker
   ========================================================== */

.epika-compose-bottom-left {
  position: relative;
}

.epika-compose-signature {
  position: relative;
}

.epika-compose-signature.is-active {
  background: rgba(60, 64, 67, .10);
}

.epika-signature-picker {
  position: absolute;
  left: 188px;
  bottom: calc(100% + 8px);
  z-index: 10050;

  width: 250px;
  max-width: calc(100vw - 24px);
  max-height: min(360px, calc(100vh - 120px));
  overflow-x: hidden;
  overflow-y: auto;

  padding: 6px 0;

  background: #fff;
  border: 1px solid rgba(60, 64, 67, .16);
  border-radius: 8px;

  box-shadow:
    0 8px 24px rgba(60, 64, 67, .20),
    0 2px 6px rgba(60, 64, 67, .12);

  color: #202124;
  font-size: 14px;
  line-height: 20px;
}

.epika-signature-picker button {
  font: inherit;
}

.epika-signature-picker-manage,
.epika-signature-picker-item {
  display: flex;
  align-items: center;

  width: 100%;
  min-height: 36px;

  margin: 0;
  padding: 7px 16px;

  border: 0;
  border-radius: 0;

  background: transparent;
  color: #202124;

  text-align: left;
  cursor: pointer;
}

.epika-signature-picker-manage {
  padding-left: 40px;
}

.epika-signature-picker-manage:hover,
.epika-signature-picker-item:hover,
.epika-signature-picker-manage:focus-visible,
.epika-signature-picker-item:focus-visible {
  background: #f1f3f4;
  outline: none;
}

.epika-signature-picker-check {
  flex: 0 0 24px;

  width: 24px;

  color: #202124;
  font-size: 16px;
  font-weight: 500;
}

.epika-signature-picker-label {
  display: block;

  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epika-signature-picker-divider {
  height: 1px;
  margin: 6px 0;

  background: #e0e0e0;
}

.epika-signature-picker-status,
.epika-signature-picker-empty {
  padding: 10px 16px;

  color: #5f6368;
  font-size: 13px;
}

.epika-signature-picker-status.is-error {
  color: #b3261e;
}

@media (max-width: 640px) {
  .epika-signature-picker {
    left: 8px;
    right: 8px;

    width: auto;
    max-width: none;
  }
}

/* ==========================================================
   epikmail signature picker — above open formatting panel
   ========================================================== */

.epika-formatting-open .epika-signature-picker {
  bottom: calc(100% + 58px);
}

/*
 * Keep the picker visually anchored near the signature tool.
 * The menu itself remains above the compose toolbar.
 */
.epika-signature-picker {
  left: 188px;
  z-index: 10150;
}

@media (max-width: 640px) {
  .epika-formatting-open .epika-signature-picker {
    bottom: calc(100% + 58px);
  }

  .epika-signature-picker {
    left: 8px;
    right: 8px;
  }
}

/* ==========================================================
   epikmail signature picker — stable overlay layer
   Picker deliberately overlays the formatting bar.
   ========================================================== */

.epika-formatting-open .epika-signature-picker,
.epika-signature-picker {
  bottom: calc(100% + 8px);
  z-index: 20050;
}

/*
 * The formatting panel stays below transient menus.
 */
.epika-compose-format-panel {
  z-index: 10000;
}

@media (max-width: 640px) {
  .epika-formatting-open .epika-signature-picker,
  .epika-signature-picker {
    bottom: calc(100% + 8px);
    z-index: 20050;
  }
}

/* ==========================================================
   epikmail signature picker — body portal
   ========================================================== */

body > .epika-signature-picker {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 2147483000 !important;
}

@media (max-width: 640px) {
  body > .epika-signature-picker {
    right: auto !important;
    width: min(250px, calc(100vw - 16px)) !important;
  }
}

/* ==========================================================
   epikmail compose responsive desktop sizing + editor scroll
   Phase 84B
   ========================================================== */

/*
 * SnappyMail native compose uses almost the full viewport
 * (99vw / 100dvh). For epikmail desktop compose we use a
 * compact Gmail-like floating window instead.
 *
 * Maximized and minimized states are deliberately excluded.
 * Mobile (<800px) keeps SnappyMail's existing behaviour.
 */
@media screen and (min-width: 800px) {

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]:not(.epika-compose-maximized):not(.epika-compose-minimized) {
    width: min(660px, calc(100vw - 32px)) !important;
    max-width: min(660px, calc(100vw - 32px)) !important;

    height: min(600px, calc(100dvh - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;

    min-width: 480px;
    min-height: 420px;

    resize: both;
  }

  /*
   * Keep the editor layout shrinkable.
   * Wide HTML content must not increase compose width.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .tabs {
    min-width: 0;
    min-height: 0;
  }

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .tabs > .tab-content:not(.attachmentAreaParent):not(#mailvelope-editor) {
    min-width: 0;
    min-height: 0;

    overflow: hidden;
  }

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .textAreaParent {
    min-width: 0;
    min-height: 0;

    overflow: hidden;
  }

  /*
   * Squire is the actual message viewport.
   *
   * overflow-x:auto gives the user a real horizontal scrollbar
   * when a table, signature or other fixed-width HTML content
   * is wider than the compose window.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .squire-wysiwyg,
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .squire-plain {
    min-width: 0;
    max-width: 100%;

    overflow-x: auto !important;
    overflow-y: auto !important;

    box-sizing: border-box;
  }

  /*
   * Prevent wide descendants from forcing the compose itself
   * beyond the selected desktop width.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .squire-wysiwyg {
    width: 100%;
  }
}

/* =========================================================
   epikmail compose — Gmail-style safe attachment growth
   Phase 86D
   ========================================================= */

@media screen and (min-width: 800px) {

  /*
   * Keep the desktop compose anchored to the viewport bottom.
   *
   * Base size remains Phase 84's 600px.
   * Attachment height is added on top of that.
   *
   * The 32px viewport reserve is also retained.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    :where(*) {
    --epika-compose-86d: 1;
  }

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]:not(.epika-compose-maximized):not(.epika-compose-minimized) {
    --epika-attachment-growth: 0px;

    top: auto !important;
    bottom: 0 !important;

    height:
      min(
        calc(600px + var(--epika-attachment-growth)),
        calc(100dvh - 32px)
      ) !important;

    max-height:
      calc(100dvh - 32px) !important;
  }

  /*
   * The compose body is a flex column.
   * Nothing is allowed to push the Send bar outside the dialog.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .modal-body {
    min-height: 0;
    overflow: hidden;
  }

  /*
   * Recipient/subject block and formatting toolbar are structural
   * controls; do not sacrifice them to attachment growth.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .b-header,

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-format-panel,

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-bottom-bar {
    flex-shrink: 0;
  }

  /*
   * Editor owns the remaining space.
   *
   * Native Squire uses min-height:200px. That is fine in a large
   * viewport, but on shorter windows it can push the Send bar out.
   * Let the editor viewport shrink and scroll instead.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .tabs {
    flex: 1 1 0 !important;

    min-width: 0;
    min-height: 0;

    overflow: hidden !important;
  }

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .tabs > .tab-content:not(.attachmentAreaParent):not(#mailvelope-editor),

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .textAreaParent {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .squire-wysiwyg,

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .squire-plain {
    min-height: 0 !important;

    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  /*
   * Attachments are allowed to grow naturally first.
   *
   * Once this region reaches the Gmail-like limit, only this
   * region scrolls instead of consuming the message body or
   * pushing the Send bar away.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-attachment-strip {
    flex: 0 1 auto;

    min-height: 0;

    max-height:
      clamp(96px, 30dvh, 220px);

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
  }

  /*
   * Send toolbar always keeps its own place at the bottom.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-bottom-bar {
    flex: 0 0 auto !important;
  }
}



/* =========================================================
   EPIKMAIL_PHASE_92B_GMAIL_MAIL_ZONE_SCROLL

   Desktop Gmail-like compose hierarchy:

     recipients / subject       FIXED
     --------------------------------
     body
     signature
     quoted reply
     attachments
             ^ ONE SCROLL ZONE ^
     --------------------------------
     formatting toolbar         FIXED
     send toolbar               FIXED

   Phase 86D attachment-only scrolling is superseded here.
   ========================================================= */

@media screen and (min-width: 800px) {

  /*
   * Attachments no longer increase the overall dialog height.
   * Keep the established 600px Gmail-like desktop compose.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    :not(.epika-compose-maximized):not(.epika-compose-minimized) {
    --epika-attachment-growth: 0px !important;
  }


  #V-PopupsCompose[data-epika-gmail-toolbar="1"]:not(.epika-compose-maximized):not(.epika-compose-minimized) {
    height:
      min(
        600px,
        calc(100dvh - 32px)
      ) !important;

    max-height:
      calc(100dvh - 32px) !important;
  }


  /*
   * modal-body remains a non-scrolling flex column.
   * Only .epika-compose-mail-scroll may scroll vertically.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .modal-body {
    min-height: 0 !important;
    overflow: hidden !important;
  }


  /*
   * THE single vertical scrolling zone.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll {
    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    flex: 1 1 0 !important;

    width: 100%;
    min-width: 0;
    min-height: 0;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;
    scrollbar-gutter: stable;

    background:
      var(--dialog-bg-clr, #fff);
  }


  /*
   * Editor is no longer the vertical scrollbar.
   *
   * flex: 1 0 auto means:
   * - with a short body it expands into the available mail zone;
   * - attachments consume space below it;
   * - long body / many attachments increase document height and
   *   therefore the OUTER mail zone scrolls.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll > .tabs {
    display: block !important;

    flex: 1 0 auto !important;

    width: 100%;
    height: auto !important;

    min-width: 0;
    min-height: 200px !important;

    overflow: visible !important;
  }


  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .tabs
    > .tab-content:not(.attachmentAreaParent):not(#mailvelope-editor) {
    display: flex !important;
    visibility: visible !important;

    flex: 1 0 auto !important;

    width: 100%;
    height: auto !important;

    min-width: 0;
    min-height: 200px !important;

    overflow: visible !important;
  }


  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .textAreaParent {
    flex: 1 0 auto !important;

    width: 100%;
    height: auto !important;

    min-width: 0;
    min-height: 200px !important;

    overflow: visible !important;
  }


  /*
   * Rich editor content grows with its content.
   * Horizontal scrolling for unusually wide HTML/signatures
   * remains available, but vertical scrolling belongs to the
   * outer mail zone.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .squire-wysiwyg {
    box-sizing: border-box;

    width: 100% !important;
    height: auto !important;

    min-width: 0;
    min-height: 200px !important;

    max-width: 100%;
    max-height: none !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
  }


  /*
   * Plain-text mode follows the same vertical owner where the
   * browser permits auto-growing textarea behaviour.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .squire-plain {
    box-sizing: border-box;

    width: 100% !important;

    min-width: 0;
    min-height: 200px !important;

    max-width: 100%;
    max-height: none !important;
  }


  /*
   * Attachments are simply the final block in the scroll
   * document. NO independent max-height and NO scrollbar.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .epika-compose-attachment-strip {
    flex: 0 0 auto !important;

    box-sizing: border-box;

    width: 100%;

    min-width: 0;
    min-height: 0;

    max-height: none !important;

    padding:
      4px 12px 10px;

    overflow: visible !important;

    overscroll-behavior: auto;
  }


  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .epika-compose-attachment-strip
    .attachmentList {
    overflow: visible !important;
  }


  /*
   * These controls never participate in the mail-zone scroll.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .b-header,

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-format-panel,

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-bottom-bar {
    flex-shrink: 0 !important;
  }


  /*
   * Explicitly supersede Phase 86D attachment-only scrolling.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    > .modal-body
    > .epika-compose-attachment-strip {
    max-height: none !important;
    overflow: visible !important;
  }
}



/* =========================================================
   EPIKMAIL_PHASE_92C_EDITOR_FLOW_FOLLOW

   Phase 92B successfully created the single mail scrollbar,
   but SnappyMail's native tab-content remained absolutely
   positioned.

   Result:
     editor descendants became very tall,
     while .tabs itself stayed viewport-height.

   Attachments therefore started at the end of the short .tabs
   box and visually overlapped signature / quoted content.

   Put the visible BODY tab panel back into normal document flow.
   ========================================================= */

@media screen and (min-width: 800px) {

  /*
   * The tabs container must take the real height of the visible
   * mail body. It can still fill spare space when content is short.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .tabs {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 200px !important;

    overflow: visible !important;
  }


  /*
   * CRITICAL FIX:
   *
   * Native SnappyMail tab-content is positioned absolutely.
   * That keeps the body outside .tabs document flow.
   *
   * Make only the visible BODY panel relative/static-flow.
   * Native attachmentAreaParent remains hidden.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .tabs
    > .tab-content:not(.attachmentAreaParent):not(#mailvelope-editor) {
    position: relative !important;

    inset: auto !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    box-sizing: border-box;

    width: 100% !important;

    height: auto !important;
    min-height: 200px !important;

    overflow: visible !important;
  }


  /*
   * These already grow to the actual Squire content height.
   * Keep them participating in normal flow.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .textAreaParent {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 200px !important;

    overflow: visible !important;
  }


  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .squire-wysiwyg {
    position: relative !important;

    width: 100% !important;

    height: auto !important;
    min-height: 200px !important;

    max-height: none !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
  }


  /*
   * Attachments now start only AFTER the real editor document:
   *
   * body
   * signature
   * quote / forward history
   * attachments
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .epika-compose-attachment-strip {
    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    margin-top: 0 !important;

    z-index: 1;
  }


  /*
   * The OUTER mail zone remains the only vertical scrollbar.
   */
  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}



/* =========================================================
   EPIKMAIL_PHASE_92D_PARENT_HEIGHT_FLOW

   Diagnostic result:

     .squire-wysiwyg:
       real content height ~2628px

     long BLOCKQUOTE:
       participates in normal Squire flow

     attachment strip:
       starts far too early because one or more native
       SnappyMail parent layers do not propagate the editor's
       real content height to .tabs.

   Goal:

     body
     signature
     quote/history
     attachments

   must form one natural vertical document.

   No fixed content height.
   No quote-specific margin.
   No attachment offset hack.
   ========================================================= */

@media screen and (min-width: 800px) {

  /*
   * ---------------------------------------------------------
   * 1. MAIL BODY TAB
   * ---------------------------------------------------------
   *
   * Phase 92C made the visible tab-content relative.
   * Now explicitly remove native flex/absolute sizing
   * constraints from the BODY path.
   */

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .tabs
    > .tab-content:not(.attachmentAreaParent):not(#mailvelope-editor) {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    flex: none !important;

    overflow: visible !important;
  }


  /*
   * ---------------------------------------------------------
   * 2. TEXT AREA PARENT
   * ---------------------------------------------------------
   *
   * This parent must obtain its height from the complete
   * Squire document, including signature and quote/history.
   */

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .textAreaParent {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    flex: none !important;

    overflow: visible !important;
  }


  /*
   * ---------------------------------------------------------
   * 3. SQUIRE DOCUMENT
   * ---------------------------------------------------------
   *
   * Squire already reports the correct full content height.
   * Keep the entire document in ordinary flow.
   */

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    .squire-wysiwyg {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;

    flex: none !important;

    overflow-x: auto !important;
    overflow-y: visible !important;
  }


  /*
   * ---------------------------------------------------------
   * 4. TABS HEIGHT PROPAGATION
   * ---------------------------------------------------------
   *
   * .tabs is the direct sibling immediately before our
   * attachment strip.
   *
   * Its box therefore MUST finish after the complete editor
   * document before attachments can begin.
   */

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .tabs {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    flex: none !important;

    overflow: visible !important;
  }


  /*
   * ---------------------------------------------------------
   * 5. ATTACHMENTS
   * ---------------------------------------------------------
   *
   * No calculated offset is used.
   *
   * The attachment strip simply follows .tabs in normal
   * document flow. Therefore any increase in body/signature/
   * quote height automatically pushes attachments downward.
   */

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll
    > .epika-compose-attachment-strip {

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    flex: none !important;

    margin-top: 0 !important;

    overflow: visible !important;

    z-index: 1;
  }


  /*
   * ---------------------------------------------------------
   * 6. SINGLE SCROLL OWNER
   * ---------------------------------------------------------
   *
   * Vertical scrolling belongs only to the outer mail zone.
   */

  #V-PopupsCompose[data-epika-gmail-toolbar="1"]
    .epika-compose-mail-scroll {

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}