.mail-setup {
  margin-bottom: var(--space-5);
}

.mail-connect-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.8fr) auto;
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-4);
}

.mail-connect-field {
  display: grid;
  gap: var(--space-2);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.mail-status {
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.mail-status.is-ok { color: var(--color-success); }
.mail-status.is-error { color: var(--color-error); }

.mail-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.mail-actions { display: flex; gap: var(--space-2); }

.mail-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
  gap: var(--space-4);
  min-height: 480px;
}

.mail-inbox, .mail-reader {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.mail-inbox { display: flex; flex-direction: column; }

.mail-message-row {
  display: flex;
  width: 100%;
  gap: var(--space-3);
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  background: transparent;
  color: var(--color-text);
}

.mail-message-row:hover, .mail-message-row.is-selected { background: var(--color-primary-soft); }
.mail-message-row.is-unread { border-left: 3px solid var(--color-primary); }
.mail-message-main { display: grid; gap: 4px; min-width: 0; }
.mail-message-main strong, .mail-message-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-main span, .mail-message-row time { color: var(--color-text-secondary); font-size: 0.78rem; }

.mail-reader { padding: var(--space-5); }
.mail-reader-content h2 { margin: 0 0 var(--space-3); font-size: 1.15rem; }
.mail-reader-meta { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-secondary); font-size: 0.8rem; }
.mail-reader-to { color: var(--color-text-secondary); font-size: 0.8rem; }
.mail-reader-content pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; margin-top: var(--space-5); }
.mail-reader-empty { height: 100%; min-height: 300px; display: grid; place-content: center; justify-items: center; gap: var(--space-3); color: var(--color-text-secondary); }
.mail-reader-empty svg { width: 42px; height: 42px; opacity: 0.45; }

@media (max-width: 760px) {
  .mail-connect-form, .mail-workspace { grid-template-columns: 1fr; }
  .mail-workspace { min-height: 0; }
  .mail-reader { min-height: 300px; }
}

.mail-folders { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 22px; }
.mail-folders .btn[aria-pressed="true"] { background: var(--color-primary-soft); color: var(--color-text); box-shadow: inset 0 -2px var(--color-primary); }
.mail-feedback { font-size: 13px; line-height: 1.6; padding: 12px 0; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.mail-reader-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--color-border); }
.mail-reader-actions span { font-size: 12px; color: var(--color-text-secondary); }
.mail-compose-dialog { width: min(720px,calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 28px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface); color: var(--color-text); box-shadow: 0 24px 90px #00000033; overflow-y: auto; }
.mail-compose-dialog::backdrop { background: #17243B55; backdrop-filter: blur(5px); }
[data-theme="dark"] .mail-compose-dialog::backdrop { background: #050A1480; }
.mail-compose-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.mail-compose-heading h2 { font-size: 23px; letter-spacing: -.6px; }
.mail-compose-heading .btn { font-size: 24px; }
.mail-compose-dialog form { display: grid; gap: 14px; }
.mail-compose-field { display: grid; gap: 7px; font-size: 12px; color: var(--color-text-secondary); }
.mail-compose-field .input { width: 100%; min-height: 44px; border-radius: 10px; font-size: 14px; }
.mail-compose-dialog details { display: grid; gap: 12px; }
.mail-compose-dialog summary { cursor: pointer; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px; }
.mail-compose-dialog details .mail-compose-field + .mail-compose-field { margin-top: 12px; }
.mail-compose-body textarea { min-height: 170px; height: clamp(170px,28dvh,260px); resize: vertical; font: inherit; line-height: 1.6; color: var(--color-text); }
.mail-compose-limit { color: var(--color-text-secondary); font-size: 11px; }
.mail-compose-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 0 8px; position: sticky; bottom: -8px; margin-bottom: -8px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.mail-compose-dialog :disabled { cursor: default; }
@media (max-width: 760px) {
  .mail-compose-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); padding: 20px; }
  .mail-compose-body textarea { min-height: 180px; }
  .mail-compose-actions { flex-direction: column-reverse; }
  .mail-compose-actions .btn { width: 100%; min-height: 44px; }
  .mail-folders { gap: 2px; }
  .mail-folders .btn { font-size: 12px; padding-inline: 10px; }
}