/* =========================================================================
   GianOS — Mail app styles
   Committed light-blue palette (this app only). Neutral paper surface with
   a sky-blue accent for the To-pill and Send button. Composed email format
   with header fields as display-only rows, a pre-drafted body with a soft
   underline accent, and two CTAs (Send filled, LinkedIn text link).

   Scoped under .app-screen[data-app=mail] and body[data-app=mail] for the
   statusbar override + app-head per-OS skin.

   These tokens are fixed — they do not follow --seed (Mail's art direction
   is deliberately immune to the theme toy, per plan).

   Contrast: --mail-ink on --mail-surface ≥ 4.5:1. --mail-accent on
   --mail-surface: AA for large text (button, pill). All OKLCH, no hex.

   ARIA: the header fields (To, From, Subject) are display-only divs with
   semantic labels and values. The body is a paragraph. Send is a <button>.
   LinkedIn is an <a> with target="_blank" rel="noopener".
   ========================================================================= */

/* ---- sky-blue statusbar override when Mail is active --------------------- */
body[data-app="mail"] {
  --statusbar-ink: oklch(0.32 0.06 235);
  --statusbar-bg:  oklch(0.96 0.012 240 / 0.88);
}

/* ---- scoped palette ----------------------------------------------------- */
.app-screen[data-app="mail"] {
  --mail-surface:      oklch(0.96 0.012 240);   /* paper-white, blue tint */
  --mail-surface-card: oklch(0.985 0.008 238);  /* card lift: slightly brighter */
  --mail-accent:       oklch(0.52 0.10 235);    /* sky blue — pill, button, blank underline */
  --mail-accent-soft:  oklch(0.52 0.10 235 / 0.12); /* soft hover/focus tint */
  --mail-ink:          oklch(0.22 0.03 240);    /* primary text */
  --mail-muted:        oklch(0.44 0.04 238);    /* secondary / labels */
  --mail-line:         oklch(0.88 0.014 238);   /* hairline separators */
}

/* ---- app body: the blue-tinted paper surface ------------------------------- */
.app-screen[data-app="mail"] .app-body {
  background: var(--mail-surface);
  padding: 0;
  gap: 0;
  align-items: center;
  justify-content: center;
}

/* =========================================================================
   TABLET SPLIT VIEW (iPad-Mail idiom) — @container device (min-width: 700px)

   Built in mail.js as purely additive DOM (see buildSidebar): a
   .mail-sidebar (Drafts / Sent / Trash) plus a .mail-pane wrapping the
   compose card. Both are INERT on the phone tier — the sidebar is hidden
   and the pane is display:contents, so the card sits directly in .app-body's
   flow exactly as before (phone stays pixel-identical). At 700px .app-body
   becomes a two-column split: fixed mailbox rail + a wider compose sheet.

   Container queries key off .device (container-type: inline-size, set in
   base.css), so the breakpoint follows the device box, not the viewport.
   ========================================================================= */

/* phone tier: split-view scaffold is inert */
.mail-sidebar { display: none; }
.mail-pane { display: contents; }

@container device (min-width: 700px) {
  .app-screen[data-app="mail"] .app-body {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }

  /* ---- mailbox sidebar --------------------------------------------------- */
  .mail-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 19rem;
    min-width: 0;
    height: 100%;
    padding: 1.1rem 1rem;
    border-right: 1px solid var(--mail-line);
    background: color-mix(in oklch, var(--mail-surface) 96%, var(--mail-surface-card));
    overflow-y: auto;
    scrollbar-width: none;
  }
  .mail-sidebar::-webkit-scrollbar { display: none; }

  .mail-sidebar__head {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
    color: var(--mail-ink);
    padding: 0.2rem 0.4rem 0.9rem;
  }

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

  .mail-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s var(--ease);
  }
  .mail-box:hover { background: var(--mail-accent-soft); }
  .mail-box:focus-visible { outline: 2px solid var(--mail-accent); outline-offset: -2px; }

  .mail-box__label {
    font-family: var(--font-ui);
    font-size: 0.96rem;
    font-weight: 500;
    color: var(--mail-ink);
  }
  .mail-box__count {
    font-family: var(--font-label);
    font-size: 0.76rem;
    color: var(--mail-muted);
  }

  /* selected mailbox: iOS flat tinted row / Android tonal pill */
  body[data-os="ios"] .mail-boxes { gap: 0.1rem; }
  body[data-os="ios"] .mail-box { border-radius: 0.7rem; }
  body[data-os="ios"] .mail-box--active { background: var(--mail-accent-soft); }
  body[data-os="ios"] .mail-box--active .mail-box__label { color: var(--mail-accent); font-weight: 600; }

  body[data-os="android"] .mail-boxes { gap: 0.2rem; }
  body[data-os="android"] .mail-box { border-radius: 999px; padding-inline: 1.1rem; }
  body[data-os="android"] .mail-box--active {
    background: oklch(0.9 0.03 235);
  }
  body[data-os="android"] .mail-box--active .mail-box__label { color: var(--mail-accent); font-weight: 600; }

  /* ---- compose pane: real width, real compose-sheet framing -------------- */
  .mail-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 2.2rem 1.6rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--mail-line) transparent;
  }

  .mail-pane .mail-card {
    max-width: 34rem;
    align-self: flex-start;
    /* auto block margins float the card mid-pane without the overflow-clipping
       trap of justify-content:center on a scroll container */
    margin: auto;
    padding: 1.6rem 1.8rem;
  }

  /* ---- mailbox empty state: one interaction deep, tiny, no dead end ------ */
  .mail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    max-width: 22rem;
    margin: auto;
    padding: 2.4rem 1.5rem;
    text-align: center;
  }
  .mail-empty__title {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mail-ink);
  }
  .mail-empty__body {
    margin: 0 0 0.7rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--mail-muted);
  }
  .mail-empty__back {
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mail-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.6rem;
    border-radius: 0.5rem;
    transition: background 0.2s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .mail-empty__back:hover { background: var(--mail-accent-soft); }
  .mail-empty__back:focus-visible { outline: 2px solid var(--mail-accent); outline-offset: 2px; }
}

/* ---- app-head: keep light, blue-glass -------------------------------------- */
.app-screen[data-app="mail"] .app-head {
  background: color-mix(in oklch, var(--mail-surface) 88%, transparent);
  border-bottom-color: oklch(0.84 0.02 238 / 0.55);
}
.app-screen[data-app="mail"] .app-head__title {
  color: var(--mail-ink);
}
.app-screen[data-app="mail"] .app-head__back {
  color: var(--mail-accent);
}
.app-screen[data-app="mail"] .app-head__back:hover {
  background: var(--mail-accent-soft);
}

/* Android tonal head variant */
body[data-os="android"] .app-screen[data-app="mail"] .app-head {
  background: oklch(0.94 0.016 238);
  backdrop-filter: none;
}

/* =========================================================================
   COMPOSE CARD
   A vertical stack: header fields, divider, body, CTAs, footer.
   Centered in the screen with gentle shadow and rounded corners.
   ========================================================================= */
.mail-card {
  width: 100%;
  max-width: 22rem;
  margin: 0 auto;
  padding: 1.2rem;
  background: var(--mail-surface-card);
  border-radius: 1.2rem;
  box-shadow:
    0 0.1rem 0.3rem oklch(0.52 0.10 235 / 0.08),
    0 0.4rem 1rem -0.3rem oklch(0.42 0.08 235 / 0.16);
}

/* iOS inset grouped card variant */
body[data-os="ios"] .app-screen[data-app="mail"] .mail-card {
  border-radius: 1.3rem;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.55),
    0 0.4rem 1.2rem -0.3rem oklch(0.42 0.08 235 / 0.2);
}

/* Android M3 tonal card variant */
body[data-os="android"] .app-screen[data-app="mail"] .mail-card {
  border-radius: 1rem;
  background: oklch(0.94 0.016 238);
  box-shadow: none;
}

/* =========================================================================
   HEADER FIELDS (To, From, Subject)
   Display-only rows showing the compose envelope. To value is a pill.
   ========================================================================= */
.mail-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mail-line);
}
.mail-row:last-of-type:not(.mail-body) { border-bottom: none; }

.mail-row__label {
  flex-shrink: 0;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--mail-muted);
  width: 3.2rem;
}

.mail-row__value {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mail-ink);
}

/* To-field pill: sky-blue background, contrasting ink */
.mail-row--to .mail-row__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.75rem;
  background: var(--mail-accent);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: oklch(0.96 0.012 240);  /* light ink on blue bg */
}

/* =========================================================================
   DIVIDER
   Subtle separator between header and body.
   ========================================================================= */
.mail-divider {
  height: 1px;
  background: var(--mail-line);
  margin: 0.6rem 0;
}

/* =========================================================================
   BODY / DRAFT TEXT
   The pre-drafted message with a soft-underlined blank span.
   ========================================================================= */
.mail-body {
  padding: 0.9rem 0 0;
}

.mail-body__text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--mail-ink);
}

/* Soft underline on the blank span — subtle sky-blue underline */
.mail-blank {
  text-decoration: underline;
  text-decoration-color: var(--mail-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  opacity: 0.8;
}

/* =========================================================================
   CTA SECTION
   Primary button (Send) and secondary text link (LinkedIn).
   ========================================================================= */
.mail-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  margin-top: 0.8rem;
  border-top: 1px solid var(--mail-line);
}

/* Primary CTA: Send button — filled sky-blue, contrasting ink */
.mail-btn {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 0.65rem;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.mail-btn--primary {
  padding: 0.5rem 1.2rem;
  background: var(--mail-accent);
  color: oklch(0.96 0.012 240);
}
.mail-btn--primary:hover {
  background: oklch(0.48 0.095 235);
}
.mail-btn--primary:active {
  transform: scale(0.96);
}
.mail-btn--primary:focus-visible {
  outline: 2px solid var(--mail-accent);
  outline-offset: 3px;
}

/* Secondary CTA: LinkedIn link (quiet text) */
.mail-cta__or {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--mail-muted);
}

.mail-link {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mail-accent);
  text-decoration: none;
  cursor: pointer;
  border-radius: 0.35rem;
  padding: 0.2rem 0.3rem;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.mail-link:hover {
  background: var(--mail-accent-soft);
  color: oklch(0.48 0.095 235);
}
.mail-link:focus-visible {
  outline: 2px solid var(--mail-accent);
  outline-offset: 2px;
}

.mail-cta__arrow {
  font-size: 0.85rem;
  color: var(--mail-muted);
}

/* =========================================================================
   FOOTER TEXT
   Small muted hint below the CTAs.
   ========================================================================= */
.mail-footer {
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--mail-muted);
  text-align: center;
  line-height: 1.3;
}

/* =========================================================================
   POP ANIMATION
   Reuses the global .pop / .in pattern from base.css (opacity + translateY).
   Header fields, body, CTAs, and footer all stagger in on first open.
   ========================================================================= */
.mail-row.pop,
.mail-body.pop,
.mail-cta.pop,
.mail-footer.pop {
  opacity: 0;
  transform: translateY(0.6rem);
}
.mail-row.pop.in,
.mail-body.pop.in,
.mail-cta.pop.in,
.mail-footer.pop.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .mail-row.pop,
  .mail-row.pop.in,
  .mail-body.pop,
  .mail-body.pop.in,
  .mail-cta.pop,
  .mail-cta.pop.in,
  .mail-footer.pop,
  .mail-footer.pop.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}