/* ================================================================
   pix.mom mail — full theme
   Gmail-inspired layout + pix.mom design language
   ================================================================ */

@font-face { font-family:'Inter'; src:url('/custom-themes/fonts/inter-latin.woff2') format('woff2'); font-weight:300 700; font-style:normal; }
@font-face { font-family:'Metamorphous'; src:url('/custom-themes/fonts/metamorphous.woff2') format('woff2'); font-weight:400; font-style:normal; }

/* ---- CSS Variables ---- */
:root {
  --pm-bg:        #f6f8fc;
  --pm-surface:   #ffffff;
  --pm-border:    #e2e8f0;
  --pm-border-hi: rgba(0,0,0,0.13);
  --pm-text:      #202124;
  --pm-muted:     #5f6368;
  --pm-hover:     #f1f3f4;
  --pm-selected:  #e8f0fe;
  --pm-unread-bg: #ffffff;
  --pm-accent:    #4f46e5;
  --pm-grad:      linear-gradient(90deg,#f472b6,#a855f7,#6366f1,#22d3ee,#4ade80,#facc15,#fb923c,#f472b6);
  --pm-grad-short: linear-gradient(90deg,#f472b6,#a855f7,#6366f1);
  --pm-shadow:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);

  /* Override Snappymail theme vars */
  --main-bg-color: var(--pm-bg);
  --main-bg-image: none;
  --folders-color: var(--pm-text);
  --folders-selected-bg-color: #e8f0fe;
  --folders-selected-color: var(--pm-accent);
  --folders-hover-bg-color: var(--pm-hover);
  --folders-hover-color: var(--pm-text);
  --panel-bg-clr: var(--pm-surface);
  --border-color: var(--pm-border);
  --border-radius: 8px;
  --dialog-bg-clr: var(--pm-surface);
  --dialog-border-clr: var(--pm-border);
  --dialog-border-radius: 12px;
  --dialog-clr: var(--pm-text);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body, #rl-app {
  font-family: 'Inter', 'Google Sans', system-ui, sans-serif !important;
  background: var(--pm-bg) !important;
  color: var(--pm-text) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased;
}

/* ---- Top header / toolbar ---- */
.b-header {
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  box-shadow: var(--pm-shadow) !important;
}

/* App-level header with search */
#rl-app > .b-header,
#rl-content > .b-header {
  height: 64px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
}

/* Brand / logo area */
.b-header .b-logo::after {
  content: 'pix.mom';
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: var(--pm-grad);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.b-header .b-logo img { display: none !important; }
.b-header .b-logo { text-decoration: none; }

/* Search bar */
.e-search, .b-search {
  background: var(--pm-bg) !important;
  border: 1px solid transparent !important;
  border-radius: 24px !important;
  transition: all 0.2s !important;
  flex: 1 !important;
  max-width: 720px !important;
  margin: 0 16px !important;
}
.e-search:focus-within, .b-search:focus-within {
  background: #fff !important;
  border-color: var(--pm-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.e-search input, .b-search input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  color: var(--pm-text) !important;
  padding: 10px 16px !important;
  width: 100% !important;
}

/* ---- Left sidebar ---- */
#rl-left {
  background: var(--pm-surface) !important;
  border-right: none !important;
  width: 240px !important;
}

/* Compose button */
#rl-left .b-toolbar,
.b-folders .b-toolbar {
  padding: 8px 16px 4px !important;
}
.buttonCompose, #rl-left .b-toolbar a.btn {
  background: var(--pm-grad-short) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 14px 24px 14px 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  box-shadow: 0 2px 6px rgba(99,102,241,0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
  margin: 0 !important;
  width: auto !important;
}
.buttonCompose:hover, #rl-left .b-toolbar a.btn:hover {
  box-shadow: 0 4px 12px rgba(99,102,241,0.4) !important;
  transform: translateY(-1px) !important;
  opacity: 1 !important;
  background: var(--pm-grad-short) !important;
}

/* Folder list */
.b-folders .b-content { background: var(--pm-surface) !important; }
.b-folders li { display: block !important; }
.b-folders li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 16px 6px 20px !important;
  margin: 1px 8px 1px 0 !important;
  border-radius: 0 20px 20px 0 !important;
  color: var(--pm-text) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: background 0.1s !important;
  white-space: nowrap !important;
}
.b-folders li a:hover { background: var(--pm-hover) !important; }
.b-folders li a.selected, .b-folders li a.focused {
  background: var(--pm-selected) !important;
  color: var(--pm-accent) !important;
  font-weight: 600 !important;
}
/* Unread count badge */
.b-folders li a[data-unread]::after {
  content: attr(data-unread);
  background: var(--pm-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 1px 6px !important;
  margin-left: auto !important;
}

/* Folder footer (quota) */
.b-folders .b-footer {
  border-top: 1px solid var(--pm-border) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  color: var(--pm-muted) !important;
}
.e-quota { background: var(--pm-selected) !important; border-radius: 4px !important; }
.e-quota > div { background: var(--pm-accent) !important; border-radius: 4px !important; }

/* ---- Right panel ---- */
#rl-right { background: var(--pm-bg) !important; }

/* ---- Message list ---- */
.messageList {
  background: var(--pm-surface) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* List toolbar */
#V-MailMessageList .btn-toolbar, .b-list-toolbar {
  padding: 8px 12px !important;
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
#V-MailMessageList .btn-toolbar .btn,
.b-list-toolbar .btn {
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--pm-muted) !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
  transition: background 0.1s !important;
}
#V-MailMessageList .btn-toolbar .btn:hover,
.b-list-toolbar .btn:hover {
  background: var(--pm-hover) !important;
  color: var(--pm-text) !important;
}

/* Message row */
.messageListItem {
  border-bottom: 1px solid var(--pm-border) !important;
  border-left: 3px solid transparent !important;
  padding: 0 !important;
  background: var(--pm-surface) !important;
  transition: background 0.1s, box-shadow 0.1s !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
}
.messageListItem:hover {
  background: var(--pm-hover) !important;
  box-shadow: inset 3px 0 0 var(--pm-accent) !important;
  border-left-color: var(--pm-accent) !important;
}
.messageListItem.focused, .messageListItem.selected {
  background: var(--pm-selected) !important;
  border-left-color: var(--pm-accent) !important;
}
/* Unread — bold */
.messageListItem.unread {
  background: #fff !important;
  font-weight: 600 !important;
}
.messageListItem time, .messageListItem .sizeParent {
  color: var(--pm-muted) !important;
  font-size: 12px !important;
}
/* Star */
.messageListItem .flagParent { color: var(--pm-muted) !important; }
.messageListItem .flagParent.flagged { color: #f59e0b !important; }

/* Paginator */
.e-paginator { background: var(--pm-surface) !important; border-top: 1px solid var(--pm-border) !important; padding: 8px 12px !important; }
.e-paginator .btn { border-radius: 6px !important; color: var(--pm-muted) !important; border: none !important; background: transparent !important; }
.e-paginator .btn:hover { background: var(--pm-hover) !important; color: var(--pm-text) !important; }

/* ---- Message view ---- */
#V-MailMessageView { background: var(--pm-bg) !important; }
.b-message {
  background: var(--pm-surface) !important;
  border-radius: 12px !important;
  margin: 12px !important;
  box-shadow: var(--pm-shadow) !important;
  overflow: hidden !important;
}
.b-message-view-desc, .b-view-content-toolbar {
  border-bottom: 1px solid var(--pm-border) !important;
  padding: 16px 20px !important;
  background: var(--pm-surface) !important;
}
/* Subject line */
.b-view-content-toolbar .subjectParent,
.b-message h2 {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--pm-text) !important;
  margin-bottom: 4px !important;
}
.b-text-part {
  padding: 20px !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--pm-text) !important;
  background: var(--pm-surface) !important;
}

/* Message toolbar (reply, forward, etc.) */
.b-view-content-toolbar .btn, .b-message-view-desc .btn {
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--pm-muted) !important;
  padding: 6px 10px !important;
  font-size: 14px !important;
}
.b-view-content-toolbar .btn:hover, .b-message-view-desc .btn:hover {
  background: var(--pm-hover) !important;
  color: var(--pm-text) !important;
}
/* Reply button prominent */
.b-view-content-toolbar .btn-primary, .b-message-view-desc .btn-primary {
  background: var(--pm-grad-short) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 7px 20px !important;
  font-weight: 600 !important;
}

/* ---- Settings ---- */
#V-Settings { background: var(--pm-surface) !important; border-radius: 12px !important; margin: 12px !important; box-shadow: var(--pm-shadow) !important; }
#V-SettingsMenu { border-right: 1px solid var(--pm-border) !important; background: var(--pm-surface) !important; }
#V-SettingsMenu nav a {
  display: block !important;
  padding: 8px 16px !important;
  border-radius: 0 20px 20px 0 !important;
  margin: 1px 8px 1px 0 !important;
  color: var(--pm-text) !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  transition: background 0.1s !important;
}
#V-SettingsMenu nav a:hover { background: var(--pm-hover) !important; }
#V-SettingsMenu nav a.selected { background: var(--pm-selected) !important; color: var(--pm-accent) !important; font-weight: 600 !important; }
#V-SettingsPane { padding: 24px !important; }

/* ---- Dropdowns / menus ---- */
.dropdown-menu {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
  padding: 4px 0 !important;
  min-width: 180px !important;
}
.dropdown-menu li a {
  padding: 8px 16px !important;
  font-size: 13.5px !important;
  color: var(--pm-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background 0.1s !important;
}
.dropdown-menu li a:hover { background: var(--pm-hover) !important; }
.dropdown-menu li.dividerbar { border-top: 1px solid var(--pm-border) !important; margin: 4px 0 !important; }

/* System dropdown */
#V-SystemDropDown .dropdown-menu { min-width: 200px !important; }
#V-SystemDropDown .accountPlace { font-size: 13px !important; color: var(--pm-text) !important; }

/* ---- Dialogs (generic) ---- */
dialog {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15) !important;
  color: var(--pm-text) !important;
}
dialog > header {
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  padding: 16px 20px !important;
  border-radius: 12px 12px 0 0 !important;
}
dialog > header h3 { font-size: 16px !important; font-weight: 600 !important; }
dialog .modal-body { padding: 20px !important; background: var(--pm-surface) !important; }
dialog > footer { background: var(--pm-surface) !important; border-top: 1px solid var(--pm-border) !important; padding: 12px 20px !important; }

/* ---- Inputs / buttons (global) ---- */
input[type="text"], input[type="email"], input[type="password"], textarea, select {
  font-family: inherit !important;
  border: 1.5px solid var(--pm-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: #fff !important;
  color: var(--pm-text) !important;
  font-size: 14px !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--pm-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important;
}
.btn {
  font-family: inherit !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
}
.btn-primary { background: var(--pm-accent) !important; border-color: var(--pm-accent) !important; color: #fff !important; }
.btn-primary:hover { background: #4338ca !important; border-color: #4338ca !important; }
.btn-danger { border-radius: 8px !important; }
.btn-success { background: #16a34a !important; border-color: #16a34a !important; color: #fff !important; }

/* Checkboxes */
.e-checkbox { color: var(--pm-accent) !important; }

/* ---- Scrollbars ---- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #bdc1c6; }

/* ---- Tabs ---- */
.tabs > label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--pm-muted) !important;
  padding: 10px 16px !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  transition: color 0.15s !important;
}
.tabs > label:hover { color: var(--pm-text) !important; }
.tabs > input[type="radio"]:checked + label {
  color: var(--pm-accent) !important;
  border-bottom-color: var(--pm-accent) !important;
  font-weight: 600 !important;
}

/* ---- Notifications / alerts ---- */
.alert { border-radius: 8px !important; border: none !important; padding: 12px 16px !important; }
.alert-success { background: #f0fdf4 !important; color: #16a34a !important; }
.alert-danger, .alert-error { background: #fef2f2 !important; color: #dc2626 !important; }
.alert-warning { background: #fffbeb !important; color: #d97706 !important; }

/* ---- Attachments ---- */
.attachmentList { padding: 12px !important; }
.attachmentItem {
  background: var(--pm-bg) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background 0.1s !important;
}
.attachmentItem:hover { background: var(--pm-hover) !important; }

/* ---- LOGIN PAGE ---- */
#V-Login #rl-content,
.LoginView {
  background: #0a2a4a url('https://pix.mom/assets/Disney_Cruise_Universal_Castaway_Cay.jpg') center 30% / cover no-repeat fixed !important;
}
#V-Login #rl-content::before,
.LoginView::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom, rgba(5,20,40,0.6), rgba(5,20,40,0.5));
  z-index: 0;
  pointer-events: none;
}
.loginFormWrap {
  position: relative !important;
  z-index: 1 !important;
  background: rgba(255,255,255,0.97) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3) !important;
  border: none !important;
  padding: 2.5rem !important;
  min-width: 340px !important;
}
.loginFormWrap::before {
  content: 'pix.mom mail';
  display: block;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em;
  background: var(--pm-grad); background-size: 200%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-align: center; margin-bottom: 4px;
}
.loginFormWrap::after {
  content: '"Every message is the beginning of a new adventure."';
  display: block;
  font-family: 'Metamorphous', serif; font-style: italic;
  font-size: 0.75rem; color: #8888a0; text-align: center; margin-bottom: 1.75rem;
}
.loginFormWrap .controls { position: relative; margin-bottom: 12px; }
.loginFormWrap input.input-block-level {
  width: 100% !important; padding: 10px 14px !important;
  border: 1.5px solid var(--pm-border) !important; border-radius: 8px !important;
  font-family: inherit !important; font-size: 14px !important; color: var(--pm-text) !important;
  background: #fff !important; outline: none !important;
}
.loginFormWrap input.input-block-level:focus { border-color: #a855f7 !important; box-shadow: 0 0 0 3px rgba(168,85,247,0.12) !important; }
.loginFormWrap .fontastic { display: none !important; }
.buttonLogin {
  width: 100% !important; padding: 11px !important;
  background: var(--pm-grad) !important; background-size: 200% !important;
  border: none !important; border-radius: 10px !important;
  color: #fff !important; font-family: inherit !important; font-size: 14px !important;
  font-weight: 600 !important; cursor: pointer !important; margin-top: 8px !important;
  box-shadow: 0 2px 10px rgba(168,85,247,0.25) !important;
  transition: opacity 0.15s !important;
}
.buttonLogin:hover { opacity: 0.9 !important; }

/* ---- COMPOSE (#V-PopupsCompose) ---- */
#V-PopupsCompose {
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.18) !important;
  border: none !important;
  overflow: hidden !important;
  bottom: 0 !important; top: auto !important;
  margin: 0 24px 0 auto !important;
  width: min(600px, 98vw) !important;
  height: auto !important; max-height: 90vh !important;
}
#V-PopupsCompose > header {
  background: linear-gradient(90deg,#1e1b4b,#3730a3,#4f46e5) !important;
  color: #fff !important;
  padding: 10px 14px !important; min-height: 48px !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
  border-radius: 0 !important;
}
#V-PopupsCompose > header .btn {
  background: transparent !important; border: none !important;
  color: rgba(255,255,255,0.85) !important; border-radius: 6px !important;
  padding: 6px 14px !important; font-size: 13px !important; font-weight: 600 !important; font-family: inherit !important;
}
#V-PopupsCompose > header .btn:hover { background: rgba(255,255,255,0.15) !important; }
#V-PopupsCompose > header .btn-success {
  background: var(--pm-grad-short) !important; background-size: 200% !important;
  border-radius: 20px !important; padding: 7px 20px !important;
  color: #fff !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}
#V-PopupsCompose > header .close, #V-PopupsCompose > header .minimize-custom {
  color: rgba(255,255,255,0.7) !important; font-size: 18px !important; padding: 4px 8px !important;
}
#V-PopupsCompose > header .pull-right { margin-left: auto !important; display: flex !important; align-items: center !important; gap: 2px !important; }
#V-PopupsCompose > header .saved-text { color: rgba(255,255,255,0.6) !important; font-size: 12px !important; font-style: italic !important; }
#V-PopupsCompose .modal-body { background: #fff !important; padding: 0 !important; }
#V-PopupsCompose .modal-body .b-header {
  background: #fff !important; border-bottom: 1px solid var(--pm-border) !important;
  padding: 0 !important; height: auto !important; box-shadow: none !important;
}
#V-PopupsCompose .modal-body table { width: 100% !important; border-collapse: collapse !important; }
#V-PopupsCompose .modal-body table tr { border-bottom: 1px solid #f1f3f4 !important; }
#V-PopupsCompose .modal-body table td:first-child {
  width: 64px !important; padding: 10px 8px 10px 16px !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--pm-muted) !important; text-align: right !important; vertical-align: middle !important;
}
#V-PopupsCompose .modal-body table td:last-child { padding: 4px 12px 4px 8px !important; }
#V-PopupsCompose .modal-body table input[type="text"] {
  border: none !important; outline: none !important; background: transparent !important;
  font-family: inherit !important; font-size: 14px !important; color: var(--pm-text) !important;
  width: 100% !important; padding: 6px 0 !important;
}
#V-PopupsCompose .modal-body table tr:last-child input[type="text"] { font-size: 15px !important; font-weight: 500 !important; }
#V-PopupsCompose .modal-body .b-header > div { border-top: 1px solid #f1f3f4 !important; padding: 4px 10px !important; background: #fafbff !important; }
#V-PopupsCompose .modal-body .b-header .btn { border-radius: 6px !important; color: var(--pm-muted) !important; border: none !important; background: transparent !important; font-size: 15px !important; padding: 6px 8px !important; }
#V-PopupsCompose .modal-body .b-header .btn:hover { background: var(--pm-hover) !important; color: var(--pm-text) !important; }
#V-PopupsCompose .tabs > label { background: #fff !important; color: var(--pm-muted) !important; font-size: 12px !important; font-weight: 600 !important; padding: 8px 16px !important; border-bottom: 2px solid transparent !important; }
#V-PopupsCompose .tabs > label:hover { color: var(--pm-text) !important; }
#V-PopupsCompose .tabs > input[type="radio"]:checked + label { color: var(--pm-accent) !important; border-bottom-color: var(--pm-accent) !important; }
#V-PopupsCompose .textAreaParent { padding: 12px 16px !important; min-height: 200px !important; background: #fff !important; }
#V-PopupsCompose .textAreaParent [contenteditable], #V-PopupsCompose .textAreaParent textarea { font-family: inherit !important; font-size: 14px !important; line-height: 1.6 !important; outline: none !important; border: none !important; }

/* ================================================================
   INBOX & READING AREA — precision overrides
   Using exact Snappymail selectors from DOM inspection
   ================================================================ */

/* ---- Message list second toolbar (search bar row) ---- */
.messageList .second-toolbar {
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  gap: 8px !important;
}
.messageList .second-toolbar .inputSearch {
  border: 1.5px solid var(--pm-border) !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  background: var(--pm-bg) !important;
  color: var(--pm-text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.messageList .second-toolbar .inputSearch:focus {
  border-color: var(--pm-accent) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
  background: #fff !important;
}
.messageList .second-toolbar .checkboxCheckAll {
  color: var(--pm-muted) !important;
  font-size: 16px !important;
  padding: 4px !important;
}

/* ---- Message list rows — tighter, cleaner ---- */
.messageListItem {
  border-left: 4px solid transparent !important;
  border-bottom: 1px solid var(--pm-border) !important;
  line-height: 1 !important;
  padding: 0 !important;
  min-height: 48px !important;
}
/* Row inner layout */
.messageListItem > div + div {
  padding: 0 12px 0 8px !important;
  min-height: 48px !important;
  align-items: center !important;
  gap: 8px !important;
}
/* Checkbox */
.messageListItem .messageCheckbox {
  padding: 0 4px 0 8px !important;
  color: var(--pm-muted) !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 48px !important;
}
/* Sender — bold for unread, 25% width */
.messageListItem .senderParent {
  font-size: 13.5px !important;
  color: var(--pm-text) !important;
  flex: 0 0 200px !important;
  font-weight: 400 !important;
  min-width: 0 !important;
}
/* Subject */
.messageListItem .subjectParent {
  font-size: 13.5px !important;
  color: var(--pm-muted) !important;
  font-weight: 400 !important;
}
/* Unread — bold sender and subject */
.messageListItem.unseen .senderParent {
  font-weight: 700 !important;
  color: var(--pm-text) !important;
}
.messageListItem.unseen .subjectParent {
  font-weight: 600 !important;
  color: var(--pm-text) !important;
}
/* Star / flag */
.messageListItem .flagParent {
  font-size: 14px !important;
  color: var(--pm-border) !important;
  flex-shrink: 0 !important;
  transition: color 0.15s !important;
}
.messageListItem:hover .flagParent { color: var(--pm-muted) !important; }
.messageListItem .flagParent.flagOn,
.messageListItem .flagParent[data-bind*="flagOn"] { color: #f59e0b !important; }
/* Time */
.messageListItem time {
  font-size: 12px !important;
  color: var(--pm-muted) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Thread count pill */
.messageListItem .threads-len {
  background: var(--pm-selected) !important;
  color: var(--pm-accent) !important;
  border-radius: 12px !important;
  padding: 0 7px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
}
/* Attachment icon */
.messageListItem .attachmentParent { color: var(--pm-muted) !important; flex-shrink: 0 !important; }
/* Size */
.messageListItem .sizeParent { font-size: 11px !important; color: var(--pm-muted) !important; flex-shrink: 0 !important; }

/* Hover accent bar */
.messageListItem:hover {
  background: var(--pm-hover) !important;
  border-left-color: var(--pm-accent) !important;
}
.messageListItem.unseen { background: #fff !important; }
.messageListItem.unseen:hover { background: var(--pm-hover) !important; }
.messageListItem.focused { background: var(--pm-selected) !important; border-left-color: var(--pm-accent) !important; }
.messageListItem.checked { border-left-color: #a855f7 !important; background: #faf5ff !important; }

/* ---- Reading area: message header ---- */
.messageView .messageItemHeader {
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  border-radius: 0 !important;
  padding: 20px 20px 16px !important;
}
/* Subject line */
.messageView .messageItemHeader .subjectParent {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--pm-text) !important;
  margin-bottom: 12px !important;
  line-height: 1.3 !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
.messageView .messageItemHeader .subject {
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--pm-text) !important;
}
/* Flag star on message */
.messageView .messageItemHeader .flagParent {
  font-size: 18px !important;
  color: var(--pm-border) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: color 0.15s !important;
}
.messageView .messageItemHeader .flagParent.flagOn { color: #f59e0b !important; }
.messageView .messageItemHeader .flagParent:hover { color: #f59e0b !important; }
/* From line */
.messageView .messageItemHeader .informationShort {
  font-size: 13.5px !important;
  color: var(--pm-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
}
.messageView .messageItemHeader .from {
  font-weight: 500 !important;
  color: var(--pm-text) !important;
}
.messageView .messageItemHeader .from a {
  color: var(--pm-text) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}
.messageView .messageItemHeader .from a:hover { color: var(--pm-accent) !important; }
/* Date */
.messageView .messageItemHeader time.date {
  font-size: 12.5px !important;
  color: var(--pm-muted) !important;
  margin: 4px 0 0 !important;
  display: block !important;
}
/* Full info table */
.messageView .messageItemHeader .informationFull table td:first-child {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--pm-muted) !important;
  text-align: right !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
}

/* ---- Floating reply/action toolbar ---- */
.messageView .message-fixed-button-toolbar {
  top: 16px !important;
  right: 16px !important;
  display: flex !important;
  gap: 4px !important;
}
.messageView .message-fixed-button-toolbar .btn {
  background: var(--pm-surface) !important;
  border: 1px solid var(--pm-border) !important;
  border-radius: 8px !important;
  color: var(--pm-muted) !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  transition: all 0.15s !important;
}
.messageView .message-fixed-button-toolbar .btn:hover {
  background: var(--pm-hover) !important;
  color: var(--pm-text) !important;
  border-color: var(--pm-border-hi) !important;
}
.messageView .message-fixed-button-toolbar .btn-success,
.messageView .message-fixed-button-toolbar .buttonReply {
  background: var(--pm-grad-short) !important;
  background-size: 200% !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 20px !important;
  padding: 6px 18px !important;
}

/* ---- Message body ---- */
#messageItem {
  flex: 1 !important;
  overflow-y: auto !important;
}
.b-text-part {
  padding: 24px 28px !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  color: #202124 !important;
  background: var(--pm-surface) !important;
  max-width: 860px !important;
}
/* Quoted text */
.b-text-part blockquote {
  border-left: 3px solid var(--pm-border) !important;
  margin: 12px 0 !important;
  padding: 4px 16px !important;
  color: var(--pm-muted) !important;
  font-size: 13.5px !important;
}
/* Links */
.b-text-part a { color: var(--pm-accent) !important; }

/* ---- Top toolbar on message view ---- */
.messageView .top-toolbar {
  background: var(--pm-surface) !important;
  border-bottom: 1px solid var(--pm-border) !important;
  padding: 6px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.messageView .top-toolbar .btn {
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  color: var(--pm-muted) !important;
  padding: 6px 10px !important;
  font-size: 15px !important;
  transition: background 0.1s !important;
}
.messageView .top-toolbar .btn:hover { background: var(--pm-hover) !important; color: var(--pm-text) !important; }

/* ---- Empty state ---- */
.b-message-view-desc {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  color: var(--pm-muted) !important;
  font-size: 14px !important;
  text-align: center !important;
  padding: 40px !important;
}