@novacraft-engineering/mailbox 0.1.0 → 0.2.0

package/app/mail/page.module.css

@@ -515,6 +515,18 @@
   transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out);
 }
 .refreshBtn:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); }
+.crossFolderHint {
+  align-self: flex-start;
+  margin: 0 16px 8px;
+  padding: 6px 11px;
+  border: 1px solid var(--nc-line-1);
+  border-radius: 999px;
+  background: var(--nc-ink-2);
+  color: var(--nc-violet-500);
+  font: 500 12px/1 var(--nc-font-sans);
+  cursor: pointer;
+}
+.crossFolderHint:hover { border-color: var(--nc-violet-500); }
 .refreshBtn svg { width: 14px; height: 14px; }
 .filterChip {
   margin-left: auto;
@@ -652,12 +664,187 @@
   cursor: progress;
 }
 
+/* Floats over the list rather than in it, so it does not move as rows load. The pane is
+   the positioning context; the list itself scrolls underneath. */
+.toTop {
+  position: absolute;
+  right: 16px;
+  bottom: 18px;
+  z-index: 4;
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  border: none;
+  border-radius: 999px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  cursor: pointer;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+.toTop svg {
+  width: 18px;
+  height: 18px;
+  /* The only chevron in the set points down. */
+  transform: rotate(180deg);
+}
+.toTopOn {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+.toTop:hover {
+  background: var(--nc-violet-400);
+}
+.toTop:focus-visible {
+  outline: 2px solid var(--nc-violet-500);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .toTop {
+    transition: none;
+  }
+}
+
 .list {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   padding: 0 10px 16px;
+  /* Firefox, and Chrome from 121. Where these are honoured the WebKit rules below are
+     ignored outright, so the two have to describe the same scrollbar rather than
+     combine into one. */
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--nc-violet-500) 55%, transparent) transparent;
+}
+.snoozeWrap {
+  position: relative;
+  display: inline-flex;
+}
+.snoozeMenu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 60;
+  min-width: 232px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background: var(--nc-ink-1);
+  border: 1px solid var(--nc-line-2);
+  border-radius: var(--radius-card);
+  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .65);
+}
+.snoozeItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  min-height: 38px;
+  padding: 0 10px;
+  border: none;
+  border-radius: var(--radius-control);
+  background: transparent;
+  color: var(--nc-fg-1);
+  font: 500 13px/1.3 var(--nc-font-sans);
+  cursor: pointer;
+  text-align: left;
+}
+.snoozeItem:hover { background: var(--nc-ink-3); }
+.snoozeWhen {
+  font: 500 12px/1.3 var(--nc-font-mono);
+  color: var(--nc-fg-3);
+  white-space: nowrap;
+}
+
+/* One band, moved to whichever row is being dragged, rather than a wrapper per row: the
+   rows are staggered on entry by :nth-child and wrapping them would reset every one of
+   those to the first position. */
+.swipeBand {
+  position: absolute;
+  left: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  border-radius: 12px;
+  font: 600 13px/1 var(--nc-font-sans);
+  color: #fff;
+  pointer-events: none;
+}
+.swipeBandRight {
+  justify-content: flex-start;
+  background: color-mix(in srgb, var(--nc-violet-500) 55%, transparent);
+}
+.swipeBandLeft {
+  justify-content: flex-end;
+  background: color-mix(in srgb, var(--nc-danger) 55%, transparent);
+}
+.swipeBandArmed.swipeBandRight { background: var(--nc-violet-500); }
+.swipeBandArmed.swipeBandLeft { background: var(--nc-danger); }
+
+.list {
+  position: relative;
+}
+/* The row rides the finger, so it must not animate back on every frame. */
+.item {
+  touch-action: pan-y;
+}
+
+/* Sits between the header and the rows, growing out of the gap as the list is pulled
+   down, so the gesture has something to answer it. */
+.pullHint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: opacity 120ms ease;
+}
+.pullSpinner {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 999px;
+  background: var(--nc-ink-2);
+  border: 1px solid var(--nc-line-1);
+  color: var(--nc-fg-3);
+}
+.pullSpinner svg {
+  width: 16px;
+  height: 16px;
+}
+.pullSpinnerReady {
+  background: var(--nc-violet-500);
+  border-color: var(--nc-violet-500);
+  color: #fff;
+}
+
+/* Safari, and older Chrome. */
+.list::-webkit-scrollbar {
+  width: 10px;
+}
+.list::-webkit-scrollbar-track {
+  background: transparent;
+}
+.list::-webkit-scrollbar-thumb {
+  /* The transparent border plus padding-box clipping is what insets the thumb: there is
+     no padding property on a scrollbar, and a full-width bar against the rows reads as
+     part of the list rather than a control over it. */
+  background: color-mix(in srgb, var(--nc-violet-500) 45%, transparent);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 999px;
+}
+.list::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--nc-violet-500) 78%, transparent);
+  background-clip: padding-box;
 }
 .app[data-density='relaxed'] {
   --row-pad: 18px 16px;
@@ -776,9 +963,9 @@
   color: var(--nc-success);
   border-color: color-mix(in srgb, var(--nc-success) 40%, transparent);
 }
-.chipScheduled { color: var(--nc-warn); border-color: rgba(251,191,36,.3); }
+.chipScheduled { color: var(--nc-warn); border-color: color-mix(in srgb, var(--nc-warn) 30%, transparent); }
 .chipDelivered { color: var(--nc-success); border-color: rgba(52,211,153,.3); }
-.chipBounced { color: var(--nc-danger); border-color: rgba(248,113,113,.3); }
+.chipBounced { color: var(--nc-danger); border-color: color-mix(in srgb, var(--nc-danger) 30%, transparent); }
 .chipDraft { color: var(--nc-violet-200); border-color: rgba(165,120,255,.3); }
 
 .emptyList {
@@ -918,8 +1105,8 @@
 }
 .actionBtn:hover { color: var(--nc-fg-1); border-color: var(--nc-line-2); background: var(--nc-ink-2); }
 .actionBtn svg { width: 13px; height: 13px; }
-.actionDanger { color: var(--nc-danger); border-color: rgba(248,113,113,.3); }
-.actionDanger:hover { color: var(--nc-danger-soft); border-color: rgba(248,113,113,.55); background: rgba(248,113,113,.06); }
+.actionDanger { color: var(--nc-danger); border-color: color-mix(in srgb, var(--nc-danger) 30%, transparent); }
+.actionDanger:hover { color: var(--nc-danger-soft); border-color: color-mix(in srgb, var(--nc-danger) 55%, transparent); background: color-mix(in srgb, var(--nc-danger) 6%, transparent); }
 .countdownChip {
   display: inline-flex;
   align-items: center;
@@ -928,7 +1115,7 @@
   font-size: 12px;
   color: var(--nc-warn);
   padding: 8px 12px;
-  border: 1px solid rgba(251,191,36,.3);
+  border: 1px solid color-mix(in srgb, var(--nc-warn) 30%, transparent);
   border-radius: 9px;
 }
 .activity {
@@ -1096,12 +1283,11 @@
   padding: 10px 0 2px;
 }
 .attachFloatBody .attachGrid { margin: 0 14px 10px; }
-/* One column down the sheet: the text is capped and centred for readability, so anything
-   that follows it lines up with it instead of hugging the far left of a wide pane. */
+/* Tiles sit in the sheet's own bottom-left corner, flush with its border, the way they
+   did before the sheet became a centred page. The page stays centred; only the tiles
+   went back to the corner. */
 .threadMsgBody .attachGrid {
-  max-width: none;
-  margin: 0;
-  padding: 0 34px 30px;
+  margin: 12px 0 0;
 }
 .attachPillWrap {
   position: absolute;
@@ -1131,23 +1317,20 @@
 .readerBody {
   flex: 1;
   margin: 0 28px 24px;
-  border-radius: var(--radius-card);
-  border: 1px solid var(--nc-line-1);
   overflow: hidden;
-  background: var(--nc-ink-1);
   min-height: 0;
 }
 .readerFrame {
   width: 100%;
   height: 100%;
   border: none;
-  background: var(--nc-ink-1);
+  background: transparent;
 }
 .readerText {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 30px 34px;
-  font: 400 15px/1.7 var(--nc-font-sans);
+  max-width: 860px;
+  margin: 0;
+  padding: 8px 0 24px;
+  font: 400 15px/var(--mail-lead, 1.3) var(--nc-font-sans);
   color: var(--nc-fg-1);
   white-space: pre-wrap;
   word-break: break-word;
@@ -1156,7 +1339,6 @@
   overflow-y: auto;
   /* A plain-text part carries no styling of its own, so it follows the app rather
      than sitting on the white paper an HTML email brings with it. */
-  background: var(--nc-ink-2);
   -webkit-font-smoothing: antialiased;
 }
 .readerSource {
@@ -1186,7 +1368,73 @@
   padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
   background: var(--nc-ink-0);
   border-top: 1px solid var(--nc-line-1);
+  animation: ncReplyIn .24s cubic-bezier(.2, .7, .3, 1) both;
+}
+@keyframes ncReplyIn {
+  from { opacity: 0; transform: translateY(14px); }
+  to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .quickReplyBar { animation: none; }
+}
+/* The phone's stand-in for the docked reply: one line that opens the composer as a page.
+   It keeps the dock's place at the foot of the reader so the layout does not shift. */
+.replyLaunch {
+  flex: 0 0 auto;
+  margin-top: auto;
+  position: sticky;
+  bottom: 0;
+  z-index: 6;
+  display: flex;
+  gap: 8px;
+  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
+  background: var(--nc-ink-0);
+  border-top: 1px solid var(--nc-line-1);
+}
+.replyLaunchBtn {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: 12px;
+  border: 1px solid var(--nc-line-1);
+  background: var(--nc-ink-2);
+  color: var(--nc-fg-2);
+  font: 400 14px/1.4 var(--nc-font-sans);
+  text-align: left;
+  cursor: pointer;
+}
+.replyLaunchBtn span {
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
+.replyLaunchBtn svg {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  color: var(--nc-fg-3);
+}
+.replyLaunchAll {
+  flex: 0 0 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border-radius: 12px;
+  border: 1px solid var(--nc-line-1);
+  background: transparent;
+  color: var(--nc-fg-2);
+  cursor: pointer;
+}
+.replyLaunchAll svg {
+  width: 17px;
+  height: 17px;
+}
+
 .replyRecips {
   display: flex;
   flex-direction: column;
@@ -1445,6 +1693,58 @@
   padding: 0;
 }
 .rteSwatchHi { border-radius: 50%; }
+.tickerHost {
+  display: inline-block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+}
+.tickerBlock { display: block; }
+.tickerHost[data-ticker='on'] { text-overflow: clip; }
+.tickerText { display: inline-block; white-space: nowrap; }
+.tickerHost[data-ticker='on'] .tickerText { animation: ncTicker var(--ticker-duration, 8s) ease-in-out var(--ticker-delay, 0s) infinite alternate; }
+@keyframes ncTicker {
+  0%, 14% { transform: translateX(0); }
+  86%, 100% { transform: translateX(calc(-1 * var(--ticker-shift, 0px))); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .tickerHost[data-ticker='on'] .tickerText { animation: none; }
+  .tickerHost[data-ticker='on'] { text-overflow: ellipsis; }
+}
+.itemSubject { display: flex; align-items: center; gap: 4px; }
+.itemSubjectText { flex: 1; }
+.threadMsgFrom { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
+.threadMsgFromText { flex: 1; }
+.rteColourDot {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: conic-gradient(#b91c1c, #b45309, #047857, #1d4ed8, #6d28d9, #b91c1c);
+}
+.rtePalette {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 12px;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transform: translateY(-6px);
+  background: var(--nc-ink-2);
+  transition: max-height .28s var(--nc-ease-out), opacity .22s var(--nc-ease-out), transform .28s var(--nc-ease-out), padding .28s var(--nc-ease-out);
+}
+.rtePaletteOpen {
+  max-height: 60px;
+  opacity: 1;
+  transform: none;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--nc-line-1);
+}
+.rtePaletteGroup { display: flex; align-items: center; gap: 6px; }
 .rteContent {
   flex: 1;
   min-height: 0;
@@ -1457,23 +1757,24 @@
   min-height: 260px;
   padding: 20px 22px;
   outline: none;
-  font: 400 var(--rte-size, 15px)/1.65 var(--rte-font, Arial, Helvetica, sans-serif);
+  font: 400 var(--rte-size, 15px)/var(--rte-lead, 1.3) var(--rte-font, Arial, Helvetica, sans-serif);
   color: var(--nc-fg-1);
 }
-.rteSurface p { margin: 0 0 14px; }
+.rteSurface p { margin: 0 0 var(--rte-gap, 8px); }
 .rteSurface h1 { font-size: 24px; margin: 22px 0 12px; }
 .rteSurface h2 { font-size: 20px; margin: 20px 0 10px; }
 .rteSurface h3 { font-size: 17px; margin: 18px 0 8px; }
-.rteSurface ul, .rteSurface ol { margin: 0 0 14px; padding-left: 22px; }
+.rteSurface ul, .rteSurface ol { margin: 0 0 var(--rte-gap, 8px); padding-left: 22px; }
 .rteSurface li { margin: 0 0 6px; }
 .rteSurface a { color: var(--nc-violet-500); text-decoration: underline; }
 .rteSurface blockquote {
-  margin: 0 0 14px;
+  margin: 0 0 var(--rte-gap, 8px);
   padding-left: 14px;
   border-left: 3px solid var(--nc-line-2);
   color: var(--nc-fg-3);
 }
 .rteSurface pre {
+  margin: 0 0 var(--rte-gap, 8px);
   background: var(--nc-ink-3);
   padding: 12px 14px;
   border-radius: 6px;
@@ -1481,7 +1782,7 @@
   font: 400 13px/1.5 var(--nc-font-mono);
 }
 .rteSurface img { max-width: 100%; height: auto; }
-.rteImageWrap { position: relative; margin: 0 0 14px; }
+.rteImageWrap { position: relative; margin: 0 0 var(--rte-gap, 8px); }
 .rteImageWrap[data-align='center'] { text-align: center; }
 .rteImageWrap[data-align='right'] { text-align: right; }
 .rteImageBox {
@@ -1563,7 +1864,7 @@
   font-size: 11px;
   color: var(--nc-fg-2);
 }
-.rteSurface table { border-collapse: collapse; margin: 0 0 14px; width: 100%; }
+.rteSurface table { border-collapse: collapse; margin: 0 0 var(--rte-gap, 8px); width: 100%; }
 .rteSurface td, .rteSurface th {
   border: 1px solid var(--nc-line-2);
   padding: 7px 10px;
@@ -1607,8 +1908,8 @@
   max-height: 64px;
   margin-bottom: 10px;
 }
-.composeSignatureBody { font: 400 13px/1.6 var(--nc-font-sans); color: var(--nc-fg-2); }
-.composeSignatureBody p { margin: 0 0 6px; }
+.composeSignatureBody { font: 400 13px/1 var(--nc-font-sans); color: var(--nc-fg-2); }
+.composeSignatureBody p { margin: 0 0 2px; }
 
 /* Logo picker in settings. */
 .sigLogoRow {
@@ -1857,7 +2158,7 @@
   padding: 0 2px;
 }
 .addrChip button:hover { color: var(--nc-danger); }
-.addrChipBad { border-color: rgba(248,113,113,.5); color: var(--nc-danger-soft); }
+.addrChipBad { border-color: color-mix(in srgb, var(--nc-danger) 50%, transparent); color: var(--nc-danger-soft); }
 
 .toolbar {
   display: flex;
@@ -1918,6 +2219,15 @@
   transition: border-color var(--dur-fast) var(--nc-ease-out), color var(--dur-fast) var(--nc-ease-out);
 }
 .selectBtn:hover { border-color: var(--nc-line-2); color: var(--nc-fg-1); }
+.selectGlyph {
+  flex-shrink: 0;
+  font: 600 11px/1 var(--nc-font-mono);
+  letter-spacing: .02em;
+  color: var(--nc-fg-4);
+}
+.selectGlyphSerif { font: 600 14px/1 Georgia, 'Times New Roman', serif; color: var(--nc-fg-3); }
+.selectEditable .selectGlyph { margin-left: 9px; }
+.selectEditable .selectGlyph + .selectInput { padding-left: 6px; }
 .selectBtn > span {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2029,7 +2339,7 @@
   border-radius: 7px;
   transition: color var(--dur-fast) var(--nc-ease-out), background-color var(--dur-fast) var(--nc-ease-out);
 }
-.tplDelete:hover { color: var(--nc-danger); background: rgba(248, 113, 113, .08); }
+.tplDelete:hover { color: var(--nc-danger); background: color-mix(in srgb, var(--nc-danger) 8%, transparent); }
 .tplSaveRow {
   display: flex;
   gap: 6px;
@@ -2079,9 +2389,9 @@
   border: none;
   background: transparent;
   color: var(--nc-fg-3);
-  font: 600 12px/1 var(--nc-font-sans);
-  padding: 6px 10px;
-  border-radius: 6px;
+  font: 600 11.5px/1 var(--nc-font-sans);
+  padding: 4px 9px;
+  border-radius: 5px;
   cursor: pointer;
   transition: background-color var(--dur-fast) var(--nc-ease-out), color var(--dur-fast) var(--nc-ease-out);
 }
@@ -2093,16 +2403,16 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 10px;
+  gap: 8px;
   flex-wrap: wrap;
-  margin: 0 28px 12px;
+  margin: 0 28px 8px;
 }
 .readerModeTabs {
   display: inline-flex;
   gap: 2px;
   background: var(--nc-ink-2);
   border: 1px solid var(--nc-line-1);
-  border-radius: 8px;
+  border-radius: 7px;
   padding: 2px;
 }
 
@@ -2235,18 +2545,21 @@
 }
 .threadMsg {
   flex: 0 0 auto;
-  border: 1px solid var(--nc-line-1);
-  border-radius: var(--radius-card);
+  border: 0;
+  border-radius: 0;
   overflow: hidden;
-  background: var(--nc-ink-1);
+  background: transparent;
 }
-.threadMsgOpen { border-color: var(--nc-line-2); }
+.threadMsg + .threadMsg { border-top: 1px solid var(--nc-line-1); }
+.threadMsgOpen .threadMsgHead { border-bottom: 1px solid var(--nc-line-1); }
 .threadMsgHead {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%;
   padding: var(--thread-pad);
+  padding-left: 0;
+  padding-right: 0;
   background: transparent;
   border: none;
   cursor: pointer;
@@ -2287,12 +2600,32 @@
 .threadClip svg { width: 13px; height: 13px; }
 /* ── Attachment tiles ────────────────────────────────────── */
 .attachGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
+  display: flex;
   gap: 8px;
   margin: 0 28px 14px;
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  padding-bottom: 6px;
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--nc-violet-500) 55%, transparent) transparent;
+}
+.attachGrid::-webkit-scrollbar { height: 8px; }
+.readerAttach .attachGrid { margin: 0; flex: 1 1 100%; }
+.attachGrid::-webkit-scrollbar-track { background: transparent; }
+.attachGrid::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--nc-violet-500) 45%, transparent);
+  background-clip: padding-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
+}
+.attachGrid::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--nc-violet-500) 78%, transparent);
+  background-clip: padding-box;
 }
 .attachTile {
+  flex: 0 0 auto;
+  width: min(300px, 78vw);
+  scroll-snap-align: start;
   display: flex;
   align-items: center;
   gap: 9px;
@@ -2566,8 +2899,8 @@
   vertical-align: middle;
   white-space: nowrap;
 }
-.linkBadgeWarn { color: var(--nc-warn); border: 1px solid rgba(251,191,36,.4); }
-.linkBadgeBad { color: var(--nc-danger); border: 1px solid rgba(248,113,113,.45); }
+.linkBadgeWarn { color: var(--nc-warn); border: 1px solid color-mix(in srgb, var(--nc-warn) 40%, transparent); }
+.linkBadgeBad { color: var(--nc-danger); border: 1px solid color-mix(in srgb, var(--nc-danger) 45%, transparent); }
 .orderDivider {
   width: 1px;
   height: 16px;
@@ -2576,12 +2909,12 @@
   flex-shrink: 0;
 }
 .orderToggle {
-  padding: 5px 10px;
-  border-radius: 7px;
+  padding: 3px 8px;
+  border-radius: 6px;
   border: 1px solid var(--nc-line-1);
   background: transparent;
   color: var(--nc-fg-2);
-  font: 600 11.5px/1 var(--nc-font-mono);
+  font: 600 11px/1 var(--nc-font-mono);
   cursor: pointer;
   white-space: nowrap;
   transition: color var(--dur-fast) var(--nc-ease-out), border-color var(--dur-fast) var(--nc-ease-out), background-color var(--dur-fast) var(--nc-ease-out);
@@ -2611,18 +2944,8 @@
    all four sides, so you can see where the mail begins and where it ends rather than a
    band of white running into the furniture above it. */
 .threadMsgBody {
-  /* A page, not a wall: the paper is the width of the column it carries and sits centred in
-     the pane, rather than stretching the full width with the text stranded in the middle. */
-  /* Auto margins on a grid item shrink it to its content, which sized the page to whatever
-     the longest line happened to be. The width is stated, and the margins only centre it. */
-  width: min(868px, calc(100% - var(--thread-inset) * 2));
-  margin: var(--thread-inset) auto;
-  border: 1px solid var(--nc-line-1);
-  border-radius: var(--radius-card);
-  /* The sheet is the paper the mail is printed on, so it is the paper's colour. Left on the
-     card's own tone it vanished into the card, and the only edge you could see was the one
-     the message's own white background drew, square, wherever its markup happened to start. */
-  background: var(--nc-ink-0);
+  width: 100%;
+  margin: 0 0 8px;
   font-size: var(--row-subject);
   line-height: var(--row-lead);
   overflow: hidden;
@@ -2631,7 +2954,7 @@
   width: 100%;
   min-height: 120px;
   border: none;
-  background: var(--nc-ink-1);
+  background: transparent;
   display: block;
 }
 .threadMsgBody .readerText,
@@ -2645,9 +2968,10 @@
 .threadMsgBody .readerText,
 .threadMsgBody .readerSource {
   max-width: none;
+  padding: 6px 0 12px;
   margin: 0;
 }
-.threadMsgBody .readerText { padding-bottom: 16px; }
+.threadMsgBody .readerText { padding-bottom: 16px; padding-left: 0; padding-right: 0; }
 .threadMsgBody .readerAttach { padding-top: 14px; }
 
 .campaign {
@@ -3014,6 +3338,11 @@
   font: 500 14px/1 var(--nc-font-sans);
   color: var(--nc-fg-1);
 }
+.toastError {
+  border-color: color-mix(in srgb, var(--nc-danger) 45%, transparent);
+  color: var(--nc-danger);
+}
+
 .toastCount {
   font-family: var(--nc-font-mono);
   color: var(--nc-warn);
@@ -3097,9 +3426,9 @@
   flex-direction: column;
   gap: 7px;
   padding: 11px 13px;
-  border: 1px solid rgba(248, 113, 113, .32);
+  border: 1px solid color-mix(in srgb, var(--nc-danger) 32%, transparent);
   border-radius: var(--radius-control);
-  background: rgba(248, 113, 113, .07);
+  background: color-mix(in srgb, var(--nc-danger) 7%, transparent);
 }
 .loginError {
   font: 500 13px/1.45 var(--nc-font-sans);
@@ -3368,8 +3697,8 @@
   margin: 0 28px 14px;
   padding: 10px 14px;
   border-radius: 10px;
-  border: 1px solid rgba(251,191,36,.3);
-  background: rgba(251,191,36,.06);
+  border: 1px solid color-mix(in srgb, var(--nc-warn) 30%, transparent);
+  background: color-mix(in srgb, var(--nc-warn) 6%, transparent);
   color: var(--nc-fg-2);
   font: 500 13px/1.4 var(--nc-font-sans);
 }
@@ -3471,7 +3800,8 @@
   position: fixed;
   inset: 0;
   background: rgba(5, 3, 9, .55);
-  z-index: 440;
+  /* Above .topRight, which floats at 500 and was landing squarely on the close button. */
+  z-index: 530;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3767,6 +4097,41 @@
   gap: 15px;
   padding: var(--thread-pad);
 }
+/* The whole reader, drawn as shapes, for the moment between clicking a conversation and
+   its messages arriving. It stands in for the header as well as the body, because that is
+   what is missing: the pane otherwise keeps showing "Nothing open" or the last message. */
+.readerSkeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+  /* The real header, actions and thread all sit 28px in; anything else makes the page
+     jump sideways the moment it replaces the skeleton. */
+  padding: 22px 28px 0;
+}
+/* Scoped under the skeleton so they outrank the plain .skelBar rule, which comes later in
+   the file and would otherwise flatten the subject back to a 13px line. */
+.readerSkeleton .skelSubject {
+  height: 22px;
+  width: 62%;
+  border-radius: 8px;
+}
+.skelActions {
+  display: flex;
+  gap: 10px;
+}
+.skelActions .skelBar {
+  width: 96px;
+  height: 40px;
+  border-radius: var(--radius-control);
+}
+.readerSkeleton .bodySkeleton {
+  padding: 0;
+}
+/* The block placeholder is ink-2, which is white in the light theme — the same white the
+   reader is painted on, so it vanished. ink-3 is a visible step in all three themes. */
+.readerSkeleton .skelBlock {
+  background: var(--nc-ink-3);
+}
 .skelHeadRow {
   display: flex;
   align-items: center;
@@ -4463,7 +4828,7 @@
   gap: 2px;
   background: var(--nc-ink-2);
   border: 1px solid var(--nc-line-1);
-  border-radius: 8px;
+  border-radius: 7px;
   padding: 2px;
 }
 
@@ -5016,6 +5381,27 @@
   animation: ncNoticeIn .26s cubic-bezier(.2, .7, .3, 1) both;
   will-change: transform, opacity;
 }
+/* The card behind peeks out above the one in front, so the next thing to deal with is
+   visible without being readable or clickable until it comes forward. */
+.pwNoticeBehind {
+  z-index: calc(75 - var(--depth, 1));
+  transform: translateY(calc(var(--depth, 1) * -12px)) scale(calc(1 - var(--depth, 1) * .04));
+  opacity: .92;
+  pointer-events: none;
+  animation: none;
+  transition: transform .26s cubic-bezier(.2, .7, .3, 1);
+}
+.pwNoticeMore {
+  position: absolute;
+  top: -9px;
+  right: 14px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  background: var(--nc-violet-500);
+  color: #fff;
+  font: 600 11px/1 var(--nc-font-sans);
+  letter-spacing: .01em;
+}
 
 .pwNoticeTitle {
   margin: 0;
@@ -5364,7 +5750,7 @@
 }
 .sigPreviewOpen .sigPreviewFold { max-height: 2000px; }
 .sigPreviewBody {
-  font: 400 13px/1.6 var(--nc-font-sans);
+  font: 400 13px/1 var(--nc-font-sans);
   color: var(--nc-fg-2);
 }
 .sigPreviewBody a { color: var(--nc-violet-500); }
@@ -5910,9 +6296,7 @@
   background: linear-gradient(to bottom, transparent 0%, var(--nc-ink-1) 78%);
   pointer-events: none;
 }
-/* Its measured height, set by the element itself, so the reveal finishes with the
-   content rather than running on against an arbitrary ceiling. */
-.composeSignatureOpen .composeSignatureBody { max-height: var(--sig-h, 1200px); cursor: default; }
+.composeSignatureOpen .composeSignatureBody { max-height: none; overflow: visible; cursor: default; }
 .composeSignatureOpen { padding-bottom: 30px; }
 
 @media (prefers-reduced-motion: reduce) {
@@ -6259,6 +6643,12 @@
     right: calc(18px + env(safe-area-inset-right, 0px));
     bottom: calc(18px + env(safe-area-inset-bottom, 0px));
   }
+  /* Above the compose button, which appears at this width in the same corner: 54px tall
+     sitting 18px off the bottom, so anything below 84px is underneath it. */
+  .toTop {
+    right: calc(18px + env(safe-area-inset-right, 0px));
+    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
+  }
   .list {
     padding-left: calc(10px + env(safe-area-inset-left, 0px));
     padding-right: calc(10px + env(safe-area-inset-right, 0px));
@@ -6274,6 +6664,7 @@
     width: auto;
     z-index: 445;
   }
+  .pwNoticeBehind { z-index: calc(445 - var(--depth, 1)); }
   /* Forty-four pixels is the smallest thing a thumb finds reliably. */
   .itemStar,
   .iconBtn,
@@ -6318,3 +6709,166 @@
     max-width: none;
   }
 }
+
+/* ---- Phone corrections ------------------------------------------------------------
+   Everything here was found by hit-testing the rendered page at 375x812 rather than by
+   reading the stylesheet, because each fault only appears once the list is full width. */
+@media (max-width: 720px) {
+  /* The notification and theme buttons float over the top-right corner. With a reading
+     pane beside it that corner is empty; without one it is the list header, and these two
+     sat on top of Refresh so it could not be tapped at all. Drop them behind anything that
+     opens over the mailbox, and give the header room to put Refresh beside them. */
+  .topRight {
+    top: 18px;
+    right: 12px;
+    gap: 6px;
+    z-index: 405;
+  }
+  .listHead .refreshBtn { display: none; }
+  .actions { row-gap: 8px; gap: 6px; padding: 12px 15px; }
+  .app { --thread-inset: 15px; }
+  .readerHead { padding: 18px 15px 0; }
+  .readerBody { margin: 0 15px 16px; }
+  .readerModeBar { margin: 0 15px 12px; }
+  .thread { padding-left: 15px; padding-right: 15px; }
+  .attachGrid { margin: 0 15px 12px; }
+  .activity { margin: 0 15px 14px; padding: 10px 12px; }
+  .readerAttach { margin: 0 15px 14px; }
+  .attachFloat {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+    border-radius: 14px 14px 0 0;
+  }
+  .attachFloatBody .attachGrid { margin: 0 15px 10px; }
+  .readerText { padding: 16px 15px; }
+  .composeSignature { margin: 0 15px 14px; }
+  .quickReplyBar { padding-left: 15px; padding-right: 15px; }
+  .actions .iconBtn { min-width: 40px; width: 40px; padding: 0; }
+  .actionSpacer { flex: 1 0 100%; min-width: 0; height: 0; }
+  .rteToolbar {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 6px;
+    padding: 8px 12px;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  .rteToolbar::-webkit-scrollbar { display: none; }
+  .rteGroup { flex: 0 0 auto; scroll-snap-align: start; }
+  .rtePalette .rteSwatch { width: 24px; height: 24px; }
+  .compose,
+  .composeExpanded {
+    top: auto;
+    bottom: 0;
+    height: 80dvh;
+    max-height: 80dvh;
+    border-radius: 18px 18px 0 0;
+  }
+  .listHead {
+    padding-right: 106px;
+  }
+  .listTitle {
+    flex: 0 0 auto;
+  }
+  .listMeta {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  /* "60 convers…" reads as a fault rather than as a count. Below this width the number
+     carries it alone; the unit is still in the header's tooltip and spelled out in full
+     at the end of the list. */
+  .listMetaUnit {
+    display: none;
+  }
+  /* An earlier rule lifted this clear of the compose button; a later one pinned it back
+     over the top, so its own buttons were half covered. */
+  .pwNotice {
+    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
+  }
+  /* Nine formatting buttons at a size a finger can hit wrap onto three rows and take 134px
+     of a reply that has not been written yet. One row that scrolls keeps every control and
+     costs a third of the height. */
+  .replyToolbar,
+  .readerModeTabs,
+  .readerLayoutTabs {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .replyToolbar::-webkit-scrollbar,
+  .readerModeTabs::-webkit-scrollbar,
+  .readerLayoutTabs::-webkit-scrollbar {
+    display: none;
+  }
+  .replyToolbar > *,
+  .readerModeTabs > *,
+  .readerLayoutTabs > * {
+    flex: 0 0 auto;
+  }
+
+  /* The card scrolls, and the footer scrolled away with it, so Save was reachable only
+     after finding the bottom of a long form. */
+  .settingsFoot {
+    position: sticky;
+    bottom: 0;
+    z-index: 1;
+    margin-top: 8px;
+    padding: 10px 0 2px;
+    background: var(--nc-ink-1);
+    box-shadow: 0 -10px 16px -12px rgba(0, 0, 0, .5);
+  }
+}
+
+/* A finger is not a mouse pointer: anything it has to hit needs to be a target, not a
+   label. These were 15px to 32px tall, which is a miss more often than a hit. */
+@media (pointer: coarse) {
+  .modeTab,
+  .orderToggle {
+    min-height: 24px;
+  }
+  .settingsNavItem {
+    min-height: 40px;
+  }
+  .toolBtn {
+    min-width: 40px;
+    min-height: 40px;
+  }
+  .headerToggle,
+  .replyRecipsToggle,
+  .composeSignatureLabel,
+  .composeSignatureEdit,
+  .composeSignatureMore {
+    min-height: 36px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+  }
+  .headerToggle {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+@media (max-width: 720px) {
+  /* Compose is already the whole screen here, so a control that makes it full width has
+     nothing to do, and a phone has no Esc key to press. Between them they wrapped the
+     compose header onto four lines. */
+  .composeExpandBtn,
+  .composeHintKeys {
+    display: none;
+  }
+  /* The expanded composer takes its left edge from --list-w, and the chosen list width
+     is written onto .app as an inline variable — which outranks this breakpoint's zero.
+     So it opened 400px to the right of a 375px screen, wholly out of view. */
+  .composeExpanded {
+    left: 0;
+    right: 0;
+    width: auto;
+  }
+}