/* Styly chatu. Drive byly primo ve strance (109 KB v kazde odpovedi),
   takze se stahovaly znovu pri kazdem nacteni. Jako samostatny soubor
   se daji cachovat a stranka je o tuhle velikost lehci. */
/* Enhanced root variables with premium feel */
        :root {
            --primary-color: #FF69B4;
            --primary-light: #FF8CD4;
            --primary-dark: #E5559F;
            --secondary-color: #FFC0CB;
            --accent-color: #FFD700;
            --background-color: #1E1E2E;
            --card-background: #292938;
            --text-color: #E0E0E0;
            --text-muted: #A0A0A0;
            --border-color: #3E3E50;
            --shadow: 0 4px 15px rgba(0,0,0,0.3);
            --shadow-hover: 0 8px 25px rgba(255, 105, 180, 0.4);
            --input-background: #353545;
            --hover-color: #353545;
            --message-user-bg: linear-gradient(135deg, #FF69B4, #FF8CD4);
            --message-bot-bg: #353545;
            --success-color: #4CAF50;
            --warning-color: #FFA726;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Poppins', sans-serif;
            background: var(--background-color);
            color: var(--text-color);
            min-height: 100vh;
        }

        .container {
            display: flex;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            gap: 30px;
            height: 100vh;
        }

        /* Enhanced Sidebar Panel */
        .chat-history {
            width: 320px;
            background: var(--card-background);
            border-radius: 20px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* Mobile Sidebar Close Button */
        .sidebar-close-btn {
            display: none; /* Hidden on desktop */
            width: 100%;
            padding: 16px 20px;
            background: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(147, 112, 219, 0.15));
            border: none;
            border-bottom: 1px solid rgba(255, 105, 180, 0.2);
            color: var(--text-color);
            font-size: 1em;
            font-weight: 600;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .sidebar-close-btn i {
            font-size: 1.1em;
            color: var(--primary-color);
        }

        .sidebar-close-btn:hover {
            background: linear-gradient(135deg, rgba(255, 105, 180, 0.25), rgba(147, 112, 219, 0.25));
        }

        .sidebar-close-btn:active {
            transform: scale(0.98);
        }

        /* Show close button on mobile */
        @media (max-width: 768px) {
            .sidebar-close-btn {
                display: flex;
            }
        }

        /* Sidebar Tabs */
        .sidebar-tabs {
            display: flex;
            background: var(--card-background);
            border-bottom: 2px solid var(--border-color);
        }

        .sidebar-tab {
            flex: 1;
            padding: 15px 10px;
            background: transparent;
            border: none;
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
            font-size: 0.9em;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .sidebar-tab i {
            font-size: 1.2em;
        }

        .sidebar-tab.active {
            color: var(--primary-color);
        }

        .sidebar-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary-color);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        .sidebar-tab:hover:not(.active) {
            color: var(--primary-light);
            background: rgba(255, 105, 180, 0.05);
        }

        /* Tab Content */
        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
        }

        .tab-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .tab-panel.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Enhanced Profile Tab with Modern UI */
        .profile-section {
            padding: 20px;
        }

        .eliska-profile {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
        }

        /* Glowing avatar with gradient border */
        .eliska-avatar {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            margin: 0 auto 15px;
            border: 3px solid transparent;
            background: linear-gradient(var(--card-background), var(--card-background)) padding-box,
                        linear-gradient(135deg, #FF69B4, #9370DB, #FF69B4) border-box;
            box-shadow: 0 0 25px rgba(255, 105, 180, 0.4),
                        0 0 50px rgba(147, 112, 219, 0.2);
            object-fit: cover;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            animation: avatarGlow 3s ease-in-out infinite;
        }

        @keyframes avatarGlow {
            0%, 100% { 
                box-shadow: 0 0 25px rgba(255, 105, 180, 0.4),
                            0 0 50px rgba(147, 112, 219, 0.2);
            }
            50% { 
                box-shadow: 0 0 35px rgba(255, 105, 180, 0.6),
                            0 0 70px rgba(147, 112, 219, 0.3);
            }
        }

        .eliska-avatar:hover {
            transform: scale(1.08) rotate(2deg);
            box-shadow: 0 0 40px rgba(255, 105, 180, 0.7),
                        0 0 80px rgba(147, 112, 219, 0.4);
        }

        .eliska-name {
            font-size: 1.6em;
            font-weight: 700;
            background: linear-gradient(135deg, #FF69B4, #9370DB);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        .eliska-status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08));
            border: 1px solid rgba(76, 175, 80, 0.3);
            border-radius: 25px;
            color: #4CAF50;
            font-size: 0.85em;
            font-weight: 600;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
        }

        .eliska-status-badge:hover {
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(76, 175, 80, 0.15));
            transform: translateY(-1px);
        }

        .status-dot-sidebar {
            width: 8px;
            height: 8px;
            background: #4CAF50;
            border-radius: 50%;
            animation: pulse 2s infinite;
            box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
        }

        /* Enhanced Bio Section */
        .eliska-bio {
            background: linear-gradient(135deg, rgba(255, 105, 180, 0.08), rgba(147, 112, 219, 0.08));
            border: 1px solid rgba(255, 105, 180, 0.2);
            padding: 18px;
            border-radius: 16px;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .eliska-bio::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #FF69B4, #9370DB, #FF69B4);
            background-size: 200% 100%;
            animation: shimmer 3s ease-in-out infinite;
        }

        .eliska-bio:hover {
            border-color: rgba(255, 105, 180, 0.35);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.15);
        }

        @keyframes shimmer {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .eliska-bio p {
            margin: 0;
            line-height: 1.7;
            color: var(--text-color);
            font-size: 0.95em;
        }

        /* Context Controls */
        .context-controls {
            background: linear-gradient(135deg, rgba(255, 105, 180, 0.1), rgba(255, 182, 193, 0.1));
            padding: 15px;
            border-radius: 12px;
            margin-top: 15px;
        }

        .context-controls h3 {
            margin: 0 0 15px 0;
            font-size: 1em;
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .context-select-group {
            margin-bottom: 15px;
        }

        .context-select-group:last-child {
            margin-bottom: 0;
        }

        .context-label {
            display: block;
            font-size: 0.9em;
            color: var(--text-color);
            margin-bottom: 10px;
            font-weight: 600;
        }

        .context-select {
            width: 100%;
            padding: 12px 14px;
            background: var(--card-background);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-color);
            font-size: 1em;
            cursor: pointer;
            transition: all 0.3s ease;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FF69B4' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 40px;
        }

        .context-select:hover {
            border-color: var(--primary-color);
            background-color: var(--hover-color);
        }

        .context-select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2);
        }

        .apply-context-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            border: none;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            font-size: 1.05em;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
        }

        .apply-context-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 105, 180, 0.4);
        }

        .apply-context-btn:active {
            transform: translateY(0);
        }
        
        /* Mobile optimization for context controls */
        @media (max-width: 768px) {
            .context-controls {
                padding: 18px;
                margin-top: 20px;
                padding-bottom: 80px; /* Space for sticky button */
            }
            
            .context-controls h3 {
                font-size: 1.1em;
                margin-bottom: 18px;
            }
            
            .context-label {
                font-size: 0.95em;
                margin-bottom: 12px;
            }
            
            .context-select {
                padding: 16px 14px;
                font-size: 1.05em;
                border-radius: 14px;
                min-height: 52px;
                background-position: right 14px center;
            }
            
            .context-select-group {
                margin-bottom: 20px;
            }
            
            /* Tlacitko bylo prispendlene pres celou sirku dolu, takze viselo
               pres cely panel - i nad hrami a odkazy, se kterymi nema nic
               spolecneho. Vztahuje se jen k nalade a prostredi, tak sedi
               rovnou pod nimi a roluje s obsahem. */
            .chat-history .apply-context-btn {
                position: static;
                width: 100%;
                padding: 15px !important;
                font-size: 1.05em !important;
                margin: 4px 0 8px !important;
                border-radius: 12px !important;
                min-height: 52px;
            }
            
            /* Make select options larger on mobile */
            .context-select option {
                padding: 12px;
                font-size: 1em;
            }
            
            /* Ensure profile section has padding for sticky button */
            .profile-section {
                padding-bottom: 100px;
            }
            
            /* Add spacing at bottom of sidebar content for sticky button */
            .sidebar-content {
                padding-bottom: 70px;
            }
        }
        
        @media (max-width: 480px) {
            .context-controls {
                padding: 16px;
                padding-bottom: 90px;
            }
            
            .context-select {
                padding: 14px 12px;
                font-size: 1em;
                min-height: 48px;
            }
            
            .apply-context-btn {
                padding: 16px !important;
                font-size: 1.1em !important;
                min-height: 56px;
            }
        }
        
        /* Vysvetleni k srdickum pro neprihlaseneho. Bez nej cetl pruh
           "SRDICKA 0 + Koupit" jako "tady se plati" jeste driv, nez napsal
           prvni zpravu. */
        .srdicka-vysvetleni {
            /* Jeden radek zamerne - dva odsunuly Elisscin avatar pod okraj
               a ctvrty navrh odpovedi zmizel z obrazovky. */
            margin: 0 12px 6px;
            padding: 5px 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-radius: 10px;
            background: rgba(242, 200, 121, .1);
            border: 1px solid rgba(242, 200, 121, .22);
            color: #E8D6B0;
            font-size: .78rem;
            line-height: 1.45;
            text-align: center;
        }
        .srdicka-vysvetleni b { color: var(--gold, #F2C879); font-weight: 600; }

        /* Zamcene hry v panelu pro neprihlasene - vidi, ze existuji, ale
           klik je posle na registraci. */
        .panel-nav-item.zamceno { opacity: .62; }
        .panel-nav-item.zamceno .fa-lock { font-size: .78em; opacity: .7; }
        .zamceno-vyzva {
            margin: 8px 12px 0; font-size: .78rem; line-height: 1.4;
            color: var(--primary-color, #FF69B4); text-align: center;
        }

        /* Styly plovouciho tlacitka nalady odstraneny spolu s tlacitkem samotnym
           (24. 8. 2026) - bylo to druhe tlacitko do teze veci a lezelo na
           Elisscine profilovce u indikatoru psani. */


        /* History Tab kept for backwards compatibility */
        .history-actions {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .history-list {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }

        .chat-item {
            position: relative;
            padding: 15px;
            background: var(--input-background);
            border-radius: 12px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-color);
        }

        .chat-item:hover {
            background: var(--hover-color);
            transform: translateX(5px);
        }

        .chat-item .date {
            font-size: 0.8em;
            opacity: 0.7;
            color: var(--text-muted);
        }

        .chat-item .preview {
            color: var(--text-muted);
        }

        .delete-btn {
            opacity: 0;
            background: none;
            border: none;
            color: #dc3545;
            cursor: pointer;
            padding: 8px;
            border-radius: 50%;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .chat-item:hover .delete-btn {
            opacity: 1;
        }

        .chat-item:hover .preview {
            color: var(--text-color);
        }

        .delete-btn:hover {
            background: rgba(220, 53, 69, 0.1);
            transform: scale(1.1);
        }

        /* Confirmation modal styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: var(--card-background);
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            max-width: 400px;
            width: 90%;
            color: var(--text-color);
        }

        .modal-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .modal-btn {
            padding: 8px 20px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .confirm-btn {
            background: #dc3545;
            color: white;
        }

        .cancel-btn {
            background: #6c757d;
            color: white;
        }

        .modal-btn:hover {
            transform: translateY(-2px);
        }

        /* Registration modal styles */
        .registration-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            justify-content: center;
            /* Okno je vyssi nez maly displej. Pri align-items:center trcelo
               nahoru i dolu mimo obrazovku - krizek a prihlaseni pres Google
               byly nedosazitelne. */
            align-items: flex-start;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding: 12px 0;
            animation: fadeIn 0.3s ease;
        }

        .registration-modal.active {
            display: flex;
        }

        @media (min-height: 900px) {
            .registration-modal { align-items: center; }
        }

        .registration-modal-content {
            position: relative;
            background: var(--card-background);
            padding: 30px;
            border-radius: 20px;
            text-align: center;
            max-width: 450px;
            width: 90%;
            color: var(--text-color);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            animation: popIn 0.4s ease;
        }

        .registration-modal h2 {
            margin: 0 0 10px 0;
            font-size: 1.8em;
            background: linear-gradient(135deg, var(--primary-color), #9370DB);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .registration-modal .subtitle {
            color: var(--text-muted);
            margin-bottom: 25px;
            font-size: 1em;
        }

        .registration-form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .registration-form input {
            width: 100%;
            padding: 14px 18px;
            background: var(--input-background);
            border: 2px solid var(--border-color);
            border-radius: 12px;
            color: var(--text-color);
            font-size: 1em;
            transition: all 0.3s ease;
            box-sizing: border-box;
        }

        .registration-form input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2);
        }

        .registration-form input::placeholder {
            color: var(--text-muted);
        }

        .register-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .register-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(255, 105, 180, 0.4);
        }

        .register-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .login-link {
            margin-top: 20px;
            color: var(--text-muted);
            font-size: 0.9em;
        }

        .login-link a {
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 600;
        }

        .login-link a:hover {
            text-decoration: underline;
        }

        .registration-error {
            color: #dc3545;
            font-size: 0.9em;
            margin-top: 10px;
            display: none;
        }

        /* Anonymous message counter banner */
        .anonymous-banner {
            background: linear-gradient(135deg, rgba(255, 105, 180, 0.15), rgba(147, 112, 219, 0.15));
            border: 1px solid rgba(255, 105, 180, 0.3);
            border-radius: 12px;
            padding: 12px 20px;
            margin: 10px 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            animation: fadeIn 0.5s ease;
        }

        /* Banner o zamitnute karte nese celou vetu, ne dve slova jako
           pocitadlo zprav. Na telefonu se do jedne radky nevesel a tlacitko
           „Zaplatit znovu" vytlacil mimo obrazovku - proto se zalamuje. */
        #graceBanner {
            flex-wrap: wrap;
            gap: 10px;
        }

        #graceBanner .message-counter {
            /* pocitadlo zprav je flex a na uzkem displeji ma white-space:
               nowrap, aby se „Jeste 3 zpravy" nezlomilo. Tady je to ale cela
               veta, ktera se zalomit musi - jinak utece z obrazovky. */
            display: block;
            flex: 1 1 100%;
            line-height: 1.45;
            white-space: normal;
        }

        .anonymous-banner .message-counter {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-color);
            font-size: 0.95em;
        }

        .anonymous-banner .counter-number {
            font-weight: 700;
            color: var(--primary-color);
        }

        .anonymous-banner .register-prompt-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 8px 16px;
            font-size: 0.9em;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .anonymous-banner .register-prompt-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
        }

        /* Main Chat Area */
        .main-chat {
            flex: 1;
            background: var(--card-background);
            border-radius: 20px;
            box-shadow: var(--shadow);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .chat-header {
            padding: 12px 16px;
            min-height: 50px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* mezera mezi ikonou profilu/registrace a pilulkou se srdicky -
               bez ni se dotykaly na kazde sirce, kde pilulka sedi vpravo */
            gap: 12px;
            position: relative;
            overflow: hidden;
        }
        
        /* Add animated gradient background to header */
        .chat-header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                45deg,
                transparent,
                rgba(255, 255, 255, 0.1),
                transparent
            );
            animation: shimmer 3s infinite;
        }
        
        @keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

        .chat-header h2 {
            font-size: 1.2em;
            font-weight: 500;
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* Add status indicator for Eliška */
        .eliska-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.75em;
            opacity: 0.9;
            background: rgba(255, 255, 255, 0.15);
            padding: 4px 10px;
            border-radius: 20px;
            margin-left: 8px;
        }
        
        .status-dot {
            width: 8px;
            height: 8px;
            background: var(--success-color);
            border-radius: 50%;
            animation: pulse-glow 2s infinite;
        }
        
        @keyframes pulse-glow {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.15);
                color: #ff69b4;
            }
        }

        .chat-header-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
            padding: 8px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }

        .chat-header-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .chat-header-btn.menu-btn {
            display: none; /* Hide on desktop by default */
        }

        .profile-link {
            color: white;
            text-decoration: none;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: var(--background-color);
        }

        .chat-input {
            padding: 20px;
            background: var(--card-background);
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 10px;
        }

        .chat-input input {
            flex: 1;
            padding: 12px 20px;
            border: 2px solid var(--border-color);
            border-radius: 25px;
            outline: none;
            font-size: 1em;
            transition: border-color 0.3s ease;
            background: var(--input-background);
            color: var(--text-color);
        }

        .chat-input input::placeholder {
            color: var(--text-muted);
        }

        .chat-input input:focus {
            border-color: var(--primary-color);
        }

        .gift-button {
            background: linear-gradient(135deg, #FFD700, #FFA500);
            color: white;
            border: none;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            margin-right: 8px;
            position: relative;
            overflow: hidden;
        }

        .gift-button:hover {
            transform: scale(1.05) rotate(5deg);
            box-shadow: 0 4px 15px rgba(255, 215, 0, 0.6);
        }

        /* Photo Upload Button */
        .photo-upload-btn {
            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
            color: white;
            border: none;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            margin-right: 8px;
            position: relative;
            overflow: hidden;
        }

        .photo-upload-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 15px rgba(156, 39, 176, 0.6);
        }

        .photo-upload-btn i {
            font-size: 1.2em;
        }

        /* Photo Messages in Chat */
        .photo-message {
            max-width: 70% !important;
        }

        .photo-wrapper {
            margin: 8px 0;
            position: relative;
        }

        .chat-photo {
            max-width: 400px;
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 12px;
            display: block;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .chat-photo:hover {
            transform: scale(1.02);
        }

        .photo-caption {
            margin-top: 6px;
            font-size: 0.85em;
            opacity: 0.8;
            color: var(--text-muted);
        }

        .user-message .photo-caption {
            text-align: right;
        }

        .bot-message .photo-caption {
            text-align: left;
        }

        /* Mobile responsive for photos */
        @media (max-width: 768px) {
            .photo-message {
                max-width: 85% !important;
            }

            .chat-photo {
                max-width: 350px;
                border-radius: 10px;
            }

            .photo-caption {
                font-size: 0.75em;
            }
        }

        @media (max-width: 480px) {
            .photo-message {
                max-width: 90% !important;
            }

            .chat-photo {
                max-width: 280px;
            }

            .photo-upload-btn {
                width: 40px;
                height: 40px;
                margin-right: 6px;
            }

            .photo-upload-btn i {
                font-size: 1.1em;
            }
        }

        .gift-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .gift-button:active::before {
            width: 200px;
            height: 200px;
        }

        .gift-button i {
            font-size: 1.2em;
            animation: giftPulse 2s ease-in-out infinite;
        }

        @keyframes giftPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        .send-button {
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50%;
            width: 46px;
            height: 46px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .send-button:hover {
            transform: scale(1.05);
            background: #ff4da6;
        }

        @media (max-width: 768px) {
            :root {
                --mobile-header-height: 40px;
                --mobile-input-height: 45px;
                --bottom-nav-height: 0px;
            }

            body {
                padding-bottom: var(--bottom-nav-height);
            }

            .container {
                flex-direction: column;
                padding: 0;
                gap: 0;
                height: 100vh;
                /* dvh je tady KLICOVE: tohle je jedina vyska, ktera na mobilu
                   o chatu rozhoduje (.main-chat ma flex:1, takze jeho vlastni
                   height se ignoruje). Se 100vh koncil scroller ~110 px pod
                   ohybem iOS Safari a u kratke konverzace pak scrollHeight
                   == clientHeight, takze scroll nedelal vubec nic. */
                height: 100dvh;
                overflow: hidden;
            }

            .chat-history {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%; /* Full width instead of 80% */
                height: 100%;
                max-width: none; /* Remove max-width limit */
                z-index: 200;
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
                background: var(--card-background);
                border-radius: 0;
                box-shadow: none;
                display: flex;
                flex-direction: column;
            }
            
            .chat-history.active {
                transform: translateX(0);
            }
            
            /* Make header more prominent */
            .history-header {
                display: flex;
                padding: 15px;
                background: var(--primary-color);
                color: white;
                align-items: center;
                min-height: 60px;
            }
            
            .history-header h2 {
                color: white;
                margin: 0;
                flex: 1;
                text-align: center;
                font-size: 1.3em;
                font-weight: 500;
            }
            
            /* Make new chat button more prominent */
            .history-actions {
                display: block;
                padding: 15px;
                border-bottom: 1px solid var(--border-color);
                background: var(--background-color);
            }
            
            .new-chat-btn {
                width: 100%;
                padding: 15px;
                border-radius: 12px;
                font-size: 1.1em;
                font-weight: 500;
            }
            
            /* Better styling for history list */
            .history-list {
                flex: 1;
                overflow-y: auto;
                padding: 15px;
                background: var(--card-background);
            }
            
            /* Improve chat item appearance */
            .chat-item {
                padding: 12px;
                margin-bottom: 10px;
                background: var(--input-background);
                border-radius: 12px;
                transition: all 0.2s ease;
            }
            
            .chat-item .title {
                font-size: 1em;
                font-weight: 500;
                margin-bottom: 5px;
            }
            
            .chat-item .preview {
                font-size: 0.85em;
                margin-top: 4px;
                color: var(--text-muted);
            }
            
            .chat-item .date {
                font-size: 0.8em;
                color: var(--text-muted);
                margin-top: 4px;
            }
            
            /* Better back button styling */
            .back-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                border: none;
                color: white;
                font-size: 1.3em;
                cursor: pointer;
                padding: 10px;
                width: 44px;
                height: 44px;
            }
            
            .chat-item:hover {
                background: var(--hover-color);
                transform: translateX(5px);
            }

            .main-chat {
                height: calc(100vh - var(--bottom-nav-height));
                /* dvh: 100vh na iOS pocita i listu prohlizece a spodek
                   chatu koncil pod ohybem / pod fixnim pruhem paywallu */
                height: calc(100dvh - var(--bottom-nav-height));
                width: 100%;
                border-radius: 0;
                display: flex;
                flex-direction: column;
            }

            .chat-header {
                padding: 8px 12px;
                min-height: 45px;
            }

            .chat-header h2 {
                font-size: 1em;
            }

            .chat-header-btn.menu-btn {
                display: flex; /* Show on mobile */
                margin-right: 8px;
            }
            
            .chat-header-btn {
                width: 36px;
                height: 36px;
                font-size: 1.1em;
            }
            
            /* Add animation for menu button */
            .chat-header-btn.menu-btn .bar {
                display: block;
                width: 18px;
                height: 2px;
                background: white; /* Keep white for visibility on pink header */
                position: relative;
                transition: all 0.3s ease;
            }
            
            .chat-header-btn.menu-btn .bar::before,
            .chat-header-btn.menu-btn .bar::after {
                content: '';
                position: absolute;
                left: 0;
                width: 18px;
                height: 2px;
                background: white; /* Keep white for visibility on pink header */
                transition: all 0.3s ease;
            }
            
            .chat-header-btn.menu-btn .bar::before {
                top: -6px;
            }
            
            .chat-header-btn.menu-btn .bar::after {
                bottom: -6px;
            }
            
            /* Animated hamburger when drawer is open */
            .chat-header-btn.menu-btn.active .bar {
                background: transparent;
            }
            
            .chat-header-btn.menu-btn.active .bar::before {
                transform: rotate(45deg);
                top: 0;
            }
            
            .chat-header-btn.menu-btn.active .bar::after {
                transform: rotate(-45deg);
                bottom: 0;
            }

            .chat-messages {
                flex: 1;
                padding: 12px;
                padding-bottom: 70px; /* Make room for input */
                overflow-y: auto;
            }

            .message {
                margin: 6px 0;
                gap: 6px;
                max-width: 90%;
            }

            .message-avatar {
                width: 28px;
                height: 28px;
                border-width: 1px;
            }

            .message-content {
                padding: 8px 12px;
                font-size: 0.9em;
                line-height: 1.35;
                border-radius: 14px;
            }

            .user-message .message-content {
                border-bottom-right-radius: 4px;
            }

            .bot-message .message-content {
                border-bottom-left-radius: 4px;
            }

            .chat-input {
                position: fixed;
                bottom: 0px;
                left: 0;
                right: 0;
                padding: 8px 10px;
                background: var(--card-background);
                z-index: 101;
                margin: 0;
                box-shadow: none;
                border-top: 1px solid var(--border-color);
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .chat-input input {
                height: 40px;
                padding: 8px 16px;
                font-size: 0.95em;
            }

            /* Odeslani drzi 46x46 jako darek - mobilni zmensovani zruseno
               (Adam 25. 8.: "at je tlacitko na odeslani stejne jako na darky") */
            .send-button i {
                font-size: 1.2em;
            }

            .profile-btn {
                padding: 4px 6px;
                font-size: 0.75em;
                border-radius: 12px;
                height: 26px;
            }

            .typing-indicator {
                margin: 12px 0;
                gap: 10px;
            }
            
            .typing-avatar {
                width: 40px;
                height: 40px;
            }
            
            .typing-bubble {
                padding: 14px 18px;
                border-radius: 18px 18px 18px 4px;
                min-width: 65px;
            }

            .typing-indicator .dot {
                width: 8px;
                height: 8px;
            }

            .back-btn {
                display: flex; /* Show on mobile */
                align-items: center;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            :root {
                --mobile-header-height: 35px;
                --mobile-input-height: 40px;
            }

            .chat-history {
                height: 30vh;
                min-height: 140px;
            }

            .history-header {
                min-height: 35px;
            }

            .history-header img {
                width: 24px;
                height: 24px;
            }

            .profile-btn {
                padding: 3px 5px;
                font-size: 0.7em;
                height: 24px;
            }

            .chat-item {
                padding: 4px 6px;
                margin-bottom: 2px;
            }

            .chat-item .title {
                font-size: 0.85em;
            }

            .chat-item .preview {
                font-size: 0.75em;
                margin-bottom: 2px;
            }

            .chat-item .date {
                font-size: 0.7em;
            }

            .message {
                margin: 4px 0;
                gap: 5px;
                max-width: 94%;
            }

            .message-avatar {
                width: 24px;
                height: 24px;
                border-width: 1px;
            }

            .message-content {
                padding: 6px 10px;
                font-size: 0.85em;
                line-height: 1.3;
                border-radius: 12px;
            }

            .chat-input {
                padding: 8px;
            }

            .chat-input input {
                /* 30 px vedle 46px tlacitek vypadalo rozbite a bylo pod
                   doporucenym dotykovym cilem; 16px pismo brani tomu,
                   aby iOS pri fokusu zoomoval stranku */
                padding: 10px 14px;
                font-size: 16px;
                height: 46px;
            }

            /* Odeslani drzi 46x46 jako darek - mobilni zmensovani zruseno
               (Adam 25. 8.: "at je tlacitko na odeslani stejne jako na darky") */
            .send-button i {
                font-size: 1.2em;
            }

            /* Payment modal adjustments */
            .payment-requirement-card {
            position: relative;
                width: 95%;
                max-height: 80vh;
                border-radius: 18px;
            }

            .card-header {
                padding: 20px 16px 14px;
                border-radius: 18px 18px 0 0;
            }

            .card-header i {
                font-size: 1.8em;
                margin-bottom: 8px;
            }

            .card-header h2 {
                font-size: 1.4em;
                margin: 0 0 6px 0;
            }

            .card-content {
                padding: 16px;
            }

            .premium-features li {
                font-size: 0.9em;
                margin-bottom: 8px;
                padding: 0;
            }

            .price-block .amount {
                font-size: 2.2em;
            }

            .upgrade-button {
                padding: 13px 20px;
                font-size: 1.05em;
            }

            .paywall-photo-teaser {
                height: 170px;
            }
        }

        @media (max-width: 360px) {
            .payment-requirement-card {
                width: 98%;
                max-height: 85vh;
            }

            .paywall-photo-teaser {
                height: 140px;
            }

            .card-header {
                padding: 16px 12px 12px;
            }

            .card-header i {
                font-size: 1.6em;
            }

            .card-header h2 {
                font-size: 1.2em;
            }

            .card-content {
                padding: 14px;
            }

            .premium-features li {
                font-size: 0.85em;
                margin-bottom: 6px;
            }

            .price-block .amount {
                font-size: 2em;
            }

            .upgrade-button {
                padding: 12px 16px;
                font-size: 1em;
            }
        }

        /* Message Styles */
        .message {
            max-width: 75%;
            display: flex;
            align-items: flex-end;
            gap: 8px;
            margin: 10px 0;
            position: relative;
        }

        /* Back button - hidden on desktop by default */
        .back-btn {
            background: transparent;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
            padding: 8px;
            display: none; /* Hide on desktop */
        }

        .bot-message {
            align-self: flex-start;
            margin-right: auto;
        }

        .user-message {
            align-self: flex-end;
            margin-left: auto;
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            min-width: 32px;
            border-radius: 50%;
            border: 1.5px solid var(--primary-color);
        }

        .bot-message .message-content {
            background: var(--message-bot-bg);
            color: var(--text-color);
            border-bottom-left-radius: 4px;
            margin-left: 0;
        }

        .user-message .message-content {
            background: var(--message-user-bg);
            color: white;
            border-bottom-right-radius: 4px;
            margin-right: 0;
            box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
        }

        .message-content {
            padding: 12px 16px;
            border-radius: 18px;
            font-size: 0.95em;
            line-height: 1.4;
            overflow: hidden;
            max-width: 100%;
            word-wrap: break-word;
            animation: messageSlideIn 0.3s ease-out;
            position: relative;
        }
        
        /* Smooth message appearance animation */
        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.95);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        /* Add message reaction hover effect */
        .message-content:hover {
            transform: translateY(-1px);
            transition: transform 0.2s ease;
        }

        .message-content img {
            max-width: 100%;
        }

        .user-message::after {
            right: 8px;
        }

        .bot-message::after {
            left: 8px;
        }

        .message::after {
            content: attr(data-time);
            position: absolute;
            bottom: -16px;
            font-size: 0.7em;
            color: var(--text-muted);
            opacity: 0.7;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Enhanced Typing Indicator with Avatar */
        .typing-indicator {
            display: none;
            align-items: flex-end;
            margin: 15px 0;
            gap: 12px;
            animation: fadeIn 0.3s ease-in-out;
        }
        
        .typing-indicator.active {
            display: flex;
        }
        
        .typing-avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            border: 2px solid var(--primary-color);
            box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .typing-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .typing-bubble {
            background: var(--message-bot-bg);
            padding: 16px 20px;
            border-radius: 20px 20px 20px 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            min-width: 70px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
            position: relative;
        }
        
        /* Subtle glow effect */
        .typing-bubble::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 20px 20px 20px 4px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            opacity: 0;
            animation: glowPulse 2s ease-in-out infinite;
            z-index: -1;
        }
        
        @keyframes glowPulse {
            0%, 100% { opacity: 0; }
            50% { opacity: 0.3; }
        }

        .dot {
            width: 10px;
            height: 10px;
            background: linear-gradient(135deg, var(--primary-color), #FF1493);
            border-radius: 50%;
            animation: typingBounce 1.4s infinite ease-in-out;
            box-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
        }

        .dot:nth-child(1) { animation-delay: 0s; }
        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }

        @keyframes typingBounce {
            0%, 60%, 100% { 
                transform: translateY(0) scale(1);
                opacity: 0.7;
            }
            30% { 
                transform: translateY(-10px) scale(1.2);
                opacity: 1;
            }
        }
        
        @keyframes bounce {
            0%, 60%, 100% { 
                transform: translateY(0) scale(1);
            }
            30% { 
                transform: translateY(-8px) scale(1.15);
            }
        }

        .history-actions {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
        }

        .new-chat-btn {
            width: 100%;
            padding: 12px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .new-chat-btn:hover {
            background: #ff4da6;
        }

        .chat-item.active {
            background: var(--primary-color);
            color: white;
        }

        .chat-item-content {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .chat-item .preview {
            font-size: 0.8em;
            opacity: 0.7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .profile-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: var(--primary-color);
            color: white;
            border-radius: 25px;
            text-decoration: none;
            transition: all 0.3s ease;
            margin-left: auto;
        }

        .profile-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
            background: #ff4da6;
        }

        .profile-btn i {
            font-size: 1.2em;
        }

        .profile-text {
            font-size: 0.9em;
            font-weight: 500;
        }

        /* Add subtle bounce animation on hover */
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-2px); }
        }

        .profile-btn:hover i {
            animation: bounce 0.5s ease infinite;
        }

        @media (max-width: 768px) {
            .profile-btn {
                padding: 6px 12px;
            }
            
            .profile-text {
                font-size: 0.8em;
            }
        }

        .online-status .dot {
            width: 8px;
            height: 8px;
            background: #4CAF50;
            border-radius: 50%;
            display: inline-block;
            margin-right: 5px;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
            }
        }

        .eliska-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--primary-color);
            box-shadow: 0 2px 8px rgba(255,105,180,0.3);
            transition: transform 0.3s ease;
        }

        .eliska-avatar:hover {
            transform: scale(1.05);
        }

        /* Fallback background for image loading */
        .eliska-avatar {
            background: #FFF0F5;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        .subscription-check-loading {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--card-background);
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
            z-index: 1000;
        }

        .loading-spinner {
            width: 20px;
            height: 20px;
            border: 2px solid #f3f3f3;
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .subscription-status-toast,
        .subscription-error-toast {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideIn 0.3s ease;
            z-index: 1000;
        }

        .subscription-status-toast {
            background: #e8f5e9;
            color: #2e7d32;
        }

        .subscription-error-toast {
            background: #ffebee;
            color: #c62828;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* Payment requirement overlay styles */
        .payment-requirement-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            backdrop-filter: blur(8px);
            padding: 20px;
            overflow-y: auto;
        }

        .payment-requirement-card {
            background: linear-gradient(160deg, #2a2a3e 0%, #1e1e2e 100%);
            border: 1px solid rgba(200, 149, 108, 0.2);
            border-radius: 20px;
            width: 90%;
            max-width: 380px;
            box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
            animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
            margin: auto;
            position: relative;
        }

        .card-header {
            background: linear-gradient(145deg, #c8956c, #a87b5a 40%, #3a2a4a 100%);
            padding: 24px 24px 16px;
            text-align: center;
            color: white;
            position: relative;
        }

        .tips-strip {
            position: relative;
            padding: 10px 34px 10px 12px;
            background: rgba(255,105,180,.07);
            border-bottom: 1px solid rgba(255,105,180,.14);
        }
        .tips-track {
            display: flex; gap: 8px; overflow-x: auto;
            scrollbar-width: none; -webkit-overflow-scrolling: touch;
        }
        .tips-track::-webkit-scrollbar { display: none; }
        .tip-card {
            flex: 0 0 auto; max-width: 230px;
            background: var(--card-background, #fff);
            border: 1px solid rgba(255,105,180,.22);
            border-radius: 12px; padding: 9px 12px;
            font-size: .8rem; line-height: 1.4;
            text-align: left;
            font-family: inherit; color: inherit;
        }
        /* Styly .world-entry-btn a .world-link odstraneny: obe tlacitka
           zmizela pri prestavbe panelu (commit 4a2b455) a CSS po nich
           zustalo viset jako mrtvy kod. */

        .tips-title {
            font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
            opacity: .55; margin: 0 0 7px 2px;
        }
        .tip-card b { display: block; font-size: .84rem; margin-bottom: 2px; }
        .tip-card span { opacity: .72; }
        .tips-close {
            position: absolute; top: 6px; right: 8px;
            background: none; border: none; font-size: 1.3rem;
            line-height: 1; color: #999; cursor: pointer; padding: 2px 6px;
        }


        .modal-google-divider {
            display: flex; align-items: center; gap: 10px;
            margin: 14px 0 10px; color: #999; font-size: .82rem;
        }
        .modal-google-divider::before, .modal-google-divider::after {
            content: ""; flex: 1; height: 1px; background: #e2e2e2;
        }
        .modal-google-btn {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; min-height: 48px; padding: 12px;
            border: 1px solid #dadce0; border-radius: 8px;
            background: #fff; color: #3c4043;
            font-size: .95rem; font-weight: 500; text-decoration: none;
            box-sizing: border-box;
        }
        .modal-google-btn:hover { background: #f8f9fa; }
        .modal-google-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

        /* Blurred teaser inside the registration modal */
        #paywallBar {
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
            background: linear-gradient(135deg, #FF69B4, #FF1493);
            padding: 12px 14px; box-shadow: 0 -4px 20px rgba(0,0,0,.3);
        }
        .paywall-bar-inner {
            display: flex; align-items: center; justify-content: center;
            gap: 12px; flex-wrap: wrap; max-width: 640px; margin: 0 auto;
            color: #fff; font-size: .9rem; font-weight: 500;
        }
        .paywall-bar-inner button {
            background: #fff; color: #FF1493; border: none; border-radius: 30px;
            padding: 9px 20px; font-family: inherit; font-size: .9rem;
            font-weight: 700; cursor: pointer; min-height: 42px; white-space: nowrap;
        }

        .modal-close {
            position: absolute; top: 10px; right: 12px; z-index: 5;
            width: 34px; height: 34px; border-radius: 50%;
            background: rgba(0,0,0,.45); color: #fff; border: none;
            font-size: 1.5rem; line-height: 1; cursor: pointer;
            display: grid; place-items: center; padding: 0;
        }
        .modal-close:hover { background: rgba(0,0,0,.65); }
        /* U registrace ma byt krizek nenapadny - neni to cesta, kterou chceme
           nabizet, jen pojistka */
        .registration-modal .modal-close {
            width: 24px; height: 24px; font-size: 1.05rem;
            background: rgba(0,0,0,.22); opacity: .7;
        }

        .reg-photo-teaser {
            position: relative;
            width: calc(100% + 60px);
            margin: -30px -30px 18px;
            height: 150px;
            overflow: hidden;
            border-radius: 20px 20px 0 0;
        }
        .reg-photo-teaser img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
            filter: blur(2px);   /* fotka uz prichazi rozmazana ze serveru */
            transform: scale(1.15);
        }
        .reg-photo-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,.25);
            color: #fff;
            font-weight: 600;
            font-size: .95rem;
            text-shadow: 0 2px 8px rgba(0,0,0,.4);
        }
        .password-hint {
            font-size: .8rem;
            opacity: .65;
            margin: -6px 0 4px;
            text-align: left;
        }

        /* Dedicated blurred teaser photo section */
        .paywall-photo-teaser {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .paywall-photo-teaser img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
            filter: blur(2px);   /* fotka uz prichazi rozmazana ze serveru */
            transform: scale(1.18);
            animation: photoReveal 0.8s ease-out;
        }

        .paywall-photo-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                rgba(42, 42, 62, 0.15) 0%,
                rgba(42, 42, 62, 0.1) 50%,
                rgba(30, 30, 46, 0.7) 100%
            );
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .paywall-photo-overlay i {
            font-size: 2em;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
            animation: lockPulse 2s ease-in-out infinite;
        }

        .paywall-photo-overlay span {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 600;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        @keyframes photoReveal {
            /* Konec animace musi sedet se statickou hodnotou v .paywall-photo-teaser img,
               jinak by fotku na konci rozmazala zpatky na puvodnich 26 px. */
            from { opacity: 0; filter: blur(10px); transform: scale(1.3); }
            to { opacity: 1; filter: blur(2px); transform: scale(1.18); }
        }

        @keyframes lockPulse {
            0%, 100% { transform: scale(1); opacity: 0.9; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .card-header i {
            font-size: 2em;
            margin-bottom: 10px;
            display: block;
            opacity: 0.9;
        }

        .card-header h2 {
            font-size: 1.6em;
            margin: 0 0 8px 0;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .card-header .limit-message {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
            line-height: 1.4;
        }

        .card-content {
            padding: 24px 24px 20px;
            overflow-y: auto;
            max-height: calc(100vh - 200px);
        }

        .limit-message {
            text-align: center;
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .special-offer-badge {
            background: linear-gradient(135deg, #FF4E50, #F9D423);
            color: white;
            padding: 10px 15px;
            border-radius: 30px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
            font-size: 1.1em;
            position: relative;
            box-shadow: 0 4px 10px rgba(255, 78, 80, 0.3);
            transform: rotate(-2deg);
        }

        .special-offer-badge span {
            display: block;
            animation: pulse 1.5s infinite;
        }

        /* Price Block */
        .price-block {
            background: transparent;
            padding: 4px 0 0 0;
            margin: 0 0 20px 0;
            text-align: center;
        }

        .price-main {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 6px;
        }

        .price-block .amount {
            font-size: 2.8em;
            font-weight: 800;
            color: #fff;
            letter-spacing: -0.02em;
        }

        .price-block .period {
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 400;
        }

        .price-anchor {
            font-size: 0.85em;
            color: rgba(255, 255, 255, 0.4);
            margin: 4px 0 0 0;
            font-style: normal;
        }

        /* Trust Signals */
        .trust-signals {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 4px;
            font-size: 0.78em;
            color: rgba(255, 255, 255, 0.35);
        }

        .trust-signals i {
            margin-right: 4px;
        }

        /* Button */
        .button-container {
            text-align: center;
            margin: 0 0 22px 0;
        }

        .upgrade-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 15px 24px;
            background: linear-gradient(135deg, #c8956c, #b07a52);
            color: #fff;
            font-size: 1.15em;
            font-weight: 700;
            border: none;
            border-radius: 14px;
            text-decoration: none;
            cursor: pointer;
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 4px 20px rgba(200, 149, 108, 0.35);
        }

        .upgrade-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 24px rgba(200, 149, 108, 0.45);
        }

        .upgrade-button:active {
            transform: translateY(0);
        }

        .upgrade-button span {
            color: #fff;
        }

        .upgrade-button i {
            font-size: 0.9em;
            color: #fff;
        }

        .premium-features {
            list-style: none;
            padding: 0;
            margin: 0 0 16px 0;
        }

        .premium-features li {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 0.95em;
            color: rgba(255, 255, 255, 0.75);
            padding: 0;
        }

        .premium-features li i {
            color: #c8956c;
            font-size: 1em;
            width: 20px;
            text-align: center;
            flex-shrink: 0;
        }
        .premium-features li b { color: #c8956c; font-weight: 600; }

        .price-tag {
            text-align: center;
            margin: 20px 0;
            padding: 20px;
            background: rgba(255, 105, 180, 0.1);
            border-radius: 16px;
            border: 1px solid rgba(255, 105, 180, 0.2);
            position: relative;
        }

        .original-price {
            display: inline-block;
            color: #888;
            font-size: 1.3em;
            font-weight: 500;
            text-decoration: line-through;
            margin-right: 8px;
            position: relative;
            top: -8px;
        }

        .discount-badge {
            background: #FF4E50;
            color: white;
            font-size: 0.8em;
            padding: 4px 10px;
            border-radius: 20px;
            font-weight: bold;
            position: absolute;
            top: -10px;
            right: -10px;
            transform: rotate(5deg);
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        .amount {
            font-size: 2.2em;
            font-weight: 700;
            color: var(--primary-color);
            display: block;
            line-height: 1;
        }

        .period {
            font-size: 1em;
            color: #666;
            margin-top: 5px;
        }

        .upgrade-button {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            border-radius: 30px;
            font-size: 1.2em;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            transition: all 0.3s ease;
            margin-top: 20px;
            position: sticky;
            bottom: 0;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        }

        .offer-timer {
            text-align: center;
            margin-top: 12px;
            font-size: 0.9em;
            color: #666;
        }

        .offer-timer span {
            color: #FF4E50;
            font-weight: bold;
        }

        .upgrade-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 105, 180, 0.4);
        }

        .upgrade-button i {
            transition: transform 0.3s ease;
        }

        .upgrade-button:hover i {
            transform: translateX(5px);
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        @keyframes popIn {
            0% { 
                opacity: 0;
                transform: translateY(30px) scale(0.95);
            }
            100% { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        body.payment-popup-active {
            overflow: hidden;
        }

        /* Special photo styling */
        .special-photo {
            max-width: 250px;
            height: auto;
            border-radius: 12px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            display: block;
        }

        .special-photo:hover {
            transform: scale(1.05);
            cursor: pointer;
        }

        /* Photo modal */
        .photo-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            animation: fadeIn 0.3s ease;
        }

        .photo-modal-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
        }

        .full-size-photo {
            max-width: 100%;
            max-height: 80vh;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        }

        .close-modal {
            position: absolute;
            top: -20px;
            right: -20px;
            background: var(--card-background);
            border: 2px solid var(--primary-color);
            color: var(--text-color);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(255, 105, 180, 0.4);
            transition: transform 0.2s ease;
        }

        .close-modal:hover {
            transform: scale(1.1);
        }

        /* Add mobile menu styles */
        .mobile-nav-toggle {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--primary-color);
            color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            border: none;
            z-index: 100;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .mobile-nav-toggle:hover {
            transform: scale(1.05);
            background: #ff4da6;
        }

        .bottom-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 60px;
            background: var(--card-background);
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 100;
            align-items: center;
            justify-content: space-around;
            border-top: 1px solid var(--border-color);
            margin-top: 0;
        }

        .bottom-nav-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            text-decoration: none;
            padding: 8px;
            transition: all 0.2s ease;
        }

        .bottom-nav-btn i {
            font-size: 1.4em;
            margin-bottom: 4px;
        }

        .bottom-nav-btn span {
            font-size: 0.7em;
        }

        .bottom-nav-btn.active {
            color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .chat-input {
                margin: 0 !important;
                bottom: 0px !important;
                border-bottom: 0 !important;
            }
        }

        /* Add overlay for drawer background */
        .drawer-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 199;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .drawer-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* Notification styles */
        .notification {
            background: var(--card-background);
            color: var(--text-color);
            border-left: 4px solid var(--primary-color);
        }

        .notification.error {
            border-left-color: #dc3545;
        }

        .notification.success {
            border-left-color: #28a745;
        }

        /* Enhanced Mobile Chat History UI for better appearance */
        @media (max-width: 768px) {
            /* Full viewport history panel */
            .chat-history {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100vh;
                border-radius: 0;
                background: var(--background-color);
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                overflow: hidden;
            }
            
            /* Pink header with back button and title */
            .history-header {
                padding: 15px 20px;
                display: flex;
                align-items: center;
                background: var(--primary-color);
                min-height: 60px;
                position: sticky;
                top: 0;
                z-index: 10;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            }
            
            .history-header h2 {
                font-size: 1.3em;
                font-weight: 600;
                flex: 1;
                text-align: center;
                color: white;
                margin: 0;
            }
            
            /* Back button as a circle */
            .back-btn {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                background: rgba(255,255,255,0.15);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                border: none;
                font-size: 1.2em;
                cursor: pointer;
            }
            
            /* Correct the New conversation button */
            .history-actions {
                padding: 15px;
                background: var(--background-color);
                border-bottom: none;
                margin-bottom: 0;
            }
            
            .new-chat-btn {
                width: 100%;
                padding: 16px;
                border-radius: 30px;
                font-size: 1.1em;
                font-weight: 500;
                background: var(--primary-color);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;
                box-shadow: 0 2px 10px rgba(255,105,180,0.25);
            }
            
            /* Improved conversation list */
            .history-list {
                flex: 1;
                overflow-y: auto;
                padding: 15px;
                background: var(--background-color);
            }
            
            /* Conversation item styling */
            .chat-item {
                background: var(--card-background);
                border-radius: 16px;
                padding: 15px;
                margin-bottom: 15px;
                position: relative;
                overflow: hidden;
                box-shadow: 0 2px 6px rgba(0,0,0,0.1);
            }
            
            /* No hover effects on mobile */
            .chat-item:hover {
                transform: none;
            }
            
            /* Active conversation styling */
            .chat-item.active {
                background: var(--card-background);
                border-left: 4px solid var(--primary-color);
            }
            
            /* Conversation content layout */
            .chat-item-content {
                display: flex;
                flex-direction: column;
                gap: 6px;
            }
            
            /* Title styling */
            .chat-item .title {
                font-size: 1.1em;
                font-weight: 600;
                color: var(--text-color);
            }
            
            /* Preview text styling */
            .chat-item .preview {
                font-size: 0.9em;
                color: var(--text-muted);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 90%;
            }
            
            /* Date with time styling */
            .chat-item .date {
                font-size: 0.8em;
                color: var(--text-muted);
                text-align: right;
                margin-top: 5px;
            }
            
            /* Better trash button */
            .delete-btn {
                position: absolute;
                right: 10px;
                top: 10px;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: rgba(220, 53, 69, 0.1);
                color: #dc3545;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity: 0.8;
            }
            
            /* Empty state styling */
            .empty-history {
                text-align: center;
                padding: 40px 20px;
                color: var(--text-muted);
            }
            
            .empty-history i {
                font-size: 3.5em;
                margin-bottom: 20px;
                color: var(--primary-color);
                opacity: 0.5;
            }
            
            .empty-history p {
                margin-bottom: 25px;
                font-size: 1.1em;
            }
            
            /* Fix drawer overlay */
            .drawer-overlay.active {
                z-index: 199;
            }
            
            /* New message timestamp styling - matching design */
            .message::after {
                content: attr(data-time);
                position: absolute;
                bottom: -20px;
                font-size: 0.7em;
                color: var(--text-muted);
                opacity: 0.7;
            }
            
            .user-message::after {
                right: 8px;
            }
            
            .bot-message::after {
                left: 8px;
            }
        }

        /* Extra small screens */
        @media (max-width: 360px) {
            .history-header {
                padding: 12px 15px;
                min-height: 55px;
            }
            
            .history-header h2 {
                font-size: 1.2em;
            }
            
            .back-btn {
                width: 36px;
                height: 36px;
            }
            
            .new-chat-btn {
                padding: 14px;
                font-size: 1em;
            }
            
            .chat-item {
                padding: 12px;
            }
            
            .chat-item .title {
                font-size: 1em;
            }
        }

        /* Profile icon styling for desktop */
        @media (min-width: 769px) {
            .profile-link {
                display: flex;
                width: 42px;
                height: 42px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
                justify-content: center;
                align-items: center;
                transition: all 0.3s ease;
                box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3);
                position: relative;
            }
            
            .profile-link:hover {
                transform: translateY(-2px) scale(1.05);
                box-shadow: 0 4px 15px rgba(255, 105, 180, 0.5);
                background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
            }
            
            .profile-link i {
                font-size: 1.2em;
                color: white;
            }
            
            /* Add a subtle pulse animation */
            @keyframes profilePulse {
                0%, 100% { box-shadow: 0 2px 10px rgba(255, 105, 180, 0.3); }
                50% { box-shadow: 0 2px 15px rgba(255, 105, 180, 0.5); }
            }
            
            .profile-link:hover {
                animation: profilePulse 2s ease-in-out infinite;
            }
        }

        /* Show profile icon on mobile */
        @media (max-width: 768px) {
            .profile-link {
                display: flex;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                align-items: center;
                justify-content: center;
                transition: background-color 0.2s ease;
            }
            
            .profile-link:active {
                background-color: rgba(255, 255, 255, 0.2);
            }
        }

        /* Improved responsive payment popup */
        @media (max-width: 768px) {
            .payment-requirement-overlay {
                padding: 0;
                align-items: flex-end;
            }

            .payment-requirement-card {
                width: 100%;
                max-width: 100%;
                border-radius: 20px 20px 0 0;
                border: none;
                margin-bottom: 0;
                max-height: 90vh;
                animation: slideUpPayment 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .card-header {
                padding: 24px 20px 16px;
                border-radius: 20px 20px 0 0;
            }

            .card-header h2 {
                font-size: 1.4em;
            }

            .card-content {
                padding: 20px;
                max-height: calc(90vh - 100px);
                overflow-y: auto;
            }

            .premium-features li {
                font-size: 0.9em;
                padding: 0;
                margin-bottom: 10px;
                gap: 10px;
            }

            .price-block .amount {
                font-size: 2.4em;
            }

            .trust-signals {
                gap: 12px;
                font-size: 0.72em;
            }

            /* Drag indicator at top of modal */
            .payment-requirement-card::before {
                content: '';
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                width: 36px;
                height: 4px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 2px;
                z-index: 10;
            }

            @supports (-webkit-touch-callout: none) {
                .payment-requirement-card {
                    padding-bottom: env(safe-area-inset-bottom, 15px);
                }
            }

            @keyframes slideUpPayment {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }
        }

        @media (max-width: 480px) {
            .payment-requirement-card {
                max-height: 92vh;
            }

            .card-header {
                padding: 20px 16px 14px;
            }

            .card-content {
                padding: 16px;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }

            .premium-features li {
                font-size: 0.88em;
            }

            .price-block .amount {
                font-size: 2.2em;
            }

            .upgrade-button {
                padding: 14px 20px;
                font-size: 1.05em;
            }
        }

        /* Add swipe dismiss functionality */
        .payment-requirement-card.swiping {
            transition: transform 0.2s ease;
        }

        /* Make the upgrade button fixed at the bottom of the payment popup for easier access */
        @media (max-width: 768px) {
            /* Prevent scrolling on body when payment popup is active */
            body.payment-popup-active {
                overflow: hidden !important;
                position: fixed !important;
                width: 100% !important;
                height: 100% !important;
            }

            /* Ensure the payment overlay takes up the full screen */
            .payment-requirement-overlay {
                z-index: 10000 !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100dvh !important;
                overflow: hidden !important;
                display: flex !important;
                align-items: flex-end !important;
                justify-content: center !important;
            }

            /* Obsah karty byl uriznuty a nedal se dorolovat: .card-content mel
               max-height: calc(85vh - 120px), jenze nad nim sedi hlavicka
               (~130 px) a fotka (200 px), dohromady 330 px. Rezerva byla o dve
               stovky pixelu mensi, nez ma byt, box se proto nikdy nepretekl,
               scroll se nezapnul a spodek okna zmizel pod overflow:hidden.
               Zmereno na 375x659: 119 px obsahu bylo natrvalo nedostupnych -
               vcetne seznamu vyhod a radku o bezpecne platbe.

               Ted je karta flex sloupec: hlavicka a fotka si drzi svou vysku,
               obsah dostane presne to, co zbyde, a roluje sam. */
            .payment-requirement-card {
                padding-bottom: 20px !important;
                overflow: hidden !important;
                max-height: 85vh !important;
                max-height: 85dvh !important;
                display: flex !important;
                flex-direction: column !important;
                position: relative !important;
                width: 100% !important;
                margin-bottom: 0 !important;
                z-index: 10001 !important;
            }

            .payment-requirement-card > .card-header,
            .payment-requirement-card > .paywall-photo-teaser {
                flex: 0 0 auto !important;
            }

            .card-content {
                padding-bottom: 20px !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                max-height: none !important;
                position: relative !important;
            }

            /* Proporce. I kdyz uz obsah rolovat sel, bylo z 560px karty
               60 % dekorace (hlavicka 138 + fotka 200) a na cenu, tlacitko
               a vyhody zbylo 202 px, do kterych se clovek musel doscrollovat.
               Zmereno na 375x659; po teto uprave se vejde uplne vsechno
               a rolovat netreba vubec. */
            .payment-requirement-card {
                max-height: 92dvh !important;
            }
            .paywall-photo-teaser {
                height: min(140px, 15dvh) !important;
            }
            .card-header {
                padding: 14px 20px 12px !important;
            }
            .card-header h2 {
                font-size: 1.22em !important;
                margin: 6px 0 4px !important;
            }
            .card-header i {
                font-size: 1.5em !important;
            }
            .card-header .limit-message {
                font-size: .84em !important;
            }
            .card-content {
                padding-top: 14px !important;
            }
        }

        /* Fix zooming issue on input focus on mobile devices */
        @media (max-width: 768px) {
            /* Prevent zooming when focusing on input field */
            .chat-input input {
                font-size: 16px !important; /* Minimum font size to prevent zoom on iOS */
            }
            
            /* Ensure the viewport doesn't zoom */
            meta[name="viewport"] {
                content: "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
            }
            
            /* Maintain chat visibility when keyboard appears */
            .chat-messages {
                height: calc(100vh - 120px); /* Adjust based on your header and input sizes */
                position: relative;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            /* Fixed position for input but allow content to scroll behind it */
            .chat-input {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: var(--card-background);
                padding: 10px;
                z-index: 100;
            }
            
            /* Add additional JS to handle keyboard appearance */
        }

        /* Make header fixed at the top on mobile */
        @media (max-width: 768px) {
            .chat-header {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 100;
                box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            }
            
            /* Adjust the chat messages area to account for fixed header */
            .chat-messages {
                margin-top: 45px; /* Height of the header */
                padding-top: 15px;
                height: calc(100vh - 45px - 60px); /* Viewport height minus header and input heights */
            }
            
            /* Ensure main-chat container allows for fixed header */
            .main-chat {
                padding-top: 0;
                margin-top: 0;
            }

            /* Odsazeni pod fixni hlavicku mely jen .chat-messages, takze
               vse, co je nad nimi (pas napoved, banner s poctem zprav),
               se schovalo za hlavicku. Odsazeni dostane prvni z nich,
               dalsi uz navazuje normalne. */
            .tips-strip,
            .anonymous-banner {
                /* hlavicka je podle obsahu 52-63 px vysoka, 68 ji spolehlive mine */
                margin-top: 68px;
            }

            /* Odsazeni banner ztraci jen kdyz je pas napoved OPRAVDU videt.
               Driv stacilo, ze je v DOM (byt display:none), a banner tim
               zmizel pod hlavickou uplne. */
            .tips-strip.je-videt + .anonymous-banner {
                margin-top: 0;
            }

            /* Oznameni o zamitnute karte stoji uplne nahore, takze odsazeni
               pod hlavicku patri jemu a to, co nasleduje, uz navazuje.
               (Pas napoved byva schovany, takze na nej se spolehnout neda.) */
            #graceBanner {
                margin-top: 68px;
            }

            #graceBanner ~ .tips-strip,
            #graceBanner ~ .anonymous-banner {
                margin-top: 0;
            }

            /* Zpravy mely pevnou vysku pocitanou bez banneru, takze s nim
               obsah pretekal a cela stranka se posunula pod hlavicku.
               Pozor: NEplati jen pro anonymy - tridu .anonymous-banner ma
               i #freeBanner prihlaseneho neplatice, takze pravidlo dopada
               i na nej (a prebiji pripadne height u .chat-messages). */
            .tips-strip.je-videt + .chat-messages,
            .anonymous-banner + .chat-messages,
            .srdicka-vysvetleni + .chat-messages {
                margin-top: 0 !important;
                height: auto !important;
                flex: 1 1 auto;
                min-height: 0;
            }
            
            /* Ensure proper stacking with other fixed elements */
            .chat-input {
                z-index: 99;
            }
            
            /* Fix history panel layout with fixed header */
            .chat-history {
                top: 0;
                padding-top: 0;
            }
            
            .history-header {
                position: sticky;
                top: 0;
                z-index: 10;
            }
        }

        /* Payment button on mobile */
        @media (max-width: 768px) {
            .payment-requirement-overlay .upgrade-button {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 8px !important;
                position: relative !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
                width: 100% !important;
                height: auto !important;
                margin: 0 auto !important;
                padding: 15px 24px !important;
                border-radius: 14px !important;
                z-index: 1 !important;
                font-size: 1.1em !important;
                font-weight: 700 !important;
                text-align: center !important;
                background: linear-gradient(135deg, #c8956c, #b07a52) !important;
                color: white !important;
                border: none !important;
                text-decoration: none !important;
                box-shadow: 0 4px 20px rgba(200,149,108,0.35) !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
            }

            .payment-requirement-overlay .upgrade-button:active {
                transform: scale(0.98) !important;
            }

            /* Druha kopie tehoz pravidla, a protoze je v souboru pozdeji,
               vyhrava - musi tedy mit stejnou vysku jako uprava vyse, jinak
               kartu zase zmensi na 85 % a obsah se nevejde. */
            .payment-requirement-card {
                padding-bottom: 20px !important;
                overflow: hidden !important;
                max-height: 92vh !important;
                max-height: 92dvh !important;
                margin-bottom: 0 !important;
            }

            .button-container {
                text-align: center !important;
                margin: 0 0 22px 0 !important;
            }

            .payment-requirement-overlay .upgrade-button span {
                color: white !important;
                font-weight: 700 !important;
            }
            
            .payment-requirement-overlay .upgrade-button i {
                color: white !important;
                margin-left: 8px !important;
                font-size: 0.9em !important;
            }
        }

        /* Extra enhancement for small screens */
        @media (max-width: 380px) {
            .upgrade-button {
                padding: 18px !important;
                font-size: 1.2em !important;
            }
        }
        
        
        /* Floating hearts animation for special moments */
        .floating-heart {
            position: fixed;
            font-size: 24px;
            pointer-events: none;
            animation: floatHeart 3s ease-out forwards;
            z-index: 9999;
        }
        
        @keyframes floatHeart {
            0% {
                opacity: 1;
                transform: translateY(0) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-200px) rotate(360deg);
            }
        }
        
        /* Message milestone celebration */
        .milestone-popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
            color: white;
            padding: 30px 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(255, 105, 180, 0.5);
            text-align: center;
            z-index: 10000;
            animation: celebrationPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }
        
        @keyframes celebrationPop {
            0% {
                transform: translate(-50%, -50%) scale(0) rotate(-180deg);
                opacity: 0;
            }
            70% {
                transform: translate(-50%, -50%) scale(1.1) rotate(10deg);
            }
            100% {
                transform: translate(-50%, -50%) scale(1) rotate(0deg);
                opacity: 1;
            }
        }
        
        .milestone-popup h3 {
            font-size: 1.8em;
            margin-bottom: 10px;
        }
        
        .milestone-popup p {
            font-size: 1.1em;
            opacity: 0.9;
        }
        
        /* Mobile responsive milestone popup */
        @media (max-width: 768px) {
            .milestone-popup {
                width: 85%;
                padding: 25px 30px;
            }
            
            .milestone-popup h3 {
                font-size: 1.5em;
            }
            
            .milestone-popup p {
                font-size: 1em;
            }
        }
        
        @media (max-width: 480px) {
            .milestone-popup {
                width: 90%;
                padding: 20px 25px;
            }
            
            .milestone-popup h3 {
                font-size: 1.3em;
            }
            
            .milestone-popup p {
                font-size: 0.95em;
            }
        }
        
        /* Enhanced input with focus glow */
        .chat-input input:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.2);
            transition: all 0.3s ease;
        }
        
        /* Send button enhanced animation */
        .send-button {
            position: relative;
            overflow: hidden;
        }
        
        .send-button::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }
        
        .send-button:active::after {
            width: 200px;
            height: 200px;
        }

        /* Empty State for Chat */
        .chat-empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* min-height, ne height: na nizkem displeji byl obsah vyssi nez
               kontejner a pretekal orezany nahore i dole - scroll o nem
               nevedel (Adam, mobil 26. 8.) */
            min-height: 100%;
            height: auto;
            padding: 24px 20px 40px;
            animation: fadeIn 0.5s ease;
        }

        .empty-state-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid var(--primary-color);
            box-shadow: 0 0 30px rgba(255, 105, 180, 0.4);
            margin-bottom: 24px;
            flex-shrink: 0;   /* jinak se pri delsim obsahu zmackne do elipsy */
        }

        .empty-state-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .empty-state-greeting {
            color: var(--text-color);
            font-size: 1.2em;
            text-align: center;
            margin-bottom: 24px;
        }

        .conversation-starters {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            max-width: 400px;
        }

        .starter-btn {
            background: rgba(255, 105, 180, 0.15);
            border: 1px solid var(--primary-color);
            color: var(--text-color);
            padding: 10px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.95em;
            transition: all 0.2s ease;
        }

        .starter-btn:hover {
            background: linear-gradient(135deg, #FF69B4, #FF8CD4);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(255, 105, 180, 0.3);
        }

        .welcome-starters {
            padding-left: 57px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
            animation: fadeIn 0.5s ease;
        }

        .welcome-starters .starter-btn {
            padding: 8px 16px;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .welcome-starters {
                padding-left: 52px;
            }
        }
    
        /* Na uzkem displeji se titulek schovaval pod pilulku s tokeny */
        .empty-state-nudge {
            margin-top: 18px;
            font-size: 0.95em;
            color: var(--primary-color);
            animation: fadeIn 0.6s ease;
        }

        .chat-title-short { display: none; }
        @media (max-width: 768px) {
            /* Do hlavicky se na mobilu tlaci menu, titulek, odznak Online,
               vstup do „Pro moje nejblizsi", profil a pilulka se srdicky.
               Titulek jen opakuje, kde uzivatel je - ustoupi jako prvni,
               odznak Online zustava, protoze nese informaci. */
            .chat-title-full, .chat-title-short { display: none; }

            .chat-header {
                gap: 4px;
                padding-left: 8px;
                padding-right: 8px;
            }

            .chat-header h2 {
                justify-content: flex-start;
                max-width: 105px;
                min-width: 0;
                white-space: nowrap;
                overflow: hidden;
            }

            .chat-header .token-balance-display { margin-left: 0; }
        }

        /* ---- jednorazove oznameni o novinkach ---- */
        .update-notice {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .72);
            z-index: 2100;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow-y: auto;
            padding: 16px 0;
            -webkit-overflow-scrolling: touch;
            animation: fadeIn .3s ease;
        }

        @media (min-height: 780px) {
            .update-notice { align-items: center; }
        }

        .update-notice-card {
            position: relative;
            background: var(--card-background);
            color: var(--text-color);
            width: 90%;
            max-width: 420px;
            border-radius: 20px;
            padding: 30px 26px 26px;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
            animation: popIn .4s ease;
        }

        .update-notice-hearts {
            display: inline-block;
            background: linear-gradient(135deg, #F2C879, #E39A7B);
            color: #4a2c17;
            font-weight: 700;
            font-size: 1.25rem;
            padding: 8px 20px;
            border-radius: 50px;
            margin-bottom: 14px;
        }

        .update-notice-card h3 {
            margin: 0 0 10px;
            font-size: 1.35rem;
        }

        .update-notice-lead {
            margin: 0 0 18px;
            font-size: .97rem;
            line-height: 1.6;
            opacity: .9;
        }

        .update-notice-sub {
            margin: 0 0 12px;
            font-size: .88rem;
            opacity: .65;
        }

        .update-notice-list {
            list-style: none;
            margin: 0 0 22px;
            padding: 0;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .update-notice-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: .9rem;
            line-height: 1.45;
            opacity: .92;
        }

        .update-notice-list span {
            flex-shrink: 0;
            font-size: 1.05rem;
        }

        .update-notice-cta {
            display: block;
            background: linear-gradient(135deg, #FF69B4, #FF1493);
            color: #fff;
            font-weight: 600;
            text-decoration: none;
            padding: 15px;
            border-radius: 50px;
            min-height: 50px;
            line-height: 1.4;
        }

        .update-notice-later {
            display: block;
            width: 100%;
            margin-top: 10px;
            background: none;
            border: none;
            color: inherit;
            opacity: .55;
            font-size: .87rem;
            padding: 10px;
            cursor: pointer;
            font-family: inherit;
        }

        .update-notice-later:hover { opacity: .85; }

        /* Na opravdu uzkych displejich uz odznak misto nema */
        @media (max-width: 380px) {
            .chat-header h2 { display: none; }
        }

        /* Pilulka se srdicky byla absolutne umistena na right:60px a lezela
           pres vstup do „Pro moje nejblizsi" - klik na ikonu knihy trefil
           tlacitko Koupit. Ted je z ni bezna polozka radku ve vsech sirkach. */
        .chat-header .token-balance-display {
            position: static;
            transform: none;
            right: auto;
            top: auto;
            flex: 0 0 auto;
            margin-left: auto;
        }

        /* Odkaz uvnitr Elisciny zpravy (napr. do Odkryvej me pri limitu fotek) */
        .message.bot .chat-odkaz, .chat-odkaz {
            color: #ff6fb0; font-weight: 600; text-decoration: underline;
            text-underline-offset: 2px;
        }

        /* Kdyz je hlavicka plna (mobil), auto-margin pilulky nema z ceho brat
           a ikona profilu/registrace se jí dotýkala. Pevna mezera u ikony
           plati vzdycky; je tady dole, aby ji nic pozdejsiho neprebilo. */
        .chat-header .profile-link,
        .chat-header .chat-header-btn[title="Registrace"] { margin-right: 10px; }

        .chat-header .menu-btn { margin-right: auto; }


        /* Hlavicka panelu byla na vysku pres 350 px, nez zacal obsah.
           Avatar, jmeno a stav davame do jedne rady. */
        .chat-history .eliska-profile {
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: left;
            margin-bottom: 18px;
        }

        .chat-history .eliska-avatar {
            width: 52px;
            height: 52px;
            margin: 0;
            flex-shrink: 0;
        }

        .chat-history .eliska-name {
            font-size: 1.15em;
            margin-bottom: 2px;
        }

        .chat-history .eliska-status-badge {
            padding: 3px 10px;
            font-size: .78rem;
        }

        /* Odznak Online je sam o sobe flex - musi zustat v rade,
           jinak se tecka postavi nad text. */
        .chat-history .eliska-status-badge {
            flex-direction: row;
            align-items: center;
        }

        /* ---- levy panel: sekce ----
           Drive tu byl jen dlouhy blok s naladami a vstup do „Pribehy a hry"
           visel nad zalozkami, kam nepatril. Ted ma panel dve rovnocenne
           sekce a pribehy jsou nahore, protoze jsou dulezitejsi nez prostredi. */
        .panel-section { margin-bottom: 22px; }

        .panel-section-title {
            font-size: .72rem;
            letter-spacing: .1em;
            text-transform: uppercase;
            opacity: .5;
            margin: 0 0 9px 2px;
            font-weight: 600;
        }

        .panel-nav {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .panel-nav-item {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 11px 12px;
            border-radius: 12px;
            background: rgba(255, 105, 180, .08);
            border: 1px solid rgba(255, 105, 180, .16);
            color: inherit;
            text-decoration: none;
            transition: background .2s ease;
        }

        .panel-nav-item:hover,
        .panel-nav-item:focus-visible {
            background: rgba(255, 105, 180, .18);
        }

        .panel-nav-icon { font-size: 1.2rem; flex-shrink: 0; }

        .panel-nav-text {
            display: flex;
            flex-direction: column;
            line-height: 1.3;
            flex: 1;
            min-width: 0;
        }

        .panel-nav-text b { font-size: .9rem; }
        .panel-nav-text small { font-size: .74rem; opacity: .62; }
        .panel-nav-item .fa-chevron-right { font-size: .78rem; opacity: .45; }

        /* Nadpis uvnitr sekci uz nese .panel-section-title */
        .panel-section .context-controls > h3 { display: none; }

        /* Na uzkem displeji se banner lamal do dvou radku */
        @media (max-width: 420px) {
            .anonymous-banner { padding: 10px 12px; gap: 8px; }
            .anonymous-banner .message-counter {
                font-size: .85em;
                white-space: nowrap;
            }
            .anonymous-banner .register-prompt-btn {
                white-space: nowrap;
                font-size: .85em;
                padding: 9px 12px;
            }
        }

/* Skryto vizualne, ale ctecky obrazovky a vyhledavace to prectou. */
.jen-pro-ctecky {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Placena brana na mobilu - kompozice
   --------------------------------------------------------------------------
   Tenhle soubor ma sedm ruznych pravidel pro vysku .payment-requirement-card
   rozhazenych po peti blocich s @media a ctyri z nich maji !important. Kazda
   oprava jinde v souboru se dala prebit necim, co je nize. Tenhle blok je
   proto uplne na konci, aby vyhral poradim.

   Co resi: karta mela 92 % vysky, takze nad ni zbyval pruh tmaveho pozadi,
   ktery vypadal jako chyba. Ted je to cely list od horni hrany dolu. Uchyt
   na tazeni (ta svetla carka nahore) nic nedelal - jen mate, ze se s oknem
   da hybat - a je pryc.
   ========================================================================== */
@media (max-width: 768px) {
    .payment-requirement-card {
        max-height: 100dvh !important;
        height: 100dvh !important;
        border-radius: 0 !important;
    }

    .payment-requirement-card::before {
        display: none !important;
    }

    .card-header {
        padding: 18px 20px 14px !important;
        border-radius: 0 !important;
    }

    .paywall-photo-teaser {
        height: min(170px, 19dvh) !important;
    }
}

/* ==========================================================================
   Historie zprav na mobilu
   --------------------------------------------------------------------------
   .chat-messages melo height: calc(100vh - 45px - 60px). Na iOS Safari ale
   100vh pocita s vyskou VCETNE listy prohlizece, takze je o zhruba 150 px
   vyssi nez viditelna plocha. Kontejner se zpravami tim presahoval obrazovku:
   spodek zmizel za ruzovym pruhem s vyzvou k platbe a starsi zpravy byly
   mimo zaber - vypadalo to, ze historie chybi a jsou videt jen posledni dve.

   dvh pocita skutecnou viditelnou vysku. vh zustava jako zaloha pro stara
   zarizeni, ktera dvh neznaji.

   Pravidla jsou na konci souboru zamerne - .chat-messages ma v tomhle
   souboru pet ruznych definic vysky a kazda oprava jinde se dala prebit.
   ========================================================================== */
@media (max-width: 768px) {
    .chat-messages {
        height: calc(100vh - 45px - 60px);
        height: calc(100dvh - 45px - 60px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Kdyz dole sedi pruh s vyzvou k platbe, musi mit zpravy misto nad nim -
       jinak se za nim posledni zpravy schovaji. */
    body.paywall-bar-visible .chat-messages {
        /* !important kvuli inline paddingu z adjustInputPosition: ta po
           schovani .chat-input spocita 10 px. 100 px proto, ze se pruh
           na uzkem displeji zalomi na dva radky (~97 px). */
        padding-bottom: 100px !important;
    }
}

/* ==========================================================================
   Registracni a platebni okno na nizkem displeji
   --------------------------------------------------------------------------
   POUCENI: honit se za tim, aby se vsechno veslo nad ohyb, delalo z oken
   nacpanou kasi - fotka Elisky, ktera je cely smysl okna ("Tohle uvidis"),
   se scvrkla na tmavy prouzek. Rolovat SE SMI. Dulezite je, aby hlavni vec
   (fotka + prvni pole + tlacitko) byla videt a aby to bylo hezke; zbytek
   (Google, "mam ucet") se muze dorolovat.

   Okno se proto lepi k hornimu okraji a scrolluje jako celek. Fotka zustava
   velka (160 px), pole komfortni. Podminka je na vysku, ne sirku - na
   vysokem telefonu a desktopu se nemeni nic.
   ========================================================================== */
@media (max-height: 720px) {
    /* --- registrace --- */
    #registrationModal {
        align-items: flex-start !important;
        padding: 0 !important;
        overflow-y: auto !important;
    }

    .registration-modal-content {
        margin: 0 !important;
        padding: 0 24px 20px !important;
        border-radius: 0 0 20px 20px !important;
    }

    .reg-photo-teaser {
        height: 130px !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        border-radius: 0 !important;
    }

    .registration-modal-content h2,
    .registration-modal-content .reg-title {
        font-size: 1.4rem !important;
        margin: 0 0 8px !important;
    }

    .registration-modal-content p {
        font-size: .88rem !important;
        margin: 0 0 12px !important;
    }

    .registration-modal-content input {
        padding: 11px 16px !important;
        margin-bottom: 8px !important;
        font-size: 1rem !important;   /* pod 16px by iOS pri fokusu zoomoval */
    }

    .registration-modal-content button {
        padding: 12px !important;
    }

    /* Krizek splyval s fotkou - dame mu tmavy podklad, at je videt. */
    #registrationModal .modal-close,
    #registrationModal .reg-close {
        background: rgba(0,0,0,.45) !important;
        border-radius: 50% !important;
    }

    /* --- platba ---
       Volna vyska + prilepeni nahoru nechavala pod kartou pruh tmy pres pul
       obrazovky. Platebni okno je list pres celou vysku: hlavicka a fotka si
       drzi svoje, obsah dostane zbytek a roluje uvnitr. */
    .payment-requirement-card {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .payment-requirement-overlay {
        align-items: stretch !important;
        overflow: hidden !important;
        padding: 0 !important;
    }
    .payment-requirement-card > .card-header,
    .payment-requirement-card > .paywall-photo-teaser {
        flex: 0 0 auto !important;
    }
    .payment-requirement-card > .card-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .paywall-photo-teaser {
        height: clamp(120px, 22dvh, 190px) !important;
    }
    .card-header {
        padding: 14px 20px 12px !important;
    }
    .card-header h2 {
        font-size: 1.25em !important;
        margin: 6px 0 4px !important;
    }
}

/* Darek "odemceno zadarmo" patri ke hre, na kterou odkazuje - je to
   stitek uvnitr jeji dlazdice a dlazdice sama se zvyrazni. Samostatna
   radka vypadala jako dalsi hra. */
.panel-nav-item.ma-zdarma {
    border: 1px solid rgba(255, 107, 157, 0.45);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.10), rgba(196, 69, 105, 0.10));
}
.zdarma-stitek {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff6b9d, #c44569);
    color: #fff;
    font-size: 0.76em;
    font-weight: 600;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Registrace pres Google je jeden klik, proto stoji NAD formularem
   a je vyraznejsi - na mobilu ji lide pod poli nedoscrollovali. */
.modal-google-btn.modal-google-hlavni {
    margin: 0 0 4px;
    padding: 13px 16px;
    font-weight: 600;
    font-size: 1.02em;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.modal-google-divider {
    margin: 12px 0;
}


/* Pocet napsanych zprav v levem panelu. Stoji samostatne nad hrami -
   odemykaji se podle nej zapisky i roleplaye a je to cislo, ktere clovek
   sleduje sam o sobe. */
.panel-pocitadlo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 0 12px 14px;
    padding: 14px 12px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.pocitadlo-cislo {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    opacity: .95;
    font-variant-numeric: tabular-nums;
}
.pocitadlo-popis {
    font-size: .74rem;
    line-height: 1.3;
    opacity: .6;
}