/* Internal Mail (Features/CommunicationCenter/Pages/InternalMail.razor).
   Gmail-style mailbox: folders | message list | conversation reader, plus a
   floating compose window. Only design tokens (tokens.css); logical
   properties throughout so the layout mirrors in Arabic (RTL). */

.mail-svg { flex: none; display: block; }
.mail-shell {
  display: grid; grid-template-columns: 200px minmax(300px, 0.85fr) minmax(0, 1.25fr); gap: var(--space-4);
  height: calc(100dvh - 230px); min-height: 520px;
}
.mail-shell > .surface { padding: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ---- folders ---- */
.mail-sidebar { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.mail-compose-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.mail-folders { display: flex; flex-direction: column; gap: 2px; }
.mail-folder {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: 9px var(--space-3);
  border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary);
  font-size: var(--text-sm); text-align: start; cursor: pointer;
}
.mail-folder:hover { background: var(--surface-sunken); color: var(--text-primary); }
.mail-folder.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.mail-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folder-count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.mail-folder-count.strong { color: var(--accent-strong); font-weight: 800; }

/* ---- list toolbar ---- */
.mail-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border);
}
.mail-toolbar-spacer { flex: 1; }
.mail-icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 400;
}
.mail-icon-button:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text-primary); }
.mail-icon-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mail-icon-button:disabled { opacity: .4; cursor: default; }
.mail-icon-button.danger:hover { color: var(--danger); background: var(--danger-soft); }
.mail-icon-button.starred { color: var(--warning); }
[dir="rtl"] .mail-icon-button.flip .mail-svg { transform: scaleX(-1); }
label.mail-check { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 34px; margin: 0; cursor: pointer; }
.mail-check input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); cursor: pointer; }
.mail-search {
  display: flex; align-items: center; gap: var(--space-2); flex: 1 1 160px; max-width: 260px;
  padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: 999px;
  background: var(--search-fill, var(--surface-sunken)); color: var(--text-muted);
}
.mail-search input { border: 0; background: transparent; padding: 7px 0; box-shadow: none; }
.mail-search input:focus { box-shadow: none; }
.mail-search:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
label.mail-unread-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; white-space: nowrap; }
.mail-unread-toggle input { width: auto; margin: 0; accent-color: var(--accent); }
.mail-folder-note { margin: 0; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-sunken); }

/* ---- message list ---- */
.mail-list { flex: 1; overflow-y: auto; min-height: 0; }
.mail-row {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "check star from clip date" "check star text text text";
  align-items: center; column-gap: var(--space-1); row-gap: 2px; padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text-secondary); font-size: var(--text-sm);
  transition: background .12s ease;
}
.mail-row > .mail-check { grid-area: check; }
.mail-row > .mail-star, .mail-row > .mail-star-spacer { grid-area: star; }
.mail-row-from { grid-area: from; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.mail-row-text { grid-area: text; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-clip { grid-area: clip; color: var(--text-muted); }
.mail-row-date { grid-area: date; font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; padding-inline-start: var(--space-2); }
.mail-row-snippet { color: var(--text-muted); }
.mail-row:hover { background: var(--surface-sunken); }
.mail-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.mail-row.selected { background: var(--accent-soft); }
.mail-row.open { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .mail-row.open { box-shadow: inset -3px 0 0 var(--accent); }
.mail-row.unread .mail-row-from, .mail-row.unread .mail-row-subject, .mail-row.unread .mail-row-date { font-weight: 800; color: var(--text-primary); }
.mail-row.unread::before { content: none; }
.mail-star, .mail-star-spacer { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; }
.mail-star { border: 0; background: transparent; color: var(--text-muted); border-radius: 50%; cursor: pointer; padding: 0; margin: 0; }
.mail-star:hover { color: var(--warning); background: var(--warning-soft); }
.mail-star.on { color: var(--warning); }
.mail-draft-label { color: var(--danger); font-weight: 700; margin-inline-end: 6px; }
.mail-thread-count { margin-inline-start: 6px; font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }
.mail-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  height: 100%; min-height: 220px; padding: var(--space-6); color: var(--text-muted); text-align: center;
}
.mail-empty .mail-svg { width: 44px; height: 44px; opacity: .5; }
.mail-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-top: 1px solid var(--border); }
.mail-pager span { margin-inline-end: var(--space-2); font-variant-numeric: tabular-nums; }

/* ---- reader ---- */
.mail-reader { overflow-y: auto; }
.mail-shell > .mail-reader { overflow-y: auto; }
.mail-reader-toolbar {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface-raised); z-index: 2;
}
.mail-reader-toolbar .secondary-button { display: inline-flex; align-items: center; gap: 6px; }
.mail-back { display: none; }
.mail-reader-subject { font-size: var(--text-xl); margin: var(--space-4) var(--space-5) var(--space-3); overflow-wrap: anywhere; }
.mail-thread { display: flex; flex-direction: column; padding: 0 var(--space-4) var(--space-5); }
.mail-message { border-bottom: 1px solid var(--border); }
.mail-message:last-child { border-bottom: 0; }
.mail-message-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-1); cursor: pointer; }
.mail-message-who { flex: 1; min-width: 0; }
.mail-message-who strong { color: var(--text-primary); }
.mail-address { display: block; overflow-wrap: anywhere; }
.mail-message-to, .mail-message-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-message-date { white-space: nowrap; }
.mail-message-body {
  white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; color: var(--text-primary); unicode-bidi: plaintext;
  padding: 0 var(--space-1) var(--space-4); padding-inline-start: calc(36px + var(--space-4));
}
.mail-attachments { padding-inline-start: calc(36px + var(--space-4)); padding-bottom: var(--space-3); }
.mail-attachment-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mail-attachment {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ext name icon" "ext size icon";
  align-items: center; column-gap: var(--space-2); width: 230px; padding: var(--space-2) var(--space-3); margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken);
  color: var(--text-primary); text-align: start; cursor: pointer; font-weight: 400;
}
.mail-attachment:hover { border-color: var(--accent); }
.mail-attachment .mail-svg { grid-area: icon; color: var(--text-muted); }
.mail-attachment-ext {
  grid-area: ext; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-strong); font-size: 10px; font-weight: 800;
}
.mail-attachment-name { grid-area: name; font-size: var(--text-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-attachment-size { grid-area: size; font-size: var(--text-xs); color: var(--text-muted); }
.mail-message .action-row { padding-inline-start: calc(36px + var(--space-4)); padding-bottom: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mail-message .action-row .secondary-button { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; }

/* ---- compose window ---- */
.mail-compose {
  position: fixed; bottom: 0; inset-inline-end: var(--space-6); z-index: 60;
  width: min(560px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 90px));
  display: flex; flex-direction: column; background: var(--surface-raised);
  border: 1px solid var(--border-strong, var(--border)); border-bottom: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0; box-shadow: var(--shadow-lg);
}
.mail-compose.minimized { height: auto; width: min(320px, calc(100vw - 32px)); }
.mail-compose.maximized {
  inset-inline-end: calc((100vw - min(980px, calc(100vw - 32px))) / 2); bottom: 5dvh; height: 90dvh;
  width: min(980px, calc(100vw - 32px)); border-bottom: 1px solid var(--border); border-radius: var(--radius-md);
}
.mail-compose-head {
  display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2);
  padding-inline-start: var(--space-4); background: var(--surface-sunken);
  border-radius: var(--radius-md) var(--radius-md) 0 0; border-bottom: 1px solid var(--border);
}
.mail-compose.minimized .mail-compose-head { cursor: pointer; }
.mail-compose-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.mail-compose-status { color: var(--text-muted); white-space: nowrap; }
.mail-compose-head .mail-icon-button { width: 30px; height: 30px; }
.mail-compose-fields { padding: 0 var(--space-4); }
.mail-recipient-row { position: relative; display: flex; align-items: center; gap: var(--space-2); min-height: 42px; border-bottom: 1px solid var(--border); }
.mail-recipient-label { color: var(--text-muted); font-size: var(--text-sm); min-width: 32px; }
.mail-recipient-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 0; }
.mail-recipient-chips input { flex: 1; min-width: 140px; width: auto; border: 0; padding: 6px 0; background: transparent; box-shadow: none; }
.mail-recipient-chips input:focus { box-shadow: none; }
.mail-cc-toggles { display: inline-flex; gap: var(--space-2); }
.mail-cc-toggles .link-button { text-decoration: none; color: var(--text-secondary); }
.mail-cc-toggles .link-button:hover { color: var(--accent-strong); text-decoration: underline; }
.mail-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding-block: 3px; padding-inline: 10px 6px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-sunken); font-size: var(--text-sm); color: var(--text-primary);
}
.mail-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.mail-chip.uploading { opacity: .7; }
.mail-suggestions {
  position: absolute; top: 100%; inset-inline: 32px 0; z-index: 5; max-height: 280px; overflow-y: auto;
  background: var(--surface-overlay, var(--surface-raised)); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.mail-suggestion {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); margin: 0;
  border: 0; background: transparent; color: var(--text-primary); text-align: start; cursor: pointer; font-weight: 400;
}
.mail-suggestion.active, .mail-suggestion:hover { background: var(--accent-soft); }
.mail-compose-subject { border: 0; border-radius: 0; padding: 10px 0; background: transparent; border-bottom: 1px solid transparent; }
.mail-compose-subject:focus { box-shadow: none; border-bottom-color: var(--accent); }
.mail-compose-body {
  flex: 1; min-height: 120px; resize: none; border: 0; border-radius: 0; padding: var(--space-3) var(--space-4);
  background: transparent; line-height: 1.6; unicode-bidi: plaintext; border-top: 1px solid var(--border);
}
.mail-compose-body:focus { box-shadow: none; }
.mail-compose-attachments { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); max-height: 110px; overflow-y: auto; }
.mail-compose-error { color: var(--danger); margin: 0; padding: var(--space-1) var(--space-4); }
.mail-signature-editor { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); }
.mail-signature-editor .action-row { margin-top: var(--space-2); }
.mail-compose-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border); }
.mail-compose-foot .primary-button { width: auto; display: inline-flex; align-items: center; gap: var(--space-2); border-radius: 999px; padding: var(--space-2) var(--space-5); }
.mail-compose-foot label.mail-icon-button { margin: 0; }

/* ---- toast ---- */
.mail-toast {
  position: fixed; bottom: var(--space-6); inset-inline-start: var(--space-6); z-index: 70;
  display: flex; align-items: center; gap: var(--space-3); max-width: calc(100vw - 32px);
  padding-block: var(--space-2); padding-inline: var(--space-4) var(--space-2);
  background: var(--text-primary); color: var(--surface-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); font-size: var(--text-sm);
}
.mail-toast .link-button { color: var(--accent); font-weight: 700; text-decoration: none; }
.mail-toast .mail-icon-button { color: inherit; width: 28px; height: 28px; }

/* ---- responsive ---- */
@media (max-width: 1200px) {
  .mail-shell { grid-template-columns: 190px minmax(0, 1fr); }
  .mail-shell .mail-reader { display: none; }
  .mail-shell.has-open .mail-list-pane { display: none; }
  .mail-shell.has-open .mail-reader { display: flex; }
  .mail-back { display: inline-flex; }
}
@media (max-width: 760px) {
  .mail-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: calc(100dvh - 190px); gap: var(--space-3); }
  .mail-sidebar { flex-direction: row; align-items: center; gap: var(--space-2); overflow-x: auto; padding-bottom: 2px; }
  .mail-compose-button { flex: none; width: auto; padding: var(--space-2) var(--space-3); }
  .mail-compose-button span { display: none; }
  .mail-folders { flex-direction: row; gap: 4px; }
  .mail-folder { width: auto; white-space: nowrap; padding: 7px 10px; }
  .mail-search { max-width: none; order: 10; flex-basis: 100%; }
  .mail-message-body, .mail-attachments, .mail-message .action-row { padding-inline-start: var(--space-1); }
  .mail-attachment { width: 100%; }
  .mail-compose, .mail-compose.maximized { inset: 0; width: 100%; height: 100dvh; border-radius: 0; }
  .mail-compose.minimized { inset: auto 0 0 auto; height: auto; width: 260px; }
  .mail-compose-head { border-radius: 0; }
  .mail-toast { inset-inline: var(--space-4); bottom: var(--space-4); }
}