/* Phase B front door, layout B (ruling 85): the conversation sits in a card that matches the
   intake cards and scrolls inside itself. Ships only in the chat build (JL_CHAT=1). */
.chat{order:3;width:min(560px,100%);text-align:left;border:1px solid var(--line-strong);border-radius:18px;background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.chat[hidden]{display:none}
/* CW 23:20Z (Tracy): the card never grows taller than the window. chat.js sets --jl-chat-max to the room between the
   top menu and the bottom of the window (less the typing box under the card); the message list gives way and scrolls
   inside the card, so the typing box, or the name, email and Send row, stays on screen. */
.chat{max-height:var(--jl-chat-max,none)}
.chat>*{flex:none}
.chat>.chat-log{flex:0 1 auto;min-height:0}
.chat-log{display:flex;flex-direction:column;gap:12px;max-height:min(420px,48vh);overflow:auto;overscroll-behavior:contain}
.chat-log .m{font-size:15px;line-height:1.55;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.chat-log .m[hidden]{display:none}
.chat-log .m.you{align-self:flex-end;background:var(--surface-2);border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:10px 14px;color:var(--text)}
.chat-log .m.ai{align-self:flex-start;color:var(--text);padding-left:17px;position:relative}
.chat-log .m.ai::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(104,210,186,.5)}
.chat-log .typing{align-self:flex-start;display:flex;gap:5px;padding:8px 0 8px 17px;margin:0}
.chat-log .typing[hidden]{display:none}
.chat-log .typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:jl-chat-dot 1.2s infinite}
.chat-log .typing i:nth-child(2){animation-delay:.15s}.chat-log .typing i:nth-child(3){animation-delay:.3s}
@keyframes jl-chat-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media (prefers-reduced-motion: reduce){.chat-log .typing i{animation:none;opacity:.6}}
.chat-contact{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.chat-contact[hidden]{display:none}
.chat-contact .chat-send{align-self:flex-start}
.chat-status{margin:0;font-size:15px;line-height:1.5;padding-left:18px;position:relative;color:var(--text);overflow-wrap:anywhere}
.chat-status::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.chat-status.bad::before{background:#E3B96B}
.chat-status[hidden]{display:none}
.chat-ts{position:absolute;width:0;height:0;overflow:hidden}
.chat-notice{order:3;width:min(560px,100%);margin:-18px 0 0;text-align:left;padding-left:18px;font-size:12px;color:var(--text-3)}
/* CW 21:28Z: on home too, the privacy line is centered under the box (the same box width; only the text alignment). */
.page.home .chat-notice{text-align:center;padding-left:0}
/* Tracy 22:04Z: Contact's line under the form, centered under it (the form's width), the chat line's look. */
.form-notice{order:0;margin:12px 0 0;text-align:center;padding-left:0}
/* Preview only (CW 22:15Z): the dry-run note under the sent line. The element is rendered only in the preview build. */
.chat-dry{margin:0;font-size:12px;color:var(--text-3)}
.chat-dry[hidden]{display:none}
.chat-notice a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
/* Tracy 01:37Z: keyboard focus on the links in these lines shows the site's mint ring (visual only). */
.chat-notice a:focus-visible,.chat-next a:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:4px}
/* J2 addition 3: server-named tap buttons under the last reply. 44 px targets; they wrap at 375 px. */
.chat-chips{display:flex;flex-wrap:wrap;gap:8px}
.chat-chips[hidden]{display:none}
.chat-chips .chip{min-height:44px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface-2);color:var(--text);font:inherit;font-size:15px;line-height:1.2;cursor:pointer;max-width:100%;overflow-wrap:anywhere}
.chat-chips .chip[hidden]{display:none}
.chat-chips .chip:hover{border-color:var(--mint)}
/* The chat is the intake: a question that takes several picks. A picked button shows the soft mint tint. */
.chat-chips .chip[aria-pressed="true"]{background:rgba(104,210,186,.10);border-color:rgba(104,210,186,.55);color:var(--mint)}
/* "Send what I have": a quiet link under the buttons, from the second answer on. */
.chat-partial{align-self:flex-start;min-height:44px;padding:10px 0;background:none;border:0;font:inherit;font-size:14px;line-height:1.4;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.chat-partial:hover{color:var(--mint)}
.chat-partial:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}
.chat-partial[hidden]{display:none}
.chat-chips .chip:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
/* Addendum 1 (Tracy: the send buttons feel dead on a phone): a pressed state that works on touch, and a busy arrow
   while Jerry is replying. .down is set by site.js on pointerdown and by chat.js on touchstart. */
.door .send.down{transform:scale(.92)}
.door .send.busy{opacity:.45;cursor:default}
.chat-chips .chip.down{transform:scale(.96)}
/* Copy fix Addendum 2: the intake link line after a real Send. */
.chat-next{margin:0;font-size:15px;line-height:1.5;padding-left:18px;overflow-wrap:anywhere}
.chat-next[hidden]{display:none}
.chat-next a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* J3d (CW card 2026-09-27, Tracy ruling 9): a locked chat hides the typing box instead of leaving a dead one. The reset
   link sits under the name/email card; "Start a new chat" takes the box's place. The typo suggestion and the check line
   sit under the email field (the right column when the fields share a row). 44 px targets. */
.door[hidden]{display:none}
.chat-suggest,.chat-restart{align-self:flex-start;min-height:44px;max-width:100%;padding:10px 0;background:none;border:0;font:inherit;font-size:14px;line-height:1.4;text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer;overflow-wrap:anywhere}
.chat-suggest{color:var(--text)}
.chat-restart{color:var(--text-2)}
.chat-suggest:hover,.chat-restart:hover{color:var(--mint)}
.chat-suggest:focus-visible,.chat-restart:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}
.chat-email-note{margin:0;font-size:14px;line-height:1.4;color:#E3B96B}
@media (min-width:561px){.chat-contact .chat-suggest,.chat-contact .chat-email-note{margin-left:calc(50% + 5px)}}
.chat-suggest[hidden],.chat-email-note[hidden],.chat-restart[hidden],.chat-new[hidden]{display:none}
.chat-new{align-self:flex-start}
.chat-restart.down{opacity:.7}