/* A still on every store page; the articulated canvas only exists in open chat. */
#blabot-toggle {
  width: 92px;
  height: 116px;
  padding: 0 0 4px;
  border-radius: 14px;
  flex-direction: column;
  gap: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
#blabot-toggle:hover { transform: translateY(-2px); box-shadow: none; }
#blabot-toggle:focus-visible, #blami-character:focus-visible {
  outline: 2px solid #80beff;
  outline-offset: 2px;
}
#blabot-toggle .blami-still { width: 76px; height: 96px; object-fit: contain; }
.blami-name { padding: 2px 11px; border-radius: 12px; background: #21467c; font: 600 12px/16px 'Outfit', sans-serif; }
html.embedded #blabot-toggle { position: absolute; bottom: 0; left: 4px; right: auto; }
#blabot-widget.open #blabot-toggle { display: none; }
#blabot-header { padding: 4px 14px 4px 2px; gap: 4px; flex-shrink: 0; min-height: 96px; }
.blami-avatar { width: 104px; height: 96px; position: relative; flex-shrink: 0; }
#blami-character {
  display: block; width: 104px; height: 96px; overflow: hidden;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer; padding: 0;
}
#blami-character .blami-still { width: 68px; height: 94px; object-fit: contain; }
#blami-ram { position: absolute; width: 140px; height: 120px; left: -27px; top: -21px; pointer-events: none; visibility: hidden; }
#blami-ram[data-ready="true"] { visibility: visible; }
/* A sibling selector, not :has(), so browsers without :has() never show two rams. */
#blami-ram[data-ready="true"] ~ .blami-still { visibility: hidden; }
#blami-character[data-failed="true"] #blami-ram { visibility: hidden; }
#blami-character[data-failed="true"] .blami-still { visibility: visible; }
.header-info { min-width: 0; }
.header-info #blami-status { display: block; margin: 5px 0 0; color: #fff; font-size: 12px; line-height: 1.35; }
.blami-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#blabot-messages { min-height: 0; }
#blabot-prechat { min-height: 0; overflow-y: auto; }
/* Phones: the ram and the header at three quarters, so the conversation gets
   the room (Snorri, 2026-10-05: "a bit large on the mobile chat"). Before the
   keyboard rule below, which must still win when both apply. */
@media (max-width: 480px) and (pointer: coarse) {
  #blabot-header { min-height: 72px; padding-top: 2px; padding-bottom: 2px; }
  .blami-avatar { width: 78px; height: 72px; }
  #blami-character { transform: scale(.75); transform-origin: top left; }
}
@media (max-height: 500px) {
  /* Keyboard up: no taller than the old 57 px header (49 + 2 x 4 padding), so
     the conversation keeps its room. The ram shows at half size. */
  #blabot-header { min-height: 49px; }
  .blami-avatar { height: 49px; width: 60px; }
  #blami-character { transform: scale(.5); transform-origin: top left; }
}
/* The closed launcher on touch screens: about three quarters, so it covers
   less of the store page it sits on (it sat over a product's thumbnails).
   widget.js shrinks the frame to match. Hover too: a tap leaves :hover on. */
@media (pointer: coarse) {
  html.embedded #blabot-toggle, html.embedded #blabot-toggle:hover {
    transform: scale(.76); transform-origin: bottom left;
  }
}
@media (prefers-reduced-motion: reduce) {
  #blabot-toggle, #blabot-window, .msg-wrapper { transition: none; animation: none; }
  .msg-wrapper { opacity: 1; transform: none; }
  #blabot-toggle:hover { transform: none; }
  .typing-dot, #blabot-notif-dot { animation: none !important; }
}