/* Voi artwork structure, palette, and speech bubble. */

.mascot {
    display: flex;
    width: min(100%, 13rem);
    margin-top: 2rem;
    gap: 0.75rem;
    align-items: center;
    flex-direction: column;
}

.mascot__art {
    width: 100%;
    transform-origin: center bottom;
}

.mascot__art--interactive {
    display: block;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 45%;
    touch-action: manipulation;
}

.mascot__art--interactive:focus-visible {
    outline: 0.15rem solid var(--color-surface);
    outline-offset: 0.3rem;
    box-shadow: 0 0 0 0.25rem rgba(12, 95, 159, 0.45);
}

.mascot__art--interactive:disabled {
    cursor: default;
}

.mascot__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.mascot__svg--reading {
    display: none;
    /* Its taller viewBox needs a narrower width to match the default pose's visible height. */
    width: 80%;
    margin-inline: auto;
}

.mascot--reading .mascot__svg--default {
    display: none;
}

.mascot--reading .mascot__svg--reading {
    display: block;
}

/* Original mascot palette moved out of the SVG to satisfy the site CSP. */
.mascot__svg .cls-0 { fill: rgba(26, 82, 125, 0.45); }
.mascot__svg .cls-1 { fill: var(--mascot-blue-dark); }
.mascot__svg .cls-2 { fill: var(--mascot-blue-deep); }
.mascot__svg .cls-3 { fill: var(--mascot-blue-main); }
.mascot__svg .cls-4 { fill: var(--mascot-blue-highlight); }
.mascot__svg .cls-5 { fill: var(--mascot-blue-soft); }
.mascot__svg .cls-6,
.mascot__svg .cls-14 { fill: #fff; }
.mascot__svg .cls-7 { fill: #1f2021; }
.mascot__svg .cls-8 { fill: #ec6740; }
.mascot__svg .cls-9 { fill: var(--mascot-feature-blue); }
.mascot__svg .cls-10 { fill: var(--mascot-blue-belly); }
.mascot__svg .cls-11 { fill: var(--mascot-blue-wing-highlight); }
.mascot__svg .cls-12 {
    fill: none;
    stroke: #2b2b2b;
    stroke-miterlimit: 10;
    stroke-width: 0.3668;
}
.mascot__svg .cls-13 { fill: #1d1d1b; }
.mascot__svg .cls-15 { fill: none; }
.mascot__svg .cls-16 { fill: var(--mascot-blue-foot); }

/* The refined reading SVG carries its Figma-authored palette as presentation attributes. */

.mascot__svg--reading :is(
    .mascot__reading-character,
    .mascot__reading-head,
    .mascot__reading-document,
    .mascot__reading-wing,
    .mascot__reading-pupil,
    .mascot__reading-shadow
) {
    transform-box: fill-box;
    transform-origin: center;
}

.mascot__svg :is(
    .mascot__character,
    .mascot__body,
    .mascot__body-part,
    .mascot__wing,
    .mascot__leg,
    .mascot__foot,
    .mascot__belly,
    .mascot__eye,
    .mascot__pupil,
    .mascot__eye-shine,
    .mascot__brow,
    .mascot__beak,
    .mascot__mouth,
    .mascot__tongue,
    .mascot__shadow
) {
    transform-box: fill-box;
    transform-origin: center;
}

.mascot__svg .mascot__head-part {
    transform-box: view-box;
    transform-origin: 86px 61px;
}

.mascot__svg .mascot__wing--left {
    transform-box: view-box;
    transform-origin: 59px 76px;
}

.mascot__svg .mascot__wing--right {
    transform-box: view-box;
    transform-origin: 109px 77px;
}

.mascot__svg :is(.mascot__leg--left, .mascot__foot--left) {
    transform-box: view-box;
    transform-origin: 69px 121px;
}

.mascot__svg :is(.mascot__leg--right, .mascot__foot--right) {
    transform-box: view-box;
    transform-origin: 91px 120px;
}

.mascot__svg :is(.mascot__brow--left, .mascot__eye--left, .mascot__pupil--left, .mascot__eye-shine--left) {
    transform-origin: 73px 48px;
}

.mascot__svg :is(.mascot__brow--right, .mascot__eye--right, .mascot__pupil--right, .mascot__eye-shine--right) {
    transform-origin: 106px 45px;
}

.mascot__svg :is(.mascot__beak, .mascot__mouth, .mascot__tongue) {
    transform-origin: 94px 55px;
}

.mascot__message {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: fit-content;
    max-width: min(13.5rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.6rem 0.75rem;
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--mascot-blue-main);
    border-radius: 0.55rem;
    box-shadow: 0 0.15rem 0.35rem rgba(15, 47, 71, 0.1);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
    animation: mascot-message-arrive 220ms ease-out both;
}

.mascot__message::before,
.mascot__message::after {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    content: "";
    transform: translateX(-50%);
}

.mascot__message::before {
    bottom: -0.66rem;
    border-width: 0.66rem 0.72rem 0;
    border-color: var(--mascot-blue-main) transparent transparent;
}

.mascot__message::after {
    bottom: -0.57rem;
    border-width: 0.6rem 0.65rem 0;
    border-color: var(--color-surface) transparent transparent;
}

.mascot__message--empty {
    display: none;
}

.mascot__message--dismissing {
    animation: mascot-message-dismiss 180ms ease-in forwards;
}

.request-intro .mascot__message {
    position: absolute;
    right: 0;
    bottom: calc(var(--mascot-art-height) + 0.75rem);
    left: 0;
    margin-inline: auto;
    color: var(--color-ink);
}