/*
 * 评理 — the page's own rules.
 *
 * The shell comes from app.css, which this page links even though it runs none of
 * the scatter engine: the column, topbar, brand mark, buttons, status line and
 * the panel are the family's, and a second copy of them here is a second copy
 * that drifts. What is left for this file is the one thing app.css has no
 * opinion about: a conversation between two people, which is a shape none of the
 * other three tools has.
 *
 * The whole layout is one decision — a thread of bubbles with the reader's own
 * side quiet and the other side carrying the surface — and the rest is the two
 * ends of it: the compose screen before there is a topic, and the verdict card
 * after there is a judgement.
 */

/* ------------------------------------------------------------------ compose */

.lede {
  margin: 0 0 var(--s6);
  color: var(--text-dim);
}

.compose {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.compose input,
.compose textarea {
  width: 100%;
  padding: var(--s5) var(--s6);
  font: inherit;
  /* 16px, and not for looks: iOS zooms the page when a control smaller than 16px
     takes focus, and a page that jumps on the tap that starts the interaction is
     a page that feels broken. */
  font-size: var(--t5);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-fast) var(--ease);
}

.compose textarea {
  resize: vertical;
}

.compose input::placeholder,
.compose textarea::placeholder {
  color: var(--text-faint);
}

.compose input:focus,
.compose textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.compose-foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.compose-foot .quick-btn {
  margin-right: auto;
}

.hint {
  margin-right: auto;
  font-size: var(--t1);
  color: var(--text-faint);
}

/*
 * The character count. `:empty` rather than a class toggle, because the state
 * worth having is "there is nothing to say" and an empty element is exactly that
 * state — see updateSay() in pk.js for when it fills.
 */
.count:empty {
  display: none;
}

.count {
  align-self: flex-end;
  font-size: var(--t1);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.count[data-tone='warn'] {
  color: var(--text);
}

/* -------------------------------------------------------------- the paste */

/*
 * A disclosure rather than a visible box. Opening a link imports the session by
 * itself, so this path exists for the link that did not survive the trip — which
 * is a minority of visits, and a paste box sitting under the topic input on every
 * visit would read as "there is something else you were supposed to do".
 */
.paste {
  margin-top: var(--s6);
  font-size: var(--t3);
  color: var(--text-dim);
}

.paste summary {
  padding: var(--s2) 0;
  cursor: pointer;
  border-radius: var(--radius);
}

.paste summary:hover {
  color: var(--text);
}

.paste form {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s3);
}

.paste textarea {
  width: 100%;
  padding: var(--s4) var(--s5);
  font: inherit;
  font-size: var(--t4);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  /* A 口令 is one long unbroken run of characters, and `anywhere` is the only
     value that will break inside it. */
  overflow-wrap: anywhere;
}

.paste .btn {
  align-self: flex-start;
}

/* -------------------------------------------------------------------- board */

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s5);
}

.board-head h1 {
  margin: 0;
  font-size: var(--t6);
  font-weight: 650;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/*
 * The thread. A column with a gap, and the only thing that varies per row is
 * which side it leans to and how wide it is allowed to get — a bubble that
 * stretches the full column is a paragraph, and the lean is what makes "who said
 * this" legible at a glance without a label on every line.
 */
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.bubble-row {
  display: flex;
  /* 78% of the column, so a long message wraps instead of running edge to edge
     and the lean stays visible even on a phone. */
  max-width: 78%;
}

.bubble-row.is-mine {
  align-self: flex-end;
}

.bubble-row.is-theirs {
  align-self: flex-start;
}

.bubble {
  position: relative;
  min-width: 0;
  padding: var(--s4) var(--s5);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/*
 * The other person's message is the one with something to do about it, so it
 * carries the surface and the reader's own is the flat one. Same reading as the
 * other tools' lists: the emphasis goes on what is not settled yet.
 */
.bubble-row.is-mine .bubble {
  background: var(--bg-sunken);
  border-color: transparent;
  box-shadow: none;
}

.bubble-text {
  margin: 0;
  font-size: var(--t4);
  line-height: 1.6;
  /* A pasted URL or a run of numbers is one word to the line breaker. */
  overflow-wrap: anywhere;
  /* The message arrives with its own line breaks, and they are the writer's. */
  white-space: pre-wrap;
}

.bubble-who {
  display: block;
  margin-top: var(--s2);
  font-size: var(--t1);
  color: var(--text-faint);
}

/* The newest message is where the eye should land when the page opens. */
.bubble-row.is-last .bubble {
  animation: bubble-in var(--dur) var(--ease) both;
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble-row.is-last .bubble {
    animation: none;
  }
}

/* ------------------------------------------------------------------- turn */

.turn {
  margin: 0 0 var(--s4);
  font-size: var(--t3);
  color: var(--text-dim);
}

.turn[data-tone='warn'] {
  color: var(--text);
}

/* ---------------------------------------------------------------- actions */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  padding-top: var(--s2);
}

.actions .btn {
  padding: var(--s4) var(--s6);
}

/* -------------------------------------------------------------- the sheet */

.sheet {
  width: min(520px, calc(100vw - var(--s6) * 2));
  padding: var(--s6);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
}

.sheet::backdrop {
  background: rgb(0 0 0 / 45%);
}

.sheet h2 {
  margin: 0 0 var(--s2);
  font-size: var(--t5);
  font-weight: 650;
}

.sheet-hint {
  margin: 0 0 var(--s5);
  font-size: var(--t2);
  color: var(--text-dim);
}

.sheet-label {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t2);
  color: var(--text-faint);
}

/*
 * A textarea, not a link with a copy button beside it. The link is 500–4000
 * characters of payload: it is not something to read, it is something to take,
 * and a selectable box is the one control where "select all, copy" is one
 * gesture on every platform.
 */
.sheet-box {
  width: 100%;
  padding: var(--s4) var(--s5);
  font: inherit;
  font-size: var(--t2);
  color: var(--text-dim);
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  resize: none;
  overflow-wrap: anywhere;
}

.sheet .btn {
  width: 100%;
  margin-top: var(--s3);
}

.sheet-code {
  margin-top: var(--s5);
  font-size: var(--t2);
  color: var(--text-dim);
}

.sheet-code summary {
  padding: var(--s2) 0;
  cursor: pointer;
  border-radius: var(--radius);
}

.sheet-code[data-primary='true'] {
  padding: var(--s4) var(--s5);
  color: var(--text);
  background: var(--primary-soft);
  border-radius: var(--radius);
}

.sheet-close {
  margin-top: var(--s5);
}

/* --------------------------------------------------------------- verdict */

.verdict {
  margin-top: var(--s6);
}

.verdict-body {
  padding: var(--s2) var(--s3) var(--s3);
}

/*
 * The headline is the whole answer, so it is the size of a heading rather than
 * of a line of body text. Everything under it is the evidence for it.
 */
.verdict-headline {
  margin: 0 0 var(--s5);
  font-size: var(--t6);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.verdict-stale {
  margin: 0;
  font-size: var(--t4);
  color: var(--text-dim);
}

.verdict-detail {
  margin: 0 0 var(--s4);
  font-size: var(--t3);
  color: var(--text-dim);
}

/*
 * The distribution, as four rows. Bars rather than a single score because that
 * is what the model returned: one probability per label, rounded to two
 * decimals. See buildBar() in pk.js for why the scale is the largest value and
 * not 100%.
 */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.bar-row {
  display: grid;
  grid-template-columns: 3.5em 1fr 3em;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t2);
  color: var(--text-dim);
}

.bar-track {
  height: 8px;
  background: var(--bg-sunken);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
  transition: width var(--dur) var(--ease);
}

.bar-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

/*
 * The one line that keeps the tool honest. Quiet, but always present under a
 * verdict: 「Jev 说你更站得住」 read without it is 「我说了算」, and this is the
 * sentence that stops it being used as one.
 */
.verdict-note {
  margin: 0;
  font-size: var(--t2);
  line-height: 1.7;
  color: var(--text-faint);
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 560px) {
  .bubble-row {
    /* Wider on a phone: 78% of a 390px column is a 300px bubble, which is about
       ten characters per line for a long sentence. */
    max-width: 88%;
  }

  .compose-foot {
    flex-wrap: wrap;
  }

  .compose-foot .quick-btn {
    margin-right: 0;
  }

  .compose-foot .btn {
    flex: 1;
  }

  /* The hint is a keyboard hint, and a phone has no keyboard to hint at. */
  .hint {
    display: none;
  }

  .actions .btn {
    flex: 1 1 auto;
  }
}