/* Hand-written companion to app.css (which is generated from the desktop app).
   Supplies what the app gets from its own index.html, plus the few changes
   needed to run inside a box on a web page. Load after app.css. */

:where(.vd),
:where(.vd) *,
:where(.vd) *::before,
:where(.vd) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.vd {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: normal;
  text-align: left;
  transform-origin: top left;
}

.vd:focus { outline: none; }
.vd:focus-visible { outline: 2px solid var(--green-light); outline-offset: -2px; }

.vd .app-header-controls .app-win-btn { cursor: default; }
.vd .thread-bubble-content { padding-top: 10px; }
.vd .thread-bubble-content p { margin-bottom: 12px; }
.vd .thread-bubble-content p:last-child { margin-bottom: 0; }
.vd .toast-wrap { pointer-events: none; }
/* Keep the star clear of the subject line in the narrow list. */
.vd .email-item:has(.star-badge) .email-item-inner { padding-right: 104px; }

/* Phone-sized demo: one pane at a time. */
.vd.vd-phone .sidebar,
.vd.vd-phone .pane-resizer { display: none; }
.vd.vd-phone .email-list-pane { flex: 1; width: auto; min-width: 0; max-width: none; }
.vd.vd-phone .reading-pane { display: none; }
.vd.vd-phone.vd-reading .email-list-pane { display: none; }
.vd.vd-phone.vd-reading .reading-pane { display: flex; }
.vd.vd-phone .reading-header { padding: 16px 16px 12px; }
.vd.vd-phone .reading-body { padding: 14px 12px; }
.vd.vd-phone .thread-bubble-body,
.vd.vd-phone .thread-bubble-actions { padding-left: 16px; }
.vd.vd-phone .modal-overlay { padding: 10px; }
.vd.vd-phone .compose-modal { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .vd .email-item { animation: none; }
}