/* SITE KIT — the branded chat, on paper.                                               chat.css v1 (2026-10-18)
   Ported from Childsplay's 10/15 block (itself Harrison's of 10/14), re-tokened so it takes each site's own colours.
   Loaded AFTER kit.css (which still carries the old dark chat for the pre-9/26 sites) and BEFORE site.css, so a site
   can re-dress it. The knobs, all optional, set in the site's palette.css:
     --chat-ink     the launcher and the panel's top rule      (default --ink)
     --chat-accent  send button, your own messages, Book chip  (default --accent)
     --chat-dot-a / --chat-dot-b   the two lights on the launcher and the typing dots (default --accent / --accent-2)
     --chat-head    the panel head                             (default --stone)
   The chat head carries THEIR mark (an inline svg .mk or an <img class="mk">): never a generic bubble icon. */
body.light{--c-ink:var(--chat-ink,var(--ink));--c-acc:var(--chat-accent,var(--accent));--c-da:var(--chat-dot-a,var(--accent));
  --c-db:var(--chat-dot-b,var(--accent-2,var(--accent)));--c-head:var(--chat-head,var(--stone,var(--paper-2)));--c-ease:var(--ease-out,cubic-bezier(.2,.7,.3,1))}

/* the launcher: a word and two lights, never an icon alone (a client did not know what the bubble was, 2026-08-28) */
body.light .chatfab{position:fixed;right:18px;bottom:18px;z-index:92;width:auto;height:56px;padding:0 22px 0 16px;display:flex;align-items:center;gap:11px;
  border-radius:var(--btn-r,3px);background:var(--c-ink);color:#fff;border:1px solid var(--c-ink);
  font-family:var(--sans);font-size:16.5px;font-weight:600;letter-spacing:.01em;box-shadow:0 18px 40px -20px rgba(22,22,28,.6);opacity:0;pointer-events:none;cursor:pointer;
  transition:transform .3s var(--c-ease),background-color .3s var(--c-ease),opacity .4s ease}
body.light.chat-ready .chatfab{opacity:1;pointer-events:auto}
body.light .chatfab .q{display:flex;gap:4px;flex:0 0 auto}
body.light .chatfab .q i{width:10px;height:10px;border-radius:50%;background:var(--c-da);box-shadow:0 0 8px 1px color-mix(in srgb,var(--c-da) 60%,transparent)}
body.light .chatfab .q i+i{background:var(--c-db);box-shadow:0 0 8px 1px color-mix(in srgb,var(--c-db) 60%,transparent)}
body.light .chatfab .x{display:none;line-height:0}
body.light.chat-open .chatfab{padding:0 17px}
body.light.chat-open .chatfab .ft,body.light.chat-open .chatfab .q{display:none}
body.light.chat-open .chatfab .x{display:block}
@media(hover:hover) and (pointer:fine){body.light .chatfab:hover{transform:translateY(-2px);background:var(--c-acc);border-color:var(--c-acc)}}
body.light .chatfab:focus-visible{outline:3px solid var(--c-da);outline-offset:3px}
body.light .chattag{position:fixed;z-index:91;right:18px;bottom:86px;padding:13px 17px;border-radius:var(--btn-r,3px);background:var(--paper-2);color:var(--c-ink);border:1px solid var(--c-ink);
  font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:0;white-space:nowrap;pointer-events:none;box-shadow:0 14px 30px -18px rgba(22,22,28,.5);
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
body.light.chat-tease .chattag{opacity:1;transform:none}
body.light.chat-open .chattag{opacity:0}

/* the panel */
body.light .chatpanel{position:fixed;right:18px;bottom:88px;z-index:93;width:min(404px,calc(100vw - 36px));max-height:min(640px,calc(100dvh - 116px));
  display:flex;flex-direction:column;overflow:hidden;background:var(--paper-2);color:var(--body);
  border:1px solid var(--c-ink);border-top:6px solid var(--c-ink);border-radius:18px;box-shadow:0 30px 60px -30px rgba(22,22,28,.6);
  opacity:0;transform:translateY(14px) scale(.98);pointer-events:none;visibility:hidden;
  transition:opacity .28s var(--c-ease),transform .28s var(--c-ease),visibility 0s linear .28s}
body.light.chat-open .chatpanel{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
body.light .chathead{display:flex;align-items:center;background:var(--c-head);border-bottom:1px solid var(--line);padding:12px 10px 12px 14px;gap:13px}
body.light .chathead .mk{width:40px;height:40px;flex:0 0 40px;color:var(--c-acc);object-fit:contain}
body.light .chathead .ct{flex:1;min-width:0}
body.light .chathead .ct b{display:block;font-family:var(--sans);font-size:1.02rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink);line-height:1.15}
body.light .chathead .ct span{display:block;margin-top:5px;font-family:var(--mono,var(--sans));font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);line-height:1.35}
body.light .chathead .live{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2E9E5B;margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px color-mix(in srgb,#2E9E5B 22%,transparent)}
body.light .chatx{flex:0 0 46px;width:46px;height:46px;min-width:46px;min-height:46px;display:grid;place-items:center;padding:0;cursor:pointer;
  border-radius:var(--btn-r,3px);border:1px solid color-mix(in srgb,var(--c-ink) 30%,transparent);background:transparent;color:var(--c-ink);
  transition:background-color .25s var(--c-ease),color .25s var(--c-ease)}
@media(hover:hover){body.light .chatx:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}}
body.light .chatx:focus-visible{outline:2px solid var(--c-acc);outline-offset:2px}
.chatprog{height:5px;background:var(--line);overflow:hidden;opacity:0;transition:opacity .3s ease;flex:0 0 auto}
.chatprog.on{opacity:1}
.chatprog i{display:block;height:100%;width:100%;background:var(--c-acc);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--c-ease)}
body.light .chatbody{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:18px 16px;gap:10px;overscroll-behavior:contain;scroll-behavior:auto;background:var(--paper-2)}
body.light .chatpanel .msg{font-size:16px;line-height:1.5;border-radius:16px;max-width:88%;padding:12px 15px}
body.light .chatpanel .msg.bot{align-self:flex-start;background:var(--paper);color:var(--body);border:1px solid var(--line);border-bottom-left-radius:5px}
body.light .chatpanel .msg.bot b{color:var(--c-ink)}
body.light .chatpanel .msg.me{align-self:flex-end;background:var(--c-acc);color:#fff;border:1px solid var(--c-acc);font-weight:500;border-bottom-right-radius:5px}
body.light .chatpanel .msg a{color:var(--accent-txt,var(--c-acc));font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:10px 0;margin:-10px 0}
.chatpanel .msg .sub{display:block;margin-top:8px;font-size:15px;color:var(--muted)}
.chatpanel .msg.typing{display:flex;gap:5px;padding:14px 16px}
.chatpanel .msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--c-da);animation:skchatdot 1s infinite ease-in-out}
.chatpanel .msg.typing i:nth-child(2){animation-delay:.15s}.chatpanel .msg.typing i:nth-child(3){animation-delay:.3s;background:var(--c-db)}
@keyframes skchatdot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.chatpanel .msg.typing i{animation:none}}
body.light .chatpanel .chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 16px 14px;background:var(--paper-2)}
body.light .chatpanel .chips:empty{display:none}
body.light .chatpanel .chips button{font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--c-ink);background:var(--paper-2);
  border:1px solid color-mix(in srgb,var(--c-ink) 45%,transparent);border-radius:var(--btn-r,3px);padding:9px 15px;min-height:44px;cursor:pointer;
  transition:background-color .25s var(--c-ease),border-color .25s var(--c-ease),color .25s var(--c-ease)}
@media(hover:hover){body.light .chatpanel .chips button:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}}
body.light .chatpanel .chips button:focus-visible{outline:2px solid var(--c-acc);outline-offset:2px}
body.light .chatform{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);background:var(--c-head);margin:0}
body.light .chatform input{flex:1;min-width:0;font-family:var(--sans);font-size:16px;min-height:48px;color:var(--c-ink);background:#fff;border:1px solid color-mix(in srgb,var(--c-ink) 35%,transparent);border-radius:var(--btn-r,3px);padding:12px 16px;-webkit-appearance:none}
body.light .chatform input::placeholder{color:var(--muted)}
body.light .chatform input:focus{outline:none;border-color:var(--c-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-acc) 25%,transparent)}
body.light .chatform button{flex:0 0 48px;width:48px;height:48px;border-radius:var(--btn-r,3px);border:0;background:var(--c-acc);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:background-color .25s var(--c-ease)}
@media(hover:hover){body.light .chatform button:hover{background:var(--c-ink)}}
body.light .chatform button:focus-visible{outline:2px solid var(--c-da);outline-offset:2px}
body.light .chatpanel .chatnote{font-size:13px;color:var(--muted);padding:0 16px 12px;line-height:1.45;text-align:center;margin:0;background:var(--c-head)}
.chatscrim{display:none}

/* phones: the launcher hides (the book bar carries Ask), the panel is a bottom sheet that rides the keyboard */
@media(max-width:760px){
  body.light .chatfab,body.light .chattag{display:none!important}
  .chatscrim{display:block;position:fixed;inset:0;z-index:95;background:rgba(22,22,28,.55);opacity:0;pointer-events:none;transition:opacity .25s ease}
  body.chat-open .chatscrim{opacity:1;pointer-events:auto}
  body.chat-open{overflow:hidden}
  body.chat-open .bookbar{display:none}
  body.light .chatpanel{z-index:96;left:0;right:0;top:auto;bottom:var(--kb,0px);width:auto;max-height:none;
    height:min(calc(var(--vvh,100vh) * .9),720px);height:min(calc(var(--vvh,100dvh) * .9),720px);
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(28px)}
  body.light.chat-open .chatpanel{transform:none}
  body.light .chatpanel .chips{padding:2px 14px 12px}
  body.light .chatform{padding:10px 12px}
}
/* the phone bar's Ask: a speech mark, drawn, never an emoji */
body.light .bookbar .b3,body.light .bookbar.quiet .b3{border:1px solid var(--c-ink);color:var(--c-ink);background:var(--paper-2);gap:8px}
/* .quiet in the selector: the kit's quiet bar draws a phone on .b2 AND .b3 at that weight (Rock Solid, 10/18) */
body.light .bookbar .b3::before,body.light .bookbar.quiet .b3::before{content:'';width:20px;height:20px;flex:0 0 20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.8 7L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat}
@media print{.chatfab,.chattag,.chatpanel,.chatscrim{display:none!important}}