/* ------------------------------------------------------------------
   The chat. It looks like the ones people already know, on purpose,
   because that is the shape the hands expect. The one thing it does
   differently is the line above the composer: everything above it is
   on screen for you and is never sent, and the page says so where the
   assumption would otherwise be made.
   ------------------------------------------------------------------ */
.talk { display: flex; flex-direction: column; height: 100vh; min-height: 0; }

.talk-top { display: flex; align-items: center; gap: 14px; padding: 12px 24px;
            border-bottom: 1px solid var(--line); background: var(--snow); }
.talk-top .who { display: flex; align-items: center; gap: 10px; }
.talk-top .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blossom); }
.talk-top b { font-size: 15px; font-weight: 600; }
.talk-top select { width: auto; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
                   color: var(--ink-2); border-bottom: 0; padding: 4px 22px 4px 8px;
                   border-radius: 7px; background-color: var(--blush); }
.talk-top .far { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.thread { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 8px;
          scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .thread { scroll-behavior: auto; } }
.thread-in { max-width: 760px; margin-inline: auto; display: grid; gap: 26px; }

/* The opening state carries the photograph, because this is the first thing
   anyone sees now. It is a state, not a hero: the moment there is a turn on
   screen it is removed and the thread gets a plain ground to read on. */
.empty { position: relative; min-height: min(60vh, 520px); display: flex;
         align-items: center; border-radius: 14px; overflow: hidden;
         background: var(--bark-2); }
.empty-photo, .empty-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.empty-photo img { object-fit: cover; object-position: 58% 34%; }
.empty::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(48,18,30,.90) 0%, rgba(48,18,30,.72) 32%,
                              rgba(48,18,30,.26) 60%, rgba(48,18,30,.04) 78%); }
.empty-in { position: relative; z-index: 2; padding: 36px clamp(22px, 3.6vw, 48px);
            max-width: 54ch; }
.empty-mark { color: var(--blossom); }
.empty h1 { font-size: clamp(28px, 3.9vw, 46px); line-height: 1.05; color: var(--on-photo);
            margin-top: 14px; }
.empty p { color: rgba(255,244,247,.84); margin-top: 13px; font-size: 15.5px; max-width: 48ch; }
.seeds { display: grid; gap: 7px; margin-top: 20px; }
.seeds button { text-align: left; background: rgba(255,244,247,.10); color: var(--on-photo);
                border: 1px solid rgba(255,244,247,.22); border-radius: 10px;
                padding: 10px 14px; font-size: 13.5px; cursor: pointer;
                backdrop-filter: blur(3px);
                transition: background .15s ease, border-color .15s ease; }
.seeds button:hover { background: rgba(255,244,247,.18); border-color: rgba(255,244,247,.4); }
.empty-link { margin-top: 18px; color: var(--blossom); }
/* After Clear there is no photograph to lean on, so the same block reads as
   a quiet line instead of a second front door. */
.empty.blank { min-height: 0; background: none; padding: min(14vh, 120px) 0; }
.empty.blank::after { display: none; }
.empty.blank .empty-in { max-width: none; text-align: center; padding: 0; }
.empty.blank h1 { color: var(--ink); font-size: clamp(26px, 3.4vw, 38px); }
.empty.blank p { color: var(--ink-2); margin-inline: auto; }

.turn { display: grid; gap: 10px; }
.turn .role { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600;
              color: var(--ink-3); }
.turn .role .mk { width: 18px; height: 18px; display: grid; place-items: center;
                  color: var(--blossom); }
.bubble { border-radius: 12px; padding: 14px 17px; font-size: 15px; line-height: 1.65;
          white-space: pre-wrap; overflow-wrap: anywhere; }
.turn.you .bubble { background: var(--blush); border: 1px solid var(--line); }
.turn.them .bubble { background: var(--card); border: 1px solid var(--line); box-shadow: var(--e1); }
.turn.them .bubble.bad { color: #a32d4e; }
.turn .meta { font: 500 11.5px/1.4 var(--mono); color: var(--ink-3); }
/* Once a turn is behind the newest one it is dimmed, because from the
   model's side it no longer exists. */
.turn.past { opacity: .55; }
.turn.past:hover { opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-file { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px;
             border-radius: 8px; background: var(--petal); color: var(--ink);
             font: 500 12.5px var(--mono); }
.chip-file button { border: 0; background: none; cursor: pointer; color: var(--ink-2);
                    font-size: 15px; line-height: 1; padding: 0 2px; }
.chip-file button:hover { color: var(--rose); }
.chip-file img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; }

.composer-wrap { padding: 0 24px 18px; background: var(--snow); }
.composer { max-width: 760px; margin-inline: auto; background: var(--card);
            border: 1px solid var(--line-2); border-radius: 14px; padding: 12px 14px 10px;
            box-shadow: var(--e1); transition: border-color .15s ease, box-shadow .15s ease; }
.composer:focus-within { border-color: var(--rose); box-shadow: var(--e2); }
.composer.drop { border-color: var(--rose); background: var(--blush); }
.composer textarea { border: 0; padding: 4px 2px; background: transparent; font-size: 15.5px;
                     line-height: 1.6; resize: none; max-height: 40vh;
                     /* the base stylesheet gives every textarea a tall minimum,
                        which is right for a form field and wrong for a composer */
                     min-height: 0; }
.composer textarea:focus { outline: none; }
.composer .files { margin-bottom: 10px; }
.composer-bar { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.composer-bar .sub { margin-left: auto; font-size: 12px; }
.attach { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px;
          border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2);
          cursor: pointer; border: 1px solid var(--line-2); }
.attach:hover { background: var(--blush); color: var(--ink); }
.t-foot { max-width: 760px; margin: 12px auto 0; text-align: center; font-size: 12px; }

@media (max-width: 760px) {
  .talk { height: auto; min-height: 100vh; }
  .talk-top { padding: 10px 16px; flex-wrap: wrap; }
  /* The count and the two buttons together are wider than a phone, so the
     count takes its own line rather than pushing the page sideways. */
  .talk-top .far { flex-wrap: wrap; justify-content: flex-end; min-width: 0; gap: 8px; }
  .talk-top .far .sub { width: 100%; text-align: right; }
  .thread { padding: 18px 16px 4px; }
  .composer-wrap { padding: 0 16px 14px;
                   padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .composer-bar .sub { display: none; }
}

/* ---------------- the endpoint, set from the chat ----------------
   It used to live on the landing page. The chat is the landing page now,
   so asking someone to go and find it elsewhere would be asking them to
   leave before they have started. */
.wire { border-bottom: 1px solid var(--line); background: var(--blush); }
.wire-in { max-width: 760px; margin-inline: auto; padding: 16px 24px 18px; }
.wire-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.wire .field { display: grid; gap: 5px; flex: 1 1 220px; min-width: 0; }
.wire .field span { font-size: 12.5px; font-weight: 600; color: var(--rose); }
.wire input { background: var(--card); border: 1px solid var(--line-2); border-radius: 8px;
              padding: 9px 12px; font-size: 14px; }
.wire #t-wire-state { margin-top: 10px; }
/* When there is nowhere to send, say it here rather than after the click */
.needs-endpoint .composer { border-color: var(--rose); }

#t-why a { color: var(--rose); text-decoration: underline; text-underline-offset: 2px; }

/* ---------------- the contract address ----------------
   The one string on the site where a wrong character costs somebody real
   money, so it is large, monospaced, and copied by clicking rather than
   by selecting and hoping. */
.ca { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
      background: var(--card); border: 1px solid var(--line-2); border-radius: 999px;
      padding: 5px 12px 5px 6px; color: var(--ink);
      transition: border-color .15s ease, background .15s ease; }
.ca:hover { border-color: var(--rose); background: var(--blush); }
.ca .tag { background: var(--petal); color: var(--ink); font: 700 11px/1 var(--sans);
           letter-spacing: .12em; padding: 7px 10px; border-radius: 999px; }
.ca .addr { font: 500 15px/1 var(--mono); letter-spacing: -.01em; }
.ca .cp { color: var(--ink-3); }
.ca:hover .cp { color: var(--rose); }
.ca.pending .addr { color: var(--ink-3); font-style: normal; }
.ca.pending { cursor: default; }
.ca.pending:hover { border-color: var(--line-2); background: var(--card); }
.ca.done { border-color: var(--rose); }
.ca.done .addr, .ca.done .cp { color: var(--rose); }
@media (max-width: 860px) { .ca .addr { font-size: 13px; } }
@media (max-width: 620px) { .ca .cp { display: none; } }