.grok-mascot {
    --grok-size: 140px;
    position: fixed;
    z-index: 10000;
    left: 22px;
    bottom: 22px;
    width: var(--grok-size);
    height: var(--grok-size);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: manipulation;
    overflow: visible;
}

.grok-mascot__body:focus { outline: none; }

.grok-mascot__portal {
    position: absolute;
    z-index: 0;
    left: -10%;
    bottom: -10%;
    width: 120%;
    height: 20%;
    border-radius: 50%;
    background: #101110;
    box-shadow: inset 0 4px 7px rgba(0, 0, 0, .92), 0 0 0 2px rgba(0, 0, 0, .05);
    transform: scale(0);
    transform-origin: center;
    pointer-events: none;
}

.grok-mascot__shadow {
    position: absolute;
    z-index: 1;
    left: 10%;
    bottom: -4%;
    width: 80%;
    height: 12%;
    border-radius: 50%;
    background: #000;
    filter: blur(4px);
    opacity: .14;
    pointer-events: none;
}

.grok-mascot__stage {
    position: absolute;
    z-index: 2;
    inset: calc(-1 * var(--grok-size) - 24px) -24px 0;
    pointer-events: none;
}

.grok-mascot.is-entering .grok-mascot__stage { clip-path: inset(0); }

.grok-mascot__actor {
    position: absolute;
    z-index: 2;
    left: 24px;
    bottom: 0;
    width: var(--grok-size);
    height: var(--grok-size);
    transform-origin: center bottom;
    will-change: transform;
    pointer-events: auto;
}

.grok-mascot__body {
    appearance: none;
    display: block;
    position: relative;
    width: var(--grok-size);
    height: var(--grok-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    touch-action: manipulation;
    background: #090a08;
    box-shadow: inset 2px 3px 5px rgba(255, 255, 255, .055), inset -4px -6px 8px rgba(0, 0, 0, .35);
    transform-origin: center bottom;
}

.grok-mascot__body:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .65);
    outline-offset: 4px;
}

.grok-mascot__face {
    position: absolute;
    inset: 0;
    transform-origin: 66% 28%;
    will-change: transform;
}

.grok-mascot__eyes { display: block; width: 100%; height: 100%; overflow: visible; }
.grok-mascot__lid,
.grok-mascot__eye { transform-box: fill-box; transform-origin: center; }
.grok-mascot__eye { fill: #fff; transform: rotate(-34deg); }
.grok-mascot__body { animation: grok-breathe 3.8s ease-in-out infinite; }
.grok-mascot.is-waiting .grok-mascot__actor { visibility: hidden; }
.grok-mascot.is-waiting .grok-mascot__shadow { opacity: 0; }
.grok-mascot.is-entering .grok-mascot__body,
.grok-mascot.is-hopping .grok-mascot__body { animation: none; }

.grok-mascot.is-entering .grok-mascot__portal { animation: grok-portal 2.1s linear both; }
.grok-mascot.is-entering .grok-mascot__shadow { animation: grok-shadow 2.1s linear both; }
.grok-mascot.is-entering .grok-mascot__actor { animation: grok-entrance 2.1s linear both; }
.grok-mascot.is-hopping .grok-mascot__actor,
.grok-mascot.is-idle-jump .grok-mascot__actor { animation: grok-hop .76s cubic-bezier(.22, 1.15, .36, 1) both; }
.grok-mascot.is-hopping .grok-mascot__actor { animation: grok-greeting .42s ease-in-out both; }
.grok-mascot.is-idle-jump .grok-mascot__actor { animation-duration: 1.05s; }

@keyframes grok-breathe {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.018, .982); }
}

@keyframes grok-portal {
    0% { transform: scale(0); animation-timing-function: ease-out; }
    14% { transform: scale(1); }
    38% { transform: scale(1); animation-timing-function: ease-in-out; }
    56%, 100% { transform: scale(0); }
}

@keyframes grok-shadow {
    0%, 26% { opacity: 0; transform: translateX(-16px) scale(.6); }
    37% { opacity: .05; transform: translateX(-8px) scale(.7); }
    55% { opacity: .16; transform: scale(1); }
    59% { opacity: .2; transform: scale(1.12); }
    70% { opacity: .08; transform: scale(.8); }
    80% { opacity: .14; transform: scale(1); }
    83% { opacity: .16; transform: scale(1.06); }
    90% { opacity: .12; transform: scale(.93); }
    100% { opacity: .14; transform: scale(1); }
}

@keyframes grok-entrance {
    0%, 20% { transform: translateY(120%) scale(.9, 1.1); animation-timing-function: cubic-bezier(.12, .6, .28, 1); }
    45% { transform: translateY(-85%) scale(.98, 1.02) rotate(-4deg); animation-timing-function: cubic-bezier(.42, 0, 1, 1); }
    63% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
    67% { transform: scale(1.18, .82); animation-timing-function: cubic-bezier(.16, .7, .35, 1); }
    78% { transform: translateY(-28%) scale(.97, 1.03) rotate(2deg); animation-timing-function: ease-in; }
    86% { transform: translateY(0) scale(1); animation-timing-function: ease-out; }
    89% { transform: scale(1.08, .93); animation-timing-function: ease-out; }
    94% { transform: translateY(-7%) scale(1); animation-timing-function: ease-in; }
    98% { transform: scale(1.025, .98); animation-timing-function: ease-out; }
    100% { transform: scale(1); }
}

@media (max-width: 767px) {
    .grok-mascot { --grok-size: 116px; left: 14px; bottom: 14px; }
}

@keyframes grok-hop {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    16% { transform: translate3d(0, 2px, 0) scale(1.16, .82); }
    48% { transform: translate3d(0, -38px, 0) scale(.94, 1.06) rotate(-5deg); }
    80% { transform: translate3d(0, 1px, 0) scale(1.15, .84); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes grok-greeting {
    0%, 100% { transform: translateY(0) scale(1); }
    22% { transform: scale(1.05, .95); }
    55% { transform: translateY(-12px) scale(.98, 1.02); }
    82% { transform: scale(1.03, .97); }
}

.grok-mascot__panel {
    box-sizing: border-box;
    position: absolute;
    z-index: 4;
    left: 0;
    bottom: calc(100% + 16px);
    width: min(284px, calc(100vw - 28px));
    max-height: calc(100dvh - var(--header-height, 0px) - var(--grok-size) - var(--contact-bar-height, 0px) - 66px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border: 1px solid #dce4e9;
    border-radius: 16px;
    background: #fff;
    color: #1b2d3b;
    box-shadow: 0 12px 36px rgba(15, 35, 50, .18);
    font: 14px/1.5 Arial, "Microsoft YaHei", sans-serif;
    text-align: start;
    cursor: default;
    animation: grok-panel-in .18s ease-out both;
}
.grok-mascot__panel[hidden] { display: none !important; }
.grok-mascot__panel[dir="rtl"] { direction: rtl; }
.grok-mascot__panel-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.grok-mascot__panel-title { flex: 1; font-size: 16px; line-height: 1.4; font-weight: 700; }
.grok-mascot__close {
    display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px;
    padding: 0; border: 0; border-radius: 50%; background: #f0f4f7; color: #405565; cursor: pointer;
}
.grok-mascot__action {
    box-sizing: border-box; display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 48px; margin: 6px 0 0; padding: 10px 12px;
    border: 0; border-radius: 9px; background: #f2f6f9; color: #203b4d;
    font: inherit; text-align: start; text-decoration: none; cursor: pointer;
}
.grok-mascot__action[data-grok-primary] { background: #086bb5; color: #fff; }
.grok-mascot__action:hover { background: #e5eef5; color: #163c58; }
.grok-mascot__action[data-grok-primary]:hover { background: #05558f; color: #fff; }
.grok-mascot__action svg, .grok-mascot__close svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.grok-mascot__number { display: block; font-size: 13px; line-height: 1.5; unicode-bidi: isolate; }
.grok-mascot__action:focus-visible, .grok-mascot__close:focus-visible { outline: 2px solid #086bb5; outline-offset: 3px; }
.grok-mascot.is-open .grok-mascot__body { animation-play-state: paused; }
@keyframes grok-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .grok-mascot__panel { animation: none; }
    .grok-mascot__body { animation: none; }
    .grok-mascot.is-entering .grok-mascot__portal,
    .grok-mascot.is-entering .grok-mascot__shadow,
    .grok-mascot.is-entering .grok-mascot__actor,
    .grok-mascot.is-hopping .grok-mascot__actor,
    .grok-mascot.is-idle-jump .grok-mascot__actor { animation: none; }
}

/* EXSAFE integration: keep the original mascot above page content and clear of navigation/contact controls. */
.grok-mascot { z-index: 27; direction: ltr; bottom: calc(22px + var(--contact-bar-height, 0px)); }
html.nav-open .grok-mascot { visibility: hidden; }
@media (max-width: 767px) {
    .grok-mascot { bottom: calc(14px + var(--contact-bar-height, 0px)); }
}
@media (max-width: 980px) and (pointer: coarse) {
    body:has(main :is(input, select, textarea):focus) .grok-mascot { visibility: hidden; }
}
@media (max-width: 980px) {
    .grok-mascot { --grok-size: 88px; left: 16px; bottom: calc(16px + var(--contact-bar-height, 0px)); }
}
@media (max-width: 600px) {
    .grok-mascot { --grok-size: 72px; left: 12px; bottom: calc(12px + var(--contact-bar-height, 0px)); }
    .grok-mascot__panel { max-height: calc(100dvh - var(--header-height, 0px) - var(--grok-size) - var(--contact-bar-height, 0px) - 40px); }
    .grok-mascot__close { flex-basis: 44px; width: 44px; height: 44px; }
}
@media (max-width: 980px) and (max-height: 540px) and (orientation: landscape) {
    .grok-mascot { display: none; }
}