/* The mascot's own speech bubble. Separate from the chat panel; positioned from the launcher's rect. */
.mc-callout {
  position: fixed; z-index: var(--mc-z); max-width: min(260px, calc(100vw - 16px)); box-sizing: border-box;
  padding: 9px 30px 9px 12px; border-radius: 12px; background: var(--mc-bg); color: var(--mc-ink);
  border: 1px solid var(--mc-line); border-left: 4px solid var(--mc-c, var(--mc-tip)); box-shadow: var(--mc-shadow);
  font: 13px/1.38 var(--lx-f-ui, system-ui, sans-serif); cursor: pointer;
  opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .2s, transform .22s cubic-bezier(.3, 1.5, .5, 1);
}
.mc-callout.is-on { opacity: 1; transform: none; }
.mc-callout::after {
  content: ""; position: absolute; left: var(--mc-tx, 24px); width: 10px; height: 10px; background: var(--mc-bg);
  border: 1px solid var(--mc-line); transform: rotate(45deg);
}
.mc-callout[data-pos="above"]::after { bottom: -6px; border-top: 0; border-left: 0; }
.mc-callout[data-pos="below"]::after { top: -6px; border-bottom: 0; border-right: 0; }
.mc-callout__kind {
  display: flex; align-items: center; gap: 5px; margin-bottom: 1px; font-weight: 700; font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--mc-c, var(--mc-tip));
}
.mc-callout__x {
  position: absolute; right: 3px; top: 1px; border: 0; background: none; color: var(--mc-ink2); cursor: pointer;
  font-size: 17px; line-height: 1; padding: 4px 6px; border-radius: 6px;
}
.mc-callout__x:focus-visible, .mc-callout:focus-visible { outline: 2px solid var(--lx-focus, #8A5E2E); outline-offset: 2px; }
.mc-callout.k-alert { --mc-c: var(--mc-alert); } .mc-callout.k-ok { --mc-c: var(--mc-ok); }
.mc-callout.k-note { --mc-c: var(--mc-note); } .mc-callout.k-ops { --mc-c: var(--mc-ops); }
.mc-callout.k-quip { --mc-c: var(--mc-quip); font-size: 12px; color: var(--mc-ink2); max-width: 200px; }
@media (prefers-reduced-motion: reduce) { .mc-callout { transition: opacity .01s; transform: none; } }