/* Embedded "You've got Mail!" popup (Figma Pop_Up 52:1136), scoped under #mail-popup.
   No dim backdrop: the overlay is transparent and click-through (pointer-events:none),
   only the modal itself is interactive, so the page behind stays usable. */

#mail-popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  /* "safe center": if the modal is taller than the viewport it aligns to the
     top instead of clipping the title bar. Falls back to flex-start elsewhere. */
  align-items: flex-start;
  align-items: safe center;
  padding: 24px;
  overflow: auto;
  pointer-events: none;        /* clicks pass through to the page behind */
  z-index: 1000;
  font-family: "Inter", system-ui, sans-serif;
}
#mail-popup[hidden] { display: none; }

/* Media Player window (52:1137) */
#mail-popup .media-player {
  pointer-events: auto;        /* the modal itself is interactive */
  width: 770px;
  background: #0051c6;
  border-radius: 12px;
  box-shadow: -10px 10px 0 0 #042049;
  padding: 6px;
  display: flex;
  flex-direction: column;
  border: none;
}

#mail-popup .edge { width: 100%; height: 6px; display: block; }
#mail-popup .edge img { display: block; width: 100%; height: 100%; }
#mail-popup .edge-bottom { transform: rotate(180deg); padding-right: 10px; mix-blend-mode: multiply; }

/* Title bar (52:1140 / 52:1141) */
#mail-popup .titlebar {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 36.89px;
  width: 100%;
  padding: 10px 20px;
  box-sizing: content-box;
}
#mail-popup .titlebar-left { display: flex; flex: 1 0 0; gap: 40px; align-items: center; min-width: 0; }
#mail-popup .dots { width: 69.64px; height: 17.82px; flex: none; }
#mail-popup .dots img { display: block; width: 100%; height: 100%; }
#mail-popup .title { font-size: 27.55px; color: #fff; white-space: nowrap; }
#mail-popup .pinstripes { flex: 1 0 0; height: 17.82px; min-width: 0; mix-blend-mode: multiply; }
#mail-popup .pinstripes img { display: block; width: 100%; height: 100%; }

/* Close button (29:6211) */
#mail-popup .close {
  width: 36px; height: 36px; flex: none;
  background: #56f77e;
  border-radius: 6px;
  box-shadow: -2.5px 2.5px 0 0 #01353e;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  overflow: hidden;
  border: none;
  cursor: pointer;
}
#mail-popup .close-top { display: flex; flex-direction: column; gap: 1px; align-items: flex-start; }
#mail-popup .close-line { width: 28px; height: 4px; }
#mail-popup .close-line img { display: block; width: 100%; height: 100%; }
#mail-popup .close-x { display: flex; align-items: center; justify-content: center; width: 30px; padding: 3px 8px; }
#mail-popup .close-x > span { display: block; width: 13.99px; height: 14px; }
#mail-popup .close-x img { display: block; width: 100%; height: 100%; }
#mail-popup .close-bottom { transform: rotate(180deg); }

/* Message panel (52:1155 / 52:1156) */
#mail-popup .panel-wrap { padding: 10px 20px; width: 100%; }
#mail-popup .panel {
  background: #fff;
  border-radius: 5px;
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 59px;
  overflow: hidden;
}

/* Message text (52:1157) — OCR A Std 18px */
#mail-popup .msg {
  font-family: "OCR A Std", "Share Tech Mono", "Courier New", monospace;
  font-size: 18px;
  width: 558px;
  display: flex;
  flex-direction: column;
  gap: 31px;
}
#mail-popup .msg .from { color: #0051c6; text-decoration: underline; }
#mail-popup .msg-lines { position: relative; height: 173.2px; white-space: nowrap; line-height: normal; }
#mail-popup .msg-lines p { position: absolute; left: 0; }
#mail-popup .msg-lines .subject { top: 0; color: #000; text-decoration: underline; }
#mail-popup .msg-lines .l2 { top: 43.2px; color: #000; }
#mail-popup .msg-lines .l3 { top: 86.4px; color: #000; }
#mail-popup .msg-lines .drop { top: 151.2px; color: #0051c6; }

/* Buttons (52:1164) */
#mail-popup .buttons { display: flex; gap: 20px; align-items: center; }
#mail-popup .gbtn {
  position: relative;
  width: max-content;
  height: 44px;
  background: #56f77e;
  border-radius: 6px;
  box-shadow: -3px 3px 0 0 #01353e;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: none;
  cursor: pointer;
}
#mail-popup .gbtn .bedge { position: absolute; left: 4px; right: 4px; height: 4px; }
#mail-popup .gbtn .bedge img { display: block; width: 100%; height: 100%; }
#mail-popup .gbtn .bedge:not(.bedge-bottom) { top: 4px; }
#mail-popup .gbtn .bedge-bottom { bottom: 4px; mix-blend-mode: multiply; transform: rotate(180deg); }
#mail-popup .gbtn .label {
  padding: 2px 16px;
  font-size: 24px;
  color: #01353e;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}