/* /text — the thread, in More Herself's own colors (Kyle 2026-10-16: "We need to redesign /text").
   Was an iMessage clone (white, grey and blue). Kept: the text-thread shapes, one bubble per message,
   tails, typing dots. Changed: cream and olive bubbles, a warm header that says who she is talking to,
   and on a desktop a welcome panel beside the thread instead of a lone phone column on white.
   Scoped to body[data-parley-theme="imessage"] (the attribute parley.js already reads), so Off the
   Record and /go keep the house chat. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-600-latin.woff2) format("woff2")}

body[data-parley-theme="imessage"] {
  --t-bg: #F6F1EA;
  --t-them: #EDE5D9;
  --t-them-ink: #262619;
  --t-me: #262619;
  --t-me-ink: #F6F1EA;
  --t-meta: #7D7468;
  --t-bar: #FBF8F3;
  --t-line: #DDD3C5;
  --t-accent: #7A6753;
  --t-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --t-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  margin: 0; background: var(--t-bg); font-family: var(--t-font); color: var(--t-them-ink);
}

/* ── the welcome panel (desktop only; on a phone the thread header carries it) ───────────── */
body[data-parley-theme="imessage"] .tw { display: none; }
@media (min-width: 900px) {
  body[data-parley-theme="imessage"] { background: #262619; }
  body[data-parley-theme="imessage"] .tw {
    display: flex; flex-direction: column; justify-content: center; gap: 22px;
    position: fixed; left: 0; top: 0; bottom: 0; right: min(600px, 50vw);
    padding: 0 clamp(40px, 6vw, 110px); color: #EDE5D9; visibility: visible !important;
  }
  .tw__mark { width: 54px; height: auto; opacity: .95 }
  .tw__eyebrow { font: 600 11px var(--t-font); letter-spacing: .28em; text-transform: uppercase; color: #D9C5AB; margin: 0 }
  .tw h1 { font: 600 clamp(44px, 4.6vw, 68px)/1.02 var(--t-serif); margin: 0; letter-spacing: -.01em; max-width: 12ch; text-wrap: balance }
  .tw__lede { font: 400 18px/1.55 var(--t-font); color: #EDE5D9; max-width: 44ch; margin: 0; opacity: .92 }
  .tw ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46ch }
  .tw li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font: 15px/1.45 var(--t-font); color: #D9C5AB }
  .tw li::before { content: ""; width: 14px; height: 1px; background: #B8AD9C; margin-top: 11px }
  .tw li b { color: #EDE5D9; font-weight: 600 }
  .tw__fine { font: 12px/1.5 var(--t-font); color: #B8AD9C; max-width: 50ch; margin: 10px 0 0 }

  /* the thread becomes a card on the right */
  body[data-parley-theme="imessage"] .parley {
    left: auto; right: clamp(24px, 3vw, 48px); top: 24px; width: min(540px, calc(50vw - 48px));
    height: calc(100dvh - 48px); height: calc(var(--parley-h, 100dvh) - 48px);
    border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.35);
  }
}

/* ── the thread ───────────────────────────────────────────────────────────────────────────── */
body[data-parley-theme="imessage"] .parley, body[data-parley-theme="imessage"] .parley * { box-sizing: border-box; }
body[data-parley-theme="imessage"] .parley {
  background: var(--t-bg); color: var(--t-them-ink); font-family: var(--t-font);
}
body[data-parley-theme="imessage"] .parley__bar {
  background: var(--t-bar); border-bottom: 1px solid var(--t-line);
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 12px;
  align-items: center; padding: 14px 18px; min-height: 0;
}
body[data-parley-theme="imessage"] .parley__badge {
  grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 50%;
  background: #262619 url("/assets/mark-sm-sand.png") center/58% no-repeat;
  color: transparent; font-size: 0; display: block;
}
body[data-parley-theme="imessage"] .parley__label {
  font-size: 0; letter-spacing: 0; text-transform: none; align-self: end;
}
body[data-parley-theme="imessage"] .parley__label::after {
  content: "More Herself"; font: 600 21px/1.1 var(--t-serif); color: var(--t-them-ink);
}
body[data-parley-theme="imessage"] .parley__bar::after {
  content: "Brittney's assistant · an AI · here to listen"; grid-column: 2; align-self: start;
  font: 12px/1.3 var(--t-font); color: var(--t-meta); margin-top: 2px;
}
body[data-parley-theme="imessage"] .parley__dot,
body[data-parley-theme="imessage"] .parley__spacer,
body[data-parley-theme="imessage"] .parley__close { display: none; }

body[data-parley-theme="imessage"] .parley__log {
  padding: 18px 14px 10px; display: flex; flex-direction: column; gap: 4px;
}
body[data-parley-theme="imessage"] .parley__msg {
  max-width: 80%; padding: 10px 14px; font: 16.5px/1.42 var(--t-font);
  border-radius: 20px; position: relative; overflow-wrap: anywhere; white-space: pre-wrap; margin: 0;
}
body[data-parley-theme="imessage"] .parley__msg--them {
  align-self: flex-start; background: var(--t-them); color: var(--t-them-ink); border-bottom-left-radius: 6px;
}
body[data-parley-theme="imessage"] .parley__msg--me {
  align-self: flex-end; background: var(--t-me); color: var(--t-me-ink); border-bottom-right-radius: 6px;
}
body[data-parley-theme="imessage"] .parley__msg--sys {
  align-self: center; background: none; color: var(--t-meta); font-size: 12px; padding: 6px 0;
}

body[data-parley-theme="imessage"] .parley__typing {
  background: var(--t-them); color: transparent; min-width: 58px; height: 38px; padding: 0;
}
body[data-parley-theme="imessage"] .parley__typing::after {
  content: "• • •"; color: var(--t-accent); font-size: 18px; letter-spacing: 2px;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  animation: sdr-pulse 1.2s infinite;
}
@keyframes sdr-pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

body[data-parley-theme="imessage"] .parley__card {
  align-self: flex-start; max-width: 80%; border-radius: 18px; overflow: hidden;
  background: #fff; color: var(--t-them-ink); border: 1px solid var(--t-line); text-decoration: none;
}
body[data-parley-theme="imessage"] .parley__card-kicker { color: var(--t-accent); font: 600 11px var(--t-font); letter-spacing: .12em; text-transform: uppercase; }
body[data-parley-theme="imessage"] .parley__card-title { font: 600 20px/1.2 var(--t-serif); }
body[data-parley-theme="imessage"] .parley__card-meta { color: var(--t-meta); font: 12px var(--t-font); }

/* composer: the pill and the arrow. min-width:0 on the input is what keeps the button on screen
   (it was pushed past the right edge on a 375px phone, 2026-10-16). */
body[data-parley-theme="imessage"] .parley__composer {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px; box-sizing: border-box; max-width: none;
  background: var(--t-bar); border-top: 1px solid var(--t-line);
}
body[data-parley-theme="imessage"] .parley__input {
  flex: 1; min-width: 0; border: 1px solid var(--t-line); border-radius: 22px; padding: 11px 16px;
  font: 16px var(--t-font); background: #fff; color: var(--t-them-ink); outline: none;
  -webkit-appearance: none; appearance: none;
}
body[data-parley-theme="imessage"] .parley__input:focus { border-color: var(--t-accent); }
body[data-parley-theme="imessage"] .parley__send {
  width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--t-me); color: var(--t-me-ink);
  font-size: 0; cursor: pointer; position: relative; flex: none;
}
body[data-parley-theme="imessage"] .parley__send::after {
  content: "↑"; font-size: 20px; line-height: 42px; position: absolute; inset: 0; text-align: center; font-weight: 700;
}
body[data-parley-theme="imessage"] .parley__fineprint {
  color: var(--t-meta); font: 11px/1.45 var(--t-font); padding: 4px 18px 12px; text-align: center; margin: 0;
  background: var(--t-bar);
}

body[data-parley-theme="imessage"] .parley__choice {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-self: flex-end; max-width: 100%; margin: 6px 0 6px;
}
body[data-parley-theme="imessage"] .parley__choice button {
  border: 1.5px solid var(--t-me); background: #fff; color: var(--t-me); border-radius: 20px;
  padding: 9px 16px; font: 500 15px var(--t-font); cursor: pointer;
}
body[data-parley-theme="imessage"] .parley__choice button.primary { background: var(--t-me); color: var(--t-me-ink); }
