@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   PACT MAIL — DISTILLED BUBBLY DESIGN SYSTEM
   - Obsidian Dark Palette (#08080c canvas, #0f0f15 surface, #0a0a0f input)
   - Perfectly centered Desktop Dual-Stage Layout (1100px max width)
   - 44px+ Hit Floors (48px inputs and buttons)
   - Two-Tier Spacing Scale (8px label-to-input, 16px row-to-row, 24px group)
   - High-contrast text & bubbly pill/capsule radii (14px-24px)
   ========================================================================== */

:root {
  --canvas: #08080c;
  --surface: #0f0f15;
  --surface-hover: #151520;
  --surface-active: #1c1c2a;
  --surface-card: #12121a;
  --input: #0a0a0f;
  --input-border: #1e1e2d;
  --input-focus: #38bdf8;
  --border: #1a1a24;
  --border-subtle: #14141d;
  --action: #ededed;
  --action-hover: #ffffff;
  --action-text: #08080c;
  --accent: #38bdf8;
  --accent-soft: rgba(56, 189, 248, 0.12);
  --text-primary: #ededed;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --danger: #f87171;
  --success: #34d399;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Base resets & typography */
html, body {
  background-color: var(--canvas) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Modern slim rounded scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e1e2c;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2a2a3e;
}

/* ==========================================================================
   1. LOGIN PAGE — CENTERED DUAL-STAGE CONTAINER
   ========================================================================== */

body.task-login {
  background: var(--canvas) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 40px 24px !important;
  box-sizing: border-box !important;
}

body.task-login #layout {
  width: 100% !important;
  max-width: 1100px !important;
  margin: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
}

body.task-login #layout-content {
  width: 100% !important;
  max-width: 1100px !important;
  margin: auto !important;
  background: transparent !important;
  border: none !important;
  display: block !important;
  text-align: left !important;
  padding: 0 !important;
  overflow: visible !important;
  position: static !important;
}

/* Dual-Stage Grid Container */
.pact-stage-container {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 48px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

@media (min-width: 960px) {
  .pact-stage-container {
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr) !important;
    gap: 64px !important;
  }
}

/* Left Column: Brand & Features Stage */
.pact-brand-stage {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  text-align: left !important;
}

.pact-brand-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  width: fit-content !important;
}

.pact-brand-badge .pact-badge-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background: var(--accent) !important;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.6) !important;
}

.pact-brand-badge .pact-badge-text {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: 0.02em !important;
  font-family: var(--font-mono) !important;
}

.pact-brand-logo-wrap {
  margin-top: 4px !important;
  margin-bottom: 2px !important;
}

.pact-brand-logo-img {
  height: 48px !important;
  width: auto !important;
}

.pact-hero-heading {
  font-size: 38px !important;
  line-height: 1.18 !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.pact-hero-desc {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  max-width: 490px !important;
}

.pact-features-cluster {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 10px !important;
}

.pact-feature-pill {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  padding: 13px 18px !important;
  transition: all 0.2s ease !important;
}

.pact-feature-pill:hover {
  border-color: #242436 !important;
  background: var(--surface-hover) !important;
}

.pact-feature-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

.pact-feature-text {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.45 !important;
}

.pact-feature-text strong {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
}

/* Right Column: Focused Bubbly Card */
.pact-auth-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  padding: 40px 36px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  text-align: left !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
  position: relative !important;
}

.pact-card-header {
  margin-bottom: 26px !important;
  text-align: left !important;
}

.pact-card-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin: 0 0 6px 0 !important;
}

.pact-card-subtitle {
  font-size: 13.5px !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
}

/* Hide default legacy logo and voice h1 */
body.task-login #layout-content > img#logo,
body.task-login #layout-content > h1.voice {
  display: none !important;
}

/* Reset Elastic's hardcoded top: 20vh positioning on #login-form */
body.task-login form#login-form {
  top: 0 !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  text-align: left !important;
}

body.task-login form#login-form table,
body.task-login form#login-form tbody {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

body.task-login form#login-form tr.form-group {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Un-hide labels and style with high-contrast text (Two-Tier Spacing 8px) */
body.task-login form#login-form td.title {
  display: block !important;
  padding: 0 !important;
  text-align: left !important;
}

body.task-login form#login-form td.title label {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
  text-align: left !important;
}

body.task-login form#login-form td.input {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Remove decorative input prepends (Anti-pattern 11) */
body.task-login .input-group-prepend {
  display: none !important;
}

body.task-login .input.input-group {
  display: block !important;
  width: 100% !important;
}

/* 44px+ hit floor inputs */
body.task-login input.form-control,
input.form-control {
  height: 48px !important;
  background: var(--input) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  transition: all 0.15s ease-in-out !important;
}

body.task-login input.form-control:focus,
input.form-control:focus {
  background: #0d0d14 !important;
  border-color: var(--input-focus) !important;
  outline: 2px solid rgba(56, 189, 248, 0.3) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

body.task-login input.form-control::placeholder {
  color: var(--text-muted) !important;
}

/* Submit button — 44px+ hit floor, sentence case "Sign in" */
body.task-login .formbuttons {
  margin: 10px 0 0 0 !important;
  padding: 0 !important;
  position: static !important;
}

body.task-login button#rcmloginsubmit,
body.task-login .button.mainaction.submit {
  height: 48px !important;
  width: 100% !important;
  background: var(--action) !important;
  color: var(--action-text) !important;
  border: none !important;
  border-radius: 14px !important;
  font-size: 0 !important; /* Hide original uppercase "LOGIN" text */
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  text-transform: none !important;
}

body.task-login button#rcmloginsubmit::after {
  content: 'Sign in' !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  color: #08080c !important;
}

body.task-login button#rcmloginsubmit:hover {
  background: var(--action-hover) !important;
  transform: translateY(-1px);
}

body.task-login button#rcmloginsubmit:hover::after {
  color: #000000 !important;
}

body.task-login button#rcmloginsubmit:active {
  transform: translateY(0);
}

/* Card footer */
body.task-login #login-footer {
  margin-top: 24px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--border) !important;
  text-align: center !important;
  font-size: 11.5px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  position: static !important;
  background: transparent !important;
}

/* Message stack alerts */
#messagestack div {
  border-radius: 14px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 12px 18px !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

#messagestack div.error,
#messagestack div.warning {
  background: #180d0d !important;
  border-color: #451a1a !important;
  color: #fca5a5 !important;
}

#messagestack div.confirmation,
#messagestack div.notice {
  background: #0b1712 !important;
  border-color: #16402d !important;
  color: #6ee7b7 !important;
}

/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
/* ==========================================================================
   2. AUTHENTICATED WEBMAIL INTERFACE (MAIL, COMPOSE, SETTINGS)
   Distilled High-End UI Standards: Tier-1 (Linear, Vercel, Clerk, Stripe)
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.0 Screen-Reader & Hidden Resets (Prevent All Leakage)
   -------------------------------------------------------------------------- */
.voice,
span.voice,
h1.voice,
h2.voice,
h3.voice,
h4.voice,
label.voice,
.hidden,
.d-none,
#searchmenu:not(.show),
#dragmessage-menu:not(.popover),
#mailboxoptions-menu:not(.popover),
#listselect-menu:not(.popover),
#threadselect-menu:not(.popover),
#listoptions-menu:not(.popover) {
  display: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* --------------------------------------------------------------------------
   2.1 Main Layout Grid & Containers
   -------------------------------------------------------------------------- */
#layout {
  background-color: var(--canvas) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  overflow: hidden !important;
  display: flex !important;
  height: 100vh !important;
  width: 100vw !important;
  position: relative !important;
}

/* --------------------------------------------------------------------------
   2.2 Pane 1: Navigation Dock (Far Left #layout-menu)
   -------------------------------------------------------------------------- */
#layout-menu {
  position: relative !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  flex: 0 0 68px !important;
  height: 100vh !important;
  background-color: #060b13 !important;
  border-right: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 30 !important;
  overflow: hidden !important;
}

#layout-menu .popover-header {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#layout-menu .popover-header img#logo {
  height: 36px !important;
  width: 36px !important;
  object-fit: contain !important;
  border-radius: 10px !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2) !important;
}

#layout-menu .popover-header a.button.cancel {
  display: none !important;
}

#taskmenu.menu.toolbar {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 56px) !important;
  padding: 12px 0 16px 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  justify-content: space-between !important;
  background: transparent !important;
}

#taskmenu .action-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 8px !important;
  width: 100% !important;
}

/* Compose Action Button - Prominent High-Contrast Bubbly Pill */
#taskmenu a.compose,
#taskmenu .action-buttons a {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 14px !important;
  background: var(--accent) !important;
  color: #060b13 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25) !important;
  transition: all 0.15s ease !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: none !important;
}

#taskmenu a.compose:hover,
#taskmenu .action-buttons a:hover {
  background: #7dd3fc !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.4) !important;
}

#taskmenu a.compose::before,
#taskmenu .action-buttons a::before {
  font-size: 16px !important;
  line-height: 1 !important;
  color: #060b13 !important;
  margin: 0 !important;
}

#taskmenu a.compose span.inner,
#taskmenu .action-buttons a span.inner {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #060b13 !important;
  margin-top: 2px !important;
  letter-spacing: -0.01em !important;
}

/* Navigation Icons: Mail, Contacts, Settings */
#taskmenu a.mail,
#taskmenu a.contacts,
#taskmenu a.settings,
#taskmenu > a {
  width: 48px !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 12px !important;
  margin: 4px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#taskmenu a.mail::before,
#taskmenu a.contacts::before,
#taskmenu a.settings::before,
#taskmenu > a::before {
  font-size: 15px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#taskmenu a.mail span.inner,
#taskmenu a.contacts span.inner,
#taskmenu a.settings span.inner,
#taskmenu > a span.inner {
  font-size: 9.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
}

#taskmenu a.mail:hover,
#taskmenu a.contacts:hover,
#taskmenu a.settings:hover,
#taskmenu > a:hover {
  background: var(--surface-hover) !important;
  color: #ffffff !important;
}

#taskmenu a.mail.selected,
#taskmenu a.contacts.selected,
#taskmenu a.settings.selected,
#taskmenu a.selected,
#taskmenu > a.selected {
  background: var(--surface-active) !important;
  color: var(--accent) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
}

#taskmenu a.mail.selected::before,
#taskmenu a.contacts.selected::before,
#taskmenu a.settings.selected::before,
#taskmenu a.selected::before {
  color: var(--accent) !important;
}

/* Bottom Actions: Theme, About, Logout STRICTLY LOCKED TO DOCK */
#taskmenu .special-buttons {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  margin-top: auto !important;
  width: 100% !important;
  background: transparent !important;
  bottom: auto !important;
  left: auto !important;
}

#taskmenu .special-buttons a {
  width: 44px !important;
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 10px !important;
  margin: 2px auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

#taskmenu .special-buttons a::before {
  font-size: 14px !important;
  line-height: 1 !important;
}

#taskmenu .special-buttons a span.inner {
  font-size: 8.5px !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

#taskmenu .special-buttons a:hover {
  background: var(--surface-hover) !important;
  color: #ededed !important;
}

#taskmenu .special-buttons a.logout:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.2) !important;
}

/* --------------------------------------------------------------------------
   2.3 Pane 2: Folder Tree Column (#layout-sidebar)
   -------------------------------------------------------------------------- */
#layout-sidebar {
  width: 220px !important;
  min-width: 200px !important;
  max-width: 260px !important;
  flex: 0 0 220px !important;
  height: 100vh !important;
  background-color: #070d18 !important;
  border-right: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 20 !important;
  overflow: hidden !important;
}

#layout-sidebar > div.header {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  line-height: normal !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #070d18 !important;
  border-bottom: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#layout-sidebar > div.header a.back-list-button {
  display: none !important;
}

/* User identity in header with user avatar badge */
#layout-sidebar > div.header .header-title.username {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 155px !important;
}

#layout-sidebar > div.header .header-title.username::before {
  content: "" !important;
  display: inline-block !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  background: rgba(56, 189, 248, 0.15) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 14px !important;
  flex-shrink: 0 !important;
}

#layout-sidebar > div.header a.sidebar-menu {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-secondary) !important;
  transition: all 0.15s ease !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

#layout-sidebar > div.header a.sidebar-menu:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

/* Folder Scroller Container */
#folderlist-content {
  flex: 1 1 auto !important;
  padding: 10px 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

#mailboxlist,
.treelist.listing.folderlist {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#mailboxlist li,
.treelist.listing.folderlist li {
  margin-bottom: 3px !important;
  position: relative !important;
  list-style: none !important;
}

/* Bubbly Folder Item Button */
#mailboxlist li a,
.treelist.listing.folderlist li a {
  display: flex !important;
  align-items: center !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

#mailboxlist li a::before,
.treelist.listing.folderlist li a::before {
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--text-muted) !important;
  transition: color 0.15s ease !important;
}

#mailboxlist li a:hover,
.treelist.listing.folderlist li a:hover {
  background: var(--surface-hover) !important;
  color: #f1f5f9 !important;
}

#mailboxlist li a:hover::before,
.treelist.listing.folderlist li a:hover::before {
  color: var(--text-secondary) !important;
}

/* Selected Folder Item - Tier-1 Cyan Accent State */
#mailboxlist li.selected a,
.treelist.listing.folderlist li.selected a {
  background: var(--surface-active) !important;
  color: var(--accent) !important;
  border-color: rgba(56, 189, 248, 0.25) !important;
  font-weight: 600 !important;
}

#mailboxlist li.selected a::before,
.treelist.listing.folderlist li.selected a::before {
  color: var(--accent) !important;
}

/* Bubbly Capsule Unread Count Badge */
#mailboxlist .unreadcount,
.treelist.listing.folderlist .unreadcount {
  margin-left: auto !important;
  background: var(--accent) !important;
  color: #060b13 !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 9999px !important;
  line-height: 1.3 !important;
}

/* Sidebar Footer & Storage Quota Widget */
#layout-sidebar > div.footer {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  background: #070d18 !important;
  border-top: 1px solid var(--border-subtle) !important;
}

#quotadisplay {
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* --------------------------------------------------------------------------
   2.4 Pane 3: Message List Column (#layout-list)
   -------------------------------------------------------------------------- */
#layout-list {
  width: 330px !important;
  min-width: 290px !important;
  max-width: 420px !important;
  flex: 0 0 330px !important;
  height: 100vh !important;
  background-color: #090f1e !important;
  border-right: 1px solid var(--border) !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 15 !important;
  overflow: hidden !important;
}

/* 2.4.1 Fix Messagelist Header & Action Toolbar */
#messagelist-header,
#layout-list > div.header {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  line-height: normal !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #090f1e !important;
  border-bottom: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  gap: 6px !important;
}

/* Hide responsive toggle buttons and back-arrows on desktop */
#messagelist-header .task-menu-button,
#messagelist-header .back-sidebar-button,
#messagelist-header .toolbar-menu-button,
#messagelist-header a.button.task-menu-button,
#messagelist-header a.button.back-sidebar-button,
#messagelist-header a.button.toolbar-menu-button,
#layout-list .header a.back-list-button {
  display: none !important;
}

#messagelist-header .header-title {
  display: none !important;
}

#messagelist-header .toolbar.menu {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;
  position: static !important;
  float: none !important;
}

/* Bubbly Toolbar Buttons (Select, Threads, Options, Refresh) */
#messagelist-header .toolbar a,
#messagelist-header a.refresh,
#messagelist-header a.select,
#messagelist-header a.threads,
#messagelist-header a.options,
#messagelist-header a.button {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  line-height: 32px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#messagelist-header .toolbar a::before,
#messagelist-header a.refresh::before,
#messagelist-header a::before {
  font-size: 12px !important;
  line-height: 1 !important;
  margin: 0 !important;
  display: inline-block !important;
}

#messagelist-header .toolbar a:hover,
#messagelist-header a.refresh:hover,
#messagelist-header a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

/* 2.4.2 Search Bar */
#mailsearchform,
.searchbar.menu {
  padding: 8px 12px !important;
  background: #090f1e !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  position: relative !important;
  box-sizing: border-box !important;
}

#mailsearchform input,
#quicksearchbox {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 10px !important;
  background: #060a14 !important;
  border: 1px solid #162034 !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  padding: 0 34px 0 12px !important;
  transition: all 0.15s ease !important;
  box-sizing: border-box !important;
}

#mailsearchform input:focus,
#quicksearchbox:focus {
  border-color: var(--accent) !important;
  background: #080d1a !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.15) !important;
}

/* 2.4.3 Message Scroller & Cards */
#messagelist-content {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 6px 0 !important;
}

#messagelist {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
  margin: 0 !important;
}

#messagelist thead,
#messagelist thead tr,
#messagelist thead th {
  display: none !important;
  height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Bubbly Card Message Row */
#messagelist tbody tr {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 3px 8px !important;
  padding: 10px 14px 10px 26px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-subtle) !important;
  background: rgba(13, 20, 36, 0.6) !important;
  cursor: pointer !important;
  position: relative !important;
  box-sizing: border-box !important;
  transition: all 0.12s ease !important;
}

#messagelist tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px) !important;
}

/* Hide non-subject cells */
#messagelist tbody tr td:not(.subject) {
  display: none !important;
}

#messagelist tbody tr td {
  border: none !important;
  padding: 0 !important;
  display: block !important;
}

/* Glowing Cyan Unread Indicator Dot */
#messagelist tbody tr.unread {
  background: rgba(56, 189, 248, 0.06) !important;
  border-color: rgba(56, 189, 248, 0.18) !important;
}

#messagelist tbody tr.unread::before {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  top: 18px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent) !important;
}

/* Selected Message Row */
#messagelist tbody tr.selected {
  background: var(--surface-active) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
}

#messagelist tbody tr.selected::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  bottom: 6px !important;
  width: 3px !important;
  border-radius: 3px !important;
  background: var(--accent) !important;
}

/* Subject Block */
#messagelist tbody tr td.subject {
  width: 100% !important;
  display: block !important;
  position: relative !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Line 1: Sender Name */
#messagelist tbody tr td.subject span.fromto {
  display: block !important;
  max-width: calc(100% - 85px) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  line-height: 1.3 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-bottom: 3px !important;
}

#messagelist tbody tr.unread td.subject span.fromto {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Line 1 Right: Date Stamp */
#messagelist tbody tr td.subject span.date {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

#messagelist tbody tr.unread td.subject span.date {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Always hide size "3 KB" */
#messagelist tbody tr td.subject span.size {
  display: none !important;
}

/* Hide Elastic duplicate unread dot */
#messagelist td.subject span.msgicon.status:not(.replied):not(.forwarded)::before {
  display: none !important;
}

#messagelist td.subject span.msgicon.status.replied::before,
#messagelist td.subject span.msgicon.status.forwarded::before {
  font-size: 11px !important;
  color: var(--accent) !important;
  margin-right: 5px !important;
}

/* Line 2: Subject Snippet */
#messagelist tbody tr td.subject span.subject {
  display: block !important;
  width: 100% !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

#messagelist tbody tr.unread td.subject span.subject {
  color: #cbd5e1 !important;
  font-weight: 500 !important;
}

/* 2.4.4 Pagination Footer */
#layout-list .pagenav,
#layout-list > div.footer {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #070d1a !important;
  border-top: 1px solid var(--border-subtle) !important;
  font-size: 11.5px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  box-sizing: border-box !important;
}

#layout-list .pagenav a.button,
#layout-list .pagenav a {
  height: 28px !important;
  width: 28px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--text-secondary) !important;
  text-decoration: none !important;
}

#layout-list .pagenav a.button:hover,
#layout-list .pagenav a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   2.5 Pane 4: Message Preview / Reading Pane (#layout-content)
   -------------------------------------------------------------------------- */
#layout-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100vh !important;
  background-color: var(--canvas) !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

/* 2.5.1 Reading Pane Toolbar */
#layout-content > div.header {
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  line-height: normal !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #080e1b !important;
  border-bottom: 1px solid var(--border) !important;
  box-sizing: border-box !important;
  gap: 8px !important;
}

#layout-content > div.header .header-title {
  display: none !important;
}

#mailtoolbar,
#layout-content > div.header .toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: auto !important;
  line-height: normal !important;
}

/* Purge duplicated message controls from the reading pane header */
#layout-content > div.header a.select,
#layout-content > div.header a.threads,
#layout-content > div.header a.options,
#layout-content > div.header a.refresh,
#layout-content > div.header a.back-list-button,
#layout-content > div.header a.toolbar-menu-button {
  display: none !important;
}

/* Bubbly Reading Action Buttons (Reply, Reply All, Forward, Delete, Mark, More) */
#mailtoolbar a,
#mailtoolbar .dropbutton a,
#layout-content > div.header .toolbar a,
#layout-content > div.header a.button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #cbd5e1 !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  line-height: 34px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

#mailtoolbar a::before,
#layout-content > div.header .toolbar a::before,
#layout-content > div.header a.button::before {
  font-size: 13px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#mailtoolbar a:hover,
#layout-content > div.header .toolbar a:hover,
#layout-content > div.header a.button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(56, 189, 248, 0.3) !important;
}

#mailtoolbar a.delete:hover,
#layout-content > div.header .toolbar a.delete:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.25) !important;
}

#mailtoolbar .dropbutton {
  display: inline-flex !important;
  align-items: center !important;
}

#mailtoolbar .dropbutton a.dropdown {
  padding: 0 6px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: none !important;
}

#mailtoolbar .dropbutton a:not(.dropdown) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 2.5.2 Iframe Wrapper */
#layout-content .iframe-wrapper {
  flex: 1 1 auto !important;
  position: relative !important;
  height: calc(100% - 56px) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background-color: var(--canvas) !important;
  background-image: none !important;
}

#messagecontframe {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background-color: var(--canvas) !important;
  background-image: none !important;
}

/* 2.5.3 Rich Message View (Inside iframe & standalone preview) */
html.iframe,
html.iframe body {
  background-color: var(--canvas) !important;
  color: #f1f5f9 !important;
  font-family: var(--font-sans) !important;
}

#message-header {
  padding: 18px 22px !important;
  margin: 16px !important;
  background: #0c1222 !important;
  border-radius: 14px !important;
  border: 1px solid #162036 !important;
}

#message-header h2.subject {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
  line-height: 1.35 !important;
}

#message-header .header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#message-header .contactphoto {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#message-header .header-summary {
  font-size: 13.5px !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
}

#message-header .header-headers {
  font-size: 11.5px !important;
  font-family: var(--font-mono) !important;
  color: var(--text-muted) !important;
  margin-top: 3px !important;
}

#message-header a.headers-summary,
#message-header a.headers-all {
  color: var(--accent) !important;
  font-size: 11.5px !important;
  text-decoration: none !important;
  margin-left: 8px !important;
}

#message-content {
  padding: 8px 20px !important;
}

#messagebody {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #e2e8f0 !important;
  background: transparent !important;
}

/* Remote Objects / Images Blocked Banner */
#remote-objects-message,
.rcmail-inline-message,
div.notice.warning {
  background: rgba(56, 189, 248, 0.08) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  margin: 12px 16px !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

#remote-objects-message a,
.rcmail-inline-message button {
  background: var(--accent) !important;
  color: #060b13 !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

#remote-objects-message a:hover,
.rcmail-inline-message button:hover {
  background: #7dd3fc !important;
}

/* Attachment List */
#attachment-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 0 !important;
  margin: 0 16px 16px 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  list-style: none !important;
}

#attachment-list li {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 6px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#attachment-list li a {
  color: #f1f5f9 !important;
  text-decoration: none !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   2.6 Compose View Overhaul
   -------------------------------------------------------------------------- */
#compose-contacts,
#compose-container {
  background: var(--canvas) !important;
}

.compose-headers {
  background: #0a0f1d !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  margin: 16px !important;
  padding: 16px !important;
}

.compose-headers .form-group input,
.compose-headers .form-group textarea {
  background: #060a14 !important;
  border: 1px solid #162034 !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  font-size: 13.5px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
}

.compose-headers .form-group input:focus,
.compose-headers .form-group textarea:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* Primary Send Button in Compose Toolbar */
.toolbar a.button.send,
button.btn.btn-primary.send {
  background: var(--accent) !important;
  color: #060b13 !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  height: 38px !important;
  padding: 0 18px !important;
  border: none !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
}

.toolbar a.button.send:hover,
button.btn.btn-primary.send:hover {
  background: #7dd3fc !important;
}

/* --------------------------------------------------------------------------
   2.7 Bubbly Popups, Dropdown Menus, & Dialogs
   -------------------------------------------------------------------------- */
.popupmenu,
.dropdown-menu {
  background: #0d1424 !important;
  border: 1px solid #1e293b !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6) !important;
  padding: 6px !important;
}

.popupmenu li a,
.dropdown-menu a {
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  transition: all 0.15s ease !important;
  display: block !important;
}

.popupmenu li a:hover,
.dropdown-menu a:hover {
  background: var(--surface-active) !important;
  color: var(--text-primary) !important;
}

.ui-dialog {
  background: #0d1424 !important;
  border: 1px solid #1e293b !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden !important;
}

.ui-dialog .ui-dialog-titlebar {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}

.ui-dialog .ui-dialog-content {
  background: transparent !important;
  color: var(--text-secondary) !important;
  padding: 20px !important;
}

.ui-dialog .ui-dialog-buttonpane {
  background: transparent !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 20px !important;
}

.ui-dialog .ui-dialog-buttonpane button {
  border-radius: 10px !important;
  height: 38px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}