/* ── Parley, Greenlight's skin ──────────────────────────────────────────────────────────
   Structure from brands/moreherself/public/parley.css (which carries the phone fixes); only the
   tokens and the hidden-page selectors are Greenlight's. Diff against that file, don't rewrite. */

.parley {
  --paper: #ffffff; --line: #dcd9d2; --line-2: #cfcbc2; --panel-2: #f1f0ec;
  --ink: #15171a; --steel: #50555b; --stone: #83878c;
  --oxblood: #0f7a44; --accent-2: #15171a;
  --sans: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --serif: "Overpass", "Helvetica Neue", Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
}
body.parley-open > section, body.parley-open > .modal { visibility: hidden; }
/* The takeover hides the page behind it outright — a chat competing with a landing page
   for attention loses. These are THIS brand's wrappers, not roster's. */
/* `overflow: hidden` alone does not stop iOS scrolling the document. Tapping the input makes
   Safari scroll the PAGE to bring the focused field into view — and because the panel is
   position:fixed, the page slides around underneath it and the chat appears to jump somewhere
   else. Kyle, 2026-09-24: "when I tap on the text box it auto scrolls somewhere."

   Pinning the body is what actually holds it still. public/parley.js records the scroll position
   before adding the class and restores it on close, so she comes back to where she was. */
body.parley-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  overscroll-behavior: none;
}
body.parley-open > header, body.parley-open > .wrap,
body.parley-open > main, body.parley-open > footer,
body.parley-open > div:not(.parley) { visibility: hidden; }
.parley {
  /* `inset: 0` alone sizes this to the LAYOUT viewport, which on iOS is taller than what she can
     actually see while the URL bar is showing — so the composer sat below the fold and she had to
     scroll down to type and back up to read. Measured from Kyle's phone, 2026-09-24.

     `100dvh` tracks the visible height instead. `100vh` stays first as the fallback for anything
     that does not know `dvh`. Neither accounts for the on-screen KEYBOARD, which is what
     --parley-h is for: public/parley.js sets it from window.visualViewport, and it wins when set. */
  position: fixed; left: 0; top: 0; right: 0; z-index: 90; display: none;
  height: 100vh;
  height: 100dvh;
  height: var(--parley-h, 100dvh);
  /* FOUR children — bar, log, composer, fineprint — so four rows. It declared three for years,
     and the fineprint landed in an implicit row that took 340px of a 380px panel: the log was
     squeezed to 28px and the top of the grid ended up 112px above the screen. On a phone with the
     keyboard up that reads as "the whole conversation disappeared". Measured 2026-09-24. */
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);   /* a grid item defaults to min-width:auto too */
  background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
}
.parley.is-open { display: grid; }
.parley__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
/* Same family of bug: the label wrapped to two lines and stole height from the conversation. */
.parley__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parley__close { flex: none; }
.parley__badge {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: var(--oxblood); color: #fff;
  font-family: var(--serif); font-weight: 700; font-size: 12px; flex: none;
}
.parley__label {
  font-family: var(--sans); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--steel);
}
.parley__dot { width: 6px; height: 6px; border-radius: 50%; background: #5c6f58; }
.parley__spacer { flex: 1; }
.parley__close {
  font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); background: transparent; border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.parley__close:hover { color: var(--ink); border-color: var(--oxblood); }
.parley__log {
  overflow-y: auto; padding: 20px 18px 8px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 760px; width: 100%; margin: 0 auto;
}
/* MESSAGES STACK FROM THE BOTTOM, like iMessage. They used to stack from the top, so a short
   conversation left empty space underneath it — and that empty space was what sat above the
   keyboard. Kyle's recording, 2026-09-24: keyboard up, composer in the right place, and the
   entire conversation gone off the top of the visible area.

   `margin-top: auto` on the first child rather than `justify-content: flex-end` on the parent:
   flex-end on a scroll container clips the top of the content once it overflows, so older
   messages become unreachable. This does the same job and keeps the scrollback. */
.parley__log > *:first-child { margin-top: auto; }
.parley__msg {
  max-width: 82%; padding: 11px 14px; border-radius: 14px;
  font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.parley__msg--them { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); }
.parley__msg--me {
  align-self: flex-end; color: #fff;
  background: linear-gradient(95deg, color-mix(in srgb, var(--accent-2) 70%, #000), color-mix(in srgb, var(--oxblood) 70%, #000));
}
.parley__msg--sys {
  align-self: center; max-width: 100%; background: transparent; border: 0;
  font-family: var(--sans); font-size: 11px; letter-spacing: .1em; color: var(--steel);
  display: flex; align-items: center; gap: 10px;
}
.parley__retry {
  font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--line-2); color: var(--steel);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.parley__retry:hover { border-color: var(--oxblood); color: var(--ink); }
.parley__typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.parley__typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--steel);
  animation: parley-blink 1.3s infinite ease-in-out;
}
.parley__typing i:nth-child(2) { animation-delay: .18s; }
.parley__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes parley-blink { 0%, 60%, 100% { opacity: .28; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .parley__typing i { animation: none; opacity: .5; } }
.parley__composer {
  display: flex; gap: 9px; padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  max-width: 760px; width: 100%; margin: 0 auto;
}
.parley__input {
  /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, and an <input> carries an
     intrinsic width of roughly twenty characters — so `flex: 1` could not shrink it below that and
     it shoved SEND off the right edge of a phone, with a horizontal scrollbar to match. Seen on
     Kyle's recording, 2026-09-24. */
  flex: 1; min-width: 0; padding: 13px 15px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--ink);
  font-family: var(--body); font-size: 15px; -webkit-appearance: none; appearance: none;
}
.parley__input::-webkit-search-cancel-button { display: none; }
.parley__input:focus { outline: 2px solid var(--oxblood); outline-offset: -1px; }
.parley__input:disabled { opacity: .55; }
.parley__send {
  padding: 13px 22px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--oxblood); color: #fff;
  font-family: var(--sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.parley__send:disabled { opacity: .5; cursor: default; }

.parley__fineprint {
  margin: 0; padding: 0 18px 14px; text-align: center;
  font-family: var(--sans); font-size: 11px; line-height: 1.5; color: var(--stone);
}
@media (max-width: 650px) { .parley__fineprint { font-size: 10px; padding-bottom: 10px; } }

/* ── link card ──────────────────────────────────────────────────────────────────────────────
   Hard to ignore, on purpose. A bare /articles/… in a message reads like a file path and is a
   tiny tap target; this is the picture, the question and the reading time. */
.parley__card {
  /* flex: none is load-bearing. The log is a flex column, and without it this card shrinks to
     about a third of its content height and then overflow:hidden crops the picture and the
     whole title away — you get a grey rectangle and no clue why. Text bubbles never showed the
     bug because their height IS their content. */
  display: block; flex: none; text-decoration: none; color: inherit;
  max-width: 78%; margin: 4px 0 10px; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; background: #fffdf8;
  transition: border-color .15s ease, transform .15s ease;
}
.parley__card:hover { border-color: var(--stone); transform: translateY(-1px); }
.parley__card-img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #e8e3d8 center/cover no-repeat;
}
.parley__card-body { padding: 13px 16px 15px; }
.parley__card-kicker {
  display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--oxblood); font-weight: 700; margin-bottom: 5px;
}
.parley__card-title {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: 17px; line-height: 1.28; color: var(--ink);
}
.parley__card-meta {
  display: block; margin-top: 7px; font-family: var(--sans);
  font-size: 12px; color: var(--steel);
}
@media (max-width: 650px) {
  .parley__card { max-width: 90%; }
  .parley__card-title { font-size: 16px; }
}

/* Greenlight: the badge is a lit lamp, my bubbles are ink, Send is the go-green button. */
.parley__badge { background: #15171a; color: transparent; position: relative; }
.parley__badge::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px rgba(61,220,132,.8); }
.parley__label { font-weight: 800; letter-spacing: .14em; color: #15171a; }
.parley__dot { background: #3ddc84; box-shadow: 0 0 6px rgba(61,220,132,.8); }
.parley__msg { font-family: var(--body); font-size: 16px; }
.parley__msg--me { background: #15171a; }
.parley__send { background: #3ddc84; color: #15171a; font-weight: 900; font-size: 13px; }
.parley__card { background: #fff; border: 2px solid #15171a; }
.parley__card-kicker { color: #0f7a44; }
.parley__card-title { font-weight: 900; }
.parley__card-meta { color: #0f7a44; font-weight: 700; }

/* ── iMessage behaviour (Kyle 9/30) ─────────────────────────────────────────────────────────
   1. 16px in the input. Below 16px iOS Safari ZOOMS the page when the field is focused, which
      reads exactly like "the screen moves around". The visualViewport fixes above handle the
      keyboard; this removes the zoom that nothing else can undo.
   2. Bubbles the way iMessage draws them: grey on the left, colored on the right, 18px radius
      with the corner nearest the sender tucked in, 2px apart within a burst.
   3. Phones get a full-screen sheet. Desktop gets a phone-sized pop-up over a dimmed page, so
      the page is still there behind it and ESC/close returns to it.                            */
.parley__input { font-size: 16px !important; border-radius: 22px; padding: 11px 16px; background: #fff; }
.parley__send { border-radius: 22px; padding: 11px 18px; }
.parley__log { gap: 3px; padding-top: 16px; }
.parley__msg { border-radius: 18px; padding: 9px 14px; line-height: 1.38; max-width: 78%; border: 0; }
.parley__msg--them { background: #e9e9eb; color: #15171a; border-bottom-left-radius: 5px; }
.parley__msg--me { background: #0f7a44; color: #fff; border-bottom-right-radius: 5px; }
.parley__msg--me + .parley__msg--them, .parley__msg--them + .parley__msg--me,
.parley__card + .parley__msg, .parley__msg + .parley__card { margin-top: 10px; }
.parley__typing { background: #e9e9eb; border-radius: 18px; border-bottom-left-radius: 5px; }
.parley__composer { border-top: 1px solid #e6e4df; background: #f7f7f7; padding: 10px 12px 12px; }
.parley__bar { background: #f7f7f7; }

@media (min-width: 720px) {
  body.parley-open { position: static; overflow: hidden; }
  /* On desktop the page stays visible behind a dimmed backdrop instead of being hidden. */
  body.parley-open > section, body.parley-open > .modal { visibility: visible; }
  .parley {
    left: auto; top: auto; right: 28px; bottom: 28px;
    width: 400px; height: min(720px, calc(100vh - 56px)) !important;
    border-radius: 22px; overflow: hidden;
    /* The last shadow is the backdrop: it dims everything around the pop-up, hero included. */
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 40px 90px -20px rgba(0,0,0,.55), 0 0 0 200vmax rgba(15,17,19,.55);
    transform: none !important;
  }
}