/* ==========================================================================
   AzTyping - Virtual Keyboard, Key Themes, Multi-Language & Cheat Sheet
   ========================================================================== */

/* Virtual Keyboard - 3D Tactile Styling with Theme Variables */
.virtual-keyboard-wrap { margin-top: 22px; position: relative; }
.paper-keyboard { 
    background: var(--kb-bg, linear-gradient(180deg, #F8FAFC, #F1F5F9)); 
    border: 2px solid var(--key-border, #CBD5E1); 
    border-radius: 20px; 
    padding: 16px; 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 8px 24px rgba(0,0,0,0.12);
}
.kb-row { display: flex; justify-content: center; gap: 7px; }
.key { 
    background: var(--key-bg, linear-gradient(180deg, #FFFFFF, #F8FAFC)); 
    border: 1.5px solid var(--key-border, #CBD5E1); 
    border-radius: 10px; 
    padding: 9px 13px; 
    font-size: 1rem; 
    font-weight: 800; 
    color: var(--key-text, #334155); 
    box-shadow: 0 4px 0 var(--key-shadow, #94A3B8), 0 6px 10px rgba(0,0,0,0.1); 
    min-width: 40px; 
    text-align: center; 
    transition: all 0.1s cubic-bezier(0.34, 1.56, 0.64, 1); 
    cursor: default; 
    position: relative; 
    top: 0; 
}
.key:hover { background: rgba(110,68,255,0.2); border-color: var(--primary-purple); color: var(--primary-purple); }
.key.pressed { 
    top: 4px; 
    box-shadow: 0 0 0 var(--key-shadow, #94A3B8), 0 2px 4px rgba(0,0,0,0.2); 
    background: linear-gradient(135deg, var(--primary-purple, #6E44FF), #5B21B6); 
    color: #FFF; 
    border-color: var(--primary-purple); 
    box-shadow: 0 0 16px rgba(110, 68, 255, 0.6);
}
.key-space { flex: 1; max-width: 280px; }

/* Custom Keyboard Preset Themes */
.paper-keyboard.kb-theme-paper {
    background: linear-gradient(180deg, #F8FAFC, #F1F5F9) !important;
    border-color: #CBD5E1 !important;
}
.paper-keyboard.kb-theme-paper .key {
    background: linear-gradient(180deg, #FFFFFF, #F8FAFC) !important;
    border-color: #CBD5E1 !important;
    color: #334155 !important;
    box-shadow: 0 4px 0 #94A3B8, 0 6px 10px rgba(0,0,0,0.06) !important;
}

.paper-keyboard.kb-theme-neon {
    background: linear-gradient(180deg, #1E1B4B, #0F172A) !important;
    border-color: #A855F7 !important;
    box-shadow: 0 0 20px rgba(168,85,247,0.3) !important;
}
.paper-keyboard.kb-theme-neon .key {
    background: linear-gradient(180deg, #312E81, #1E1B4B) !important;
    border-color: #C084FC !important;
    color: #F3E8FF !important;
    box-shadow: 0 4px 0 #581C87, 0 6px 10px rgba(0,0,0,0.3) !important;
}

.paper-keyboard.kb-theme-terminal {
    background: #05140A !important;
    border-color: #22C55E !important;
    box-shadow: 0 0 20px rgba(34,197,94,0.25) !important;
}
.paper-keyboard.kb-theme-terminal .key {
    background: #022C22 !important;
    border-color: #22C55E !important;
    color: #4ADE80 !important;
    box-shadow: 0 4px 0 #14532D, 0 6px 10px rgba(0,0,0,0.4) !important;
    font-family: 'Courier Prime', monospace !important;
}

.paper-keyboard.kb-theme-pastel {
    background: linear-gradient(180deg, #FDF2F8, #FCE7F3) !important;
    border-color: #F472B6 !important;
}
.paper-keyboard.kb-theme-pastel .key {
    background: linear-gradient(180deg, #FFFFFF, #FDF2F8) !important;
    border-color: #F472B6 !important;
    color: #9D174D !important;
    box-shadow: 0 4px 0 #F43F5E, 0 6px 10px rgba(0,0,0,0.06) !important;
}

.paper-keyboard.kb-theme-stealth {
    background: linear-gradient(180deg, #27272A, #18181B) !important;
    border-color: #3F3F46 !important;
}
.paper-keyboard.kb-theme-stealth .key {
    background: linear-gradient(180deg, #3F3F46, #27272A) !important;
    border-color: #52525B !important;
    color: #E4E4E7 !important;
    box-shadow: 0 4px 0 #09090B, 0 6px 10px rgba(0,0,0,0.3) !important;
}

.live-stats-card { display: flex; flex-direction: column; gap: 14px; }
.live-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.live-stat-box { background: rgba(0,0,0,0.03); padding: 8px 4px; border-radius: 10px; }
.sparkline-wrap { background: rgba(0,0,0,0.02); border-radius: 10px; padding: 10px; margin-top: 6px; }
.sparkline-svg { width: 100%; height: 70px; }
.sparkline-labels { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); }
.live-metrics-footer { display: flex; justify-content: space-around; text-align: center; border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 10px; }


/* ====================================================== */
/* MULTI-LANGUAGE VIRTUAL KEYBOARD DUAL LABELS            */
/* ====================================================== */
.key {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.key-eng-sub {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.55;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
    pointer-events: none;
}
.key-native-main {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.1;
    pointer-events: none;
}
.lang-kruti .key-native-main {
    font-family: 'KrutiDev 010', 'Devanagari', sans-serif !important;
    font-size: 1.2rem;
}
.lang-mangal .key-native-main, .lang-marathi .key-native-main {
    font-family: 'Hind', 'Noto Sans Devanagari', sans-serif !important;
    font-size: 1.15rem;
}
.lang-punjabi .key-native-main {
    font-family: 'Noto Sans Gurmukhi', sans-serif !important;
    font-size: 1.15rem;
}


/* =========================================================================
   NATIVE MULTI-LANGUAGE VIRTUAL KEYBOARD & CHEAT SHEET STYLING
   ========================================================================= */
.paper-keyboard .key {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px;
    transition: transform 0.08s ease, background 0.12s ease !important;
}

.key-main-char {
    font-size: 1.15rem;
    font-weight: 700;
}

.key-native-char {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-purple, #6E44FF);
    font-family: 'Kalam', 'Hind', 'Gotu', 'Architects Daughter', sans-serif;
    line-height: 1;
}

.key-sub-letter {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted, #94A3B8);
    font-family: 'Outfit', sans-serif;
    opacity: 0.7;
    pointer-events: none;
}

/* Side-by-Side Virtual Keyboard & Left Cheat Sheet Layout */
.virtual-keyboard-wrap {
    display: flex;
    gap: 14px;
    align-items: stretch;
    margin-top: 18px;
    width: 100%;
}

.virtual-keyboard-wrap .paper-keyboard {
    flex: 1;
    min-width: 0;
}

/* Native Shortcuts & Alt Code Cheat Sheet Panel (Left Column) */
.native-cheatsheet-panel {
    width: 220px;
    flex-shrink: 0;
    background: #FFFBEB;
    border: 1.5px dashed #F59E0B;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 2px 2px 0px #FDE68A;
    animation: fadeInCheat 0.3s ease both;
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
}

@media (max-width: 960px) {
    .virtual-keyboard-wrap {
        flex-direction: column;
    }
    .native-cheatsheet-panel {
        width: 100%;
        max-height: 180px;
    }
}

@keyframes fadeInCheat {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: translateX(0); }
}

.cheat-header {
    font-size: 0.8rem;
    font-weight: 800;
    color: #92400E;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px dashed #FCD34D;
    padding-bottom: 6px;
}

.cheat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding-right: 2px;
}

.cheat-badge-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 5px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.cheat-char-highlight {
    font-size: 1.1rem;
    font-weight: 900;
    color: #DC2626;
    font-family: 'Hind', 'Kalam', sans-serif;
}

.cheat-combo-text {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E293B;
    background: #F1F5F9;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid #CBD5E1;
}

.cheat-tip-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748B;
}

/* Smart Next-Key Target Glow Pulse */
.paper-keyboard .key.key-next-target {
    border-color: #6E44FF !important;
    background: linear-gradient(180deg, #EDE9FE, #DDD6FE) !important;
    color: #4338CA !important;
    box-shadow: 0 0 14px rgba(110, 68, 255, 0.6), 0 0 0 2px #6E44FF !important;
    transform: translateY(-2px) scale(1.06) !important;
    animation: keyTargetPulse 1.2s ease-in-out infinite alternate !important;
    z-index: 10 !important;
}

@keyframes keyTargetPulse {
    0% {
        box-shadow: 0 0 8px rgba(110, 68, 255, 0.4), 0 0 0 1.5px #6E44FF;
        transform: translateY(-1px) scale(1.03);
    }
    100% {
        box-shadow: 0 0 18px rgba(110, 68, 255, 0.8), 0 0 0 2.5px #4F46E5;
        transform: translateY(-3px) scale(1.08);
    }
}

/* Quick Language Switcher Pills */
.quick-lang-pills .lang-pill {
    padding: 5px 12px;
    border-radius: 12px;
    border: 1.5px solid #CBD5E1;
    background: #FFFFFF;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 1px 1px 0px #E2E8F0;
}

.quick-lang-pills .lang-pill:hover {
    border-color: #6E44FF;
    color: #6E44FF;
    transform: translateY(-1px);
}

.quick-lang-pills .lang-pill.active {
    background: linear-gradient(135deg, #6E44FF, #5B21B6);
    border-color: #4338CA;
    color: #FFFFFF !important;
    box-shadow: 2px 2px 0px #311075;
}