/* Offline-safe: system fonts only (no Google Fonts, so it works with no internet) */
:root {
  --ink: #2A2823;
  --muted: #6B645A;
  --solid: #2A2823;        /* dark pill buttons, like the "+" in the reference */
  --solid-ink: #FFFFFF;
  --glass: rgba(255, 255, 255, .38);
  --glass-strong: rgba(255, 255, 255, .6);
  --glass-edge: rgba(255, 255, 255, .7);
  --rule: rgba(42, 40, 35, .09);
  --ok: #2E7D50;
  --danger: #B3304D;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mesh:
    radial-gradient(55% 35% at 12% 18%, #FFE86E 0, transparent 70%),
    radial-gradient(50% 32% at 92% 12%, #F7B3D8 0, transparent 70%),
    radial-gradient(60% 40% at 8% 62%, #FFBF84 0, transparent 70%),
    radial-gradient(45% 35% at 55% 50%, #FFF4A6 0, transparent 70%),
    radial-gradient(55% 38% at 95% 88%, #B7A4F2 0, transparent 70%),
    radial-gradient(50% 30% at 10% 98%, #F9A9C4 0, transparent 70%),
    #FCDCC4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F4EEF6;
    --muted: #BDB4C6;
    --solid: #F4EEF6;
    --solid-ink: #1D1830;
    --glass: rgba(255, 255, 255, .09);
    --glass-strong: rgba(255, 255, 255, .15);
    --glass-edge: rgba(255, 255, 255, .18);
    --rule: rgba(255, 255, 255, .1);
    --ok: #86D9A5;
    --danger: #FF9DB0;
    --mesh:
      radial-gradient(55% 35% at 12% 18%, #6B5A1E 0, transparent 70%),
      radial-gradient(50% 32% at 92% 12%, #7A2F5E 0, transparent 70%),
      radial-gradient(60% 40% at 8% 62%, #7A4326 0, transparent 70%),
      radial-gradient(55% 38% at 95% 88%, #4B3A94 0, transparent 70%),
      radial-gradient(50% 30% at 10% 98%, #7A2E55 0, transparent 70%),
      #1D1830;
  }
}

* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0; min-height: 100%; color: var(--ink);
  font: 1rem/1.5 var(--sans); letter-spacing: -.01em;
  padding: env(safe-area-inset-top) 0 calc(6.5rem + env(safe-area-inset-bottom));
}
/* Gradient lives on a fixed layer (iOS Safari ignores background-attachment: fixed) */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--mesh); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.03em; }
h1 { font-size: 1rem; }
h2 { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.1; text-align: center; margin: 2rem 0 .75rem; }
h3 { font-size: 1.1rem; margin-bottom: .6rem; }

/* Reusable glass surface */
.glass, .model, .result, .entry, .modal-box, .tabs, .moods span, .btn:not(.primary):not(.danger) {
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}

/* Header */
.top { text-align: center; padding: 1rem 1.25rem 0; max-width: 40rem; margin: 0 auto; }
.badge { display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0 0; padding: .35rem .8rem; font-size: .8rem; color: var(--muted); border-radius: 2rem; background: var(--glass); border: 1px solid var(--glass-edge); }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); flex: none; }

/* Model status banner */
.model { max-width: 36rem; margin: 1rem 1.25rem 0; padding: .8rem 1.1rem; border-radius: 1.25rem; }
@media (min-width: 40rem) { .model { margin-inline: auto; } }
.model p { margin: 0 0 .5rem; font-size: .9rem; }
.model progress { width: 100%; height: .4rem; accent-color: var(--solid); }
.model[data-state="ready"] #model-text { color: var(--ok); }
.model[data-state="error"] #model-text { color: var(--danger); }
.model[data-state="ready"] progress, .model[data-state="error"] progress { display: none; }
.model #model-text { margin: 0; font-size: .85rem; }
.model-controls { display: flex; align-items: flex-end; gap: .75rem; margin-top: 1rem; }
.model-field { flex: 1; min-width: 0; }
.model-field label { display: block; margin: 0 0 .35rem .8rem; color: var(--muted); font-size: .75rem; }
.model-field select {
  width: 100%; min-height: 2.75rem; border: 1px solid var(--glass-edge); border-radius: 2rem;
  padding: .65rem 2.4rem .65rem 1rem; appearance: none;
  background-color: var(--glass-strong); color: var(--ink); font: .9rem var(--sans);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%236B645A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; cursor: pointer;
}
.model-field select option { background: var(--solid-ink); color: var(--ink); }
.model-field select:disabled { opacity: .65; cursor: not-allowed; }
.model-controls .btn { min-height: 2.75rem; padding: .65rem 1rem; font-size: .85rem; }
.model-help { margin-top: 1rem; border-top: 1px solid var(--rule); text-align: left; }
.model-help summary {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .8rem .15rem .15rem; color: var(--muted); font-size: .8rem; cursor: pointer;
  list-style: none;
}
.model-help summary::-webkit-details-marker { display: none; }
.model-help summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
.model-help[open] summary::after { content: "−"; }
.model-help[open] summary { margin-bottom: .8rem; }
.model-help p { color: var(--muted); font-size: .8rem; line-height: 1.6; margin: 0 0 .8rem; }
.model-help code {
  background: var(--glass-strong); border: 1px solid var(--rule); border-radius: .4rem;
  padding: .1rem .3rem; color: var(--ink); font-size: .75rem; overflow-wrap: anywhere;
}
.model-help a { display: inline-block; color: var(--ink); font-size: .8rem; text-underline-offset: .2rem; margin-bottom: .4rem; }
.model-field select:focus-visible, .model-help summary:focus-visible, .model-help a:focus-visible {
  outline: 3px solid var(--solid); outline-offset: 3px;
}
@media (max-width: 24rem) {
  .model-controls { flex-wrap: wrap; }
  .model-field { flex-basis: 100%; }
  .model-controls .btn { width: 100%; }
}

/* Panels + CSS-only tabs */
.tab-input { position: absolute; opacity: 0; pointer-events: none; }
main { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 1rem; }
.panel { display: none; }
#t-write:checked ~ main #panel-write,
#t-ideas:checked ~ main #panel-ideas,
#t-history:checked ~ main #panel-history { display: block; }
.hint { color: var(--muted); margin: 0 0 1.5rem; text-align: center; }

/* The writing page: frosted glass with faint ruled lines */
.page {
  width: 100%; display: block; resize: vertical; min-height: 16rem;
  font: 1.1rem/2rem var(--serif); color: var(--ink);
  background-color: var(--glass-strong);
  background-image: repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem);
  background-attachment: local;
  border: 1px solid var(--glass-edge); border-radius: 1.75rem;
  padding: .25rem 1.25rem;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.page::placeholder { color: var(--muted); opacity: .85; }

/* Buttons: pill shaped */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 1.25rem; }
.btn {
  appearance: none; display: inline-block; text-align: center; text-decoration: none;
  font: 500 1rem var(--sans); letter-spacing: -.01em; color: var(--ink);
  border-radius: 2rem; padding: .85rem 1.4rem; min-height: 3rem; cursor: pointer;
}
.btn.primary { background: var(--solid); border: 1px solid var(--solid); color: var(--solid-ink); }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, .tabs label:focus-visible, textarea:focus-visible { outline: 3px solid var(--solid); outline-offset: 3px; }
#btn-idea { display: block; margin: 1.5rem auto 0; }
#panel-history > .btn.danger { display: block; width: max-content; margin: 1.5rem auto 0; }

/* Results */
.result { margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-radius: 1.75rem; }
.result[hidden] { display: none; }
.result ol { margin: 0; padding-left: 1.25rem; font-family: var(--serif); font-size: 1.1rem; }
.result li + li { margin-top: .7rem; }
#idea-text { font-family: var(--serif); font-size: 1.15rem; margin: 0 0 1rem; }

/* Mood tiles (2x2, like the reference's soft cards) */
.moods { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.moods label { display: block; }
.moods input { position: absolute; opacity: 0; }
.moods span { display: flex; align-items: center; justify-content: center; min-height: 6rem; border-radius: 1.75rem; font-size: 1.1rem; cursor: pointer; }
.moods input:checked + span { background: var(--solid); border-color: var(--solid); color: var(--solid-ink); }
.moods input:focus-visible + span { outline: 3px solid var(--solid); outline-offset: 3px; }

/* History */
.history { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.entry { padding: 1rem 1.2rem; border-radius: 1.5rem; }
.entry time { font-size: .85rem; color: var(--muted); }
.entry .preview { margin: .25rem 0 0; font-family: var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.empty { color: var(--muted); text-align: center; }
.history:not(:empty) + .empty { display: none; }

/* Floating tab bar, like the "Hold to speak" pill */
.tabs {
  position: fixed; inset-inline: 1rem; margin-inline: auto; max-width: 26rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; gap: .25rem; padding: .35rem; border-radius: 2rem;
}
.tabs label { flex: 1; text-align: center; padding: .7rem 0; font-weight: 500; color: var(--muted); border-radius: 2rem; cursor: pointer; }
#t-write:checked ~ .tabs label[for="t-write"],
#t-ideas:checked ~ .tabs label[for="t-ideas"],
#t-history:checked ~ .tabs label[for="t-history"] { background: var(--solid); color: var(--solid-ink); }
#t-write:focus-visible ~ .tabs label[for="t-write"],
#t-ideas:focus-visible ~ .tabs label[for="t-ideas"],
#t-history:focus-visible ~ .tabs label[for="t-history"] { outline: 3px solid var(--solid); outline-offset: 2px; }

/* Delete confirmation modal */
.modal { display: none; position: fixed; inset: 0; background: rgba(20, 15, 35, .4); align-items: center; justify-content: center; padding: 1.25rem; z-index: 10; }
.modal:target { display: flex; }
.modal-box { background: var(--glass-strong); border-radius: 1.75rem; padding: 1.75rem; max-width: 24rem; width: 100%; text-align: center; }
.modal-box h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.modal-box p { color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .moods span, .tabs label { transition: background-color .2s, color .2s; }
}