/* Lilli Sweden — the app shell's own chrome.
 *
 * SYNTHETIC TEST DATA ONLY — NOT FOR REAL PATIENT USE.
 *
 * Everything conversational is styled by lilli.css and shared with the web
 * page. This file adds only what an INSTALLED app needs: safe-area padding so
 * the action bar clears the iPhone home indicator, a top bar, the home menu,
 * and the offline panel.
 */

.app-body { padding: 0; }

.app {
  max-width: 34rem; margin: 0 auto;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1.25rem
           calc(1.5rem + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
}

.app-top {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0 0 0.75rem;
}
.app-top__back {
  border: 0; background: none; color: #2d5c4d;
  font: inherit; font-weight: 600; cursor: pointer;
  min-height: 44px; padding: 0.4rem 0.4rem 0.4rem 0;
}
.app-top__title { margin: 0; font-size: 1.2rem; color: #2d5c4d; }
.app-top__title:focus { outline: none; }

.app-brand { margin: 0.5rem 0 1.25rem; }
.app-brand__name { margin: 0; font-size: 1.8rem; font-weight: 700; color: #2d5c4d; }
.app-brand__name:focus { outline: none; }

.app-menu { display: grid; gap: 0.6rem; margin: 0 0 1.25rem; }
.app-menu__primary { font-size: 1.05rem; }

.app-install {
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1rem; padding: 0.7rem 0.9rem;
  background: #eaf2ee; border: 1px solid #b9d2c6; border-radius: 10px;
}
.app-install p { margin: 0; font-size: 0.9rem; }
.app-install--note { display: block; color: #5c6b64; }

.app-offline {
  margin: 0 0 0.9rem; padding: 0.8rem 1rem;
  border: 2px solid #8a6d3b; border-radius: 10px; background: #fdf6ec;
  display: grid; gap: 0.6rem;
}
.app-offline p { margin: 0; }

.app-status {
  padding: 1rem; border-radius: 12px;
  background: #fff; border: 1px solid #e2ded4;
  display: grid; gap: 0.5rem;
}
.app-status__line { margin: 0; font-weight: 600; }
.app-status__time { margin: 0; font-size: 1.1rem; }

/* The sticky action bar inherits from lilli.css; inside the installed app it
 * must also clear the home indicator. */
.app .lilli__actions, .app .lilli-actions {
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
}

/* ── The vanillios.com identity ──────────────────────────────────────────────
 *
 * The brand tokens below are taken from vanillios.com's own published CSS
 * variables (--vanilli-navy #16294D, --vanilli-teal #2E9C95, --vanilli-ivory
 * #F7F4EC, --vanilli-sand #D8A96C, radius 18px, pill buttons, Fraunces serif
 * headings) — the product site Lilli actually belongs to.
 *
 * Scoped under .app on purpose: the PWA carries the product brand; the plain
 * web page at /lilli and the Vanilli OS staff UI keep their own faces. Safety
 * styling is deliberately NOT rebranded — the emergency red and the amber
 * synthetic banner mean something, and a brand may not soften either.
 *
 * Fraunces is not self-hosted and the CSP allows no external fonts, so
 * Georgia stands in — same warmth, zero bytes, no third-party request.
 */

.app {
  --v-navy: #16294D;
  --v-navy-deep: #0D1A30;
  --v-teal: #2E9C95;
  --v-teal-bright: #3FBFB4;
  --v-ivory: #F7F4EC;
  --v-warm-white: #FBF9F4;
  --v-cream: #F4EFE6;
  --v-sand: #D8A96C;
  --v-ink: #1B2433;
  --v-muted: #5B6678;
  --v-line: #E2DCCC;
  --v-serif: "Fraunces", Georgia, "Times New Roman", serif;
}

.app-body { background: var(--v-warm-white, #FBF9F4); color: #1B2433; }

/* Brand marks and headings in the serif the site leads with. */
.app .app-brand__name,
.app .app-top__title {
  font-family: var(--v-serif);
  color: var(--v-navy);
  letter-spacing: 0.01em;
}
.app .app-brand__name { font-size: 2rem; }
.app .lilli-head__name { font-family: var(--v-serif); color: var(--v-navy); }
.app .lilli-head__office, .app .lilli-note, .app .app-install--note { color: var(--v-muted); }
.app .app-top__back { color: var(--v-navy); }

/* Pill buttons, navy primary, quiet outline — the site's two CTAs. */
.app .lilli-btn {
  border-radius: 100px;
  border-color: var(--v-navy);
  background: var(--v-navy);
  color: var(--v-ivory);
}
.app .lilli-btn--quiet {
  background: transparent;
  color: var(--v-navy);
  border-color: var(--v-line);
}
.app .lilli-btn:focus-visible,
.app .lilli-choice:focus-visible,
.app .lilli-scale__n:focus-visible,
.app .lilli-input:focus-visible,
.app .lilli-locale__select:focus-visible {
  outline: 3px solid var(--v-teal);
  outline-offset: 2px;
}

/* Choices: warm cards on ivory, teal selection. */
.app .lilli-choice {
  border-radius: 18px;
  border-color: var(--v-line);
  background: #fff;
}
.app .lilli-choice:hover { border-color: var(--v-teal); }
.app .lilli-choice--on {
  border-color: var(--v-teal);
  background: #E7F3F1;
}
.app .lilli-scale__n { border-radius: 18px; border-color: var(--v-line); }
.app .lilli-input { border-radius: 18px; border-color: var(--v-line); }

/* The conversation: Lilli on warm white, the patient in brand navy. */
.app .lilli-msg__bubble { border-color: var(--v-line); border-radius: 18px; }
.app .lilli-msg--patient .lilli-msg__bubble {
  background: var(--v-navy);
  border-color: var(--v-navy);
  color: var(--v-ivory);
}
.app .lilli-msg__who { color: var(--v-muted); }
.app .lilli-typing { color: var(--v-muted); }

/* Panels and chrome. */
.app .app-status, .app .app-install {
  border-radius: 18px;
  border-color: var(--v-line);
}
.app .app-install { background: var(--v-cream); }
.app .app-status { background: #fff; }
.app .lilli__disclaimers { background: var(--v-cream); border-radius: 18px; }
.app .lilli-composer .lilli-actions,
.app .lilli__actions { background: var(--v-warm-white); border-top-color: var(--v-line); }
.app .lilli-nav { border-top-color: var(--v-line); }
.app .lilli-opening { border-color: var(--v-line); border-radius: 18px; }
.app .lilli-review__row { border-color: var(--v-line); border-radius: 18px; }
.app .lilli-review dt { color: var(--v-muted); }
.app .lilli-done {
  background: var(--v-cream);
  border-color: var(--v-line);
  border-radius: 18px;
}
.app .lilli__reference { border-color: var(--v-navy); border-radius: 12px; }
.app .lilli-locale__select { border-radius: 100px; border-color: var(--v-line); }

/* The accent the site uses for warmth: a teal underline on the brand row and
 * the sand heart beside Lilli's name — vanillios.com writes it "Lilli♥". */
.app .app-brand__name::after {
  content: " \2665";
  color: var(--v-sand);
  font-size: 0.7em;
  vertical-align: 0.15em;
}

/* NOT rebranded, on purpose: the amber synthetic banner, the red emergency
 * bubble, and the time-critical guidance panel keep their safety colours. */