:root {
            --glass-bg: rgba(255,255,255,0.15);
            --glass-brd: rgba(0,0,0,0.08);
            --text: #111827;
            --sub: #6b7280;
            --star: #ffd700;
            --accent: rgba(0,0,0,0.06);
            /* Apple-inspired border radius system */
            --radius-xs: 4px;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-2xl: 24px;
            --radius-3xl: 28px;
            --radius-full: 9999px;
        }
        .dark :root, .dark {
            --glass-bg: rgba(255,255,255,0.08);
            --glass-brd: rgba(255,255,255,0.12);
            --text: #ffffff;
            --sub: #9ca3af;
            --star: #ffd700;
            --accent: rgba(255,255,255,0.06);
        }
        
        /* Ensure text colors work in dark theme */
        .dark .text-main { color: var(--text) !important; }
        .dark .text-sub { color: var(--sub) !important; }

        /* Registration sheet modal */
        .sheet-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; }
        .sheet-overlay-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
        .dark .sheet-overlay-bg { background: rgba(0,0,0,0.5); }
        .sheet-panel { position: relative; z-index: 1; width: 100%; max-width: 360px; border-radius: var(--radius-lg); padding: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.25); background: #ffffff; border: 1px solid rgba(0,0,0,0.08); }
        .dark .sheet-panel { background: #1f2937; border-color: rgba(255,255,255,0.12); color: #e5e7eb; }
        .sheet-input { background: #f9fafb; border: 1px solid #e5e7eb; }
        .dark .sheet-input { background: #374151; border-color: #4b5563; color: #e5e7eb; }

        /* New registration modal (50% of chat width) */
        .reg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1100; overflow: hidden; border-radius: var(--radius-lg); }
        .reg-overlay::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.35); pointer-events: none; z-index: 0; border-radius: var(--radius-lg); }
        .dark .reg-overlay::before { background: rgba(0,0,0,0.5); }
        .reg-modal { position: relative; z-index: 1; width: 46%; min-width: 320px; max-width: 640px; border-radius: var(--radius-lg); padding: 18px 20px; margin: 0 16px; background: #ffffff; color: #111827; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 24px 60px rgba(0,0,0,0.20); overflow: visible; pointer-events: auto; }
        .dark .reg-modal { background: #1f2937; color: #e5e7eb; border-color: rgba(255,255,255,0.12); }
        .reg-title { font-weight: 600; text-align: center; margin-bottom: 10px; }
        .reg-input { width: 100%; border-radius: var(--radius-md); padding: 10px 12px; margin: 0; box-sizing: border-box; outline: none; transition: box-shadow .2s ease, border-color .2s ease; background: #f9fafb; border: 1px solid #e5e7eb; color: #111827; }
        .reg-input:focus { box-shadow: 0 0 0 2px rgba(59,130,246,0.35); border-color: transparent; }
        .dark .reg-input { background: #374151; border-color: #4b5563; color: #e5e7eb; }
        .reg-actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 8px; align-items: center; padding: 0; }
        .reg-modal form { padding: 0 15px 0 6px; }
        .reg-btn { padding: 8px 12px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; display: inline-flex; align-items: center; justify-content: center; line-height: 1; height: 44px; }
        .reg-btn.cancel { background: #f3f4f6; color: #374151; flex: 1; font-size: 13px; padding: 0 12px; border-radius: var(--radius-md); }
        .reg-btn.confirm { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #ffffff; box-shadow: none; flex: 2; font-size: 15px; padding: 0 14px; border-radius: var(--radius-md); }
        .dark .reg-btn.cancel { background: #374151; color: #e5e7eb; }
        .reg-btn.cancel:hover { transform: none; box-shadow: none; }
        .reg-btn.cancel:active { transform: translateY(0) scale(0.98); box-shadow: none; transition: transform .1s ease; }
        .reg-btn.confirm:hover { transform: none; box-shadow: none; }
        .reg-btn.confirm:active { transform: translateY(0) scale(0.98); box-shadow: none; transition: transform .1s ease; }

        .button-press { transform: scale(0.95) !important; transition: transform .15s ease !important; }
        .reg-modal .city-submit-btn:hover { transform: none; }

        /* Dark theme text optimization */
        .dark .group h3, .dark .group p, .dark .group .rating-stars {
            -webkit-font-smoothing: subpixel-antialiased !important;
            -moz-osx-font-smoothing: auto !important;
            text-rendering: optimizeLegibility !important;
        }
        
        /* Beautiful star rating styles */
        .rating-stars {
            display: inline-flex;
            align-items: center;
            gap: 2px;
        }
        
        .rating-stars .star-icon {
            width: 20px;
            height: 20px;
            transition: all 0.3s ease;
        }
        
        .rating-stars .star-icon:hover {
            transform: scale(1.2);
            filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.3));
        }
        
        .rating-stars .star-icon.filled {
            fill: var(--star);
            filter: drop-shadow(0 1px 2px rgba(212, 175, 55, 0.2));
        }
        
        .rating-stars .star-icon.empty {
            fill: rgba(156, 163, 175, 0.3);
        }
        
        .dark .rating-stars .star-icon.empty {
            fill: rgba(156, 163, 175, 0.4);
        }
        
        /* Product cards (per spec, white card in all themes) */
        .product-card {
            background: #ffffff;
            border-radius: var(--radius-lg);
            border: 1px solid rgba(0,0,0,0.06);
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: transform .2s ease, box-shadow .2s ease;
        }
        /* Remove container hover animations for cards */
        .product-card:hover { transform: none; }
        .dark .product-card {
            background: #1f2937;
            color: #e5e7eb;
            border-color: rgba(255,255,255,0.06);
            box-shadow: 0 4px 20px rgba(0,0,0,0.18);
        }
        .product-media {
            position: relative;
            width: 100%;
            height: clamp(180px, 38vw, 260px);
            background: #f8fafc;
            margin-bottom: 6px;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: var(--radius-md);
        }
        @media (min-width: 768px) { .product-media { height: clamp(220px, 30vw, 300px); } }
        .dark .product-media { background: #111827; border-color: rgba(255,255,255,0.06); }
        .product-media img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform .25s ease;
        }
        /* Remove image zoom on hover */
        /* (intentionally left blank) */
        .product-body {
            padding: 8px 10px 12px 10px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex: 1 1 auto;
            min-height: 0;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
        }
        .product-title {
            font-weight: 600;
            font-size: clamp(16px, 3.4vw, 22px);
            line-height: 1.15;
            color: #000000;
            margin-top: 0;
            display: inline-block;
            transition: color .2s ease, transform .2s ease;
            will-change: transform;
        }
        .product-title a {
            display: inline-block;
            color: inherit;
            text-decoration: none;
            width: 100%;
        }
        @media (min-width: 1024px) { .product-title { font-size: clamp(18px, 1.6vw, 24px); } }
        /* Title hover effect: only color change on card hover */
        .product-card:hover .product-title { color: #3b82f6; }
        .dark .product-title { color: #e5e7eb; }
        .dark .product-card:hover .product-title { color: #60a5fa; }
        .product-price {
            font-weight: 700;
            font-size: clamp(18px, 5vw, 26px);
            color: #000000;
            margin-top: auto;
        }
        .product-price .price-sep { font-weight: 400; color: #6B7280; }
        .dark .product-price { color: #f9fafb; }
        .dark .product-price .price-sep { color: #9CA3AF; }
        @media (min-width: 1024px) { .product-price { font-size: clamp(20px, 1.8vw, 28px); } }
        .product-attr {
            color: #6B7280;
            font-size: clamp(12px, 2.8vw, 14px);
            margin-top: 2px;
            font-weight: 400;
        }
        .dark .product-attr { color: #9CA3AF; }
        .product-rating {
            display: inline-flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 6px;
            color: #6B7280;
            font-size: clamp(12px, 3.6vw, 14px);
            margin-top: 2px;
            white-space: nowrap;
            padding-inline-end: 8px; /* breathing space from right edge */
        }
        .product-rating > * { flex: 0 0 auto; }
        .product-rating .star-icon { width: 16px; height: 16px; }
        .product-rating .star-icon.filled { filter: none; }
        .product-rating .rating-value { color: #111827; font-weight: 600; font-size: clamp(13px, 4vw, 15px); }
        .dark .product-rating .rating-value { color: #F9FAFB; }
        .product-rating .reviews { display: inline-flex; align-items: center; gap: 4px; color: #6B7280; white-space: nowrap; }
        .dark .product-rating .reviews { color: #9CA3AF; }
        .product-rating .reviews img { width: 18px; height: 18px; object-fit: contain; opacity: .85; }
        .product-rating .reviews-text { white-space: nowrap; font-size: clamp(12px, 3.2vw, 13px); }

        /* Compact tweaks for very narrow screens to avoid crowding the edge */
        @media (max-width: 420px) {
            .product-rating { gap: 4px; padding-inline-end: 10px; }
            .product-rating .rating-value { font-size: clamp(12px, 3.4vw, 13px); }
            .product-rating .reviews img { width: 16px; height: 16px; }
            .product-rating .reviews-text { font-size: 12px; opacity: .95; }
        }
        .product-purchases { color: #6B7280; font-size: clamp(12px, 3.6vw, 14px); margin-top: 2px; }
        .dark .product-purchases { color: #9CA3AF; }
        .product-seller {
            color: #6B7280;
            font-size: clamp(12px, 3.2vw, 14px);
            margin-top: 6px;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .dark .product-seller { color: #9CA3AF; }
        @media (min-width: 1024px) { .product-seller { font-size: clamp(13px, 1.3vw, 15px); } }
        .product-footer {
            margin-top: auto;
            padding-top: 6px;
        }

        /* Remove previous hover overrides; allow title/image effects only */

        @media (prefers-reduced-motion: reduce) {
            .product-card, .product-media img { transition: none !important; }
        }
        
        /* Product image transition (only transform) */
        .product-img { transition: transform .25s ease; }

        /* Remove 3D/perspective for product groups */

        /* Remove old group hover effects on links */
        
        /* Ensure photo container has smooth transitions */
        a[href*="http"] {
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            transform-origin: center !important;
        }
        
        /* Remove image filter tweaks on hover */

        /* Optimize product images for crisp rendering */
        .product-img {
            image-rendering: -webkit-optimize-contrast !important;
            image-rendering: optimize-quality !important;
        }
        
        /* Remove text and stars hover scaling in groups */
        
        /* Ensure crisp text rendering */
        html {
            -webkit-font-smoothing: subpixel-antialiased !important;
            -moz-osx-font-smoothing: auto !important;
            text-rendering: optimizeLegibility !important;
        }

        /* Optimized text rendering for product cards */
        .group h3, .group p, .group .rating-stars {
            -webkit-font-smoothing: subpixel-antialiased !important;
            -moz-osx-font-smoothing: auto !important;
            text-rendering: optimizeLegibility !important;
            font-feature-settings: "kern" 1, "liga" 1 !important;
            font-kerning: normal !important;
            font-variant-ligatures: common-ligatures !important;
        }

        /* Additional crisp text rendering optimizations for all states */
        .group h3, .group p, .group .rating-stars {
            /* Prevent font synthesis for consistent rendering */
            font-synthesis: none !important;
            /* Optimize kerning and ligatures */
            font-feature-settings: "kern" 1, "liga" 1 !important;
            /* Force subpixel rendering */
            -webkit-font-smoothing: subpixel-antialiased !important;
            -moz-osx-font-smoothing: auto !important;
            /* Optimize text rendering */
            text-rendering: optimizeLegibility !important;
            /* Additional crisp rendering properties for base state */
            -webkit-text-stroke: 0.25px transparent !important;
            font-variant-numeric: oldstyle-nums !important;
            /* Prevent layout shifts during transitions */
            will-change: auto !important;
        }

        /* Enhanced container optimizations for smooth animations */
        .group {
            /* Enable hardware acceleration for the container */
            transform: translateZ(0) !important;
            backface-visibility: hidden !important;
            perspective: 1000px !important;
        }

        .group article {
            /* Preserve 3D transforms for child elements */
            transform-style: preserve-3d !important;
            backface-visibility: hidden !important;
        }

        /* Maintain crisp text during hover - only apply to non-text elements */
        .group:hover .product-img,
        .group:hover a {
            backface-visibility: hidden !important;
        }
        
        /* Enhanced star hover effects */
        .rating-stars .star-icon.filled:hover {
            transform: scale(1.3) !important;
            filter: drop-shadow(0 3px 6px rgba(212, 175, 55, 0.4)) !important;
        }
        html, body { 
            min-height: 100vh; 
            background: linear-gradient(160deg, #f3f4f6 0%, #e5e7eb 100%);
            background-attachment: fixed;
        }
        .dark html, .dark body { 
            background: linear-gradient(160deg, #0d1117 0%, #111827 100%);
            background-attachment: fixed;
        }
        
        /* Ensure background covers entire page */
        main {
            min-height: calc(100vh - 200px);
            background: transparent;
        }
        
        /* Fix any potential background issues */
        * {
            background-color: transparent;
        }
        
        body > * {
            background: transparent;
        }
        
        /* Fix top margin and ensure full background coverage */
        body {
            margin: 0 !important;
            padding: 0 !important;
        }
        
        /* Ensure nav has proper spacing without white gaps */
        nav {
            margin-top: 0 !important;
            background: transparent !important;
            border-radius: 0 !important;
            border-left: none !important;
            border-right: none !important;
            border-top: none !important;
            border-bottom: 1px solid var(--glass-brd) !important;
            -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
            backdrop-filter: blur(16px) saturate(140%) !important;
        }
        
        /* Ensure html and body cover full viewport without gaps */
        html {
            margin: 0 !important;
            padding: 0 !important;
            overflow-x: hidden;
        }
        
        /* Fix any potential white spaces at the top */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 100vh;
            background: inherit;
            z-index: -1;
        }
        .glass {
            background: var(--glass-bg) !important;
            border: 1px solid var(--glass-brd);
            backdrop-filter: blur(16px) saturate(140%);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
        }

        /* Ensure consistent chat appearance across themes */

        .soft-card { border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
        .divider { height: 1px; background: var(--accent) !important; }
        .chat-compact-height {
            height: 480px;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            position: relative !important;
        }

        /* Chat scrollbars (Brave/Chrome/WebKit + Firefox) */
        .chat-compact-height {
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
        }

        .dark .chat-compact-height {
            scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
        }

        .chat-compact-height::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

        .chat-compact-height::-webkit-scrollbar-track {
            background: transparent;
        }

        .chat-compact-height::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 6px;
            border: 2px solid transparent;
            background-clip: padding-box;
        }

        .chat-compact-height::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.45);
        }

        .dark .chat-compact-height::-webkit-scrollbar-thumb {
            background-color: rgba(255, 255, 255, 0.35);
        }

        .dark .chat-compact-height::-webkit-scrollbar-thumb:hover {
            background-color: rgba(255, 255, 255, 0.5);
        }

        /* Hide WebKit scrollbar buttons (Brave up/down arrows) */
        .chat-compact-height::-webkit-scrollbar-button {
            display: none;
            width: 0;
            height: 0;
        }

        /* Defensive: hide number input spinners in WebKit */
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            appearance: none;
            -webkit-appearance: none;
            margin: 0;
        }

        input[type="number"] {
            appearance: none;
            -moz-appearance: textfield;
        }
        .prod-nav { 
            border: 1px solid var(--glass-brd); 
            color: var(--text); 
            transition: transform .25s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .25s ease, background .25s ease; 
        }
        .prod-nav:hover { 
            transform: scale(1.06); 
            box-shadow: 0 10px 24px rgba(0,0,0,.18); 
        }
        .prod-nav:active { transform: scale(0.96); }
        @media (prefers-reduced-motion: no-preference) {
            .prod-nav { animation: floaty 3s ease-in-out infinite; }
            .prod-nav:nth-child(2) { animation-delay: 1.2s; }
        }
        @keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-2px); } }
                .bubble {
            border-radius: 12px;
            padding: 5px 7px;
            word-wrap: break-word !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            max-width: 100% !important;
            white-space: pre-wrap !important;
            cursor: text;
            user-select: text;
            display: inline-block;
            vertical-align: bottom;
            position: relative; /* anchor for absolute time in inline mode */
        }
        /* Responsive bubble max-width (chat column width), left/right aligned */
        .bubble-wrap { width: -moz-fit-content; width: fit-content; max-width: 80%; }
        @media (min-width: 640px) { .bubble-wrap { max-width: 60%; } }
        @media (min-width: 1024px) { .bubble-wrap { max-width: 52%; } }
        @media (min-width: 1280px) { .bubble-wrap { max-width: 50%; } }
        .bubble-self { background: #007AFF; color: #fff; }
        .dark .bubble-self { background: #0A84FF; }
        .bubble-other { background: #ffffff; color: #111827; border: 1px solid rgba(0,0,0,0.06); }
        .dark .bubble-other { background: rgba(255,255,255,0.08); color: #ffffff; border: 1px solid rgba(255,255,255,0.06); }
        .nick { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
        .time { font-size: 11px; color: #ffffff60; margin-top: 2px; }
        .time.light { color: #6b7280a0; }
        .dark .time.light { color: #9ca3afa0; }
        .nick-c1 { color: #1da1f2; }
        .nick-c2 { color: #6ee7b7; }
        .nick-c3 { color: #fca5a5; }
        .nick-c4 { color: #fde68a; }
        .nick-c5 { color: #c4b5fd; }
        .blurred { opacity: 0; transform: translateY(-2px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
        .fullscreen-overlay { position: fixed; inset: 0; z-index: 50; }

        /* Context menu styles optimized */
        .chat-expanded { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(0,0,0,0.4); backdrop-filter: blur(12px); }
        .chat-expanded-content { width: 100%; max-width: 1200px; height: calc(100vh - 4rem); background: var(--glass-bg); border: 1px solid var(--glass-brd); border-radius: 24px; backdrop-filter: blur(24px); box-shadow: 0 25px 50px rgba(0,0,0,0.25); overflow: hidden; }
        
        /* Fullscreen chat styles - hide specific sections */
        .chat-fullscreen nav,
        .chat-fullscreen main > header,
        .chat-fullscreen main > section:not(#chat-card) {
            opacity: 0 !important;
            transform: scale(0.95) !important;
            filter: blur(12px) !important;
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            pointer-events: none !important;
            visibility: hidden !important;
        }
        
        /* Ensure chat card and its contents are visible */
        .chat-fullscreen #chat-card,
        .chat-fullscreen #chat-card * {
            opacity: 1 !important;
            visibility: visible !important;
        }
        
        /* Block horizontal scrolling in chat */
        #chat-root,
        .chat-compact-height {
            overflow-x: hidden !important;
        }
        /* Allow media/code to scale within chat without forcing all elements full-width */
        #chat-root img,
        #chat-root video,
        #chat-root canvas,
        #chat-root table,
        #chat-root pre,
        #chat-root code {
            max-width: 100%;
        }
        
        /* Fix long messages without spaces */
        .bubble {
            hyphens: none !important;           /* prevent auto-inserted hyphens */
            -webkit-hyphens: none !important;
            -ms-hyphens: none !important;
            word-break: break-word !important;  /* allow breaking long words */
            overflow-wrap: anywhere !important; /* prefer breaking anywhere without hyphens */
        }
        
        /* Disable native iOS long-press callout on touch devices */
        @media (hover: none) and (pointer: coarse) {
            .bubble,
            .bubble .message-content-wrapper,
            .bubble .message-text,
            .reply-in-message {
                -webkit-touch-callout: none !important;
                -webkit-user-select: none !important;
                user-select: none !important;
            }
        }
        
        /* Ensure chat container doesn't overflow */
        #chat-root {
            overflow: hidden !important;
            max-width: 100% !important;
            width: 100% !important;
        }

        /* Mobile-only chat wallpaper: fill message area without stretching (cover keeps aspect) */
        @media (max-width: 640px) {
            #chat-root { background: none !important; }
            #chat-root .chat-compact-height {
                position: relative !important;
                background-image: url('/static/theme/pattern-11.svg') !important;
                background-repeat: no-repeat !important;
                background-position: center center !important;
                background-size: cover !important; /* fill area, preserve aspect ratio */
                background-color: transparent !important;
            }
        }


        
        .chat-fullscreen #chat-card {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0 !important;
            padding: 0 !important;
            border-radius: 0 !important;
            z-index: 9999 !important;
            background: transparent !important;
            backdrop-filter: blur(40px) !important;
            border: none !important;
            box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 25px 50px rgba(0,0,0,0.3) !important;
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }
        
        .chat-fullscreen #chat-root {
            height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
        }
        
        .chat-fullscreen #chat-root > div {
            height: 100vh !important;
            display: flex !important;
            flex-direction: column !important;
        }
        
        .chat-fullscreen #chat-root .chat-compact-height {
            flex: 1 !important;
            height: auto !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
        }
        
        /* Smooth transitions for chat card */
        #chat-card {
            transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            transform-origin: bottom right !important;
        }
        
        /* Enhanced glass effect for fullscreen */
        .chat-fullscreen #chat-card {
            background: rgba(255,255,255,0.95) !important;
            backdrop-filter: blur(40px) saturate(180%) !important;
            border: 1px solid rgba(0,0,0,0.08) !important;
        }
        
        /* Dark theme fullscreen adjustments */
        html.dark .chat-fullscreen #chat-card {
            background: rgba(17,24,39,0.95) !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
        }
        
        /* Smooth content transitions */
        .chat-fullscreen #chat-root > div {
            animation: slideInContent 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        
        @keyframes slideInContent {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Background blur overlay for fullscreen */
        .chat-fullscreen::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(20px);
            z-index: 9998;
            opacity: 0;
            animation: fadeInBlur 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }
        
        /* Smooth button animations */
        .chat-fullscreen button {
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }
        
        /* Enhanced input field in fullscreen */
        .chat-fullscreen textarea {
            transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        }
        
        .chat-fullscreen textarea:focus {
            transform: scale(1.02) !important;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
        }
        
        /* Smooth hover effects for buttons */
        .chat-fullscreen button:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
        }
        
        @keyframes fadeInBlur {
            from {
                opacity: 0;
                backdrop-filter: blur(0px);
            }
            to {
                opacity: 1;
                backdrop-filter: blur(20px);
            }
        }
        /* Scroll to bottom button */
        .scroll-to-bottom-btn {
            position: absolute;
            bottom: 70px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--glass-bg);
            border: 1px solid var(--glass-brd);
            backdrop-filter: blur(16px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
            transform-origin: center center;
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.8);
            font-size: 24px;
            color: var(--text);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            will-change: transform, opacity, bottom;
        }

        .scroll-to-bottom-btn.reply-active {
            bottom: 180px;
        }
        
        .scroll-to-bottom-btn.visible {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }
        
        .scroll-to-bottom-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 20px rgba(0,0,0,0.2);
            background: rgba(59, 130, 246, 0.15);
            border-color: rgba(59, 130, 246, 0.4);
        }
        
        .scroll-to-bottom-btn:active {
            transform: scale(0.92);
            transition: all 0.08s ease;
        }
        
        /* Dark theme adjustments for scroll button */
        .dark .scroll-to-bottom-btn {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }
        
        .dark .scroll-to-bottom-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
        }

        /* Mention notification button */
        .mention-notification-btn {
            position: absolute;
            bottom: 170px;
            right: 16px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 149, 0, 0.9);
            border: 1px solid rgba(255, 149, 0, 0.3);
            backdrop-filter: blur(16px);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 10;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.8);
            font-size: 18px;
            color: white;
            box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
            font-weight: bold;
        }

        .mention-notification-btn.visible {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }

        .mention-notification-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(255, 149, 0, 0.4);
            background: rgba(255, 149, 0, 1);
        }

        .mention-notification-btn:active {
            transform: scale(0.95);
            transition: all 0.1s ease;
        }

        /* Reply functionality styles */

        /* iOS-style message time positioning */
        .message-content-wrapper {
            position: relative;
            min-height: 10px;
            display: flex;             /* text + time in one row when possible */
            flex-wrap: wrap;            /* move time to next line only if necessary */
            align-items: flex-end;
            gap: 0;                     /* tight spacing */
            padding-bottom: 0px;
        }

        .message-text {
            flex: 1 1 auto;
            min-width: 0;              /* enable wrapping in flex */
            display: block;
            line-height: 1.3;
        }

        .message-time {
            position: static;
            display: inline-flex;
            align-items: flex-end;
            flex: 0 0 auto;            /* keep intrinsic width; wrap to next line if no room */
            margin-left: auto;         /* push to right edge on current line */
            padding-left: 6px;         /* small gap from text */
            margin-top: 2px;           /* minimal gap if wrapped to next line */
            font-size: 11px;
            line-height: 1;
            opacity: 0.6;
            white-space: nowrap;
            pointer-events: none;
            user-select: none;
            font-weight: 400;
            background: transparent;
        }

        /* Remove special modes; flex handles inline/below automatically */

        .message-time-self {
            color: rgba(255, 255, 255, 0.7);
        }

        .message-time-other {
            color: rgba(0, 0, 0, 0.5);
        }

        .dark .message-time-other {
            color: rgba(255, 255, 255, 0.5);
        }

        /* Special handling for messages with reply */
        .bubble .reply-in-message + .message-content-wrapper {
            margin-top: 6px;
            padding-bottom: 1px;
        }

        /* Compact spacing for single-line messages */
        .bubble .message-content-wrapper:has(.message-text:only-child) {
            min-height: 14px;
        }

        /* Ensure time doesn't overlap with very short text */
        .bubble .message-content-wrapper {
            min-width: 50px;
        }



        /* Spacing between different user message groups */
        .user-group-spacer {
            height: 8px;
        }

        /* Context menu styles */
        .context-menu {
            position: fixed;
            background: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            padding: 6px 0;
            min-width: 140px;
            z-index: 100000;
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            filter: none !important;

            opacity: 0;
            transform: scale(0.95) translateY(-8px);
            transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
            transform-origin: top left;
        }

        .dark .context-menu {
            background: #2d2d2f;
            border: 1px solid rgba(255, 255, 255, 0.12);
            -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
            filter: none !important;

        }

        .context-menu.visible {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: all;
            transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .context-menu-item {
            padding: 10px 14px;
            cursor: pointer;
            font-size: 14px;
            color: #1d1d1f;
            transition: all 0.15s ease;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0 2px;
            border-radius: 6px;
        }

        .context-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.15s ease;
            object-fit: contain;
        }

        .context-text {
            font-weight: 500;
            letter-spacing: 0.2px;
        }

        .context-menu-item:hover .context-icon {
            transform: scale(1.1);
        }

        .dark .context-menu-item {
            color: #f2f2f7;
        }

        .context-menu-item:hover {
            background: rgba(0, 122, 255, 0.1);
            color: #007AFF;
        }

        .dark .context-menu-item:hover {
            background: rgba(10, 132, 255, 0.15);
            color: #0A84FF;
        }

        .context-menu-item {
            transition: all 0.15s ease;
        }

        .context-menu-item:active {
            transform: scale(0.98);
            transition: all 0.08s ease;
        }

        .context-menu-item:first-child {
            margin-top: 2px;
        }

        .context-menu-item:last-child {
            margin-bottom: 2px;
        }

        /* Context menu backdrop */
        .context-menu-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99998;
            background: rgba(0, 0, 0, 0.05);
            opacity: 0;
            animation: fadeInBackdrop 0.3s ease forwards;
        }

        @keyframes fadeInBackdrop {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* iOS-style Delete Modal */
        .ios-delete-modal-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100002;
            overflow: hidden;
            border-radius: var(--radius-lg);
        }

        .ios-delete-modal-overlay::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            pointer-events: none;
            z-index: 0;
            border-radius: var(--radius-lg);
        }

        .dark .ios-delete-modal-overlay::before {
            background: rgba(0, 0, 0, 0.5);
        }

        .ios-delete-modal {
            background: rgba(255, 255, 255, 1) !important;
            border-radius: 12px;
            padding: 0;
            /* Ensure modal is not affected by parent blur */
            backdrop-filter: none !important;
            filter: none !important;
            opacity: 1 !important;
            width: 240px;
            height: 110px;
            margin: 20px;
            /* Ensure modal appears above blur effect */
            z-index: 100003;
            position: relative;
            /* Complete isolation from parent effects */
            isolation: isolate !important;
            mix-blend-mode: normal !important;
            transform: scale(1);
            animation: iosModalFadeIn 0.3s ease-out;
            overflow: hidden;
            /* Add subtle shadow for better visibility */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
        }

        .dark .ios-delete-modal {
            background: rgba(45, 45, 47, 1) !important;

        }

        .ios-delete-modal-message {
            padding: 16px 16px 6px 16px;
            font-size: 16px;
            font-weight: 500;
            color: #1d1d1f;
            text-align: center;
            line-height: 1.4;
        }

        .dark .ios-delete-modal-message {
            color: #f2f2f7;
        }

        .ios-delete-modal-actions {
            display: flex;
            border-top: 0.5px solid rgba(0, 0, 0, 0.1);
        }

        .dark .ios-delete-modal-actions {
            border-top-color: rgba(255, 255, 255, 0.12);
        }

        .ios-delete-modal-cancel,
        .ios-delete-modal-confirm {
            flex: 1;
            padding: 8px 0;
            font-size: 16px;
            font-weight: 500;
            border: none;
            background: none;
            /* Ensure buttons are not affected by parent blur */
            backdrop-filter: none !important;
            filter: none !important;
            opacity: 1 !important;
            cursor: pointer;
            transition: all 0.15s ease;
            border-right: 0.5px solid rgba(0, 0, 0, 0.1);
        }

        .dark .ios-delete-modal-cancel,
        .dark .ios-delete-modal-confirm {
            border-right-color: rgba(255, 255, 255, 0.12);
        }

        .ios-delete-modal-cancel {
            color: #007AFF;
        }

        .ios-delete-modal-confirm {
            color: #ff3b30;
            border-right: none;
        }

        .ios-delete-modal-cancel:hover {
            background: rgba(0, 122, 255, 0.1);
        }

        .ios-delete-modal-confirm:hover {
            background: rgba(255, 59, 48, 0.1);
        }

        .dark .ios-delete-modal-cancel:hover {
            background: rgba(10, 132, 255, 0.15);
        }

        .dark .ios-delete-modal-confirm:hover {
            background: rgba(255, 69, 58, 0.15);
        }

        .ios-delete-modal-cancel:active,
        .ios-delete-modal-confirm:active {
            transform: scale(0.98);
            transition: all 0.08s ease;
        }

        @keyframes iosModalFadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes iosModalScaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* Mobile adjustments for delete modal */
        @media (max-width: 768px) {
            .ios-delete-modal {
                width: min(92vw, 360px) !important;
                max-width: 92vw;
                height: auto !important;
                margin: 12px;
            }
            .ios-delete-modal-message {
                font-size: 15px;
                padding: 14px 14px 8px 14px;
                word-break: break-word;
            }
            .ios-delete-modal-cancel,
            .ios-delete-modal-confirm {
                padding: 12px 0;
                font-size: 16px;
            }
        }

        /* Mute Modal Styles */
        .mute-modal-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100002;
            overflow: hidden;
            border-radius: var(--radius-lg);
        }

        .mute-modal-overlay::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            pointer-events: none;
            z-index: 0;
            border-radius: var(--radius-lg);
        }

        .dark .mute-modal-overlay::before {
            background: rgba(0, 0, 0, 0.6);
        }

        .mute-modal {
            position: relative;
            z-index: 100003;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(20px);
            border-radius: var(--radius-xl);
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
            width: 320px;
            max-width: 90vw;
            animation: muteModalFadeIn 0.3s ease-out;
            overflow: hidden;
        }

        .dark .mute-modal {
            background: rgba(31, 41, 55, 0.98);
            border-color: rgba(255, 255, 255, 0.1);
        }

        .dark .mute-modal-duration {
            background: rgba(239, 68, 68, 0.15);
            border-color: rgba(239, 68, 68, 0.3);
        }

        .mute-modal-content {
            padding: 24px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .mute-modal-icon {
            font-size: 40px;
            margin-bottom: 8px;
            animation: muteIconPulse 2s ease-in-out infinite;
        }

        .mute-modal-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text);
            margin-bottom: 4px;
        }

        .mute-modal-message {
            font-size: 14px;
            color: var(--text);
            line-height: 1.4;
            margin-bottom: 8px;
        }

        .mute-modal-details {
            font-size: 12px;
            color: var(--sub);
            font-weight: 500;
            margin-bottom: 8px;
        }

        .mute-modal-duration {
            font-size: 12px;
            color: #ef4444;
            font-weight: 600;
            background: rgba(239, 68, 68, 0.1);
            padding: 6px 10px;
            border-radius: var(--radius-md);
            border: 1px solid rgba(239, 68, 68, 0.2);
            margin-bottom: 16px;
            text-align: center;
        }

        .mute-modal-close {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: var(--radius-lg);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .mute-modal-close:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
        }

        .mute-modal-close:active {
            transform: translateY(0) scale(0.98);
            transition: all 0.1s ease;
        }

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

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

        /* Mobile adjustments for mute modal */
        @media (max-width: 768px) {
            .mute-modal {
                width: min(90vw, 320px);
                margin: 16px;
            }
            .mute-modal-content {
                padding: 20px;
            }
            .mute-modal-icon {
                font-size: 40px;
            }
            .mute-modal-title {
                font-size: 16px;
            }
            .mute-modal-message {
                font-size: 15px;
            }
            .mute-modal-duration {
                font-size: 13px;
                padding: 6px 10px;
            }
        }

        /* Reply in message styles (like Telegram) */
        .reply-in-message {
            border-left: 3px solid #007AFF;
            padding: 6px 10px;
            margin: 0 0 8px 0;
            background: rgba(0, 122, 255, 0.06);
            border-radius: 6px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .reply-in-message:hover {
            background: rgba(0, 122, 255, 0.08);
        }

        .dark .reply-in-message {
            background: rgba(0, 122, 255, 0.08);
            border-left-color: #0A84FF;
        }

        .dark .reply-in-message:hover {
            background: rgba(0, 122, 255, 0.12);
        }

        .reply-in-message-author {
            font-size: 13px;
            font-weight: 600;
            color: #007AFF;
            margin-bottom: 2px;
            line-height: 1.2;
        }

        .dark .reply-in-message-author {
            color: #0A84FF;
        }

        .reply-in-message-text {
            font-size: 13px;
            color: rgba(0, 0, 0, 0.7);
            line-height: 1.3;
            word-break: break-word;
        }

        .dark .reply-in-message-text {
            color: rgba(255, 255, 255, 0.6);
        }

        /* Special styles for replies in self messages (blue bubbles) */
        .bubble-self .reply-in-message {
            background: rgba(255, 255, 255, 0.15);
            border-left-color: rgba(255, 255, 255, 0.6);
        }

        .bubble-self .reply-in-message:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .bubble-self .reply-in-message-author {
            color: rgba(255, 255, 255, 0.9);
        }

        .bubble-self .reply-in-message-text {
            color: rgba(255, 255, 255, 0.7);
        }

        /* Reply preview above input */
        .reply-preview-input {
            margin: 0 16px 8px 16px;
        }

        .reply-preview-bubble {
            position: relative;
            background: rgba(59, 130, 246, 0.08);
            border-left: 3px solid #007AFF;
            border-radius: 12px;
            padding: 10px 48px 10px 14px;
            display: flex;
            align-items: center;
            min-height: 44px;
            border: 1px solid rgba(59, 130, 246, 0.18);
            backdrop-filter: blur(16px);
            cursor: pointer;
            transition: background 0.2s ease, border-color 0.2s ease;
        }

        .reply-preview-bubble:hover {
            background: rgba(59, 130, 246, 0.12);
        }

        .dark .reply-preview-bubble {
            background: rgba(59, 130, 246, 0.14);
            border-left-color: #0A84FF;
            border-color: rgba(59, 130, 246, 0.25);
        }

        .dark .reply-preview-bubble:hover {
            background: rgba(59, 130, 246, 0.2);
        }

        .reply-preview-label {
            flex: 1 1 auto;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--text);
            font-size: 13px;
            font-weight: 500;
            padding-right: 8px;
        }

        .reply-preview-label strong {
            color: #007AFF;
        }

        .dark .reply-preview-label strong {
            color: #0A84FF;
        }

        .reply-preview-close {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(59, 130, 246, 0.18);
            color: #0F172A;
            font-size: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            transition: background 0.2s ease, color 0.2s ease;
        }

        .reply-preview-close:hover {
            background: rgba(59, 130, 246, 0.28);
        }

        .dark .reply-preview-close {
            background: rgba(59, 130, 246, 0.28);
            color: #F9FAFB;
        }

        .dark .reply-preview-close:hover {
            background: rgba(59, 130, 246, 0.38);
        }

        /* Mention highlighting */
        .mention {
            background: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
            padding: 2px 4px;
            border-radius: 4px;
            font-weight: 600;
        }

        .mention-me {
            background: rgba(255, 149, 0, 0.2);
            color: #ff9500;
            padding: 2px 4px;
            border-radius: 4px;
            font-weight: 600;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        /* Chat button animations and fixes */
        .chat-input-container {
            position: relative;
            display: flex;
            gap: 12px;
            align-items: flex-end;
            padding: 16px;
        }
        
        .chat-textarea {
            flex: 1;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            resize: none;
            outline: none;
            border: none;
            background: var(--glass-bg);
            border: 1px solid var(--glass-brd);
            border-radius: 16px;
            /* Reserve space for emoji + send buttons inside */
            padding: 12px 58px 12px 16px;
            font-family: inherit;
            font-size: 14px;
            line-height: 1.4;
            min-height: 44px;
            max-height: 120px;
            overflow: hidden;
            max-width: 100%;
            width: 100%;
        }
        
        .chat-textarea:focus {
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
            border-color: rgba(59, 130, 246, 0.5);
            max-width: 100%;
        }
        
        /* Hide scrollbar in textarea */
        .chat-textarea::-webkit-scrollbar {
            display: none;
        }
        
        .chat-textarea {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        
        .chat-send-btn {
            background: var(--glass-bg);
            border: 1px solid var(--glass-brd);
            border-radius: 16px;
            padding: 12px 20px;
            font-weight: 600;
            font-size: 14px;
            color: var(--text);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            white-space: nowrap;
            min-width: 80px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        .chat-send-btn:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        }
        
        .chat-send-btn:active {
            transform: translateY(0) scale(0.98);
            transition: all 0.1s ease;
        }

        .chat-send-btn.sending {
            animation: sendingPulse 0.15s ease-in-out;
            background: var(--glass-bg) !important;
            border-color: var(--glass-brd) !important;
            box-shadow: none !important;
        }

        @keyframes sendingPulse {
            0% { transform: scale(1); }
            50% { transform: scale(0.95); }
            100% { transform: scale(1); }
        }
        
        /* Ensure textarea is dynamic in all modes */
        .chat-textarea {
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        
        /* Responsive chat input */
        @media (max-width: 768px) {
            /* Prevent zoom on mobile devices */
            input, textarea, button, select {
                font-size: 16px !important;
            }

            input:focus, textarea:focus, button:focus {
                outline: none !important;
            }

            /* Allow button animations but prevent excessive scaling */
            button:active:not(.chat-send-inline):not(.scroll-to-bottom-btn):not(.context-menu-item) {
                transform: scale(0.98) !important;
            }

            /* Prevent any scaling on mobile */
            * {
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
            }

            input, textarea {
                -webkit-user-select: text;
                user-select: text;
            }

            .chat-input-container {
                padding: 12px;
                gap: 8px;
            }
            
            .chat-textarea {
                min-height: 40px;
                padding: 10px 58px 10px 14px;
                font-size: 16px;
                max-width: 100%;
            }
            .chat-send-inline { top: 50%; bottom: auto; transform: translateY(-50%); }
            .chat-send-inline:hover { transform: translateY(-50%) scale(1.05); }
            .chat-send-inline:active { transform: translateY(-50%) scale(0.98); }
            .chat-send-inline.sending { transform: translateY(-50%) scale(0.95); }

            .chat-textarea:focus {
                max-width: 100%;
            }
            .chat-emoji-inline { top: 50%; bottom: auto; right: 44px; transform: translateY(-50%); }
            .chat-emoji-inline:hover { transform: translateY(-50%) scale(1.05); }
            .chat-emoji-inline:active { transform: translateY(-50%) scale(0.98); }

            /* Mobile button base state - looks like desktop hover */
            .chat-send-btn {
                transform: translateY(-2px) scale(1.05) !important;
                box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
                transition: all 0.15s ease !important;
            }

            /* Allow button animations on mobile but prevent excessive scaling */

            .chat-send-btn:active {
                transform: translateY(0) scale(0.98) !important;
                transition: all 0.1s ease !important;
            }

            /* Ensure scroll button animations work on mobile */
            .scroll-to-bottom-btn:hover,
            .scroll-to-bottom-btn:active {
                transform: scale(1.05) !important;
                box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
                transition: all 0.15s ease !important;
            }

            /* Ensure context menu items animate on mobile */
            .context-menu-item:hover,
            .context-menu-item:active {
                transform: scale(1.02) !important;
                transition: all 0.08s ease !important;
            }

            /* Additional mobile-specific button animations */
            .chat-send-btn,
            .scroll-to-bottom-btn,
            .context-menu-item {
                -webkit-tap-highlight-color: transparent !important;
                touch-action: manipulation !important;
            }

            /* Ensure sending animation works on mobile */
            .chat-send-btn.sending {
                animation: sendingPulse 0.15s ease-in-out !important;
                transform: scale(0.95) !important;
                background: var(--glass-bg) !important;
                border-color: var(--glass-brd) !important;
                box-shadow: none !important;
            }
            
            .chat-send-btn {
                padding: 10px 16px;
                font-size: 16px;
                min-width: 70px;
                height: 40px;
            }
            
            .scroll-to-bottom-btn {
                bottom: 60px;
                right: 12px;
                width: 40px;
                height: 40px;
            }

            .scroll-to-bottom-btn.reply-active {
                bottom: 160px;
            }
        }
        
        /* Fullscreen chat adjustments */
        .chat-fullscreen .scroll-to-bottom-btn {
            position: absolute;
            bottom: 70px;
            right: 16px;
            z-index: 10000;
            width: 40px;
            height: 40px;
        }

        .chat-fullscreen .scroll-to-bottom-btn.reply-active {
            bottom: 180px;
        }
        
        .chat-fullscreen .chat-input-container {
            position: relative;
            z-index: 10001;
        }
        
        .chat-fullscreen .chat-textarea {
            max-height: 200px !important;
            overflow: hidden !important;
            max-width: 100% !important;
        }

        .chat-fullscreen .chat-textarea:focus {
            max-width: 100% !important;
        }
        
        .chat-fullscreen .chat-textarea::-webkit-scrollbar {
            display: none !important;
        }

        /* Inline send icon button inside textarea */
        .chat-send-inline {
            position: absolute;
            right: 16px;
            bottom: 26px;
            /* Anchor to bottom, keep within textarea corner */
            transform: none;
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.15s ease;
        }

        .chat-send-inline img {
            width: 24px;
            height: 24px;
            object-fit: contain;
            pointer-events: none;
            position: absolute;
            inset: 0;
            transition: opacity 0.2s ease;
        }

        .chat-send-inline:hover { transform: scale(1.05); }
        .chat-send-inline:active { transform: scale(0.98); transition: all 0.1s ease; }
        .chat-send-inline:disabled { opacity: 1; cursor: default; }
        .chat-send-inline.sending { transform: scale(0.95); }
        .chat-send-inline .send-icon-active { opacity: 0; }
        .chat-send-inline .send-icon-inactive { opacity: 1; }
        .chat-send-inline.is-active .send-icon-active { opacity: 1; }
        .chat-send-inline.is-active .send-icon-inactive { opacity: 0; }
        .chat-emoji-inline {
            position: absolute;
            right: 44px;
            bottom: 26px;
            width: 24px;
            height: 24px;
            border: none;
            background: transparent;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.15s ease;
        }
        .chat-emoji-inline:hover { transform: scale(1.05); }
        .chat-emoji-inline:active { transform: scale(0.98); transition: all 0.1s ease; }
        /* Ensure mobile overrides come after base rules to win cascade */
        @media (max-width: 768px) {
            .chat-send-inline { top: 50%; bottom: auto; transform: translateY(-50%); }
            .chat-send-inline:hover { transform: translateY(-50%) scale(1.05); }
            .chat-send-inline:active { transform: translateY(-50%) scale(0.98); }
            .chat-send-inline.sending { transform: translateY(-50%) scale(0.95); }
            .chat-emoji-inline { top: 50%; bottom: auto; right: 44px; transform: translateY(-50%); }
            .chat-emoji-inline:hover { transform: translateY(-50%) scale(1.05); }
            .chat-emoji-inline:active { transform: translateY(-50%) scale(0.98); }
        }
        .chat-emoji-inline img { position: absolute; inset:0; width:24px; height:24px; transition: opacity .2s ease; }
        .chat-emoji-inline .emoji-icon-dark { opacity: 0; }
        .chat-emoji-inline .emoji-icon-light { opacity: 1; }
        .dark .chat-emoji-inline .emoji-icon-dark { opacity: 1; }
        .dark .chat-emoji-inline .emoji-icon-light { opacity: 0; }
        /* Emoji picker (Telegram-like basics) */
        .emoji-btn {
            background: transparent;
            border: none;
            border-radius: 8px;
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            transition: transform .12s ease, background .12s ease;
        }
        .emoji-btn:hover { background: rgba(0,0,0,0.06); }
        .dark .emoji-btn:hover { background: rgba(255,255,255,0.08); }
        .emoji-btn:active { transform: scale(0.96); }
        .emoji-panel {
            position: fixed;
            bottom: 96px;
            right: 16px;
            width: min(360px, calc(100% - 32px));
            height: 320px;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border: 1px solid rgba(0,0,0,0.08);
            border-radius: 14px;
            box-shadow: 0 16px 40px rgba(0,0,0,0.18);
            overflow: hidden;
            z-index: 10010;
        }
        .dark .emoji-panel { background: #1f2937; border-color: rgba(255,255,255,0.12); }
        .emoji-search {
            padding: 6px 8px;
            border-bottom: 1px solid var(--glass-brd);
            display: flex;
            gap: 8px;
            align-items: center;
            background: inherit;
        }
        .emoji-search input {
            flex: 1;
            background: rgba(0,0,0,0.04);
            border: 1px solid var(--glass-brd);
            border-radius: 10px;
            padding: 8px 10px;
            color: var(--text);
            outline: none;
        }
        .dark .emoji-search input { background: rgba(255,255,255,0.06); }
        .emoji-tabs {
            display: flex;
            gap: 4px;
            padding: 4px 6px;
            border-bottom: 1px solid var(--glass-brd);
            overflow-x: auto;
            scrollbar-width: none;
        }
        .emoji-tab {
            border: none;
            background: transparent;
            border-radius: 10px;
            padding: 6px 10px;
            cursor: pointer;
            color: var(--text);
            opacity: 0.7;
            white-space: nowrap;
        }
        .emoji-tab.active { background: rgba(59,130,246,0.12); opacity: 1; }
        .emoji-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            gap: 4px;
            padding: 6px;
            overflow-y: auto;
        }
        .emoji-item {
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: none;
            border-radius: 6px;
            height: 32px;
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            transition: background .12s ease, transform .12s ease;
        }
        .emoji-item:hover { background: rgba(0,0,0,0.06); transform: translateY(-1px); }
        .dark .emoji-item:hover { background: rgba(255,255,255,0.08); }
        @media (max-width: 768px) {
            .emoji-panel { left: 8px; right: 8px; width: auto; bottom: 88px; height: calc(4 * 44px + 3 * 4px + 8px); }
            .emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; padding: 4px; grid-auto-rows: 44px; }
            .emoji-item { height: 44px; font-size: 32px; line-height: 1; }
            .emoji-btn { width: 36px; height: 36px; }
        }
        
        .chat-fullscreen .chat-send-btn {
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
            cursor: pointer !important;
            pointer-events: auto !important;
        }
        
        .chat-fullscreen .chat-send-btn:hover {
            transform: translateY(-2px) scale(1.05) !important;
            box-shadow: 0 8px 25px rgba(0,0,0,0.2) !important;
        }
        
        .chat-fullscreen .chat-send-btn:active {
            transform: translateY(0) scale(0.98) !important;
            transition: all 0.1s ease !important;
        }

        /* iOS-style City Selection Card */
        .city-selection-card {
            position: relative;
            width: 100%;
            max-width: 380px;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 12px;
            padding: 28px 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
            animation: cityCardAppear 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
            transform: translateY(20px) scale(0.95);
            opacity: 0;
            z-index: 5;
        }

        .dark .city-selection-card {
            background: #1f2937;
            border: 1px solid #374151;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        @keyframes cityCardAppear {
            to {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        .city-header {
            text-align: center;
            margin-bottom: 28px;
        }

        .city-icon {
            font-size: 48px;
            margin-bottom: 16px;
            animation: iconFloat 3s ease-in-out infinite;
        }

        @keyframes iconFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        .city-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
            letter-spacing: -0.5px;
        }

        .city-subtitle {
            font-size: 16px;
            color: var(--sub);
            opacity: 0.8;
            margin: 0;
        }

        .city-form {
            margin-bottom: 24px;
        }

        .city-select-wrapper {
            position: relative;
            margin-bottom: 20px;
            z-index: 10;
        }

        .city-select-display {
            width: 100%;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 16px;
            color: var(--text);
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }

        .dark .city-select-display {
            background: #374151;
            border-color: #4b5563;
        }

        .city-select-display:hover {
            background: rgba(255, 255, 255, 0.95);
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-1px);
        }

        .dark .city-select-display:hover {
            background: #4b5563;
        }

        .city-select-display.active {
            background: rgba(255, 255, 255, 0.98);
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            transform: translateY(-1px);
        }

        .dark .city-select-display.active {
            background: #4b5563;
            border-color: rgba(59, 130, 246, 0.6);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
        }

        .city-select-text {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .city-select-arrow {
            color: var(--sub);
            font-size: 14px;
            transition: transform 0.3s ease;
            margin-left: 12px;
        }

        .city-select-display.active .city-select-arrow {
            color: #3b82f6;
            transform: rotate(180deg);
        }

        .city-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
            max-height: 360px;
            overflow-y: scroll;
            overflow-x: hidden;
            opacity: 0;
            visibility: hidden;
            transform: translateY(-8px) scale(0.95);
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 2000;
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
            -webkit-overflow-scrolling: touch;
        }

        .dark .city-dropdown {
            background: #1f2937;
            border-color: #374151;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        /* Webkit scrollbar styles for better visibility */
        .city-dropdown::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        .city-dropdown::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
        }

        .city-dropdown::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 4px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .city-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.5);
        }

        .dark .city-dropdown::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
        }

        .dark .city-dropdown::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(0, 0, 0, 0.1);
        }

        .dark .city-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        .city-dropdown.open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .city-option {
            padding: 16px 20px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-radius: 12px;
            margin: 4px 8px;
        }

        .city-option:hover {
            background: rgba(59, 130, 246, 0.1);
            transform: translateY(-2px);
        }

        .dark .city-option:hover {
            background: rgba(59, 130, 246, 0.2);
        }

        .city-option.selected {
            background: rgba(59, 130, 246, 0.15);
            color: #3b82f6;
            font-weight: 600;
        }

        .dark .city-option.selected {
            background: rgba(59, 130, 246, 0.25);
        }

        .option-text {
            font-weight: 500;
            font-size: 16px;
        }



        .city-submit-btn {
            width: 100%;
            padding: 16px 24px;
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border: none;
            border-radius: 16px;
            color: white;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .city-submit-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .city-submit-btn:hover::before {
            left: 100%;
        }

        .city-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
        }

        .city-submit-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
        }

        .btn-text {
            font-weight: 600;
            letter-spacing: 0.2px;
        }

        .btn-icon {
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .city-submit-btn:hover .btn-icon {
            transform: translateX(4px);
        }

        /* Dark theme styles for city submit button - no glass effect */
        .dark .city-submit-btn {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            border: none;
            box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
        }

        .dark .city-submit-btn:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.5);
        }

        .city-decoration {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: hidden;
            border-radius: 28px;
            z-index: 0;
        }

        .decoration-circle {
            position: absolute;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
            animation: circleFloat 6s ease-in-out infinite;
        }

        .circle-1 {
            width: 120px;
            height: 120px;
            top: -60px;
            right: -60px;
            animation-delay: 0s;
        }

        .circle-2 {
            width: 80px;
            height: 80px;
            bottom: -40px;
            left: -40px;
            animation-delay: 2s;
        }

        .circle-3 {
            width: 60px;
            height: 60px;
            top: 50%;
            left: -30px;
            animation-delay: 4s;
        }

        @keyframes circleFloat {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
            50% { transform: translateY(-20px) scale(1.1); opacity: 0.6; }
        }

        /* Mobile responsive adjustments */
        @media (max-width: 768px) {
            .city-selection-card {
                margin: 16px;
                padding: 24px 20px;
                max-width: none;
            }

            .city-dropdown {
                max-height: 300px;
                -webkit-overflow-scrolling: touch;
                overflow-y: scroll !important;
            }

            .city-title {
                font-size: 24px;
            }

            .city-icon {
                font-size: 40px;
            }

            /* Mobile navigation fixes */

            nav .flex.items-center.justify-between {
                flex-direction: column;
                gap: 6px;
                min-height: 24px;
            }

            nav .flex.items-center.gap-6.text-center {
                order: 2;
                flex-wrap: wrap;
                justify-content: center;
                gap: 8px;
                font-size: 14px;
            }

            nav .flex.items-center.gap-4.w-32.justify-end {
                order: 1;
                width: 100%;
                justify-content: space-between;
                gap: 8px;
            }

            nav .w-32 {
                width: auto;
            }

            /* Hide navbar theme switch and city-change link on mobile */
            nav a[href="/clear-city-cookie"],
            nav #theme-root {
                display: none !important;
            }

            /* Ensure theme toggle is visible */
            #theme-root {
                display: flex !important;
                align-items: center;
                min-height: 36px;
            }

            /* Make theme toggle more touch-friendly on mobile */
            #theme-root button {
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }

            /* Make city change link smaller on mobile */
            a[href="/clear-city-cookie"] {
                font-size: 12px;
                white-space: normal;
                text-align: right;
                padding: 8px 12px;
                border-radius: 8px;
                transition: all 0.2s ease;
                min-height: 36px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            a[href="/clear-city-cookie"]:hover {
                background: rgba(255, 255, 255, 0.1);
            }
        }

        /* Mobile emoji theme toggle (centered in the gap between nav and welcome) */
        #theme-emoji-toggle {
            position: absolute;
            right: 10px; /* align with main content padding (px-6) */
            top: 12px; /* (py-10 is ~40px) => (40px - 32px)/2 = 4px */
            width: 32px;
            height: 32px;
            border-radius: 9999px;
            display: none; /* shown only on mobile */
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background: rgba(255,255,255,0.85);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(0,0,0,0.1);
            box-shadow: 0 6px 18px rgba(0,0,0,0.18);
            z-index: 5;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            cursor: pointer;
            user-select: none;
            -webkit-user-select: none;
        }
        .dark #theme-emoji-toggle {
            background: rgba(31,41,55,0.9);
            border-color: rgba(255,255,255,0.12);
            box-shadow: 0 8px 22px rgba(0,0,0,0.35);
            color: #e5e7eb;
        }

        @media (max-width: 768px) {
            main { position: relative; }
            #theme-emoji-toggle { display: inline-flex; }
            nav.glass.soft-card {
                padding-top: 0px !important;
                padding-bottom: 6px !important;
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
        }

        /* Inline city changer styles */
        .city-inline-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: none;
            background: #007AFF;
            color: #fff;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.15s ease;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
            pointer-events: auto;
            position: relative;
            z-index: 10;
        }
        .city-inline-link:hover {
            background: #0056CC;
            transform: translateY(-1px);
        }
        .dark .city-inline-link {
            background: #0A84FF;
            color: #fff;
        }
        .dark .city-inline-link:hover {
            background: #007AFF;
        }

        /* Extra small screens */
        @media (max-width: 480px) {
            .city-dropdown {
                max-height: 300px;
                overflow-y: scroll !important;
                -webkit-overflow-scrolling: touch;
            }

            nav .flex.items-center.gap-6.text-center {
                gap: 8px;
                font-size: 13px;
            }

            nav .flex.items-center.gap-6.text-center a {
                padding: 4px 8px;
            }

            /* Stack theme toggle and city change vertically on very small screens */
            nav .flex.items-center.gap-4.w-32.justify-end {
                flex-direction: column;
                align-items: flex-end;
                gap: 8px;
            }

            #theme-root {
                align-self: flex-end;
            }

            a[href="/clear-city-cookie"] {
                align-self: flex-end;
                margin-right: 0;
                padding: 6px 10px;
                font-size: 11px;
            }

            /* Make theme toggle smaller on very small screens */
            #theme-root button {
                transform: scale(0.9);
            }

            #theme-root button div {
                font-size: 14px;
            }
        }

        .chat-header { position: relative; }
        .typing-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 70%; text-align: center; pointer-events: none; z-index: 1; }
        .typing-indicator {
            display: inline-flex; align-items: center; justify-content: center;
            gap: 6px; white-space: nowrap; font-weight: 700; font-size: 15px;
            color: #007AFF; /* match .bubble-self */
        }
        .typing-indicator .dots { display: inline-flex; gap: 3px; }
        .typing-indicator .dot {
            width: 4px; height: 4px; border-radius: 9999px; background: currentColor; opacity: .7;
            animation: typing-bounce 1.2s infinite ease-in-out;
        }
        .typing-indicator .dot:nth-child(2) { animation-delay: .15s; }
        .typing-indicator .dot:nth-child(3) { animation-delay: .3s; }
        @keyframes typing-bounce {
            0%, 80%, 100% { transform: translateY(0); opacity: .5; }
            40% { transform: translateY(-3px); opacity: 1; }
        }
        .dark .typing-indicator { color: #0A84FF; }
        @media (max-width: 640px) {
            .typing-center { left: auto; right: 10px; top: 50%; transform: translateY(-50%); max-width: 55%; text-align: right; }
            .typing-indicator { font-size: 11px; font-weight: 600; }
            .typing-indicator .dot { width: 3px; height: 3px; }
        }

        @media (max-width: 768px) { .product-title { -webkit-line-clamp: 2; line-clamp: 2; min-height: calc(1.05em * 2); } }