/* © 2026 Qder.ai. All rights reserved. Proprietary and confidential; see LICENSE. */
/*
 * The hop from the diners page's ask box into the chat, played in two halves that meet on one
 * frame: the chat's room grows out of the ask box and the sentence lifts into a sent bubble, then
 * the chat page paints that same frame first and plays the rest in.
 *
 * Both pages load this file, so the room and the bubble are one drawing. Values are pixels, not
 * rem: the two pages do not share a root font size.
 */

/* The bubble's face, under a name of its own so declaring it here never
   changes the type on the diners page. Same files as fonts.css. */
@font-face {
  font-family: "Qder Handoff";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/assistant-400-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Qder Handoff";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/assistant-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The chat's ground, as the chat page paints it: the flat white body colour. */
.handoff-room.handoff-room {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #FFFFFF;
}

/* A sent message, drawn as the chat draws one (.msg.me in table.css). The
   class is doubled to outrank table.css `body.chat-page > *`, which would
   make anything appended to the chat's body relative. */
.handoff-bubble.handoff-bubble {
  position: fixed; top: 0; left: 0; z-index: 2147483001;
  box-sizing: border-box; margin: 0;
  max-width: var(--hb-max, 300px);
  padding: 9.6px 15.2px;
  border: 1px solid #0B3FD9; border-radius: 20px; border-end-end-radius: 6px;
  background: #0B3FD9; color: #fff;
  font: 400 15.68px/1.5 "Qder Handoff", "Assistant", "Segoe UI", system-ui, sans-serif;
  letter-spacing: normal; text-align: start;
  white-space: pre-wrap; overflow-wrap: anywhere;
  pointer-events: none;
  transform-origin: 0 0;
  will-change: transform;
}

/* Arriving: the room and the bubble are already on screen, so nothing else
   may paint until it plays in. The page's own fade-in would start the whole
   body from transparent and break the match, so it stands down for this whole
   visit: `handed` stays on, while `arriving` comes off when the bars play in. */
html.handed body.chat-page { animation: none; }
html.arriving .chat-top,
html.arriving .composer-wrap,
html.arriving .thread { opacity: 0; }