/* 1. Skrytí scrollbaru pro galerii */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* 2. Reveal animace */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Globální styly pro Bento karty */
.bento-card {
    border-radius: 2rem;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f7;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
@media (prefers-color-scheme: dark) {
    .bento-card {
        background-color: #1c1c1e;
        border-color: rgba(255, 255, 255, 0.05);
    }
}
.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -12px rgba(0,0,0,0.15);
}

.chat-bubble {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    animation: chatBubbleIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-play-state: paused;
}
.reveal.active .chat-bubble {
    animation-play-state: running;
}
@keyframes chatBubbleIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes chatBubblePulse {
    0%, 100% {
        box-shadow: -8px 12px 20px -4px rgba(0,0,0,0.5), 0 0 40px -5px rgba(59,130,246,0.55);
    }
    50% {
        box-shadow: -8px 12px 20px -4px rgba(0,0,0,0.5), 0 0 55px -5px rgba(59,130,246,0.85);
    }
}
.chat-bubble-pulse {
    animation: chatBubblePulse 2.4s ease-in-out infinite;
    animation-delay: 2.3s;
}
.chat-bubble-inner {
    padding: clamp(0.85rem, 1.5vw + 0.5rem, 1.25rem) clamp(1rem, 2vw + 0.5rem, 1.25rem);
}
.chat-bubble-text {
    font-size: clamp(13px, 0.9vw + 9px, 16px);
}

@media (min-width: 640px) and (max-width: 1023px) and (orientation: portrait) {
    .chat-bubble-extra {
        display: none;
    }
}

.phone-reveal {
    transform: translateY(24px);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.phone-reveal.active {
    transform: translateY(0);
}
.faq-item {
    border-radius: 1.5rem;
    background-color: #f5f5f7;
    transition: background-color 0.3s ease;
}
@media (prefers-color-scheme: dark) {
    .faq-item {
        background-color: #1c1c1e;
    }
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
}
.faq-item.open .faq-answer {
    max-height: 900px;
}
.faq-icon {
    transition: transform 0.3s ease;
}
.faq-item.open .faq-icon {
    transform: rotate(45deg);
}

/* Nahrazen logickým padding-inline-start místo padding-left */
.faq-list {
    margin: 0;
    padding-inline-start: 1.25rem;
    list-style: disc;
}
.faq-list li {
    margin-bottom: 0.4rem;
}
/* 4. Custom zakulacený scrollbar pro dropdown jazyků */

/* A) Vynucení moderního barevného standardu pouze tam, kde není webkit (Firefox) */
@supports not selector(::-webkit-scrollbar) {
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
}
@media (prefers-color-scheme: dark) {
    @supports not selector(::-webkit-scrollbar) {
        .custom-scrollbar {
            scrollbar-color: #475569 transparent;
        }
    }
}

/* B) CHROME / VIVALDI / SAFARI / EDGE (Chromium) */

/* 1. Krok: MUSÍME definovat základ, jinak to prohlížeč celé odignoruje */
.custom-scrollbar::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    background-color: transparent !important;
}

/* 2. Krok: Zrušení ošklivých systémových tlačítek/šipek */
.custom-scrollbar::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 3. Krok: Stopa */
.custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent !important;
    border-radius: 10px;
    margin-block: 8px; /* Zvýšeno ze 4px na 16px */
}

/* 4. Krok: Samotný pohyblivý posuvník a jeho kulatost */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Světle šedá (slate-300) */
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8; /* Tmavší (slate-400) */
}

/* Dark mode WebKit varianty */
@media (prefers-color-scheme: dark) {
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #475569; /* slate-600 */
        border: 3px solid transparent;
        background-clip: padding-box;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #64748b; /* slate-500 */
    }
}


/* ================================================================
 *  BENTO KEYBOARD — rozměry exportovaných obrázků
 *  ---------------------------------------------------------------
 *  plain-3x3:   1080 × 1171
 *  suggest-3x3: 1080 × 1432
 *  suggest-3x4: 1080 × 1669
 *  ================================================================ */

/* ================================================================
 *  BENTO KEYBOARD — Správné proporce s dominancí a bleedem
 *  ================================================================ */

.keyboard-visual .keyboard-img {
    display: block;
    height: auto;
    object-fit: contain;
    transition: transform 750ms cubic-bezier(0.25, 1, 0.35, 1) !important;
}

/* ----------------------------------------------------------------
 *  1. ZÁPADNÍ / BEZ NAŠEPTÁVAČE (en, cs, de...) — 1080 × 1171
 *  Velká klávesnice s masivním dojmem, v klidu mírný bleed
 *  ---------------------------------------------------------------- */
.keyboard-visual.kb-plain-3x3 .keyboard-img {
    width: 78% !important;
    max-width: 325px !important;
    transform: translateY(1.25rem) !important;
}

.group:hover .keyboard-visual.kb-plain-3x3 .keyboard-img {
    transform: translateY(2.5rem) !important;
}

/* ----------------------------------------------------------------
 *  2. ČÍNA / 3×3 S NAŠEPTÁVAČEM (zh-cn, zh-tw...) — 1080 × 1432
 *  Přesně mezi EN a JA, v klidu horní řada na hraně, hover odkryje pinyin
 *  ---------------------------------------------------------------- */
.keyboard-visual.kb-suggest-3x3 .keyboard-img {
    width: 70% !important;
    max-width: 280px !important;
    transform: translateY(1.25rem) !important;
}

.group:hover .keyboard-visual.kb-suggest-3x3 .keyboard-img {
    transform: translateY(4.25rem) !important;
}

/* ----------------------------------------------------------------
 *  3. JAPONSKO / 3×4 S NAŠEPTÁVAČEM (ja) — 1080 × 1669
 *  Původní dokonalé hodnoty: velká klávesnice, hover plně odkryje kanji
 *  ---------------------------------------------------------------- */
.keyboard-visual.kb-suggest-3x4 .keyboard-img {
    width: 61% !important;
    max-width: 252px !important;
    transform: translateY(1.25rem) !important;
}

.group:hover .keyboard-visual.kb-suggest-3x4 .keyboard-img {
    transform: translateY(4.5rem) !important;
}

.voice-card-wrapper {
    display: block;
    transform: translateY(0.25rem) scale(1) !important;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
}

.bento-card:hover .voice-card-wrapper {
    transform: translateY(-0.5rem) scale(1.02) !important;
}

/* ----------------------------------------------------------------
 *  4. KOREA / 3×4 BEZ NAŠEPTÁVAČE (ko) — 1080 × 1408
 *  - Šířka kompenzuje vyšší poměr stran (3×4)
 *  - V klidu: přirozený bleed nahoře i dole
 *  - Hover: jemný posun dolů (stejně jako u západní verze)
 *  ---------------------------------------------------------------- */
.keyboard-visual.kb-plain-3x4 .keyboard-img {
    width: 66% !important;
    max-width: 270px !important;
    transform: translateY(1.25rem) !important;
}

.group:hover .keyboard-visual.kb-plain-3x4 .keyboard-img {
    transform: translateY(2.5rem) !important;
}

/* ================================================================
 *  BENTO VOICE DICTATION — Plný nápis nahoře + čistý bleed dole
 *  ================================================================ */

.voice-dictation-img {
    display: block;
    width: 78% !important;
    max-width: 255px !important;
    height: auto !important;
    will-change: transform;
    transition: transform 750ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* V klidu:
 *  - Nahoře: 'Voice typing' má plný prostor a je 100% čitelný
 *  - Dole: tlačítko CLOSE je z poloviny zanořené ve spodním rámu (čistý bleed) */
.bento-card .voice-dictation-img {
    transform: translateY(1.25rem) !important;
}

/* Hover:
 *  - Jemný zdvih NAHORU o ~12px
 *  - Odkryje víc z tlačítka CLOSE, ale nahoře stále nenarazí do textu */
.bento-card:hover .voice-dictation-img {
    transform: translateY(0.5rem) !important;
}