/* ============================================================
   4 Ever GCS - iOS Messages layout, bright/warm candy palette.
   Cream + butter + mint + raspberry. Warm espresso ink, never
   slate/navy. Mobile-first: the base rules ARE the phone layout.
   Every text/background pair below is AA (>= 4.5:1) by measurement.
   ============================================================ */

:root {
  color-scheme: light dark;
  --shell:        #bff0e6;   /* lagoon surround behind the handset on desktop */
  --shell-edge:   rgba(16, 50, 46, .14);
  --page:         #f4fffd;   /* palest aqua */
  --chrome:       rgba(236, 255, 252, .88);
  --hair:         rgba(16, 50, 46, .16);
  --ink:          #10322e;   /* deep palm */
  --muted:        #456f68;
  --in-bg:        #c6f5ec;   /* soft aqua */
  --in-ink:       #10322e;
  --out-bg:       #d93a2b;   /* coral */
  --out-ink:      #ffffff;
  --field-bg:     #ffffff;
  --field-border: #9fd9cd;
  --banner-a:     #00c2a8;   /* teal  */
  --banner-b:     #35cfa2;   /* palm  */
  --banner-c:     #ffb020;   /* mango */
  --chip-bg:      #ffb020;   /* mango */
  --chip-ink:     #10322e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shell:        #03100e;
    --shell-edge:   rgba(255, 176, 32, .22);
    --page:         #07211e;   /* deep palm water, never black */
    --chrome:       rgba(14, 46, 41, .90);
    --hair:         rgba(198, 245, 236, .18);
    --ink:          #eafffa;
    --muted:        #9cd8ce;
    --in-bg:        #123a34;
    --in-ink:       #eafffa;
    --out-bg:       #d93a2b;
    --field-bg:     #0f3630;
    --field-border: #235048;
    --chip-bg:      #ffb020;
    --chip-ink:     #10322e;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  /* ui-rounded gives SF Pro Rounded on Apple - friendlier, still native */
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.294;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}

.u-hide {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- shell ---------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--page);
}

/* The chat page is a FIXED-height app shell so .thread is the only scroller.
   With min-height alone a long conversation grows the page instead, the
   document scrolls, and pinning thread.scrollTop does nothing at all. */
body.is-chat { overflow: hidden; }

body.is-chat .app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- banner --------------------------------------- */

.banner {
  position: relative;
  flex: 0 0 auto;
  background: linear-gradient(104deg, var(--banner-a) 0%, var(--banner-b) 46%, var(--banner-c) 100%);
  padding: calc(16px + env(safe-area-inset-top)) 16px 22px;
}

/* scalloped cream edge so the banner reads as a sticker, not a header bar */
.banner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 12px;
  background: var(--page);
  -webkit-mask: radial-gradient(circle at 10px 12px, transparent 10px, #000 10.5px) 0 0 / 20px 12px repeat-x;
          mask: radial-gradient(circle at 10px 12px, transparent 10px, #000 10.5px) 0 0 / 20px 12px repeat-x;
}

.banner__link { display: block; text-decoration: none; }

.banner__logo {
  display: block;
  height: 44px;
  width: auto;
  margin: 0 auto;
}

/* ---------- conversation --------------------------------- */

.chat {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* 22px inline: a tail reaches 20px past the bubble, and its page-coloured
     mask has to sit INSIDE the scroller or the curve never gets carved. */
  padding: 6px 22px 8px;
}

.peer { text-align: center; padding: 16px 0 2px; }

.peer__avatar {
  display: block;
  width: 66px; height: 66px;
  border-radius: 50%;
  margin: 0 auto 8px;
  box-shadow: 0 6px 0 rgba(16, 50, 46, .10);
}

.peer__name {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
}

.peer__chev {
  display: inline-block;
  width: 7px; height: 7px;
  margin: 0 0 1px 5px;
  border-right: 2px solid var(--muted);
  border-top: 2px solid var(--muted);
  transform: rotate(45deg);
  vertical-align: middle;
}

.peer__status { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* shown only when a stored conversation was restored */
.peer__reset {
  margin: 9px 0 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.peer__reset[hidden] { display: none; }

.stamp {
  margin: 15px 0 10px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}

.stamp strong { font-weight: 800; }

/* ---------- bubbles -------------------------------------- */

.msg { display: flex; margin-top: 2px; }
.msg--first { margin-top: 10px; }
.msg--in  { justify-content: flex-start; }
.msg--out { justify-content: flex-end; }

.bubble {
  position: relative;
  max-width: 76%;
  padding: 9px 15px 10px;
  border-radius: 22px;
  font-size: 17px;
  line-height: 1.294;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.msg--in  .bubble { background: var(--in-bg);  color: var(--in-ink); }
.msg--out .bubble { background: var(--out-bg); color: var(--out-ink); }

/* the iOS tail: a blob, then a page-coloured mask that carves it */
.msg--tail .bubble::before,
.msg--tail .bubble::after { content: ""; position: absolute; bottom: 0; height: 20px; }

.msg--in.msg--tail  .bubble::before { left: -7px;  width: 20px; background: var(--in-bg);  border-bottom-right-radius: 16px; }
.msg--in.msg--tail  .bubble::after  { left: -20px; width: 20px; background: var(--page);   border-bottom-right-radius: 11px; }
.msg--out.msg--tail .bubble::before { right: -7px;  width: 20px; background: var(--out-bg); border-bottom-left-radius: 16px; }
.msg--out.msg--tail .bubble::after  { right: -20px; width: 20px; background: var(--page);   border-bottom-left-radius: 11px; }

.msg--pop { animation: pop .3s cubic-bezier(.18, 1.3, .4, 1.3); }

@keyframes pop {
  from { transform: scale(.7) translateY(6px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);  opacity: 1; }
}

.msg--out.msg--pop { transform-origin: bottom right; }
.msg--in.msg--pop  { transform-origin: bottom left; }

.delivered {
  margin: 4px 4px 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

/* typing indicator */
.dots { display: flex; gap: 5px; padding: 3px 1px; }

.dots i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--out-bg);
  animation: blink 1.3s infinite ease-in-out;
}

.dots i:nth-child(2) { animation-delay: .17s; }
.dots i:nth-child(3) { animation-delay: .34s; }

@keyframes blink {
  0%, 60%, 100% { opacity: .35; transform: translateY(0) scale(.9); }
  30%           { opacity: 1;   transform: translateY(-4px) scale(1); }
}

/* ---------- quick replies -------------------------------- */

.quickies {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 13px 2px;
}

.quickies[hidden] { display: none; }

.chip {
  flex: 0 0 auto;
  border: 2px solid var(--chip-ink);
  background: var(--chip-bg);
  color: var(--chip-ink);
  border-radius: 999px;
  padding: 7px 15px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--chip-ink);
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.chip:active { transform: translateY(3px); box-shadow: 0 0 0 var(--chip-ink); }

/* ---------- composer ------------------------------------- */

.composer {
  flex: 0 0 auto;
  padding: 9px 11px calc(10px + env(safe-area-inset-bottom));
  background: var(--chrome);
  border-top: 1.5px solid var(--hair);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.composer__field {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: 22px;
}

.composer textarea {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  color: var(--ink);
  font: inherit;
  font-size: 17px;     /* 17px keeps iOS from zooming on focus */
  line-height: 21px;
  padding: 8px 46px 9px 15px;
  max-height: 124px;
  border-radius: 22px;
}

.composer textarea::placeholder { color: var(--muted); }

.send {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--out-bg);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .16s ease, transform .16s ease;
}

.send svg { width: 22px; height: 22px; display: block; }
.send:active { transform: scale(.88) rotate(-8deg); }

.send[disabled] {
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
}

/* ---------- plain pages (404) ---------------------------- */

.pad { padding: 44px 24px; text-align: center; }
.pad__title { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.pad__text  { margin: 0 0 22px; color: var(--muted); }

.pad__cta {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--chip-ink);
  border: 2px solid var(--chip-ink);
  box-shadow: 0 4px 0 var(--chip-ink);
  text-decoration: none;
  font-weight: 800;
  padding: 11px 24px;
  border-radius: 999px;
}

/* ---------- wider screens: frame it like a handset ------- */

@media (min-width: 768px) {
  body {
    padding: 24px 16px;
    background:
      radial-gradient(60% 55% at 50% 0%, #ffe2a6 0%, transparent 70%),
      var(--shell);
  }

  body.is-chat .app { height: calc(100dvh - 48px); }

  .app {
    max-width: 452px;
    height: calc(100dvh - 48px);
    min-height: 0;
    margin: 0 auto;
    border: 2px solid var(--shell-edge);
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 26px 60px rgba(16, 50, 46, .26);
  }

  .banner { padding: 20px 20px 24px; }
  .banner__logo { height: 48px; }
  .thread { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .msg--pop { animation: none; }
  .dots i   { animation: none; opacity: .55; }
  .send, .chip { transition: none; }
}