/* Gmail app on iPhone, light mode, one email open, as an iPhone screenshot would show it:
   iOS status bar on top, no Dynamic Island or home bar (screenshots leave those out).
   Sizes are iOS points, which are CSS pixels here; the PNG is saved at 3x like a real screenshot. */

.gi {
  --sb: 62px;       /* status bar height (top safe area) */
  --sb-mid: 32px;   /* vertical center of the clock and status icons, level with the Dynamic Island */
  --text: #1f1f1f;
  --icon: #444746;
  --meta: #444746;
  --sans: 'Google Sans', Roboto, sans-serif;
  --text-sans: 'Google Sans Text', Roboto, sans-serif;

  position: relative;
  width: 402px;
  height: 874px;
  overflow: hidden;
  background: #fff;
  color: var(--text);
  font: 14px/20px var(--text-sans);
  text-align: left;
  cursor: default;
}
.gi.small { --sb: 59px; --sb-mid: 30px; }

/* iOS status bar. The clock and icons each sit centered in the space beside the Dynamic Island (126pt wide). */
.gi-status { position: relative; height: var(--sb); color: #000; }
.gi-clock, .gi-sys { position: absolute; width: calc(50% - 63px); display: flex; align-items: center; justify-content: center; }
.gi-clock { top: calc(var(--sb-mid) - 11px); left: 0; height: 22px; padding-left: 6px; font: 600 17px/22px -apple-system, 'SF Pro Text', system-ui, sans-serif; }
.gi-sys { top: calc(var(--sb-mid) - 7px); right: 0; height: 14px; padding-right: 6px; gap: 6px; }
.gi-sys svg { flex: none; fill: #000; }

.gi-bar { display: flex; align-items: center; height: 56px; padding: 0 4px; }
.gi-bar .btn { width: 48px; height: 48px; }
.gi-bar .sp { flex: 1; }

.gi-subj { display: flex; align-items: flex-start; padding: 4px 4px 0 16px; }
.gi-subj h2 { flex: 1; min-width: 0; padding-top: 6px; font: 400 22px/28px var(--sans); color: var(--text); overflow-wrap: anywhere; }
.gi-subj .btn { width: 48px; height: 48px; margin-top: -4px; }
.gi-chip {
  display: inline-block; margin-left: 8px; padding: 0 6px; border-radius: 4px;
  background: #e8eaed; color: var(--meta);
  font: 12px/20px var(--text-sans); vertical-align: 3px;
}

.gi-from { display: flex; align-items: center; padding: 16px 4px 0 16px; }
.gi-from .av { margin-right: 12px; }
.gi-from .who { flex: 1; min-width: 0; }
.gi-from .line { display: flex; align-items: baseline; min-width: 0; }
.gi-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 16px/22px var(--sans); color: var(--text); }
.gi-when { flex: none; margin-left: 8px; font: 12px/16px var(--text-sans); color: var(--meta); }
.gi-to { display: flex; align-items: center; font: 14px/20px var(--text-sans); color: var(--meta); }
.gi-to .ic { color: var(--meta); }

.gi-body {
  padding: 20px 16px 0;
  font: 16px/1.4 -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.gi-body a { color: #1a73e8; text-decoration: underline; }

.gi-reply { display: flex; gap: 8px; padding: 32px 16px; }
.gi-reply .gm-pill { flex: 1; justify-content: center; height: 40px; border-radius: 20px; }
.gi-reply .gm-pill.round { flex: none; width: 40px; }