/* =========================================================
   ORE™ — OPERATIONAL RESOURCE ENGINE
   XGLOBAL™ KNOWLEDGE BASE ASSISTANT
   RESPONSIVE CSS — SYNCHRONIZED VERSION
========================================================= */
.xg-ore-footer-link {
    color: inherit;
    text-decoration: none;
    transition: all 0.25s ease;
}

.xg-ore-footer-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* =========================================================
   GLOBAL ORE RESET
========================================================= */

#xg-ore,
#xg-ore *,
#xgOrePanel,
#xgOrePanel * {

    box-sizing: border-box;

}


/* =========================================================
   ORE ROOT
========================================================= */

#xg-ore {

    position: fixed !important;

    right:
        max(18px, env(safe-area-inset-right)) !important;

    bottom:
        max(18px, env(safe-area-inset-bottom)) !important;

    width: auto !important;
    height: auto !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index:
        2147483647 !important;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: normal;

    isolation: isolate;

    pointer-events: none;

}

/* =========================================================
   ORE™ — ENGAGING HEADER
========================================================= */

.xg-ore-header {
    position: relative;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 14px 18px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 50%,
            rgba(255,255,255,.07),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );

    border-bottom: 1px solid rgba(255,255,255,.09);
}


/* =========================================================
   SUBTLE LIGHT SWEEP
========================================================= */

.xg-ore-header::after {
    content: "";

    position: absolute;

    top: 0;
    left: -30%;

    width: 30%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.7),
            transparent
        );

    animation: oreHeaderSweep 5s ease-in-out infinite;
}

@keyframes oreHeaderSweep {

    0%,
    65% {
        left: -30%;
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    100% {
        left: 110%;
        opacity: 0;
    }
}


/* =========================================================
   ORE CHARACTER
========================================================= */

.xg-ore-header-character {
    position: relative;

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.xg-ore-header-character img {
    position: relative;

    z-index: 2;

    width: 45px;
    height: 45px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 4px 10px rgba(0,0,0,.25)
        );

    transition:
        transform .35s ease,
        filter .35s ease;
}

.xg-ore-header:hover
.xg-ore-header-character img {
    transform:
        translateY(-2px)
        rotate(-2deg);

    filter:
        drop-shadow(
            0 5px 15px rgba(255,255,255,.18)
        );
}


/* =========================================================
   AVATAR RING
========================================================= */

.xg-ore-avatar-ring {
    position: absolute;

    inset: 3px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.16);

    box-shadow:
        0 0 0 4px rgba(255,255,255,.025),
        0 0 22px rgba(255,255,255,.08);

    animation:
        oreRingPulse 3s ease-in-out infinite;
}

@keyframes oreRingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .65;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}


/* =========================================================
   ONLINE STATUS
========================================================= */

.xg-ore-status {
    position: absolute;

    z-index: 4;

    right: 1px;
    bottom: 3px;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #72f6a5;

    border:
        2px solid
        rgba(0,0,0,.55);

    box-shadow:
        0 0 8px
        rgba(114,246,165,.8);

    animation:
        oreStatusPulse 2s ease-in-out infinite;
}

@keyframes oreStatusPulse {

    0%,
    100% {
        box-shadow:
            0 0 6px
            rgba(114,246,165,.5);
    }

    50% {
        box-shadow:
            0 0 12px
            rgba(114,246,165,.9),
            0 0 20px
            rgba(114,246,165,.25);
    }
}


/* =========================================================
   HEADER TEXT
========================================================= */

.xg-ore-header-text {
    min-width: 0;
    flex: 1;
}

.xg-ore-name-row {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 3px;
}


/* ORE NAME */

.xg-ore-name {
    font-size: 1.08rem;

    line-height: 1;

    font-weight: 900;

    letter-spacing: .08em;

    color: #fff;
}


/* =========================================================
   HERE TO HELP BADGE
========================================================= */

.xg-ore-live {
    display: inline-flex;

    align-items: center;

    gap: 5px;

    padding: 3px 7px;

    border-radius: 999px;

    background:
        rgba(114,246,165,.07);

    border:
        1px solid
        rgba(114,246,165,.15);

    color:
        rgba(255,255,255,.58);

    font-size: .56rem;

    font-weight: 800;

    letter-spacing: .08em;
}

.xg-ore-live i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #72f6a5;

    box-shadow:
        0 0 7px
        rgba(114,246,165,.8);
}


/* =========================================================
   MAIN TITLE
========================================================= */

.xg-ore-title {
    font-size: .86rem;

    font-weight: 750;

    letter-spacing: .015em;

    color:
        rgba(255,255,255,.88);
}


/* =========================================================
   SUPPORTING TEXT
========================================================= */

.xg-ore-powered {
    margin-top: 3px;

    font-size: .64rem;

    color:
        rgba(255,255,255,.42);

    letter-spacing: .015em;
}

.xg-ore-powered span {
    color:
        rgba(255,255,255,.58);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.xg-ore-close {
    position: relative;

    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}

.xg-ore-close:hover {
    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,255,255,.18);

    transform: rotate(90deg);
}

.xg-ore-close span {
    position: absolute;

    width: 12px;
    height: 1.5px;

    border-radius: 2px;

    background:
        rgba(255,255,255,.7);
}

.xg-ore-close span:first-child {
    transform: rotate(45deg);
}

.xg-ore-close span:last-child {
    transform: rotate(-45deg);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 520px) {

    .xg-ore-header {
        gap: 11px;
        padding: 12px 13px;
    }

    .xg-ore-header-character {
        width: 46px;
        height: 46px;

        flex-basis: 46px;
    }

    .xg-ore-header-character img {
        width: 39px;
        height: 39px;
    }

    .xg-ore-name {
        font-size: .95rem;
    }

    .xg-ore-title {
        font-size: .76rem;
    }

    .xg-ore-powered {
        font-size: .57rem;
    }

    .xg-ore-live {
        font-size: .5rem;
        padding: 2px 5px;
    }

    .xg-ore-close {
        width: 29px;
        height: 29px;

        flex-basis: 29px;
    }
}


/* =========================================================
   VERY SMALL SCREENS
========================================================= */

@media (max-width: 370px) {

    .xg-ore-live {
        display: none;
    }

    .xg-ore-powered {
        max-width: 190px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }
}


/* =========================================================
   INTERACTIVE ORE ELEMENTS
========================================================= */

#xg-ore #xgOreLauncher,
#xg-ore #xgOrePanel {

    pointer-events: auto;

}


/* =========================================================
   AMBIENT INTELLIGENCE EFFECT
========================================================= */

.xg-ore-ambient {

    position: fixed;

    width: 1px;
    height: 1px;

    pointer-events: none;

    z-index: -1;

}


.xg-ore-ambient span {

    position: fixed;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        #63ff38;

    opacity: .18;

    animation:
        oreParticle 8s linear infinite;

    will-change:
        transform,
        opacity;

}


.xg-ore-ambient span:nth-child(1) {

    right: 8vw;
    bottom: 12vh;

}


.xg-ore-ambient span:nth-child(2) {

    right: 14vw;
    bottom: 25vh;

    animation-delay:
        2s;

}


.xg-ore-ambient span:nth-child(3) {

    right: 4vw;
    bottom: 32vh;

    animation-delay:
        4s;

}


@keyframes oreParticle {

    0% {

        transform:
            translate3d(0,20px,0);

        opacity: 0;

    }

    20% {

        opacity: .3;

    }

    80% {

        opacity: .15;

    }

    100% {

        transform:
            translate3d(-30px,-90px,0);

        opacity: 0;

    }

}


/* =========================================================
   FLOATING LAUNCHER
========================================================= */

#xgOreLauncher {

    position: relative !important;

    width:
        clamp(62px, 5vw, 82px) !important;

    height:
        clamp(62px, 5vw, 82px) !important;

    min-width:
        62px !important;

    min-height:
        62px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle at 35% 25%,
            #1c2b1f 0%,
            #0b110d 48%,
            #030504 100%
        ) !important;

    cursor: pointer;

    overflow: visible !important;

    appearance: none;
    -webkit-appearance: none;

    box-shadow:
        0 16px 45px rgba(0,0,0,.50),
        0 0 0 1px rgba(99,255,56,.30),
        0 0 35px rgba(99,255,56,.18);

    transition:
        transform .25s cubic-bezier(.2,.8,.2,1),
        box-shadow .25s ease;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;

    will-change:
        transform;

}


/* =========================================================
   LAUNCHER BREATHING EFFECT
========================================================= */

#xgOreLauncher::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(99,255,56,.08),
            transparent 68%
        );

    animation:
        oreLauncherBreath 4s ease-in-out infinite;

    z-index: 0;

}


@keyframes oreLauncherBreath {

    0%,
    100% {

        opacity: .35;
        transform: scale(.96);

    }

    50% {

        opacity: .8;
        transform: scale(1.04);

    }

}


/* =========================================================
   LAUNCHER HOVER
========================================================= */

#xgOreLauncher:hover {

    transform:
        translateY(-4px)
        scale(1.035);

    box-shadow:
        0 20px 55px rgba(0,0,0,.55),
        0 0 0 1px rgba(99,255,56,.50),
        0 0 45px rgba(99,255,56,.30);

}


#xgOreLauncher:active {

    transform:
        scale(.94);

}


/* =========================================================
   LAUNCHER GLOW
========================================================= */

.xg-ore-launcher-glow {

    position: absolute;

    inset: -15px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(99,255,56,.22),
            transparent 65%
        );

    filter:
        blur(7px);

    animation:
        oreLauncherGlow 3s ease-in-out infinite;

    pointer-events: none;

    z-index: 0;

    will-change:
        transform,
        opacity;

}


@keyframes oreLauncherGlow {

    0%,
    100% {

        opacity: .45;

        transform:
            scale(.92);

    }

    50% {

        opacity: .9;

        transform:
            scale(1.08);

    }

}


/* =========================================================
   OUTER ENERGY RING
========================================================= */

.xg-ore-ring {

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    background:
        conic-gradient(
            #63ff38,
            #d7ff3f,
            #ffd42a,
            #e53935,
            #16b94b,
            #63ff38
        );

    animation:
        oreRotate 7s linear infinite;

    z-index: 1;

    pointer-events: none;

    will-change:
        transform;

}


.xg-ore-ring::after {

    content: "";

    position: absolute;

    inset: 3px;

    background:
        #050806;

    border-radius: 50%;

}


/* =========================================================
   INNER RING
========================================================= */

.xg-ore-ring-inner {

    position: absolute;

    inset: 2px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.20);

    z-index: 3;

    pointer-events: none;

}


@keyframes oreRotate {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   MASCOT
   IMPORTANT:
   contain = complete character remains visible
========================================================= */

#xgOreLauncher .xg-ore-mascot {

    position: absolute !important;

    inset: 5px !important;

    width:
        calc(100% - 10px) !important;

    height:
        calc(100% - 10px) !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    object-fit:
        contain !important;

    object-position:
        center center !important;

    border-radius:
        50% !important;

    border: 0 !important;

    background:
        transparent !important;

    z-index:
        2 !important;

    pointer-events:
        none !important;

}


/* =========================================================
   ONLINE INDICATOR
========================================================= */

.xg-ore-online {

    position: absolute;

    right: 1px;
    bottom: 4px;

    width: 15px;
    height: 15px;

    border-radius: 50%;

    background:
        #49ff65;

    border:
        3px solid #070b08;

    z-index: 6;

    box-shadow:
        0 0 0 0 rgba(73,255,101,.6);

    animation:
        oreOnlinePulse 2s infinite;

}


@keyframes oreOnlinePulse {

    0% {

        box-shadow:
            0 0 0 0 rgba(73,255,101,.55);

    }

    70% {

        box-shadow:
            0 0 0 7px rgba(73,255,101,0);

    }

    100% {

        box-shadow:
            0 0 0 0 rgba(73,255,101,0);

    }

}


/* =========================================================
   LAUNCHER LABEL
========================================================= */

.xg-ore-launcher-label {

    position: absolute;

    left: 50%;

    bottom: -19px;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,.72);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        2px;

    pointer-events:
        none;

    white-space:
        nowrap;

}


/* =========================================================
   TOOLTIP
========================================================= */

.xg-ore-tooltip {

    position: absolute;

    right:
        calc(100% + 14px);

    top: 50%;

    transform:
        translateY(-50%)
        translateX(10px);

    display: flex;

    flex-direction: column;

    gap: 2px;

    min-width:
        170px;

    max-width:
        230px;

    padding:
        11px 14px;

    border:
        1px solid rgba(99,255,56,.25);

    border-radius:
        12px;

    background:
        rgba(6,10,7,.96);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    box-shadow:
        0 12px 35px rgba(0,0,0,.35);

    opacity: 0;

    pointer-events:
        none;

    transition:
        opacity .2s ease,
        transform .2s ease;

    z-index:
        20;

}


.xg-ore-tooltip strong {

    color:
        #63ff38;

    font-size:
        13px;

}


.xg-ore-tooltip small {

    color:
        #9ca89f;

    font-size:
        9px;

    line-height:
        1.4;

}


#xgOreLauncher:hover .xg-ore-tooltip {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

}


/* =========================================================
   MAIN PANEL
========================================================= */

#xgOrePanel {

    position: fixed !important;

    right:
        max(18px, env(safe-area-inset-right)) !important;

    bottom:
        calc(
            max(18px, env(safe-area-inset-bottom))
            + clamp(72px, 5vw, 94px)
        ) !important;

    width:
        min(430px, calc(100vw - 36px)) !important;

    height:
        min(720px, calc(100dvh - 125px)) !important;

    max-height:
        calc(100dvh - 110px) !important;

    min-height:
        0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    overflow:
        hidden !important;

    background:
        linear-gradient(
            145deg,
            rgba(15,25,17,.98),
            rgba(4,8,6,.99)
        ) !important;

    border:
        1px solid rgba(99,255,56,.20) !important;

    border-radius:
        clamp(18px, 2vw, 25px) !important;

    box-shadow:
        0 30px 100px rgba(0,0,0,.68),
        0 0 50px rgba(99,255,56,.12),
        inset 0 1px 0 rgba(255,255,255,.05);

    opacity:
        0 !important;

    visibility:
        hidden !important;

    pointer-events:
        none !important;

    transform:
        translateY(18px)
        scale(.965);

    transform-origin:
        bottom right;

    transition:
        opacity .24s ease,
        transform .24s cubic-bezier(.2,.8,.2,1),
        visibility .24s ease;

    z-index:
        2147483647 !important;

    isolation:
        isolate;

}


/* =========================================================
   OPEN PANEL
========================================================= */

#xgOrePanel.xg-ore-open {

    opacity:
        1 !important;

    visibility:
        visible !important;

    pointer-events:
        auto !important;

    transform:
        translateY(0)
        scale(1);

}


/* =========================================================
   TOP ENERGY LINE
========================================================= */

.xg-ore-top-line {

    flex:
        0 0 2px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #63ff38,
            #ffd42a,
            #63ff38,
            transparent
        );

    background-size:
        200% 100%;

    animation:
        oreEnergyLine 4s linear infinite;

}


@keyframes oreEnergyLine {

    from {

        background-position:
            200% 0;

    }

    to {

        background-position:
            -200% 0;

    }

}


/* =========================================================
   HEADER
========================================================= */

.xg-ore-header {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    padding:
        clamp(12px, 2vw, 16px);

    background:
        linear-gradient(
            135deg,
            rgba(99,255,56,.12),
            rgba(0,0,0,.20)
        );

    border-bottom:
        1px solid rgba(255,255,255,.09);

}


.xg-ore-header-character {

    position:
        relative;

    width:
        clamp(43px, 5vw, 52px);

    height:
        clamp(43px, 5vw, 52px);

    flex:
        0 0 auto;

}


.xg-ore-header-character img {

    position:
        relative;

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    max-height:
        none;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center center;

    border-radius:
        50%;

    border:
        2px solid rgba(99,255,56,.50);

    background:
        transparent;

    z-index:
        2;

}


.xg-ore-avatar-ring {

    position:
        absolute;

    inset:
        -3px;

    border-radius:
        50%;

    border:
        1px dashed rgba(99,255,56,.55);

    animation:
        oreRotate 10s linear infinite;

}


.xg-ore-status {

    position:
        absolute;

    right:
        -1px;

    bottom:
        0;

    width:
        12px;

    height:
        12px;

    background:
        #4dff67;

    border:
        2px solid #080c09;

    border-radius:
        50%;

    z-index:
        4;

}


/* =========================================================
   HEADER TEXT
========================================================= */

.xg-ore-header-text {

    min-width:
        0;

    margin-left:
        clamp(9px, 1.5vw, 13px);

    flex:
        1 1 auto;

    overflow:
        hidden;

}


.xg-ore-name-row {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    min-width:
        0;

    flex-wrap:
        nowrap;

}


.xg-ore-name {

    color:
        #fff;

    font-size:
        clamp(16px, 2vw, 20px);

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        -.3px;

    white-space:
        nowrap;

}


.xg-ore-name span {

    color:
        #63ff38;

    font-size:
        8px;

    vertical-align:
        top;

    margin-left:
        2px;

}


.xg-ore-live {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    padding:
        3px 6px;

    border:
        1px solid rgba(73,255,101,.18);

    border-radius:
        999px;

    background:
        rgba(73,255,101,.06);

    color:
        #72ff86;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .7px;

    flex:
        0 0 auto;

}


.xg-ore-live i {

    width:
        5px;

    height:
        5px;

    flex:
        0 0 5px;

    border-radius:
        50%;

    background:
        #49ff65;

    animation:
        oreBlink 1.5s infinite;

}


@keyframes oreBlink {

    50% {

        opacity:
            .25;

    }

}


.xg-ore-title {

    margin-top:
        4px;

    color:
        #d3d9d5;

    font-size:
        clamp(9px, 1.3vw, 11px);

    font-weight:
        650;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.xg-ore-powered {

    margin-top:
        4px;

    color:
        #63ff38;

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

#xgOreClose {

    position:
        relative;

    width:
        38px !important;

    height:
        38px !important;

    min-width:
        38px !important;

    min-height:
        38px !important;

    flex:
        0 0 38px;

    padding:
        0 !important;

    border:
        1px solid rgba(255,255,255,.08) !important;

    border-radius:
        11px !important;

    background:
        rgba(255,255,255,.055) !important;

    cursor:
        pointer;

    appearance:
        none;

    -webkit-appearance:
        none;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;

    -webkit-tap-highlight-color:
        transparent;

}


#xgOreClose:hover {

    background:
        rgba(255,255,255,.11) !important;

    border-color:
        rgba(99,255,56,.25) !important;

    transform:
        rotate(90deg);

}


#xgOreClose:active {

    transform:
        scale(.92);

}


#xgOreClose span {

    position:
        absolute;

    left:
        11px;

    top:
        18px;

    width:
        15px;

    height:
        2px;

    border-radius:
        5px;

    background:
        #fff;

}


/* =========================================================
   CLOSE ICON
========================================================= */

#xgOreClose span:first-child {

    transform:
        rotate(45deg);

}


#xgOreClose span:last-child {

    transform:
        rotate(-45deg);

}


/* =========================================================
   INTELLIGENCE BAR
========================================================= */

.xg-ore-intelligence-bar {

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    min-width:
        0;

    padding:
        8px 14px;

    background:
        rgba(99,255,56,.035);

    border-bottom:
        1px solid rgba(255,255,255,.055);

}


.xg-ore-intelligence-icon {

    display:
        grid;

    place-items:
        center;

    width:
        24px;

    height:
        24px;

    flex:
        0 0 24px;

    border-radius:
        8px;

    background:
        rgba(99,255,56,.10);

    color:
        #63ff38;

    font-size:
        12px;

}


.xg-ore-intelligence-bar > div:nth-child(2) {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    flex:
        1 1 auto;

    overflow:
        hidden;

}


.xg-ore-intelligence-bar strong {

    color:
        #dff7e2;

    font-size:
        9px;

    font-weight:
        800;

    line-height:
        1.2;

}


.xg-ore-intelligence-bar span {

    margin-top:
        2px;

    color:
        #69766d;

    font-size:
        7px;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


.xg-ore-intelligence-pulse {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        #63ff38;

    box-shadow:
        0 0 12px rgba(99,255,56,.8);

    animation:
        oreBlink 1.8s infinite;

}


/* =========================================================
   MESSAGE AREA
========================================================= */

#xgOreMessages {

    flex:
        1 1 0 !important;

    min-height:
        0 !important;

    min-width:
        0 !important;

    overflow-y:
        auto !important;

    overflow-x:
        hidden !important;

    overscroll-behavior:
        contain !important;

    -webkit-overflow-scrolling:
        touch !important;

    padding:
        clamp(14px, 2vw, 20px)
        clamp(11px, 2vw, 17px)
        16px !important;

    scroll-behavior:
        smooth;

    touch-action:
        pan-y;

}


/* =========================================================
   SCROLLBAR
========================================================= */

#xgOreMessages {

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(99,255,56,.25)
        transparent;

}


#xgOreMessages::-webkit-scrollbar {

    width:
        5px;

}


#xgOreMessages::-webkit-scrollbar-track {

    background:
        transparent;

}


#xgOreMessages::-webkit-scrollbar-thumb {

    background:
        rgba(99,255,56,.20);

    border-radius:
        20px;

}


/* =========================================================
   MESSAGE ROW
========================================================= */

.xg-ore-message {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    width:
        100%;

    min-width:
        0;

    margin-bottom:
        15px;

}


.xg-ore-message-user {

    justify-content:
        flex-end;

}


/* =========================================================
   MESSAGE AVATAR
========================================================= */

.xg-ore-avatar {

    width:
        30px;

    height:
        30px;

    flex:
        0 0 30px;

}


.xg-ore-avatar img {

    width:
        100%;

    height:
        100%;

    max-width:
        none;

    max-height:
        none;

    display:
        block;

    object-fit:
        contain;

    object-position:
        center center;

    border-radius:
        50%;

    border:
        1px solid rgba(99,255,56,.30);

    background:
        transparent;

}


/* =========================================================
   BOT BUBBLE
========================================================= */

.xg-ore-bubble {

    width:
        fit-content;

    max-width:
        min(86%, 350px);

    min-width:
        0;

    padding:
        12px 14px;

    border-radius:
        16px 16px 16px 5px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.035)
        );

    border:
        1px solid rgba(255,255,255,.075);

    color:
        #e9eeea;

    font-size:
        clamp(12px, 1.4vw, 13px);

    line-height:
        1.58;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);

}


.xg-ore-bubble strong {

    color:
        #63ff38;

}


.xg-ore-bubble p {

    margin:
        7px 0 0;

}


.xg-ore-bubble-badge {

    display:
        inline-flex;

    max-width:
        100%;

    margin-bottom:
        8px;

    padding:
        3px 7px;

    border-radius:
        999px;

    background:
        rgba(99,255,56,.07);

    color:
        #63ff38;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        1px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.xg-ore-greeting {

    display:
        block;

    color:
        #fff !important;

    font-size:
        15px;

}


.xg-ore-question-prompt {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        11px;

    padding-top:
        9px;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:
        #aeb9b1;

    font-size:
        11px;

    font-weight:
        700;

}


.xg-ore-question-prompt span {

    font-size:
        13px;

    flex:
        0 0 auto;

}


/* =========================================================
   USER MESSAGE
========================================================= */

.xg-ore-user-bubble {

    max-width:
        min(84%, 330px);

    min-width:
        0;

    padding:
        11px 14px;

    border-radius:
        16px 16px 5px 16px;

    background:
        linear-gradient(
            135deg,
            #1b4a25,
            #102b17
        );

    border:
        1px solid rgba(99,255,56,.20);

    color:
        #fff;

    font-size:
        clamp(12px, 1.4vw, 13px);

    line-height:
        1.5;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

    box-shadow:
        0 8px 25px rgba(0,0,0,.15);

}


/* =========================================================
   KNOWLEDGE SOURCE
========================================================= */

.xg-ore-source {

    margin-top:
        10px;

    padding-top:
        8px;

    border-top:
        1px solid rgba(255,255,255,.07);

    color:
        #748178;

    font-size:
        9px;

    line-height:
        1.4;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;

}


.xg-ore-source strong {

    color:
        #63ff38;

}


.xg-ore-source a {

    color:
        #63ff38 !important;

    text-decoration:
        none;

    overflow-wrap:
        anywhere;

}


.xg-ore-source a:hover {

    text-decoration:
        underline;

}


/* =========================================================
   SUGGESTIONS
========================================================= */

.xg-ore-suggestions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        3px 0 12px 38px;

    min-width:
        0;

}


.xg-ore-suggestions button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    min-height:
        32px;

    max-width:
        100%;

    padding:
        7px 10px;

    border:
        1px solid rgba(99,255,56,.19);

    background:
        linear-gradient(
            135deg,
            rgba(99,255,56,.075),
            rgba(99,255,56,.025)
        );

    color:
        #d9f7dc;

    border-radius:
        999px;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        650;

    line-height:
        1.25;

    cursor:
        pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;

    -webkit-tap-highlight-color:
        transparent;

    touch-action:
        manipulation;

}


.xg-ore-suggestions button span {

    color:
        #63ff38;

    font-size:
        10px;

    flex:
        0 0 auto;

}


.xg-ore-suggestions button:hover {

    transform:
        translateY(-2px);

    background:
        rgba(99,255,56,.13);

    border-color:
        rgba(99,255,56,.38);

}


.xg-ore-suggestions button:active {

    transform:
        scale(.96);

}


/* =========================================================
   INPUT AREA
========================================================= */

.xg-ore-input-area {

    flex:
        0 0 auto;

    min-width:
        0;

    padding:
        10px
        clamp(10px, 2vw, 14px)
        7px;

    border-top:
        1px solid rgba(255,255,255,.09);

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.16),
            rgba(0,0,0,.28)
        );

}


.xg-ore-input-area form {

    width:
        100%;

    min-width:
        0;

}


/* =========================================================
   INPUT LABEL
========================================================= */

.xg-ore-input-label {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    padding:
        0 3px 6px;

    color:
        #67736b;

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .6px;

}


.xg-ore-input-label span {

    min-width:
        0;

}


.xg-ore-input-label span:last-child {

    font-weight:
        500;

    letter-spacing:
        0;

    text-align:
        right;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

}


/* =========================================================
   INPUT WRAPPER
========================================================= */

.xg-ore-input-wrap {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        6px;

    min-width:
        0;

    width:
        100%;

    padding:
        6px;

    border:
        1px solid rgba(255,255,255,.11);

    background:
        rgba(255,255,255,.045);

    border-radius:
        16px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;

}


.xg-ore-input-wrap:focus-within {

    border-color:
        rgba(99,255,56,.38);

    box-shadow:
        0 0 0 3px rgba(99,255,56,.055),
        0 0 25px rgba(99,255,56,.07);

}


/* =========================================================
   INPUT ICON
========================================================= */

.xg-ore-input-icon {

    display:
        grid;

    place-items:
        center;

    width:
        25px;

    height:
        38px;

    flex:
        0 0 25px;

    color:
        #63ff38;

    font-size:
        13px;

    opacity:
        .8;

}


/* =========================================================
   TEXTAREA
========================================================= */

.xg-ore-input-wrap textarea {

    flex:
        1 1 auto;

    min-width:
        0;

    width:
        100%;

    min-height:
        38px;

    max-height:
        130px;

    resize:
        none;

    border:
        0 !important;

    outline:
        0 !important;

    background:
        transparent !important;

    color:
        #fff !important;

    font-family:
        inherit;

    font-size:
        13px;

    line-height:
        1.45;

    padding:
        9px 0;

    overflow-y:
        auto;

    appearance:
        none;

    -webkit-appearance:
        none;

}


.xg-ore-input-wrap textarea::placeholder {

    color:
        #718077;

    opacity:
        1;

}


.xg-ore-input-wrap textarea::-webkit-scrollbar {

    width:
        4px;

}


/* =========================================================
   SEND BUTTON
========================================================= */

#xgOreSend {

    width:
        40px !important;

    height:
        40px !important;

    min-width:
        40px !important;

    min-height:
        40px !important;

    flex:
        0 0 40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        12px !important;

    background:
        linear-gradient(
            135deg,
            #8aff68,
            #63ff38
        ) !important;

    color:
        #071008 !important;

    cursor:
        pointer;

    box-shadow:
        0 5px 15px rgba(99,255,56,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .18s ease;

    appearance:
        none;

    -webkit-appearance:
        none;

    -webkit-tap-highlight-color:
        transparent;

}


#xgOreSend:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 22px rgba(99,255,56,.30);

}


#xgOreSend:active {

    transform:
        scale(.93);

}


#xgOreSend:disabled {

    opacity:
        .42;

    cursor:
        not-allowed;

    transform:
        none;

}


#xgOreSend svg {

    width:
        19px;

    height:
        19px;

    fill:
        currentColor;

    pointer-events:
        none;

}


/* =========================================================
   INPUT FOOTER
========================================================= */

.xg-ore-input-footer {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        10px;

    min-width:
        0;

    padding:
        5px 3px 0;

    color:
        #5f6c63;

    font-size:
        7px;

}


.xg-ore-input-footer span {

    min-width:
        0;

}


.xg-ore-input-footer span:last-child {

    color:
        #69766d;

}


#xgOreCounter {

    color:
        #63ff38;

    font-weight:
        700;

}


/* =========================================================
   FOOTER
========================================================= */

.xg-ore-footer {

    flex:
        0 0 auto;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        5px;

    min-width:
        0;

    padding:
        7px 10px
        max(7px, env(safe-area-inset-bottom));

    color:
        #59645c;

    background:
        rgba(0,0,0,.20);

    font-size:
        7px;

    text-align:
        center;

}


.xg-ore-footer-brand {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    color:
        #63ff38;

}


.xg-ore-footer-dot {

    width:
        4px;

    height:
        4px;

    flex:
        0 0 4px;

    border-radius:
        50%;

    background:
        #63ff38;

    box-shadow:
        0 0 6px rgba(99,255,56,.7);

}


/* =========================================================
   TYPING INDICATOR
========================================================= */

.xg-ore-typing {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

    min-height:
        10px;

}


.xg-ore-typing span {

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        #63ff38;

    animation:
        oreTyping 1.2s infinite ease-in-out;

}


.xg-ore-typing span:nth-child(2) {

    animation-delay:
        .15s;

}


.xg-ore-typing span:nth-child(3) {

    animation-delay:
        .30s;

}


@keyframes oreTyping {

    0%,
    60%,
    100% {

        opacity:
            .25;

        transform:
            translateY(0);

    }

    30% {

        opacity:
            1;

        transform:
            translateY(-3px);

    }

}


/* =========================================================
   TABLETS
========================================================= */

@media (min-width: 601px) and (max-width: 1024px) {

    #xg-ore {

        right:
            max(16px, env(safe-area-inset-right)) !important;

        bottom:
            max(16px, env(safe-area-inset-bottom)) !important;

    }


    #xgOrePanel {

        width:
            min(430px, calc(100vw - 32px)) !important;

        height:
            min(700px, calc(100dvh - 115px)) !important;

        max-height:
            calc(100dvh - 100px) !important;

    }

}


/* =========================================================
   PHONES
========================================================= */

@media (max-width: 600px) {

    #xg-ore {

        right:
            max(10px, env(safe-area-inset-right)) !important;

        bottom:
            max(10px, env(safe-area-inset-bottom)) !important;

    }


    #xgOreLauncher {

        width:
            64px !important;

        height:
            64px !important;

        min-width:
            64px !important;

        min-height:
            64px !important;

    }


    .xg-ore-launcher-label {

        display:
            none;

    }


    .xg-ore-tooltip {

        display:
            none !important;

    }


    #xgOrePanel {

        top:
            auto !important;

        right:
            max(8px, env(safe-area-inset-right)) !important;

        left:
            max(8px, env(safe-area-inset-left)) !important;

        bottom:
            calc(
                max(8px, env(safe-area-inset-bottom))
                + 72px
            ) !important;

        width:
            auto !important;

        max-width:
            none !important;

        height:
            min(
                680px,
                calc(100dvh - 90px)
            ) !important;

        max-height:
            calc(100dvh - 85px) !important;

        min-height:
            0 !important;

        border-radius:
            20px !important;

        transform-origin:
            bottom center;

    }


    .xg-ore-header {

        padding:
            12px;

    }


    .xg-ore-title {

        max-width:
            190px;

    }


    .xg-ore-powered {

        font-size:
            7px;

    }


    .xg-ore-intelligence-bar {

        padding:
            7px 12px;

    }


    .xg-ore-suggestions {

        margin-left:
            37px;

    }


    .xg-ore-input-label span:last-child {

        display:
            none;

    }


    .xg-ore-input-wrap textarea {

        font-size:
            16px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    #xg-ore {

        right:
            7px !important;

        bottom:
            7px !important;

    }


    #xgOreLauncher {

        width:
            58px !important;

        height:
            58px !important;

        min-width:
            58px !important;

        min-height:
            58px !important;

    }


    #xgOrePanel {

        left:
            6px !important;

        right:
            6px !important;

        bottom:
            68px !important;

        height:
            calc(100dvh - 75px) !important;

        max-height:
            calc(100dvh - 70px) !important;

        border-radius:
            17px !important;

    }


    .xg-ore-live {

        display:
            none;

    }


    .xg-ore-bubble {

        max-width:
            calc(100% - 38px);

    }


    .xg-ore-suggestions {

        margin-left:
            0;

    }


    .xg-ore-suggestions button {

        font-size:
            9px;

        padding:
            6px 8px;

    }


    .xg-ore-footer {

        font-size:
            6.5px;

    }


    .xg-ore-header-character {

        width:
            42px;

        height:
            42px;

    }


    .xg-ore-header-text {

        margin-left:
            8px;

    }


    .xg-ore-name {

        font-size:
            15px;

    }


    #xgOreClose {

        width:
            36px !important;

        height:
            36px !important;

        min-width:
            36px !important;

        min-height:
            36px !important;

        flex-basis:
            36px;

    }

}


/* =========================================================
   VERY NARROW DEVICES
========================================================= */

@media (max-width: 320px) {

    #xg-ore {

        right:
            4px !important;

        bottom:
            4px !important;

    }


    #xgOreLauncher {

        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        min-height:
            56px !important;

    }


    #xgOrePanel {

        left:
            4px !important;

        right:
            4px !important;

        bottom:
            64px !important;

        height:
            calc(100dvh - 70px) !important;

        max-height:
            calc(100dvh - 65px) !important;

        border-radius:
            15px !important;

    }


    .xg-ore-header-character {

        width:
            38px;

        height:
            38px;

    }


    .xg-ore-close {

        width:
            34px !important;

        height:
            34px !important;

    }


    #xgOreClose {

        width:
            34px !important;

        height:
            34px !important;

        min-width:
            34px !important;

        min-height:
            34px !important;

        flex-basis:
            34px;

    }


    .xg-ore-greeting {

        font-size:
            14px;

    }


    .xg-ore-input-icon {

        display:
            none;

    }


    .xg-ore-input-wrap {

        gap:
            4px;

        padding:
            5px;

    }


    #xgOreSend {

        width:
            38px !important;

        height:
            38px !important;

        min-width:
            38px !important;

        min-height:
            38px !important;

        flex-basis:
            38px;

    }


    .xg-ore-bubble {

        font-size:
            11.5px;

    }

}


/* =========================================================
   LANDSCAPE PHONES
========================================================= */

@media (max-height: 520px) and (orientation: landscape) {

    #xgOrePanel {

        top:
            max(8px, env(safe-area-inset-top)) !important;

        right:
            max(8px, env(safe-area-inset-right)) !important;

        bottom:
            max(8px, env(safe-area-inset-bottom)) !important;

        left:
            max(8px, env(safe-area-inset-left)) !important;

        width:
            auto !important;

        height:
            calc(
                100dvh
                - max(16px, env(safe-area-inset-top))
                - max(16px, env(safe-area-inset-bottom))
            ) !important;

        max-height:
            none !important;

        min-height:
            0 !important;

        border-radius:
            16px !important;

    }


    #xgOreLauncher {

        width:
            56px !important;

        height:
            56px !important;

        min-width:
            56px !important;

        min-height:
            56px !important;

    }


    .xg-ore-intelligence-bar {

        display:
            none;

    }


    .xg-ore-header {

        padding:
            7px 10px;

    }


    .xg-ore-header-character {

        width:
            38px;

        height:
            38px;

    }


    #xgOreMessages {

        padding:
            9px 11px;

    }


    .xg-ore-input-area {

        padding:
            6px 9px;

    }


    .xg-ore-footer {

        display:
            none;

    }


    .xg-ore-input-wrap textarea {

        max-height:
            80px;

    }

}


/* =========================================================
   DESKTOP LARGE SCREENS
========================================================= */

@media (min-width: 1400px) {

    #xgOrePanel {

        width:
            450px !important;

        height:
            740px !important;

        max-height:
            calc(100dvh - 120px) !important;

    }


    #xgOreLauncher {

        width:
            80px !important;

        height:
            80px !important;

        min-width:
            80px !important;

        min-height:
            80px !important;

    }

}


/* =========================================================
   EXTRA LARGE SCREENS
========================================================= */

@media (min-width: 1920px) {

    #xgOrePanel {

        width:
            460px !important;

        height:
            min(760px, calc(100dvh - 120px)) !important;

    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    #xgOreLauncher:hover {

        transform:
            none;

    }


    #xgOreSend:hover {

        transform:
            none;

    }


    #xgOreClose:hover {

        transform:
            none;

    }


    .xg-ore-suggestions button:hover {

        transform:
            none;

    }

}


/* =========================================================
   HIGH CONTRAST / ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #xg-ore *,
    #xg-ore *::before,
    #xg-ore *::after {

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================================
   PAGE LOCK
========================================================= */

html.xg-ore-page-lock,
body.xg-ore-page-lock {

    overflow:
        hidden !important;

}


body.xg-ore-page-lock {

    touch-action:
        none;

}


body.xg-ore-page-lock #xgOreMessages {

    touch-action:
        pan-y;

}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

#xg-ore button:focus-visible,
#xg-ore textarea:focus-visible {

    outline:
        2px solid #63ff38 !important;

    outline-offset:
        2px;

}


/* =========================================================
   REMOVE MOBILE TAP FLASH
========================================================= */

#xg-ore button,
#xg-ore textarea {

    -webkit-tap-highlight-color:
        transparent;

}


/* =========================================================
   MOBILE SAFE-AREA SUPPORT
========================================================= */

@supports (padding: env(safe-area-inset-bottom)) {

    #xgOrePanel {

        padding-bottom:
            0 !important;

    }

}


/* =========================================================
   DYNAMIC VIEWPORT SUPPORT
========================================================= */

@supports (height: 100svh) {

    @media (max-width: 600px) {

        #xgOrePanel {

            max-height:
                calc(100svh - 85px) !important;

        }

    }

}


/* =========================================================
   SAFARI / MOBILE VIEWPORT FIX
========================================================= */

@supports (-webkit-touch-callout: none) {

    #xgOrePanel {

        max-height:
            calc(100svh - 100px) !important;

    }

}


/* =========================================================
   SAFARI MOBILE PANEL OVERRIDE
========================================================= */

@supports (-webkit-touch-callout: none) {

    @media (max-width: 600px) {

        #xgOrePanel {

            bottom:
                calc(
                    max(8px, env(safe-area-inset-bottom))
                    + 72px
                ) !important;

            height:
                calc(100svh - 90px) !important;

            max-height:
                calc(100svh - 85px) !important;

        }

    }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

    #xg-ore {

        display:
            none !important;

    }

}


/* =========================================================
   FINAL IMAGE SAFETY
========================================================= */

#xg-ore img {

    max-width:
        none;

}


/* =========================================================
   FINAL INTERACTION SAFETY
========================================================= */

#xgOrePanel,
#xgOreLauncher,
#xgOreClose,
#xgOreSend,
.xg-ore-suggestions button {

    user-select:
        none;

}


#xgOreInput,
#xgOreMessages {

    user-select:
        text;

}


/* =========================================================
   END ORE™ RESPONSIVE CSS
========================================================= */