.email-page { padding: 20px !important; background: #f5f7fb; }
.email-app-shell { min-height: calc(100vh - 104px); gap: 18px; }
.email-sidebar { max-width: 300px; max-height: calc(100vh - 104px); flex: 0 0 300px; border: 1px solid #e7eaf0; border-radius: 16px; box-shadow: 0 8px 28px rgba(15,23,42,.05); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.email-sidebar::-webkit-scrollbar { width: 7px; }
.email-sidebar::-webkit-scrollbar-track { background: transparent; }
.email-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
.email-profile-card { background: linear-gradient(135deg,#f7f8ff,#fff); border: 1px solid #e7e9ff; border-radius: 12px; }
.email-compose-button { min-height: 44px; border-radius: 10px; font-weight: 600; box-shadow: 0 7px 16px rgba(var(--bs-primary-rgb),.18); }
.email-folder { color: var(--bs-body-color); text-align: left; min-height: 38px; transition: all .15s ease; }
.email-folder:hover { background: #f6f7fb !important; transform: translateX(2px); }
.email-folder.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.09) !important; font-weight: 600; }
.mail-notifications { min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 104px); border: 1px solid #e7eaf0; border-radius: 16px; box-shadow: 0 8px 28px rgba(15,23,42,.05); overflow: hidden; }
.email-toolbar { background: rgba(255,255,255,.96); }
.email-summary-filter { border: 1px solid #e4e7ec; background: #fff; color: #667085; border-radius: 999px; padding: .25rem .65rem; font-size: .78rem; transition: all .15s ease; }
.email-summary-filter:hover, .email-summary-filter.active { border-color: rgba(var(--bs-primary-rgb),.35); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb),.07); }
.email-account-card { border: 1px solid #e6e9ef; background: #fff; border-radius: 10px; padding: .65rem; transition: border-color .15s ease, box-shadow .15s ease; }
.email-account-card:hover, .email-account-card.selected { border-color: rgba(var(--bs-primary-rgb),.45); box-shadow: 0 4px 12px rgba(15,23,42,.07); }
.email-account-card .account-select { min-width: 0; border: 0; background: transparent; padding: 0; text-align: left; }
.email-account-status { color: #039855; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.email-account-status.error, .account-error-help { color: #d92d20; }
.mails-list { overflow-y: auto; flex: 1 1 auto; min-height: 220px; }
.email-row { position: relative; cursor: pointer; border-color: #eef0f4; transition: background-color .15s ease; }
.email-row:hover { background: #fafbff; }
.email-row:has(.dropdown-menu.show) { z-index: 30; }
.email-row .dropdown-menu { min-width: 180px; z-index: 1090; background: #fff; border-color: #e4e7ec; box-shadow: 0 12px 30px rgba(15,23,42,.16); }
.email-row.unread { background: rgba(var(--bs-primary-rgb), .045); border-left: 3px solid var(--bs-primary); }
.email-row.unread h6, .email-row.unread .fw-semibold { font-weight: 700 !important; }
.email-account-badge { display: inline-flex; align-items: center; max-width: 190px; font-size: .68rem; color: #667085; background: #f2f4f7; border-radius: 999px; padding: .12rem .45rem; }
.email-icon-button { border: 0; background: transparent; padding: .25rem; color: var(--bs-secondary-color); }
.min-width-0 { min-width: 0; }
.email-status { text-align: center; }
.email-skeleton-row { display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 16px; border-bottom: 1px solid #eef0f4; }
.email-skeleton-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; }
.email-skeleton-copy { display: grid; gap: 8px; width: min(620px, 75%); }
.email-skeleton-copy i { display: block; height: 10px; border-radius: 999px; }
.email-skeleton-copy i:nth-child(1) { width: 36%; }
.email-skeleton-copy i:nth-child(2) { width: 68%; }
.email-skeleton-copy i:nth-child(3) { width: 88%; }
.email-skeleton-avatar, .email-skeleton-copy i { background: linear-gradient(90deg,#eef1f5 25%,#f8f9fb 50%,#eef1f5 75%); background-size: 200% 100%; animation: email-skeleton-shimmer 1.2s ease-in-out infinite; }
@keyframes email-skeleton-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .email-skeleton-avatar, .email-skeleton-copy i { animation: none; } }
.recipient-suggestions { position: absolute; left: 1rem; right: 1rem; z-index: 1085; max-height: 230px; overflow-y: auto; box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
.email-detail-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; min-height: 120px; }
.email-detail-body:has(.email-html-viewer) { white-space: normal; overflow-wrap: normal; }
.email-html-viewer { display: block; width: 100%; min-height: 520px; border: 0; background: #fff; }
.email-toast { position: fixed; top: 80px; right: 22px; z-index: 2000; max-width: 420px; }
#compose-view { z-index: 1060; }
#compose-view .compose-view { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 90px); overflow-y: auto; margin: 0 18px 18px 0; border-radius: 16px !important; box-shadow: 0 24px 70px rgba(15,23,42,.28); }
#compose-view .compose-header { background: linear-gradient(135deg,#111827,#344054) !important; }
#compose-view .form-control, #compose-view .form-select { border-color: #e4e7ec; border-radius: 9px; }
@media (max-width: 767.98px) {
  .email-page { padding: 10px !important; }
  .email-app-shell { gap: 10px; }
  .email-sidebar { max-width: none; max-height: 70vh; flex-basis: auto; }
  .mail-notifications { max-height: none; min-height: 60vh; }
  #compose-view .compose-view { margin: 0; width: 100%; max-height: 92vh; }
}

:root[data-bs-theme="dark"] .email-page {
  color: var(--bs-body-color);
  background: var(--bs-body-bg);
}
:root[data-bs-theme="dark"] .email-sidebar,
:root[data-bs-theme="dark"] .mail-notifications,
:root[data-bs-theme="dark"] .email-account-card,
:root[data-bs-theme="dark"] .email-row .dropdown-menu,
:root[data-bs-theme="dark"] .email-profile-card,
:root[data-bs-theme="dark"] .email-toolbar,
:root[data-bs-theme="dark"] .email-page .card,
:root[data-bs-theme="dark"] .email-page .modal-content {
  color: var(--bs-body-color);
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}
:root[data-bs-theme="dark"] .email-page .email-profile-card {
  background: linear-gradient(135deg, var(--bs-secondary-bg), var(--bs-tertiary-bg)) !important;
}
:root[data-bs-theme="dark"] .email-folder:hover,
:root[data-bs-theme="dark"] .email-row:hover {
  background: var(--bs-secondary-bg) !important;
}
:root[data-bs-theme="dark"] .email-summary-filter,
:root[data-bs-theme="dark"] .email-account-badge {
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}
:root[data-bs-theme="dark"] .email-page .form-control,
:root[data-bs-theme="dark"] .email-page .form-select,
:root[data-bs-theme="dark"] .email-page textarea {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}
:root[data-bs-theme="dark"] .email-page .form-control::placeholder,
:root[data-bs-theme="dark"] .email-page .text-muted,
:root[data-bs-theme="dark"] .email-page .text-secondary {
  color: var(--bs-secondary-color) !important;
}
:root[data-bs-theme="dark"] .email-html-viewer { background: var(--bs-body-bg); }
@media (max-width: 575.98px) {
  .email-page { padding: 8px !important; }
  .email-sidebar { width: 100%; }
  .email-page .email-toolbar { flex-wrap: wrap; gap: 8px; }
}