/* ══════════════════════════════════════════════
   WPLock Webmail — wplock.css
   Roundcube 1.6.x · extends Elastic
   ══════════════════════════════════════════════ */

/* ── 1. Design Tokens ── */
:root {
  --wl-sb:   222px;
  --wl-hd:   68px;
  --wl-list: clamp(300px, 38vw, 620px);

  --wl-navy:       #13283b;
  --wl-navy2:      #172d42;
  --wl-blue:       #1e8fff;
  --wl-bg:         #f6f8fb;
  --wl-card:       #ffffff;
  --wl-line:       #e5e9f0;
  --wl-text:       #1f2937;
  --wl-sub:        #64748b;
  --wl-ghost:      #94a3b8;
  --wl-navy-text:  #dce8f0;
  --wl-navy-muted: #8aafc4;
}

/* ── 2. Typography ── */
html, body, button, input, select, textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
body {
  color: var(--wl-text);
  background: var(--wl-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Desktop Layout ── */
@media (min-width: 900px) {
  .task-mail.action-none #layout {
    display: flex;
    height: 100vh;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--wl-bg);
  }

  .task-mail.action-none #layout-menu,
  .task-mail.action-none #taskmenu { display: none !important; }

  /* Sidebar */
  .task-mail.action-none #layout-sidebar {
    display: flex;
    flex: 0 0 var(--wl-sb);
    width: var(--wl-sb);
    min-width: var(--wl-sb);
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--wl-navy);
    color: var(--wl-navy-text);
    border: 0;
  }

  /* Workspace */
  .task-mail.action-none #wl-workspace {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
  }

  /* Header */
  .task-mail.action-none #wl-header {
    display: flex;
    flex: 0 0 var(--wl-hd);
    height: var(--wl-hd);
    min-height: var(--wl-hd);
    align-items: stretch;
    background: var(--wl-card);
    border-bottom: 1px solid var(--wl-line);
    overflow: hidden;
  }

  /* Main */
  .task-mail.action-none #wl-main {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  /* List pane */
  .task-mail.action-none #layout-list {
    display: flex;
    flex: 0 0 var(--wl-list);
    width: var(--wl-list);
    min-width: 0;
    flex-direction: column;
    border-right: 1px solid var(--wl-line);
    background: var(--wl-card);
    overflow: hidden;
  }

  /* Reading pane */
  .task-mail.action-none #layout-content {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    position: relative;
    background: var(--wl-card);
    overflow: hidden;
  }

  /* Elastic hides panes on mobile, keep visible on desktop */
  .task-mail.action-none #layout-sidebar.hidden,
  .task-mail.action-none #layout-list.hidden,
  .task-mail.action-none #layout-content.hidden { display: flex !important; }
}

/* ── 4. Sidebar Brand ── */
.wl-brand {
  display: flex;
  align-items: center;
  height: var(--wl-hd);
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.wl-logo {
  height: 26px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

/* ── 5. Compose Button ── */
.wl-compose { padding: 14px 16px 10px; flex-shrink: 0; }
.wl-compose a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  color: #fff !important;
  background: var(--wl-blue);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(30,143,255,.22);
  transition: background .12s, box-shadow .12s;
}
.wl-compose a:hover {
  background: #1780e8;
  box-shadow: 0 4px 14px rgba(30,143,255,.32);
}

/* ── 6. Folder Nav ── */
.wl-nav-mobile { display: none; }

#folderlist-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
#folderlist-content::-webkit-scrollbar { width: 4px; }
#folderlist-content::-webkit-scrollbar-track { background: transparent; }
#folderlist-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }

#mailboxlist li { margin: 1px 0; border: 0; min-height: 0; }

#mailboxlist li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 10px;
  color: var(--wl-navy-text) !important;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 400;
  text-decoration: none !important;
  transition: background .1s, color .1s;
}
#mailboxlist li > a .foldername { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailboxlist li > a:hover { color: #fff !important; background: rgba(255,255,255,.08); }
#mailboxlist li.selected > a { color: #fff !important; background: rgba(255,255,255,.12); font-weight: 500; }

#mailboxlist .unreadcount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 17px;
  padding: 0 5px;
  color: #fff;
  background: var(--wl-blue);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.wl-add-folder {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 10px;
  margin-top: 4px;
  padding-top: 12px;
  color: var(--wl-navy-text) !important;
  font-size: 12.5px;
  text-decoration: none !important;
  transition: color .1s;
  border-top: 1px solid rgba(255,255,255,.07);
}
.wl-add-folder > span:not(.wl-icon) { flex: 1; }
.wl-add-folder > strong { font-size: 16px; font-weight: 400; color: var(--wl-navy-muted); }
.wl-add-folder:hover { color: #fff !important; }

/* ── 7. Sidebar Footer ── */
.wl-sidebar-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.wl-quota { flex: 1; min-width: 0; }
.wl-quota-text { color: var(--wl-navy-muted); font-size: 11px; white-space: nowrap; }

#quotadisplay.quota-widget::before { display: none; }
#quotadisplay .bar {
  margin-top: 5px;
  height: 3px;
  border: 0;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
#quotadisplay .value { height: 100%; border-radius: 99px; background: var(--wl-blue); }

.wl-settings-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--wl-navy-muted) !important;
  border-radius: 6px;
  text-decoration: none !important;
  transition: color .12s, background .12s;
  flex-shrink: 0;
  overflow: hidden;
}
.wl-settings-btn .inner { display: none; }
.wl-settings-btn::before { font-size: 15px; margin: 0; }
.wl-settings-btn:hover { color: #fff !important; background: rgba(255,255,255,.08); }

/* ── 8. Header Structure ── */
.wl-hd-list {
  display: flex;
  flex: 0 0 var(--wl-list);
  width: var(--wl-list);
  align-items: center;
  padding: 0 14px 0 16px;
  gap: 6px;
  border-right: 1px solid var(--wl-line);
  flex-shrink: 0;
}
.wl-hd-read {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 0 8px;
  gap: 2px;
}
.wl-hd-user {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  flex-shrink: 0;
  border-left: 1px solid var(--wl-line);
}

/* ── 9. Search Bar ── */
#mailsearchform {
  display: flex;
  flex: 1;
  min-width: 0;
  height: 38px;
  align-items: center;
  background: #f3f5f8;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color .15s, background .15s, box-shadow .15s;
  overflow: hidden;
}
#mailsearchform:focus-within {
  background: #fff;
  border-color: #c5d9ed;
  box-shadow: 0 0 0 3px rgba(30,143,255,.08);
}
#mailsearchform form::before,
#mailsearchform a.reset::before {
  height: 38px;
  line-height: 38px;
  color: var(--wl-sub);
  font-size: 13px;
}
#mailsearchform input {
  flex: 1;
  height: 38px;
  padding: 0 8px 0 0;
  background: transparent;
  border: 0;
  color: var(--wl-text);
  font-size: 12.5px;
  font-family: inherit;
  box-shadow: none !important;
}
#mailsearchform input::placeholder { color: var(--wl-ghost); }
#mailsearchform input:focus { outline: none; box-shadow: none; }

/* ── 10. List Toolbar ── */
.wl-list-toolbar {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}

.wl-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 9px;
  color: var(--wl-sub);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color .12s, background .12s;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.wl-tb-btn:hover { color: var(--wl-text); background: #f0f4f8; }
.wl-tb-btn.disabled { opacity: .45; pointer-events: none; }

/* Icons for list toolbar buttons (scoped to avoid affecting mail toolbar) */
#wl-list-toolbar .wl-tb-btn::before,
.wl-list-toolbar .wl-tb-btn::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  flex-shrink: 0;
}

/* Seç — checkbox icon */
#wl-list-toolbar .wl-tb-btn.select::before,
.wl-list-toolbar .wl-tb-btn.select::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3C/svg%3E");
}

/* İşlemler — settings/gear icon */
#wl-list-toolbar .wl-tb-btn.options::before,
.wl-list-toolbar .wl-tb-btn.options::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
/* "İşlemler" label override */
.wl-tb-btn.options .inner { font-size: 0; }
.wl-tb-btn.options .inner::after { content: "\0130\015Flemler"; font-size: 11.5px; }

/* Yenile — refresh/arrows icon */
#wl-list-toolbar .wl-tb-btn.refresh::before,
.wl-list-toolbar .wl-tb-btn.refresh::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpolyline points='1 20 1 14 7 14'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
}
/* "Yenile" label */
.wl-tb-btn.refresh .inner { font-size: 0; }
.wl-tb-btn.refresh .inner::after { content: "Yenile"; font-size: 11.5px; }

/* More button separator */
.wl-tb-btn.more { border-left: 1px solid var(--wl-line); border-radius: 0 7px 7px 0; padding-left: 10px; }

/* ── 11. Mail Toolbar (preview open) ── */
.wl-back-btn { display: none; }
.wl-mail-toolbar { display: none; }
.wl-preview-nav { display: none; }

body.wl-preview .wl-hd-list { flex: 0 0 var(--wl-list); }

body.wl-preview #wl-list-toolbar { display: none; }
body.wl-preview .wl-hd-user { display: none; }

body.wl-preview .wl-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  color: var(--wl-sub);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: color .12s, background .12s;
  cursor: pointer;
}
body.wl-preview .wl-back-btn:hover { color: var(--wl-text); background: #f0f4f8; }
body.wl-preview .wl-back-btn .wl-tb-label { font-size: 11.5px; }

body.wl-preview .wl-mail-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

body.wl-preview .wl-mail-toolbar a,
body.wl-preview .wl-mail-toolbar button,
body.wl-preview .wl-mail-toolbar span.dropbutton > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 9px;
  color: var(--wl-sub);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none !important;
  transition: color .12s, background .12s;
  background: transparent;
  border: 0;
  cursor: pointer;
}
body.wl-preview .wl-mail-toolbar a:hover,
body.wl-preview .wl-mail-toolbar button:hover { color: var(--wl-text); background: #f0f4f8; }

/* Separator before delete */
body.wl-preview .wl-mail-toolbar > .spacer {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--wl-line);
  margin: 0 4px;
  flex-shrink: 0;
}

body.wl-preview .wl-mail-toolbar .notjunk { display: none !important; }

body.wl-preview .wl-mail-toolbar .reply-all .inner { font-size: 0; }
body.wl-preview .wl-mail-toolbar .reply-all .inner::after { content: "Tümünü Yanıtla"; font-size: 11.5px; }
body.wl-preview .wl-mail-toolbar .junk .inner { font-size: 0; }
body.wl-preview .wl-mail-toolbar .junk .inner::after { content: "Spam"; font-size: 11.5px; }

body.wl-preview .wl-preview-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.wl-prev-msg,
.wl-next-msg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--wl-sub);
  border: 1px solid var(--wl-line);
  border-radius: 6px;
  text-decoration: none !important;
  transition: color .12s, background .12s, border-color .12s;
}
.wl-prev-msg:hover,
.wl-next-msg:hover { color: var(--wl-text); background: #f0f4f8; border-color: #d0dae6; }

/* ── 12. User Bar ── */
.wl-help-btn,
.wl-notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: var(--wl-sub);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  transition: color .12s, background .12s;
}
.wl-help-btn { font-size: 14px; font-weight: 700; font-family: serif; }
.wl-help-btn:hover,
.wl-notif-btn:hover { color: var(--wl-text); background: #f0f4f8; }

.wl-username {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--wl-sub);
}

.wl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e4eaf1;
  color: var(--wl-sub);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}

/* ── 13. Message List ── */
#messagelist-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 0;
  scrollbar-width: thin;
  scrollbar-color: #dde3ea transparent;
}

#messagelist {
  width: 100%;
  border-collapse: collapse;
}

#messagelist thead { display: none; }

#messagelist tbody tr td {
  height: 64px;
  padding: 0;
  border-bottom: 1px solid #f0f2f5;
  background: var(--wl-card);
  transition: background .1s;
  vertical-align: middle;
}

#messagelist tbody tr:hover td { background: #f7fbff; }
#messagelist tbody tr.selected td { background: #ebf4fd; box-shadow: inset 3px 0 0 var(--wl-blue); }
#messagelist tbody tr.unread td { font-weight: 600; }

/* Hide unused columns */
#messagelist td.status,
#messagelist td.flag,
#messagelist td.threads,
#messagelist td.selection,
#messagelist td.size,
#messagelist td.attachment { display: none !important; }

/* ── Subject cell grid (full-width: no reading pane) ── */
/* Columns: [checkbox 20px] [dot 10px] [sender 26%] [subject flex] [date 60px] */
.task-mail.action-none #messagelist td.subject {
  display: grid;
  grid-template-columns: 20px 10px minmax(110px, 26%) minmax(120px, 1fr) 60px;
  grid-template-rows: 23px 19px;
  column-gap: 10px;
  align-items: center;
  padding: 0 16px 0 14px;
  width: 100%;
}

/* Checkbox — col 1, both rows */
.wl-row-check {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid #c2cdd8;
  border-radius: 4px;
  background: var(--wl-card);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, border-color .12s, background .12s;
  position: relative;
  flex-shrink: 0;
}
#messagelist tr:hover .wl-row-check,
#messagelist tr.selected .wl-row-check,
body.wl-selecting .wl-row-check { opacity: 1; }
.wl-row-check:checked { border-color: var(--wl-blue); background: var(--wl-blue); }
.wl-row-check:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 4px; height: 7px;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: rotate(45deg);
}

/* Star — hidden in full-width mode, shown in compact */
.wl-row-star {
  display: none;
  width: 18px; height: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  align-self: center;
  justify-self: center;
  flex-shrink: 0;
  color: #c8d5df;
  transition: color .12s;
}
.wl-row-star::before {
  content: '';
  display: block;
  width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
#messagelist tr.flagged .wl-row-star { color: #f0a500; }
#messagelist tr.flagged .wl-row-star::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0a500' stroke='%23f0a500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0a500' stroke='%23f0a500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

/* Unread dot — col 2, both rows */
.wl-row-dot {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--wl-blue);
  align-self: center;
  justify-self: center;
  visibility: hidden;
  flex-shrink: 0;
}
.wl-row-dot.unread { visibility: visible; }

/* Sender — col 3, row 1 */
.task-mail.action-none #messagelist td.subject .fromto {
  grid-column: 3;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0;
}

/* Sender-pre hidden in full-width (sender col row 2 is blank per reference) */
.wl-sender-pre { display: none !important; }

/* Subject — col 4, row 1 */
.task-mail.action-none #messagelist td.subject .subject {
  grid-column: 4;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 400;
  width: auto;
  padding: 0;
}
.task-mail.action-none #messagelist td.subject .subject .msgicon { display: none; }
#messagelist tr.unread .subject .subject { font-weight: 600; }

/* Preview — col 4, row 2 */
.wl-row-pre {
  grid-column: 4;
  grid-row: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wl-ghost);
  font-size: 11px;
  font-weight: 400;
}

/* Date — col 5, both rows */
.task-mail.action-none #messagelist td.subject .date {
  grid-column: 5;
  grid-row: 1 / span 2;
  display: block !important;
  align-self: center;
  justify-self: end;
  color: var(--wl-sub);
  font-size: 11px;
  white-space: nowrap;
}

.task-mail.action-none #messagelist td.subject .size { display: none !important; }

/* ── Compact list when preview open ── */
/* Columns: [star 20px] [sender+subject flex] [date 55px] */
body.wl-preview.task-mail.action-none #messagelist td.subject {
  grid-template-columns: 22px minmax(0, 1fr) 55px;
  grid-template-rows: 22px 18px;
  column-gap: 8px;
  padding: 0 10px 0 10px;
}
/* Show star in compact, hide checkbox & dot */
body.wl-preview .wl-row-star {
  display: flex !important;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
}
body.wl-preview .wl-row-check { display: none !important; }
body.wl-preview .wl-row-dot   { display: none !important; }
/* Sender — col 2, row 1 */
body.wl-preview.task-mail #messagelist td.subject .fromto { grid-column: 2; grid-row: 1; font-size: 12px; font-weight: 500; }
/* Subject — col 2, row 2 */
body.wl-preview.task-mail #messagelist td.subject .subject { grid-column: 2; grid-row: 2; font-size: 11px; font-weight: 400; color: var(--wl-sub); }
/* Date — col 3, row 1 */
body.wl-preview.task-mail #messagelist td.subject .date    { grid-column: 3; grid-row: 1; font-size: 10.5px; }
/* Hide row-pre in compact (subject col row 2 carries the info) */
body.wl-preview .wl-row-pre { display: none !important; }

/* ── 14. Pagination ── */
.task-mail.action-none #layout-list > .footer,
.task-mail.action-none #layout-list .pagenav {
  flex-shrink: 0;
  min-height: 42px;
  background: #fafbfc;
  border-top: 1px solid #edf0f5;
}
.task-mail.action-none .pagenav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 12px;
}
.task-mail.action-none .pagenav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--wl-sub);
  border-radius: 7px;
  font-size: 11.5px;
  text-decoration: none;
  transition: color .12s, background .12s;
}
.task-mail.action-none .pagenav a:hover { color: var(--wl-text); background: #edf1f5; }
.task-mail.action-none .pagenav input {
  width: 32px;
  height: 26px;
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background: #edf1f5;
  text-align: center;
  font-size: 11px;
  font-family: inherit;
  box-shadow: none;
}
.pagenav-text { color: var(--wl-sub); font-size: 11px; font-weight: 500; margin: 0 4px; }

/* ── 15. Reading Pane ── */
.wl-iframe-wrap { flex: 1; overflow: hidden; min-height: 0; }
.wl-iframe-wrap iframe { width: 100%; height: 100%; border: 0; }

.wl-empty-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--wl-card);
  pointer-events: none;
  z-index: 1;
}
body.wl-preview .wl-empty-state { display: none; }

.wl-empty-state strong { margin-top: 20px; font-size: 14.5px; font-weight: 600; color: var(--wl-text); }
.wl-empty-state p { margin: 6px 0 0; font-size: 12px; color: var(--wl-sub); }

/* Envelope illustration */
.wl-envelope {
  position: relative;
  width: 90px;
  height: 66px;
  border-radius: 6px;
  background: linear-gradient(145deg, #2d96e0, #1a6fb5);
  box-shadow: 0 0 0 18px #edf5fb;
}
.wl-envelope::before,
.wl-envelope::after { position: absolute; content: ''; }
.wl-envelope::before {
  inset: 0;
  border-radius: 6px;
  background:
    linear-gradient(32deg, transparent 49%, #c3dcee 50%) left / 51% 100% no-repeat,
    linear-gradient(-32deg, transparent 49%, #aec9e0 50%) right / 51% 100% no-repeat;
}
.wl-envelope::after {
  top: -14px;
  left: 12px;
  width: 66px;
  height: 48px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(255,255,255,.45);
}
.wl-envelope span {
  position: absolute;
  z-index: 2;
  top: -7px;
  left: 17px;
  width: 56px;
  height: 30px;
  background:
    linear-gradient(34deg, transparent 49%, #96bad4 50%) left / 51% 100% no-repeat,
    linear-gradient(-34deg, transparent 49%, #82a8c4 50%) right / 51% 100% no-repeat;
}

/* ── 16. Message content (inside iframe) ── */
body.iframe .frame-content { padding: 22px 28px 40px; color: var(--wl-text); }
body.iframe #message-header { padding-bottom: 16px; border-bottom: 1px solid var(--wl-line); }
body.iframe #message-header .subject { margin: 0 0 14px; font-size: 19px; font-weight: 700; color: var(--wl-text); line-height: 1.3; }
body.iframe #message-header > .header { display: flex; align-items: flex-start; gap: 12px; }
body.iframe #message-header .contactphoto { width: 42px; height: 42px; border-radius: 50%; background: #e8eef4; flex-shrink: 0; }
body.iframe #message-header .header-summary,
body.iframe #message-header .header-headers { font-size: 12.5px; color: var(--wl-sub); line-height: 1.55; }
body.iframe #messagebody { font-size: 13.5px; line-height: 1.65; color: var(--wl-text); margin-top: 20px; }
body.iframe #messagebody p { margin-bottom: .9em; }

body.iframe #attachment-list,
body.iframe .attachmentslist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  margin-top: 24px;
}
body.iframe #attachment-list::before,
body.iframe .attachmentslist::before {
  width: 100%;
  content: attr(data-wl-label);
  color: var(--wl-sub);
  font-size: 11.5px;
  font-weight: 500;
  margin-bottom: 2px;
}
body.iframe #attachment-list li,
body.iframe .attachmentslist li {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 200px;
  min-width: 150px;
  max-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--wl-line);
  border-radius: 8px;
  background: var(--wl-card);
  box-shadow: none;
  transition: border-color .12s, background .12s;
}
body.iframe #attachment-list li:hover,
body.iframe .attachmentslist li:hover { border-color: #c0d5e8; background: #f5faff; }
body.iframe p.image-attachment { display: none; }

/* ── 17. Lucide Icons via CSS mask ── */
.wl-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}

.wl-icon-plus {
  width: 15px; height: 15px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.wl-icon-bell {
  width: 15px; height: 15px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}
.wl-icon-check-sq {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
}
.wl-icon-more {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
}
.wl-icon-arrow-left {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
}
.wl-icon-chev-l {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}
.wl-icon-chev-r {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.wl-icon-folder {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ── 18. Folder list icons (Lucide override) ── */
#mailboxlist li > a::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-color: currentColor !important;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  font-family: unset !important;
  flex-shrink: 0;
}

#mailboxlist li.inbox > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") !important;
}
#mailboxlist li.sent > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E") !important;
}
#mailboxlist li.drafts > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") !important;
}
#mailboxlist li.trash > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") !important;
}
#mailboxlist li.junk > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") !important;
}
#mailboxlist li.archive > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E") !important;
}
#mailboxlist li:not(.inbox):not(.sent):not(.drafts):not(.trash):not(.junk):not(.archive) > a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") !important;
}

/* ── 19. Mobile ── */
@media (max-width: 899px) {
  #wl-workspace, #wl-main { display: contents; }
  #wl-header, .wl-brand, .wl-compose { display: none; }
  .wl-nav-mobile { display: flex !important; }
}