/* ============================================================
   AI7 PRIME — VIDEO GAME STYLE 3D ANIMATION
   Clean: no panel overlays. Icons fly up. Bar chart grows.
   ============================================================ */

.ai-game-3d-stage {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 640px;
    margin: 0 auto;
    border-radius: 24px;
    background:
        radial-gradient(ellipse at 50% 30%, #0a1d3d 0%, #020611 60%, #000 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    box-shadow:
        0 0 100px rgba(0, 120, 255, 0.25),
        inset 0 0 80px rgba(0, 100, 255, 0.08);
    overflow: hidden;
}

#ai-game-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.ai-stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* ============================================================
   ICONS THAT FLY UP FROM ROBOT
   Real Font Awesome icons inside circular badges
   ============================================================ */
.ai-fly-icon {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.15rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    opacity: 0;
    will-change: transform, opacity, bottom;
}

/* Color classes for icons */
.icon-gmail    { background: linear-gradient(135deg, #ea4335, #c62828); }
.icon-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }
.icon-invoice  { background: linear-gradient(135deg, #6366f1, #4338ca); }
.icon-excel    { background: linear-gradient(135deg, #217346, #1e6e3a); }
.icon-word     { background: linear-gradient(135deg, #2b579a, #1f3f73); }
.icon-pdf      { background: linear-gradient(135deg, #dc2626, #991b1b); }
.icon-pptx     { background: linear-gradient(135deg, #b7472a, #8c2d1a); }
.icon-csv      { background: linear-gradient(135deg, #0891b2, #155e75); }
.icon-facebook { background: linear-gradient(135deg, #1877f2, #0c5dcc); }
.icon-instagram{ background: linear-gradient(135deg, #f09433, #dc2743, #bc1888); }
.icon-pinterest{ background: linear-gradient(135deg, #bd081c, #8c0d18); }
.icon-youtube  { background: linear-gradient(135deg, #ff0000, #cc0000); }
.icon-tiktok   { background: #000; border: 2px solid #25f4ee; }
.icon-twitter  { background: linear-gradient(135deg, #1da1f2, #0c5dcc); }
.icon-linkedin { background: linear-gradient(135deg, #0a66c2, #084d92); }
.icon-snapchat { background: linear-gradient(135deg, #fffc00, #eee000); color: #000; }

/* ============================================================
   BAR CHART OVERLAY (positioned bottom-left)
   ============================================================ */
.ai-bar-chart-overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: none;
    width: 180px;
    background: rgba(0, 18, 35, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 10px;
    padding: 12px 14px;
    backdrop-filter: blur(8px);
    z-index: 30;
    pointer-events: none;
}

.ai-bar-chart-overlay .bc-title {
    font-size: 0.6rem;
    font-weight: 600;
    color: #00d4ff;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ai-bar-chart-overlay .bc-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 80px;
    margin-bottom: 6px;
}

.ai-bar-chart-overlay .bc-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, #00ff88, #00d4ff);
    box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
    height: 0%;
    transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-bar-chart-overlay .bc-bar:nth-child(odd) {
    background: linear-gradient(180deg, #00d4ff, #0066ff);
}

.ai-bar-chart-overlay .bc-trend {
    position: relative;
    height: 30px;
    margin-bottom: 4px;
}

.ai-bar-chart-overlay .bc-trend-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: #ff55aa;
    box-shadow: 0 0 8px #ff55aa;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left bottom;
}

.ai-bar-chart-overlay .bc-trend-dot {
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 8px;
    height: 8px;
    background: #ff55aa;
    border-radius: 50%;
    box-shadow: 0 0 8px #ff55aa;
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transform: translateX(-50%);
}

.ai-bar-chart-overlay .bc-label {
    font-size: 0.6rem;
    color: #ff55aa;
    font-weight: 700;
    text-align: right;
}

/* ============================================================
   TITLE OVERLAY
   ============================================================ */
.scene-title {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 40;
    white-space: nowrap;
    pointer-events: none;
}

.scene-title h3 {
    font-family: 'Sora', sans-serif;
    font-size: 1rem;
    color: #fff;
    margin-bottom: 2px;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
    letter-spacing: 0.05em;
}

.scene-title p {
    font-size: 0.65rem;
    color: #00d4ff;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .ai-game-3d-stage { height: 520px; max-width: 100%; }
}

@media (max-width: 768px) {
    .ai-game-3d-stage { height: 460px; }
    .ai-fly-icon { width: 34px; height: 34px; font-size: 0.9rem; }
    .ai-bar-chart-overlay {
        top: 10px;
        left: 10px;
        transform: scale(.88);
        transform-origin: top left;
    }
    .scene-title h3 { font-size: 0.9rem; }
    .scene-title p { font-size: 0.55rem; }
}

@media (max-width: 480px) {
    .ai-game-3d-stage { height: 380px; }
    .ai-fly-icon { width: 28px; height: 28px; font-size: 0.8rem; }
}

/* ============================================================
   AI7 CSS3 HUMANOID ROBOT
   All classes prefixed ai7- to avoid conflicts
   ============================================================ */
.ai7-robot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(200px, 27vw, 320px);
    aspect-ratio: 0.78;
    z-index: 2;
    pointer-events: none;
    animation: ai7-body-breathe 4s ease-in-out infinite;
}

/* ---- HEAD ---- */
.ai7-head {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 52%;
    height: 27%;
    z-index: 5;
    animation: ai7-head-tilt 6s ease-in-out infinite;
}

.ai7-head-shell {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 40% 18%,
            #ffffff 0%, #f4f7fa 25%, #d8e0e8 54%,
            #9ca9b5 82%, #657381 100%);
    border-radius: 48% 48% 46% 46% / 46% 46% 54% 54%;
    box-shadow:
        inset 10px 8px 18px rgba(255,255,255,.8),
        inset -12px -15px 22px rgba(20,38,55,.38),
        0 12px 25px rgba(0,0,0,.55),
        0 0 12px rgba(0,229,255,.2);
    border: 1px solid rgba(220,240,250,.65);
}

.ai7-head-reflection {
    position: absolute;
    top: 8%;
    left: 15%;
    width: 55%;
    height: 20%;
    background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, transparent 100%);
    border-radius: 50%;
    filter: blur(3px);
}

.ai7-head-panel-left, .ai7-head-panel-right {
    position: absolute;
    top: 12%;
    width: 25%;
    height: 55%;
    border-radius: 50%;
}
.ai7-head-panel-left {
    left: 5%;
    background: linear-gradient(135deg, rgba(180,200,220,.3), transparent);
}
.ai7-head-panel-right {
    right: 5%;
    background: linear-gradient(-135deg, rgba(180,200,220,.3), transparent);
}

.ai7-head-glow-bottom {
    position: absolute;
    bottom: -3px;
    left: 20%;
    width: 60%;
    height: 6px;
    background: rgba(0,229,255,.4);
    border-radius: 50%;
    filter: blur(4px);
}

/* ---- FACE SCREEN ---- */
.ai7-face-screen {
    position: absolute;
    bottom: 15%;
    left: 14%;
    width: 72%;
    height: 35%;
    background: linear-gradient(160deg, #07131c 0%, #01060b 58%, #09131b 100%);
    border: 2px solid #a9b5c0;
    border-radius: 40% 40% 38% 38% / 45% 45% 50% 50%;
    box-shadow:
        inset 0 8px 14px rgba(60,100,125,.15),
        inset 0 -8px 15px rgba(0,0,0,.8),
        0 3px 8px rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25%;
    z-index: 6;
}

/* ---- EYES ---- */
.ai7-eye {
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%,
        #d9ffff 0%, #72f8ff 42%, #10dceb 75%);
    border: 2px solid #00eaff;
    box-shadow:
        0 0 5px #00eaff,
        0 0 13px rgba(0,234,255,.8),
        inset 0 0 5px rgba(0,90,120,.6);
    animation: ai7-eye-blink 4.5s ease-in-out infinite;
    position: relative;
}
.ai7-eye-glow {
    position: absolute;
    top: 20%;
    left: 25%;
    width: 35%;
    height: 30%;
    background: radial-gradient(circle, rgba(255,255,255,.9), transparent);
    border-radius: 50%;
}

/* ---- EARS ---- */
.ai7-ear {
    position: absolute;
    top: 35%;
    width: 22%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            #8899aa 0%, #556677 50%, #334455 100%);
    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,.2),
        inset -2px -2px 5px rgba(0,0,0,.5),
        0 2px 6px rgba(0,0,0,.5);
    z-index: 3;
}
.ai7-ear-l { left: -12%; transform: translateZ(-5px); }
.ai7-ear-r { right: -12%; transform: translateZ(-5px); }

.ai7-ear-ring {
    position: absolute;
    inset: 20%;
    border-radius: 50%;
    border: 2px solid #00eaff;
    box-shadow: 0 0 6px rgba(0,229,255,.6), inset 0 0 4px rgba(0,229,255,.3);
}

/* ---- NECK ---- */
.ai7-neck {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 10%;
    height: 7%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 4;
}

.ai7-neck-ring {
    width: 100%;
    height: 28%;
    background: linear-gradient(180deg, #444 0%, #222 50%, #333 100%);
    border-radius: 3px;
    border: 1px solid rgba(100,100,100,.5);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.1);
}

.ai7-neck-glow {
    width: 120%;
    height: 4px;
    background: rgba(0,229,255,.5);
    border-radius: 50%;
    filter: blur(2px);
    margin-top: -2px;
}

/* ---- TORSO ---- */
.ai7-torso {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 58%;
    height: 32%;
    background:
        linear-gradient(170deg,
            #f0f4f8 0%, #dce4ec 30%, #b8c6d0 60%, #8a9aaa 100%);
    clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
    border-radius: 8px 8px 4px 4px;
    box-shadow:
        inset 5px 5px 15px rgba(255,255,255,.5),
        inset -5px -5px 15px rgba(30,50,70,.3),
        0 8px 20px rgba(0,0,0,.4);
    z-index: 15;
}

.ai7-torso-plate-l, .ai7-torso-plate-r {
    position: absolute;
    top: 10%;
    width: 35%;
    height: 70%;
    background: linear-gradient(180deg, rgba(200,215,230,.4), transparent);
    border-radius: 4px;
}
.ai7-torso-plate-l { left: 5%; transform: skewY(-3deg); }
.ai7-torso-plate-r { right: 5%; transform: skewY(3deg); }

.ai7-torso-detail-l, .ai7-torso-detail-r {
    position: absolute;
    bottom: 10%;
    width: 20%;
    height: 3px;
    background: rgba(80,100,120,.5);
    border-radius: 2px;
}
.ai7-torso-detail-l { left: 10%; }
.ai7-torso-detail-r { right: 10%; }

/* ---- REACTOR ---- */
.ai7-reactor {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 22%;
    height: 50%;
    background: linear-gradient(180deg, #1a2a3a, #0a1520);
    border: 2px solid #667788;
    border-radius: 6px;
    box-shadow:
        inset 0 0 10px rgba(0,229,255,.3),
        0 0 15px rgba(0,229,255,.2);
    overflow: hidden;
}

.ai7-reactor-glow {
    position: absolute;
    inset: 15%;
    background: linear-gradient(180deg, #00eaff, #0088aa, #00eaff);
    border-radius: 4px;
    box-shadow: 0 0 15px rgba(0,229,255,.8), 0 0 30px rgba(0,229,255,.4);
    animation: ai7-reactor-pulse 2s ease-in-out infinite;
}

/* ---- SHOULDERS ---- */
.ai7-shoulder {
    position: absolute;
    top: 30%;
    width: 14%;
    height: 8%;
    z-index: 4;
}
.ai7-shoulder-l { left: 19%; }
.ai7-shoulder-r { right: 19%; }

.ai7-shoulder-pad {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 30%,
            #f0f4f8 0%, #c8d4e0 60%, #8899aa 100%);
    border-radius: 50% 50% 40% 40%;
    box-shadow:
        inset 3px 3px 8px rgba(255,255,255,.5),
        inset -3px -3px 8px rgba(30,50,70,.4),
        0 4px 10px rgba(0,0,0,.4);
}

/* ---- ARMS ---- */
.ai7-arm {
    position: absolute;
    top: 36%;
    width: 10%;
    height: 52%;
    z-index: 24;
}
.ai7-arm-l {
    left: 19%;
    transform-origin: center top;
    transform-style: preserve-3d;
    transform: rotateZ(0deg);
}
.ai7-arm-r {
    right: 19%;
    transform-origin: center top;
    transform-style: preserve-3d;
    transform: rotateZ(0deg);
}

.ai7-upper-arm {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 35%;
    background: linear-gradient(180deg, #222 0%, #333 50%, #222 100%);
    border-radius: 5px;
    box-shadow: inset 1px 1px 3px rgba(255,255,255,.1);
}
.ai7-arm-l .ai7-upper-arm {
    transform-origin: 50% 0%;
    transform: translateX(-50%) rotate(-8deg);
}
.ai7-arm-r .ai7-upper-arm {
    transform-origin: 50% 0%;
    transform: translateX(-50%) rotate(8deg);
}

.ai7-upper-arm-plate {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 50%;
    background: linear-gradient(180deg, rgba(200,215,230,.3), transparent);
    border-radius: 3px;
}

.ai7-elbow {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 40% 35%,
            #667788 0%, #334455 60%, #222 100%);
    border-radius: 50%;
    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,.15),
        0 2px 5px rgba(0,0,0,.5);
}
.ai7-arm-l .ai7-elbow {
    transform: translateX(-50%) translateX(-35%);
}
.ai7-arm-r .ai7-elbow {
    transform: translateX(-50%) translateX(35%);
}

.ai7-elbow-ring {
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    border: 2px solid rgba(0,229,255,.4);
    box-shadow: 0 0 4px rgba(0,229,255,.3);
}

.ai7-forearm {
    position: absolute;
    top: 42%;
    left: 50%;
    width: 75%;
    height: 50%;
    background:
        linear-gradient(
            180deg,
            #e8eef4 0%,
            #c0cdd8 50%,
            #98a8b8 100%
        );
    border-radius: 4px;
    box-shadow:
        inset 2px 2px 6px rgba(255,255,255,.4),
        inset -2px -2px 6px rgba(30,50,70,.3);
}
.ai7-arm-l .ai7-forearm {
    transform-origin: 50% 0%;
    transform: translateX(-50%) rotate(-21deg);
}
.ai7-arm-r .ai7-forearm {
    transform-origin: 50% 0%;
    transform: translateX(-50%) rotate(21deg);
}

.ai7-forearm-ring {
    position: absolute;
    bottom: 5%;
    left: 15%;
    width: 70%;
    height: 4px;
    background: rgba(0,229,255,.3);
    border-radius: 2px;
}

.ai7-wrist {
    position: absolute;
    top: 87%;
    width: 70%;
    height: 7%;
    background: linear-gradient(180deg, #4b5965, #202a32);
    border: 1px solid rgba(120,145,160,.55);
    border-radius: 4px;
    box-shadow:
        inset 1px 1px 3px rgba(255,255,255,.18),
        0 0 4px rgba(0,229,255,.25);
    z-index: 25;
}
.ai7-arm-l .ai7-wrist {
    left: 169%;
    right: auto;
    transform-origin: center top;
    transform: translateX(-50%) rotate(-21deg);
}
.ai7-arm-r .ai7-wrist {
    left: -69%;
    right: auto;
    transform-origin: center top;
    transform: translateX(-50%) rotate(21deg);
}

/* ---- HANDS ---- */
.ai7-hand {
    position: absolute;
    bottom: 0;
    width: 200%;
    height: 22%;
    z-index: 26;
    transform-style: preserve-3d;
}
.ai7-arm-l .ai7-hand {
    left: 60%;
    right: auto;
    transform-origin: left top;
    transform: translateX(0) rotate(-5deg) rotateX(18deg);
}
.ai7-arm-r .ai7-hand {
    left: auto;
    right: 60%;
    transform-origin: right top;
    transform: translateX(0) rotate(5deg) rotateX(18deg);
}

.ai7-palm {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 60%;
    background:
        linear-gradient(170deg,
            #f0f4f8 0%, #d0d8e0 50%, #a0aab5 100%);
    border-radius: 35% 35% 30% 30%;
    box-shadow:
        inset 2px 2px 5px rgba(255,255,255,.4),
        inset -2px -2px 5px rgba(30,50,70,.3),
        0 2px 4px rgba(0,0,0,.3);
}

/* ---- FINGERS ---- */
.ai7-finger {
    position: absolute;
    bottom: 0;
    transform-origin: center bottom;
    transform-style: preserve-3d;
    z-index: 28;
}

/* Thumb */
.ai7-finger.ai7-thumb {
    left: 5%;
    width: 16%;
    height: 55%;
    transform: rotateZ(25deg);
}
.ai7-arm-r .ai7-finger.ai7-thumb {
    left: auto;
    right: 5%;
    transform: rotateZ(-25deg);
}

/* Index */
.ai7-finger.ai7-index {
    left: 22%;
    width: 14%;
    height: 80%;
}

/* Middle */
.ai7-finger.ai7-middle-f {
    left: 38%;
    width: 14%;
    height: 100%;
}

/* Ring */
.ai7-finger.ai7-ring {
    left: 54%;
    width: 14%;
    height: 88%;
}

/* Pinky */
.ai7-finger.ai7-pinky {
    left: 70%;
    width: 12%;
    height: 62%;
}

/* Right hand fingers mirror */
.ai7-arm-r .ai7-finger.ai7-index { left: auto; right: 22%; }
.ai7-arm-r .ai7-finger.ai7-middle-f { left: auto; right: 38%; }
.ai7-arm-r .ai7-finger.ai7-ring { left: auto; right: 54%; }
.ai7-arm-r .ai7-finger.ai7-pinky { left: auto; right: 70%; }

/* ---- PHALANGES ---- */
.ai7-phalanx {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center bottom;
    transform-style: preserve-3d;
}

.ai7-phalanx.ai7-proximal {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffffff, #d7e0e8 58%, #8d9aa7);
    border: 1px solid rgba(40, 62, 78, .8);
    border-radius: 6px 6px 3px 3px;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.9),
        0 2px 4px rgba(0,0,0,.55);
}

.ai7-phalanx.ai7-middle {
    bottom: 2px;
    width: 85%;
    height: 65%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f0f4f8, #c0cdd8 58%, #7d8a97);
    border: 1px solid rgba(40, 62, 78, .7);
    border-radius: 4px;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.8),
        0 2px 3px rgba(0,0,0,.45);
}

.ai7-phalanx.ai7-distal {
    bottom: 2px;
    width: 75%;
    height: 60%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #e8eef4, #b0bcc8 58%, #6d7a87);
    border: 1px solid rgba(40, 62, 78, .6);
    border-radius: 4px 4px 50% 50%;
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.7),
        0 2px 3px rgba(0,0,0,.4);
}

/* Joint lines between phalanges */
.ai7-phalanx.ai7-proximal::after,
.ai7-phalanx.ai7-middle::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 15%;
    width: 70%;
    height: 3px;
    background: #101a22;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0,229,255,.8);
}

/* ---- KEYBOARD ---- */
.ai7-keyboard {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%) perspective(500px) rotateX(12deg);
    transform-origin: center bottom;
    width: 96%;
    height: 22%;
    z-index: 22;
}

.ai7-kb-base {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #1a2030, #0d1520);
    border-radius: 8px;
    box-shadow:
        0 4px 12px rgba(0,0,0,.6),
        0 0 8px rgba(0,229,255,.1);
    overflow: hidden;
}

.ai7-kb-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #556, #889, #556);
    border-radius: 8px 8px 0 0;
}

.ai7-kb-edge {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background: rgba(0,229,255,.5);
    box-shadow: 0 0 6px rgba(0,229,255,.4);
    border-radius: 2px;
}

.ai7-kb-rows {
    position: absolute;
    top: 8%;
    left: 3%;
    right: 3%;
    bottom: 8%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ai7-kb-row {
    display: flex;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.ai7-key {
    flex: 1;
    background: linear-gradient(180deg, #c8d0d8 0%, #9aa5b0 100%);
    border-radius: 2px;
    border: 1px solid rgba(80,90,100,.5);
    box-shadow:
        inset 1px 1px 2px rgba(255,255,255,.3),
        0 2px 3px rgba(0,0,0,.3),
        0 0 2px rgba(0,229,255,.1);
    min-width: 0;
}

.ai7-key-wide { flex: 1.5; }
.ai7-key-med { flex: 1.2; }
.ai7-key-wide2 { flex: 1.8; }
.ai7-key-enter { flex: 2; }
.ai7-key-shift { flex: 1.6; }
.ai7-key-ctrl { flex: 1; }
.ai7-key-fn { flex: 0.8; }
.ai7-key-alt { flex: 0.8; }
.ai7-spacebar { flex: 4; }

/* ============================================================
   ICON EMISSION SYSTEM (V-pattern from robot head)
   ============================================================ */
:root {
    --facebook-blue: #1877F2;
    --youtube-red: #FF0000;
    --instagram-grad: #E1306C;
    --whatsapp-green: #25D366;
    --tiktok-cyan: #25F4EE;
    --tiktok-pink: #FE2C55;
    --messenger-blue: #00B2FF;
    --telegram-blue: #229ED9;
    --snapchat-yellow: #FFFC00;
    --pinterest-red: #E60023;
    --linkedin-blue: #0A66C2;
    --email-blue: #4285F4;
    --ms-red: #F25022;
}

.ai7-emitted-logo {
    position: absolute;
    width: clamp(26px, 3vw, 40px);
    aspect-ratio: 1;
    object-fit: contain;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 35;
}

/* Channel 1 — upper-left arm of V */
.ai7-icon-channel-left {
    left: 48%;
    top: 20%;
    transform-origin: center;
    animation: ai7-logo-left-v 1.8s ease-out forwards;
}

/* Channel 2 — upper-right arm of V */
.ai7-icon-channel-right {
    left: 52%;
    top: 20%;
    transform-origin: center;
    animation: ai7-logo-right-v 1.8s ease-out forwards;
}

/* Channel 3 — emitted from right ear */
.ai7-icon-channel-ear {
    left: 69%;
    top: 27%;
    transform-origin: left center;
    animation: ai7-logo-right-ear 1.8s ease-out forwards;
}

@keyframes ai7-logo-left-v {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.35) rotate(-8deg);
    }
    18% {
        opacity: 1;
        transform: translate(-18px, -24px) scale(.8) rotate(-4deg);
    }
    72% {
        opacity: 1;
        transform: translate(-78px, -92px) scale(1) rotate(3deg);
    }
    100% {
        opacity: 0;
        transform: translate(-90px, -105px) scale(.9) rotate(6deg);
    }
}

@keyframes ai7-logo-right-v {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.35) rotate(8deg);
    }
    18% {
        opacity: 1;
        transform: translate(18px, -24px) scale(.8) rotate(4deg);
    }
    72% {
        opacity: 1;
        transform: translate(78px, -92px) scale(1) rotate(-3deg);
    }
    100% {
        opacity: 0;
        transform: translate(90px, -105px) scale(.9) rotate(-6deg);
    }
}

@keyframes ai7-logo-right-ear {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(.35);
    }
    18% {
        opacity: 1;
        transform: translate(24px, -2px) scale(.8);
    }
    72% {
        opacity: 1;
        transform: translate(105px, -8px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(125px, -8px) scale(.9);
    }
}

/* Responsive icon emission */
@media (max-width: 768px) {
    .ai7-emitted-logo { width: clamp(22px, 3.5vw, 30px); }
    @keyframes ai7-logo-left-v {
        0% { opacity: 0; transform: translate(0,0) scale(.35); }
        18% { opacity: 1; transform: translate(-12px,-16px) scale(.8); }
        72% { opacity: 1; transform: translate(-50px,-60px) scale(1); }
        100% { opacity: 0; transform: translate(-60px,-70px) scale(.9); }
    }
    @keyframes ai7-logo-right-v {
        0% { opacity: 0; transform: translate(0,0) scale(.35); }
        18% { opacity: 1; transform: translate(12px,-16px) scale(.8); }
        72% { opacity: 1; transform: translate(50px,-60px) scale(1); }
        100% { opacity: 0; transform: translate(60px,-70px) scale(.9); }
    }
    @keyframes ai7-logo-right-ear {
        0% { opacity: 0; transform: translate(0,0) scale(.35); }
        18% { opacity: 1; transform: translate(16px,-2px) scale(.8); }
        72% { opacity: 1; transform: translate(70px,-5px) scale(1); }
        100% { opacity: 0; transform: translate(85px,-5px) scale(.9); }
    }
}

/* ---- TYPING ANIMATIONS (10 independent fingers) ---- */

/* LEFT HAND */
.ai7-arm-l .ai7-finger.ai7-thumb {
    animation: ai7-left-thumb-press 2.4s infinite;
    animation-delay: -0.8s;
}
.ai7-arm-l .ai7-finger.ai7-index {
    animation: ai7-left-index-press 1.28s infinite;
    animation-delay: -0.34s;
}
.ai7-arm-l .ai7-finger.ai7-middle-f {
    animation: ai7-left-middle-press 1.61s infinite;
    animation-delay: -1.07s;
}
.ai7-arm-l .ai7-finger.ai7-ring {
    animation: ai7-left-ring-press 2.2s infinite;
    animation-delay: -1.5s;
}
.ai7-arm-l .ai7-finger.ai7-pinky {
    animation: ai7-left-pinky-press 2.9s infinite;
    animation-delay: -2.1s;
}

/* RIGHT HAND */
.ai7-arm-r .ai7-finger.ai7-thumb {
    animation: ai7-right-thumb-press 2.6s infinite;
    animation-delay: -1.2s;
}
.ai7-arm-r .ai7-finger.ai7-index {
    animation: ai7-right-index-press 1.37s infinite;
    animation-delay: -0.76s;
}
.ai7-arm-r .ai7-finger.ai7-middle-f {
    animation: ai7-right-middle-press 1.83s infinite;
    animation-delay: -1.42s;
}
.ai7-arm-r .ai7-finger.ai7-ring {
    animation: ai7-right-ring-press 2.1s infinite;
    animation-delay: -0.6s;
}
.ai7-arm-r .ai7-finger.ai7-pinky {
    animation: ai7-right-pinky-press 2.8s infinite;
    animation-delay: -1.8s;
}

/* Left thumb - space bar */
@keyframes ai7-left-thumb-press {
    0%, 14%, 28%, 100% { transform: rotateZ(25deg) translateY(0); }
    18% { transform: rotateZ(20deg) translateY(3px); }
    22% { transform: rotateZ(22deg) translateY(5px); }
    25% { transform: rotateZ(24deg) translateY(2px); }
}

/* Left index */
@keyframes ai7-left-index-press {
    0%, 11%, 24%, 100% { transform: translateY(0); }
    13% { transform: rotateX(10deg) translateY(2px); }
    16% { transform: rotateX(22deg) translateY(5px); }
    19% { transform: rotateX(28deg) translateY(6px); }
    22% { transform: rotateX(8deg) translateY(2px); }
}

/* Left middle */
@keyframes ai7-left-middle-press {
    0%, 13%, 26%, 100% { transform: translateY(0); }
    15% { transform: rotateX(8deg) translateY(2px); }
    18% { transform: rotateX(20deg) translateY(4px); }
    21% { transform: rotateX(30deg) translateY(7px); }
    24% { transform: rotateX(5deg) translateY(1px); }
}

/* Left ring */
@keyframes ai7-left-ring-press {
    0%, 15%, 30%, 100% { transform: translateY(0); }
    18% { transform: rotateX(12deg) translateY(3px); }
    22% { transform: rotateX(22deg) translateY(5px); }
    26% { transform: rotateX(6deg) translateY(1px); }
}

/* Left pinky */
@keyframes ai7-left-pinky-press {
    0%, 20%, 38%, 100% { transform: translateY(0); }
    24% { transform: rotateX(15deg) translateY(3px); }
    28% { transform: rotateX(20deg) translateY(4px); }
    33% { transform: rotateX(5deg) translateY(1px); }
}

/* Right thumb */
@keyframes ai7-right-thumb-press {
    0%, 16%, 30%, 100% { transform: rotateZ(-25deg) translateY(0); }
    20% { transform: rotateZ(-20deg) translateY(3px); }
    24% { transform: rotateZ(-22deg) translateY(5px); }
    27% { transform: rotateZ(-24deg) translateY(2px); }
}

/* Right index */
@keyframes ai7-right-index-press {
    0%, 12%, 25%, 100% { transform: translateY(0); }
    14% { transform: rotateX(12deg) translateY(2px); }
    17% { transform: rotateX(25deg) translateY(6px); }
    20% { transform: rotateX(30deg) translateY(7px); }
    23% { transform: rotateX(6deg) translateY(1px); }
}

/* Right middle */
@keyframes ai7-right-middle-press {
    0%, 10%, 22%, 100% { transform: translateY(0); }
    12% { transform: rotateX(10deg) translateY(2px); }
    15% { transform: rotateX(24deg) translateY(5px); }
    18% { transform: rotateX(32deg) translateY(7px); }
    20% { transform: rotateX(4deg) translateY(1px); }
}

/* Right ring */
@keyframes ai7-right-ring-press {
    0%, 14%, 28%, 100% { transform: translateY(0); }
    17% { transform: rotateX(14deg) translateY(3px); }
    21% { transform: rotateX(20deg) translateY(5px); }
    25% { transform: rotateX(8deg) translateY(2px); }
}

/* Right pinky */
@keyframes ai7-right-pinky-press {
    0%, 18%, 35%, 100% { transform: translateY(0); }
    22% { transform: rotateX(12deg) translateY(2px); }
    26% { transform: rotateX(18deg) translateY(4px); }
    30% { transform: rotateX(4deg) translateY(1px); }
}

/* Hand micro-shift */
.ai7-arm-l .ai7-hand {
    animation: ai7-left-hand-shift 3.2s ease-in-out infinite;
}
.ai7-arm-r .ai7-hand {
    animation: ai7-right-hand-shift 2.8s ease-in-out infinite;
}

@keyframes ai7-left-hand-shift {
    0%,
    100% {
        transform:
            translateX(0)
            translateY(0)
            rotate(-5deg)
            rotateX(18deg);
    }

    50% {
        transform:
            translateX(2px)
            translateY(1px)
            rotate(-4deg)
            rotateX(18deg);
    }
}
@keyframes ai7-right-hand-shift {
    0%,
    100% {
        transform:
            translateX(0)
            translateY(0)
            rotate(5deg)
            rotateX(18deg);
    }

    50% {
        transform:
            translateX(-2px)
            translateY(1px)
            rotate(4deg)
            rotateX(18deg);
    }
}

/* Wrist micro-rotation */
.ai7-arm-l .ai7-wrist {
    animation: ai7-left-wrist-rotate 2.5s ease-in-out infinite;
}
.ai7-arm-r .ai7-wrist {
    animation: ai7-right-wrist-rotate 2.2s ease-in-out infinite;
}

@keyframes ai7-left-wrist-rotate {
    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(-21deg);
    }
    50% {
        transform:
            translateX(-50%)
            rotate(-19.5deg);
    }
}
@keyframes ai7-right-wrist-rotate {
    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(21deg);
    }
    50% {
        transform:
            translateX(-50%)
            rotate(19.5deg);
    }
}

/* Forearm typing follow */
.ai7-arm-l .ai7-forearm {
    animation: ai7-left-forearm-typing 3s ease-in-out infinite;
}
.ai7-arm-r .ai7-forearm {
    animation: ai7-right-forearm-typing 2.7s ease-in-out infinite;
}

@keyframes ai7-left-forearm-typing {
    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(-21deg)
            translateY(0);
    }
    45% {
        transform:
            translateX(-50%)
            rotate(-20deg)
            translateY(1px);
    }
    72% {
        transform:
            translateX(-50%)
            rotate(-22deg)
            translateY(0);
    }
}
@keyframes ai7-right-forearm-typing {
    0%,
    100% {
        transform:
            translateX(-50%)
            rotate(21deg)
            translateY(0);
    }
    40% {
        transform:
            translateX(-50%)
            rotate(20deg)
            translateY(1px);
    }
    68% {
        transform:
            translateX(-50%)
            rotate(22deg)
            translateY(0);
    }
}

/* ---- EYE BLINK ---- */
@keyframes ai7-eye-blink {
    0%, 94%, 100% { transform: scaleY(1); }
    96% { transform: scaleY(0.08); }
    98% { transform: scaleY(1); }
}

/* ---- REACTOR PULSE ---- */
@keyframes ai7-reactor-pulse {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.3); }
}

/* ---- HEAD TILT ---- */
@keyframes ai7-head-tilt {
    0%, 100% { transform: translateX(-50%) rotate(0deg); }
    30% { transform: translateX(-50%) rotate(0.8deg); }
    70% { transform: translateX(-50%) rotate(-0.6deg); }
}

/* ---- BODY BREATHE ---- */
@keyframes ai7-body-breathe {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-1.5px); }
}

/* ---- KEY PRESS HIGHLIGHT ---- */
.ai7-key {
    transition: box-shadow 0.15s ease;
}

/* ---- PERFORMANCE ---- */
.ai7-finger, .ai7-hand, .ai7-wrist, .ai7-forearm,
.ai7-eye, .ai7-reactor-glow, .ai7-shoulder-pad {
    will-change: transform;
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
    .ai7-finger,
    .ai7-hand,
    .ai7-wrist,
    .ai7-forearm,
    .ai7-arm-l,
    .ai7-arm-r,
    .ai7-eye,
    .ai7-head,
    .ai7-robot,
    .ai7-reactor-glow {
        animation: none !important;
    }
    .ai7-arm-l { transform: rotateZ(0deg); }
    .ai7-arm-r { transform: rotateZ(0deg); }
    .ai7-arm-l .ai7-forearm { transform: translateX(-50%) rotate(-21deg); }
    .ai7-arm-r .ai7-forearm { transform: translateX(-50%) rotate(21deg); }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 992px) {
    .ai7-robot { width: clamp(180px, 30vw, 280px); }
}

@media (max-width: 768px) {
    .ai7-robot { width: clamp(160px, 40vw, 240px); }
    .ai7-keyboard { height: 20%; }
}

@media (max-width: 480px) {
    .ai7-robot { width: clamp(140px, 50vw, 200px); }
    .ai7-keyboard { height: 18%; }
}

/* ============================================================
   LIGHT MODE
   ============================================================ */
[data-theme="light"] .ai-game-3d-stage {
    background:
        radial-gradient(ellipse at 50% 30%, #c8dcf0 0%, #a3b8d0 60%, #8aa0c0 100%);
    border-color: rgba(0, 102, 255, 0.3);
}

[data-theme="light"] .ai-bar-chart-overlay {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(0, 102, 255, 0.4);
}

[data-theme="light"] .bc-title { color: #0066ff; }
[data-theme="light"] .bc-bar { background: linear-gradient(180deg, #00cc66, #0066ff); }
[data-theme="light"] .bc-bar:nth-child(odd) { background: linear-gradient(180deg, #0066ff, #0052cc); }
[data-theme="light"] .bc-trend-line { background: #cc3366; }
[data-theme="light"] .bc-trend-dot { background: #cc3366; }
[data-theme="light"] .bc-label { color: #cc3366; }
[data-theme="light"] .scene-title h3 { color: #1a2235; text-shadow: none; }
[data-theme="light"] .scene-title p { color: #0066ff; }