{"id":290,"date":"2025-09-13T11:20:57","date_gmt":"2025-09-13T11:20:57","guid":{"rendered":"https:\/\/viewri.com\/?page_id=290"},"modified":"2025-12-29T08:11:26","modified_gmt":"2025-12-29T08:11:26","slug":"comments","status":"publish","type":"page","link":"https:\/\/viewri.com\/tiktok\/comments\/","title":{"rendered":"TikTok Comments Viewer"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\"\r\nrel=\"stylesheet\">\r\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n    --primary: #ff0050;\r\n    --secondary: #00f2ea;\r\n    --accent: #ff4081;\r\n    --purple: #8b5cf6;\r\n    --orange: #ff8800;\r\n    --green: #00ff88;\r\n    --blue: #0ea5e9;\r\n    --bg-primary: #0f172a;\r\n    --bg-secondary: #1e293b;\r\n    --bg-tertiary: #334155;\r\n    --bg-card: rgba(30, 41, 59, 0.8);\r\n    --text-primary: #ffffff;\r\n    --text-secondary: #cbd5e1;\r\n    --text-muted: #64748b;\r\n    --border: #475569;\r\n    --border-light: #64748b;\r\n    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);\r\n    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);\r\n    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8);\r\n    --glow-primary: 0 0 30px rgba(255, 0, 80, 0.3);\r\n    --glow-secondary: 0 0 30px rgba(0, 242, 234, 0.3);\r\n    --gradient-primary: linear-gradient(135deg, #ff0050, #ff4081, #ff6b9d);\r\n    --gradient-secondary: linear-gradient(135deg, #00f2ea, #00d4aa, #00ff88);\r\n    --gradient-purple: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);\r\n    --gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);\r\n}\r\n\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.tiktok_body {\r\n    font-family: 'Inter', sans-serif;\r\n    background: var(--gradient-bg);\r\n    color: var(--text-primary);\r\n    overflow-x: hidden;\r\n    min-height: 100vh;\r\n    position: relative;\r\n}\r\n\r\n.tiktok_body::before {\r\n    content: '';\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background:\r\n        radial-gradient(circle at 20% 20%, rgba(255, 0, 80, 0.1) 0%, transparent 50%),\r\n        radial-gradient(circle at 80% 80%, rgba(0, 242, 234, 0.1) 0%, transparent 50%),\r\n        radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n.container_tiktok{\r\n    max-width: 1600px;\r\n    margin: 0 auto;\r\n    padding: 1.5rem;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\/* Header *\/\r\n.header {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    padding: 2rem;\r\n    margin-bottom: 1.5rem;\r\n    box-shadow: var(--shadow-lg);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    background: var(--gradient-primary);\r\n}\r\n\r\n.header-content {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo-icon {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: var(--gradient-primary);\r\n    border-radius: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.8rem;\r\n    color: white;\r\n    box-shadow: var(--shadow-lg), var(--glow-primary);\r\n    animation: logoFloat 3s ease-in-out infinite;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.logo-icon::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n    animation: logoShine 3s ease-in-out infinite;\r\n}\r\n\r\n.logo-text {\r\n    font-size: 2.2rem;\r\n    font-weight: 900;\r\n    background: var(--gradient-primary);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    letter-spacing: -1px;\r\n}\r\n\r\n.logo-subtitle {\r\n    font-size: 0.9rem;\r\n    color: var(--text-secondary);\r\n    font-weight: 500;\r\n    margin-top: 0.25rem;\r\n}\r\n\r\n.search-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n    flex: 1;\r\n    max-width: 700px;\r\n    width: 100%;\r\n}\r\n\r\n.search-form {\r\n    display: flex;\r\n    gap: 1rem;\r\n    position: relative;\r\n    width: 100%;\r\n}\r\n\r\n.search-input {\r\n    flex: 1 !important;\r\n    padding: 1rem 1.5rem !important;\r\n    background: rgba(30, 41, 59, 0.9) !important;\r\n    backdrop-filter: blur(15px) !important;\r\n    border: 2px solid var(--border) !important;\r\n    border-radius: 16px !important;\r\n    color: var(--text-primary) !important;\r\n    font-size: 1rem !important;\r\n    font-weight: 500 !important;\r\n    outline: none !important;\r\n    transition: all 0.3s ease !important;\r\n    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;\r\n}\r\n\r\n.search-input:focus {\r\n    border-color: var(--primary) !important;\r\n    box-shadow: 0 0 0 4px rgba(255, 0, 80, 0.1), var(--glow-primary), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;\r\n    transform: translateY(-2px) !important;\r\n    background: rgba(30, 41, 59, 0.95) !important;\r\n}\r\n\r\n.search-input::placeholder {\r\n    color: var(--text-muted);\r\n    font-weight: 400;\r\n}\r\n\r\n.search-input:not(:placeholder-shown) {\r\n    background: rgba(30, 41, 59, 0.95);\r\n    border-color: var(--border-light);\r\n    font-weight: 600;\r\n}\r\n\r\n.search-btn {\r\n    background: var(--gradient-primary);\r\n    border: none;\r\n    color: white;\r\n    padding: 1rem 2rem;\r\n    border-radius: 16px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    box-shadow: var(--shadow-lg);\r\n    position: relative;\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n}\r\n\r\n.search-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n    transition: left 0.5s;\r\n}\r\n\r\n.search-btn:hover:not(:disabled)::before {\r\n    left: 100%;\r\n}\r\n\r\n.search-btn:hover:not(:disabled) {\r\n    transform: translateY(-3px);\r\n    box-shadow: var(--shadow-xl), var(--glow-primary);\r\n}\r\n\r\n.search-btn:disabled {\r\n    opacity: 0.6;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n}\r\n\r\n.search-another-btn {\r\n    background: var(--bg-secondary);\r\n    border: 1px solid var(--border);\r\n    color: var(--text-primary);\r\n    padding: 1rem 1.5rem;\r\n    border-radius: 16px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    transition: all 0.3s ease;\r\n    white-space: nowrap;\r\n}\r\n\r\n.search-another-btn:hover {\r\n    background: var(--bg-tertiary);\r\n    transform: translateY(-2px);\r\n    box-shadow: var(--shadow);\r\n}\r\n\r\n.button-group {\r\n    display: flex;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n    flex-shrink: 0;\r\n}\r\n\r\n\/* Main Content *\/\r\n.main-content {\r\n    flex: 1;\r\n    display: grid;\r\n    grid-template-columns: 450px 1fr;\r\n    gap: 1.5rem;\r\n    min-height: 0;\r\n}\r\n\r\n\/* Video Section *\/\r\n.video-section {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    box-shadow: var(--shadow-lg);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    position: relative;\r\n}\r\n\r\n.video-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    background: var(--gradient-secondary);\r\n}\r\n\r\n\/* Video Stats Bar *\/\r\n.video-stats-bar {\r\n    padding: 1rem 1.5rem;\r\n    background: linear-gradient(135deg, rgba(255, 0, 80, 0.1), rgba(139, 92, 246, 0.1));\r\n    border-bottom: 1px solid var(--border);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.video-stat-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    font-size: 0.9rem;\r\n    color: var(--text-secondary);\r\n    padding: 0.5rem 1rem;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border-radius: 12px;\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.video-stat-item i {\r\n    font-size: 1rem;\r\n}\r\n\r\n.video-stat-item .fa-eye {\r\n    color: #ec4899;\r\n}\r\n\r\n.video-stat-item .fa-heart {\r\n    color: #ef4444;\r\n}\r\n\r\n.video-stat-item .fa-comment {\r\n    color: #3b82f6;\r\n}\r\n\r\n.video-stat-item .fa-share {\r\n    color: #10b981;\r\n}\r\n\r\n.video-stat-value {\r\n    font-weight: 700;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.video-header {\r\n    padding: 1.5rem;\r\n    border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.video-title {\r\n    font-size: 1.1rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    line-height: 1.4;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.video-author {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    padding: 1rem;\r\n    background: linear-gradient(135deg, rgba(0, 242, 234, 0.1), rgba(59, 130, 246, 0.1));\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0, 242, 234, 0.2);\r\n    box-shadow: var(--shadow);\r\n}\r\n\r\n.author-avatar {\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 3px solid var(--secondary);\r\n    box-shadow: var(--shadow);\r\n    background: var(--gradient-secondary);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.2rem;\r\n    color: white;\r\n    font-weight: 700;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.author-info {\r\n    flex: 1;\r\n}\r\n\r\n.author-info h4 {\r\n    font-size: 1.1rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.25rem;\r\n    color: var(--text-primary);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.author-username {\r\n    font-size: 0.9rem;\r\n    color: var(--text-secondary);\r\n    font-weight: 500;\r\n}\r\n\r\n.author-verified {\r\n    color: var(--blue);\r\n    font-size: 0.9rem;\r\n}\r\n\r\n.video-player-container {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 1.5rem;\r\n    position: relative;\r\n}\r\n\r\n.video-player-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 320px;\r\n    aspect-ratio: 9\/16;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow-xl);\r\n    background: #000;\r\n}\r\n\r\n.video-thumbnail {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.video-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.video-overlay:hover {\r\n    background: rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n.play-button {\r\n    width: 80px;\r\n    height: 80px;\r\n    background: var(--gradient-primary);\r\n    border: none;\r\n    border-radius: 50%;\r\n    color: white;\r\n    font-size: 2rem;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: var(--shadow-xl), var(--glow-primary);\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.play-button::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n    transform: translateX(-100%);\r\n    transition: transform 0.5s;\r\n}\r\n\r\n.play-button:hover::before {\r\n    transform: translateX(100%);\r\n}\r\n\r\n.play-button:hover {\r\n    transform: scale(1.1);\r\n    box-shadow: var(--shadow-xl), var(--glow-primary);\r\n}\r\n\r\n.video-player {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: none;\r\n}\r\n\r\n.video-player.playing {\r\n    display: block;\r\n}\r\n\r\n\/* Video Controls *\/\r\n.video-controls {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));\r\n    padding: 1.5rem;\r\n    transform: translateY(100%);\r\n    transition: transform 0.3s ease;\r\n    z-index: 10;\r\n}\r\n\r\n.video-player-wrapper:hover .video-controls {\r\n    transform: translateY(0);\r\n}\r\n\r\n.progress-container {\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.progress-bar {\r\n    width: 100%;\r\n    height: 6px;\r\n    background: rgba(255, 255, 255, 0.2);\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.progress-fill {\r\n    height: 100%;\r\n    background: var(--gradient-primary);\r\n    border-radius: 3px;\r\n    width: 0%;\r\n    transition: width 0.1s linear;\r\n    box-shadow: 0 0 10px rgba(255, 0, 80, 0.5);\r\n}\r\n\r\n.control-buttons {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.control-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n}\r\n\r\n.control-btn {\r\n    background: rgba(255, 255, 255, 0.15);\r\n    border: none;\r\n    color: white;\r\n    width: 42px;\r\n    height: 42px;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s ease;\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.control-btn:hover {\r\n    background: rgba(255, 255, 255, 0.25);\r\n    transform: scale(1.1);\r\n    box-shadow: var(--shadow);\r\n}\r\n\r\n.play-control-btn {\r\n    width: 50px;\r\n    height: 50px;\r\n    background: var(--gradient-primary);\r\n    font-size: 1.2rem;\r\n    border: none;\r\n    box-shadow: var(--shadow-lg), var(--glow-primary);\r\n}\r\n\r\n.volume-control {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n}\r\n\r\n.volume-slider {\r\n    width: 80px;\r\n    height: 6px;\r\n    background: rgba(255, 255, 255, 0.2);\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.volume-fill {\r\n    height: 100%;\r\n    background: var(--gradient-secondary);\r\n    border-radius: 3px;\r\n    width: 100%;\r\n    transition: width 0.1s ease;\r\n    box-shadow: 0 0 8px rgba(0, 242, 234, 0.4);\r\n}\r\n\r\n.time-display {\r\n    font-size: 0.8rem;\r\n    color: white;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* Loading States *\/\r\n.loading-state {\r\n    display: none;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 3rem;\r\n    text-align: center;\r\n}\r\n\r\n.loading-spinner {\r\n    width: 60px;\r\n    height: 60px;\r\n    border: 3px solid var(--border);\r\n    border-top: 3px solid var(--primary);\r\n    border-radius: 50%;\r\n    animation: spin 1s linear infinite;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.loading-text {\r\n    font-size: 1.2rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.5rem;\r\n    background: var(--gradient-primary);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.loading-subtext {\r\n    color: var(--text-secondary);\r\n    font-size: 0.9rem;\r\n}\r\n\r\n\/* Comments Section *\/\r\n.comments-section {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    box-shadow: var(--shadow-lg);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    position: relative;\r\n}\r\n\r\n.comments-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    background: var(--gradient-purple);\r\n}\r\n\r\n.comments-header {\r\n    padding: 1.5rem;\r\n    border-bottom: 1px solid var(--border);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(255, 64, 129, 0.1));\r\n}\r\n\r\n.comments-title {\r\n    font-size: 1.3rem;\r\n    font-weight: 800;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.comments-count {\r\n    background: var(--gradient-purple);\r\n    color: white;\r\n    padding: 0.375rem 0.75rem;\r\n    border-radius: 8px;\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    box-shadow: var(--shadow);\r\n    min-width: 40px;\r\n    text-align: center;\r\n}\r\n\r\n.comments-container {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 0;\r\n    max-height: calc(100vh - 300px);\r\n    min-height: 400px;\r\n    position: relative;\r\n}\r\n\r\n\/* Always visible scrollbar *\/\r\n.comments-container::-webkit-scrollbar {\r\n    width: 12px;\r\n}\r\n\r\n.comments-container::-webkit-scrollbar-track {\r\n    background: var(--bg-secondary);\r\n    border-radius: 6px;\r\n    margin: 4px;\r\n}\r\n\r\n.comments-container::-webkit-scrollbar-thumb {\r\n    background: var(--gradient-purple);\r\n    border-radius: 6px;\r\n    border: 2px solid var(--bg-secondary);\r\n}\r\n\r\n.comments-container::-webkit-scrollbar-thumb:hover {\r\n    background: var(--purple);\r\n}\r\n\r\n\/* Firefox scrollbar *\/\r\n.comments-container {\r\n    scrollbar-width: auto;\r\n    scrollbar-color: var(--purple) var(--bg-secondary);\r\n}\r\n\r\n\/* Scroll Indicator *\/\r\n.scroll-indicator {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: var(--gradient-purple);\r\n    color: white;\r\n    padding: 0.75rem 1.5rem;\r\n    border-radius: 25px;\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    box-shadow: var(--shadow-lg);\r\n    z-index: 100;\r\n    display: none;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    animation: scrollPulse 2s ease-in-out infinite;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.scroll-indicator:hover {\r\n    transform: translateX(-50%) translateY(-5px);\r\n    box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.scroll-indicator.show {\r\n    display: flex;\r\n}\r\n\r\n.scroll-indicator i {\r\n    animation: scrollBounce 1.5s ease-in-out infinite;\r\n}\r\n\r\n.comments-list {\r\n    padding: 0;\r\n}\r\n\r\n.comment-item {\r\n    padding: 1.25rem 1.5rem;\r\n    border-bottom: 1px solid var(--border);\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    animation: commentSlideIn 0.5s ease-out;\r\n}\r\n\r\n.comment-item:hover {\r\n    background: rgba(139, 92, 246, 0.05);\r\n    transform: translateX(5px);\r\n}\r\n\r\n.comment-item::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 3px;\r\n    background: var(--gradient-purple);\r\n    transform: scaleY(0);\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.comment-item:hover::before {\r\n    transform: scaleY(1);\r\n}\r\n\r\n.comment-header {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 1rem;\r\n    margin-bottom: 0.75rem;\r\n}\r\n\r\n.comment-avatar {\r\n    width: 42px;\r\n    height: 42px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 2px solid var(--border-light);\r\n    flex-shrink: 0;\r\n    transition: all 0.3s ease;\r\n    box-shadow: var(--shadow);\r\n    background: var(--gradient-purple);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1rem;\r\n    color: white;\r\n    font-weight: 700;\r\n}\r\n\r\n.comment-avatar:hover {\r\n    border-color: var(--purple);\r\n    transform: scale(1.05);\r\n}\r\n\r\n.comment-info {\r\n    flex: 1;\r\n    min-width: 0;\r\n}\r\n\r\n.comment-user-info {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    margin-bottom: 0.5rem;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.comment-author {\r\n    font-size: 0.95rem;\r\n    font-weight: 700;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.comment-username {\r\n    font-size: 0.85rem;\r\n    color: var(--text-secondary);\r\n    font-weight: 500;\r\n}\r\n\r\n.comment-verified {\r\n    color: var(--blue);\r\n    font-size: 0.8rem;\r\n}\r\n\r\n.comment-region {\r\n    background: rgba(0, 242, 234, 0.1);\r\n    color: var(--secondary);\r\n    padding: 0.125rem 0.5rem;\r\n    border-radius: 4px;\r\n    font-size: 0.7rem;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.comment-text {\r\n    font-size: 0.95rem;\r\n    line-height: 1.5;\r\n    color: var(--text-primary);\r\n    word-wrap: break-word;\r\n    margin-bottom: 0.75rem;\r\n}\r\n\r\n.comment-footer {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 1rem;\r\n}\r\n\r\n.comment-stats {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.comment-stat {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.375rem;\r\n    font-size: 0.85rem;\r\n    color: var(--text-secondary);\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.comment-stat:hover {\r\n    color: var(--primary);\r\n    transform: scale(1.05);\r\n}\r\n\r\n.comment-stat i {\r\n    font-size: 0.9rem;\r\n}\r\n\r\n.comment-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    font-size: 0.8rem;\r\n    color: var(--text-muted);\r\n}\r\n\r\n.comment-time {\r\n    font-weight: 500;\r\n}\r\n\r\n.comment-id {\r\n    font-family: 'Courier New', monospace;\r\n    background: rgba(107, 114, 128, 0.1);\r\n    padding: 0.125rem 0.375rem;\r\n    border-radius: 4px;\r\n}\r\n\r\n.empty-state {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 4rem 2rem;\r\n    text-align: center;\r\n    color: var(--text-secondary);\r\n}\r\n\r\n.empty-state i {\r\n    font-size: 4rem;\r\n    margin-bottom: 1.5rem;\r\n    opacity: 0.5;\r\n    background: var(--gradient-purple);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.empty-state h3 {\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.5rem;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.error-message {\r\n    background: rgba(239, 68, 68, 0.1);\r\n    border: 1px solid rgba(239, 68, 68, 0.3);\r\n    color: #ef4444;\r\n    padding: 1rem 1.5rem;\r\n    margin: 1rem;\r\n    border-radius: 12px;\r\n    display: none;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    font-weight: 600;\r\n}\r\n\r\n.error-message.show {\r\n    display: flex;\r\n    animation: errorSlideIn 0.3s ease-out;\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes spin {\r\n    to {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n@keyframes logoFloat {\r\n\r\n    0%,\r\n    100% {\r\n        transform: translateY(0px);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(-5px);\r\n    }\r\n}\r\n\r\n@keyframes logoShine {\r\n    0% {\r\n        transform: translateX(-100%) translateY(-100%) rotate(45deg);\r\n    }\r\n\r\n    100% {\r\n        transform: translateX(100%) translateY(100%) rotate(45deg);\r\n    }\r\n}\r\n\r\n@keyframes commentSlideIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(-20px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes errorSlideIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-10px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes scrollPulse {\r\n\r\n    0%,\r\n    100% {\r\n        opacity: 0.8;\r\n    }\r\n\r\n    50% {\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes scrollBounce {\r\n\r\n    0%,\r\n    100% {\r\n        transform: translateY(0);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(3px);\r\n    }\r\n}\r\n    \r\n    .button-group {\r\ndisplay: flex;\r\ngap: 1rem;\r\nflex-wrap: wrap;\r\nflex-shrink: 0;\r\njustify-content: center;\r\n}\r\n    \r\n    .header-content {\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: space-between;\r\nflex-wrap: wrap;\r\ngap: 1.5rem;\r\nflex-direction: column;\r\n}\r\n    .search-container {\r\ndisplay: flex;\r\nflex-direction: column;\r\ngap: 1rem;\r\nflex: 1;\r\nmax-width: 700px;\r\nwidth: 100%;\r\n}\r\n    \r\n    .search-form {\r\ndisplay: flex;\r\ngap: 1rem;\r\nposition: relative;\r\nwidth: 100%;\r\nflex-direction: column;\r\n}\r\n\r\n\/* Responsive Design *\/\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/* Landscape orientation on mobile *\/\r\n@media (max-height: 500px) and (orientation: landscape) {\r\n    .container {\r\n        padding: 0.5rem;\r\n    }\r\n\r\n    .header {\r\n        padding: 0.75rem;\r\n        margin-bottom: 0.5rem;\r\n    }\r\n\r\n    .main-content {\r\n        gap: 0.75rem;\r\n    }\r\n\r\n    .video-player-wrapper {\r\n        max-width: 200px;\r\n    }\r\n\r\n    .comments-container {\r\n        max-height: calc(100vh - 150px);\r\n        min-height: 200px;\r\n    }\r\n\r\n    .comment-item {\r\n        padding: 0.75rem 1rem;\r\n    }\r\n}\r\n\r\n\/* Fix for input width consistency *\/\r\n.search-input {\r\n    flex: 1;\r\n    min-width: 0;\r\n    \/* Prevents flex item from growing beyond container *\/\r\n    width: 100%;\r\n    \/* Ensures consistent width *\/\r\n    box-sizing: border-box;\r\n}\r\n\r\n.search-form {\r\n    display: flex;\r\n    gap: 1rem;\r\n    position: relative;\r\n    width: 100%;\r\n    \/* Ensures form takes full width *\/\r\n}\r\n\r\n.search-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n    flex: 1;\r\n    max-width: 700px;\r\n    width: 100%;\r\n    \/* Ensures container takes full width *\/\r\n}\r\n\r\n\/* Ensure button group maintains consistent width *\/\r\n.button-group {\r\n    display: flex;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n    flex-shrink: 0;\r\n    \/* Prevents buttons from shrinking *\/\r\n}\r\n\r\n\/* Ensure search buttons maintain consistent width *\/\r\n.search-btn,\r\n.search-another-btn {\r\n    white-space: nowrap;\r\n    flex-shrink: 0;\r\n    \/* Prevents buttons from shrinking *\/\r\n}\r\n\r\n\/* Additional fixes for input consistency *\/\r\n.search-input:focus,\r\n.search-input:not(:placeholder-shown),\r\n.search-input:disabled {\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n    max-width: none !important;\r\n    flex: 1 !important;\r\n}\r\n\r\n\/* Ensure form layout consistency *\/\r\n.search-form:has(.search-input:focus),\r\n.search-form:has(.search-input:not(:placeholder-shown)) {\r\n    width: 100% !important;\r\n    display: flex !important;\r\n    gap: 1rem !important;\r\n}\r\n\r\n\/* Prevent any width changes during loading states *\/\r\n.search-container:has(.search-btn:disabled) .search-input,\r\n.search-container:has(.search-btn:disabled) .search-form {\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n}\r\n    \r\n    \r\n    \/* Responsive Design for smaller screens *\/\r\n@media (max-width: 992px) {\r\n.main-content {\r\ngrid-template-columns: 1fr; \/* Stack video and comments vertically *\/\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nmargin-bottom: 1.5rem; \/* Add spacing between stacked sections *\/\r\n}\r\n\r\n.comments-container {\r\nmax-height: 600px; \/* Adjust max height for comments when stacked *\/\r\nmin-height: 300px;\r\n}\r\n}\r\n\r\n@media (max-width: 768px) {\r\n.container_tiktok {\r\npadding: 1rem;\r\n}\r\n\r\n.header {\r\npadding: 1.5rem;\r\n}\r\n\r\n.header-content {\r\nflex-direction: column; \/* Stack logo, search, and buttons *\/\r\nalign-items: center;\r\ntext-align: center;\r\n}\r\n\r\n.logo {\r\nflex-direction: column;\r\ngap: 0.75rem;\r\nmargin-bottom: 1rem;\r\n}\r\n\r\n.logo-icon {\r\nwidth: 50px;\r\nheight: 50px;\r\nfont-size: 1.5rem;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.8rem;\r\n}\r\n\r\n.logo-subtitle {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.search-container {\r\nmax-width: 100%; \/* Allow search to take full width *\/\r\n}\r\n\r\n.search-form {\r\nflex-direction: column; \/* Stack search input and button *\/\r\ngap: 0.75rem;\r\n}\r\n\r\n.search-input {\r\npadding: 0.75rem 1rem !important;\r\nfont-size: 0.9rem !important;\r\n}\r\n\r\n.search-btn {\r\npadding: 0.75rem 1.5rem;\r\nfont-size: 0.9rem;\r\nwidth: 100%; \/* Make search button full width *\/\r\n}\r\n\r\n.button-group {\r\nwidth: 100%; \/* Ensure button group takes full width *\/\r\njustify-content: center; \/* Center buttons *\/\r\ngap: 0.75rem;\r\n}\r\n\r\n.search-another-btn {\r\npadding: 0.75rem 1rem;\r\nfont-size: 0.9rem;\r\nflex-grow: 1; \/* Allow buttons to grow and share space *\/\r\n}\r\n\r\n.video-stats-bar {\r\npadding: 0.75rem 1rem;\r\ngap: 0.75rem;\r\n}\r\n\r\n.video-stat-item {\r\npadding: 0.4rem 0.8rem;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.video-header {\r\npadding: 1rem;\r\n}\r\n\r\n.video-title {\r\nfont-size: 1rem;\r\n}\r\n\r\n.video-author {\r\npadding: 0.75rem;\r\ngap: 0.75rem;\r\n}\r\n\r\n.author-avatar {\r\nwidth: 40px;\r\nheight: 40px;\r\nfont-size: 1rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 1rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.video-player-container {\r\npadding: 1rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 280px; \/* Slightly smaller video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 60px;\r\nheight: 60px;\r\nfont-size: 1.5rem;\r\n}\r\n\r\n.video-controls {\r\npadding: 1rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 36px;\r\nheight: 36px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 42px;\r\nheight: 42px;\r\nfont-size: 1rem;\r\n}\r\n\r\n.volume-slider {\r\nwidth: 60px;\r\n}\r\n\r\n.time-display {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comments-header {\r\npadding: 1rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 1.1rem;\r\ngap: 0.5rem;\r\n}\r\n\r\n.comments-count {\r\npadding: 0.25rem 0.6rem;\r\nfont-size: 0.75rem;\r\nmin-width: 35px;\r\n}\r\n\r\n.comment-item {\r\npadding: 1rem 1.25rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 38px;\r\nheight: 38px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comment-user-info {\r\nflex-direction: column; \/* Stack user info elements if needed *\/\r\nalign-items: flex-start;\r\ngap: 0.25rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comment-footer {\r\nflex-direction: column; \/* Stack footer elements *\/\r\nalign-items: flex-start;\r\ngap: 0.75rem;\r\n}\r\n\r\n.comment-stats {\r\ngap: 1rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-meta {\r\nfont-size: 0.7rem;\r\n}\r\n}\r\n\r\n@media (max-width: 600px) {\r\n.container_tiktok {\r\npadding: 0.75rem;\r\n}\r\n\r\n.header {\r\npadding: 1rem;\r\nborder-radius: 15px;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.6rem;\r\n}\r\n\r\n.search-input {\r\nfont-size: 0.85rem !important;\r\n}\r\n\r\n.search-btn,\r\n.search-another-btn {\r\nfont-size: 0.85rem;\r\npadding: 0.65rem 1.25rem;\r\nborder-radius: 12px;\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nborder-radius: 15px;\r\n}\r\n\r\n.video-stat-item {\r\nfont-size: 0.75rem;\r\npadding: 0.3rem 0.6rem;\r\n}\r\n\r\n.video-title {\r\nfont-size: 0.95rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 0.95rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 250px; \/* Smaller video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 50px;\r\nheight: 50px;\r\nfont-size: 1.2rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 32px;\r\nheight: 32px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 38px;\r\nheight: 38px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 1rem;\r\n}\r\n\r\n.comment-item {\r\npadding: 0.9rem 1rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 34px;\r\nheight: 34px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.75rem;\r\n}\r\n.scroll-indicator {\r\nposition: absolute;\r\nbottom: 20px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\nbackground: var(--gradient-purple);\r\ncolor: white;\r\npadding: 0.75rem 1.5rem;\r\nborder-radius: 25px;\r\nfont-size: 0.85rem;\r\nfont-weight: 600;\r\nbox-shadow: var(--shadow-lg);\r\nz-index: 100;\r\ndisplay: none !important;\r\nalign-items: center;\r\ngap: 0.5rem;\r\nanimation: scrollPulse 2s ease-in-out infinite;\r\ncursor: pointer;\r\ntransition: all 0.3s ease;\r\n}\r\n}\r\n\r\n@media (max-width: 400px) {\r\n.container_tiktok {\r\npadding: 0.5rem;\r\n}\r\n\r\n.header {\r\npadding: 0.75rem;\r\nborder-radius: 12px;\r\n}\r\n\r\n.logo-icon {\r\nwidth: 45px;\r\nheight: 45px;\r\nfont-size: 1.3rem;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.4rem;\r\n}\r\n\r\n.search-input {\r\npadding: 0.6rem 0.8rem !important;\r\nfont-size: 0.8rem !important;\r\n}\r\n\r\n.search-btn,\r\n.search-another-btn {\r\nfont-size: 0.8rem;\r\npadding: 0.5rem 1rem;\r\nborder-radius: 10px;\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nborder-radius: 12px;\r\n}\r\n\r\n.video-stat-item {\r\nfont-size: 0.7rem;\r\npadding: 0.25rem 0.5rem;\r\nflex-shrink: 0; \/* Prevent items from squishing too much *\/\r\n}\r\n\r\n.video-title {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.author-avatar {\r\nwidth: 35px;\r\nheight: 35px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 220px; \/* Even smaller video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 45px;\r\nheight: 45px;\r\nfont-size: 1.1rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 30px;\r\nheight: 30px;\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 35px;\r\nheight: 35px;\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.volume-control {\r\ngap: 0.5rem;\r\n}\r\n\r\n.volume-slider {\r\nwidth: 50px;\r\n}\r\n\r\n.time-display {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.comments-header {\r\npadding: 0.75rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comments-count {\r\npadding: 0.2rem 0.5rem;\r\nfont-size: 0.7rem;\r\nmin-width: 30px;\r\n}\r\n\r\n.comment-item {\r\npadding: 0.8rem 0.9rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 30px;\r\nheight: 30px;\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-stats {\r\ngap: 0.8rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.7rem;\r\n}\r\n.scroll-indicator {\r\nposition: absolute;\r\nbottom: 20px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\nbackground: var(--gradient-purple);\r\ncolor: white;\r\npadding: 0.75rem 1.5rem;\r\nborder-radius: 25px;\r\nfont-size: 0.85rem;\r\nfont-weight: 600;\r\nbox-shadow: var(--shadow-lg);\r\nz-index: 100;\r\ndisplay: none !important;\r\nalign-items: center;\r\ngap: 0.5rem;\r\nanimation: scrollPulse 2s ease-in-out infinite;\r\ncursor: pointer;\r\ntransition: all 0.3s ease;\r\n}\r\n}\r\n\r\n@media (max-width: 375px) {\r\n.container_tiktok {\r\npadding: 0.4rem;\r\n}\r\n\r\n.header {\r\npadding: 0.6rem;\r\nborder-radius: 10px;\r\n}\r\n\r\n.logo-icon {\r\nwidth: 40px;\r\nheight: 40px;\r\nfont-size: 1.2rem;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.3rem;\r\n}\r\n\r\n.logo-subtitle {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.search-input {\r\npadding: 0.5rem 0.7rem !important;\r\nfont-size: 0.75rem !important;\r\n}\r\n\r\n.search-btn,\r\n.search-another-btn {\r\nfont-size: 0.75rem;\r\npadding: 0.45rem 0.9rem;\r\nborder-radius: 8px;\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nborder-radius: 10px;\r\n}\r\n\r\n.video-stats-bar {\r\npadding: 0.6rem 0.7rem;\r\ngap: 0.5rem;\r\n}\r\n\r\n.video-stat-item {\r\nfont-size: 0.65rem;\r\npadding: 0.2rem 0.4rem;\r\n}\r\n\r\n.video-title {\r\nfont-size: 0.85rem;\r\nmargin-bottom: 0.75rem;\r\n}\r\n\r\n.author-avatar {\r\nwidth: 32px;\r\nheight: 32px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 190px; \/* Smallest video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 40px;\r\nheight: 40px;\r\nfont-size: 1rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 28px;\r\nheight: 28px;\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 32px;\r\nheight: 32px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.volume-slider {\r\nwidth: 45px;\r\n}\r\n\r\n.time-display {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.comments-header {\r\npadding: 0.6rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 0.85rem;\r\ngap: 0.4rem;\r\n}\r\n\r\n.comments-count {\r\npadding: 0.15rem 0.4rem;\r\nfont-size: 0.65rem;\r\nmin-width: 28px;\r\n}\r\n\r\n.comment-item {\r\npadding: 0.7rem 0.8rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 28px;\r\nheight: 28px;\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.75rem;\r\nmargin-bottom: 0.6rem;\r\n}\r\n\r\n.comment-stats {\r\ngap: 0.7rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.comment-meta {\r\nfont-size: 0.6rem;\r\ngap: 0.7rem;\r\n}\r\n.scroll-indicator {\r\nposition: absolute;\r\nbottom: 20px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\nbackground: var(--gradient-purple);\r\ncolor: white;\r\npadding: 0.75rem 1.5rem;\r\nborder-radius: 25px;\r\nfont-size: 0.85rem;\r\nfont-weight: 600;\r\nbox-shadow: var(--shadow-lg);\r\nz-index: 100;\r\ndisplay: none !important;\r\nalign-items: center;\r\ngap: 0.5rem;\r\nanimation: scrollPulse 2s ease-in-out infinite;\r\ncursor: pointer;\r\ntransition: all 0.3s ease;\r\n}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n<div class=\"tiktok_body\">\r\n<div class=\"container_tiktok\">\r\n<!-- Header -->\r\n<div class=\"header\">\r\n    <div class=\"header-content\">\r\n        <div class=\"logo\">\r\n            <div class=\"logo-icon\">\r\n                <i class=\"fab fa-tiktok\"><\/i>\r\n            <\/div>\r\n            <div>\r\n                <h1 class=\"logo-text\">TikTok Comments Viewer<\/h1>\r\n                <p class=\"logo-subtitle\">Premium Video & Comments Experience<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"search-container\">\r\n            <form class=\"search-form\" onsubmit=\"loadContent(event)\">\r\n                <input type=\"text\" class=\"search-input\" id=\"urlInput\"\r\n                    placeholder=\"Enter TikTok video URL or ID...\" required>\r\n                <div class=\"button-group\">\r\n                    <button type=\"submit\" class=\"search-btn\" id=\"searchBtn\">\r\n                        <i class=\"fas fa-search\"><\/i>\r\n                        <span>Get Comments<\/span>\r\n                    <\/button>\r\n                    <button type=\"button\" class=\"search-another-btn hidden\" id=\"searchAnotherBtn\"\r\n                        onclick=\"resetSearch()\">\r\n                        <i class=\"fas fa-redo\"><\/i>\r\n                        <span>Search Another<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Main Content -->\r\n<div class=\"main-content\">\r\n    <!-- Video Section -->\r\n    <div class=\"video-section\">\r\n        <div class=\"loading-state\" id=\"videoLoading\">\r\n            <div class=\"loading-spinner\"><\/div>\r\n            <div class=\"loading-text\">Loading Video...<\/div>\r\n            <div class=\"loading-subtext\">Fetching video details and preparing player<\/div>\r\n        <\/div>\r\n\r\n        <div id=\"videoContent\" style=\"display: none; height: 100%; display: flex; flex-direction: column;\">\r\n            <!-- Video Stats Bar -->\r\n            <div class=\"video-stats-bar\">\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-eye\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"viewCount\">0<\/span>\r\n                    <span>views<\/span>\r\n                <\/div>\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-heart\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"likeCount\">0<\/span>\r\n                    <span>likes<\/span>\r\n                <\/div>\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-comment\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"commentCount\">0<\/span>\r\n                    <span>comments<\/span>\r\n                <\/div>\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-share\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"shareCount\">0<\/span>\r\n                    <span>shares<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"video-header\">\r\n                <h2 class=\"video-title\" id=\"videoTitle\">Video Title<\/h2>\r\n\r\n                <div class=\"video-author\">\r\n                    <div class=\"author-avatar\" id=\"authorAvatar\">\r\n                        <i class=\"fas fa-user\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"author-info\">\r\n                        <h4 id=\"authorName\">\r\n                            Author Name\r\n                            <i class=\"fas fa-check-circle author-verified\" id=\"authorVerified\"\r\n                                style=\"display: none;\"><\/i>\r\n                        <\/h4>\r\n                        <p class=\"author-username\" id=\"authorUsername\">@username<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"video-player-container\">\r\n                <div class=\"video-player-wrapper\">\r\n                    <img decoding=\"async\" class=\"video-thumbnail\" id=\"videoThumbnail\" src=\"\/placeholder.svg?height=640&width=360\"\r\n                        alt=\"Video Thumbnail\">\r\n                    <div class=\"video-overlay\" id=\"videoOverlay\" onclick=\"playVideo()\">\r\n                        <button class=\"play-button\">\r\n                            <i class=\"fas fa-play\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                    <video class=\"video-player\" id=\"videoPlayer\" loop>\r\n                        Your browser doesn't support video playback.\r\n                    <\/video>\r\n\r\n                    <div class=\"video-controls\">\r\n                        <div class=\"progress-container\">\r\n                            <div class=\"progress-bar\" onclick=\"seekVideo(event)\">\r\n                                <div class=\"progress-fill\" id=\"progressFill\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"control-buttons\">\r\n                            <div class=\"control-group\">\r\n                                <button class=\"control-btn play-control-btn\" onclick=\"togglePlay()\"\r\n                                    id=\"playBtn\">\r\n                                    <i class=\"fas fa-play\"><\/i>\r\n                                <\/button>\r\n                                <div class=\"time-display\">\r\n                                    <span id=\"currentTime\">0:00<\/span> \/ <span id=\"duration\">0:00<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <div class=\"control-group volume-control\">\r\n                                <button class=\"control-btn\" onclick=\"toggleMute()\" id=\"muteBtn\">\r\n                                    <i class=\"fas fa-volume-up\"><\/i>\r\n                                <\/button>\r\n                                <div class=\"volume-slider\" onclick=\"setVolume(event)\">\r\n                                    <div class=\"volume-fill\" id=\"volumeFill\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"empty-state\" id=\"videoEmptyState\">\r\n            <i class=\"fas fa-video\"><\/i>\r\n            <h3>No Video Loaded<\/h3>\r\n            <p>Enter a TikTok URL to view video and comments<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Comments Section -->\r\n    <div class=\"comments-section\">\r\n        <div class=\"comments-header\">\r\n            <h3 class=\"comments-title\">\r\n                <i class=\"fas fa-comments\"><\/i>\r\n                Comments\r\n                <span class=\"comments-count\" id=\"commentsCount\">0<\/span>\r\n            <\/h3>\r\n        <\/div>\r\n\r\n        <div class=\"error-message\" id=\"commentsError\">\r\n            <i class=\"fas fa-exclamation-triangle\"><\/i>\r\n            <span id=\"commentsErrorText\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"comments-container\" id=\"commentsContainer\">\r\n            <div class=\"loading-state\" id=\"commentsLoading\">\r\n                <div class=\"loading-spinner\"><\/div>\r\n                <div class=\"loading-text\">Loading Comments...<\/div>\r\n                <div class=\"loading-subtext\">Fetching all comments from this video<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"comments-list\" id=\"commentsList\">\r\n                <!-- Comments will be populated here -->\r\n            <\/div>\r\n\r\n            <!-- Scroll Indicator -->\r\n            <div class=\"scroll-indicator\" id=\"scrollIndicator\" onclick=\"scrollToBottom()\">\r\n                <i class=\"fas fa-chevron-down\"><\/i>\r\n                <span>More comments below<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"empty-state\" id=\"commentsEmptyState\">\r\n            <i class=\"fas fa-comment-slash\"><\/i>\r\n            <h3>No Comments<\/h3>\r\n            <p>Load a video to view all comments<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/div>\r\n<script src=\"https:\/\/tools.xrespond.com\/api\/rate-limit-handler.js\"><\/script>\r\n<script src=\"https:\/\/tools.xrespond.com\/api\/js\/client-ip-detector.js\"><\/script>\r\n\r\n<script>\r\n\/\/ Global variables\r\nlet currentVideoData = null;\r\nlet currentComments = [];\r\nlet isLoadingComments = false;\r\nlet currentVideoUrl = '';\r\nlet currentVolume = 1;\r\nlet isMuted = false;\r\n\r\n\/** First successful Get Comments per 24h opens affiliate in a new tab; resets every 24 hours per browser. *\/\r\nconst AFFILIATE_REDIRECT_URL = 'https:\/\/amzn.to\/4lQZ9QT';\r\nconst AFFILIATE_REDIRECT_STORAGE_KEY = 'fbViewerAffiliateRedirectAt';\r\nconst AFFILIATE_REDIRECT_MS = 24 * 60 * 60 * 1000;\r\n\r\nfunction shouldAffiliateRedirect() {\r\n    try {\r\n        const raw = localStorage.getItem(AFFILIATE_REDIRECT_STORAGE_KEY);\r\n        if (!raw) return true;\r\n        const last = parseInt(raw, 10);\r\n        if (Number.isNaN(last)) return true;\r\n        return (Date.now() - last) >= AFFILIATE_REDIRECT_MS;\r\n    } catch (e) {\r\n        \/\/ Private mode \/ sandboxed iframe: do not redirect\r\n        return false;\r\n    }\r\n}\r\n\r\nfunction recordAffiliateRedirect() {\r\n    try {\r\n        localStorage.setItem(AFFILIATE_REDIRECT_STORAGE_KEY, String(Date.now()));\r\n    } catch (e) {\r\n        \/* ignore *\/\r\n    }\r\n}\r\n\r\n\/\/ API URLs\r\nconst VIDEO_API_URL = 'https:\/\/tools.xrespond.com\/api\/tiktok\/profile\/videos\/details';\r\nconst COMMENTS_API_URL = 'https:\/\/tools.xrespond.com\/api\/tiktok\/profile\/videos\/comments';\r\n\r\n\/\/ Utility functions\r\nfunction formatNumber(num) {\r\n    if (num >= 1000000) {\r\n        return (num \/ 1000000).toFixed(1) + 'M';\r\n    }\r\n    if (num >= 1000) {\r\n        return (num \/ 1000).toFixed(1) + 'K';\r\n    }\r\n    return num.toString();\r\n}\r\n\r\nfunction formatTime(seconds) {\r\n    const mins = Math.floor(seconds \/ 60);\r\n    const secs = Math.floor(seconds % 60);\r\n    return `${mins}:${secs.toString().padStart(2, '0')}`;\r\n}\r\n\r\nfunction formatTimestamp(timestamp) {\r\n    const date = new Date(timestamp * 1000);\r\n    const now = new Date();\r\n    const diff = now - date;\r\n\r\n    const minutes = Math.floor(diff \/ 60000);\r\n    const hours = Math.floor(diff \/ 3600000);\r\n    const days = Math.floor(diff \/ 86400000);\r\n\r\n    if (minutes < 60) return `${minutes}m ago`;\r\n    if (hours < 24) return `${hours}h ago`;\r\n    if (days < 30) return `${days}d ago`;\r\n    return date.toLocaleDateString();\r\n}\r\n\r\nfunction getInitials(name) {\r\n    return name.split(' ').map(word => word[0]).join('').toUpperCase().slice(0, 2);\r\n}\r\n\r\nfunction showError(elementId, message) {\r\n    const errorElement = document.getElementById(elementId);\r\n    const errorText = document.getElementById(elementId + 'Text');\r\n    if (errorText) errorText.textContent = message;\r\n    errorElement.classList.add('show');\r\n    setTimeout(() => errorElement.classList.remove('show'), 5000);\r\n}\r\n\r\nfunction showLoading(elementId) {\r\n    document.getElementById(elementId).style.display = 'flex';\r\n}\r\n\r\nfunction hideLoading(elementId) {\r\n    document.getElementById(elementId).style.display = 'none';\r\n}\r\n\r\n\/\/ Scroll indicator functionality\r\nfunction setupScrollIndicator() {\r\n    const commentsContainer = document.getElementById('commentsContainer');\r\n    const scrollIndicator = document.getElementById('scrollIndicator');\r\n\r\n    commentsContainer.addEventListener('scroll', () => {\r\n        const { scrollTop, scrollHeight, clientHeight } = commentsContainer;\r\n        const scrollPercentage = (scrollTop \/ (scrollHeight - clientHeight)) * 100;\r\n\r\n        \/\/ Show indicator if not scrolled to bottom and there are comments\r\n        if (scrollPercentage < 95 && currentComments.length > 3) {\r\n            scrollIndicator.classList.add('show');\r\n        } else {\r\n            scrollIndicator.classList.remove('show');\r\n        }\r\n    });\r\n}\r\n\r\nfunction scrollToBottom() {\r\n    const commentsContainer = document.getElementById('commentsContainer');\r\n    commentsContainer.scrollTo({\r\n        top: commentsContainer.scrollHeight,\r\n        behavior: 'smooth'\r\n    });\r\n}\r\n\r\n\/\/ Reset search\r\nfunction resetSearch() {\r\n    document.getElementById('urlInput').value = '';\r\n    document.getElementById('videoContent').style.display = 'none';\r\n    document.getElementById('videoEmptyState').style.display = 'flex';\r\n    document.getElementById('commentsEmptyState').style.display = 'flex';\r\n    document.getElementById('commentsList').innerHTML = '';\r\n    document.getElementById('scrollIndicator').classList.remove('show');\r\n    document.getElementById('searchAnotherBtn').classList.add('hidden');\r\n\r\n    currentVideoData = null;\r\n    currentComments = [];\r\n    currentVideoUrl = '';\r\n\r\n    \/\/ Reset video player\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    videoPlayer.src = '';\r\n    videoPlayer.classList.remove('playing');\r\n    document.getElementById('videoOverlay').style.display = 'flex';\r\n    document.getElementById('videoThumbnail').style.display = 'block';\r\n    document.getElementById('playBtn').innerHTML = '<i class=\"fas fa-play\"><\/i>';\r\n}\r\n\r\n\/\/ Main load function\r\nasync function loadContent(event) {\r\n    const e = event || (typeof window !== 'undefined' ? window.event : null);\r\n    if (e && typeof e.preventDefault === 'function') {\r\n        e.preventDefault();\r\n    }\r\n    if (e && typeof e.stopPropagation === 'function') {\r\n        e.stopPropagation();\r\n    }\r\n\r\n    const url = document.getElementById('urlInput').value.trim();\r\n    if (!url) return;\r\n\r\n    if (shouldAffiliateRedirect()) {\r\n        recordAffiliateRedirect();\r\n        const affWin = window.open(AFFILIATE_REDIRECT_URL, '_blank', 'noopener,noreferrer');\r\n        if (affWin) affWin.opener = null;\r\n    }\r\n\r\n    currentVideoUrl = url;\r\n\r\n    \/\/ Reset states\r\n    document.getElementById('videoContent').style.display = 'none';\r\n    document.getElementById('videoEmptyState').style.display = 'none';\r\n    document.getElementById('commentsEmptyState').style.display = 'none';\r\n    document.getElementById('commentsList').innerHTML = '';\r\n    document.getElementById('scrollIndicator').classList.remove('show');\r\n    document.getElementById('searchAnotherBtn').classList.add('hidden'); \/\/ Hide search another button initially\r\n\r\n    currentComments = [];\r\n\r\n    \/\/ Disable search button\r\n    const searchBtn = document.getElementById('searchBtn');\r\n    if (searchBtn) {\r\n        searchBtn.disabled = true;\r\n        searchBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i><span>Loading...<\/span>';\r\n    }\r\n\r\n    \/\/ Load video and comments simultaneously\r\n    try {\r\n        await Promise.all([\r\n            loadVideo(url),\r\n            loadComments(url)\r\n        ]);\r\n\r\n        \/\/ Show search another button\r\n        document.getElementById('searchAnotherBtn').classList.remove('hidden');\r\n    } finally {\r\n        if (searchBtn) {\r\n            searchBtn.disabled = false;\r\n            searchBtn.innerHTML = '<i class=\"fas fa-search\"><\/i><span>Get Comments<\/span>';\r\n        }\r\n\r\n        \/\/ Keep the input clean for display\r\n        const urlInput = document.getElementById('urlInput');\r\n        if (urlInput) {\r\n            const originalValue = urlInput.value;\r\n            urlInput.value = originalValue.split('?')[0].split('&')[0];\r\n        }\r\n    }\r\n}\r\nwindow.loadContent = loadContent;\r\n\r\n\/\/ Load video data\r\nasync function loadVideo(url) {\r\n    showLoading('videoLoading');\r\n\r\n    try {\r\n        const response = await fetch(VIDEO_API_URL, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify({ url: url })\r\n        });\r\n\r\n        const data = await response.json();\r\n\r\n        if (data.status !== 'success') {\r\n            throw new Error(data.message || 'Failed to load video');\r\n        }\r\n\r\n        currentVideoData = data.data.data;\r\n        displayVideo(currentVideoData);\r\n\r\n    } catch (error) {\r\n        console.error('Video load error:', error);\r\n        document.getElementById('videoEmptyState').style.display = 'flex';\r\n    } finally {\r\n        hideLoading('videoLoading');\r\n    }\r\n}\r\n\r\n\/\/ Display video data\r\nfunction displayVideo(data) {\r\n    \/\/ Video title\r\n    document.getElementById('videoTitle').textContent = data.title;\r\n\r\n    \/\/ Video stats\r\n    document.getElementById('viewCount').textContent = formatNumber(data.play_count);\r\n    document.getElementById('likeCount').textContent = formatNumber(data.digg_count);\r\n    document.getElementById('commentCount').textContent = formatNumber(data.comment_count);\r\n    document.getElementById('shareCount').textContent = formatNumber(data.share_count);\r\n\r\n    \/\/ Author info with better placeholder\r\n    const authorAvatar = document.getElementById('authorAvatar');\r\n    const authorName = document.getElementById('authorName');\r\n    const authorUsername = document.getElementById('authorUsername');\r\n    const authorVerified = document.getElementById('authorVerified');\r\n\r\n    if (data.author.avatar && data.author.avatar !== '\/placeholder.svg') {\r\n        authorAvatar.innerHTML = `<img decoding=\"async\" src=\"${data.author.avatar}\" alt=\"${data.author.nickname}\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 50%;\">`;\r\n    } else {\r\n        authorAvatar.innerHTML = getInitials(data.author.nickname || 'Author Name');\r\n    }\r\n\r\n    authorName.innerHTML = data.author.nickname || 'Author Name';\r\n    authorUsername.textContent = `@${data.author.unique_id || 'username'}`;\r\n\r\n    if (data.author.verified) {\r\n        authorVerified.style.display = 'inline';\r\n    }\r\n\r\n    \/\/ Video thumbnail\r\n    document.getElementById('videoThumbnail').src = data.cover || data.dynamic_cover || '\/placeholder.svg?height=640&width=360';\r\n\r\n    \/\/ Set video source\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    videoPlayer.src = data.play;\r\n    videoPlayer.addEventListener('loadedmetadata', () => {\r\n        document.getElementById('duration').textContent = formatTime(videoPlayer.duration);\r\n        videoPlayer.volume = currentVolume;\r\n        videoPlayer.muted = isMuted;\r\n        updateVolumeDisplay();\r\n    });\r\n    videoPlayer.addEventListener('timeupdate', updateProgress);\r\n\r\n    document.getElementById('videoContent').style.display = 'flex';\r\n}\r\n\r\n\/\/ Video player controls\r\nfunction playVideo() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const videoOverlay = document.getElementById('videoOverlay');\r\n    const videoThumbnail = document.getElementById('videoThumbnail');\r\n\r\n    videoThumbnail.style.display = 'none';\r\n    videoOverlay.style.display = 'none';\r\n    videoPlayer.classList.add('playing');\r\n    videoPlayer.play();\r\n    document.getElementById('playBtn').innerHTML = '<i class=\"fas fa-pause\"><\/i>';\r\n}\r\n\r\nfunction togglePlay() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const playBtn = document.getElementById('playBtn');\r\n\r\n    if (videoPlayer.paused) {\r\n        videoPlayer.play();\r\n        playBtn.innerHTML = '<i class=\"fas fa-pause\"><\/i>';\r\n    } else {\r\n        videoPlayer.pause();\r\n        playBtn.innerHTML = '<i class=\"fas fa-play\"><\/i>';\r\n    }\r\n}\r\n\r\nfunction toggleMute() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const muteBtn = document.getElementById('muteBtn');\r\n\r\n    if (isMuted) {\r\n        isMuted = false;\r\n        videoPlayer.muted = false;\r\n        videoPlayer.volume = currentVolume;\r\n        muteBtn.innerHTML = '<i class=\"fas fa-volume-up\"><\/i>';\r\n    } else {\r\n        isMuted = true;\r\n        videoPlayer.muted = true;\r\n        muteBtn.innerHTML = '<i class=\"fas fa-volume-mute\"><\/i>';\r\n    }\r\n\r\n    updateVolumeDisplay();\r\n}\r\n\r\nfunction setVolume(event) {\r\n    const volumeSlider = event.currentTarget;\r\n    const rect = volumeSlider.getBoundingClientRect();\r\n    const pos = (event.clientX - rect.left) \/ rect.width;\r\n    currentVolume = Math.max(0, Math.min(1, pos));\r\n\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    videoPlayer.volume = currentVolume;\r\n\r\n    if (currentVolume === 0) {\r\n        isMuted = true;\r\n        videoPlayer.muted = true;\r\n        document.getElementById('muteBtn').innerHTML = '<i class=\"fas fa-volume-mute\"><\/i>';\r\n    } else {\r\n        isMuted = false;\r\n        videoPlayer.muted = false;\r\n        document.getElementById('muteBtn').innerHTML = '<i class=\"fas fa-volume-up\"><\/i>';\r\n    }\r\n\r\n    updateVolumeDisplay();\r\n}\r\n\r\nfunction updateVolumeDisplay() {\r\n    const volumeFill = document.getElementById('volumeFill');\r\n    const displayVolume = isMuted ? 0 : currentVolume;\r\n    volumeFill.style.width = `${displayVolume * 100}%`;\r\n}\r\n\r\nfunction seekVideo(event) {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const progressBar = event.currentTarget;\r\n    const rect = progressBar.getBoundingClientRect();\r\n    const pos = (event.clientX - rect.left) \/ rect.width;\r\n    videoPlayer.currentTime = pos * videoPlayer.duration;\r\n}\r\n\r\nfunction updateProgress() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const progressFill = document.getElementById('progressFill');\r\n    const currentTimeDisplay = document.getElementById('currentTime');\r\n\r\n    const progress = (videoPlayer.currentTime \/ videoPlayer.duration) * 100;\r\n    progressFill.style.width = `${progress}%`;\r\n    currentTimeDisplay.textContent = formatTime(videoPlayer.currentTime);\r\n}\r\n\r\n\/\/ Load comments\r\nasync function loadComments(url) {\r\n    if (isLoadingComments) return;\r\n\r\n    isLoadingComments = true;\r\n    showLoading('commentsLoading');\r\n    document.getElementById('commentsEmptyState').style.display = 'none';\r\n\r\n    try {\r\n        const response = await fetch(COMMENTS_API_URL, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify({ url: url })\r\n        });\r\n\r\n        const data = await response.json();\r\n\r\n        if (data.status !== 'success') {\r\n            throw new Error(data.message || 'Failed to load comments');\r\n        }\r\n\r\n        const comments = data.data.data.comments || [];\r\n        const total = comments.length; \/\/ Use actual loaded comments count\r\n\r\n        currentComments = comments;\r\n        document.getElementById('commentsCount').textContent = total;\r\n\r\n        displayComments(comments);\r\n        setupScrollIndicator();\r\n\r\n    } catch (error) {\r\n        console.error('Comments load error:', error);\r\n        showError('commentsError', error.message);\r\n        document.getElementById('commentsEmptyState').style.display = 'flex';\r\n    } finally {\r\n        isLoadingComments = false;\r\n        hideLoading('commentsLoading');\r\n    }\r\n}\r\n\r\n\/\/ Display comments\r\nfunction displayComments(comments) {\r\n    const commentsList = document.getElementById('commentsList');\r\n    commentsList.innerHTML = '';\r\n\r\n    comments.forEach((comment, index) => {\r\n        const commentElement = createCommentElement(comment, index);\r\n        commentsList.appendChild(commentElement);\r\n    });\r\n\r\n    \/\/ Trigger scroll indicator check\r\n    setTimeout(() => {\r\n        const commentsContainer = document.getElementById('commentsContainer');\r\n        if (commentsContainer.scrollHeight > commentsContainer.clientHeight && comments.length > 3) {\r\n            document.getElementById('scrollIndicator').classList.add('show');\r\n        }\r\n    }, 500);\r\n}\r\n\r\n\/\/ Create comment element\r\nfunction createCommentElement(comment, index) {\r\n    const commentDiv = document.createElement('div');\r\n    commentDiv.className = 'comment-item';\r\n    commentDiv.style.animationDelay = `${index * 0.05}s`;\r\n\r\n    const verifiedBadge = comment.user.verified ? '<i class=\"fas fa-check-circle comment-verified\" title=\"Verified\"><\/i>' : '';\r\n    const regionBadge = comment.user.region ? `<span class=\"comment-region\">${comment.user.region}<\/span>` : '';\r\n\r\n    \/\/ Create avatar with fallback\r\n    let avatarContent;\r\n    if (comment.user.avatar && comment.user.avatar !== '\/placeholder.svg') {\r\n        avatarContent = `<img decoding=\"async\" src=\"${comment.user.avatar}\" alt=\"${comment.user.nickname}\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 50%;\" onerror=\"this.parentElement.innerHTML='${getInitials(comment.user.nickname)}'\">`;\r\n    } else {\r\n        avatarContent = getInitials(comment.user.nickname);\r\n    }\r\n\r\n    commentDiv.innerHTML = `\r\n        <div class=\"comment-header\">\r\n            <div class=\"comment-avatar\">${avatarContent}<\/div>\r\n            <div class=\"comment-info\">\r\n                <div class=\"comment-user-info\">\r\n                    <span class=\"comment-author\">${comment.user.nickname}<\/span>\r\n                    ${verifiedBadge}\r\n                    <span class=\"comment-username\">@${comment.user.unique_id}<\/span>\r\n                    ${regionBadge}\r\n                <\/div>\r\n                <div class=\"comment-text\">${comment.text}<\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"comment-footer\">\r\n            <div class=\"comment-stats\">\r\n                <div class=\"comment-stat\" title=\"Likes\">\r\n                    <i class=\"fas fa-heart\"><\/i>\r\n                    <span>${formatNumber(comment.digg_count)}<\/span>\r\n                <\/div>\r\n                <div class=\"comment-stat\" title=\"Replies\">\r\n                    <i class=\"fas fa-reply\"><\/i>\r\n                    <span>${formatNumber(comment.reply_total)}<\/span>\r\n                <\/div>\r\n                <div class=\"comment-stat\" title=\"Followers\">\r\n                    <i class=\"fas fa-users\"><\/i>\r\n                    <span>${formatNumber(comment.user.follower_count)}<\/span>\r\n                <\/div>\r\n                <div class=\"comment-stat\" title=\"Videos\">\r\n                    <i class=\"fas fa-video\"><\/i>\r\n                    <span>${formatNumber(comment.user.aweme_count)}<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"comment-meta\">\r\n                <span class=\"comment-time\">${formatTimestamp(comment.create_time)}<\/span>\r\n                <span class=\"comment-id\">#${comment.id.slice(-6)}<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    `;\r\n\r\n    return commentDiv;\r\n}\r\n\r\n\/\/ Initialize\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    document.getElementById('urlInput').focus();\r\n    setupScrollIndicator();\r\n});\r\n\r\n\/\/ Handle Enter key in search input\r\ndocument.getElementById('urlInput').addEventListener('keypress', function (e) {\r\n    if (e.key === 'Enter') {\r\n        e.preventDefault();\r\n        loadContent(e);\r\n    }\r\n});\r\n<\/script>\r\n<\/div>\r\n\r\n[\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; module_alignment=&#8221;center&#8221; max_width=&#8221;1280px&#8221; custom_padding=&#8221;25px||25px||true|false&#8221; sticky_enabled=&#8221;0&#8243; locked=&#8221;off&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; sticky_enabled=&#8221;0&#8243;][\/et_pb_fullwidth_code][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; fullwidth=&#8221;on&#8221; _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_fullwidth_code _builder_version=&#8221;4.27.4&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]<style>\r\n        :root {\r\n            --ttc-primary: #ff0050;\r\n            --ttc-secondary: #00f2ea;\r\n            --ttc-dark: #000000;\r\n            --ttc-light: #ffffff;\r\n            --ttc-gray: #f1f1f2;\r\n            --ttc-text: #161823;\r\n            --ttc-border: #e1e1e2;\r\n        }\r\n        \r\n  \r\n        .ttc-container {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 20px;\r\n        }\r\n\t\r\n        \/* Hero Section - ttc-hero- prefix *\/\r\n        .ttc-hero-section {\r\n            background: linear-gradient(135deg, var(--ttc-dark) 0%, var(--ttc-primary) 50%, #ff6b9d 100%);\r\n            color: var(--ttc-light);\r\n            padding: 100px 0;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .ttc-hero-section::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"black\" fill-opacity=\"0.2\"\/><circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"white\" fill-opacity=\"0.05\"\/><\/svg>');\r\n            opacity: 0.1;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .ttc-hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n        }\r\n        \r\n        .ttc-hero-heading {\r\n            font-size: 3.5rem;\r\n            font-weight: 800;\r\n            margin-bottom: 20px;\r\n            text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .ttc-hero-desc {\r\n            font-size: 1.3rem;\r\n            max-width: 700px;\r\n            margin: 0 auto 40px;\r\n            opacity: 0.9;\r\n        }\r\n        \r\n        .ttc-hero-search {\r\n            max-width: 700px;\r\n            margin: 0 auto 30px;\r\n            display: flex;\r\n            background: rgba(255,255,255,0.15);\r\n            border-radius: 50px;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255,255,255,0.2);\r\n        }\r\n        \r\n        .ttc-hero-search input {\r\n            flex: 1;\r\n            padding: 18px 25px;\r\n            border: none;\r\n            background: transparent;\r\n            color: var(--ttc-light);\r\n            font-size: 1.1rem;\r\n            outline: none;\r\n        }\r\n        \r\n        .ttc-hero-search input::placeholder {\r\n            color: rgba(255,255,255,0.7);\r\n        }\r\n        \r\n        .ttc-hero-search button {\r\n            padding: 18px 30px;\r\n            background: var(--ttc-primary);\r\n            color: white;\r\n            border: none;\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .ttc-hero-search button:hover {\r\n            background: #e60045;\r\n        }\r\n        \r\n        .ttc-hero-visual {\r\n            margin-top: 50px;\r\n            position: relative;\r\n            max-width: 500px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n        \r\n        .ttc-hero-mockup {\r\n            background: rgba(0,0,0,0.3);\r\n            border-radius: 20px;\r\n            padding: 20px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .ttc-hero-mockup::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);\r\n            animation: shimmer 2s infinite;\r\n        }\r\n        \r\n        @keyframes shimmer {\r\n            0% { transform: translateX(-100%); }\r\n            100% { transform: translateX(100%); }\r\n        }\r\n        \r\n        .ttc-hero-mockup-header {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .ttc-hero-mockup-avatar {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            background: var(--ttc-gray);\r\n            margin-right: 10px;\r\n        }\r\n        \r\n        .ttc-hero-mockup-username {\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .ttc-hero-mockup-content {\r\n            background: rgba(0,0,0,0.2);\r\n            height: 150px;\r\n            border-radius: 10px;\r\n            position: relative;\r\n        }\r\n        \r\n        .ttc-hero-mockup-icon {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            font-size: 3rem;\r\n            opacity: 0.7;\r\n        }\r\n        \r\n        \/* How It Works Section - ttc-how- prefix *\/\r\n        .ttc-how-section {\r\n            padding: 80px 0;\r\n            background: #f8f9fa;\r\n        }\r\n        \r\n        .ttc-how-heading {\r\n            text-align: center;\r\n            font-size: 2.5rem;\r\n            margin-bottom: 20px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-how-desc {\r\n            text-align: center;\r\n            max-width: 700px;\r\n            margin: 0 auto 60px;\r\n            color: #6e6e73;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .ttc-how-steps {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .ttc-how-step {\r\n            flex: 1;\r\n            min-width: 280px;\r\n            margin: 0 15px 30px;\r\n            text-align: center;\r\n            padding: 30px 20px;\r\n            border-radius: 15px;\r\n            background: white;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n        \r\n        .ttc-how-step:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 15px 30px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .ttc-how-step-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: linear-gradient(135deg, var(--ttc-primary), #ff6b9d);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 20px;\r\n            font-size: 2rem;\r\n            color: white;\r\n        }\r\n        \r\n        .ttc-how-step-title {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 15px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-how-step-desc {\r\n            color: #6e6e73;\r\n        }\r\n        \r\n        \/* Features Section - ttc-features- prefix *\/\r\n        .ttc-features-section {\r\n            padding: 80px 0;\r\n            background: linear-gradient(to bottom, #e9ecef, #f8f9fa);\r\n        }\r\n        \r\n        .ttc-features-heading {\r\n            text-align: center;\r\n            font-size: 2.5rem;\r\n            margin-bottom: 20px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-features-desc {\r\n            text-align: left;\r\n            max-width: 700px;\r\n            margin: 0 auto 60px;\r\n            color: #6e6e73;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .ttc-features-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 30px;\r\n        }\r\n        \r\n        .ttc-features-item {\r\n            background: white;\r\n            border-radius: 15px;\r\n            padding: 30px;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .ttc-features-item:hover {\r\n            transform: translateY(-5px);\r\n        }\r\n        \r\n        .ttc-features-icon {\r\n            width: 60px;\r\n            height: 60px;\r\n            background: linear-gradient(135deg, var(--ttc-primary), #ff6b9d);\r\n            border-radius: 15px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin-bottom: 20px;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n        \r\n        .ttc-features-title {\r\n            font-size: 1.3rem;\r\n            margin-bottom: 15px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-features-desc {\r\n            color: #6e6e73;\r\n        }\r\n        \r\n         \/* FAQ Section - ttc-faq- prefix *\/\r\n\t\t\t\t.ttc-faq-section {\r\n\t\t\t\t\t\tpadding: 80px 0;\r\n\t\t\t\t\t\tbackground: #ffffff;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-heading {\r\n\t\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\t\tfont-size: 2.5rem;\r\n\t\t\t\t\t\tmargin-bottom: 20px;\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-desc {\r\n\t\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\t\tmax-width: 700px;\r\n\t\t\t\t\t\tmargin: 0 auto 60px;\r\n\t\t\t\t\t\tcolor: #6e6e73;\r\n\t\t\t\t\t\tfont-size: 1.1rem;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t\/* Bootstrap Accordion Custom Styling *\/\r\n\t\t\t\t.ttc-faq-accordion {\r\n\t\t\t\t\t\tmax-width: 800px;\r\n\t\t\t\t\t\tmargin: 0 auto;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-item {\r\n\t\t\t\t\t\tborder: none;\r\n\t\t\t\t\t\tmargin-bottom: 15px;\r\n\t\t\t\t\t\tborder-radius: 10px;\r\n\t\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\t\tbox-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button {\r\n\t\t\t\t\t\tbackground-color: var(--ttc-gray);\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t\t\tfont-weight: 700;\r\n\t\t\t\t\t\tfont-size: 1.1rem;\r\n\t\t\t\t\t\tpadding: 20px 25px;\r\n\t\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t\t\tborder: none;\r\n\t\t\t\t\t\tborder-radius: 0;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button:not(.collapsed) {\r\n\t\t\t\t\t\tbackground-color: var(--ttc-gray);\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button:focus {\r\n\t\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t\t\tborder: none;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button::after {\r\n\t\t\t\t\t\tbackground-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23161823'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button:not(.collapsed)::after {\r\n\t\t\t\t\t\tbackground-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23161823'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n\t\t\t\t\t\ttransform: rotate(180deg);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-body {\r\n\t\t\t\t\t\tbackground-color: white;\r\n\t\t\t\t\t\tcolor: #6e6e73;\r\n\t\t\t\t\t\tpadding: 20px 25px;\r\n\t\t\t\t\t\tfont-size: 1rem;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-accordion .accordion-button:not(.collapsed) {\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t\t\tbackground-color: var(--ttc-gray);\r\n\t\t\t\t\t\tbox-shadow: inset 0 -1px 0 rgba(0,0,0,.125);\r\n\t\t\t\t}\r\n\r\n        \/* Footer - ttc-footer- prefix *\/\r\n        .ttc-footer-section {\r\n            background: var(--ttc-dark);\r\n            color: var(--ttc-light);\r\n            padding: 40px 0;\r\n            text-align: center;\r\n        }\r\n        \r\n        .ttc-footer-desc {\r\n            margin-bottom: 15px;\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .ttc-footer-links a {\r\n            color: var(--ttc-primary);\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n            margin: 0 10px;\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            .ttc-hero-heading {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .ttc-hero-desc {\r\n                font-size: 1.1rem;\r\n            }\r\n            \r\n            .ttc-how-steps {\r\n                flex-direction: column;\r\n            }\r\n            \r\n            .ttc-how-step {\r\n                margin: 0 0 30px;\r\n            }\r\n        }\r\n    <\/style>\r\n<!-- Hero Section -->\r\n\r\n    <!-- How It Works Section -->\r\n    <section class=\"ttc-how-section\">\r\n        <div class=\"ttc-container\">\r\n            <h2 class=\"ttc-how-heading\">How It Works<\/h2>\r\n            <p class=\"ttc-how-desc\">Our simple three-step process lets you view TikTok comments anonymously in seconds<\/p>\r\n            <div class=\"ttc-how-steps\">\r\n                <div class=\"ttc-how-step\">\r\n                    <div class=\"ttc-how-step-icon\">\r\n                        <i class=\"fas fa-copy\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-how-step-title\">Step 1<\/h3>\r\n                    <p class=\"ttc-how-step-desc\">Copy the URL of any TikTok video<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-how-step\">\r\n                    <div class=\"ttc-how-step-icon\">\r\n                        <i class=\"fas fa-paste\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-how-step-title\">Step 2<\/h3>\r\n                    <p class=\"ttc-how-step-desc\">Paste it into our comment viewer<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-how-step\">\r\n                    <div class=\"ttc-how-step-icon\">\r\n                        <i class=\"fas fa-comments\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-how-step-title\">Step 3<\/h3>\r\n                    <p class=\"ttc-how-step-desc\">Instantly see all public comments \u2014 without logging in<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Features Section -->\r\n    <section class=\"ttc-features-section\">\r\n        <div class=\"ttc-container\">\r\n            <h2 class=\"ttc-features-heading\">Why Use Our TikTok Comments Viewer?<\/h2>\r\n            <p class=\"ttc-features-desc\">Discover the benefits of our powerful, privacy-focused comment viewing tool<\/p>\r\n            <div class=\"ttc-features-grid\">\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-user-secret\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">Anonymous Viewing<\/h3>\r\n                    <p class=\"ttc-features-desc\">No TikTok login needed. View comments completely anonymously.<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-bolt\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">Fast & Clean<\/h3>\r\n                    <p class=\"ttc-features-desc\">Lightning-fast load times with a clutter-free interface.<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-mobile-alt\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">All Devices<\/h3>\r\n                    <p class=\"ttc-features-desc\">Fully responsive design works perfectly on desktop and mobile.<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-ban\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">No Ads, No Bloat<\/h3>\r\n                    <p class=\"ttc-features-desc\">Clean experience without annoying ads or unnecessary features.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- FAQ Section -->\r\n   <section class=\"ttc-faq-section\">\r\n    <div class=\"ttc-container\">\r\n        <h2 class=\"ttc-faq-heading\">Frequently Asked Questions<\/h2>\r\n        <p class=\"ttc-faq-desc\">Find answers to common questions about our TikTok Comments Viewer<\/p>\r\n        \r\n        <div class=\"accordion ttc-faq-accordion\" id=\"ttcFaqAccordion\">\r\n            <!-- FAQ Item 1 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading1\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse1\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse1\">\r\n                        Can I reply to comments?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse1\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading1\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        No, this tool is for viewing only. No login means no interaction.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 2 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading2\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse2\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse2\">\r\n                        Can I see deleted comments?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse2\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading2\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Only publicly available, live comments are visible.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 3 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading3\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse3\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse3\">\r\n                        Do I need to install anything?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse3\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading3\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Nope. It's 100% web-based and secure.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 4 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading4\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse4\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse4\">\r\n                        Is this service free?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse4\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading4\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Yes, our TikTok Comments Viewer is completely free to use with no hidden costs.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 5 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading5\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse5\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse5\">\r\n                        How often are comments updated?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse5\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading5\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Comments are fetched in real-time when you view a video, showing the latest available comments.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>[\/et_pb_fullwidth_code][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p><link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\"\r\nrel=\"stylesheet\">\r\n<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" rel=\"stylesheet\">\r\n<style>\r\n:root {\r\n    --primary: #ff0050;\r\n    --secondary: #00f2ea;\r\n    --accent: #ff4081;\r\n    --purple: #8b5cf6;\r\n    --orange: #ff8800;\r\n    --green: #00ff88;\r\n    --blue: #0ea5e9;\r\n    --bg-primary: #0f172a;\r\n    --bg-secondary: #1e293b;\r\n    --bg-tertiary: #334155;\r\n    --bg-card: rgba(30, 41, 59, 0.8);\r\n    --text-primary: #ffffff;\r\n    --text-secondary: #cbd5e1;\r\n    --text-muted: #64748b;\r\n    --border: #475569;\r\n    --border-light: #64748b;\r\n    --shadow: 0 4px 20px rgba(0, 0, 0, 0.4);\r\n    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);\r\n    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8);\r\n    --glow-primary: 0 0 30px rgba(255, 0, 80, 0.3);\r\n    --glow-secondary: 0 0 30px rgba(0, 242, 234, 0.3);\r\n    --gradient-primary: linear-gradient(135deg, #ff0050, #ff4081, #ff6b9d);\r\n    --gradient-secondary: linear-gradient(135deg, #00f2ea, #00d4aa, #00ff88);\r\n    --gradient-purple: linear-gradient(135deg, #8b5cf6, #a855f7, #c084fc);\r\n    --gradient-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);\r\n}\r\n\r\n* {\r\n    margin: 0;\r\n    padding: 0;\r\n    box-sizing: border-box;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.tiktok_body {\r\n    font-family: 'Inter', sans-serif;\r\n    background: var(--gradient-bg);\r\n    color: var(--text-primary);\r\n    overflow-x: hidden;\r\n    min-height: 100vh;\r\n    position: relative;\r\n}\r\n\r\n.tiktok_body::before {\r\n    content: '';\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background:\r\n        radial-gradient(circle at 20% 20%, rgba(255, 0, 80, 0.1) 0%, transparent 50%),\r\n        radial-gradient(circle at 80% 80%, rgba(0, 242, 234, 0.1) 0%, transparent 50%),\r\n        radial-gradient(circle at 40% 60%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);\r\n    pointer-events: none;\r\n    z-index: -1;\r\n}\r\n\r\n.container_tiktok{\r\n    max-width: 1600px;\r\n    margin: 0 auto;\r\n    padding: 1.5rem;\r\n    min-height: 100vh;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\/* Header *\/\r\n.header {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    padding: 2rem;\r\n    margin-bottom: 1.5rem;\r\n    box-shadow: var(--shadow-lg);\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.header::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    background: var(--gradient-primary);\r\n}\r\n\r\n.header-content {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo-icon {\r\n    width: 60px;\r\n    height: 60px;\r\n    background: var(--gradient-primary);\r\n    border-radius: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.8rem;\r\n    color: white;\r\n    box-shadow: var(--shadow-lg), var(--glow-primary);\r\n    animation: logoFloat 3s ease-in-out infinite;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.logo-icon::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n    animation: logoShine 3s ease-in-out infinite;\r\n}\r\n\r\n.logo-text {\r\n    font-size: 2.2rem;\r\n    font-weight: 900;\r\n    background: var(--gradient-primary);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    letter-spacing: -1px;\r\n}\r\n\r\n.logo-subtitle {\r\n    font-size: 0.9rem;\r\n    color: var(--text-secondary);\r\n    font-weight: 500;\r\n    margin-top: 0.25rem;\r\n}\r\n\r\n.search-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n    flex: 1;\r\n    max-width: 700px;\r\n    width: 100%;\r\n}\r\n\r\n.search-form {\r\n    display: flex;\r\n    gap: 1rem;\r\n    position: relative;\r\n    width: 100%;\r\n}\r\n\r\n.search-input {\r\n    flex: 1 !important;\r\n    padding: 1rem 1.5rem !important;\r\n    background: rgba(30, 41, 59, 0.9) !important;\r\n    backdrop-filter: blur(15px) !important;\r\n    border: 2px solid var(--border) !important;\r\n    border-radius: 16px !important;\r\n    color: var(--text-primary) !important;\r\n    font-size: 1rem !important;\r\n    font-weight: 500 !important;\r\n    outline: none !important;\r\n    transition: all 0.3s ease !important;\r\n    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;\r\n}\r\n\r\n.search-input:focus {\r\n    border-color: var(--primary) !important;\r\n    box-shadow: 0 0 0 4px rgba(255, 0, 80, 0.1), var(--glow-primary), inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;\r\n    transform: translateY(-2px) !important;\r\n    background: rgba(30, 41, 59, 0.95) !important;\r\n}\r\n\r\n.search-input::placeholder {\r\n    color: var(--text-muted);\r\n    font-weight: 400;\r\n}\r\n\r\n.search-input:not(:placeholder-shown) {\r\n    background: rgba(30, 41, 59, 0.95);\r\n    border-color: var(--border-light);\r\n    font-weight: 600;\r\n}\r\n\r\n.search-btn {\r\n    background: var(--gradient-primary);\r\n    border: none;\r\n    color: white;\r\n    padding: 1rem 2rem;\r\n    border-radius: 16px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    box-shadow: var(--shadow-lg);\r\n    position: relative;\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n}\r\n\r\n.search-btn::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: -100%;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n    transition: left 0.5s;\r\n}\r\n\r\n.search-btn:hover:not(:disabled)::before {\r\n    left: 100%;\r\n}\r\n\r\n.search-btn:hover:not(:disabled) {\r\n    transform: translateY(-3px);\r\n    box-shadow: var(--shadow-xl), var(--glow-primary);\r\n}\r\n\r\n.search-btn:disabled {\r\n    opacity: 0.6;\r\n    cursor: not-allowed;\r\n    transform: none;\r\n}\r\n\r\n.search-another-btn {\r\n    background: var(--bg-secondary);\r\n    border: 1px solid var(--border);\r\n    color: var(--text-primary);\r\n    padding: 1rem 1.5rem;\r\n    border-radius: 16px;\r\n    font-weight: 600;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    transition: all 0.3s ease;\r\n    white-space: nowrap;\r\n}\r\n\r\n.search-another-btn:hover {\r\n    background: var(--bg-tertiary);\r\n    transform: translateY(-2px);\r\n    box-shadow: var(--shadow);\r\n}\r\n\r\n.button-group {\r\n    display: flex;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n    flex-shrink: 0;\r\n}\r\n\r\n\/* Main Content *\/\r\n.main-content {\r\n    flex: 1;\r\n    display: grid;\r\n    grid-template-columns: 450px 1fr;\r\n    gap: 1.5rem;\r\n    min-height: 0;\r\n}\r\n\r\n\/* Video Section *\/\r\n.video-section {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    box-shadow: var(--shadow-lg);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    position: relative;\r\n}\r\n\r\n.video-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    background: var(--gradient-secondary);\r\n}\r\n\r\n\/* Video Stats Bar *\/\r\n.video-stats-bar {\r\n    padding: 1rem 1.5rem;\r\n    background: linear-gradient(135deg, rgba(255, 0, 80, 0.1), rgba(139, 92, 246, 0.1));\r\n    border-bottom: 1px solid var(--border);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.video-stat-item {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    font-size: 0.9rem;\r\n    color: var(--text-secondary);\r\n    padding: 0.5rem 1rem;\r\n    background: rgba(255, 255, 255, 0.05);\r\n    border-radius: 12px;\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n.video-stat-item i {\r\n    font-size: 1rem;\r\n}\r\n\r\n.video-stat-item .fa-eye {\r\n    color: #ec4899;\r\n}\r\n\r\n.video-stat-item .fa-heart {\r\n    color: #ef4444;\r\n}\r\n\r\n.video-stat-item .fa-comment {\r\n    color: #3b82f6;\r\n}\r\n\r\n.video-stat-item .fa-share {\r\n    color: #10b981;\r\n}\r\n\r\n.video-stat-value {\r\n    font-weight: 700;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.video-header {\r\n    padding: 1.5rem;\r\n    border-bottom: 1px solid var(--border);\r\n}\r\n\r\n.video-title {\r\n    font-size: 1.1rem;\r\n    font-weight: 700;\r\n    margin-bottom: 1rem;\r\n    line-height: 1.4;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.video-author {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    padding: 1rem;\r\n    background: linear-gradient(135deg, rgba(0, 242, 234, 0.1), rgba(59, 130, 246, 0.1));\r\n    border-radius: 16px;\r\n    border: 1px solid rgba(0, 242, 234, 0.2);\r\n    box-shadow: var(--shadow);\r\n}\r\n\r\n.author-avatar {\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 3px solid var(--secondary);\r\n    box-shadow: var(--shadow);\r\n    background: var(--gradient-secondary);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1.2rem;\r\n    color: white;\r\n    font-weight: 700;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.author-info {\r\n    flex: 1;\r\n}\r\n\r\n.author-info h4 {\r\n    font-size: 1.1rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.25rem;\r\n    color: var(--text-primary);\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n}\r\n\r\n.author-username {\r\n    font-size: 0.9rem;\r\n    color: var(--text-secondary);\r\n    font-weight: 500;\r\n}\r\n\r\n.author-verified {\r\n    color: var(--blue);\r\n    font-size: 0.9rem;\r\n}\r\n\r\n.video-player-container {\r\n    flex: 1;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 1.5rem;\r\n    position: relative;\r\n}\r\n\r\n.video-player-wrapper {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 320px;\r\n    aspect-ratio: 9\/16;\r\n    border-radius: 20px;\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow-xl);\r\n    background: #000;\r\n}\r\n\r\n.video-thumbnail {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.video-overlay {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: rgba(0, 0, 0, 0.4);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.video-overlay:hover {\r\n    background: rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n.play-button {\r\n    width: 80px;\r\n    height: 80px;\r\n    background: var(--gradient-primary);\r\n    border: none;\r\n    border-radius: 50%;\r\n    color: white;\r\n    font-size: 2rem;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-shadow: var(--shadow-xl), var(--glow-primary);\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.play-button::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    bottom: 0;\r\n    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);\r\n    transform: translateX(-100%);\r\n    transition: transform 0.5s;\r\n}\r\n\r\n.play-button:hover::before {\r\n    transform: translateX(100%);\r\n}\r\n\r\n.play-button:hover {\r\n    transform: scale(1.1);\r\n    box-shadow: var(--shadow-xl), var(--glow-primary);\r\n}\r\n\r\n.video-player {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: contain;\r\n    display: none;\r\n}\r\n\r\n.video-player.playing {\r\n    display: block;\r\n}\r\n\r\n\/* Video Controls *\/\r\n.video-controls {\r\n    position: absolute;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));\r\n    padding: 1.5rem;\r\n    transform: translateY(100%);\r\n    transition: transform 0.3s ease;\r\n    z-index: 10;\r\n}\r\n\r\n.video-player-wrapper:hover .video-controls {\r\n    transform: translateY(0);\r\n}\r\n\r\n.progress-container {\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.progress-bar {\r\n    width: 100%;\r\n    height: 6px;\r\n    background: rgba(255, 255, 255, 0.2);\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.progress-fill {\r\n    height: 100%;\r\n    background: var(--gradient-primary);\r\n    border-radius: 3px;\r\n    width: 0%;\r\n    transition: width 0.1s linear;\r\n    box-shadow: 0 0 10px rgba(255, 0, 80, 0.5);\r\n}\r\n\r\n.control-buttons {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n}\r\n\r\n.control-group {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n}\r\n\r\n.control-btn {\r\n    background: rgba(255, 255, 255, 0.15);\r\n    border: none;\r\n    color: white;\r\n    width: 42px;\r\n    height: 42px;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.3s ease;\r\n    backdrop-filter: blur(10px);\r\n    border: 1px solid rgba(255, 255, 255, 0.2);\r\n}\r\n\r\n.control-btn:hover {\r\n    background: rgba(255, 255, 255, 0.25);\r\n    transform: scale(1.1);\r\n    box-shadow: var(--shadow);\r\n}\r\n\r\n.play-control-btn {\r\n    width: 50px;\r\n    height: 50px;\r\n    background: var(--gradient-primary);\r\n    font-size: 1.2rem;\r\n    border: none;\r\n    box-shadow: var(--shadow-lg), var(--glow-primary);\r\n}\r\n\r\n.volume-control {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n}\r\n\r\n.volume-slider {\r\n    width: 80px;\r\n    height: 6px;\r\n    background: rgba(255, 255, 255, 0.2);\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.volume-fill {\r\n    height: 100%;\r\n    background: var(--gradient-secondary);\r\n    border-radius: 3px;\r\n    width: 100%;\r\n    transition: width 0.1s ease;\r\n    box-shadow: 0 0 8px rgba(0, 242, 234, 0.4);\r\n}\r\n\r\n.time-display {\r\n    font-size: 0.8rem;\r\n    color: white;\r\n    font-weight: 500;\r\n}\r\n\r\n\/* Loading States *\/\r\n.loading-state {\r\n    display: none;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 3rem;\r\n    text-align: center;\r\n}\r\n\r\n.loading-spinner {\r\n    width: 60px;\r\n    height: 60px;\r\n    border: 3px solid var(--border);\r\n    border-top: 3px solid var(--primary);\r\n    border-radius: 50%;\r\n    animation: spin 1s linear infinite;\r\n    margin-bottom: 1.5rem;\r\n}\r\n\r\n.loading-text {\r\n    font-size: 1.2rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.5rem;\r\n    background: var(--gradient-primary);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.loading-subtext {\r\n    color: var(--text-secondary);\r\n    font-size: 0.9rem;\r\n}\r\n\r\n\/* Comments Section *\/\r\n.comments-section {\r\n    background: var(--bg-card);\r\n    backdrop-filter: blur(20px);\r\n    border: 1px solid var(--border);\r\n    border-radius: 20px;\r\n    box-shadow: var(--shadow-lg);\r\n    display: flex;\r\n    flex-direction: column;\r\n    overflow: hidden;\r\n    position: relative;\r\n}\r\n\r\n.comments-section::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 2px;\r\n    background: var(--gradient-purple);\r\n}\r\n\r\n.comments-header {\r\n    padding: 1.5rem;\r\n    border-bottom: 1px solid var(--border);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(255, 64, 129, 0.1));\r\n}\r\n\r\n.comments-title {\r\n    font-size: 1.3rem;\r\n    font-weight: 800;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.comments-count {\r\n    background: var(--gradient-purple);\r\n    color: white;\r\n    padding: 0.375rem 0.75rem;\r\n    border-radius: 8px;\r\n    font-size: 0.85rem;\r\n    font-weight: 700;\r\n    box-shadow: var(--shadow);\r\n    min-width: 40px;\r\n    text-align: center;\r\n}\r\n\r\n.comments-container {\r\n    flex: 1;\r\n    overflow-y: auto;\r\n    padding: 0;\r\n    max-height: calc(100vh - 300px);\r\n    min-height: 400px;\r\n    position: relative;\r\n}\r\n\r\n\/* Always visible scrollbar *\/\r\n.comments-container::-webkit-scrollbar {\r\n    width: 12px;\r\n}\r\n\r\n.comments-container::-webkit-scrollbar-track {\r\n    background: var(--bg-secondary);\r\n    border-radius: 6px;\r\n    margin: 4px;\r\n}\r\n\r\n.comments-container::-webkit-scrollbar-thumb {\r\n    background: var(--gradient-purple);\r\n    border-radius: 6px;\r\n    border: 2px solid var(--bg-secondary);\r\n}\r\n\r\n.comments-container::-webkit-scrollbar-thumb:hover {\r\n    background: var(--purple);\r\n}\r\n\r\n\/* Firefox scrollbar *\/\r\n.comments-container {\r\n    scrollbar-width: auto;\r\n    scrollbar-color: var(--purple) var(--bg-secondary);\r\n}\r\n\r\n\/* Scroll Indicator *\/\r\n.scroll-indicator {\r\n    position: absolute;\r\n    bottom: 20px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    background: var(--gradient-purple);\r\n    color: white;\r\n    padding: 0.75rem 1.5rem;\r\n    border-radius: 25px;\r\n    font-size: 0.85rem;\r\n    font-weight: 600;\r\n    box-shadow: var(--shadow-lg);\r\n    z-index: 100;\r\n    display: none;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    animation: scrollPulse 2s ease-in-out infinite;\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n}\r\n\r\n.scroll-indicator:hover {\r\n    transform: translateX(-50%) translateY(-5px);\r\n    box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.scroll-indicator.show {\r\n    display: flex;\r\n}\r\n\r\n.scroll-indicator i {\r\n    animation: scrollBounce 1.5s ease-in-out infinite;\r\n}\r\n\r\n.comments-list {\r\n    padding: 0;\r\n}\r\n\r\n.comment-item {\r\n    padding: 1.25rem 1.5rem;\r\n    border-bottom: 1px solid var(--border);\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    animation: commentSlideIn 0.5s ease-out;\r\n}\r\n\r\n.comment-item:hover {\r\n    background: rgba(139, 92, 246, 0.05);\r\n    transform: translateX(5px);\r\n}\r\n\r\n.comment-item::before {\r\n    content: '';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    bottom: 0;\r\n    width: 3px;\r\n    background: var(--gradient-purple);\r\n    transform: scaleY(0);\r\n    transition: transform 0.3s ease;\r\n}\r\n\r\n.comment-item:hover::before {\r\n    transform: scaleY(1);\r\n}\r\n\r\n.comment-header {\r\n    display: flex;\r\n    align-items: flex-start;\r\n    gap: 1rem;\r\n    margin-bottom: 0.75rem;\r\n}\r\n\r\n.comment-avatar {\r\n    width: 42px;\r\n    height: 42px;\r\n    border-radius: 50%;\r\n    object-fit: cover;\r\n    border: 2px solid var(--border-light);\r\n    flex-shrink: 0;\r\n    transition: all 0.3s ease;\r\n    box-shadow: var(--shadow);\r\n    background: var(--gradient-purple);\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-size: 1rem;\r\n    color: white;\r\n    font-weight: 700;\r\n}\r\n\r\n.comment-avatar:hover {\r\n    border-color: var(--purple);\r\n    transform: scale(1.05);\r\n}\r\n\r\n.comment-info {\r\n    flex: 1;\r\n    min-width: 0;\r\n}\r\n\r\n.comment-user-info {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    margin-bottom: 0.5rem;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.comment-author {\r\n    font-size: 0.95rem;\r\n    font-weight: 700;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.comment-username {\r\n    font-size: 0.85rem;\r\n    color: var(--text-secondary);\r\n    font-weight: 500;\r\n}\r\n\r\n.comment-verified {\r\n    color: var(--blue);\r\n    font-size: 0.8rem;\r\n}\r\n\r\n.comment-region {\r\n    background: rgba(0, 242, 234, 0.1);\r\n    color: var(--secondary);\r\n    padding: 0.125rem 0.5rem;\r\n    border-radius: 4px;\r\n    font-size: 0.7rem;\r\n    font-weight: 600;\r\n    text-transform: uppercase;\r\n}\r\n\r\n.comment-text {\r\n    font-size: 0.95rem;\r\n    line-height: 1.5;\r\n    color: var(--text-primary);\r\n    word-wrap: break-word;\r\n    margin-bottom: 0.75rem;\r\n}\r\n\r\n.comment-footer {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    flex-wrap: wrap;\r\n    gap: 1rem;\r\n}\r\n\r\n.comment-stats {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.comment-stat {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.375rem;\r\n    font-size: 0.85rem;\r\n    color: var(--text-secondary);\r\n    transition: all 0.3s ease;\r\n    cursor: pointer;\r\n}\r\n\r\n.comment-stat:hover {\r\n    color: var(--primary);\r\n    transform: scale(1.05);\r\n}\r\n\r\n.comment-stat i {\r\n    font-size: 0.9rem;\r\n}\r\n\r\n.comment-meta {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 1rem;\r\n    font-size: 0.8rem;\r\n    color: var(--text-muted);\r\n}\r\n\r\n.comment-time {\r\n    font-weight: 500;\r\n}\r\n\r\n.comment-id {\r\n    font-family: 'Courier New', monospace;\r\n    background: rgba(107, 114, 128, 0.1);\r\n    padding: 0.125rem 0.375rem;\r\n    border-radius: 4px;\r\n}\r\n\r\n.empty-state {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 4rem 2rem;\r\n    text-align: center;\r\n    color: var(--text-secondary);\r\n}\r\n\r\n.empty-state i {\r\n    font-size: 4rem;\r\n    margin-bottom: 1.5rem;\r\n    opacity: 0.5;\r\n    background: var(--gradient-purple);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n}\r\n\r\n.empty-state h3 {\r\n    font-size: 1.5rem;\r\n    font-weight: 700;\r\n    margin-bottom: 0.5rem;\r\n    color: var(--text-primary);\r\n}\r\n\r\n.error-message {\r\n    background: rgba(239, 68, 68, 0.1);\r\n    border: 1px solid rgba(239, 68, 68, 0.3);\r\n    color: #ef4444;\r\n    padding: 1rem 1.5rem;\r\n    margin: 1rem;\r\n    border-radius: 12px;\r\n    display: none;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    font-weight: 600;\r\n}\r\n\r\n.error-message.show {\r\n    display: flex;\r\n    animation: errorSlideIn 0.3s ease-out;\r\n}\r\n\r\n\/* Animations *\/\r\n@keyframes spin {\r\n    to {\r\n        transform: rotate(360deg);\r\n    }\r\n}\r\n\r\n@keyframes logoFloat {\r\n\r\n    0%,\r\n    100% {\r\n        transform: translateY(0px);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(-5px);\r\n    }\r\n}\r\n\r\n@keyframes logoShine {\r\n    0% {\r\n        transform: translateX(-100%) translateY(-100%) rotate(45deg);\r\n    }\r\n\r\n    100% {\r\n        transform: translateX(100%) translateY(100%) rotate(45deg);\r\n    }\r\n}\r\n\r\n@keyframes commentSlideIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateX(-20px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateX(0);\r\n    }\r\n}\r\n\r\n@keyframes errorSlideIn {\r\n    from {\r\n        opacity: 0;\r\n        transform: translateY(-10px);\r\n    }\r\n\r\n    to {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n    }\r\n}\r\n\r\n@keyframes scrollPulse {\r\n\r\n    0%,\r\n    100% {\r\n        opacity: 0.8;\r\n    }\r\n\r\n    50% {\r\n        opacity: 1;\r\n    }\r\n}\r\n\r\n@keyframes scrollBounce {\r\n\r\n    0%,\r\n    100% {\r\n        transform: translateY(0);\r\n    }\r\n\r\n    50% {\r\n        transform: translateY(3px);\r\n    }\r\n}\r\n    \r\n    .button-group {\r\ndisplay: flex;\r\ngap: 1rem;\r\nflex-wrap: wrap;\r\nflex-shrink: 0;\r\njustify-content: center;\r\n}\r\n    \r\n    .header-content {\r\ndisplay: flex;\r\nalign-items: center;\r\njustify-content: space-between;\r\nflex-wrap: wrap;\r\ngap: 1.5rem;\r\nflex-direction: column;\r\n}\r\n    .search-container {\r\ndisplay: flex;\r\nflex-direction: column;\r\ngap: 1rem;\r\nflex: 1;\r\nmax-width: 700px;\r\nwidth: 100%;\r\n}\r\n    \r\n    .search-form {\r\ndisplay: flex;\r\ngap: 1rem;\r\nposition: relative;\r\nwidth: 100%;\r\nflex-direction: column;\r\n}\r\n\r\n\/* Responsive Design *\/\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/* Landscape orientation on mobile *\/\r\n@media (max-height: 500px) and (orientation: landscape) {\r\n    .container {\r\n        padding: 0.5rem;\r\n    }\r\n\r\n    .header {\r\n        padding: 0.75rem;\r\n        margin-bottom: 0.5rem;\r\n    }\r\n\r\n    .main-content {\r\n        gap: 0.75rem;\r\n    }\r\n\r\n    .video-player-wrapper {\r\n        max-width: 200px;\r\n    }\r\n\r\n    .comments-container {\r\n        max-height: calc(100vh - 150px);\r\n        min-height: 200px;\r\n    }\r\n\r\n    .comment-item {\r\n        padding: 0.75rem 1rem;\r\n    }\r\n}\r\n\r\n\/* Fix for input width consistency *\/\r\n.search-input {\r\n    flex: 1;\r\n    min-width: 0;\r\n    \/* Prevents flex item from growing beyond container *\/\r\n    width: 100%;\r\n    \/* Ensures consistent width *\/\r\n    box-sizing: border-box;\r\n}\r\n\r\n.search-form {\r\n    display: flex;\r\n    gap: 1rem;\r\n    position: relative;\r\n    width: 100%;\r\n    \/* Ensures form takes full width *\/\r\n}\r\n\r\n.search-container {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n    flex: 1;\r\n    max-width: 700px;\r\n    width: 100%;\r\n    \/* Ensures container takes full width *\/\r\n}\r\n\r\n\/* Ensure button group maintains consistent width *\/\r\n.button-group {\r\n    display: flex;\r\n    gap: 1rem;\r\n    flex-wrap: wrap;\r\n    flex-shrink: 0;\r\n    \/* Prevents buttons from shrinking *\/\r\n}\r\n\r\n\/* Ensure search buttons maintain consistent width *\/\r\n.search-btn,\r\n.search-another-btn {\r\n    white-space: nowrap;\r\n    flex-shrink: 0;\r\n    \/* Prevents buttons from shrinking *\/\r\n}\r\n\r\n\/* Additional fixes for input consistency *\/\r\n.search-input:focus,\r\n.search-input:not(:placeholder-shown),\r\n.search-input:disabled {\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n    max-width: none !important;\r\n    flex: 1 !important;\r\n}\r\n\r\n\/* Ensure form layout consistency *\/\r\n.search-form:has(.search-input:focus),\r\n.search-form:has(.search-input:not(:placeholder-shown)) {\r\n    width: 100% !important;\r\n    display: flex !important;\r\n    gap: 1rem !important;\r\n}\r\n\r\n\/* Prevent any width changes during loading states *\/\r\n.search-container:has(.search-btn:disabled) .search-input,\r\n.search-container:has(.search-btn:disabled) .search-form {\r\n    width: 100% !important;\r\n    min-width: 0 !important;\r\n}\r\n    \r\n    \r\n    \/* Responsive Design for smaller screens *\/\r\n@media (max-width: 992px) {\r\n.main-content {\r\ngrid-template-columns: 1fr; \/* Stack video and comments vertically *\/\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nmargin-bottom: 1.5rem; \/* Add spacing between stacked sections *\/\r\n}\r\n\r\n.comments-container {\r\nmax-height: 600px; \/* Adjust max height for comments when stacked *\/\r\nmin-height: 300px;\r\n}\r\n}\r\n\r\n@media (max-width: 768px) {\r\n.container_tiktok {\r\npadding: 1rem;\r\n}\r\n\r\n.header {\r\npadding: 1.5rem;\r\n}\r\n\r\n.header-content {\r\nflex-direction: column; \/* Stack logo, search, and buttons *\/\r\nalign-items: center;\r\ntext-align: center;\r\n}\r\n\r\n.logo {\r\nflex-direction: column;\r\ngap: 0.75rem;\r\nmargin-bottom: 1rem;\r\n}\r\n\r\n.logo-icon {\r\nwidth: 50px;\r\nheight: 50px;\r\nfont-size: 1.5rem;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.8rem;\r\n}\r\n\r\n.logo-subtitle {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.search-container {\r\nmax-width: 100%; \/* Allow search to take full width *\/\r\n}\r\n\r\n.search-form {\r\nflex-direction: column; \/* Stack search input and button *\/\r\ngap: 0.75rem;\r\n}\r\n\r\n.search-input {\r\npadding: 0.75rem 1rem !important;\r\nfont-size: 0.9rem !important;\r\n}\r\n\r\n.search-btn {\r\npadding: 0.75rem 1.5rem;\r\nfont-size: 0.9rem;\r\nwidth: 100%; \/* Make search button full width *\/\r\n}\r\n\r\n.button-group {\r\nwidth: 100%; \/* Ensure button group takes full width *\/\r\njustify-content: center; \/* Center buttons *\/\r\ngap: 0.75rem;\r\n}\r\n\r\n.search-another-btn {\r\npadding: 0.75rem 1rem;\r\nfont-size: 0.9rem;\r\nflex-grow: 1; \/* Allow buttons to grow and share space *\/\r\n}\r\n\r\n.video-stats-bar {\r\npadding: 0.75rem 1rem;\r\ngap: 0.75rem;\r\n}\r\n\r\n.video-stat-item {\r\npadding: 0.4rem 0.8rem;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.video-header {\r\npadding: 1rem;\r\n}\r\n\r\n.video-title {\r\nfont-size: 1rem;\r\n}\r\n\r\n.video-author {\r\npadding: 0.75rem;\r\ngap: 0.75rem;\r\n}\r\n\r\n.author-avatar {\r\nwidth: 40px;\r\nheight: 40px;\r\nfont-size: 1rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 1rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.video-player-container {\r\npadding: 1rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 280px; \/* Slightly smaller video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 60px;\r\nheight: 60px;\r\nfont-size: 1.5rem;\r\n}\r\n\r\n.video-controls {\r\npadding: 1rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 36px;\r\nheight: 36px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 42px;\r\nheight: 42px;\r\nfont-size: 1rem;\r\n}\r\n\r\n.volume-slider {\r\nwidth: 60px;\r\n}\r\n\r\n.time-display {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comments-header {\r\npadding: 1rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 1.1rem;\r\ngap: 0.5rem;\r\n}\r\n\r\n.comments-count {\r\npadding: 0.25rem 0.6rem;\r\nfont-size: 0.75rem;\r\nmin-width: 35px;\r\n}\r\n\r\n.comment-item {\r\npadding: 1rem 1.25rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 38px;\r\nheight: 38px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comment-user-info {\r\nflex-direction: column; \/* Stack user info elements if needed *\/\r\nalign-items: flex-start;\r\ngap: 0.25rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comment-footer {\r\nflex-direction: column; \/* Stack footer elements *\/\r\nalign-items: flex-start;\r\ngap: 0.75rem;\r\n}\r\n\r\n.comment-stats {\r\ngap: 1rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-meta {\r\nfont-size: 0.7rem;\r\n}\r\n}\r\n\r\n@media (max-width: 600px) {\r\n.container_tiktok {\r\npadding: 0.75rem;\r\n}\r\n\r\n.header {\r\npadding: 1rem;\r\nborder-radius: 15px;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.6rem;\r\n}\r\n\r\n.search-input {\r\nfont-size: 0.85rem !important;\r\n}\r\n\r\n.search-btn,\r\n.search-another-btn {\r\nfont-size: 0.85rem;\r\npadding: 0.65rem 1.25rem;\r\nborder-radius: 12px;\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nborder-radius: 15px;\r\n}\r\n\r\n.video-stat-item {\r\nfont-size: 0.75rem;\r\npadding: 0.3rem 0.6rem;\r\n}\r\n\r\n.video-title {\r\nfont-size: 0.95rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 0.95rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 250px; \/* Smaller video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 50px;\r\nheight: 50px;\r\nfont-size: 1.2rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 32px;\r\nheight: 32px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 38px;\r\nheight: 38px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 1rem;\r\n}\r\n\r\n.comment-item {\r\npadding: 0.9rem 1rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 34px;\r\nheight: 34px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.75rem;\r\n}\r\n.scroll-indicator {\r\nposition: absolute;\r\nbottom: 20px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\nbackground: var(--gradient-purple);\r\ncolor: white;\r\npadding: 0.75rem 1.5rem;\r\nborder-radius: 25px;\r\nfont-size: 0.85rem;\r\nfont-weight: 600;\r\nbox-shadow: var(--shadow-lg);\r\nz-index: 100;\r\ndisplay: none !important;\r\nalign-items: center;\r\ngap: 0.5rem;\r\nanimation: scrollPulse 2s ease-in-out infinite;\r\ncursor: pointer;\r\ntransition: all 0.3s ease;\r\n}\r\n}\r\n\r\n@media (max-width: 400px) {\r\n.container_tiktok {\r\npadding: 0.5rem;\r\n}\r\n\r\n.header {\r\npadding: 0.75rem;\r\nborder-radius: 12px;\r\n}\r\n\r\n.logo-icon {\r\nwidth: 45px;\r\nheight: 45px;\r\nfont-size: 1.3rem;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.4rem;\r\n}\r\n\r\n.search-input {\r\npadding: 0.6rem 0.8rem !important;\r\nfont-size: 0.8rem !important;\r\n}\r\n\r\n.search-btn,\r\n.search-another-btn {\r\nfont-size: 0.8rem;\r\npadding: 0.5rem 1rem;\r\nborder-radius: 10px;\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nborder-radius: 12px;\r\n}\r\n\r\n.video-stat-item {\r\nfont-size: 0.7rem;\r\npadding: 0.25rem 0.5rem;\r\nflex-shrink: 0; \/* Prevent items from squishing too much *\/\r\n}\r\n\r\n.video-title {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.author-avatar {\r\nwidth: 35px;\r\nheight: 35px;\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 220px; \/* Even smaller video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 45px;\r\nheight: 45px;\r\nfont-size: 1.1rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 30px;\r\nheight: 30px;\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 35px;\r\nheight: 35px;\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.volume-control {\r\ngap: 0.5rem;\r\n}\r\n\r\n.volume-slider {\r\nwidth: 50px;\r\n}\r\n\r\n.time-display {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.comments-header {\r\npadding: 0.75rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 0.9rem;\r\n}\r\n\r\n.comments-count {\r\npadding: 0.2rem 0.5rem;\r\nfont-size: 0.7rem;\r\nmin-width: 30px;\r\n}\r\n\r\n.comment-item {\r\npadding: 0.8rem 0.9rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 30px;\r\nheight: 30px;\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.comment-stats {\r\ngap: 0.8rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.7rem;\r\n}\r\n.scroll-indicator {\r\nposition: absolute;\r\nbottom: 20px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\nbackground: var(--gradient-purple);\r\ncolor: white;\r\npadding: 0.75rem 1.5rem;\r\nborder-radius: 25px;\r\nfont-size: 0.85rem;\r\nfont-weight: 600;\r\nbox-shadow: var(--shadow-lg);\r\nz-index: 100;\r\ndisplay: none !important;\r\nalign-items: center;\r\ngap: 0.5rem;\r\nanimation: scrollPulse 2s ease-in-out infinite;\r\ncursor: pointer;\r\ntransition: all 0.3s ease;\r\n}\r\n}\r\n\r\n@media (max-width: 375px) {\r\n.container_tiktok {\r\npadding: 0.4rem;\r\n}\r\n\r\n.header {\r\npadding: 0.6rem;\r\nborder-radius: 10px;\r\n}\r\n\r\n.logo-icon {\r\nwidth: 40px;\r\nheight: 40px;\r\nfont-size: 1.2rem;\r\n}\r\n\r\n.logo-text {\r\nfont-size: 1.3rem;\r\n}\r\n\r\n.logo-subtitle {\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.search-input {\r\npadding: 0.5rem 0.7rem !important;\r\nfont-size: 0.75rem !important;\r\n}\r\n\r\n.search-btn,\r\n.search-another-btn {\r\nfont-size: 0.75rem;\r\npadding: 0.45rem 0.9rem;\r\nborder-radius: 8px;\r\n}\r\n\r\n.video-section,\r\n.comments-section {\r\nborder-radius: 10px;\r\n}\r\n\r\n.video-stats-bar {\r\npadding: 0.6rem 0.7rem;\r\ngap: 0.5rem;\r\n}\r\n\r\n.video-stat-item {\r\nfont-size: 0.65rem;\r\npadding: 0.2rem 0.4rem;\r\n}\r\n\r\n.video-title {\r\nfont-size: 0.85rem;\r\nmargin-bottom: 0.75rem;\r\n}\r\n\r\n.author-avatar {\r\nwidth: 32px;\r\nheight: 32px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.author-info h4 {\r\nfont-size: 0.85rem;\r\n}\r\n\r\n.author-username {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.video-player-wrapper {\r\nmax-width: 190px; \/* Smallest video player *\/\r\n}\r\n\r\n.play-button {\r\nwidth: 40px;\r\nheight: 40px;\r\nfont-size: 1rem;\r\n}\r\n\r\n.control-btn {\r\nwidth: 28px;\r\nheight: 28px;\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.play-control-btn {\r\nwidth: 32px;\r\nheight: 32px;\r\nfont-size: 0.8rem;\r\n}\r\n\r\n.volume-slider {\r\nwidth: 45px;\r\n}\r\n\r\n.time-display {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.comments-header {\r\npadding: 0.6rem;\r\n}\r\n\r\n.comments-title {\r\nfont-size: 0.85rem;\r\ngap: 0.4rem;\r\n}\r\n\r\n.comments-count {\r\npadding: 0.15rem 0.4rem;\r\nfont-size: 0.65rem;\r\nmin-width: 28px;\r\n}\r\n\r\n.comment-item {\r\npadding: 0.7rem 0.8rem;\r\n}\r\n\r\n.comment-avatar {\r\nwidth: 28px;\r\nheight: 28px;\r\nfont-size: 0.7rem;\r\n}\r\n\r\n.comment-author {\r\nfont-size: 0.75rem;\r\n}\r\n\r\n.comment-username {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.comment-text {\r\nfont-size: 0.75rem;\r\nmargin-bottom: 0.6rem;\r\n}\r\n\r\n.comment-stats {\r\ngap: 0.7rem;\r\n}\r\n\r\n.comment-stat {\r\nfont-size: 0.65rem;\r\n}\r\n\r\n.comment-meta {\r\nfont-size: 0.6rem;\r\ngap: 0.7rem;\r\n}\r\n.scroll-indicator {\r\nposition: absolute;\r\nbottom: 20px;\r\nleft: 50%;\r\ntransform: translateX(-50%);\r\nbackground: var(--gradient-purple);\r\ncolor: white;\r\npadding: 0.75rem 1.5rem;\r\nborder-radius: 25px;\r\nfont-size: 0.85rem;\r\nfont-weight: 600;\r\nbox-shadow: var(--shadow-lg);\r\nz-index: 100;\r\ndisplay: none !important;\r\nalign-items: center;\r\ngap: 0.5rem;\r\nanimation: scrollPulse 2s ease-in-out infinite;\r\ncursor: pointer;\r\ntransition: all 0.3s ease;\r\n}\r\n}\r\n\r\n\r\n<\/style>\r\n\r\n\r\n<div class=\"tiktok_body\">\r\n<div class=\"container_tiktok\">\r\n<!-- Header -->\r\n<div class=\"header\">\r\n    <div class=\"header-content\">\r\n        <div class=\"logo\">\r\n            <div class=\"logo-icon\">\r\n                <i class=\"fab fa-tiktok\"><\/i>\r\n            <\/div>\r\n            <div>\r\n                <h1 class=\"logo-text\">TikTok Comments Viewer<\/h1>\r\n                <p class=\"logo-subtitle\">Premium Video & Comments Experience<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"search-container\">\r\n            <form class=\"search-form\" onsubmit=\"loadContent(event)\">\r\n                <input type=\"text\" class=\"search-input\" id=\"urlInput\"\r\n                    placeholder=\"Enter TikTok video URL or ID...\" required>\r\n                <div class=\"button-group\">\r\n                    <button type=\"submit\" class=\"search-btn\" id=\"searchBtn\">\r\n                        <i class=\"fas fa-search\"><\/i>\r\n                        <span>Get Comments<\/span>\r\n                    <\/button>\r\n                    <button type=\"button\" class=\"search-another-btn hidden\" id=\"searchAnotherBtn\"\r\n                        onclick=\"resetSearch()\">\r\n                        <i class=\"fas fa-redo\"><\/i>\r\n                        <span>Search Another<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Main Content -->\r\n<div class=\"main-content\">\r\n    <!-- Video Section -->\r\n    <div class=\"video-section\">\r\n        <div class=\"loading-state\" id=\"videoLoading\">\r\n            <div class=\"loading-spinner\"><\/div>\r\n            <div class=\"loading-text\">Loading Video...<\/div>\r\n            <div class=\"loading-subtext\">Fetching video details and preparing player<\/div>\r\n        <\/div>\r\n\r\n        <div id=\"videoContent\" style=\"display: none; height: 100%; display: flex; flex-direction: column;\">\r\n            <!-- Video Stats Bar -->\r\n            <div class=\"video-stats-bar\">\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-eye\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"viewCount\">0<\/span>\r\n                    <span>views<\/span>\r\n                <\/div>\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-heart\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"likeCount\">0<\/span>\r\n                    <span>likes<\/span>\r\n                <\/div>\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-comment\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"commentCount\">0<\/span>\r\n                    <span>comments<\/span>\r\n                <\/div>\r\n                <div class=\"video-stat-item\">\r\n                    <i class=\"fas fa-share\"><\/i>\r\n                    <span class=\"video-stat-value\" id=\"shareCount\">0<\/span>\r\n                    <span>shares<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"video-header\">\r\n                <h2 class=\"video-title\" id=\"videoTitle\">Video Title<\/h2>\r\n\r\n                <div class=\"video-author\">\r\n                    <div class=\"author-avatar\" id=\"authorAvatar\">\r\n                        <i class=\"fas fa-user\"><\/i>\r\n                    <\/div>\r\n                    <div class=\"author-info\">\r\n                        <h4 id=\"authorName\">\r\n                            Author Name\r\n                            <i class=\"fas fa-check-circle author-verified\" id=\"authorVerified\"\r\n                                style=\"display: none;\"><\/i>\r\n                        <\/h4>\r\n                        <p class=\"author-username\" id=\"authorUsername\">@username<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"video-player-container\">\r\n                <div class=\"video-player-wrapper\">\r\n                    <img decoding=\"async\" class=\"video-thumbnail\" id=\"videoThumbnail\" src=\"\/placeholder.svg?height=640&width=360\"\r\n                        alt=\"Video Thumbnail\">\r\n                    <div class=\"video-overlay\" id=\"videoOverlay\" onclick=\"playVideo()\">\r\n                        <button class=\"play-button\">\r\n                            <i class=\"fas fa-play\"><\/i>\r\n                        <\/button>\r\n                    <\/div>\r\n                    <video class=\"video-player\" id=\"videoPlayer\" loop>\r\n                        Your browser doesn't support video playback.\r\n                    <\/video>\r\n\r\n                    <div class=\"video-controls\">\r\n                        <div class=\"progress-container\">\r\n                            <div class=\"progress-bar\" onclick=\"seekVideo(event)\">\r\n                                <div class=\"progress-fill\" id=\"progressFill\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n\r\n                        <div class=\"control-buttons\">\r\n                            <div class=\"control-group\">\r\n                                <button class=\"control-btn play-control-btn\" onclick=\"togglePlay()\"\r\n                                    id=\"playBtn\">\r\n                                    <i class=\"fas fa-play\"><\/i>\r\n                                <\/button>\r\n                                <div class=\"time-display\">\r\n                                    <span id=\"currentTime\">0:00<\/span> \/ <span id=\"duration\">0:00<\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                            <div class=\"control-group volume-control\">\r\n                                <button class=\"control-btn\" onclick=\"toggleMute()\" id=\"muteBtn\">\r\n                                    <i class=\"fas fa-volume-up\"><\/i>\r\n                                <\/button>\r\n                                <div class=\"volume-slider\" onclick=\"setVolume(event)\">\r\n                                    <div class=\"volume-fill\" id=\"volumeFill\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"empty-state\" id=\"videoEmptyState\">\r\n            <i class=\"fas fa-video\"><\/i>\r\n            <h3>No Video Loaded<\/h3>\r\n            <p>Enter a TikTok URL to view video and comments<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Comments Section -->\r\n    <div class=\"comments-section\">\r\n        <div class=\"comments-header\">\r\n            <h3 class=\"comments-title\">\r\n                <i class=\"fas fa-comments\"><\/i>\r\n                Comments\r\n                <span class=\"comments-count\" id=\"commentsCount\">0<\/span>\r\n            <\/h3>\r\n        <\/div>\r\n\r\n        <div class=\"error-message\" id=\"commentsError\">\r\n            <i class=\"fas fa-exclamation-triangle\"><\/i>\r\n            <span id=\"commentsErrorText\"><\/span>\r\n        <\/div>\r\n\r\n        <div class=\"comments-container\" id=\"commentsContainer\">\r\n            <div class=\"loading-state\" id=\"commentsLoading\">\r\n                <div class=\"loading-spinner\"><\/div>\r\n                <div class=\"loading-text\">Loading Comments...<\/div>\r\n                <div class=\"loading-subtext\">Fetching all comments from this video<\/div>\r\n            <\/div>\r\n\r\n            <div class=\"comments-list\" id=\"commentsList\">\r\n                <!-- Comments will be populated here -->\r\n            <\/div>\r\n\r\n            <!-- Scroll Indicator -->\r\n            <div class=\"scroll-indicator\" id=\"scrollIndicator\" onclick=\"scrollToBottom()\">\r\n                <i class=\"fas fa-chevron-down\"><\/i>\r\n                <span>More comments below<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"empty-state\" id=\"commentsEmptyState\">\r\n            <i class=\"fas fa-comment-slash\"><\/i>\r\n            <h3>No Comments<\/h3>\r\n            <p>Load a video to view all comments<\/p>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n<\/div>\r\n<script src=\"https:\/\/tools.xrespond.com\/api\/rate-limit-handler.js\"><\/script>\r\n<script src=\"https:\/\/tools.xrespond.com\/api\/js\/client-ip-detector.js\"><\/script>\r\n\r\n<script>\r\n\/\/ Global variables\r\nlet currentVideoData = null;\r\nlet currentComments = [];\r\nlet isLoadingComments = false;\r\nlet currentVideoUrl = '';\r\nlet currentVolume = 1;\r\nlet isMuted = false;\r\n\r\n\/** First successful Get Comments per 24h opens affiliate in a new tab; resets every 24 hours per browser. *\/\r\nconst AFFILIATE_REDIRECT_URL = 'https:\/\/amzn.to\/4lQZ9QT';\r\nconst AFFILIATE_REDIRECT_STORAGE_KEY = 'fbViewerAffiliateRedirectAt';\r\nconst AFFILIATE_REDIRECT_MS = 24 * 60 * 60 * 1000;\r\n\r\nfunction shouldAffiliateRedirect() {\r\n    try {\r\n        const raw = localStorage.getItem(AFFILIATE_REDIRECT_STORAGE_KEY);\r\n        if (!raw) return true;\r\n        const last = parseInt(raw, 10);\r\n        if (Number.isNaN(last)) return true;\r\n        return (Date.now() - last) >= AFFILIATE_REDIRECT_MS;\r\n    } catch (e) {\r\n        \/\/ Private mode \/ sandboxed iframe: do not redirect\r\n        return false;\r\n    }\r\n}\r\n\r\nfunction recordAffiliateRedirect() {\r\n    try {\r\n        localStorage.setItem(AFFILIATE_REDIRECT_STORAGE_KEY, String(Date.now()));\r\n    } catch (e) {\r\n        \/* ignore *\/\r\n    }\r\n}\r\n\r\n\/\/ API URLs\r\nconst VIDEO_API_URL = 'https:\/\/tools.xrespond.com\/api\/tiktok\/profile\/videos\/details';\r\nconst COMMENTS_API_URL = 'https:\/\/tools.xrespond.com\/api\/tiktok\/profile\/videos\/comments';\r\n\r\n\/\/ Utility functions\r\nfunction formatNumber(num) {\r\n    if (num >= 1000000) {\r\n        return (num \/ 1000000).toFixed(1) + 'M';\r\n    }\r\n    if (num >= 1000) {\r\n        return (num \/ 1000).toFixed(1) + 'K';\r\n    }\r\n    return num.toString();\r\n}\r\n\r\nfunction formatTime(seconds) {\r\n    const mins = Math.floor(seconds \/ 60);\r\n    const secs = Math.floor(seconds % 60);\r\n    return `${mins}:${secs.toString().padStart(2, '0')}`;\r\n}\r\n\r\nfunction formatTimestamp(timestamp) {\r\n    const date = new Date(timestamp * 1000);\r\n    const now = new Date();\r\n    const diff = now - date;\r\n\r\n    const minutes = Math.floor(diff \/ 60000);\r\n    const hours = Math.floor(diff \/ 3600000);\r\n    const days = Math.floor(diff \/ 86400000);\r\n\r\n    if (minutes < 60) return `${minutes}m ago`;\r\n    if (hours < 24) return `${hours}h ago`;\r\n    if (days < 30) return `${days}d ago`;\r\n    return date.toLocaleDateString();\r\n}\r\n\r\nfunction getInitials(name) {\r\n    return name.split(' ').map(word => word[0]).join('').toUpperCase().slice(0, 2);\r\n}\r\n\r\nfunction showError(elementId, message) {\r\n    const errorElement = document.getElementById(elementId);\r\n    const errorText = document.getElementById(elementId + 'Text');\r\n    if (errorText) errorText.textContent = message;\r\n    errorElement.classList.add('show');\r\n    setTimeout(() => errorElement.classList.remove('show'), 5000);\r\n}\r\n\r\nfunction showLoading(elementId) {\r\n    document.getElementById(elementId).style.display = 'flex';\r\n}\r\n\r\nfunction hideLoading(elementId) {\r\n    document.getElementById(elementId).style.display = 'none';\r\n}\r\n\r\n\/\/ Scroll indicator functionality\r\nfunction setupScrollIndicator() {\r\n    const commentsContainer = document.getElementById('commentsContainer');\r\n    const scrollIndicator = document.getElementById('scrollIndicator');\r\n\r\n    commentsContainer.addEventListener('scroll', () => {\r\n        const { scrollTop, scrollHeight, clientHeight } = commentsContainer;\r\n        const scrollPercentage = (scrollTop \/ (scrollHeight - clientHeight)) * 100;\r\n\r\n        \/\/ Show indicator if not scrolled to bottom and there are comments\r\n        if (scrollPercentage < 95 && currentComments.length > 3) {\r\n            scrollIndicator.classList.add('show');\r\n        } else {\r\n            scrollIndicator.classList.remove('show');\r\n        }\r\n    });\r\n}\r\n\r\nfunction scrollToBottom() {\r\n    const commentsContainer = document.getElementById('commentsContainer');\r\n    commentsContainer.scrollTo({\r\n        top: commentsContainer.scrollHeight,\r\n        behavior: 'smooth'\r\n    });\r\n}\r\n\r\n\/\/ Reset search\r\nfunction resetSearch() {\r\n    document.getElementById('urlInput').value = '';\r\n    document.getElementById('videoContent').style.display = 'none';\r\n    document.getElementById('videoEmptyState').style.display = 'flex';\r\n    document.getElementById('commentsEmptyState').style.display = 'flex';\r\n    document.getElementById('commentsList').innerHTML = '';\r\n    document.getElementById('scrollIndicator').classList.remove('show');\r\n    document.getElementById('searchAnotherBtn').classList.add('hidden');\r\n\r\n    currentVideoData = null;\r\n    currentComments = [];\r\n    currentVideoUrl = '';\r\n\r\n    \/\/ Reset video player\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    videoPlayer.src = '';\r\n    videoPlayer.classList.remove('playing');\r\n    document.getElementById('videoOverlay').style.display = 'flex';\r\n    document.getElementById('videoThumbnail').style.display = 'block';\r\n    document.getElementById('playBtn').innerHTML = '<i class=\"fas fa-play\"><\/i>';\r\n}\r\n\r\n\/\/ Main load function\r\nasync function loadContent(event) {\r\n    const e = event || (typeof window !== 'undefined' ? window.event : null);\r\n    if (e && typeof e.preventDefault === 'function') {\r\n        e.preventDefault();\r\n    }\r\n    if (e && typeof e.stopPropagation === 'function') {\r\n        e.stopPropagation();\r\n    }\r\n\r\n    const url = document.getElementById('urlInput').value.trim();\r\n    if (!url) return;\r\n\r\n    if (shouldAffiliateRedirect()) {\r\n        recordAffiliateRedirect();\r\n        const affWin = window.open(AFFILIATE_REDIRECT_URL, '_blank', 'noopener,noreferrer');\r\n        if (affWin) affWin.opener = null;\r\n    }\r\n\r\n    currentVideoUrl = url;\r\n\r\n    \/\/ Reset states\r\n    document.getElementById('videoContent').style.display = 'none';\r\n    document.getElementById('videoEmptyState').style.display = 'none';\r\n    document.getElementById('commentsEmptyState').style.display = 'none';\r\n    document.getElementById('commentsList').innerHTML = '';\r\n    document.getElementById('scrollIndicator').classList.remove('show');\r\n    document.getElementById('searchAnotherBtn').classList.add('hidden'); \/\/ Hide search another button initially\r\n\r\n    currentComments = [];\r\n\r\n    \/\/ Disable search button\r\n    const searchBtn = document.getElementById('searchBtn');\r\n    if (searchBtn) {\r\n        searchBtn.disabled = true;\r\n        searchBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i><span>Loading...<\/span>';\r\n    }\r\n\r\n    \/\/ Load video and comments simultaneously\r\n    try {\r\n        await Promise.all([\r\n            loadVideo(url),\r\n            loadComments(url)\r\n        ]);\r\n\r\n        \/\/ Show search another button\r\n        document.getElementById('searchAnotherBtn').classList.remove('hidden');\r\n    } finally {\r\n        if (searchBtn) {\r\n            searchBtn.disabled = false;\r\n            searchBtn.innerHTML = '<i class=\"fas fa-search\"><\/i><span>Get Comments<\/span>';\r\n        }\r\n\r\n        \/\/ Keep the input clean for display\r\n        const urlInput = document.getElementById('urlInput');\r\n        if (urlInput) {\r\n            const originalValue = urlInput.value;\r\n            urlInput.value = originalValue.split('?')[0].split('&')[0];\r\n        }\r\n    }\r\n}\r\nwindow.loadContent = loadContent;\r\n\r\n\/\/ Load video data\r\nasync function loadVideo(url) {\r\n    showLoading('videoLoading');\r\n\r\n    try {\r\n        const response = await fetch(VIDEO_API_URL, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify({ url: url })\r\n        });\r\n\r\n        const data = await response.json();\r\n\r\n        if (data.status !== 'success') {\r\n            throw new Error(data.message || 'Failed to load video');\r\n        }\r\n\r\n        currentVideoData = data.data.data;\r\n        displayVideo(currentVideoData);\r\n\r\n    } catch (error) {\r\n        console.error('Video load error:', error);\r\n        document.getElementById('videoEmptyState').style.display = 'flex';\r\n    } finally {\r\n        hideLoading('videoLoading');\r\n    }\r\n}\r\n\r\n\/\/ Display video data\r\nfunction displayVideo(data) {\r\n    \/\/ Video title\r\n    document.getElementById('videoTitle').textContent = data.title;\r\n\r\n    \/\/ Video stats\r\n    document.getElementById('viewCount').textContent = formatNumber(data.play_count);\r\n    document.getElementById('likeCount').textContent = formatNumber(data.digg_count);\r\n    document.getElementById('commentCount').textContent = formatNumber(data.comment_count);\r\n    document.getElementById('shareCount').textContent = formatNumber(data.share_count);\r\n\r\n    \/\/ Author info with better placeholder\r\n    const authorAvatar = document.getElementById('authorAvatar');\r\n    const authorName = document.getElementById('authorName');\r\n    const authorUsername = document.getElementById('authorUsername');\r\n    const authorVerified = document.getElementById('authorVerified');\r\n\r\n    if (data.author.avatar && data.author.avatar !== '\/placeholder.svg') {\r\n        authorAvatar.innerHTML = `<img decoding=\"async\" src=\"${data.author.avatar}\" alt=\"${data.author.nickname}\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 50%;\">`;\r\n    } else {\r\n        authorAvatar.innerHTML = getInitials(data.author.nickname || 'Author Name');\r\n    }\r\n\r\n    authorName.innerHTML = data.author.nickname || 'Author Name';\r\n    authorUsername.textContent = `@${data.author.unique_id || 'username'}`;\r\n\r\n    if (data.author.verified) {\r\n        authorVerified.style.display = 'inline';\r\n    }\r\n\r\n    \/\/ Video thumbnail\r\n    document.getElementById('videoThumbnail').src = data.cover || data.dynamic_cover || '\/placeholder.svg?height=640&width=360';\r\n\r\n    \/\/ Set video source\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    videoPlayer.src = data.play;\r\n    videoPlayer.addEventListener('loadedmetadata', () => {\r\n        document.getElementById('duration').textContent = formatTime(videoPlayer.duration);\r\n        videoPlayer.volume = currentVolume;\r\n        videoPlayer.muted = isMuted;\r\n        updateVolumeDisplay();\r\n    });\r\n    videoPlayer.addEventListener('timeupdate', updateProgress);\r\n\r\n    document.getElementById('videoContent').style.display = 'flex';\r\n}\r\n\r\n\/\/ Video player controls\r\nfunction playVideo() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const videoOverlay = document.getElementById('videoOverlay');\r\n    const videoThumbnail = document.getElementById('videoThumbnail');\r\n\r\n    videoThumbnail.style.display = 'none';\r\n    videoOverlay.style.display = 'none';\r\n    videoPlayer.classList.add('playing');\r\n    videoPlayer.play();\r\n    document.getElementById('playBtn').innerHTML = '<i class=\"fas fa-pause\"><\/i>';\r\n}\r\n\r\nfunction togglePlay() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const playBtn = document.getElementById('playBtn');\r\n\r\n    if (videoPlayer.paused) {\r\n        videoPlayer.play();\r\n        playBtn.innerHTML = '<i class=\"fas fa-pause\"><\/i>';\r\n    } else {\r\n        videoPlayer.pause();\r\n        playBtn.innerHTML = '<i class=\"fas fa-play\"><\/i>';\r\n    }\r\n}\r\n\r\nfunction toggleMute() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const muteBtn = document.getElementById('muteBtn');\r\n\r\n    if (isMuted) {\r\n        isMuted = false;\r\n        videoPlayer.muted = false;\r\n        videoPlayer.volume = currentVolume;\r\n        muteBtn.innerHTML = '<i class=\"fas fa-volume-up\"><\/i>';\r\n    } else {\r\n        isMuted = true;\r\n        videoPlayer.muted = true;\r\n        muteBtn.innerHTML = '<i class=\"fas fa-volume-mute\"><\/i>';\r\n    }\r\n\r\n    updateVolumeDisplay();\r\n}\r\n\r\nfunction setVolume(event) {\r\n    const volumeSlider = event.currentTarget;\r\n    const rect = volumeSlider.getBoundingClientRect();\r\n    const pos = (event.clientX - rect.left) \/ rect.width;\r\n    currentVolume = Math.max(0, Math.min(1, pos));\r\n\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    videoPlayer.volume = currentVolume;\r\n\r\n    if (currentVolume === 0) {\r\n        isMuted = true;\r\n        videoPlayer.muted = true;\r\n        document.getElementById('muteBtn').innerHTML = '<i class=\"fas fa-volume-mute\"><\/i>';\r\n    } else {\r\n        isMuted = false;\r\n        videoPlayer.muted = false;\r\n        document.getElementById('muteBtn').innerHTML = '<i class=\"fas fa-volume-up\"><\/i>';\r\n    }\r\n\r\n    updateVolumeDisplay();\r\n}\r\n\r\nfunction updateVolumeDisplay() {\r\n    const volumeFill = document.getElementById('volumeFill');\r\n    const displayVolume = isMuted ? 0 : currentVolume;\r\n    volumeFill.style.width = `${displayVolume * 100}%`;\r\n}\r\n\r\nfunction seekVideo(event) {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const progressBar = event.currentTarget;\r\n    const rect = progressBar.getBoundingClientRect();\r\n    const pos = (event.clientX - rect.left) \/ rect.width;\r\n    videoPlayer.currentTime = pos * videoPlayer.duration;\r\n}\r\n\r\nfunction updateProgress() {\r\n    const videoPlayer = document.getElementById('videoPlayer');\r\n    const progressFill = document.getElementById('progressFill');\r\n    const currentTimeDisplay = document.getElementById('currentTime');\r\n\r\n    const progress = (videoPlayer.currentTime \/ videoPlayer.duration) * 100;\r\n    progressFill.style.width = `${progress}%`;\r\n    currentTimeDisplay.textContent = formatTime(videoPlayer.currentTime);\r\n}\r\n\r\n\/\/ Load comments\r\nasync function loadComments(url) {\r\n    if (isLoadingComments) return;\r\n\r\n    isLoadingComments = true;\r\n    showLoading('commentsLoading');\r\n    document.getElementById('commentsEmptyState').style.display = 'none';\r\n\r\n    try {\r\n        const response = await fetch(COMMENTS_API_URL, {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n            },\r\n            body: JSON.stringify({ url: url })\r\n        });\r\n\r\n        const data = await response.json();\r\n\r\n        if (data.status !== 'success') {\r\n            throw new Error(data.message || 'Failed to load comments');\r\n        }\r\n\r\n        const comments = data.data.data.comments || [];\r\n        const total = comments.length; \/\/ Use actual loaded comments count\r\n\r\n        currentComments = comments;\r\n        document.getElementById('commentsCount').textContent = total;\r\n\r\n        displayComments(comments);\r\n        setupScrollIndicator();\r\n\r\n    } catch (error) {\r\n        console.error('Comments load error:', error);\r\n        showError('commentsError', error.message);\r\n        document.getElementById('commentsEmptyState').style.display = 'flex';\r\n    } finally {\r\n        isLoadingComments = false;\r\n        hideLoading('commentsLoading');\r\n    }\r\n}\r\n\r\n\/\/ Display comments\r\nfunction displayComments(comments) {\r\n    const commentsList = document.getElementById('commentsList');\r\n    commentsList.innerHTML = '';\r\n\r\n    comments.forEach((comment, index) => {\r\n        const commentElement = createCommentElement(comment, index);\r\n        commentsList.appendChild(commentElement);\r\n    });\r\n\r\n    \/\/ Trigger scroll indicator check\r\n    setTimeout(() => {\r\n        const commentsContainer = document.getElementById('commentsContainer');\r\n        if (commentsContainer.scrollHeight > commentsContainer.clientHeight && comments.length > 3) {\r\n            document.getElementById('scrollIndicator').classList.add('show');\r\n        }\r\n    }, 500);\r\n}\r\n\r\n\/\/ Create comment element\r\nfunction createCommentElement(comment, index) {\r\n    const commentDiv = document.createElement('div');\r\n    commentDiv.className = 'comment-item';\r\n    commentDiv.style.animationDelay = `${index * 0.05}s`;\r\n\r\n    const verifiedBadge = comment.user.verified ? '<i class=\"fas fa-check-circle comment-verified\" title=\"Verified\"><\/i>' : '';\r\n    const regionBadge = comment.user.region ? `<span class=\"comment-region\">${comment.user.region}<\/span>` : '';\r\n\r\n    \/\/ Create avatar with fallback\r\n    let avatarContent;\r\n    if (comment.user.avatar && comment.user.avatar !== '\/placeholder.svg') {\r\n        avatarContent = `<img decoding=\"async\" src=\"${comment.user.avatar}\" alt=\"${comment.user.nickname}\" style=\"width: 100%; height: 100%; object-fit: cover; border-radius: 50%;\" onerror=\"this.parentElement.innerHTML='${getInitials(comment.user.nickname)}'\">`;\r\n    } else {\r\n        avatarContent = getInitials(comment.user.nickname);\r\n    }\r\n\r\n    commentDiv.innerHTML = `\r\n        <div class=\"comment-header\">\r\n            <div class=\"comment-avatar\">${avatarContent}<\/div>\r\n            <div class=\"comment-info\">\r\n                <div class=\"comment-user-info\">\r\n                    <span class=\"comment-author\">${comment.user.nickname}<\/span>\r\n                    ${verifiedBadge}\r\n                    <span class=\"comment-username\">@${comment.user.unique_id}<\/span>\r\n                    ${regionBadge}\r\n                <\/div>\r\n                <div class=\"comment-text\">${comment.text}<\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"comment-footer\">\r\n            <div class=\"comment-stats\">\r\n                <div class=\"comment-stat\" title=\"Likes\">\r\n                    <i class=\"fas fa-heart\"><\/i>\r\n                    <span>${formatNumber(comment.digg_count)}<\/span>\r\n                <\/div>\r\n                <div class=\"comment-stat\" title=\"Replies\">\r\n                    <i class=\"fas fa-reply\"><\/i>\r\n                    <span>${formatNumber(comment.reply_total)}<\/span>\r\n                <\/div>\r\n                <div class=\"comment-stat\" title=\"Followers\">\r\n                    <i class=\"fas fa-users\"><\/i>\r\n                    <span>${formatNumber(comment.user.follower_count)}<\/span>\r\n                <\/div>\r\n                <div class=\"comment-stat\" title=\"Videos\">\r\n                    <i class=\"fas fa-video\"><\/i>\r\n                    <span>${formatNumber(comment.user.aweme_count)}<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"comment-meta\">\r\n                <span class=\"comment-time\">${formatTimestamp(comment.create_time)}<\/span>\r\n                <span class=\"comment-id\">#${comment.id.slice(-6)}<\/span>\r\n            <\/div>\r\n        <\/div>\r\n    `;\r\n\r\n    return commentDiv;\r\n}\r\n\r\n\/\/ Initialize\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    document.getElementById('urlInput').focus();\r\n    setupScrollIndicator();\r\n});\r\n\r\n\/\/ Handle Enter key in search input\r\ndocument.getElementById('urlInput').addEventListener('keypress', function (e) {\r\n    if (e.key === 'Enter') {\r\n        e.preventDefault();\r\n        loadContent(e);\r\n    }\r\n});\r\n<\/script>\r\n<\/div>\r\n\r\n<style>\r\n        :root {\r\n            --ttc-primary: #ff0050;\r\n            --ttc-secondary: #00f2ea;\r\n            --ttc-dark: #000000;\r\n            --ttc-light: #ffffff;\r\n            --ttc-gray: #f1f1f2;\r\n            --ttc-text: #161823;\r\n            --ttc-border: #e1e1e2;\r\n        }\r\n        \r\n  \r\n        .ttc-container {\r\n            width: 100%;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 20px;\r\n        }\r\n\t\r\n        \/* Hero Section - ttc-hero- prefix *\/\r\n        .ttc-hero-section {\r\n            background: linear-gradient(135deg, var(--ttc-dark) 0%, var(--ttc-primary) 50%, #ff6b9d 100%);\r\n            color: var(--ttc-light);\r\n            padding: 100px 0;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .ttc-hero-section::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"black\" fill-opacity=\"0.2\"\/><circle cx=\"50\" cy=\"50\" r=\"30\" fill=\"white\" fill-opacity=\"0.05\"\/><\/svg>');\r\n            opacity: 0.1;\r\n            z-index: 1;\r\n        }\r\n        \r\n        .ttc-hero-content {\r\n            position: relative;\r\n            z-index: 2;\r\n            text-align: center;\r\n        }\r\n        \r\n        .ttc-hero-heading {\r\n            font-size: 3.5rem;\r\n            font-weight: 800;\r\n            margin-bottom: 20px;\r\n            text-shadow: 0 2px 10px rgba(0,0,0,0.3);\r\n        }\r\n        \r\n        .ttc-hero-desc {\r\n            font-size: 1.3rem;\r\n            max-width: 700px;\r\n            margin: 0 auto 40px;\r\n            opacity: 0.9;\r\n        }\r\n        \r\n        .ttc-hero-search {\r\n            max-width: 700px;\r\n            margin: 0 auto 30px;\r\n            display: flex;\r\n            background: rgba(255,255,255,0.15);\r\n            border-radius: 50px;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(10px);\r\n            border: 1px solid rgba(255,255,255,0.2);\r\n        }\r\n        \r\n        .ttc-hero-search input {\r\n            flex: 1;\r\n            padding: 18px 25px;\r\n            border: none;\r\n            background: transparent;\r\n            color: var(--ttc-light);\r\n            font-size: 1.1rem;\r\n            outline: none;\r\n        }\r\n        \r\n        .ttc-hero-search input::placeholder {\r\n            color: rgba(255,255,255,0.7);\r\n        }\r\n        \r\n        .ttc-hero-search button {\r\n            padding: 18px 30px;\r\n            background: var(--ttc-primary);\r\n            color: white;\r\n            border: none;\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .ttc-hero-search button:hover {\r\n            background: #e60045;\r\n        }\r\n        \r\n        .ttc-hero-visual {\r\n            margin-top: 50px;\r\n            position: relative;\r\n            max-width: 500px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n        }\r\n        \r\n        .ttc-hero-mockup {\r\n            background: rgba(0,0,0,0.3);\r\n            border-radius: 20px;\r\n            padding: 20px;\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        .ttc-hero-mockup::before {\r\n            content: \"\";\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);\r\n            animation: shimmer 2s infinite;\r\n        }\r\n        \r\n        @keyframes shimmer {\r\n            0% { transform: translateX(-100%); }\r\n            100% { transform: translateX(100%); }\r\n        }\r\n        \r\n        .ttc-hero-mockup-header {\r\n            display: flex;\r\n            align-items: center;\r\n            margin-bottom: 15px;\r\n        }\r\n        \r\n        .ttc-hero-mockup-avatar {\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            background: var(--ttc-gray);\r\n            margin-right: 10px;\r\n        }\r\n        \r\n        .ttc-hero-mockup-username {\r\n            font-weight: 700;\r\n        }\r\n        \r\n        .ttc-hero-mockup-content {\r\n            background: rgba(0,0,0,0.2);\r\n            height: 150px;\r\n            border-radius: 10px;\r\n            position: relative;\r\n        }\r\n        \r\n        .ttc-hero-mockup-icon {\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            font-size: 3rem;\r\n            opacity: 0.7;\r\n        }\r\n        \r\n        \/* How It Works Section - ttc-how- prefix *\/\r\n        .ttc-how-section {\r\n            padding: 80px 0;\r\n            background: #f8f9fa;\r\n        }\r\n        \r\n        .ttc-how-heading {\r\n            text-align: center;\r\n            font-size: 2.5rem;\r\n            margin-bottom: 20px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-how-desc {\r\n            text-align: center;\r\n            max-width: 700px;\r\n            margin: 0 auto 60px;\r\n            color: #6e6e73;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .ttc-how-steps {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            flex-wrap: wrap;\r\n        }\r\n        \r\n        .ttc-how-step {\r\n            flex: 1;\r\n            min-width: 280px;\r\n            margin: 0 15px 30px;\r\n            text-align: center;\r\n            padding: 30px 20px;\r\n            border-radius: 15px;\r\n            background: white;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n        \r\n        .ttc-how-step:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 15px 30px rgba(0,0,0,0.1);\r\n        }\r\n        \r\n        .ttc-how-step-icon {\r\n            width: 80px;\r\n            height: 80px;\r\n            background: linear-gradient(135deg, var(--ttc-primary), #ff6b9d);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 20px;\r\n            font-size: 2rem;\r\n            color: white;\r\n        }\r\n        \r\n        .ttc-how-step-title {\r\n            font-size: 1.5rem;\r\n            margin-bottom: 15px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-how-step-desc {\r\n            color: #6e6e73;\r\n        }\r\n        \r\n        \/* Features Section - ttc-features- prefix *\/\r\n        .ttc-features-section {\r\n            padding: 80px 0;\r\n            background: linear-gradient(to bottom, #e9ecef, #f8f9fa);\r\n        }\r\n        \r\n        .ttc-features-heading {\r\n            text-align: center;\r\n            font-size: 2.5rem;\r\n            margin-bottom: 20px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-features-desc {\r\n            text-align: left;\r\n            max-width: 700px;\r\n            margin: 0 auto 60px;\r\n            color: #6e6e73;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .ttc-features-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 30px;\r\n        }\r\n        \r\n        .ttc-features-item {\r\n            background: white;\r\n            border-radius: 15px;\r\n            padding: 30px;\r\n            box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .ttc-features-item:hover {\r\n            transform: translateY(-5px);\r\n        }\r\n        \r\n        .ttc-features-icon {\r\n            width: 60px;\r\n            height: 60px;\r\n            background: linear-gradient(135deg, var(--ttc-primary), #ff6b9d);\r\n            border-radius: 15px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin-bottom: 20px;\r\n            font-size: 1.5rem;\r\n            color: white;\r\n        }\r\n        \r\n        .ttc-features-title {\r\n            font-size: 1.3rem;\r\n            margin-bottom: 15px;\r\n            color: var(--ttc-text);\r\n        }\r\n        \r\n        .ttc-features-desc {\r\n            color: #6e6e73;\r\n        }\r\n        \r\n         \/* FAQ Section - ttc-faq- prefix *\/\r\n\t\t\t\t.ttc-faq-section {\r\n\t\t\t\t\t\tpadding: 80px 0;\r\n\t\t\t\t\t\tbackground: #ffffff;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-heading {\r\n\t\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\t\tfont-size: 2.5rem;\r\n\t\t\t\t\t\tmargin-bottom: 20px;\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-desc {\r\n\t\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\t\tmax-width: 700px;\r\n\t\t\t\t\t\tmargin: 0 auto 60px;\r\n\t\t\t\t\t\tcolor: #6e6e73;\r\n\t\t\t\t\t\tfont-size: 1.1rem;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t\/* Bootstrap Accordion Custom Styling *\/\r\n\t\t\t\t.ttc-faq-accordion {\r\n\t\t\t\t\t\tmax-width: 800px;\r\n\t\t\t\t\t\tmargin: 0 auto;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-item {\r\n\t\t\t\t\t\tborder: none;\r\n\t\t\t\t\t\tmargin-bottom: 15px;\r\n\t\t\t\t\t\tborder-radius: 10px;\r\n\t\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\t\tbox-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button {\r\n\t\t\t\t\t\tbackground-color: var(--ttc-gray);\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t\t\tfont-weight: 700;\r\n\t\t\t\t\t\tfont-size: 1.1rem;\r\n\t\t\t\t\t\tpadding: 20px 25px;\r\n\t\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t\t\tborder: none;\r\n\t\t\t\t\t\tborder-radius: 0;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button:not(.collapsed) {\r\n\t\t\t\t\t\tbackground-color: var(--ttc-gray);\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button:focus {\r\n\t\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t\t\tborder: none;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button::after {\r\n\t\t\t\t\t\tbackground-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23161823'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-button:not(.collapsed)::after {\r\n\t\t\t\t\t\tbackground-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23161823'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n\t\t\t\t\t\ttransform: rotate(180deg);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-body {\r\n\t\t\t\t\t\tbackground-color: white;\r\n\t\t\t\t\t\tcolor: #6e6e73;\r\n\t\t\t\t\t\tpadding: 20px 25px;\r\n\t\t\t\t\t\tfont-size: 1rem;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t.ttc-faq-accordion .accordion-button:not(.collapsed) {\r\n\t\t\t\t\t\tcolor: var(--ttc-text);\r\n\t\t\t\t\t\tbackground-color: var(--ttc-gray);\r\n\t\t\t\t\t\tbox-shadow: inset 0 -1px 0 rgba(0,0,0,.125);\r\n\t\t\t\t}\r\n\r\n        \/* Footer - ttc-footer- prefix *\/\r\n        .ttc-footer-section {\r\n            background: var(--ttc-dark);\r\n            color: var(--ttc-light);\r\n            padding: 40px 0;\r\n            text-align: center;\r\n        }\r\n        \r\n        .ttc-footer-desc {\r\n            margin-bottom: 15px;\r\n            opacity: 0.8;\r\n        }\r\n        \r\n        .ttc-footer-links a {\r\n            color: var(--ttc-primary);\r\n            text-decoration: none;\r\n            font-weight: 600;\r\n            margin: 0 10px;\r\n        }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 768px) {\r\n            .ttc-hero-heading {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .ttc-hero-desc {\r\n                font-size: 1.1rem;\r\n            }\r\n            \r\n            .ttc-how-steps {\r\n                flex-direction: column;\r\n            }\r\n            \r\n            .ttc-how-step {\r\n                margin: 0 0 30px;\r\n            }\r\n        }\r\n    <\/style>\r\n<!-- Hero Section -->\r\n\r\n    <!-- How It Works Section -->\r\n    <section class=\"ttc-how-section\">\r\n        <div class=\"ttc-container\">\r\n            <h2 class=\"ttc-how-heading\">How It Works<\/h2>\r\n            <p class=\"ttc-how-desc\">Our simple three-step process lets you view TikTok comments anonymously in seconds<\/p>\r\n            <div class=\"ttc-how-steps\">\r\n                <div class=\"ttc-how-step\">\r\n                    <div class=\"ttc-how-step-icon\">\r\n                        <i class=\"fas fa-copy\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-how-step-title\">Step 1<\/h3>\r\n                    <p class=\"ttc-how-step-desc\">Copy the URL of any TikTok video<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-how-step\">\r\n                    <div class=\"ttc-how-step-icon\">\r\n                        <i class=\"fas fa-paste\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-how-step-title\">Step 2<\/h3>\r\n                    <p class=\"ttc-how-step-desc\">Paste it into our comment viewer<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-how-step\">\r\n                    <div class=\"ttc-how-step-icon\">\r\n                        <i class=\"fas fa-comments\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-how-step-title\">Step 3<\/h3>\r\n                    <p class=\"ttc-how-step-desc\">Instantly see all public comments \u2014 without logging in<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Features Section -->\r\n    <section class=\"ttc-features-section\">\r\n        <div class=\"ttc-container\">\r\n            <h2 class=\"ttc-features-heading\">Why Use Our TikTok Comments Viewer?<\/h2>\r\n            <p class=\"ttc-features-desc\">Discover the benefits of our powerful, privacy-focused comment viewing tool<\/p>\r\n            <div class=\"ttc-features-grid\">\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-user-secret\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">Anonymous Viewing<\/h3>\r\n                    <p class=\"ttc-features-desc\">No TikTok login needed. View comments completely anonymously.<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-bolt\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">Fast & Clean<\/h3>\r\n                    <p class=\"ttc-features-desc\">Lightning-fast load times with a clutter-free interface.<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-mobile-alt\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">All Devices<\/h3>\r\n                    <p class=\"ttc-features-desc\">Fully responsive design works perfectly on desktop and mobile.<\/p>\r\n                <\/div>\r\n                <div class=\"ttc-features-item\">\r\n                    <div class=\"ttc-features-icon\">\r\n                        <i class=\"fas fa-ban\"><\/i>\r\n                    <\/div>\r\n                    <h3 class=\"ttc-features-title\">No Ads, No Bloat<\/h3>\r\n                    <p class=\"ttc-features-desc\">Clean experience without annoying ads or unnecessary features.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- FAQ Section -->\r\n   <section class=\"ttc-faq-section\">\r\n    <div class=\"ttc-container\">\r\n        <h2 class=\"ttc-faq-heading\">Frequently Asked Questions<\/h2>\r\n        <p class=\"ttc-faq-desc\">Find answers to common questions about our TikTok Comments Viewer<\/p>\r\n        \r\n        <div class=\"accordion ttc-faq-accordion\" id=\"ttcFaqAccordion\">\r\n            <!-- FAQ Item 1 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading1\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse1\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse1\">\r\n                        Can I reply to comments?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse1\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading1\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        No, this tool is for viewing only. No login means no interaction.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 2 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading2\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse2\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse2\">\r\n                        Can I see deleted comments?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse2\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading2\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Only publicly available, live comments are visible.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 3 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading3\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse3\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse3\">\r\n                        Do I need to install anything?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse3\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading3\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Nope. It's 100% web-based and secure.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 4 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading4\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse4\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse4\">\r\n                        Is this service free?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse4\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading4\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Yes, our TikTok Comments Viewer is completely free to use with no hidden costs.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <!-- FAQ Item 5 -->\r\n            <div class=\"accordion-item ttc-faq-item\">\r\n                <h2 class=\"accordion-header ttc-faq-header\" id=\"ttcFaqHeading5\">\r\n                    <button class=\"accordion-button ttc-faq-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#ttcFaqCollapse5\" aria-expanded=\"false\" aria-controls=\"ttcFaqCollapse5\">\r\n                        How often are comments updated?\r\n                    <\/button>\r\n                <\/h2>\r\n                <div id=\"ttcFaqCollapse5\" class=\"accordion-collapse collapse\" aria-labelledby=\"ttcFaqHeading5\" data-bs-parent=\"#ttcFaqAccordion\">\r\n                    <div class=\"accordion-body ttc-faq-body\">\r\n                        Comments are fetched in real-time when you view a video, showing the latest available comments.\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":150,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-290","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/comments?post=290"}],"version-history":[{"count":5,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/290\/revisions"}],"predecessor-version":[{"id":1272,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/290\/revisions\/1272"}],"up":[{"embeddable":true,"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/pages\/150"}],"wp:attachment":[{"href":"https:\/\/viewri.com\/wp-json\/wp\/v2\/media?parent=290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}