/* Jack, the chat. Lower right, with the panel open from the start on a wide
   screen so the visitor lands on Jack's question and a box to answer it in;
   the panel sizes to the conversation, so at first it is a compact card and
   grows as the two of them talk. On a phone it starts as the launcher, and
   the cookie banner (same bottom edge) wins while it is open; jack.js hides
   the launcher until it is gone. Uses the site's tokens from styles.css. */
.jack-launch { position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 13px; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .15s ease, box-shadow .15s ease; }
.jack-launch:hover { transform: translateY(-1px); border-color: var(--text); }
.jack-launch .jack-face { font-size: 18px; line-height: 1; }
.jack-launch[hidden] { display: none; }
.jack-panel { position: fixed; right: 18px; bottom: 18px; z-index: 901; width: min(380px, calc(100vw - 36px)); max-height: min(640px, calc(100vh - 36px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -20px rgba(24,24,27,.35); overflow: hidden; }
.jack-panel[hidden] { display: none; }
.jack-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--bg); }
.jack-head h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0; }
.jack-head p { margin: 2px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.jack-close { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; width: 32px; height: 32px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--text); }
.jack-close:hover { border-color: var(--text); }
.jack-log { flex: 1; overflow: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.jack-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.jack-msg a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.jack-msg.from-jack { align-self: flex-start; background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; }
.jack-msg.from-you { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.jack-msg.is-error { background: var(--primary-wash); color: var(--primary-ink); }
.jack-typing { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 4px 6px; }
.jack-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.jack-form textarea { flex: 1; resize: none; min-height: 44px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 14.5px; color: var(--text); background: var(--surface); }
.jack-form textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: transparent; }
.jack-send { align-self: flex-end; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--primary); color: #fff; font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.jack-send:hover { background: var(--primary-ink); }
.jack-send[disabled] { opacity: .5; cursor: default; }
.jack-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 14px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: var(--surface); }
.jack-foot a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
/* Inline, inside .jack-slot on the homepage: in the flow of the page under
   the store card, no launcher and nothing to close. The log is capped so the
   box grows with the conversation and then scrolls. */
.jack-panel--inline { position: static; width: auto; max-height: none; box-shadow: var(--shadow-md); }
.jack-panel--inline .jack-close { display: none; }
.jack-panel--inline .jack-log { flex: none; max-height: 280px; }
@media (max-width: 480px) {
  .jack-panel:not(.jack-panel--inline) { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: calc(100vh - 20px); }
  .jack-launch { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .jack-launch { transition: none; } }