/* Be More Still — the companion with the page taken away.

   Loaded after site.css, which supplies the palette, the type stack, and the
   Scripture treatment. Everything here is layout: one screen, a stream, a
   composer, and nothing else competing for a tired person's attention.

   The conversation reads as a conversation. What you wrote sits right, in the
   sans face you typed it in. What Be Still says sits left, in the serif the
   rest of the site sets Scripture in. Nothing is timestamped. */

:root {
  --you-fill: #E7EDF6;
  --you-edge: #CFDAEA;
  --still-fill: #FFFDF8;
  --still-edge: #E6DFCC;
  --bar: #FFFFFFCC;
  --rail-heavy: #9A3324;
  --rail-light: #6E8A6E;
}
@media (prefers-color-scheme: dark) {
  :root {
    --you-fill: #2A3346;
    --you-edge: #3A465F;
    --still-fill: #23242D;
    --still-edge: #3A3A44;
    --bar: #191A20CC;
    --rail-heavy: #D07A65;
    --rail-light: #8FAE8F;
  }
}

/* ---- one screen, three bands ---- */

html, body.stillness { height: 100%; }
body.stillness {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

.mobile-only { display: none; }

.still-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  background: var(--bar);
  backdrop-filter: blur(6px);
  font-family: var(--sans);
  font-size: 0.78rem;
}
.still-bar .home { color: var(--ink-soft); text-decoration: none; }
.still-bar .home:hover { color: var(--indigo); text-decoration: underline; }
.still-bar .here {
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--redletter);
  margin: 0;
}
.still-bar .spacer { flex: 1 1 auto; }
.still-bar .privacy-link {
  color: var(--ink-soft);
  text-decoration: none;
}
.still-bar .privacy-link:hover,
.still-bar .privacy-link:focus { color: var(--ink); text-decoration: underline; }
.still-bar button {
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.22rem 0.7rem;
}
.still-bar button:hover { color: var(--ink); border-color: var(--rule); }
.still-bar button[aria-pressed="true"] { color: var(--redletter); border-color: var(--gilt); }

/* The disclosures are read once on each page visit, then leave the
   conversation entirely. Nothing about dismissal is stored on the device. */
.entry-disclosure {
  box-sizing: border-box;
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100dvh - 2rem));
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  box-shadow: 0 1.2rem 4rem #0005;
}
.entry-disclosure[open] { display: flex; }
.entry-disclosure::backdrop { background: #161822B8; backdrop-filter: blur(3px); }
.entry-disclosure-inner {
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1.35rem;
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.55;
}
.entry-disclosure h2 {
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  color: var(--redletter);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
}
.entry-disclosure p { margin: 0 0 0.8rem; }
.entry-disclosure form {
  position: sticky;
  bottom: -1.35rem;
  display: flex;
  justify-content: center;
  margin: 0 -1.35rem -1.35rem;
  padding: 0.75rem 1.35rem 1.1rem;
  background: linear-gradient(to bottom, transparent, var(--paper-2) 30%);
}
.entry-disclosure button { min-width: 6rem; }

/* ---- the stream ---- */

.stream {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.6rem 1.1rem 1.2rem;
}
.stream-inner {
  max-width: 44rem;
  margin: 0 auto;
  position: relative;
  padding-left: 0.9rem;
}

/* The opening. One verse, one line, then out of the way. It is the only thing
   on this page that is not part of the conversation. */
.opening { text-align: center; padding: 12vh 0 2rem; color: var(--ink-soft); }
.opening .verse {
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 0.45rem;
  font-size: 1.15rem;
  margin: 0 0 0.9rem;
  padding-left: 0;
}
.opening .scripture-image-action.image-maker { margin-left: 0; }
.opening p { font-family: var(--sans); font-size: 0.86rem; margin: 0; }
.opening .starter-heading {
  margin: 0.75rem 0 0.45rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}
.opening .starter-questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0;
  max-height: min(18rem, 38vh);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}
.opening .starter-questions[hidden] { display: none; }
.opening button.starter-question { width: 100%; }
.opening .starter-more {
  display: block;
  margin: 0.45rem auto 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
}
.opening .starter-more[hidden] { display: none; }
.stream.started .opening { display: none; }

.msg { display: flex; flex-direction: column; margin: 0 0 1.15rem; }
.msg.from-me { align-items: flex-end; }
.msg.from-still { align-items: flex-start; }
/* Consecutive messages from the same side sit closer, the way a run of
   messages does anywhere else. */
.msg.same-side { margin-top: -0.7rem; }
.msg .speaker {
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.3rem 0.2rem;
}
.msg.from-me .speaker { margin: 0 0.2rem 0.3rem 0; }
.msg.same-side .speaker { display: none; }

.bubble {
  max-width: min(34rem, 92%);
  padding: 0.75rem 1.05rem;
  border-radius: 1.1rem;
  border: 1px solid;
}
.from-me .bubble {
  background: var(--you-fill);
  border-color: var(--you-edge);
  border-bottom-right-radius: 0.25rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
}
.from-still .bubble {
  background: var(--still-fill);
  border-color: var(--still-edge);
  border-bottom-left-radius: 0.25rem;
}
.from-still.trouble .bubble { border-color: var(--redletter); }
.stillness .response-actions .answer-image-action.image-maker {
  margin: 0;
  padding: 0;
  border-top: 0;
}
.bubble p { margin: 0 0 0.7rem; }
.bubble p:last-child { margin-bottom: 0; }
/* Scripture inside a bubble is one beat of a reply, not a set piece. */
.bubble .verse { margin: 0.8rem 0; padding-left: 0.8rem; border-left: 2px solid var(--gilt); }
.bubble .verse:first-child { margin-top: 0.1rem; }
.bubble .verse:last-child { margin-bottom: 0.1rem; }

/* The arrival moves the answer, it does not fade it in. An opacity animation
   that starts at zero is a way to lose the text entirely: a browser pauses
   animations in a background tab, and someone who sends a message and switches
   away comes back to an empty bubble that will never fill. Transform cannot
   fail that way. */
.said { animation: still-arrive 0.45s ease-out; }
@keyframes still-arrive {
  from { transform: translateY(0.4rem); }
  to { transform: none; }
}

/* ---- thinking, inside the bubble it will become ---- */

/* The waiting state is not a separate message. The bubble Be Still is about to
   speak in appears first and holds the thinking; when the words arrive the
   thinking leaves and the same bubble grows into the answer. Nothing on screen
   moves twice. */
.thinking { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-soft); }
.thinking.leaving { opacity: 0; transition: opacity 0.25s ease-out; }

/* Style one: the breath. One line of plain words, replaced in place, and a
   hairline that advances by pass rather than by an invented percentage. */
.breath { display: flex; align-items: center; gap: 0.55rem; min-height: 1.4rem; }
.breath-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--gilt);
  animation: still-breathe 2.6s ease-in-out infinite;
  flex: 0 0 auto;
}
.breath-label { transition: opacity 0.28s ease; }
.breath-label.fading { opacity: 0; }
.breath-track { height: 1px; background: var(--rule); margin-top: 0.55rem; }
.breath-track span {
  display: block; height: 100%; width: 0;
  background: var(--gilt);
  transition: width 0.6s ease;
}
@keyframes still-breathe {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  45% { opacity: 1; transform: scale(1.15); }
}

/* Style two: beads. Five marks, one per pass, filled as each finishes. No
   words unless you want them, no numbers at all. */
.beads { display: flex; align-items: center; gap: 0.9rem; min-height: 1.4rem; }
.beads .bead-row { display: flex; gap: 0.4rem; }
.bead {
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  border: 1px solid var(--gilt);
  background: transparent;
}
.bead.done { background: var(--gilt); }
.bead.running { background: var(--gilt); animation: still-breathe 2.2s ease-in-out infinite; }
.beads .bead-label { color: var(--ink-soft); }

/* Style three: the trace. Every pass, its state, and what it cost. This is the
   developer's view of the same wait, kept because a slow turn is a real
   question someone has to answer. */
.trace { list-style: none; margin: 0; padding: 0; }
.trace li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.08rem 0; opacity: 0.45; }
.trace li.running { opacity: 1; }
.trace li.done { opacity: 0.7; }
.trace .mark { width: 0.9em; text-align: center; color: var(--gilt); }
.trace li.done .mark { color: var(--good); }
.trace .name { flex: 1; }
.trace .time { font-variant-numeric: tabular-nums; opacity: 0.75; }

.thinking .slow { margin: 0.5rem 0 0; font-size: 0.78rem; opacity: 0.85; }

/* ---- what I think I am hearing ---- */

/* Only ever built when the server sent derived state, which it does in
   development only. On a live server this is absent, not hidden. */
.hearing { max-width: min(34rem, 92%); margin: 0.35rem 0 0 0.2rem; font-family: var(--sans); }
.hearing-open {
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: underline dotted var(--gilt);
  text-underline-offset: 4px;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 400;
  padding: 0.1rem 0;
  text-align: left;
  cursor: pointer;
}
.hearing-open:hover { color: var(--ink); }
.hearing-open .chev { color: var(--gilt); margin-right: 0.35rem; display: inline-block; }
.hearing-open[aria-expanded="true"] .chev { transform: rotate(90deg); }
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  background: var(--paper);
  color: var(--ink);
}
.hearing-foot { margin: 0.7rem 0 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.hearing-foot .caveat { color: var(--ink-soft); font-size: 0.72rem; margin: 0; }
.hearing-foot button {
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--indigo); font-family: var(--sans); font-size: 0.72rem;
  font-weight: 600; padding: 0.15rem 0.6rem;
}

/* ---- the floating state panel ---- */

/* Fixed to the viewport and owned by the body, so no column edge and no
   scroller can clip it. It sits clear of the composer and never covers the
   place someone is typing. */
.state-panel {
  position: fixed;
  z-index: 30;
  left: 1rem;
  bottom: 1rem;
  /* The popover user-agent style sets `inset: 0` and `margin: auto`, which
     would stretch this across the viewport and centre it. Author rules win, so
     name every side rather than only the two that matter. */
  top: auto;
  right: auto;
  margin: 0;
  padding: 0;
  width: min(21rem, calc(100vw - 2rem));
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gilt);
  border-radius: 0.4rem;
  box-shadow: 0 0.7rem 2rem rgb(0 0 0 / 18%);
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.45;
}
.state-panel header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.state-panel header button {
  background: none; border: 0; color: var(--ink-soft);
  font-size: 0.8rem; padding: 0.1rem 0.3rem;
}
.state-panel header button:hover { color: var(--ink); }
.state-panel-body { padding: 0.6rem 0.7rem 0.8rem; }
.state-panel .lede { margin: 0 0 0.7rem; color: var(--ink); }
.state-panel h4 {
  margin: 0.6rem 0 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* The panel would cover a phone. Give it the width and let it sit above the
   composer rather than beside it. */
@media (max-width: 560px) {
  .state-panel { left: 0.6rem; right: 0.6rem; width: auto; max-height: 45vh; }
}

/* ---- the rail ---- */

/* A drawing of the night down the left margin. One mark per completed turn,
   leaning crimson as the reading gets heavier and green as it lightens. No
   numbers, no axis, nothing to score yourself against. */
.rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.rail-mark {
  position: absolute;
  left: 0;
  width: 3px;
  border-radius: 2px;
  opacity: 0.75;
  transition: top 0.4s ease, height 0.4s ease;
}

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

.composer {
  flex: 0 0 auto;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: 0.8rem 1.1rem 1rem;
}
.composer-inner { max-width: 44rem; margin: 0 auto; }
.composer-line { display: flex; gap: 0.6rem; align-items: flex-end; }
.composer textarea {
  flex: 1 1 auto;
  min-height: 2.9rem;
  max-height: 40vh;
  resize: none;
  border-radius: 1.1rem;
  padding: 0.7rem 0.95rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.5;
  background: var(--paper-2);
}
.composer button.send {
  border-radius: 999px;
  padding: 0.7rem 1.25rem;
  flex: 0 0 auto;
}
/* Response-emphasis slider: Personal on the left, Strategic on the right,
   three stops, always the middle (the normal Be Still blend) on load. Its
   position lives only in this input element in memory; it is never written
   to localStorage, sessionStorage, or a cookie. */
.emphasis-sheet { position: relative; }
.emphasis-toggle { display: none; }
.composer .emphasis-slider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.composer .emphasis-slider .emphasis-label { white-space: nowrap; }
.composer .emphasis-slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 5rem;
  max-width: 9rem;
  accent-color: var(--gilt);
}
.composer .actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.composer .actions[hidden] { display: none; }
.composer .actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-width: 2.4rem; min-height: 2.4rem;
  background: none; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-soft); font-family: var(--sans); font-size: 0.75rem;
  font-weight: 600; padding: 0.25rem;
}
.composer .actions .control-icon { width: 1.05rem; height: 1.05rem; }
.composer .actions button:hover { color: var(--ink); }
.composer .actions button[hidden] { display: none; }

/* A quiet number in the corner, for whoever is building this rather than for
   whoever is using it. Off unless it is asked for. */
.token-count {
  position: fixed;
  right: 0.9rem;
  bottom: 0.7rem;
  z-index: 5;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  opacity: 0.7;
  pointer-events: none;
}

.upload-note {
  margin: 0.5rem 0 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  color: var(--ink-soft);
}
.upload-note[hidden] { display: none; }

@media (max-width: 600px) {
  .opening .starter-questions {
    grid-template-columns: 1fr;
    max-height: var(--starter-mobile-max-height, 18rem);
  }
}

/* ---- settings drawer ---- */

/* Everything adjustable lives behind one control and starts closed, so the
   default page is the conversation and nothing else. */
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(20rem, 88vw);
  background: var(--paper-2);
  border-left: 1px solid var(--rule);
  padding: 1.1rem;
  overflow-y: auto;
  font-family: var(--sans);
  font-size: 0.82rem;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 20;
}
.drawer.open { transform: none; }
.drawer h2 {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 0;
  padding: 0;
  margin: 1.3rem 0 0.5rem;
}
.drawer h2:first-of-type { margin-top: 0.6rem; }
.drawer .close {
  position: absolute; top: 0.6rem; right: 0.7rem;
  background: none; border: 0; color: var(--ink-soft);
  font-size: 0.95rem; padding: 0.2rem 0.4rem;
}
.drawer .close:hover { color: var(--ink); }
.drawer label.check { font-size: 0.82rem; margin: 0.4rem 0; }
.drawer p.why { color: var(--ink-soft); font-size: 0.74rem; margin: 0.15rem 0 0.4rem; }
.drawer .disclosure-link {
  width: 100%;
  margin-top: 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 0.6rem;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
  padding: 0.55rem 0.7rem;
  text-align: left;
}
/* The same footer every other page carries, sized for a 20rem drawer rather
   than the full page width it normally spans. */
.drawer .site-footer { margin-top: 1.3rem; padding: 1rem 0 0; font-size: 0.8rem; }
.drawer .site-footer nav { justify-content: flex-start; }

.notice.demo { margin: 0 0 1.2rem; font-size: 0.85rem; }
.companion-checking #preparing { display: none; }

@media (prefers-reduced-motion: reduce) {
  .breath-dot, .bead.running { animation: none; opacity: 0.8; }
  .said { animation: none; }
}
@media (max-width: 600px) {
  .desktop-only { display: none; }
  .mobile-only { display: flex; }
  .stream { padding: 0; }
  .stream > .still-bar {
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.7rem;
    backdrop-filter: none;
  }
  .stream > .still-bar .home {
    display: inline;
    flex: 0 0 auto;
    font-size: 0.68rem;
    white-space: nowrap;
  }
  .stream > .still-bar .here { font-size: 0.68rem; }
  .stream > .still-bar .privacy-link { font-size: 0.7rem; }
  .stream > .still-bar button { padding: 0.18rem 0.45rem; }
  .stream-inner { padding: 0.75rem 0.7rem 1rem 1.6rem; }
  .opening { padding: 0.75rem 0 1rem; }
  .opening .verse { font-size: 1rem; margin-bottom: 0.4rem; }
  .opening .verse cite { margin-top: 0.2rem; }
  .opening .starter-heading { margin-top: 0.55rem; }
  .bubble { max-width: 94%; }
  .composer {
    padding: 0.5rem 0.7rem max(0.4rem, env(safe-area-inset-bottom));
  }
  .composer textarea { min-height: 2.7rem; }
  .composer button.send { padding: 0.65rem 1rem; }
  .composer .actions { margin-top: 0.4rem; }
  .emphasis-sheet { margin-top: 0.25rem; }
  .emphasis-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.9rem;
    padding: 0.2rem 0.35rem;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.7rem;
    text-align: left;
    touch-action: pan-y;
  }
  .emphasis-current { margin-left: auto; color: var(--ink); font-weight: 700; }
  .emphasis-chevron { color: var(--gilt); transition: transform 0.18s ease; }
  .emphasis-toggle[aria-expanded="true"] .emphasis-chevron { transform: rotate(180deg); }
  .emphasis-sheet[data-expanded="false"] .emphasis-slider { display: none; }
  .emphasis-sheet[data-expanded="true"] .emphasis-slider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.4rem);
    z-index: 6;
    justify-content: center;
    margin: 0;
    padding: 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 0.8rem;
    background: var(--paper-2);
    box-shadow: 0 0.7rem 2rem #0003;
  }
  .entry-disclosure {
    width: calc(100vw - 1.2rem);
    max-height: calc(100dvh - 1.2rem);
  }
  .entry-disclosure-inner { padding: 1rem 1rem 1.15rem; }
  .entry-disclosure form {
    bottom: -1.15rem;
    margin: 0 -1rem -1.15rem;
    padding: 0.7rem 1rem 0.9rem;
  }
}