/* Epika Shared Labels v1.0.0
   Shared label names/colors + SnappyMail IMAP keyword bridge. */

:root {
  --epika-label-surface: #ffffff;
  --epika-label-border: #dfe5ef;
  --epika-label-text: #172033;
  --epika-label-muted: #69758a;
  --epika-label-accent: #1261d8;
  --epika-label-shadow: 0 18px 55px rgba(20, 34, 57, .18);
}

/* Native message label row */
.messageView .messageTags {
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  min-height: 34px !important;
  color: var(--epika-label-muted) !important;
  font-size: 13px !important;
}

.messageView .messageTags > span:first-child {
  flex: 0 0 auto !important;
  font-weight: 600 !important;
}

.messageView .messageAssignedTags {
  align-items: center !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
}

/* Epika dışındaki native/legacy IMAP keyword'lerini kullanıcıya gösterme.
   Keyword sunucudan silinmez; yalnızca Epika etiket arayüzünden gizlenir. */
.messageView .messageAssignedTags > span:not([class*="msgflag-epika_"]),
.messageView .messageAssignedTags > span.epika-native-keyword-hidden {
  display: none !important;
}

.messageView .messageAssignedTags span.epika-label-chip {
  background: var(--label-color) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05) !important;
  color: var(--label-text) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.15 !important;
  max-width: 220px !important;
  overflow: hidden !important;
  padding: 6px 10px !important;
  text-overflow: ellipsis !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
  white-space: nowrap !important;
}

.messageView .messageAssignedTags span.epika-label-chip:hover {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 3px 9px rgba(15, 23, 42, .13) !important;
  transform: translateY(-1px) !important;
}

/* Label toolbar button */
#tags-dropdown-id.epika-label-button {
  align-items: center !important;
  background: #f5f7fb !important;
  border: 1px solid var(--epika-label-border) !important;
  border-radius: 10px !important;
  color: #43516a !important;
  display: inline-flex !important;
  font-family: inherit !important;
  gap: 6px !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
  text-decoration: none !important;
}

#tags-dropdown-id.epika-label-button:hover,
#tags-dropdown-id.epika-label-button:focus {
  background: #edf3ff !important;
  border-color: #bfd2f2 !important;
  color: var(--epika-label-accent) !important;
}

.epika-label-button-icon { font-size: 15px; line-height: 1; }
.epika-label-button-text { font-size: 13px; font-weight: 650; }

/* SnappyMail dropdown additions */
#tags-dropdown-id + menu.dropdown-menu,
#tags-dropdown-id ~ menu.dropdown-menu {
  border: 1px solid var(--epika-label-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--epika-label-shadow) !important;
  min-width: 250px !important;
  overflow: hidden !important;
  padding: 8px !important;
}

.epika-label-menu-item > a,
.epika-label-manage-item > a {
  align-items: center !important;
  border-radius: 9px !important;
  color: var(--epika-label-text) !important;
  display: flex !important;
  gap: 9px !important;
  min-height: 38px !important;
  padding: 7px 10px !important;
}

.epika-label-menu-item > a:hover,
.epika-label-manage-item > a:hover {
  background: #f2f6fc !important;
  text-decoration: none !important;
}

.epika-label-check {
  color: var(--epika-label-accent);
  flex: 0 0 15px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.epika-label-dot {
  background: var(--label-color);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05);
  display: inline-block;
  flex: 0 0 14px;
  height: 14px;
  width: 14px;
}

.epika-label-name { flex: 1 1 auto; font-weight: 550; }
.epika-label-manage-item { border-top: 1px solid #edf0f5; margin-top: 6px; padding-top: 6px; }

/* Message list badges */
.messageListItem.has-epika-labels {
  min-height: 68px !important;
}

.messageListItem.has-epika-labels > div + div {
  padding-bottom: 24px !important;
}

.epika-label-badges {
  align-items: center;
  bottom: 4px;
  display: flex;
  gap: 4px;
  left: 42px;
  max-width: calc(100% - 112px);
  overflow: hidden;
  pointer-events: auto;
  position: absolute;
  z-index: 2;
}

.epika-label-list-chip {
  background: var(--label-color);
  border: 0;
  border-radius: 999px;
  color: var(--label-text);
  cursor: pointer;
  flex: 0 1 auto;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1;
  max-width: 125px;
  overflow: hidden;
  padding: 4px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epika-label-list-chip:hover { filter: brightness(.96); }
.epika-label-more { color: #778297; font-size: 10px; font-weight: 700; white-space: nowrap; }

/* Left sidebar filters */
.epika-label-sidebar {
  border-top: 1px solid rgba(115, 130, 151, .16);
  margin: 14px 12px 0;
  padding: 13px 0 8px;
}

.epika-label-sidebar-title {
  align-items: center;
  color: #68758a;
  display: flex;
  font-size: 11px;
  font-weight: 750;
  justify-content: space-between;
  letter-spacing: .08em;
  margin: 0 7px 7px;
  text-transform: uppercase;
}

.epika-label-sidebar-manage,
.epika-label-sidebar-item,
.epika-label-sidebar-create {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
}

.epika-label-sidebar-manage {
  border-radius: 7px;
  color: #758298;
  font-size: 13px;
  height: 26px;
  width: 26px;
}

.epika-label-sidebar-manage:hover { background: rgba(71, 98, 136, .10); }

.epika-label-sidebar-list { display: grid; gap: 2px; }

.epika-label-sidebar-item,
.epika-label-sidebar-create {
  align-items: center;
  border-radius: 9px;
  display: flex;
  gap: 9px;
  min-height: 34px;
  padding: 6px 9px;
  text-align: left;
  width: 100%;
}

.epika-label-sidebar-item:hover,
.epika-label-sidebar-create:hover { background: rgba(18, 97, 216, .08); }

.epika-label-sidebar-name {
  flex: 1;
  font-size: 12px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.epika-label-sidebar-create { color: #58708f; font-size: 12px; font-weight: 600; }

/* Modal */
html.epika-label-modal-open,
html.epika-label-modal-open body { overflow: hidden !important; }

.epika-label-modal[hidden] { display: none !important; }
.epika-label-modal { inset: 0; position: fixed; z-index: 100000; }
.epika-label-modal-backdrop { background: rgba(20, 28, 41, .55); inset: 0; position: absolute; backdrop-filter: blur(2px); }

.epika-label-dialog {
  background: var(--epika-label-surface);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  box-shadow: 0 26px 90px rgba(10, 24, 45, .30);
  left: 50%;
  max-height: min(760px, calc(100vh - 40px));
  overflow: auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 28px));
}

.epika-label-dialog-header {
  align-items: center;
  border-bottom: 1px solid #e8edf4;
  display: flex;
  justify-content: space-between;
  padding: 22px 24px 18px;
}

.epika-label-dialog-header h2 { color: #172033; font-size: 25px; line-height: 1.2; margin: 0; }
.epika-label-close { background: transparent; border: 0; color: #7b8492; cursor: pointer; font-size: 34px; line-height: 1; padding: 0; }
.epika-label-close:hover { color: #28364d; }

.epika-label-editor-view,
.epika-label-manager-view { padding: 24px; }

.epika-label-field { display: grid; gap: 8px; }
.epika-label-field > span { color: #4c5a70; font-size: 13px; font-weight: 700; }
.epika-label-field input {
  background: #fff;
  border: 2px solid #d8e0eb;
  border-radius: 13px;
  box-sizing: border-box;
  color: #172033;
  font: 600 16px/1.2 inherit;
  height: 50px;
  outline: 0;
  padding: 0 14px;
  width: 100%;
}
.epika-label-field input:focus { border-color: #3a7be0; box-shadow: 0 0 0 4px rgba(58, 123, 224, .12); }

.epika-label-palette {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(8, 1fr);
  margin-top: 20px;
}

.epika-label-palette button {
  aspect-ratio: 1.18 / 1;
  background: var(--label-color);
  border: 3px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  min-height: 38px;
  outline: 0;
  position: relative;
}

.epika-label-palette button.is-selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px var(--label-color), 0 4px 10px rgba(15, 23, 42, .16);
}

.epika-label-palette button.is-selected::after {
  color: #fff;
  content: '✓';
  font-size: 18px;
  font-weight: 900;
  inset: 50% auto auto 50%;
  position: absolute;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transform: translate(-50%, -50%);
}

.epika-label-help { color: #6c7788; font-size: 12.5px; line-height: 1.5; margin: 18px 0 0; }

.epika-label-dialog-actions {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr auto auto;
  margin-top: 24px;
}

.epika-label-dialog-actions button {
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  min-height: 42px;
  padding: 0 17px;
}

.epika-label-save,
.epika-label-manager-create { background: #1261d8; color: #fff; }
.epika-label-save:hover,
.epika-label-manager-create:hover { background: #0f55bf; }
.epika-label-cancel,
.epika-label-manager-close { background: #eef1f5; color: #334156; }
.epika-label-archive { background: #fff0f2; color: #bd3348; }
.epika-label-dialog-actions button:disabled { cursor: wait; opacity: .6; }

.epika-label-manager-list { display: grid; gap: 7px; max-height: 440px; overflow: auto; }
.epika-label-manager-row {
  align-items: center;
  background: #f7f9fc;
  border: 1px solid #e5eaf1;
  border-radius: 12px;
  color: #1c293b;
  cursor: pointer;
  display: grid;
  font-family: inherit;
  gap: 11px;
  grid-template-columns: 16px 1fr auto;
  min-height: 48px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}
.epika-label-manager-row:hover { background: #f0f5fc; border-color: #ccd9eb; }
.epika-label-manager-name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.epika-label-manager-edit { color: #60708a; font-size: 12px; font-weight: 650; }

@media (max-width: 760px) {
  .epika-label-button-text { display: none; }
  #tags-dropdown-id.epika-label-button { min-width: 34px !important; padding: 5px 8px !important; }
  .epika-label-sidebar { display: none; }
  .epika-label-dialog { border-radius: 20px; width: calc(100vw - 18px); }
  .epika-label-dialog-header { padding: 18px 18px 14px; }
  .epika-label-dialog-header h2 { font-size: 22px; }
  .epika-label-editor-view, .epika-label-manager-view { padding: 18px; }
  .epika-label-palette { gap: 7px; grid-template-columns: repeat(4, 1fr); }
  .epika-label-dialog-actions { grid-template-columns: 1fr 1fr; }
  .epika-label-dialog-actions > span { display: none; }
  .epika-label-dialog-actions button { width: 100%; }
  .epika-label-archive { grid-column: 1 / -1; }
  .messageListItem.has-epika-labels { min-height: 86px !important; }
  .epika-label-badges { left: 54px; max-width: calc(100% - 105px); }
}

/* Epika Shared Labels v1.0.1 hotfix: reliable create action + message header label picker */
.messageView .b-message > .messageItemHeader .subjectParent {
  align-items: center !important;
  gap: 6px !important;
}

.epika-message-label-trigger {
  align-items: center;
  appearance: none;
  background: #eef4ff;
  border: 1px solid #cddcf3;
  border-radius: 999px;
  color: #315f9f;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  gap: 5px;
  line-height: 1;
  min-height: 30px;
  padding: 6px 10px;
  white-space: nowrap;
}

.epika-message-label-trigger:hover,
.epika-message-label-trigger[aria-expanded="true"] {
  background: #dfeaff;
  border-color: #aac4ec;
  color: #124f9e;
}

.epika-label-popover[hidden] { display: none !important; }
.epika-label-popover {
  background: #fff;
  border: 1px solid #dfe5ef;
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(20, 34, 57, .22);
  box-sizing: border-box;
  max-height: min(480px, calc(100vh - 24px));
  overflow: hidden;
  position: fixed;
  width: 286px;
  z-index: 100100;
}

.epika-label-popover-header {
  align-items: center;
  border-bottom: 1px solid #edf0f5;
  color: #172033;
  display: flex;
  justify-content: space-between;
  padding: 12px 13px 10px;
}

.epika-label-popover-close {
  background: transparent;
  border: 0;
  color: #7b8492;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.epika-label-popover-list {
  display: grid;
  gap: 2px;
  max-height: 330px;
  overflow: auto;
  padding: 7px;
}

.epika-label-popover-item {
  align-items: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #172033;
  cursor: pointer;
  display: grid;
  font-family: inherit;
  gap: 8px;
  grid-template-columns: 16px 14px 1fr;
  min-height: 38px;
  padding: 7px 9px;
  text-align: left;
  width: 100%;
}

.epika-label-popover-item:hover { background: #f2f6fc; }
.epika-label-popover-item:disabled { cursor: wait; opacity: .6; }
.epika-label-popover-item.is-checked { background: #edf4ff; }
.epika-label-popover-check { color: #1261d8; font-weight: 900; text-align: center; }
.epika-label-popover-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.epika-label-popover-actions {
  border-top: 1px solid #edf0f5;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr auto;
  padding: 8px;
}

.epika-label-popover-actions button {
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #315f9f;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 10px;
}
.epika-label-popover-actions button:hover { background: #eef4ff; }

@media (max-width: 760px) {
  .epika-message-label-trigger span:last-child { display: none; }
  .epika-message-label-trigger { min-width: 32px; padding: 6px 8px; }
  .epika-label-popover { width: min(286px, calc(100vw - 20px)); }
}


/* Epika Shared Labels v1.0.2 — stable label navigation / single search clear */
#V-MailMessageList .search-input-wrp .inputSearch::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}
#V-MailMessageList .search-input-wrp .inputSearch::-webkit-search-decoration {
  -webkit-appearance: none !important;
}
.epika-label-sidebar-item.is-active {
  background: rgba(18, 97, 216, .10) !important;
  color: #173c74 !important;
  font-weight: 700 !important;
}


/* Epika Shared Labels v1.0.4
   Açık mesajdaki SnappyMail native etiket menüsü yalnızca teknik köprü olarak
   DOM'da tutulur. Kullanıcıya tek etiket arayüzü olarak üstteki Epika popoverı görünür. */
.messageView .epika-native-label-bridge {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =========================================================
   EPIKMAIL_PHASE_90J_RAW_KEYWORD_GUARD

   Do not expose internal IMAP keyword names such as
   epika_incelendi while the colored chip is being prepared.
   ========================================================= */

.messageView
  .messageAssignedTags
  > span[class*="msgflag-epika_"]:not(.epika-label-chip) {
  display: none !important;
}




/* =========================================================
   EPIKMAIL_PHASE_93B_THREE_LINE_MESSAGE_LIST

   Compact desktop message-list redesign.

   Visual hierarchy:

     Sender                              Star / Time
     Subject                         Label badges
     Body preview

   Typography:
     sender   12px
     subject  12px
     preview  11px
     line     ~17.9px

   Existing checkbox / attachment / thread / label behaviour
   remains native.
   ========================================================= */

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

  /*
   * -------------------------------------------------------
   * MESSAGE ROW
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem {

    box-sizing: border-box !important;

    min-height: 62px !important;

    overflow: hidden !important;
  }


  /*
   * Native content wrapper immediately following checkbox.
   * Establish one reliable positioning context for all
   * three text rows and metadata.
   */
  #V-MailMessageList
    .messageListItem
    > div + div {

    box-sizing: border-box !important;

    min-height: 62px !important;

    padding-top: 5px !important;
    padding-bottom: 5px !important;

    padding-right: 8px !important;

    position: relative !important;
  }


  /*
   * Phase 93B replaces the old label-specific extra bottom
   * padding. Labels now share the subject row.
   */
  #V-MailMessageList
    .messageListItem.has-epika-labels {

    min-height: 62px !important;
  }


  #V-MailMessageList
    .messageListItem.has-epika-labels
    > div + div {

    padding-bottom: 5px !important;
  }


  /*
   * -------------------------------------------------------
   * ROW 1 — SENDER
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .senderParent {

    box-sizing: border-box !important;

    display: block !important;

    font-size: 12px !important;
    line-height: 17.9px !important;

    height: 17.9px !important;

    margin: 0 !important;

    /*
     * Reserve room for star/time at the right.
     */
    max-width: calc(100% - 92px) !important;

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


  /*
   * -------------------------------------------------------
   * ROW 2 — SUBJECT
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .subjectParent {

    box-sizing: border-box !important;

    display: block !important;

    font-size: 12px !important;
    line-height: 17.9px !important;

    height: 17.9px !important;

    margin: 0 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    /*
     * Normal rows can use almost all available width.
     */
    max-width: calc(100% - 24px) !important;
  }


  /*
   * Labeled rows reserve the right side of the subject line
   * for compact label chips.
   */
  #V-MailMessageList
    .messageListItem.has-epika-labels
    .subjectParent {

    max-width: calc(100% - 104px) !important;
  }


  /*
   * -------------------------------------------------------
   * ROW 3 — BODY PREVIEW
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .epika-message-preview {

    box-sizing: border-box !important;

    color: #7b8798 !important;

    display: block !important;

    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 17.9px !important;

    height: 17.9px !important;

    margin: 0 !important;

    max-width: calc(100% - 22px) !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;

    pointer-events: none !important;
  }


  /*
   * -------------------------------------------------------
   * TIME + STAR
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    time {

    font-size: 10.5px !important;
    line-height: 17.9px !important;

    max-width: 72px !important;

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


  #V-MailMessageList
    .messageListItem
    .flagParent {

    /*
     * Keep the native favourite/star control in its own
     * metadata area instead of letting it collide with sender.
     */
    z-index: 4 !important;
  }


  /*
   * -------------------------------------------------------
   * LABELS — RIGHT SIDE OF SUBJECT ROW
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .epika-label-badges {

    align-items: center !important;

    bottom: auto !important;
    left: auto !important;

    display: flex !important;

    gap: 3px !important;

    height: 17.9px !important;

    max-width: 96px !important;

    overflow: hidden !important;

    position: absolute !important;

    right: 6px !important;

    /*
     * Sender occupies the first ~18px row.
     * Badge aligns with the second/subject row.
     */
    top: 22.9px !important;

    white-space: nowrap !important;

    z-index: 3 !important;
  }


  #V-MailMessageList
    .messageListItem
    .epika-label-list-chip {

    border-radius: 999px !important;

    flex: 0 1 auto !important;

    font-size: 9.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;

    max-width: 88px !important;

    overflow: hidden !important;

    padding: 3px 6px !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }


  #V-MailMessageList
    .messageListItem
    .epika-label-more {

    font-size: 9px !important;
    line-height: 17.9px !important;
  }


  /*
   * -------------------------------------------------------
   * AUXILIARY NATIVE METADATA
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .sizeParent {

    /*
     * Size is low-value information in the compact inbox.
     * Keep it available in SnappyMail internally but remove
     * it from the visual three-line hierarchy.
     */
    display: none !important;
  }


  /*
   * Attachment indicator remains visible but is kept away
   * from the subject/label area.
   */
  #V-MailMessageList
    .messageListItem
    .attachmentParent {

    z-index: 4 !important;
  }


  /*
   * Selected / hover rows must not change the three-line
   * geometry.
   */
  #V-MailMessageList
    .messageListItem:hover,
  #V-MailMessageList
    .messageListItem.selected {

    min-height: 62px !important;
  }
}


/*
 * Smaller desktop/tablet list:
 * keep the same hierarchy but give labels less room.
 */
@media screen and (min-width: 800px) and (max-width: 1279px) {

  #V-MailMessageList
    .messageListItem.has-epika-labels
    .subjectParent {

    max-width: calc(100% - 84px) !important;
  }

  #V-MailMessageList
    .messageListItem
    .epika-label-badges {

    max-width: 76px !important;
  }

  #V-MailMessageList
    .messageListItem
    .epika-label-list-chip {

    max-width: 70px !important;
  }
}



/* =========================================================
   EPIKMAIL_PHASE_93B1_LAYOUT_POLISH

   Row 1 : sender                         star + time
   Row 2 : subject                        label
   Row 3 : preview / reserved             attachment

   Attachment and label deliberately occupy different rows.
   ========================================================= */

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

  /*
   * Keep a real three-line canvas even when SnappyMail has
   * preview=null. This prevents attachment metadata from
   * climbing into the label/subject row.
   */
  #V-MailMessageList
    .messageListItem {

    min-height: 64px !important;
    height: 64px !important;
  }


  #V-MailMessageList
    .messageListItem
    > div + div {

    box-sizing: border-box !important;

    height: 64px !important;
    min-height: 64px !important;

    padding-top: 5px !important;
    padding-bottom: 5px !important;

    /*
     * Reserve a small permanent right gutter for metadata.
     */
    padding-right: 8px !important;

    position: relative !important;
  }


  #V-MailMessageList
    .messageListItem.has-epika-labels {

    min-height: 64px !important;
    height: 64px !important;
  }


  /*
   * -------------------------------------------------------
   * ROW 1
   * Sender
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .senderParent {

    height: 18px !important;
    line-height: 18px !important;

    max-width: calc(100% - 105px) !important;
  }


  /*
   * -------------------------------------------------------
   * ROW 2
   * Subject + label
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .subjectParent {

    height: 18px !important;
    line-height: 18px !important;

    /*
     * Leave attachment completely out of this calculation.
     */
    max-width: calc(100% - 18px) !important;
  }


  #V-MailMessageList
    .messageListItem.has-epika-labels
    .subjectParent {

    /*
     * Right side belongs to the label badge only.
     */
    max-width: calc(100% - 94px) !important;
  }


  /*
   * LABEL = SECOND ROW
   */
  #V-MailMessageList
    .messageListItem
    .epika-label-badges {

    bottom: auto !important;
    left: auto !important;

    height: 18px !important;

    max-width: 86px !important;

    right: 5px !important;

    /*
     * content top 5px
     * row 1 = 18px
     * => row 2 starts at 23px
     */
    top: 23px !important;

    z-index: 5 !important;
  }


  #V-MailMessageList
    .messageListItem
    .epika-label-list-chip {

    font-size: 9px !important;

    max-width: 80px !important;

    padding: 3px 6px !important;
  }


  /*
   * -------------------------------------------------------
   * ROW 3
   * Preview + attachment
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    .epika-message-preview {

    color: #7d8796 !important;

    font-size: 11px !important;

    height: 18px !important;
    line-height: 18px !important;

    /*
     * Attachment owns the far-right part of row 3.
     */
    max-width: calc(100% - 34px) !important;
  }


  /*
   * ATTACHMENT = THIRD ROW, RIGHT
   *
   * Native attachment positioning is overridden completely
   * so it cannot collide with labels anymore.
   */
  #V-MailMessageList
    .messageListItem
    .attachmentParent {

    bottom: auto !important;
    left: auto !important;

    box-sizing: border-box !important;

    height: 18px !important;
    line-height: 18px !important;

    margin: 0 !important;

    position: absolute !important;

    right: 6px !important;

    /*
     * content top 5
     * row1 18
     * row2 18
     * => row3 starts 41
     */
    top: 41px !important;

    width: 18px !important;

    text-align: center !important;

    z-index: 5 !important;
  }


  #V-MailMessageList
    .messageListItem
    .attachmentParent
    i {

    font-size: 11px !important;
    line-height: 18px !important;

    margin: 0 !important;
  }


  /*
   * -------------------------------------------------------
   * TIME
   * -------------------------------------------------------
   */

  #V-MailMessageList
    .messageListItem
    time {

    font-size: 9.5px !important;

    line-height: 18px !important;

    max-width: 68px !important;

    white-space: nowrap !important;
  }


  /*
   * Native message size remains hidden in compact mode.
   */
  #V-MailMessageList
    .messageListItem
    .sizeParent {

    display: none !important;
  }


  /*
   * Prevent hover/selection rules from changing row geometry.
   */
  #V-MailMessageList
    .messageListItem:hover,
  #V-MailMessageList
    .messageListItem.selected {

    min-height: 64px !important;
    height: 64px !important;
  }
}


/*
 * Narrow list variation.
 */
@media screen and (min-width: 800px) and (max-width: 1279px) {

  #V-MailMessageList
    .messageListItem.has-epika-labels
    .subjectParent {

    max-width: calc(100% - 78px) !important;
  }


  #V-MailMessageList
    .messageListItem
    .epika-label-badges {

    max-width: 70px !important;
  }


  #V-MailMessageList
    .messageListItem
    .epika-label-list-chip {

    max-width: 65px !important;
  }
}


/* =========================================================
   EPIKMAIL_PHASE_93C1_HIDE_UNSEEN
   Remove the standalone "Unseen" mailbox filter row.
   ========================================================= */

#V-MailFolderList .e-checkbox[data-bind*="filterUnseen"],
#rl-left .e-checkbox[data-bind*="filterUnseen"] {
    display: none !important;
}

/* =========================================================
   EPIKMAIL_PHASE_93C11_SIDEBAR_FINAL
   Final consolidated personal-folder presentation.
   CSS only. System folders and label sidebar untouched.
   ========================================================= */


/* ---------------------------------------------------------
   USER TREE CONTAINER
   Join the personal folders naturally to the system list.
   --------------------------------------------------------- */

#rl-left #V-MailFolderList ul.b-folders-user {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;

    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* ---------------------------------------------------------
   HIDDEN USER-TREE INBOX HEADER

   Keep the LI because it owns genuine INBOX children.
   Hide only its duplicate INBOX anchor.
   --------------------------------------------------------- */

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child > a:first-child {
    display: none !important;
}

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child {
    height: auto !important;
    min-height: 0 !important;

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

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

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child > ul {
    margin: 0 !important;
    padding: 0 !important;

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


/* ---------------------------------------------------------
   ROOT PERSONAL FOLDERS
   Same 24px rhythm as the working production baseline.
   --------------------------------------------------------- */

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) {
    min-height: 24px !important;

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

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

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a {
    position: relative !important;
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;

    margin: 0 !important;
    padding: 0 38px 0 36px !important;

    right: auto !important;
    top: auto !important;
    transform: none !important;
}


/* Folder icon.
   Use a Unicode folder instead of the previous ▱ glyph. */

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a::before {
    content: "\1F4C1" !important;

    position: absolute !important;

    left: 12px !important;
    right: auto !important;
    top: 0 !important;

    width: 16px !important;
    height: 24px !important;

    display: block !important;

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

    border: 0 !important;
    background: none !important;

    font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: center !important;

    opacity: .68 !important;
}


/* Root unread badge. */

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a::after {
    content: attr(data-unread) !important;

    position: absolute !important;

    right: 10px !important;
    left: auto !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

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

    border: 0 !important;
    background: none !important;

    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child)
> a[data-unread]:not([data-unread=""])::after {
    min-width: 22px !important;
    height: 18px !important;

    padding: 0 5px !important;

    border-radius: 9px !important;

    background: rgb(11, 87, 208) !important;
    color: #fff !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
}


/* ---------------------------------------------------------
   GENUINE CHILD FOLDERS
   Example: INBOX.spam
   --------------------------------------------------------- */

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child > ul > li {
    min-height: 24px !important;

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

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

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child > ul > li > a {
    position: relative !important;
    box-sizing: border-box !important;

    display: block !important;

    width: 100% !important;
    height: 24px !important;
    min-height: 24px !important;
    line-height: 24px !important;

    margin: 0 !important;

    /* One hierarchy step deeper than root personal folders. */
    padding: 0 38px 0 54px !important;

    right: auto !important;
    top: auto !important;
    transform: none !important;
}

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child > ul > li > a::before {
    content: "\1F4C1" !important;

    position: absolute !important;

    left: 30px !important;
    right: auto !important;
    top: 0 !important;

    width: 16px !important;
    height: 24px !important;

    display: block !important;

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

    border: 0 !important;
    background: none !important;

    font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    text-align: center !important;

    opacity: .58 !important;
}


/* Child unread value, when supplied by the DOM. */

#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child > ul > li > a::after {
    content: attr(data-unread) !important;

    position: absolute !important;

    right: 10px !important;
    left: auto !important;
    top: 50% !important;

    transform: translateY(-50%) !important;

    display: block !important;

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

    border: 0 !important;
    background: none !important;
}


/* ---------------------------------------------------------
   SECTION SEPARATION

   Remove historical separators inside the folder tree.
   The native separator before the Labels section is untouched.
   --------------------------------------------------------- */

#rl-left #V-MailFolderList ul.b-folders-system,
#rl-left #V-MailFolderList ul.b-folders-user,
#rl-left #V-MailFolderList ul.b-folders-user > li,
#rl-left #V-MailFolderList ul.b-folders-user > li > ul {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* Label sidebar intentionally untouched. */



/* =========================================================
   EPIKMAIL_PHASE_93C12_FOLDER_RHYTHM
   Hide duplicate INBOX child and unify system/personal
   folder row rhythm. Labels intentionally untouched.
   ========================================================= */


/* The user-tree child shown as "spam" duplicates the native
   Spam system mailbox already visible above. */
#rl-left #V-MailFolderList
ul.b-folders-user > li:first-child {
    display: none !important;
}


/* System folders: slightly tighter than current presentation. */
#rl-left #V-MailFolderList
ul.b-folders-system > li,
#rl-left #V-MailFolderList
ul.b-folders-system > li > a {
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
}


/* Personal root folders: slightly more breathing room. */
#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child),
#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a {
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
}


/* Keep our personal-folder icon vertically centered
   in the new common row height. */
#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a::before {
    height: 30px !important;
    line-height: 30px !important;
}


/* Keep the native boundary before Labels.
   No label selectors below this point. */


/* =========================================================
   EPIKMAIL_PHASE_93C13_FOLDER_ALIGNMENT
   Align personal-folder icon and text columns with the
   native system-folder columns.
   Row rhythm, counters and labels remain untouched.
   ========================================================= */


/* Native system text begins at x=54.5px.
   Personal row begins at x=14px.
   16px native padding + our generated icon caused the
   previous personal text to begin 20px too far right.

   16px padding reproduces the native text column. */
#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a {
    padding-left: 16px !important;
}


/* Move generated folder icon into the same left icon column
   occupied by native system-folder icons. */
#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a::before {
    left: 4px !important;
    transform: translateX(-100%) !important;
}


/* Preserve enough room on the right for unread badges. */
#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a {
    padding-right: 38px !important;
}


/* =========================================================
   EPIKMAIL_PHASE_93C14_FOLDER_ICON_ALIGNMENT
   Keep the now-correct personal-folder text alignment.
   Correct only the generated folder icon column.
   ========================================================= */

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a::before {
    left: 8px !important;
    transform: none !important;
}


/* =========================================================
   EPIKMAIL_PHASE_93C15_ICON_NUDGE
   Final +3px horizontal adjustment for personal-folder icons.
   Text, counters, row rhythm and labels untouched.
   ========================================================= */

#rl-left #V-MailFolderList
ul.b-folders-user > li:not(:first-child) > a::before {
    left: 11px !important;
}


/* =========================================================
   EPIKMAIL_PHASE_93C16_LABEL_RHYTHM
   Compact label rows.
   Folder/sidebar geometry remains untouched.
   ========================================================= */

/*
 * Live measurement:
 * outer label BUTTON = 34px
 * inner content       = ~20px
 * vertical padding    = 6px + 6px
 *
 * Reduce only vertical button padding.
 */
#rl-left .epika-label-sidebar button {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 28px !important;
    height: 28px !important;
}


/* Keep label content vertically centered. */
#rl-left .epika-label-sidebar button > span {
    vertical-align: middle !important;
}


/* No artificial gaps between consecutive label actions. */
#rl-left .epika-label-sidebar button + button {
    margin-top: 0 !important;
}


/* =========================================================
   EPIKMAIL_PHASE_93C17B_QUOTA_BAR
   Sidebar storage footer.
   ========================================================= */

/* Hide SnappyMail's original bottom action toolbar. */
#rl-left #V-MailFolderList > .b-footer {
    display: none !important;
}


/* Custom quota footer. */
#rl-left .epika-quota-footer {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    height: 46px !important;
    box-sizing: border-box !important;

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

    padding: 0 14px !important;

    border-top: 1px solid rgba(0, 0, 0, .10) !important;
    background: var(--folders-bg, #fff) !important;

    z-index: 20 !important;
}


/* Storage/disk indicator. */
#rl-left .epika-quota-icon {
    width: 20px !important;
    flex: 0 0 20px !important;

    margin-right: 9px !important;

    font-size: 13px !important;
    line-height: 1 !important;
    text-align: center !important;

    color: #777 !important;
}


/* Progress background. */
#rl-left .epika-quota-track {
    position: relative !important;

    height: 5px !important;
    flex: 1 1 auto !important;

    overflow: hidden !important;

    border-radius: 5px !important;
    background: rgba(0, 0, 0, .13) !important;
}


/* Used space. */
#rl-left .epika-quota-fill {
    display: block !important;

    width: 0;
    height: 100% !important;

    border-radius: inherit !important;

    background: #32b7cf !important;

    transition: width .25s ease !important;
}


/* Percentage. */
#rl-left .epika-quota-percent {
    min-width: 38px !important;

    margin-left: 9px !important;

    font-size: 12px !important;
    line-height: 1 !important;
    text-align: right !important;

    color: #666 !important;
}


/* Hover tooltip. */
#rl-left .epika-quota-tooltip {
    position: absolute !important;

    left: 14px !important;
    right: 14px !important;
    bottom: 40px !important;

    padding: 7px 10px !important;

    border-radius: 3px !important;

    background: rgba(20, 20, 20, .96) !important;
    color: #fff !important;

    font-size: 11px !important;
    line-height: 1.35 !important;
    text-align: center !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transform: translateY(3px);
    transition:
        opacity .12s ease,
        transform .12s ease,
        visibility .12s ease !important;

    z-index: 100 !important;
}


#rl-left .epika-quota-footer:hover .epika-quota-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
}


/* Unknown quota. */
#rl-left .epika-quota-footer.is-unavailable
.epika-quota-percent {
    opacity: .55 !important;
}

#rl-left .epika-quota-footer.is-unavailable
.epika-quota-track {
    opacity: .55 !important;
}



/* =========================================================
   EPIKMAIL_PHASE_93C17C_NATIVE_QUOTA_BRIDGE
   Native quota remains data source but is visually replaced
   by the sidebar quota bar.
   ========================================================= */

/* Hide only the native percentage at message-list footer. */
.messageList .b-footer .e-quota,
.thm-message-list-bottom-toolbar .e-quota {
    display: none !important;
}


/* Allow two-line detailed quota tooltip. */
#rl-left .epika-quota-tooltip {
    white-space: pre-line !important;
}


/* =========================================================
   EPIKMAIL_PHASE_93C17D_HDD_ICON
   CSS-drawn HDD icon for quota footer.
   ========================================================= */

#rl-left .epika-quota-icon {
    position: relative !important;

    width: 16px !important;
    height: 13px !important;
    flex: 0 0 16px !important;

    margin-right: 10px !important;

    font-size: 0 !important;

    border: 1.5px solid #7d8790 !important;
    border-radius: 2px !important;

    box-sizing: border-box !important;
}


/* HDD lower separator line */
#rl-left .epika-quota-icon::before {
    content: "" !important;

    position: absolute !important;
    left: 2px !important;
    right: 2px !important;
    bottom: 3px !important;

    height: 1px !important;

    background: #a3abb2 !important;
}


/* HDD activity light */
#rl-left .epika-quota-icon::after {
    content: "" !important;

    position: absolute !important;
    right: 2px !important;
    bottom: 1px !important;

    width: 2px !important;
    height: 2px !important;

    border-radius: 50% !important;
    background: #7d8790 !important;
}