.whale {
  --whale-surface: rgba(255, 255, 255, .97);
  position: fixed;
  z-index: 35;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(256px, calc(100% - 36px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  pointer-events: none;
}
.whale[hidden], .whale [hidden] { display: none !important; }
.whale button { border: 0; color: inherit; font: inherit; }
.whale-bubble, .whale-pet { pointer-events: auto; }
.whale-bubble {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-width: 136px;
  margin-right: 16px;
  border: 1px solid var(--line);
  border-radius: 20px 20px 5px 20px;
  background: var(--whale-surface);
  box-shadow: 0 5px 24px rgba(20, 36, 65, .09);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform-origin: bottom right;
}
.whale-bubble::after {
  content: '';
  position: absolute;
  right: 19px;
  bottom: -7px;
  width: 11px;
  height: 11px;
  background: var(--whale-surface);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: skewY(30deg);
  border-radius: 0 0 3px 0;
}
.whale-speech { padding: 18px 33px 18px 17px; line-height: 1.65; overflow-wrap: anywhere; }
.whale-speech p { margin: 0; }
.whale-speech p + p { margin-top: 6px; }
.whale-speech a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.whale-speech.is-error { color: #a64b17; }
.whale-close { position: absolute; z-index: 1; top: 0; right: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: transparent; color: var(--muted) !important; }
.whale-close svg { width: 13px; height: 13px; }
.whale svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.whale.is-input .whale-bubble { width: 240px; }
.whale-compose { padding: 21px 12px 7px 16px; }
.whale-input-row { display: flex; align-items: flex-end; gap: 6px; }
.whale-compose textarea { flex: 1; width: 0; min-width: 0; max-height: 88px; min-height: 48px; resize: none; background: transparent; border: 0; padding: 0; color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; }
.whale-compose textarea:focus { outline: none; }
.whale-compose textarea::placeholder { color: var(--muted); opacity: 1; font-size: 13px; }
.whale.is-input .whale-bubble:focus-within { border-color: var(--blue); }
.whale-send { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white !important; }
.whale-send svg { width: 18px; height: 18px; }
.whale-send:disabled { opacity: .35; cursor: default; }
.whale-footnote { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 9px; color: var(--muted); line-height: 1.4; }
.whale-footnote > span { flex: 1; }
.whale-footnote a { padding-block: 8px; }
.whale-reset { width: 28px; height: 28px; display: grid; place-items: center; background: transparent; border-radius: 50%; color: var(--muted) !important; }
.whale-reset svg { width: 13px; height: 13px; }
.whale-stop { display: block; margin: -4px 10px 6px auto; min-height: 32px; padding: 4px 7px; border-radius: 8px; background: var(--soft); font-size: 10px !important; }
.whale-pet { position: relative; display: grid; justify-items: center; width: 90px; padding: 0; background: transparent; border-radius: 18px; }
.whale-character { display: block; width: 90px; height: 98px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(20, 45, 75, .12)); pointer-events: none; transition: transform 160ms var(--ease); }
.whale-name { margin-top: -1px; padding: 3px 6px; color: var(--muted); font-size: 9px; line-height: 1; }
.whale-name span { margin-left: 3px; font-size: 8px; opacity: .8; }
.whale-bubble.is-entering { animation: whale-pop 180ms var(--ease); }
.whale-speech p.is-new { animation: whale-line 180ms ease-out; }
@keyframes whale-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes whale-line { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.whale-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-theme=aurora] .whale { --whale-surface: rgba(19, 29, 47, .97); }
html[data-theme=aurora] .whale-speech.is-error { color: #ffbd83; }
@media (hover:hover) and (pointer:fine) {
  .whale-pet:hover .whale-character { transform: translateY(-2px) rotate(-2deg); }
  .whale-close:hover, .whale-reset:hover { background: var(--soft); }
  .whale-footnote a:hover { text-decoration: underline; }
}
.whale button:active { opacity: .8; }
@media (max-width: 700px) {
  .whale { right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: min(248px, calc(100% - 20px)); }
  .whale-pet { width: 76px; }
  .whale-character { width: 76px; height: 83px; }
  .whale-bubble { margin-right: 11px; max-width: calc(100% - 11px); }
  .whale-close { width: 36px; height: 36px; }
  .whale-send { width: 44px; height: 44px; }
}
.whale.is-keyboard { bottom: var(--whale-keyboard-bottom, 10px); }
.whale.is-keyboard .whale-name { display: none; }
.whale.is-keyboard .whale-pet { width: 48px; }
.whale.is-keyboard .whale-character { width: 48px; height: 52px; }
@media (prefers-reduced-motion: reduce) { .whale-bubble.is-entering, .whale-speech p.is-new { animation: none; } .whale-character { transition: none; } }
@media (prefers-reduced-transparency: reduce) { .whale-bubble { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .whale-bubble { border-color: var(--ink); } }
@media print { .whale { display: none; } }