/* /site/talk/ — section overlay only.
 *
 * Every colour comes through the tokens site.css already defines. Nothing here
 * redefines :root, imports a font, or reaches a remote host: the section tone
 * is set in site.css beside the other wings, so this file is layout and the
 * one shape site.css has no reason to know about — a conversation. */

.talk-wrap { max-width: 46rem; }

.talk-sub {
  color: var(--text-dim);
  margin: -0.4rem 0 1rem;
  font-size: 0.95rem;
}

/* THE AI LABEL LIVES OUTSIDE THE FRAME, ALWAYS VISIBLE. A disclosure inside
   the transcript is a disclosure that scrolls away, which is the same as not
   having one. */
.talk-ailabel {
  border: 1px solid var(--tone-edge);
  border-left-width: 3px;
  background: var(--tone-veil);
  color: var(--text);
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin: 1rem 0 1.25rem;
}

/* ── the hub's one card ──────────────────────────────────────────────────── */

.talk-cards { display: grid; gap: 0.75rem; margin-bottom: 1.75rem; }

.talk-card {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hair-strong);
  border-top: 2px solid var(--tone-edge);
  border-radius: 8px;
  text-decoration: none;
  background: var(--tone-veil);
}
.talk-card:hover { border-color: var(--edge); }
.talk-card-name { display: block; color: var(--text-strong); font-size: 1.2rem; font-weight: 600; }
.talk-card-where { display: block; color: var(--text-dim); font-size: 0.9rem; margin-top: 0.15rem; }
.talk-card-go { display: block; color: var(--frost-300); font-size: 0.9rem; margin-top: 0.6rem; }

/* ── the conversation ────────────────────────────────────────────────────── */

.talk-frame {
  border: 1px solid var(--hair-strong);
  border-radius: 10px;
  padding: 0.9rem;
  margin-bottom: 1.75rem;
}

.talk-log {
  min-height: 4rem;
  max-height: 26rem;
  overflow-y: auto;
  display: grid;
  gap: 0.85rem;
}
.talk-log:empty { display: none; }

.talk-turn { display: grid; gap: 0.2rem; }
.talk-who {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.talk-text { margin: 0; white-space: pre-wrap; }

.talk-turn-you .talk-text {
  color: var(--text-dim);
  border-left: 2px solid var(--hair-strong);
  padding-left: 0.7rem;
}
.talk-turn-him .talk-text { color: var(--text-strong); }

/* THE OUT-OF-CHARACTER PANEL. Deliberately not a speech bubble and carrying no
   name: a crisis reply, or a refusal to discuss money, must not read as a
   fictional man giving somebody advice. */
.talk-turn-note .talk-text {
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.94rem;
}

.talk-thinking .talk-text { color: var(--text-faint); }

.talk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0; }
.talk-chip {
  background: transparent;
  border: 1px solid var(--hair-strong);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.talk-chip:hover { border-color: var(--edge); color: var(--text-strong); }

.talk-ask { margin-top: 0.9rem; }
.talk-ask textarea {
  width: 100%;
  resize: vertical;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--hair-strong);
  border-radius: 6px;
  color: var(--text-strong);
  font: inherit;
  padding: 0.6rem 0.7rem;
}
.talk-ask textarea:focus { outline: none; border-color: var(--edge); }

.talk-ask-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.talk-count { color: var(--text-faint); font-size: 0.8rem; }

.talk-send {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--frost-300);
  border-radius: 6px;
  padding: 0.45rem 1.1rem;
  font: inherit;
  cursor: pointer;
}
.talk-send:hover:not(:disabled) { color: var(--frost-400); }
.talk-send:disabled { opacity: 0.5; cursor: default; }

.talk-offline { color: var(--text-dim); font-size: 0.9rem; margin: 0.7rem 0 0; }
.talk-noscript { color: var(--text-dim); font-size: 0.94rem; margin: 0.2rem 0 0; }

/* ── the standing notices ────────────────────────────────────────────────── */

.talk-safety {
  font-size: 0.9rem;
  color: var(--text-dim);
  border-top: 1px solid var(--hair);
  padding-top: 0.9rem;
}
.talk-fan { font-size: 0.82rem; color: var(--text-faint); }

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

/* KEYED TO THE POINTER, NOT THE VIEWPORT — same rule as the fan wing. A
   1024px tablet is a finger and a narrow desktop window is a mouse, so a
   width query is wrong in both directions. */
@media (pointer: coarse) {
  .talk-chip { min-height: 44px; padding: 0.5rem 0.9rem; }
  .talk-send { min-height: 44px; }
  .talk-ask textarea { min-height: 44px; }
}