/* =============================================================
   mc-mail.css - Midea Connect > Mail (js/mc-mail.js).

   Midea Connect's own look - light surfaces, hairline borders, compact rows,
   blue accents - not a mail product's. Sizes are in the app's native pixels:
   N * var(--u), as in midea-app.css.
   ============================================================= */
.mc-mail {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column;
  background: #fff; color: var(--ink);
  opacity: 0; transition: opacity 150ms ease;
  border-left: 1px solid var(--line);
}
.mc-mail[hidden] { display: none; }
.mc-mail.on { opacity: 1; }

.mail-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: calc(16 * var(--u));
  height: calc(64 * var(--u)); padding: 0 calc(22 * var(--u));
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.mail-head h2 { margin: 0; font-size: calc(24 * var(--u)); font-weight: 600; }
.mail-crumb { color: var(--muted); font-size: calc(17 * var(--u)); }
.mail-crumb::before { content: "/"; margin-right: calc(12 * var(--u)); color: #c3ccd8; }
.mail-back {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(6 * var(--u));
  border-radius: calc(17 * var(--u)); color: var(--blue); font-size: calc(17 * var(--u)); font-weight: 500;
  transition: background-color 120ms ease;
}
.mail-back svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke: var(--blue); }
.mail-back:hover { background: var(--hover); }

.mail-list-view, .mail-detail-view { flex: 1; min-height: 0; overflow-y: auto; }
.mail-list-view[hidden], .mail-detail-view[hidden] { display: none; }

.mail-tabs { display: flex; gap: calc(28 * var(--u)); padding: 0 calc(22 * var(--u)); height: calc(50 * var(--u)); border-bottom: 1px solid var(--line); align-items: flex-end; }
.mail-tabs span { position: relative; padding-bottom: calc(12 * var(--u)); font-size: calc(18 * var(--u)); color: var(--muted); }
.mail-tabs span.on { color: var(--ink); font-weight: 600; }
.mail-tabs span.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(3 * var(--u)); background: var(--blue); border-radius: calc(2 * var(--u)); }
.mail-tabs b { font-weight: 600; color: var(--blue); }

/* ---- inbox rows ---- */
.mail-row {
  display: flex; align-items: center; gap: calc(14 * var(--u)); width: 100%;
  padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  text-align: left; border-bottom: 1px solid var(--line); background: #fff;
  transition: background-color 110ms ease;
}
.mail-row:hover { background: var(--hover); }
.mail-row .mail-dot { flex: 0 0 auto; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: transparent; }
.mail-row.unread .mail-dot { background: var(--blue); }
.mail-row .mail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.mail-row .mail-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: calc(12 * var(--u)); }
.mail-row .mail-who { font-size: calc(17 * var(--u)); font-weight: 500; color: #4b5666; }
.mail-row time { flex: 0 0 auto; font-size: calc(15 * var(--u)); color: var(--muted); }
.mail-row .mail-subj { font-size: calc(18 * var(--u)); color: #4b5666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row .mail-prev { font-size: calc(16 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row.unread .mail-who, .mail-row.unread .mail-subj { color: var(--ink); font-weight: 700; }
.mail-row.unread time { color: var(--blue); font-weight: 600; }
.mail-row.unread { background: #f6faff; }
.mail-row.unread:hover { background: var(--hover); }

.mail-av {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(10 * var(--u));
  color: #fff; font-size: calc(16 * var(--u)); font-weight: 700; letter-spacing: 0.5px; background: #6b7a96;
}
.mail-av.system { background: var(--blue); }
.mail-av.hr { background: #21a87a; }
.mail-av.group { background: #e0731c; }

.mail-empty { padding: calc(80 * var(--u)) 0; text-align: center; color: var(--muted); }
.mail-empty[hidden] { display: none; }
.mail-empty p { margin: 0 0 calc(6 * var(--u)); font-size: calc(20 * var(--u)); color: #5c6779; }
.mail-empty small { font-size: calc(16 * var(--u)); }

/* ---- one email ---- */
.mail-msg { padding: calc(26 * var(--u)) calc(34 * var(--u)) calc(40 * var(--u)); max-width: calc(980 * var(--u)); }
.mail-msg-head { display: flex; align-items: flex-start; gap: calc(16 * var(--u)); padding-bottom: calc(18 * var(--u)); border-bottom: 1px solid var(--line); }
.mail-msg-head .mail-meta { flex: 1; min-width: 0; }
.mail-msg-head .mail-subject { margin: 0 0 calc(6 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.mail-msg-head .mail-from { font-size: calc(16 * var(--u)); color: var(--muted); display: flex; gap: calc(10 * var(--u)); }
.mail-msg-head .mail-from b { color: #3b4658; font-weight: 600; }
.mail-msg-head time { flex: 0 0 auto; font-size: calc(15 * var(--u)); color: var(--muted); }
.mail-msg-body { padding-top: calc(20 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.6; color: #2a3140; }
.mail-msg-body p { margin: 0 0 calc(14 * var(--u)); }
.mail-msg-body .mail-blk-heading { margin: 0 0 calc(12 * var(--u)); font-size: calc(20 * var(--u)); font-weight: 600; color: var(--blue); }
.mail-msg-body .mail-blk-sign { margin-top: calc(22 * var(--u)); font-weight: 600; color: #3b4658; }
.mail-msg-body .mail-blk-note { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); }

.mail-meet-card { border: 1px solid #cfe0f7; border-left: calc(5 * var(--u)) solid var(--blue); border-radius: calc(10 * var(--u)); background: #f6faff; padding: calc(18 * var(--u)) calc(22 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.mail-meet-title { font-size: calc(23 * var(--u)); font-weight: 700; margin-bottom: calc(6 * var(--u)); overflow-wrap: anywhere; }
.mail-meet-when { font-size: calc(20 * var(--u)); font-weight: 600; color: var(--blue); }
.mail-meet-date { font-size: calc(15 * var(--u)); color: var(--muted); margin-bottom: calc(14 * var(--u)); }
.mail-meet-rows { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; row-gap: calc(8 * var(--u)); margin: 0; font-size: calc(18 * var(--u)); }
.mail-meet-rows dt { color: var(--muted); }
.mail-meet-rows dd { margin: 0; color: #2a3140; font-weight: 500; }

.mail-sum-card { border: 1px solid #cfe0f7; border-radius: calc(10 * var(--u)); background: #f6faff; padding: calc(18 * var(--u)) calc(22 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.mail-sum-rows { display: grid; grid-template-columns: calc(150 * var(--u)) 1fr; row-gap: calc(8 * var(--u)); margin: 0 0 calc(14 * var(--u)); font-size: calc(18 * var(--u)); }
.mail-sum-rows dt { color: var(--muted); }
.mail-sum-rows dd { margin: 0; color: #2a3140; font-weight: 500; }
.mail-sum-h { margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; color: var(--blue); }
.mail-sum-list { margin: 0; padding-left: calc(20 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.6; color: #2a3140; }
.mail-sum-list li { margin-bottom: calc(4 * var(--u)); }

.mail-actions { margin-top: calc(10 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.mail-btn { height: calc(46 * var(--u)); padding: 0 calc(26 * var(--u)); border-radius: calc(8 * var(--u)); border: 1px solid #b9cbe6; background: #fff; color: var(--blue); font-size: calc(18 * var(--u)); font-weight: 600; transition: background-color 110ms ease, transform 80ms ease, box-shadow 110ms ease; }
.mail-btn:hover { background: var(--hover); }
.mail-btn:active { transform: scale(0.98); }
.mail-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(20, 120, 240, 0.28); }
.mail-btn.primary:hover { background: #0f66d4; }

/* the unread count on the Mail shortcut of the chat list */
.chat-shortcuts .sc-count { color: var(--blue); font-weight: 600; margin-left: calc(-2 * var(--u)); }
.chat-shortcuts .sc-count:empty { display: none; }

@media (prefers-reduced-motion: reduce) { .mc-mail { transition-duration: 1ms; } }