liefdesbrieven

/* Globale basisstijlen. Kleuren spiegelen src/theme.js (BLUE = #3D63C9). */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  /* geen "rubber band" over de hele pagina op iOS; scrollen gebeurt in de shell */
  overscroll-behavior-y: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input,
textarea {
  font-family: inherit;
}

input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid #3d63c9;
  outline-offset: 2px;
}

/* Checkbox in de stijl van de chips en invoervelden: inktrand, aangevinkt = inkt met wit vinkje (INK = #1F2C55) */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #1f2c55;
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  vertical-align: middle;
}
input[type="checkbox"]:checked {
  background-color: #1f2c55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}
input[type="checkbox"]:disabled {
  cursor: default;
}

/* Laadscherm: envelop zweeft zachtjes */
@keyframes loading-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-8px) rotate(1.5deg);
  }
}
.loading-envelope {
  animation: loading-float 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(31, 44, 85, 0.12));
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Layout-shell (mobielvriendelijk) ----------
   De shell is precies één schermhoogte hoog: kop en tabs staan vast, alleen de inhoud
   (.app-main) scrolt — als een app, niet als een webpagina. 100dvh volgt de zichtbare
   hoogte op telefoons (adresbalk in/uit); 100vh is de fallback. Safe-area-insets houden
   de inhoud vrij van notch en home-indicator (viewport-fit=cover). */
.app-bg {
  height: 100vh;
  height: 100dvh;
}

.app-shell {
  max-width: 480px;
  margin: 0 auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Notch/statusbalk vrijhouden — ónder de luchtpostrand, niet erboven: de rand loopt tot
   aan de schermrand (ook achter de camera-notch), de inhoud begint pas onder de statusbalk.
   De rand zelf (8px, AirmailEdge) telt mee als safe-area, dus die gaat van de inset af. */
.safe-top {
  height: max(0px, calc(env(safe-area-inset-top, 0px) - 8px));
}

/* Alles in de shell (rand, kop, tabs) houdt zijn hoogte; alleen .app-main rekt en scrolt */
.app-shell > * {
  flex-shrink: 0;
}

/* Het scrollende deel van elk scherm; onderaan blijft de home-indicator/navigatiebalk vrij.
   Let op: zet in views geen inline `padding` (shorthand) — die overschrijft de safe-area.
   Alleen paddingTop is veilig; een view met een eigen voet ónder het scrollvlak (ThreadView:
   de tabbalk) zet paddingBottom en laat die voet de inset regelen. */
.app-main {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Dialogen (melden, privacy, inzage): sheet vanaf de onderkant, met ruimte voor de home-indicator */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 50;
}

.dialog-sheet {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Tablets ----------
   De kolom mag breder. Niet op breedte alleen: een telefoon in landschap is óók breed, maar laag,
   en daar helpt een bredere kolom niets — de regels worden lang terwijl de hoogte al krap is. Pas
   als het scherm in béíde richtingen ruim is (tablet, uitgevouwen foldable) gaat hij naar 640px.
   Breder wordt het niet: dan worden de regels van een brief te lang om prettig te lezen. Staat
   ná .dialog-sheet, want een mediaquery telt niet mee in de specificiteit — bij gelijke
   specificiteit wint de laatste regel. */
@media (min-width: 600px) and (min-height: 600px) {
  .app-shell,
  .dialog-sheet {
    max-width: 640px;
  }

  /* Iets meer lucht langs de randen, in verhouding tot de bredere kolom */
  .app-main {
    padding: 28px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  }
}