/* ===========================================================================
   The Mail page, as Apple Mail.
   ---------------------------------------------------------------------------
   Two panes inside one full-height frame: a message list on the left and a
   reading pane on the right, with a toolbar across the top. Hairline rules
   instead of card borders, a lot of white space, and the row-fill selection
   Mail.app uses.

   The accent is Felicet emerald, not Apple blue. Everything else in this app
   - Command's sidebar, its buttons, its focus rings - is emerald, and a blue
   selection here would be the only blue on the screen.

   Tokens come from apple.css. This file owns nothing but the Mail page; every
   selector is under .amail.
   =========================================================================== */

.amail {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);   /* viewport, less the 52px topbar and the content padding */
  min-height: 420px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ------------------------------------------------------------- toolbar --- */

.amail-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--separator);
  background: rgba(252, 252, 253, .9);
  flex-shrink: 0;
}

/* The mailbox switcher, as a segmented control. */
.amail-seg { display: inline-flex; background: var(--fill); border-radius: 8px; padding: 2px; }
.amail-seg button {
  border: 0; background: transparent; color: var(--label-2);
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.amail-seg button.on { background: var(--surface); color: var(--label); box-shadow: 0 1px 2px rgba(0,0,0,.10); }
.amail-seg .n {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; padding: 0 5px; min-width: 16px; text-align: center;
}

.amail-search {
  flex: 1; max-width: 340px; margin-left: auto;
  background: var(--fill); border: 0; border-radius: 8px;
  height: 30px; padding: 0 10px; font-size: 13px; color: var(--label);
}
.amail-search::placeholder { color: var(--label-3); }
.amail-search:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }

.amail-acct { color: var(--label-3); font-size: 11.5px; display: flex; align-items: center; gap: 6px; }
.amail-icon {
  background: transparent; border: 0; color: var(--label-3);
  width: 26px; height: 26px; border-radius: 6px; font-size: 15px;
}
.amail-icon:hover { background: var(--fill-2); color: var(--label); }

/* --------------------------------------------------------------- panes --- */

.amail-body { flex: 1; display: flex; min-height: 0; }

.amail-list {
  width: 340px; flex-shrink: 0;
  border-right: 1px solid var(--separator);
  overflow-y: auto;
  background: var(--surface);
}

.amail-row {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent;
  padding: 9px 14px 10px 26px;    /* the left inset is the unread-dot gutter */
  position: relative;
  color: inherit;
}
/* Apple insets the separator so it starts under the text, not the dot. */
.amail-row + .amail-row::before {
  content: ''; position: absolute; top: 0; left: 26px; right: 0;
  border-top: 1px solid var(--separator);
}
.amail-row:hover { background: var(--fill-2); }

.amail-row.on { background: var(--accent); }
.amail-row.on::before, .amail-row.on + .amail-row::before { border-top-color: transparent; }
.amail-row.on .amail-from,
.amail-row.on .amail-subj,
.amail-row.on .amail-snip,
.amail-row.on .amail-when { color: #fff; }
.amail-row.on .amail-dot { background: #fff; }
.amail-row.on .amail-wait { background: rgba(255,255,255,.22); color: #fff; }

.amail-dot {
  position: absolute; left: 11px; top: 15px;
  width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
}

.amail-top { display: flex; align-items: baseline; gap: 8px; }
.amail-from {
  flex: 1; min-width: 0; color: var(--label);
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amail-row.is-read .amail-from { font-weight: 500; }
.amail-when { color: var(--label-3); font-size: 11.5px; white-space: nowrap; }

.amail-subj {
  color: var(--label); font-size: 13px; font-weight: 500; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.amail-row.is-read .amail-subj { font-weight: 400; }

/* Two lines of preview, as Mail.app shows by default. */
.amail-snip {
  color: var(--label-2); font-size: 12px; line-height: 1.38; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.amail-wait {
  display: inline-block; margin-top: 5px;
  background: rgba(255, 149, 0, .14); color: #b35f00;
  border-radius: 999px; font-size: 10.5px; font-weight: 600; padding: 1px 7px;
}

/* ------------------------------------------------------------- reading --- */

.amail-read { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); }

/* The reading pane's own header, pinned. The back control used to live inside
   .amail-scroll, which meant it scrolled away on any message longer than the
   pane - the one time you most want it. Same bar as .amsg-head on Chat. */
.amail-read-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 28px; flex-shrink: 0;
  border-bottom: 1px solid var(--separator);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.amail-read-head .amail-subject { margin: 0; flex: 1; min-width: 0; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amail-scroll { flex: 1; overflow-y: auto; padding: 22px 28px; }

.amail-subject {
  color: var(--label); font-size: 19px; font-weight: 600;
  letter-spacing: -.2px; margin: 0 0 16px;
}
.amail-read-head + .amail-scroll .amail-msg:first-child { padding-top: 2px; }

.amail-msg + .amail-msg { border-top: 1px solid var(--separator); margin-top: 22px; padding-top: 22px; }

.amail-head { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 12px; }
.amail-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #10b981, var(--accent));
  color: #fff; font-weight: 600; font-size: 13.5px;
}
.amail-who { flex: 1; min-width: 0; }
.amail-name { color: var(--label); font-size: 13.5px; font-weight: 600; }
.amail-name .me {
  background: var(--fill); color: var(--label-2); border-radius: 4px;
  font-size: 10.5px; font-weight: 600; padding: 1px 5px; margin-left: 6px;
}
.amail-addr { color: var(--label-3); font-size: 12px; }
.amail-date { color: var(--label-3); font-size: 12px; white-space: nowrap; }

.amail-text {
  color: var(--label); font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
  max-width: 70ch;             /* a readable measure, as Mail.app keeps */
}

.amail-attach { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.amail-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--fill); color: var(--label); border-radius: 8px;
  font-size: 12px; padding: 5px 10px;
}
.amail-chip i { color: var(--label-2); }

/* ------------------------------------------------------------- compose --- */

.amail-compose {
  border-top: 1px solid var(--separator);
  padding: 12px 28px 14px;
  background: rgba(252, 252, 253, .9);
  flex-shrink: 0;
}
.amail-compose-row { display: flex; align-items: flex-end; gap: 10px; }
.amail-compose textarea {
  flex: 1; resize: none;
  background: var(--fill); border: 0; border-radius: 12px;
  padding: 10px 14px; font-size: 13.5px; line-height: 1.45; color: var(--label);
  min-height: 42px; max-height: 160px;
}
.amail-compose textarea:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.amail-send {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--accent); color: #fff; font-size: 16px;
}
.amail-send:disabled { background: var(--fill); color: var(--label-3); }
.amail-note { color: var(--label-3); font-size: 12.5px; margin: 0; }

/* --------------------------------------------------------------- empty --- */

.amail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: var(--label-3); text-align: center; padding: 32px;
}
.amail-empty i { font-size: 40px; color: var(--separator); }
.amail-empty .t { color: var(--label-2); font-size: 14px; font-weight: 500; }
.amail-empty .s { font-size: 12.5px; max-width: 320px; }

/* On a narrow screen Mail.app drops to one pane at a time: the list until you
   pick something, then the message. Same here, driven by .reading. */
@media (max-width: 900px) {
  .amail { height: calc(100vh - 100px); }
  /* The toolbar is four controls on one line at desktop width and about one
     and a half at phone width, so let it wrap: the switcher and the account
     keep the first row, the search takes the second at full width. */
  .amail-bar { flex-wrap: wrap; row-gap: 8px; padding: 10px 12px; }
  .amail-seg button { padding: 5px 9px; }
  .amail-search { max-width: none; order: 3; flex-basis: 100%; margin-left: 0; }
  .amail-acct { margin-left: auto; }
  .amail-list { width: 100%; border-right: 0; }
  .amail-read { display: none; }
  .amail.reading .amail-list { display: none; }
  .amail.reading .amail-read { display: flex; }
  .amail-scroll { padding: 18px 16px; }
  .amail-compose { padding: 10px 16px 12px; }
}
/* Shown at every width. Apple Mail has no back button on a desktop, where
   both panes are visible - but there was no way at all to put the reading
   pane down again, and on a phone it is the only way back to the list. */
.amail-back {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
  background: transparent; border: 0; color: var(--accent);
  font-size: 13px; font-weight: 600; padding: 4px 8px 4px 4px;
  border-radius: 7px;
}
.amail-back:hover { background: var(--accent-tint); }
.amail-back i { font-size: 17px; }
@media (max-width: 900px) {
  .amail-read-head { padding: 10px 14px; }
  .amail-back span { display: none; }   /* the chevron alone, as on Chat */
}

/* ------------------------------------------- assign a mail as a task --- */

.amt { display: flex; flex-direction: column; }
.amt-l {
  display: block; color: var(--label-2); font-size: 12px; font-weight: 600;
  letter-spacing: .2px; margin: 12px 0 5px;
}
.amt-l:first-child { margin-top: 0; }

.amt-in {
  width: 100%; background: var(--fill); border: 0; border-radius: 10px;
  padding: 9px 12px; font-size: 13.5px; color: var(--label); line-height: 1.45;
}
.amt-in:focus { background: #fff; outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }
.amt-area { resize: vertical; min-height: 120px; font-family: inherit; }

.amt-hint { color: var(--label-3); font-size: 12px; line-height: 1.45; margin: 6px 0 0; }

.amt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.amt-people-head { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
.amt-search { max-width: 220px; margin-left: auto; height: 34px; padding: 0 12px; }

.amt-people {
  margin-top: 8px; max-height: 240px; overflow-y: auto;
  border: 1px solid var(--separator); border-radius: 12px; padding: 5px;
}
.amt-empty { color: var(--label-3); font-size: 13px; padding: 16px; text-align: center; }

.amt-person {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: 9px; padding: 7px 9px;
}
.amt-person:hover { background: var(--fill-2); }
.amt-person.on { background: var(--accent-tint); }

.amt-tick {
  width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--separator); background: var(--surface);
  color: #fff; font-size: 12px;
}
.amt-person.on .amt-tick { background: var(--accent); border-color: var(--accent); }

.amt-person-body { display: flex; flex-direction: column; min-width: 0; }
.amt-person-name { color: var(--label); font-size: 13.5px; font-weight: 500; }
.amt-person-sub { color: var(--label-3); font-size: 11.5px; }

.amt-err {
  margin-top: 12px; padding: 10px 13px; border-radius: 10px;
  background: rgba(255, 59, 48, .09); color: #D70015; font-size: 13px; line-height: 1.45;
}

/* The button that opens it, in the reading pane's header. */
.amail-task {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  border: 0; background: var(--accent-tint); color: var(--accent);
  border-radius: 8px; font-size: 12.5px; font-weight: 600; padding: 5px 11px;
}
.amail-task:hover { background: var(--accent); color: #fff; }

@media (max-width: 700px) {
  .amt-row { grid-template-columns: 1fr; }
  .amt-people-head { flex-wrap: wrap; }
  .amt-search { max-width: none; margin-left: 0; width: 100%; }
  .amail-task span { display: none; }
}

/* Attachment chips are downloads now, so they look pressable. */
.amail-chip.is-file { border: 0; cursor: pointer; max-width: 100%; }
.amail-chip.is-file:hover { background: var(--accent-tint); color: var(--accent); }
.amail-chip.is-file:hover i { color: var(--accent); }
.amail-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.amail-chip-size { color: var(--label-3); font-size: 11px; }

/* "Also attach the files" in the assign dialog. */
.amt-files {
  display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0;
  padding: 11px 13px; border-radius: 12px; background: var(--fill);
  border: 1px solid transparent; cursor: pointer;
}
.amt-files.on { background: var(--accent-tint); border-color: rgba(4, 120, 87, .18); }
.amt-files input { margin: 2px 0 0; accent-color: var(--accent); width: 16px; height: 16px; flex-shrink: 0; }
.amt-files span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.amt-files strong { color: var(--label); font-size: 13px; font-weight: 600; }
.amt-files small { color: var(--label-2); font-size: 11.5px; line-height: 1.4; }

/* Open / save, as one control. */
.amail-chip-pair { display: inline-flex; align-items: stretch; gap: 1px; max-width: 100%; }
.amail-chip-pair .amail-chip { border-radius: 8px 0 0 8px; }
.amail-chip-save { border-radius: 0 8px 8px 0 !important; padding-left: 8px; padding-right: 9px; }

/* The attachment list in the assign dialog: tick to copy, click to look. */
.amt-files { display: block; }
.amt-files-head { display: flex; gap: 10px; align-items: flex-start; margin: 0; cursor: pointer; }
.amt-files-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0 26px; }