/* EKKA — the chat (chat/chat.js). A rose pill at the bottom right opens it; on a computer it is a card above the
   pill, on a phone a sheet over the whole screen. Its own colours, so the chapters under it never change it.
   Opening: the card grows as a circle out of the pill (clip-path from the pill's centre, --ox/--oy/--r set by
   chat.js), the pill's rose fills it for a moment and melts into the ivory, then its parts rise one after another
   and the mark unfolds; the pill's icon turns into a cross. Closing folds it back into the pill. */
.chat-btn, .chat { --c-ink: #231c26; --c-ivory: #f4ede6; --c-paper: #fbf8f4; --c-rose: #a65a4a; --c-line: rgba(35, 28, 38, .12);
  font-family: var(--font, "Google Sans", system-ui, sans-serif); }

.chat-btn { position: fixed; z-index: 60; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 999px; background: var(--c-rose); color: #fff; cursor: pointer;
  font-size: 15px; font-weight: 500; box-shadow: 0 14px 34px -12px rgba(20, 14, 18, .6), 0 0 0 1px rgba(255, 255, 255, .18);
  transform: translateY(0); transition: transform .5s cubic-bezier(.22, .8, .14, 1), opacity .4s; }
.chat-btn[hidden] { display: none; }
.chat-btn:focus { outline: none; }
.chat-btn:focus-visible { outline: 2px solid var(--c-rose); outline-offset: 3px; }
.chat-btn.is-off { opacity: 0; transform: translateY(16px) scale(.7); pointer-events: none; }
.chat-btn__ic { display: grid; width: 22px; height: 22px; flex: none; }
.chat-btn__ic svg { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .3s; }
.chat-btn__ic .i-close { opacity: 0; transform: rotate(-90deg) scale(.5); }
.chat-btn.is-open .i-chat { opacity: 0; transform: rotate(90deg) scale(.5); }
.chat-btn.is-open .i-close { opacity: 1; transform: none; }
@media (hover: hover) { .chat-btn:hover { transform: translateY(-2px); } }

.chat { position: fixed; z-index: 90; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 40px));
  height: min(600px, calc(100vh - 140px)); height: min(600px, calc(100dvh - 140px)); color: var(--c-ink); border-radius: 26px;
  pointer-events: none; visibility: hidden; box-shadow: 0 40px 90px -30px rgba(20, 14, 18, 0);
  transition: box-shadow .2s, visibility 0s .55s; }
.chat.is-open { pointer-events: auto; visibility: visible; box-shadow: 0 40px 90px -30px rgba(20, 14, 18, .55);
  transition: box-shadow .5s .45s, visibility 0s; }
/* the card itself, cut as a circle from the pill's centre */
.chat__in { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit;
  background: var(--c-ivory); box-shadow: inset 0 0 0 1px var(--c-line);
  clip-path: circle(0px at var(--ox, 100%) var(--oy, 100%)); transition: clip-path .5s cubic-bezier(.7, 0, .84, 0); }
.chat.is-open .chat__in { clip-path: circle(var(--r, 150%) at var(--ox, 100%) var(--oy, 100%)); transition: clip-path .85s cubic-bezier(.16, 1, .3, 1); }
/* the pill's rose, filling the card for a moment and melting into the ivory */
.chat__in::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: var(--c-rose); opacity: 0; }
.chat.is-open .chat__in::before { animation: chatWash .95s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes chatWash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }
/* its parts rise one after another */
.chat__in > * { opacity: 0; transform: translateY(14px); transition: opacity .18s, transform .18s; }
.chat.is-open .chat__in > * { opacity: 1; transform: none; transition: opacity .5s var(--d), transform .8s cubic-bezier(.16, 1, .3, 1) var(--d); }
.chat__head { --d: .3s; } .chat__log { --d: .38s; } .chat__chips { --d: .46s; } .chat__form { --d: .52s; } .chat__foot { --d: .58s; }

.chat__head { display: flex; align-items: center; gap: 12px; padding: 16px 14px 14px 18px; border-bottom: 1px solid var(--c-line); }
.chat__head img { width: 30px; height: 30px; flex: none; transform: rotate(-140deg) scale(.2); transition: transform .2s; }
.chat.is-open .chat__head img { transform: none; transition: transform 1.1s cubic-bezier(.34, 1.56, .64, 1) .36s; }
.chat__head b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.chat__head small { display: block; font-size: 12.5px; color: rgba(35, 28, 38, .62); margin-top: 1px; }
.chat__close { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  display: grid; place-items: center; }
.chat__close:hover { background: rgba(35, 28, 38, .06); }
.chat__close svg { width: 18px; height: 18px; }

.chat__log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch; }
.chat__msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word;
  animation: chatIn .45s cubic-bezier(.22, .8, .14, 1); }
.chat__msg--bot { align-self: flex-start; background: var(--c-paper); border-bottom-left-radius: 6px; box-shadow: 0 1px 0 var(--c-line); }
.chat__msg.is-rich { white-space: normal; }
.chat__msg.is-rich p { margin: 0; }
.chat__msg.is-rich p + p, .chat__msg.is-rich p + ul, .chat__msg.is-rich ul + p { margin-top: 8px; }
.chat__msg.is-rich ul { margin: 6px 0 0; padding-left: 18px; }
.chat__msg.is-rich li { padding-left: 2px; }
.chat__msg.is-rich li + li { margin-top: 3px; }
.chat__msg.is-rich li::marker { color: var(--c-rose); }
.chat__msg.is-rich b { font-weight: 600; }
.chat__fig { margin: 10px -6px -4px; }
.chat__fig img { display: block; width: 100%; height: auto; border-radius: 12px; background: #efe6dc; aspect-ratio: 4 / 3; object-fit: cover; }
.chat__fig figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.35; color: rgba(35, 28, 38, .6); }
.chat__msg--me { align-self: flex-end; background: var(--c-ink); color: var(--c-ivory); border-bottom-right-radius: 6px; }
.chat__msg--note { align-self: center; max-width: 92%; background: none; padding: 2px 6px; font-size: 12.5px; color: rgba(35, 28, 38, .6); text-align: center; }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } }
.chat__typing { align-self: flex-start; display: flex; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--c-paper); }
.chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(35, 28, 38, .45); animation: chatDot 1.1s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: .15s; } .chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 16px 10px; }
.chat__chips button { border: 1px solid rgba(166, 90, 74, .35); background: transparent; color: var(--c-rose); border-radius: 999px; padding: 8px 13px;
  font: inherit; font-size: 14px; cursor: pointer; }
.chat__chips button:hover { background: rgba(166, 90, 74, .08); }

.chat__form { display: flex; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 8px 8px 8px 16px; background: var(--c-paper); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--c-line); }
.chat__form textarea { flex: 1; border: 0; outline: 0; resize: none; background: none; color: inherit; font: inherit; font-size: 16px; line-height: 1.4;
  max-height: 120px; padding: 7px 0; }
.chat__form button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--c-ink); color: var(--c-ivory); cursor: pointer;
  display: grid; place-items: center; transition: opacity .2s; }
.chat__form button:disabled { opacity: .3; cursor: default; }
.chat__form svg { width: 18px; height: 18px; }
.chat__foot { margin: 8px 16px 12px; font-size: 11.5px; line-height: 1.4; color: rgba(35, 28, 38, .58); text-align: center; }

/* a phone: the sheet takes the screen, the button is a round mark */
/* a phone: a sheet from the bottom, as in the phone's own apps — the page dims behind it, a strip of it stays
   above, a handle on top; a swipe down or a tap on the dim closes it. Its top and height follow the visible
   screen (--vt, --vh from chat.js), so the field stays above the keyboard. No circle here: Safari would not
   always paint a scrolling list under a clip-path. */
.chat-dim { display: none; }
@media (max-width: 600px) {
  .chat-btn { z-index: 95; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); height: 54px; width: 54px; padding: 0; justify-content: center; }   /* over the sheet while its icon turns */
  .chat-btn span { display: none; }
  .chat-dim { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(20, 14, 18, .5); opacity: 0; visibility: hidden;
    transition: opacity .45s, visibility 0s .45s; -webkit-tap-highlight-color: transparent; }
  .chat-dim.is-on { opacity: 1; visibility: visible; transition: opacity .45s; }
  /* floating, as the phone's own sheets: a margin all round and every corner rounded, so it never meets the
     browser's bar with a hard edge */
  .chat { inset: auto 8px auto 8px; top: var(--vt, 56px); height: var(--vh, calc(100dvh - 64px)); width: auto; border-radius: 30px;
    transform: translateY(calc(100% + 24px)); transition: transform .5s cubic-bezier(.32, .72, 0, 1), visibility 0s .5s, box-shadow .3s; }
  .chat.is-open { transform: translateY(var(--drag, 0px)); transition: transform .55s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  .chat.is-dragging { transition: none; }
  .chat__in, .chat.is-open .chat__in { clip-path: none; transition: none; }
  .chat__in::before, .chat.is-open .chat__in::before { display: none; }
  .chat__in > *, .chat.is-open .chat__in > * { opacity: 1; transform: none; transition: none; }
  .chat__head { position: relative; padding-top: 22px; touch-action: none; }
  .chat__head::before { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 5px; margin-left: -19px; border-radius: 3px; background: rgba(35, 28, 38, .2); }
  .chat__head img, .chat.is-open .chat__head img { transform: none; transition: none; }
  .chat__foot { margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat, .chat-btn, .chat__msg, .chat__in, .chat__in > *, .chat__head img, .chat-btn__ic svg { transition: none !important; animation: none !important; }
  .chat__in::before { display: none; }
}