html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
        body { margin: 0; padding: 0 !important; background: #000; color: #fff; overflow: hidden; font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; user-select: none; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; height: 100dvh; }
        
        .app-container { 
            position: relative; 
            width: 100vw !important; 
            height: 100vh; 
            height: 100dvh; 
            max-width: 100vw !important; 
            max-height: 100vh; 
            aspect-ratio: unset !important; 
            background: #000; 
            overflow: hidden; 
            display: flex; 
            flex-direction: column; 
            box-shadow: none !important; 
            margin: 0 !important; 
        }

        .viewer { width: 100%; height: calc(100% - 65px); position: relative; top: 0; left: 0; z-index: 1; overflow: hidden; background: #000; touch-action: none; }
        .video-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #000; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: opacity 0.2s ease; }
        .video-wrap iframe, .video-wrap video, .video-wrap > img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center center !important; border: none; pointer-events: none; }
        .video-wrap.image-mode { align-items:flex-start; padding-top:21vh; box-sizing:border-box; background:linear-gradient(180deg,#0a0a0a 0%,#000 100%); }
        .cityeer-square-frame { position:relative; width:min(100%,56vh); aspect-ratio:1/1; flex:0 0 auto; overflow:hidden; background:#111; box-shadow:0 8px 28px rgba(0,0,0,.45); touch-action:none; }
        .video-wrap .cityeer-square-frame img { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center center !important; border:0; pointer-events:none; }
        .image-info-mode .info-inner { background:rgba(0,0,0,.78); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:10px 12px; box-shadow:0 5px 20px rgba(0,0,0,.35); max-width:calc(100% - 52px); }

        .media-sound-btn {
            position: absolute;
            right: 16px;
            bottom: 225px;
            z-index: 45;
            border: 1px solid rgba(255,255,255,.45);
            background: rgba(0,0,0,.68);
            color: #fff;
            border-radius: 999px;
            padding: 8px 11px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 10px;
            font-weight: 900;
            cursor: pointer;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            box-shadow: 0 2px 10px rgba(0,0,0,.35);
        }
        .media-sound-btn .material-icons-outlined { font-size: 18px; }
        .media-sound-btn.sound-on {
            background: rgba(255,102,0,.88);
            border-color: rgba(255,255,255,.75);
        }

        .viewer-top-bar { position: absolute; top: 1vh; left: 0; width: 100%; box-sizing: border-box; z-index: 50; display: flex; flex-direction: column; padding: 3px 15px 5px 15px; background: none !important; }
        .top-logo-link { text-decoration: none; display: flex; justify-content: flex-end; width: 100%; padding-right: 4px; margin-bottom: 2px; }
        
        .top-logo-banner { text-align: right; font-size: 18.72px; font-weight: 900; letter-spacing: 0.5px; text-shadow: 0 2px 4px #000; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
        .top-logo-banner .city-favicon { height: 28px; width: 28px; object-fit: contain; vertical-align: middle; border-radius: 50%; filter: none; }
        .top-favicon-auth { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; flex:0 0 auto; }
        .top-brand-info-link { display:inline-flex; align-items:center; text-decoration:none; gap:0; }
        .top-favicon-auth:focus-visible, .top-brand-info-link:focus-visible { outline:2px solid #ff6600; outline-offset:3px; border-radius:4px; }
        .top-logo-banner .city-part { color: #ff6600; }
        .top-logo-banner .market-part { color: #ffffff; font-size: 1.15em; }

        .top-bar-row { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin-top: 0px; }
        .top-left-brand-box { display: flex; flex-direction: column; align-items: flex-start; width: 45%; position: relative; z-index: 60; margin-top: 1vh; }
        .supplier-brand-link { text-decoration: none; display: inline-block; width: 100%; max-width: 100%; margin-top: 2px; box-sizing: border-box; position: relative; z-index: 60; }
        .supplier-brand-hero { font-size: 1.92rem; font-weight: 900; color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.4), 0 2px 8px #000; letter-spacing: -0.5px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
        .supplier-logo-img { width: 100%; max-height: 45px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.9)); }
        .top-adno-text { font-size: 11.5px; font-weight: 600; color: #ddd; margin-top: 2px; text-shadow: 0 1px 3px #000; letter-spacing: 0.3px; }

        .top-address-box { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; background: rgba(220, 220, 220, 0.88); border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; padding: 6px 11px; width: fit-content; max-width: 100%; margin-top: 4px; backdrop-filter: blur(4px); text-decoration: none; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        .top-addr-text-wrap { display: flex; flex-direction: column; text-align: left; }
        .top-addr-line1, .top-addr-line2 { font-size: 12.2px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }

        .badge-condition { display: inline-block; background: #3498db; color: #fff; padding: 2px 7px; border-radius: 4px; font-size: 13.1px; font-weight: 900; text-transform: uppercase; text-shadow: 0 1px 2px #000; width: fit-content; margin-top: 4px; }
        .amazon-disclosure { margin-top: 4px; font-size: 8.5px; line-height: 1.25; color: rgba(255,255,255,.68); font-weight: 500; }
        .amazon-meta-line { margin-top: 3px; font-size: 9px; line-height: 1.3; color: rgba(255,255,255,.75); }
        .amazon-check-price { font-size: 19px; font-weight: 900; color: #ffb84d; white-space: nowrap; }

        .platform-brand-area { display: flex; flex-direction: column; align-items: flex-end; text-align: right; width: 100%; gap: 3.5px; position: relative; box-sizing: border-box; z-index: 65; }
        .search-bar-wrap { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; padding: 5px 8px; width: fit-content; max-width: 100%; margin-left: auto; backdrop-filter: blur(4px); box-sizing: border-box; gap: 8px; }
        .search-input-pro { width: 160px; background: transparent; border: none; color: #fff; font-size: 0.83rem; outline: none; text-align: left; }
        .search-input-pro::placeholder { color: #ccc; font-size: 0.83rem; }
        .search-bar-wrap .material-icons-outlined { font-size: 16px; color: #ccc; cursor: pointer; flex-shrink: 0; }

        .section-dropdown-wrap, .city-state-wrap { transform: scale(1.11); transform-origin: right top; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.7); padding: 7px 9px; border-radius: 6px; width: fit-content; min-width: 130px; box-sizing: border-box; justify-content: space-between; backdrop-filter: blur(4px); margin-left: auto; position:relative; }
        .section-dropdown-wrap { border: 1px solid rgba(255,215,0,0.4); }
        .cityma-section-tabs { display:flex; width:min(100%,320px); margin:0 0 2px auto; border:1px solid rgba(255,215,0,.45); border-radius:7px; overflow:hidden; background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
        .cityma-section-tab { flex:1 1 0; border:0; border-right:1px solid rgba(255,255,255,.16); background:transparent; color:#d1d5db; font-size:.78rem; font-weight:900; letter-spacing:.02em; padding:8px 6px; cursor:pointer; }
        .cityma-section-tab:last-child { border-right:0; }
        .cityma-section-tab.is-active { color:#ffd700; background:rgba(255,215,0,.10); }
        /* ADID advertiser-site mode: preserve the working DOM/layout and only hide marketplace controls. */
        .cityma-ad-site-section {
            display:none;
            align-items:center;
            justify-content:center;
            width:100%;
            min-height:36px;
            padding:7px 12px;
            border:1px solid rgba(255,215,0,.55);
            border-radius:7px;
            background:rgba(0,0,0,.72);
            color:#ffd700;
            font-size:.84rem;
            font-weight:900;
            letter-spacing:.06em;
            text-transform:uppercase;
            box-sizing:border-box;
        }
        body.direct-ad-site .platform-brand-area .search-bar-wrap,
        body.direct-ad-site .platform-brand-area .cityma-section-tabs,
        body.direct-ad-site .right-wall-scroll-indicator {
            display:none !important;
        }
        body.direct-ad-site .platform-brand-area .cityma-ad-site-section {
            display:flex !important;
        }
        .cityma-launch-market-label { color:#fff; font-weight:900; font-size:.9rem; letter-spacing:.03em; white-space:nowrap; }

        .city-state-wrap { border: 1px solid rgba(0,229,255,0.4); }

        /* Custom menus avoid the mismatched native Windows/Chrome option popup. */
        .cityma-filter-kicker { flex:0 0 42px; min-width:42px; color:#9ca3af; font-size:9px; line-height:1.15; font-weight:500; text-align:left; white-space:normal; }
        .cityma-dropdown-trigger { width:100%; min-width:0; padding:1px 0; border:0; background:transparent; display:flex; align-items:center; justify-content:flex-end; gap:5px; color:#00e5ff; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size:1.058rem; line-height:1.25; font-weight:850; cursor:pointer; text-align:right; text-shadow:0 1px 3px rgba(0,0,0,.9); }
        .cityma-dropdown-trigger > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .cityma-location-trigger.is-state { color:#fff; }
        .cityma-location-trigger.is-country { color:#ff7a1a; }
        .section-dropdown-wrap .cityma-dropdown-trigger { color:#ffd700; font-size:1.15rem; }
        .cityma-dropdown-trigger .material-icons-outlined { color:currentColor; font-size:16px; transition:transform .18s ease; flex:0 0 auto; }
        .cityma-dropdown { z-index:1; }
        .cityma-dropdown.is-open { z-index:1200; }
        .cityma-dropdown.is-open .cityma-dropdown-trigger .material-icons-outlined { transform:rotate(180deg); }
        .cityma-dropdown-menu { display:none; position:absolute; top:calc(100% + 5px); right:0; z-index:1000; width:min(230px,calc(100vw - 24px)); min-width:180px; max-height:min(360px,58vh); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding:5px 9px; border:1px solid rgba(255,255,255,.24); border-radius:8px; background:rgba(5,5,5,.99); box-shadow:0 10px 24px rgba(0,0,0,.72); backdrop-filter:blur(10px); box-sizing:border-box; }
        .cityma-dropdown.is-open .cityma-dropdown-menu { display:grid; gap:0; animation:citymaMenuIn .16s ease-out; }
        @keyframes citymaMenuIn { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:none; } }
        .cityma-dropdown-item { width:100%; border:0; border-bottom:1px solid rgba(255,255,255,.07); border-radius:0; background:transparent; color:#d6d8dc; padding:8px 3px; display:block; overflow:visible; font:500 .8rem/1.3 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; letter-spacing:0; text-align:left; cursor:pointer; white-space:normal; overflow-wrap:anywhere; }
        .cityma-dropdown-item.is-state { color:#fff; }
        .cityma-dropdown-item.is-country { color:#ff7a1a; }
        .cityma-dropdown[data-dropdown-action="market"] .cityma-dropdown-item { color:#fff; font-weight:400; }
        .cityma-dropdown-item:last-child { border-bottom:0; }
        .cityma-dropdown-item::before { display:none; }
        .cityma-dropdown-item:hover,.cityma-dropdown-item:focus-visible { color:#fff; background:transparent; outline:0; text-decoration:underline; text-underline-offset:3px; }
        .section-dropdown-wrap .cityma-dropdown-item[aria-selected="true"] { color:#ffd700; background:transparent; font-weight:500; }
        .city-state-wrap .cityma-dropdown-item[aria-selected="true"] { background:rgba(255,255,255,.07); font-weight:700; }
        .cityma-dropdown-item.is-state[aria-selected="true"] { color:#fff; }
        .cityma-dropdown-item.is-country[aria-selected="true"] { color:#ff7a1a; }

        .right-wall-scroll-indicator { display: flex; flex-direction: column; align-items: center; width: auto; align-self: flex-end; margin-top: 4px; cursor: pointer; gap: 8px; }
        .scroll-counter-top { font-size: 13.1px; font-weight: 800; color: #ffffff; cursor: pointer; }
        @keyframes bounceArrowLong { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
        .next-arrow-long { font-size: 60px; color: #ffffff; animation: bounceArrowLong 1.2s infinite; line-height: 1; transform: scaleX(0.9); display: inline-block; }

        /* CITYMA-909 R2 · Direct ShortsSite category swipe.
           Same-category competitors are never the automatic next screen. */
        .cityma-direct-category-swipe {
            position:absolute; top:calc(var(--header-h) + 1px); right:0; bottom:var(--info-h);
            width:42px; z-index:96; display:flex; flex-direction:column; align-items:center;
            justify-content:flex-start; background:transparent; pointer-events:none;
        }
        .cityma-direct-category-swipe .direct-cat-stack { width:42px; display:flex; flex-direction:column; align-items:center; gap:1px; pointer-events:auto; }
        .cityma-direct-category-swipe .direct-cat-arrow { width:42px; height:62px; border:0; background:transparent; color:#fff; padding:0; cursor:pointer; filter:drop-shadow(0 3px 5px rgba(0,0,0,.95)); }
        .cityma-direct-category-swipe .direct-cat-arrow svg { width:37px; height:59px; display:block; overflow:visible; }
        .cityma-direct-category-swipe .direct-cat-arrow path { fill:none; stroke:currentColor; stroke-width:4.8; stroke-linecap:round; stroke-linejoin:round; }
        .cityma-direct-category-swipe .direct-cat-position { border:0; background:transparent; color:#fff; padding:2px 0; font-weight:900; text-align:center; text-shadow:0 2px 5px #000; line-height:1; }
        .cityma-direct-category-swipe .direct-cat-position b { display:block; font-size:21px; }
        .cityma-direct-category-swipe .direct-cat-position span { display:block; margin-top:3px; font-size:9px; color:#ddd; }

        .sidebar { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 6px; background: transparent; padding: 0; border: none; }
        .side-item { color: #fff; text-decoration: none; text-align: center; background: transparent; padding: 0; cursor: pointer; }
        .side-item:active { transform: scale(0.9); }
        .side-icon { font-size: 24px; text-shadow: 0 3px 8px #000; display: block; }
        .side-label { font-size: 9px; font-weight: 900; display: block; text-transform: uppercase; text-shadow: 0 2px 4px #000; }

        .info-box { position: absolute; left: 0; bottom: 5vh; width: 100%; z-index: 15; padding: 4px 12px 2px 12px; box-sizing: border-box; background: none !important; pointer-events: none; text-align: left; }
        .info-box * { pointer-events: auto; }
        .info-inner { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; }

        .action-btn-inline { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, #ff6600, #e67e22); color: #fff; padding: 6px 14px; border-radius: 12px; font-weight: 900; text-decoration: none; width: fit-content; box-shadow: 0 4px 14px rgba(255,102,0,0.6); animation: bounce 2s infinite; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); }
        .action-btn-inline .material-icons-outlined { font-size: 22px; }
        .btn-text-box { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
        .btn-main-txt { font-size: 1.05rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; }
        .btn-sub-txt { font-size: 0.68rem; font-weight: 700; color: #fff; opacity: 0.95; letter-spacing: 0.3px; margin-top: 1px; }

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

        .price-action-row { display:flex; align-items:center; gap:8px; width:100%; margin-bottom:1px; white-space:nowrap; }
        .price-tag { font-size: 28px; font-weight: 900; color: #fff; display: flex; align-items: baseline; gap: 5px; text-shadow: 2px 2px 4px #000; }
        .price-tag span { font-size: 18px; color: #e67e22; }
        .inline-contact-actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; }
        .inline-contact-action { width:34px; height:34px; padding:0; border:1px solid rgba(255,255,255,.34); border-radius:50%; color:#fff; background:rgba(15,15,15,.86); display:inline-flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,.38); transition:transform .15s ease,border-color .15s ease,background .15s ease; cursor:pointer; box-sizing:border-box; }
        .inline-contact-action:hover,.inline-contact-action:focus-visible { transform:translateY(-2px); border-color:#ff6600; background:#ff6600; outline:0; }
        .inline-contact-action .material-icons-outlined { font-size:19px; }
        .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

        .company-name { font-size: 14px; color: #ddd; font-weight: bold; margin-bottom: 1px; text-shadow: 0 1px 2px #000; }
        .title-text { font-size: 21px; font-weight: 900; margin: 0 0 2px 0; max-width: 100%; line-height: 1.15; text-shadow: 0 2px 4px #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; text-align: left; }
        .desc-bg { font-size: 15px; color: #eee; max-width: 100%; line-height: 1.1; border-left: 3px solid #e67e22; padding-left: 6px; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; text-align: left; }

        .progress-bar-wrap { width: 100%; margin-top: 3px; margin-bottom: 2px; position: relative; display: flex; flex-direction: column; cursor: pointer; }
        .progress-bar-inline { width: 100%; height: 2px; background: rgba(255,255,255,0.35); border-radius: 2px; overflow: hidden; flex-shrink: 0; cursor: pointer; }
        .progress-fill { width: 0%; height: 100%; background: #ff0000; transition: width 0.05s linear; pointer-events: none; }

        .bottom-nav { width: 100%; max-width: 650px; margin: 0 auto; height: 65px; background: #000; border-top: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: space-around; align-items: center; z-index: 50; box-sizing: border-box; }
        .nav-item { color: #aaa; text-decoration: none; display: flex; flex-direction: column; align-items: center; font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
        .nav-item.active, .nav-item:hover { color: #ff6600; }
        .nav-item .material-icons-outlined { font-size: 24px; margin-bottom: 2px; }

        /* Gemini-inspired CityMa AI launcher/composer */
        .cityma-ai-launcher { margin-top:10px; width:min(100%,560px); min-height:54px; border:1px solid rgba(0,0,0,.08); border-radius:28px; background:#fff; color:#202124; display:flex; align-items:center; gap:10px; padding:8px 12px 8px 14px; box-shadow:0 4px 18px rgba(0,0,0,.16); cursor:pointer; pointer-events:auto; }
        .cityma-ai-launcher:hover { box-shadow:0 6px 22px rgba(0,0,0,.22); transform:translateY(-1px); }
        .cityma-ai-launcher .ai-plus { font-size:27px; color:#202124; flex:0 0 auto; }
        .cityma-ai-launcher .ai-shield { font-size:18px; color:#6b7280; flex:0 0 auto; }
        .cityma-ai-launcher .ai-placeholder { flex:1; min-width:0; text-align:left; font-size:15px; color:#6b7280; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .cityma-ai-launcher .ai-mode { font-size:12px; color:#202124; font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:2px; }
        .cityma-ai-launcher .ai-mic { font-size:22px; color:#202124; flex:0 0 auto; }
        .cityma-ai-composer { display:flex; align-items:center; gap:8px; width:100%; min-height:58px; border:1px solid #e5e7eb; border-radius:29px; background:#fff; padding:7px 8px 7px 13px; box-shadow:0 3px 14px rgba(0,0,0,.08); }
        .cityma-ai-composer textarea { flex:1; min-width:0; height:42px; max-height:110px; padding:10px 4px; border:0 !important; outline:0; resize:none !important; background:transparent; font:inherit; line-height:1.35; color:#202124; }
        .cityma-ai-composer textarea::placeholder { color:#73777f; }
        .cityma-ai-composer .composer-icon { color:#5f6368; font-size:23px; flex:0 0 auto; }
        .cityma-ai-send { width:42px; height:42px; border:0; border-radius:50%; background:#202124; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:0 0 auto; }
        .cityma-ai-send:hover { background:#000; }
        /* Inline ChatGPT-style assistant: the visible index bar is the composer. */
        .cityma-ai-inline { width:80%; margin:3px auto 0; padding:6px; position:relative; color:#303236; background:#eceeef; border:1px solid #d4d7db; border-radius:15px; pointer-events:auto; box-sizing:border-box; }
        .cityma-ai-section-label { margin:0 0 4px 3px; color:#111; font-size:9px; line-height:1.15; font-weight:800; letter-spacing:.05px; text-align:left; }
        .cityma-ai-inline .cityma-ai-composer { min-height:36px; height:36px; padding:3px 4px 3px 9px; gap:6px; border-color:#d4d7db; border-radius:19px; background:#f3f4f6; box-shadow:none; box-sizing:border-box; }
        .cityma-ai-inline .cityma-ai-composer textarea { height:28px; max-height:72px; padding:5px 3px; color:#303236; font-size:11px; font-weight:500; overflow-y:auto; }
        .cityma-ai-inline .cityma-ai-composer textarea::placeholder { color:#747982; opacity:1; }
        .cityma-ai-inline .cityma-ai-composer .composer-icon { color:#7a8089; font-size:17px; }
        .cityma-ai-inline .cityma-ai-service-icon { width:20px; height:20px; object-fit:contain; flex:0 0 20px; }
        .cityma-ai-inline .cityma-ai-send { width:28px; height:28px; background:#686d75; }
        .cityma-ai-inline .cityma-ai-send:hover,.cityma-ai-inline .cityma-ai-send:focus-visible { background:#4f545b; outline:0; }
        .cityma-ai-inline .cityma-ai-send .material-icons-outlined { font-size:19px; }
        .cityma-ai-inline-result { display:none; margin-top:8px; }
        .cityma-ai-inline.is-expanded { position:absolute; left:10%; right:10%; bottom:0; z-index:5; width:auto; max-height:min(68vh,620px); overflow-y:auto; padding:8px; border:1px solid #d4d7db; border-radius:16px; background:#eceeef; box-shadow:0 10px 28px rgba(0,0,0,.3); scrollbar-width:thin; }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-result { display:block; }
        .cityma-ai-inline-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:7px 2px 5px 3px; color:#111; font-size:9px; line-height:1.15; font-weight:800; letter-spacing:.05px; }
        .cityma-ai-inline-close { width:26px; height:26px; border:1px solid #d0d3d7; border-radius:50%; background:#e1e3e5; color:#5d626a; cursor:pointer; font-size:17px; line-height:1; }
        .cityma-ai-answer { background:#e2e4e7; color:#303236; border:1px solid #d4d7db; border-radius:13px; padding:11px 12px; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
        .cityma-ai-answer-source { margin-top:7px; color:#777d86; font-size:10px; }
        .cityma-ai-help { margin-top:8px; color:#646a72; font-size:9px; line-height:1.4; text-align:left; }
        .cityma-ai-help-title { display:block; margin-bottom:2px; color:#111; font-size:9px; line-height:1.15; font-weight:800; }
        .cityma-ai-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:7px; }
        .cityma-ai-action { min-height:32px; padding:6px 5px; border:1px solid #222; border-radius:7px; background:#dfe1e4; color:#4f545b; display:flex; align-items:center; justify-content:center; text-decoration:none; text-align:center; font-size:9px; line-height:1.15; font-weight:600; cursor:pointer; box-sizing:border-box; }
        .cityma-ai-action:hover,.cityma-ai-action:focus-visible { background:#d3d6da; color:#2f3338; outline:0; }
        .cityma-ai-formmail { display:none; margin-top:9px; padding-top:9px; border-top:1px solid #d2d5d9; }
        .cityma-ai-formmail.is-open { display:block; }
        .cityma-ai-formmail-title { color:#555b63; font-size:11px; font-weight:700; margin-bottom:3px; }
        .cityma-ai-formmail-note { color:#777d85; font-size:9px; line-height:1.35; margin-bottom:7px; }
        .cityma-ai-formmail input { width:100%; padding:8px 9px; margin-bottom:6px; border:1px solid #cfd3d8; border-radius:8px; background:#f6f7f8; color:#303236; font:500 11px/1.2 Inter,Arial,sans-serif; box-sizing:border-box; outline:0; }
        .cityma-ai-formmail input:focus { border-color:#9da3ab; box-shadow:0 0 0 2px rgba(110,116,124,.12); }
        .cityma-ai-formmail-submit { width:100%; padding:9px; border:1px solid #bfc3c8; border-radius:8px; background:#cfd2d6; color:#363a40; font-size:10px; font-weight:700; cursor:pointer; }
        .cityma-ai-formmail-submit:hover { background:#c3c7cc; }
        .info-box.ai-open { z-index:140; overflow:visible; }
        .about-grid { display:grid; grid-template-columns:120px 1fr; gap:9px 14px; font-size:13px; line-height:1.45; }
        .about-label { color:#777; font-weight:800; }
        .about-value { color:#222; min-width:0; overflow-wrap:anywhere; }
        .about-card { background:#fff; border:1px solid #e7e9ed; border-radius:15px; padding:14px; margin-top:10px; box-shadow:0 2px 8px rgba(0,0,0,.035); }
        .about-card-title { color:#ff6600; font-size:10px; font-weight:900; letter-spacing:.65px; margin-bottom:10px; }
        .about-link { color:#1769aa; text-decoration:none; }
        .about-mail-btn { margin-top:5px; border:0; border-radius:999px; background:#111; color:#fff; padding:6px 10px; font-size:10px; font-weight:900; cursor:pointer; }
        .formmail-grid { display:grid; gap:9px; }
        .formmail-grid input,.formmail-grid textarea { width:100%;border:1px solid #d7dbe0;border-radius:12px;padding:11px 12px;font:inherit;outline:none;background:#fff;box-sizing:border-box; }
        .formmail-grid input:focus,.formmail-grid textarea:focus { border-color:#ff6600; box-shadow:0 0 0 3px rgba(255,102,0,.1); }
        .formmail-grid textarea { resize:vertical; min-height:120px; }
        .formmail-send { width:100%;margin-top:10px;border:0;border-radius:13px;background:#ff6600;color:#fff;padding:12px;font-weight:900;cursor:pointer; }
        @media (max-width:540px) { .cityma-ai-launcher .ai-mode { display:none; } .about-grid { grid-template-columns:88px 1fr; } }

        /* ==================================================================
           CityMarketeer stable advertiser-face layout
           Portrait: compact identity + square media + two-line summary.
           Desktop: the same portrait phone is centered on a black canvas.
           ================================================================== */
        .app-container {
            --nav-h: 64px;
            --header-h: 174px;
            --info-h: 226px;
            width: min(100vw, 56.25dvh) !important;
            max-width: 650px !important;
            height: 100dvh !important;
            max-height: 100dvh !important;
            margin: 0 auto !important;
        }
        .viewer { height: calc(100% - var(--nav-h)); }
        .viewer-top-bar { top:0; height:var(--header-h); padding:7px 10px 4px; overflow:visible; z-index:100; }
        .top-logo-link { padding-right:0; margin-bottom:1px; min-height:28px; }
        .top-logo-banner { font-size:16px; gap:4px; }
        .top-logo-banner .city-favicon { width:26px; height:26px; border-radius:0; }
        .top-bar-row { min-height:138px; gap:8px; }
        .top-left-brand-box { width:50%; margin-top:0; min-width:0; transform:translateY(-14px); }
        .supplier-brand-link { margin-top:0; }
        .supplier-brand-hero { font-size:1.52rem; line-height:1; }
        .supplier-logo-img { width:auto; max-width:100%; max-height:36px; object-position:left center; }
        .top-adno-text { font-size:10px; margin-top:1px; }
        .top-address-box { margin-top:3px; padding:4px 7px; gap:0; width:100%; min-height:48px; }
        .top-addr-line1, .top-addr-line2, .top-addr-line3 { font-size:10.5px; line-height:1.22; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .badge-condition { margin-top:3px; padding:2px 6px; font-size:10.5px; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

        .platform-brand-area { width:50%; gap:2px; position:static; }
        .search-bar-wrap { width:100%; padding:4px 6px; min-height:29px; gap:4px; }
        .search-input-pro { width:100%; min-width:0; font-size:.72rem; }
        .section-dropdown-wrap, .city-state-wrap { transform:none; margin:0 0 1px auto; padding:4px 6px; min-width:108px; max-width:100%; min-height:30px; gap:4px; border-radius:5px; }
        .cityma-section-tabs { width:100%; max-width:100%; margin:0 0 2px 0; }
        .cityma-section-tab { font-size:.70rem; padding:7px 3px; }
        /* The three visible labels are exactly 15% larger than V5 (.74rem). */
        .cityma-dropdown-trigger,.section-dropdown-wrap .cityma-dropdown-trigger { font-size:.851rem; }
        .cityma-dropdown-menu { width:min(230px,calc(100vw - 24px)); }
        .cityma-dropdown-item { font-size:.78rem; padding:8px 3px; }
        .search-result-count { color:#fff; font-size:10px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; margin:1px 2px 0 0; }
        .market-status-pill { color:#ff9b59; font-size:9px; font-weight:900; letter-spacing:.45px; text-transform:uppercase; text-align:center; white-space:nowrap; }

        .video-wrap { top:var(--header-h); bottom:var(--info-h); height:auto; padding:0 52px 0 0 !important; box-sizing:border-box; align-items:center !important; justify-content:flex-start; background:#000; }
        .cityeer-square-frame { width:min(100%, calc(100dvh - var(--nav-h) - var(--header-h) - var(--info-h))); max-width:100%; aspect-ratio:1/1; flex:0 0 auto; margin:0; box-shadow:none; background:#000; position:relative; overflow:hidden; isolation:isolate; }
        .video-wrap iframe, .video-wrap video, .video-wrap > img,
        .video-wrap .cityeer-square-frame iframe, .video-wrap .cityeer-square-frame video,
        .video-wrap .cityeer-square-frame > img { width:100% !important; height:100% !important; object-fit:contain !important; object-position:left center !important; background:#000; border:0; position:relative; z-index:1; }
        .video-wrap .cityeer-square-frame iframe,.video-wrap .cityeer-square-frame video { position:relative; z-index:1; background:#000; }

        /* Gallery controls remain readable on both white and dark artwork. */
        .cityeer-gallery-counter { position:absolute; top:12px; right:12px; z-index:8; background:#000; color:#fff; border:2px solid rgba(255,255,255,.95); border-radius:999px; padding:7px 12px; font-size:14px; line-height:1; font-weight:900; letter-spacing:.45px; box-shadow:0 4px 14px rgba(0,0,0,.38); }
        .cityeer-gallery-dots { position:absolute; left:50%; bottom:14px; z-index:8; display:flex; align-items:center; justify-content:center; gap:7px; width:max-content; padding:6px 9px; transform:translateX(-50%); border:1px solid rgba(0,0,0,.14); border-radius:999px; background:rgba(255,255,255,.9); box-shadow:0 3px 12px rgba(0,0,0,.24); pointer-events:auto; }
        .cityeer-gallery-dot { width:10px; height:10px; padding:0; border:0; border-radius:50%; background:rgba(0,0,0,.38); box-shadow:inset 0 0 0 1px rgba(0,0,0,.24); transition:transform .16s ease,background .16s ease; cursor:pointer; }
        .cityeer-gallery-dot.is-active { background:#000; transform:scale(1.32); box-shadow:0 0 0 2px rgba(255,255,255,.95),0 1px 4px rgba(0,0,0,.5); }

        .right-wall-scroll-indicator { position:absolute; top:calc(var(--header-h) + 30px); right:5px; bottom:auto; width:44px; margin:0; padding:0; z-index:90; display:flex; flex-direction:column; align-items:center; pointer-events:none; }
        .right-wall-scroll-indicator > * { pointer-events:auto; }
        .ad-nav-stack { display:flex; flex-direction:column; align-items:center; gap:10px; }
        .ad-position-group { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:43px; padding:2px 0; }
        .ad-nav-position { font-size:21px; line-height:1; font-weight:900; color:#fff; text-shadow:0 2px 5px #000; }
        .ad-nav-total { font-size:9px; line-height:1; color:#bbb; font-weight:800; margin:0; }
        .ad-boundary-arrow { width:42px; height:64px; flex:0 0 64px; border:0; background:transparent; padding:0; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; filter:drop-shadow(0 3px 5px #000); }
        .ad-boundary-arrow svg { width:36px; height:60px; display:block; overflow:visible; }
        .ad-boundary-arrow path { fill:none; stroke:currentColor; stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
        .ad-boundary-arrow:hover,.ad-boundary-arrow:focus-visible { color:#ffb066; outline:0; }
        .media-sound-btn { right:9px; bottom:9px; padding:6px 8px; font-size:9px; }
        .media-sound-btn .material-icons-outlined { font-size:16px; }

        .info-box { bottom:0; height:var(--info-h); padding:5px 10px 4px; background:linear-gradient(180deg,rgba(0,0,0,.72),#000 26%) !important; overflow:hidden; }
        .info-inner { gap:2px; height:100%; }
        .price-action-row { gap:6px; margin:0; min-height:38px; }
        .price-tag { font-size:27px; gap:4px; }
        .price-tag span { font-size:17px; }
        .regular-price-old { font-size:21.24px; color:#aaa; margin-right:3px; font-weight:700; }
        .action-btn-inline { padding:5px 11px; border-radius:11px; animation:none; }
        .action-btn-inline .material-icons-outlined { font-size:19px; }
        .btn-main-txt { font-size:.9rem; }
        .btn-sub-txt { font-size:.58rem; }
        .inline-contact-actions { gap:3px; }
        .inline-contact-action { width:31px; height:31px; }
        .inline-contact-action .material-icons-outlined { font-size:18px; }
        .company-name { width:100%; font-size:11px; margin:0 0 3px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .title-text { font-size:17px; line-height:1.28; margin:0 0 6px; padding-bottom:2px; -webkit-line-clamp:2; }
        .desc-bg { font-size:12.5px; line-height:1.34; margin:0 0 5px; padding:0 0 2px 5px; -webkit-line-clamp:2; }
        .progress-bar-wrap { margin-top:auto; margin-bottom:0; }

        @media (max-width:420px) {
            .price-action-row { gap:4px; }
            .action-btn-inline { gap:4px; padding:4px 7px; }
            .action-btn-inline .material-icons-outlined { font-size:17px; }
            .btn-main-txt { font-size:.75rem; }
            .btn-sub-txt { font-size:.5rem; }
            .inline-contact-actions { gap:2px; }
            .inline-contact-action { width:29px; height:29px; }
            .inline-contact-action .material-icons-outlined { font-size:17px; }
        }

        .bottom-nav { width:100%; max-width:none; height:var(--nav-h); flex:0 0 var(--nav-h); }
        .nav-item { font-size:8px; min-width:0; }
        .nav-item .material-icons-outlined { font-size:21px; }
        .landscape-advertiser-name { display:none; }

        @media (max-height:760px) and (orientation:portrait) {
            .app-container { --header-h:154px; --info-h:208px; }
            .supplier-brand-hero { font-size:1.32rem; }
            .top-address-box { min-height:43px; }
            .top-addr-line1, .top-addr-line2, .top-addr-line3 { font-size:9.7px; }
            .title-text { font-size:15px; }
            .desc-bg { font-size:11.5px; }
            .cityma-ai-inline .cityma-ai-composer { min-height:34px; height:34px; }
            .cityma-ai-inline .cityma-ai-composer textarea { height:26px; padding:4px 3px; }
        }

        /* A rotated smartphone becomes a clean ad preview: advertiser, platform,
           square media and title only. Desktop landscape is intentionally excluded. */
        @media (orientation:landscape) and (max-height:600px) {
            .app-container { --nav-h:0px; --header-h:48px; --info-h:52px; width:100vw !important; max-width:none !important; height:100dvh !important; }
            .viewer { height:100%; }
            .viewer-top-bar { height:48px; padding:7px 12px; background:linear-gradient(180deg,rgba(0,0,0,.86),transparent) !important; }
            .top-logo-link { position:absolute; top:7px; right:12px; width:auto; }
            .top-bar-row, .right-wall-scroll-indicator, .bottom-nav { display:none !important; }
            .landscape-advertiser-name { display:block; position:absolute; top:9px; left:12px; right:190px; z-index:72; color:#fff; font-size:17px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 5px #000; }
            .video-wrap { top:0; bottom:0; padding:0 !important; justify-content:center; }
            .cityeer-square-frame { width:min(100dvh,100vw); height:min(100dvh,100vw); }
            .info-box { height:auto; min-height:52px; bottom:0; padding:18px 14px 8px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.9)) !important; }
            .info-box .price-action-row, .info-box .company-name, .info-box .desc-bg,
            .info-box .cityma-ai-inline, .info-box .progress-bar-wrap { display:none !important; }
            .info-box .title-text { display:-webkit-box; font-size:17px; line-height:1.15; -webkit-line-clamp:1; }
            .media-sound-btn { display:none; }
        }

        #listingModal { display: none; position: absolute; inset: 0; z-index: 9999; background: rgba(0,0,0,0.96); padding: 20px; overflow-y: auto; box-sizing: border-box; text-align: left; }
    
        /* ================================================================
           CITYMA INDEX FINAL VISUAL LOCK · 2026-08-22
           Same portrait arrangement on phone and desktop.
           ================================================================ */

        /* 2. Compact ADID search. */
        .app-container .adid-search-wrap {
            width:clamp(96px,40%,130px) !important;
            max-width:130px !important;
            min-width:96px !important;
            padding:2px 29px 2px 4px !important;
            min-height:25px !important;
            gap:2px !important;
        }
        .app-container .adid-search-label {
            font-size:6.3px !important;
            line-height:1 !important;
            font-weight:900 !important;
            letter-spacing:.01em !important;
        }
        .app-container .adid-search-input {
            min-width:0 !important;
            width:auto !important;
            flex:1 1 auto !important;
            font-size:.70rem !important;
            padding:0 !important;
        }
        .app-container .adid-search-btn {
            width:26px !important;
            height:20px !important;
            right:2px !important;
            font-size:7.2px !important;
            line-height:1 !important;
            font-weight:900 !important;
        }

        /* 3. Price spacing reduced by 50%. */
        .price-tag { gap:2px !important; }
        .regular-price-old { margin-right:1.5px !important; }

        /* 5. Address is 20% narrower; Google Maps pin is inside upper-left. */
        .app-container .top-address-box {
            width:68% !important;
            max-width:68% !important;
            min-height:54px !important;
            align-items:flex-start !important;
            gap:4px !important;
            padding-left:5px !important;
        }
        .top-address-map-icon {
            flex:0 0 auto !important;
            margin-top:1px !important;
            font-size:18px !important;
            line-height:1 !important;
            color:#4285f4 !important;
            text-shadow:0 1px 1px rgba(0,0,0,.18);
        }
        .top-addr-text-wrap {
            min-width:0 !important;
            flex:1 1 auto !important;
        }

        /* 6. Sound is icon-only and sits immediately after Call. */
        .sound-contact-action,
        .sound-contact-action.sound-on {
            background:rgba(15,15,15,.86) !important;
            color:#fff !important;
            border-color:rgba(255,255,255,.34) !important;
        }

        /* 7. Category value gets the full row. */
        .cityma-category-wrap { padding-left:7px !important; }
        .cityma-category-wrap .cityma-dropdown-trigger {
            width:100% !important;
            justify-content:space-between !important;
            text-align:left !important;
        }
        .cityma-category-wrap .cityma-dropdown-trigger > span:first-child {
            flex:1 1 auto !important;
            text-align:left !important;
        }

        /* 8. SERVICE / PRODUCT / HOTSPOT; active orange, inactive gray. */
        .market-section-strip {
            display:grid !important;
            grid-template-columns:repeat(3,minmax(0,1fr)) !important;
            gap:4px !important;
            width:100% !important;
            overflow:visible !important;
        }
        .market-section-text {
            width:100% !important;
            min-width:0 !important;
            min-height:19px !important;
            padding:3px 2px !important;
            border:1px solid #707070 !important;
            border-radius:4px !important;
            background:#4d4d4d !important;
            color:#dedede !important;
            font-size:.34rem !important;
            line-height:1 !important;
            text-align:center !important;
            cursor:pointer !important;
            box-sizing:border-box !important;
        }
        .market-section-text.is-active {
            background:#ff6600 !important;
            border-color:#ff6600 !important;
            color:#fff !important;
        }
        .market-section-strip.single { display:flex !important; }
        .market-section-strip.single .market-section-text {
            width:auto !important;
            min-width:70px !important;
            cursor:default !important;
        }

        /* Same final values on phones and desktop portrait. */
        @media (max-width:420px), (min-width:421px) {
            .app-container .adid-search-wrap {
                width:clamp(96px,40%,130px) !important;
                max-width:130px !important;
                min-width:96px !important;
            }
            .app-container .adid-search-label { font-size:6.3px !important; font-weight:900 !important; }
            .app-container .adid-search-btn { font-size:7.2px !important; font-weight:900 !important; }
            .app-container .top-address-box { width:68% !important; max-width:68% !important; min-height:54px !important; }
            .market-section-text { font-size:.34rem !important; }
        }


        /* ================================================================
           CITYMA ADID ONLY PATCH · 2026-08-22 18:19
           Exact current user file. No other layout/function changes.
           ================================================================ */
        .app-container .adid-search-label {
            font-size:7.875px !important; /* +25% from 6.3px */
            font-weight:900 !important;
        }
        .app-container .adid-search-input {
            width:6.5ch !important;
            max-width:6.5ch !important;
            min-width:6.5ch !important;
            flex:0 0 6.5ch !important; /* compact ADID field; still fits A12320 */
        }
        @media (max-width:420px), (min-width:421px) {
            .app-container .adid-search-label {
                font-size:7.875px !important;
                font-weight:900 !important;
            }
            .app-container .adid-search-input {
                width:6.5ch !important;
                max-width:6.5ch !important;
                min-width:6.5ch !important;
                flex:0 0 6.5ch !important;
            }
        }


        /* ================================================================
           CITYMA HEADER COMPACT PATCH · 2026-08-22 18:24
           Only ADID / City / Category sizing and alignment.
           ================================================================ */

        /* ADID: keep the +25% size, change label to CityMa orange.
           Search row is 30% wider than the prior 40%/130px setting.
           Grid guarantees GO stays immediately to the right of the input. */
        .app-container .adid-search-wrap {
            width:clamp(125px,52%,169px) !important;
            min-width:125px !important;
            max-width:169px !important;
            display:grid !important;
            grid-template-columns:minmax(0,1fr) 30px !important;
            grid-template-rows:auto 23px !important;
            column-gap:3px !important;
            row-gap:2px !important;
            align-items:center !important;
            padding:0 !important;
            overflow:visible !important;
            align-self:flex-end !important;
        }
        .app-container .adid-search-label {
            grid-column:1 / 3 !important;
            grid-row:1 !important;
            justify-self:end !important;
            color:#ff6600 !important;
            font-size:7.875px !important;
            font-weight:900 !important;
            line-height:1 !important;
            margin:0 !important;
        }
        .app-container .adid-search-input {
            grid-column:1 !important;
            grid-row:2 !important;
            width:100% !important;
            min-width:0 !important;
            max-width:none !important;
            height:23px !important;
            box-sizing:border-box !important;
            flex:none !important;
            margin:0 !important;
        }
        .app-container .adid-search-btn {
            grid-column:2 !important;
            grid-row:2 !important;
            position:static !important;
            transform:none !important;
            width:30px !important;
            height:23px !important;
            margin:0 !important;
            flex:none !important;
            white-space:nowrap !important;
            align-self:stretch !important;
            justify-self:stretch !important;
        }

        /* City box: 10% shorter than the prior 30px and explicitly right aligned. */
        .platform-brand-area > .city-state-wrap.cityma-fixed-box:not(.cityma-category-fixed-box) {
            min-height:27px !important;
            height:27px !important;
            align-self:flex-end !important;
            margin-left:auto !important;
            margin-right:0 !important;
            padding-top:3px !important;
            padding-bottom:3px !important;
        }

        /* Marketplace Category search: 10% shorter. */
        .platform-brand-area > .cityma-category-wrap {
            min-height:27px !important;
            height:27px !important;
            align-self:flex-end !important;
            margin-left:auto !important;
            margin-right:0 !important;
            padding-top:3px !important;
            padding-bottom:3px !important;
        }

        /* Identical portrait values on phone and desktop. */
        @media (max-width:420px), (min-width:421px) {
            .app-container .adid-search-wrap {
                width:clamp(125px,52%,169px) !important;
                min-width:125px !important;
                max-width:169px !important;
            }
            .app-container .adid-search-label {
                color:#ff6600 !important;
                font-size:7.875px !important;
            }
            .platform-brand-area > .city-state-wrap.cityma-fixed-box:not(.cityma-category-fixed-box),
            .platform-brand-area > .cityma-category-wrap {
                min-height:27px !important;
                height:27px !important;
            }
        }



        /* ================================================================
           CITYMA ADID SINGLE-LINE + SECTION FONT PATCH · 2026-08-22 18:28
           Only requested header alignment/font changes.
           ================================================================ */

        /* ADID label + input + GO must always stay on one horizontal line. */
        .app-container .adid-search-wrap {
            display:grid !important;
            grid-template-columns:max-content minmax(0,1fr) 30px !important;
            grid-template-rows:23px !important;
            column-gap:3px !important;
            row-gap:0 !important;
            align-items:center !important;
            white-space:nowrap !important;
            flex-wrap:nowrap !important;
            padding:0 !important;
            overflow:visible !important;
        }
        .app-container .adid-search-label {
            grid-column:1 !important;
            grid-row:1 !important;
            align-self:center !important;
            justify-self:start !important;
            margin:0 !important;
            white-space:nowrap !important;
        }
        .app-container .adid-search-input {
            grid-column:2 !important;
            grid-row:1 !important;
            width:100% !important;
            min-width:0 !important;
            max-width:none !important;
            height:23px !important;
            box-sizing:border-box !important;
            margin:0 !important;
        }
        .app-container .adid-search-btn {
            grid-column:3 !important;
            grid-row:1 !important;
            position:static !important;
            transform:none !important;
            width:30px !important;
            height:23px !important;
            margin:0 !important;
            white-space:nowrap !important;
            align-self:stretch !important;
            justify-self:stretch !important;
        }

        /* Category-under section names: +15% from .34rem. */
        .market-section-text {
            font-size:.391rem !important;
        }

        /* Identical values for phone and desktop portrait. */
        @media (max-width:420px), (min-width:421px) {
            .app-container .adid-search-wrap {
                grid-template-columns:max-content minmax(0,1fr) 30px !important;
                grid-template-rows:23px !important;
            }
            .market-section-text { font-size:.391rem !important; }
        }


        /* ================================================================
           CITYMA INPUT CENTER + 10% HEIGHT PATCH · 2026-08-22 18:47
           Only ADID input typography and City/Category/Section heights.
           ================================================================ */

        /* ADID value: centered and 10% larger than .70rem. */
        .app-container .adid-search-input {
            text-align:center !important;
            font-size:.77rem !important;
        }

        /* City and Category rows: 10% shorter than 27px. */
        .platform-brand-area > .city-state-wrap.cityma-fixed-box:not(.cityma-category-fixed-box),
        .platform-brand-area > .cityma-category-wrap {
            min-height:24.3px !important;
            height:24.3px !important;
            padding-top:2px !important;
            padding-bottom:2px !important;
        }

        /* Section name boxes: 10% shorter than 19px. */
        .market-section-text {
            min-height:17.1px !important;
            height:17.1px !important;
            padding:2px 2px !important;
        }

        /* Same portrait values on phone and desktop. */
        @media (max-width:420px), (min-width:421px) {
            .app-container .adid-search-input {
                text-align:center !important;
                font-size:.77rem !important;
            }
            .platform-brand-area > .city-state-wrap.cityma-fixed-box:not(.cityma-category-fixed-box),
            .platform-brand-area > .cityma-category-wrap {
                min-height:24.3px !important;
                height:24.3px !important;
            }
            .market-section-text {
                min-height:17.1px !important;
                height:17.1px !important;
            }
        }


        /* ================================================================
           CITYMA OPEN-CITY VIEW · 2026-08-22 19:01
           Media begins at the bottom of the left address block; marketplace
           result navigation is vertical directly under the section row.
           ================================================================ */
        body.cityma-marketplace .app-container {
            --header-h: 138px !important;
        }
        body.cityma-marketplace .viewer-top-bar {
            height:138px !important;
        }
        body.cityma-marketplace .category-under-row {
            position:relative !important;
            min-height:17px !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .market-section-strip {
            width:100% !important;
        }
        body.cityma-marketplace .top-listing-nav {
            position:absolute !important;
            top:100% !important;
            right:0 !important;
            width:auto !important;
            min-height:0 !important;
            margin-top:3px !important;
            display:flex !important;
            flex-direction:column !important;
            align-items:center !important;
            justify-content:flex-start !important;
            gap:2px !important;
            z-index:125 !important;
        }
        body.cityma-marketplace .top-listing-nav .top-listing-arrow {
            width:30px !important;
            height:18px !important;
            min-height:18px !important;
            padding:0 !important;
            border:1px solid rgba(255,255,255,.30) !important;
            border-radius:4px !important;
            background:rgba(18,18,18,.92) !important;
            color:#fff !important;
            font:900 10px/16px Arial,sans-serif !important;
        }
        body.cityma-marketplace .top-listing-count {
            width:38px !important;
            height:20px !important;
            min-height:20px !important;
            padding:0 2px !important;
            border:1px solid rgba(255,255,255,.30) !important;
            border-radius:4px !important;
            background:#fff !important;
            color:#111 !important;
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            gap:2px !important;
            font:900 9px/18px Arial,sans-serif !important;
            box-sizing:border-box !important;
        }
        body.cityma-marketplace .top-listing-count span {
            color:#333 !important;
            font-size:6px !important;
        }
        body.cityma-marketplace .top-listing-arrow:disabled {
            opacity:.30 !important;
        }

        @media (max-height:760px) and (orientation:portrait) {
            body.cityma-marketplace .app-container { --header-h:124px !important; }
            body.cityma-marketplace .viewer-top-bar { height:124px !important; }
        }
        /* ================================================================
           CITYMA AI TIER UI · exact current index · 2026-08-22
           ================================================================ */
        .cityma-ai-inline {
            background:#f8fafc !important;
            border-color:#e2e6ea !important;
        }
        .cityma-ai-section-label { display:none !important; }
        .cityma-ai-inline .cityma-ai-composer {
            background:#ffffff !important;
            border-color:#e2e6ea !important;
            padding-left:10px !important;
        }
        .cityma-ai-inline .cityma-ai-composer textarea {
            font-size:12.65px !important; /* +15% from 11px */
            color:#25282d !important;
            font-weight:500 !important;
        }
        .cityma-ai-inline .cityma-ai-composer textarea::placeholder {
            color:#656b73 !important;
            opacity:1 !important;
        }
        .cityma-ai-inline.is-expanded { background:#f8fafc !important; }
        .cityma-ai-inline[data-ai-mode="mini"] .cityma-ai-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }


        /* ================================================================
           CITYMA AI SIMPLE + BRAND PATCH · 2026-08-22 21:33
           AI composer only + top CityMarketeer wordmark.
           ================================================================ */

        /* Give the AI composer a cleaner, more open look. */
        .cityma-ai-inline {
            width:82% !important;
            margin:2px auto 0 !important;
            padding:4px 9px 5px !important;
            background:#f7f8fa !important;
            border:0 !important;
            border-radius:18px !important;
            box-shadow:0 3px 12px rgba(0,0,0,.12) !important;
        }
        .cityma-ai-inline .cityma-ai-composer {
            min-height:48px !important;
            height:48px !important;
            padding:2px 7px 2px 3px !important;
            gap:7px !important;
            border:0 !important;
            border-radius:0 !important;
            background:transparent !important;
            box-shadow:none !important;
            align-items:flex-start !important;
        }
        .cityma-ai-inline .cityma-ai-service-icon {
            width:24px !important;
            height:24px !important;
            flex:0 0 24px !important;
            margin-top:2px !important;
            margin-left:0 !important;
        }
        .cityma-ai-inline .cityma-ai-composer textarea {
            height:44px !important;
            max-height:72px !important;
            padding:3px 2px 2px !important;
            font-size:12.65px !important;
            line-height:1.30 !important;
            overflow-y:auto !important;
        }
        .cityma-ai-inline .cityma-ai-send {
            width:34px !important;
            height:34px !important;
            margin-top:5px !important;
            margin-right:4px !important;
            flex:0 0 34px !important;
        }

        /* Move the video progress line slightly lower to free vertical AI space. */
        .progress-bar-wrap {
            margin-top:5px !important;
            transform:translateY(3px) !important;
        }

        /* CityMarketeer wordmark refinement. */
        .top-logo-banner .city-part {
            font-size:1.12em !important;
            color:#ff6600 !important;
            font-weight:900 !important;
        }
        .top-logo-banner .market-part {
            color:#ff2a2a !important;
            font-size:1.15em !important;
            font-weight:900 !important;
        }

        /* ================================================================
           CITYMA MAP + AI COMPOSER FIT · 2026-08-22 23:17
           Exact current index; visual-only patch.
           ================================================================ */

        /* Use same-level map.png in the address box; ~30% larger than the old 18px pin. */
        .top-address-map-icon {
            width:24px !important;
            height:24px !important;
            flex:0 0 24px !important;
            object-fit:contain !important;
            margin:0 1px 0 0 !important;
            align-self:flex-start !important;
        }

        /* AI bar: 15% wider, 7% taller, vertically centered. */
        .cityma-ai-inline {
            width:94.3% !important; /* 82% × 1.15 */
            max-width:94.3% !important;
            padding:4px 5px 5px 7px !important;
        }
        .cityma-ai-inline .cityma-ai-composer {
            min-height:51.4px !important; /* 48px × 1.07 */
            height:51.4px !important;
            padding:2px 2px 2px 3px !important;
            gap:6px !important;
            align-items:center !important;
        }
        .cityma-ai-inline .cityma-ai-service-icon {
            margin-top:0 !important;
            align-self:center !important;
        }
        .cityma-ai-inline .cityma-ai-composer textarea {
            height:47px !important;
            max-height:78px !important;
            padding:5px 0 4px 2px !important;
            line-height:1.28 !important;
            align-self:center !important;
            scrollbar-gutter:stable !important;
        }
        .cityma-ai-inline .cityma-ai-send {
            width:35px !important;
            height:35px !important;
            flex:0 0 35px !important;
            margin-top:0 !important;
            margin-right:0 !important;
            align-self:center !important;
        }


        /* ================================================================
           CITYMA FINAL AI INPUT + SECTION TEXT · 2026-08-22 23:21
           Requested visual-only refinements.
           ================================================================ */

        /* Keep the existing three section boxes exactly as-is; text only +10%. */
        .market-section-text {
            font-size:.4301rem !important; /* .391rem × 1.10 */
        }
        @media (max-width:420px), (min-width:421px) {
            .market-section-text { font-size:.4301rem !important; }
        }

        /* AI sparkle stays aligned to the ceiling/top of the composer. */
        .cityma-ai-inline .cityma-ai-service-icon {
            align-self:flex-start !important;
            margin-top:0 !important;
        }


        /* ================================================================
           CITYMA AI BOTTOM SHEET · EXACT LATEST USER INDEX · 2026-08-23 09:44
           Initial composer stays in place. After submit, AI opens centered
           as a phone/PC bottom sheet about one-third of the screen height.
           ================================================================ */

        /* Initial AI text: larger and easier to read on a phone. */
        .cityma-ai-inline .cityma-ai-composer textarea {
            font-size:14.55px !important;
            line-height:1.30 !important;
        }

        /* Expanded AI: fixed to the same centered portrait width as CityMa.
           This prevents the panel drifting to the right on phone or PC. */
        .cityma-ai-inline.is-expanded {
            position:fixed !important;
            left:50% !important;
            right:auto !important;
            bottom:var(--nav-h, 64px) !important;
            transform:translateX(-50%) !important;
            z-index:10050 !important;
            width:min(100vw, 56.25dvh, 650px) !important;
            max-width:min(100vw, 56.25dvh, 650px) !important;
            height:clamp(230px, 34dvh, 360px) !important;
            max-height:calc(100dvh - var(--nav-h, 64px) - 18px) !important;
            margin:0 !important;
            padding:10px 12px 12px !important;
            box-sizing:border-box !important;
            overflow-y:auto !important;
            border:0 !important;
            border-radius:18px 18px 0 0 !important;
            background:#f8fafc !important;
            box-shadow:0 -10px 30px rgba(0,0,0,.38) !important;
            scrollbar-width:thin !important;
            overscroll-behavior:contain !important;
        }
        .cityma-ai-inline.is-expanded form {
            position:sticky !important;
            top:0 !important;
            z-index:2 !important;
            display:block !important;
            background:#f8fafc !important;
            padding-bottom:4px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer {
            width:100% !important;
            min-height:56px !important;
            height:56px !important;
            align-items:center !important;
            background:#fff !important;
            border-radius:16px !important;
            padding:5px 7px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-service-icon {
            align-self:flex-start !important;
            margin-top:2px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
            height:46px !important;
            max-height:80px !important;
            font-size:15px !important;
            line-height:1.32 !important;
            padding:5px 3px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-send {
            align-self:center !important;
            width:38px !important;
            height:38px !important;
            flex:0 0 38px !important;
            margin:0 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-result {
            display:block !important;
            width:100% !important;
            box-sizing:border-box !important;
            padding-bottom:4px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
            margin:8px 2px 7px !important;
            font-size:12.5px !important;
            line-height:1.2 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-close {
            width:30px !important;
            height:30px !important;
            font-size:19px !important;
            flex:0 0 30px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-answer {
            font-size:14px !important;
            line-height:1.52 !important;
            padding:12px 13px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-answer-source {
            font-size:11px !important;
            line-height:1.4 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help {
            font-size:11px !important;
            line-height:1.45 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help-title {
            font-size:11.5px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-actions {
            gap:7px !important;
            margin-top:9px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-action {
            min-height:38px !important;
            padding:8px 6px !important;
            font-size:11.5px !important;
            line-height:1.15 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail-title {
            font-size:12px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail-note {
            font-size:10.5px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail input,
        .cityma-ai-inline.is-expanded .cityma-ai-formmail-submit {
            font-size:12px !important;
        }

        @media (max-height:700px) {
            .cityma-ai-inline.is-expanded {
                height:clamp(210px, 35dvh, 300px) !important;
            }
        }


        /* ================================================================
           CITYMA PHONE TRUE FULL-WIDTH AI · 2026-08-23 09:53
           Final override only: compact composer uses every available pixel;
           expanded AI is a true bottom one-third sheet on phone and PC.
           ================================================================ */

        /* Compact AI: full CityMa width. Remove the textarea scrollbar/vertical
           line so the middle question area is visibly wider on smartphones. */
        .cityma-ai-inline:not(.is-expanded) {
            width:calc(100% + 20px) !important;
            max-width:none !important;
            margin:2px -10px 0 !important;
            padding:2px 3px 3px 0 !important;
            box-sizing:border-box !important;
            border-radius:16px !important;
            transform:none !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer {
            display:grid !important;
            grid-template-columns:28px minmax(0,1fr) 42px !important;
            column-gap:3px !important;
            align-items:start !important;
            width:100% !important;
            min-height:54px !important;
            height:54px !important;
            padding:1px 0 1px 0 !important;
            box-sizing:border-box !important;
            background:transparent !important;
            border:0 !important;
            box-shadow:none !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-service-icon {
            grid-column:1 !important;
            width:26px !important;
            height:26px !important;
            flex:none !important;
            align-self:start !important;
            justify-self:start !important;
            margin:0 !important;
            padding:0 !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer textarea {
            grid-column:2 !important;
            width:100% !important;
            min-width:0 !important;
            height:50px !important;
            max-height:50px !important;
            margin:0 !important;
            padding:4px 3px 2px !important;
            box-sizing:border-box !important;
            font-size:14.8px !important;
            line-height:1.30 !important;
            overflow:hidden !important;
            scrollbar-width:none !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer textarea::-webkit-scrollbar,
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea::-webkit-scrollbar,
        .cityma-ai-inline.is-expanded::-webkit-scrollbar {
            display:none !important;
            width:0 !important;
            height:0 !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-send {
            grid-column:3 !important;
            justify-self:end !important;
            align-self:center !important;
            width:40px !important;
            height:40px !important;
            flex:none !important;
            margin:0 !important;
        }

        /* On a real smartphone, explicitly use the physical viewport width. */
        @media (max-width:650px) {
            .cityma-ai-inline:not(.is-expanded) {
                position:relative !important;
                left:50% !important;
                width:100vw !important;
                max-width:100vw !important;
                margin:2px 0 0 !important;
                transform:translateX(-50%) !important;
            }
        }

        /* Expanded AI: full-width true bottom sheet, about one-third of screen.
           It intentionally covers the bottom navigation while AI is open. */
        .cityma-ai-inline.is-expanded {
            position:fixed !important;
            left:50% !important;
            right:auto !important;
            top:auto !important;
            bottom:0 !important;
            transform:translateX(-50%) !important;
            z-index:10050 !important;
            width:min(100vw, 56.25dvh, 650px) !important;
            max-width:min(100vw, 56.25dvh, 650px) !important;
            height:34dvh !important;
            min-height:0 !important;
            max-height:40dvh !important;
            margin:0 !important;
            padding:6px 4px calc(8px + env(safe-area-inset-bottom)) 2px !important;
            box-sizing:border-box !important;
            overflow-y:auto !important;
            overflow-x:hidden !important;
            scrollbar-width:none !important;
            border:0 !important;
            border-radius:18px 18px 0 0 !important;
            background:#f8fafc !important;
            box-shadow:0 -10px 30px rgba(0,0,0,.40) !important;
            overscroll-behavior:contain !important;
        }
        .cityma-ai-inline.is-expanded form {
            position:sticky !important;
            top:0 !important;
            z-index:3 !important;
            width:100% !important;
            margin:0 !important;
            padding:0 0 5px !important;
            background:#f8fafc !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer {
            display:grid !important;
            grid-template-columns:28px minmax(0,1fr) 44px !important;
            column-gap:4px !important;
            align-items:start !important;
            width:100% !important;
            min-height:60px !important;
            height:60px !important;
            padding:2px 0 !important;
            box-sizing:border-box !important;
            border:0 !important;
            border-radius:15px !important;
            background:#fff !important;
            box-shadow:none !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-service-icon {
            grid-column:1 !important;
            width:26px !important;
            height:26px !important;
            flex:none !important;
            align-self:start !important;
            justify-self:start !important;
            margin:0 !important;
            padding:0 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
            grid-column:2 !important;
            width:100% !important;
            min-width:0 !important;
            height:54px !important;
            max-height:54px !important;
            margin:0 !important;
            padding:5px 3px 3px !important;
            box-sizing:border-box !important;
            font-size:15px !important;
            line-height:1.32 !important;
            overflow:hidden !important;
            scrollbar-width:none !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-send {
            grid-column:3 !important;
            justify-self:end !important;
            align-self:center !important;
            width:42px !important;
            height:42px !important;
            flex:none !important;
            margin:0 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-result {
            width:100% !important;
            box-sizing:border-box !important;
            padding:0 2px 4px !important;
        }
        @media (max-width:650px) {
            .cityma-ai-inline.is-expanded {
                width:100vw !important;
                max-width:100vw !important;
                height:34dvh !important;
            }
        }


        /* ================================================================
           CITYMA AI FRONT HALF-SCREEN · 2026-08-23 10:01
           Keep the successful full-width phone layout. When AI opens, lift
           the viewer above the bottom navigation and use half the viewport.
           ================================================================ */
        body.cityma-ai-sheet-open .viewer {
            z-index:5000 !important;
        }
        body.cityma-ai-sheet-open .info-box.ai-open {
            z-index:6000 !important;
            overflow:visible !important;
        }
        body.cityma-ai-sheet-open .bottom-nav {
            z-index:1 !important;
            pointer-events:none !important;
        }
        .cityma-ai-inline.is-expanded {
            z-index:7000 !important;
            height:50dvh !important;
            max-height:50dvh !important;
            min-height:50dvh !important;
            bottom:0 !important;
        }
        @supports (height: 100svh) {
            .cityma-ai-inline.is-expanded {
                height:50svh !important;
                max-height:50svh !important;
                min-height:50svh !important;
            }
        }
        @media (max-width:650px) {
            .cityma-ai-inline.is-expanded {
                width:100vw !important;
                max-width:100vw !important;
                left:50% !important;
                right:auto !important;
                transform:translateX(-50%) !important;
                border-radius:18px 18px 0 0 !important;
            }
        }


        /* ================================================================
           CITYMA AI HALF-SCREEN CHAT SPACE · 2026-08-23 10:08
           Half-screen on phone/PC; maximize answer area and de-emphasize
           the secondary help line at the very bottom.
           ================================================================ */
        .cityma-ai-inline.is-expanded {
            display:flex !important;
            flex-direction:column !important;
            height:50vh !important;
            min-height:50vh !important;
            max-height:50vh !important;
            overflow:hidden !important;
        }
        @supports (height:50dvh) {
            .cityma-ai-inline.is-expanded {
                height:50dvh !important;
                min-height:50dvh !important;
                max-height:50dvh !important;
            }
        }
        @supports (height:50svh) {
            .cityma-ai-inline.is-expanded {
                height:50svh !important;
                min-height:50svh !important;
                max-height:50svh !important;
            }
        }
        .cityma-ai-inline.is-expanded > form {
            flex:0 0 auto !important;
            padding:0 0 2px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-result {
            display:flex !important;
            flex:1 1 auto !important;
            min-height:0 !important;
            width:100% !important;
            flex-direction:column !important;
            padding:0 3px 3px !important;
            overflow:hidden !important;
            box-sizing:border-box !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
            order:1 !important;
            flex:0 0 auto !important;
            min-height:23px !important;
            margin:0 1px 2px !important;
            padding:0 !important;
            align-items:center !important;
            font-size:11px !important;
            line-height:1 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-close {
            width:28px !important;
            height:28px !important;
            flex:0 0 28px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-answer {
            order:2 !important;
            flex:1 1 auto !important;
            min-height:0 !important;
            margin:0 !important;
            padding:10px 11px !important;
            overflow-y:auto !important;
            overflow-x:hidden !important;
            font-size:14px !important;
            line-height:1.5 !important;
            scrollbar-width:none !important;
            overscroll-behavior:contain !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-answer::-webkit-scrollbar {
            display:none !important;
            width:0 !important;
            height:0 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-actions {
            order:3 !important;
            flex:0 0 auto !important;
            margin-top:5px !important;
            gap:5px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-action {
            min-height:34px !important;
            font-size:10px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help {
            order:4 !important;
            flex:0 0 auto !important;
            margin:4px 2px 0 !important;
            padding:0 !important;
            color:#9aa0a6 !important;
            font-size:8px !important;
            line-height:1.2 !important;
            font-weight:400 !important;
            opacity:.68 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help-title {
            display:inline !important;
            margin:0 3px 0 0 !important;
            color:#8d939a !important;
            font-size:8px !important;
            line-height:1.2 !important;
            font-weight:600 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help a {
            color:#8d939a !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail {
            order:5 !important;
            flex:0 0 auto !important;
            max-height:42% !important;
            overflow-y:auto !important;
        }
        @media (max-width:650px) {
            .cityma-ai-inline.is-expanded {
                width:100vw !important;
                max-width:100vw !important;
            }
        }


        /* ================================================================
           CITYMA AI CHATGPT FLOW · 2026-08-23 10:06
           Compact first-screen typing stays in place. Only SEND opens the
           half-screen chat. Answer is above, question composer below, and
           contact/form-mail actions are anchored at the bottom.
           ================================================================ */
        .cityma-ai-inline.is-expanded {
            display:grid !important;
            grid-template-columns:minmax(0,1fr) !important;
            grid-template-rows:28px minmax(0,1fr) auto auto auto !important;
            row-gap:5px !important;
            height:50vh !important;
            min-height:50vh !important;
            max-height:50vh !important;
            overflow:hidden !important;
            padding:6px 7px calc(7px + env(safe-area-inset-bottom)) !important;
            box-sizing:border-box !important;
        }
        @supports (height:50dvh) {
            .cityma-ai-inline.is-expanded {
                height:50dvh !important;
                min-height:50dvh !important;
                max-height:50dvh !important;
            }
        }
        @supports (height:50svh) {
            .cityma-ai-inline.is-expanded {
                height:50svh !important;
                min-height:50svh !important;
                max-height:50svh !important;
            }
        }

        /* Flatten the result wrapper so answer/header/actions can occupy the
           main sheet grid while preserving the existing PHP/JS structure. */
        .cityma-ai-inline.is-expanded .cityma-ai-inline-result {
            display:contents !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
            grid-row:1 !important;
            grid-column:1 !important;
            min-height:28px !important;
            height:28px !important;
            margin:0 !important;
            padding:0 1px !important;
            display:flex !important;
            align-items:center !important;
            justify-content:space-between !important;
            font-size:11px !important;
            line-height:1 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-answer {
            grid-row:2 !important;
            grid-column:1 !important;
            min-height:0 !important;
            height:auto !important;
            margin:0 !important;
            padding:12px 13px !important;
            overflow-y:auto !important;
            overflow-x:hidden !important;
            font-size:14px !important;
            line-height:1.52 !important;
            border-radius:14px !important;
            scrollbar-width:none !important;
            overscroll-behavior:contain !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-answer::-webkit-scrollbar {
            display:none !important;
            width:0 !important;
            height:0 !important;
        }

        /* Secondary note stays subtle between the conversation and input. */
        .cityma-ai-inline.is-expanded .cityma-ai-help {
            grid-row:3 !important;
            grid-column:1 !important;
            margin:0 3px !important;
            padding:0 !important;
            color:#a0a5ab !important;
            font-size:7.5px !important;
            line-height:1.15 !important;
            font-weight:400 !important;
            opacity:.58 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help-title {
            display:inline !important;
            margin:0 2px 0 0 !important;
            color:#969ca3 !important;
            font-size:7.5px !important;
            font-weight:500 !important;
        }

        /* ChatGPT-style question composer sits below the answer. */
        .cityma-ai-inline.is-expanded > form {
            grid-row:4 !important;
            grid-column:1 !important;
            position:static !important;
            width:100% !important;
            margin:0 !important;
            padding:0 !important;
            background:transparent !important;
            z-index:2 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer {
            display:grid !important;
            grid-template-columns:28px minmax(0,1fr) 44px !important;
            column-gap:5px !important;
            align-items:start !important;
            width:100% !important;
            min-height:62px !important;
            height:62px !important;
            padding:4px 4px 4px 2px !important;
            border:1px solid #e0e3e7 !important;
            border-radius:18px !important;
            background:#fff !important;
            box-sizing:border-box !important;
            box-shadow:0 1px 5px rgba(0,0,0,.06) !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-service-icon {
            grid-column:1 !important;
            align-self:start !important;
            justify-self:start !important;
            width:26px !important;
            height:26px !important;
            margin:0 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
            grid-column:2 !important;
            width:100% !important;
            min-width:0 !important;
            height:52px !important;
            max-height:52px !important;
            margin:0 !important;
            padding:5px 3px !important;
            box-sizing:border-box !important;
            font-size:15px !important;
            line-height:1.32 !important;
            overflow-y:auto !important;
            scrollbar-width:none !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea::-webkit-scrollbar {
            display:none !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-send {
            grid-column:3 !important;
            justify-self:end !important;
            align-self:center !important;
            width:42px !important;
            height:42px !important;
            margin:0 !important;
            flex:none !important;
        }

        /* Advertiser/contact actions stay on the floor of the AI sheet. */
        .cityma-ai-inline.is-expanded .cityma-ai-actions {
            grid-row:5 !important;
            grid-column:1 !important;
            width:100% !important;
            margin:0 !important;
            padding:0 !important;
            gap:5px !important;
            align-self:end !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-action {
            min-height:34px !important;
            font-size:10px !important;
        }

        /* If SEND FORM MAIL is opened, use the conversation area without
           pushing the fixed bottom controls off-screen. */
        .cityma-ai-inline.is-expanded .cityma-ai-formmail {
            grid-row:2 / 5 !important;
            grid-column:1 !important;
            z-index:5 !important;
            min-height:0 !important;
            max-height:none !important;
            margin:0 !important;
            padding:10px !important;
            overflow-y:auto !important;
            background:#f8fafc !important;
            border:1px solid #e1e4e8 !important;
            border-radius:14px !important;
            box-sizing:border-box !important;
        }

        @media (max-width:650px) {
            .cityma-ai-inline.is-expanded {
                width:100vw !important;
                max-width:100vw !important;
                left:50% !important;
                right:auto !important;
                transform:translateX(-50%) !important;
                border-radius:18px 18px 0 0 !important;
            }
        }


        /* ================================================================
           CITYMA POWERED-BY + IN-FIELD GO · 2026-08-23 10:13
           Header-only refinement. Auth/favicon link and search behavior stay intact.
           ================================================================ */

        /* De-emphasize the platform wordmark: small "Powered by City Marketeer". */
        .top-logo-banner {
            gap:4px !important;
            font-size:10px !important;
            letter-spacing:0 !important;
            text-shadow:0 1px 2px rgba(0,0,0,.85) !important;
        }
        .top-brand-info-link {
            gap:3px !important;
            opacity:.78 !important;
            white-space:nowrap !important;
        }
        .top-brand-info-link .powered-prefix {
            color:#a9adb3 !important;
            font-size:8px !important;
            line-height:1 !important;
            font-weight:600 !important;
            letter-spacing:.01em !important;
        }
        .top-logo-banner .city-part,
        .top-logo-banner .market-part {
            font-size:9.5px !important;
            line-height:1 !important;
            font-weight:700 !important;
        }
        .top-logo-banner .city-part { color:#d97835 !important; }
        .top-logo-banner .market-part { color:#d7d9dc !important; }

        /* GO lives inside the ADID search field, at the far-right edge. */
        .app-container .adid-search-wrap {
            position:relative !important;
            display:flex !important;
            grid-template-columns:none !important;
            grid-template-rows:none !important;
            align-items:center !important;
            column-gap:4px !important;
            row-gap:0 !important;
            min-height:23px !important;
            height:23px !important;
            padding:1px 27px 1px 5px !important;
            border:1px solid rgba(255,255,255,.28) !important;
            border-radius:5px !important;
            background:rgba(0,0,0,.58) !important;
            overflow:hidden !important;
            box-sizing:border-box !important;
        }
        .app-container .adid-search-label {
            position:static !important;
            flex:0 0 auto !important;
            margin:0 !important;
            font-size:7.5px !important;
            line-height:1 !important;
            color:#b9bdc3 !important;
            align-self:center !important;
        }
        .app-container .adid-search-input {
            position:static !important;
            flex:1 1 auto !important;
            width:auto !important;
            min-width:0 !important;
            max-width:none !important;
            height:19px !important;
            padding:0 1px !important;
            margin:0 !important;
            text-align:center !important;
            font-size:.75rem !important;
            line-height:19px !important;
            background:transparent !important;
            border:0 !important;
            box-sizing:border-box !important;
        }
        .app-container .adid-search-btn {
            position:absolute !important;
            right:2px !important;
            top:50% !important;
            transform:translateY(-50%) !important;
            width:23px !important;
            height:17px !important;
            min-width:23px !important;
            padding:0 !important;
            margin:0 !important;
            border:1px solid rgba(255,255,255,.18) !important;
            border-radius:4px !important;
            background:#555a60 !important;
            color:#e5e7ea !important;
            font:700 7px/15px Arial,sans-serif !important;
            letter-spacing:.01em !important;
            box-shadow:none !important;
            opacity:.88 !important;
            z-index:3 !important;
        }
        .app-container .adid-search-btn:hover,
        .app-container .adid-search-btn:focus-visible {
            background:#656b72 !important;
            color:#fff !important;
            outline:0 !important;
        }


        /* ================================================================
           CITYMA MARKETPLACE NAV + POWERED HEADER FINAL · 2026-08-23 10:27
           Marketplace arrows stay in marketplace mode. Header brand is
           two lines; City Marketeer is white and ADID stays readable.
           ================================================================ */

        /* Logo is 10% smaller than the prior 26px and matches the two text lines. */
        .top-logo-banner {
            display:flex !important;
            align-items:center !important;
            justify-content:flex-end !important;
            gap:4px !important;
            min-height:23.4px !important;
        }
        .top-logo-banner .city-favicon {
            width:23.4px !important;
            height:23.4px !important;
            flex:0 0 23.4px !important;
        }
        .top-brand-info-link {
            display:flex !important;
            flex-direction:column !important;
            align-items:flex-start !important;
            justify-content:center !important;
            gap:0 !important;
            height:23.4px !important;
            opacity:.88 !important;
            white-space:nowrap !important;
        }
        .top-brand-info-link .powered-prefix {
            display:block !important;
            color:#aeb3b9 !important;
            font-size:8px !important;
            line-height:10px !important;
            font-weight:600 !important;
        }
        .top-brand-info-link .powered-brand-line {
            display:flex !important;
            align-items:baseline !important;
            gap:3px !important;
            height:13.4px !important;
            line-height:13.4px !important;
        }
        .top-brand-info-link .powered-brand-line .city-part,
        .top-brand-info-link .powered-brand-line .market-part {
            color:#fff !important;
            font-size:10.45px !important; /* 9.5px x 1.10 */
            line-height:13.4px !important;
            font-weight:800 !important;
        }

        /* Always show the current listing ADID clearly inside the compact search field. */
        .app-container .adid-search-input {
            color:#fff !important;
            -webkit-text-fill-color:#fff !important;
            opacity:1 !important;
            font-size:.82rem !important;
            font-weight:900 !important;
            letter-spacing:.02em !important;
            caret-color:#fff !important;
        }


        /* ================================================================
           CITYMA MARKETPLACE RIGHT RAIL · 2026-08-23 10:42
           Restore the wide previous/next arrows on the right side.
           Counter reads vertically: current / of / total.
           ================================================================ */

        body.cityma-marketplace .top-listing-nav {
            display:none !important;
        }

        body.cityma-marketplace .right-wall-scroll-indicator {
            position:absolute !important;
            top:calc(var(--header-h) + 1px) !important;
            right:0 !important;
            bottom:var(--info-h) !important;
            width:42px !important;
            margin:0 !important;
            padding:0 !important;
            z-index:95 !important;
            display:flex !important;
            align-items:center !important;
            justify-content:flex-start !important;
            background:transparent !important;
            pointer-events:none !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-stack {
            width:42px !important;
            display:flex !important;
            flex-direction:column !important;
            align-items:center !important;
            justify-content:flex-start !important;
            gap:1px !important;
            pointer-events:auto !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow {
            width:42px !important;
            height:62px !important;
            flex:0 0 62px !important;
            margin:0 !important;
            padding:0 !important;
            border:0 !important;
            background:transparent !important;
            color:#fff !important;
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            cursor:pointer !important;
            filter:drop-shadow(0 3px 5px rgba(0,0,0,.95)) !important;
            box-shadow:none !important;
            transition:opacity .14s ease,color .14s ease !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow.is-lit {
            opacity:1 !important;
            color:#fff !important;
            cursor:pointer !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow.is-dim,
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow:disabled {
            opacity:.16 !important;
            color:#8c9299 !important;
            cursor:default !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow svg {
            width:37px !important;
            height:59px !important;
            display:block !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow path {
            fill:none !important;
            stroke:currentColor !important;
            stroke-width:4.8 !important;
            stroke-linecap:round !important;
            stroke-linejoin:round !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow:not(:disabled):hover,
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow:not(:disabled):focus-visible {
            color:#ff9b59 !important;
            outline:0 !important;
        }

        body.cityma-marketplace .right-wall-scroll-indicator .ad-position-group {
            width:48px !important;
            min-height:64px !important;
            height:64px !important;
            margin:0 !important;
            padding:2px 0 !important;
            border:0 !important;
            border-radius:0 !important;
            background:transparent !important;
            color:#fff !important;
            display:flex !important;
            flex-direction:column !important;
            align-items:center !important;
            justify-content:center !important;
            gap:2px !important;
            cursor:pointer !important;
            box-sizing:border-box !important;
            text-shadow:0 2px 5px #000 !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-position {
            color:#fff !important;
            font:900 25px/1 Arial,sans-serif !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-of {
            color:#aeb3b9 !important;
            font:800 8px/1 Arial,sans-serif !important;
            letter-spacing:.04em !important;
            text-transform:lowercase !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-total-number {
            color:#fff !important;
            font:900 18px/1 Arial,sans-serif !important;
        }

        @media (max-width:420px) {
            body.cityma-marketplace .right-wall-scroll-indicator {
                width:39px !important;
                top:calc(var(--header-h) + 1px) !important;
            }
            body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-stack {
                width:39px !important;
            }
            body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow {
                width:39px !important;
                height:58px !important;
                flex-basis:58px !important;
            }
            body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow svg {
                width:34px !important;
                height:54px !important;
            }
        }

        /* CITYMA MARKETPLACE NAV FINAL · active direction only, upper media rail. */
        body.cityma-marketplace .right-wall-scroll-indicator {
            top:calc(var(--header-h) + 10px) !important;
            bottom:auto !important;
            height:auto !important;
            justify-content:flex-start !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-stack {
            gap:2px !important;
            justify-content:flex-start !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator a.ad-boundary-arrow {
            text-decoration:none !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow {
            width:34px !important;
            height:49px !important;
            flex:0 0 49px !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow svg {
            width:29px !important;
            height:46px !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-position-group {
            min-height:52px !important;
            height:52px !important;
        }
        @media (max-width:420px) {
            body.cityma-marketplace .right-wall-scroll-indicator {
                top:calc(var(--header-h) + 8px) !important;
                width:37px !important;
            }
            body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-stack { width:37px !important; }
            body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow {
                width:32px !important;
                height:46px !important;
                flex-basis:46px !important;
            }
            body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow svg {
                width:27px !important;
                height:43px !important;
            }
        }

        /* CITYMA 2026-08-23: keep marketplace nav arrows fully clickable above media. */
        body.cityma-marketplace .right-wall-scroll-indicator { z-index:9999 !important; pointer-events:auto !important; }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-stack,
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow,
        body.cityma-marketplace .right-wall-scroll-indicator .ad-position-group { pointer-events:auto !important; }


        /* ==================================================================
           CITYMA SHORTSSITE MEDIA FIT · 2026-08-26
           Wide/square: full available width, proportional, vertically centered.
           Portrait: full available media height, proportional, left aligned.
           Desktop: the whole ShortsSite stays together at top-center.
           The special low-height rotated-phone preview remains untouched.
           ================================================================== */
        body {
            align-items:flex-start !important;
        }
        .app-container {
            margin-left:auto !important;
            margin-right:auto !important;
        }
        .nav-item.cityma-nav-disabled {
            opacity:.34 !important;
            cursor:not-allowed !important;
            pointer-events:none !important;
            filter:grayscale(1);
        }

        @media (min-height:601px), (orientation:portrait) {
            .app-container .video-wrap {
                padding-left:0 !important;
                padding-right:0 !important;
                align-items:center !important;
                justify-content:flex-start !important;
                overflow:hidden !important;
            }
            .app-container .video-wrap .cityeer-square-frame {
                width:100% !important;
                max-width:100% !important;
                height:100% !important;
                max-height:100% !important;
                aspect-ratio:auto !important;
                flex:1 1 auto !important;
                margin:0 !important;
                display:flex !important;
                align-items:center !important;
                justify-content:flex-start !important;
                overflow:hidden !important;
                background:#000 !important;
            }
            .app-container .cityeer-square-frame > #mediaPlayer {
                position:relative !important;
                left:0 !important;
                top:auto !important;
                right:auto !important;
                bottom:auto !important;
                flex:0 0 auto !important;
                display:block !important;
                object-fit:contain !important;
                object-position:left center !important;
                background:#000 !important;
                margin:0 !important;
                transform:none !important;
            }

            /* Landscape media fills the ShortsSite width and keeps natural ratio. */
            .app-container .cityeer-square-frame.media-landscape > #mediaPlayer {
                width:100% !important;
                height:auto !important;
                max-width:100% !important;
                max-height:100% !important;
            }

            /* Portrait media fills the complete header-to-action vertical media area. */
            .app-container .cityeer-square-frame.media-portrait > #mediaPlayer {
                width:auto !important;
                height:100% !important;
                max-width:100% !important;
                max-height:100% !important;
            }

            /* Square chooses the largest proportional fit without cropping. */
            .app-container .cityeer-square-frame.media-square > #mediaPlayer {
                width:100% !important;
                height:auto !important;
                max-width:100% !important;
                max-height:100% !important;
            }

            /* Safe default before dimensions are known. */
            .app-container .cityeer-square-frame:not(.media-landscape):not(.media-portrait):not(.media-square) > #mediaPlayer {
                width:100% !important;
                height:100% !important;
                max-width:100% !important;
                max-height:100% !important;
                object-fit:contain !important;
            }
        }


        /* ==================================================================
           CITYMA S23 REFINEMENT · 2026-08-27 00:37
           User-requested visual-only changes from latest uploaded index.
           ================================================================== */

        /* Address: +20% width to the right from 68% => 81.6%;
           overall box height -10% from 54px => 48.6px. */
        .app-container .top-address-box {
            width:81.6% !important;
            max-width:81.6% !important;
            min-height:48.6px !important;
            height:48.6px !important;
            padding-top:2px !important;
            padding-bottom:2px !important;
            overflow:hidden !important;
        }

        /* Section names below Category: +25% from .4301rem. */
        .market-section-text {
            font-size:.537625rem !important;
        }

        /* Title/detail line spacing: -10%.
           Character limits are enforced in PHP above: title 100, description 150. */
        .title-text {
            line-height:1.152 !important;
        }
        .desc-bg {
            line-height:1.206 !important;
        }

        /* Compact Customer Service send arrow:
           button and arrow -20%, moved slightly farther right. */
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer {
            grid-template-columns:28px minmax(0,1fr) 34px !important;
            padding-right:0 !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-send {
            width:32px !important;
            height:32px !important;
            flex:0 0 32px !important;
            justify-self:end !important;
            transform:translateX(3px) !important;
        }
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-send > span {
            font-size:16px !important;
            line-height:1 !important;
        }


        /* ==================================================================
           CITYMA S23 REFINEMENT 2 · 2026-08-27 00:55
           Latest requested changes only.
           ================================================================== */

        /* Address box: keep widened 81.6%, reduce current 48.6px height another 10%. */
        .app-container .top-address-box {
            width:81.6% !important;
            max-width:81.6% !important;
            min-height:43.74px !important;
            height:43.74px !important;
            padding-top:1px !important;
            padding-bottom:1px !important;
        }

        /* Map moved beside Email in the lower contact controls. */
        .map-contact-action img {
            width:21px !important;
            height:21px !important;
            object-fit:contain !important;
            display:block !important;
        }

        /* Section names: +7% from the current .537625rem. */
        .market-section-text {
            font-size:.575259rem !important;
        }

        /* Landscape media: full width and true vertical centering in the media area. */
        .app-container .cityeer-square-frame.media-landscape {
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
        }
        .app-container .cityeer-square-frame.media-landscape > #mediaPlayer {
            width:100% !important;
            height:auto !important;
            max-width:100% !important;
            max-height:100% !important;
            align-self:center !important;
            object-fit:contain !important;
            object-position:center center !important;
            margin:auto 0 !important;
        }

        /* Keep the compact Customer Service send button at the prior reduced size. */
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-send {
            width:32px !important;
            height:32px !important;
            flex:0 0 32px !important;
            justify-self:end !important;
            transform:translateX(3px) !important;
        }


        /* ==================================================================
           CITYMA PHONE MASTER SINGLE LAYOUT · 2026-08-27
           MASTER = 360 x 780 portrait.
           Phone: master view.
           Desktop: same master view enlarged and centered.
           Landscape phone: same portrait master scaled down and centered.
           No separate desktop/mobile/landscape design.
           ================================================================== */

        :root {
            --cityma-master-w:360px;
            --cityma-master-h:780px;
            --cityma-master-scale:1;
        }

        html,
        body {
            width:100% !important;
            height:100% !important;
            margin:0 !important;
            padding:0 !important;
            overflow:hidden !important;
            background:#000 !important;
        }

        body {
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            min-width:0 !important;
            min-height:0 !important;
        }

        /* One physical design surface everywhere. */
        .app-container {
            position:relative !important;
            flex:0 0 auto !important;
            width:var(--cityma-master-w) !important;
            min-width:var(--cityma-master-w) !important;
            max-width:var(--cityma-master-w) !important;
            height:var(--cityma-master-h) !important;
            min-height:var(--cityma-master-h) !important;
            max-height:var(--cityma-master-h) !important;
            margin:0 !important;
            transform:scale(var(--cityma-master-scale)) !important;
            transform-origin:center center !important;
            overflow:hidden !important;
            box-shadow:none !important;

            /* Never let short-screen media queries change the phone face. */
            --nav-h:64px !important;
            /* Move the progress/info floor about 30% of the 64px bottom-nav height lower.
               226px -> 207px gives the media area ~19px more vertical space without
               changing the six-menu navigation or any other index layout. */
            --info-h:207px !important;
            --header-h:174px !important;
        }

        /* Marketplace keeps its established compact header, identically everywhere. */
        body.cityma-marketplace .app-container {
            --header-h:138px !important;
        }
        body.cityma-marketplace .viewer-top-bar {
            height:138px !important;
        }

        .viewer {
            width:100% !important;
            height:calc(100% - var(--nav-h)) !important;
            top:0 !important;
            left:0 !important;
            overflow:hidden !important;
        }

        /* Neutralize the old rotated-phone special presentation. */
        .viewer-top-bar {
            display:flex !important;
            position:absolute !important;
            top:0 !important;
            left:0 !important;
            width:100% !important;
            height:var(--header-h) !important;
            padding:7px 10px 4px !important;
            background:none !important;
            box-sizing:border-box !important;
            overflow:visible !important;
        }
        .top-logo-link {
            position:static !important;
            top:auto !important;
            right:auto !important;
            width:100% !important;
            padding-right:0 !important;
            margin-bottom:1px !important;
        }
        .top-bar-row {
            display:flex !important;
        }
        .landscape-advertiser-name {
            display:none !important;
        }

        /* Current phone contact/button sizing becomes the universal sizing. */
        .price-action-row {
            gap:4px !important;
        }
        .action-btn-inline {
            gap:4px !important;
            padding:4px 7px !important;
        }
        .action-btn-inline .material-icons-outlined {
            font-size:17px !important;
        }
        .btn-main-txt {
            font-size:.75rem !important;
        }
        .btn-sub-txt {
            font-size:.5rem !important;
        }
        .inline-contact-actions {
            gap:2px !important;
        }
        .inline-contact-action {
            width:29px !important;
            height:29px !important;
        }
        .inline-contact-action .material-icons-outlined {
            font-size:17px !important;
        }

        /* One header face everywhere. */
        .app-container .top-left-brand-box {
            top:10px !important;
        }
        .market-section-strip {
            gap:6px !important;
        }
        .market-section-text {
            /* Preserve the latest requested +7% section-name size. */
            font-size:.575259rem !important;
        }

        /* One media geometry everywhere, including a rotated phone. */
        .app-container .video-wrap {
            position:absolute !important;
            top:var(--header-h) !important;
            bottom:var(--info-h) !important;
            left:0 !important;
            width:100% !important;
            height:auto !important;
            padding:0 !important;
            box-sizing:border-box !important;
            display:flex !important;
            align-items:center !important;
            justify-content:flex-start !important;
            overflow:hidden !important;
            background:#000 !important;
        }
        .app-container .video-wrap .cityeer-square-frame {
            position:relative !important;
            width:100% !important;
            max-width:100% !important;
            height:100% !important;
            max-height:100% !important;
            aspect-ratio:auto !important;
            flex:1 1 auto !important;
            margin:0 !important;
            display:flex !important;
            align-items:center !important;
            justify-content:flex-start !important;
            overflow:hidden !important;
            background:#000 !important;
            box-shadow:none !important;
        }
        .app-container .cityeer-square-frame > #mediaPlayer {
            position:relative !important;
            left:0 !important;
            top:auto !important;
            right:auto !important;
            bottom:auto !important;
            display:block !important;
            flex:0 0 auto !important;
            max-width:100% !important;
            max-height:100% !important;
            object-fit:contain !important;
            background:#000 !important;
            transform:none !important;
        }

        /* Landscape media = full width + TRUE vertical center. */
        .app-container .cityeer-square-frame.media-landscape {
            align-items:center !important;
            justify-content:center !important;
        }
        .app-container .cityeer-square-frame.media-landscape > #mediaPlayer {
            width:100% !important;
            height:auto !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:auto 0 !important;
            align-self:center !important;
            object-position:center center !important;
        }

        /* Portrait = full available height, left aligned. */
        .app-container .cityeer-square-frame.media-portrait {
            align-items:center !important;
            justify-content:flex-start !important;
        }
        .app-container .cityeer-square-frame.media-portrait > #mediaPlayer {
            width:auto !important;
            height:100% !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:0 !important;
            object-position:left center !important;
        }

        /* Square = largest proportional fit. */
        .app-container .cityeer-square-frame.media-square {
            align-items:center !important;
            justify-content:flex-start !important;
        }
        .app-container .cityeer-square-frame.media-square > #mediaPlayer {
            width:100% !important;
            height:auto !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:0 !important;
            object-position:left center !important;
        }

        /* Restore all information that the old landscape-phone mode hid. */
        .info-box {
            display:block !important;
            position:absolute !important;
            left:0 !important;
            bottom:0 !important;
            width:100% !important;
            height:var(--info-h) !important;
            min-height:0 !important;
            padding:5px 10px 4px !important;
            background:linear-gradient(180deg,rgba(0,0,0,.72),#000 26%) !important;
            overflow:hidden !important;
            box-sizing:border-box !important;
        }
        .info-box .price-action-row {
            display:flex !important;
        }
        .info-box .company-name {
            display:block !important;
        }
        .info-box .title-text {
            display:-webkit-box !important;
            font-size:17px !important;
            line-height:1.152 !important;
            -webkit-line-clamp:2 !important;
        }
        .info-box .desc-bg {
            display:-webkit-box !important;
            font-size:12.5px !important;
            line-height:1.206 !important;
            -webkit-line-clamp:2 !important;
        }
        .info-box .cityma-ai-inline {
            display:block !important;
        }
        .info-box .progress-bar-wrap {
            display:flex !important;
        }

        /* Bottom navigation is always the same portrait navigation. */
        .bottom-nav {
            display:flex !important;
            width:100% !important;
            max-width:none !important;
            height:var(--nav-h) !important;
            flex:0 0 var(--nav-h) !important;
        }
        .nav-item {
            font-size:8px !important;
            min-width:0 !important;
        }
        .nav-item .material-icons-outlined {
            font-size:21px !important;
        }

        /* Compact AI belongs to the 360px master, never to outer desktop vw. */
        .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            left:auto !important;
            width:calc(100% + 20px) !important;
            max-width:none !important;
            margin:2px -10px 0 !important;
            transform:none !important;
        }

        /* Expanded AI stays inside the master phone even on desktop or landscape. */
        .cityma-ai-inline.is-expanded {
            position:fixed !important;
            left:50% !important;
            right:auto !important;
            top:auto !important;
            bottom:0 !important;
            width:360px !important;
            min-width:360px !important;
            max-width:360px !important;
            height:390px !important;
            min-height:390px !important;
            max-height:390px !important;
            transform:translateX(-50%) !important;
            border-radius:18px 18px 0 0 !important;
        }

        /* Current requested address geometry, identical on all displays. */
        .app-container .top-address-box {
            width:81.6% !important;
            max-width:81.6% !important;
            min-height:43.74px !important;
            height:43.74px !important;
            padding-top:1px !important;
            padding-bottom:1px !important;
        }

        /* Right rail also uses phone dimensions on desktop. */
        body.cityma-marketplace .right-wall-scroll-indicator {
            top:calc(var(--header-h) + 8px) !important;
            width:37px !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-nav-stack {
            width:37px !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow {
            width:32px !important;
            height:46px !important;
            flex-basis:46px !important;
        }
        body.cityma-marketplace .right-wall-scroll-indicator .ad-boundary-arrow svg {
            width:27px !important;
            height:43px !important;
        }


        /* ==================================================================
           CITYMA PHONE MASTER FINAL TUNE · AICS + DIRECT SHORTSSITE
           2026-08-27
           ================================================================== */

        /* Company: top line unchanged; second line -20% from this baseline. */
        .supplier-brand-hero > span:nth-child(2) {
            font-size:0.807424rem !important;
        }

        /* Address text vertically centered in the current compact box. */
        .app-container .top-address-box {
            align-items:center !important;
        }
        .app-container .top-addr-text-wrap {
            height:100% !important;
            justify-content:center !important;
            align-self:center !important;
        }

        /* Open City only: section names +7% over the prior Phone-Master size. */
        body.cityma-marketplace .market-section-text {
            font-size:.615527rem !important;
        }

        /* Open City category: remove visual ellipsis. The existing auto-fit
           script below reduces only category text if it is too long. */
        body.cityma-marketplace .cityma-category-wrap .cityma-dropdown-trigger > span:first-child {
            min-width:0 !important;
            flex:1 1 auto !important;
            overflow:hidden !important;
            text-overflow:clip !important;
            white-space:nowrap !important;
        }

        /* AICS: shorter wording; keep it compact enough for S21/S23. */
        .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer textarea {
            font-size:13.6px !important;
            line-height:1.22 !important;
        }

        /* Individual/direct ShortsSite only:
           no Our City, no category box, exactly a label line + name line. */
        body.direct-ad-site .cityma-direct-name-block {
            width:100% !important;
            margin:4px 0 0 !important;
            padding:0 !important;
            border:0 !important;
            border-radius:0 !important;
            background:transparent !important;
            box-shadow:none !important;
            text-align:left !important;
            align-self:stretch !important;
            box-sizing:border-box !important;
        }
        body.direct-ad-site .cityma-direct-name-label {
            margin:0 0 2px !important;
            padding:0 !important;
            color:#aeb3b9 !important;
            font-size:8.5px !important;
            line-height:1.05 !important;
            font-weight:700 !important;
            white-space:nowrap !important;
        }
        body.direct-ad-site .cityma-direct-name-value {
            margin:0 !important;
            padding:0 !important;
            color:#00e5ff !important;
            font-size:14.2px !important;
            line-height:1.08 !important;
            font-weight:900 !important;
            letter-spacing:-.01em !important;
            white-space:normal !important;
            overflow:visible !important;
            text-overflow:clip !important;
            overflow-wrap:anywhere !important;
            word-break:normal !important;
            max-width:100% !important;
        }


        /* ==================================================================
           CITYMA PHONE MASTER · BOTTOM NAV + ADDRESS WIDTH · 2026-08-27
           ================================================================== */

        /* Address box width only: +10% from 81.6% => 89.76%.
           Height / typography remain unchanged. */
        .app-container .top-address-box {
            width:89.76% !important;
            max-width:89.76% !important;
        }

        /* The phone master may be shorter than 780px when the browser chrome
           reduces the visible viewport. Keep the bottom navigation inside the
           visible phone viewport instead of pushing it below the fold. */
        .app-container {
            height:var(--cityma-live-h, var(--cityma-master-h)) !important;
            min-height:var(--cityma-live-h, var(--cityma-master-h)) !important;
            max-height:var(--cityma-live-h, var(--cityma-master-h)) !important;
        }

        /* Always keep bottom navigation present and above phone browser UI. */
        .bottom-nav {
            display:flex !important;
            visibility:visible !important;
            opacity:1 !important;
            position:absolute !important;
            left:0 !important;
            right:0 !important;
            bottom:0 !important;
            z-index:1000 !important;
            width:100% !important;
            height:var(--nav-h) !important;
            margin:0 !important;
        }

        /* Viewer ends exactly above the navigation. */
        .viewer {
            height:calc(100% - var(--nav-h)) !important;
        }


        /* ==================================================================
           CITYMA INDEX · MEDIA / HOTSPOT / DESKTOP TOP LOCK · 2026-08-27
           ================================================================== */

        /* Desktop and phone host: the one Phone Master always starts at TOP.
           Horizontal position remains centered. */
        body {
            align-items:flex-start !important;
            justify-content:center !important;
        }
        .app-container {
            transform-origin:top center !important;
            margin-top:0 !important;
            margin-left:0 !important;
            margin-right:0 !important;
        }

        /* One-line platform signature.
           Favicon: 23.4px x 55% = 12.87px (45% reduction). */
        .top-logo-link {
            min-height:14px !important;
            margin-bottom:1px !important;
        }
        .top-logo-banner {
            min-height:14px !important;
            height:14px !important;
            gap:3px !important;
            align-items:center !important;
        }
        .top-logo-banner .city-favicon {
            width:12.87px !important;
            height:12.87px !important;
            flex:0 0 12.87px !important;
        }
        .top-brand-info-link {
            display:inline-flex !important;
            flex-direction:row !important;
            align-items:center !important;
            justify-content:flex-end !important;
            gap:3px !important;
            height:14px !important;
            line-height:14px !important;
            white-space:nowrap !important;
        }
        .top-brand-info-link .powered-prefix {
            display:inline !important;
            font-size:7.4px !important;
            line-height:14px !important;
            font-weight:600 !important;
        }
        .top-brand-info-link .powered-brand-line {
            display:inline-flex !important;
            align-items:center !important;
            gap:0 !important;
            height:14px !important;
            line-height:14px !important;
        }
        .top-brand-info-link .powered-brand-line .city-part,
        .top-brand-info-link .powered-brand-line .market-part {
            font-size:8.7px !important;
            line-height:14px !important;
            font-weight:800 !important;
        }

        /* Premium USE MY VIDEO / PHOTOS text overlay. */
        .cityma-media-caption-overlay {
            position:absolute !important;
            left:7% !important;
            right:7% !important;
            z-index:7 !important;
            text-align:center !important;
            line-height:1.10 !important;
            letter-spacing:.01em !important;
            text-shadow:0 2px 5px rgba(0,0,0,.98), 0 0 2px rgba(0,0,0,.92) !important;
            pointer-events:none !important;
            overflow-wrap:anywhere !important;
        }
        .cityma-media-caption-overlay.is-center {
            top:50% !important;
            bottom:auto !important;
            transform:translateY(-50%) !important;
        }
        .cityma-media-caption-overlay.is-bottom {
            top:auto !important;
            bottom:9% !important;
            transform:none !important;
        }

        /* If a Hotspot has no price, CTA/contact controls simply begin at left. */
        .price-action-row {
            justify-content:flex-start !important;
        }


        /* ==================================================================
           CITYMA DIRECT CLOSED-CITY HEADER · 2026-08-27
           Direct/private ShortsSite: City + section name/value boxes.
           ================================================================== */

        /* Powered by CityMarketeer: icon and all lettering pure white. */
        .top-logo-banner .city-favicon {
            filter:grayscale(1) brightness(0) invert(1) !important;
            opacity:1 !important;
        }
        .top-brand-info-link,
        .top-brand-info-link .powered-prefix,
        .top-brand-info-link .powered-brand-line,
        .top-brand-info-link .powered-brand-line .city-part,
        .top-brand-info-link .powered-brand-line .market-part {
            color:#fff !important;
            opacity:1 !important;
        }

        /* Closed City / direct ShortsSite boxes. */
        body.direct-ad-site .cityma-direct-city-box,
        body.direct-ad-site .cityma-direct-name-box {
            width:100% !important;
            min-height:31px !important;
            margin:2px 0 0 auto !important;
            padding:4px 7px !important;
            display:flex !important;
            align-items:center !important;
            justify-content:space-between !important;
            gap:7px !important;
            border:1px solid rgba(0,229,255,.48) !important;
            border-radius:6px !important;
            background:rgba(0,0,0,.72) !important;
            box-sizing:border-box !important;
            text-align:right !important;
            overflow:hidden !important;
        }

        body.direct-ad-site .cityma-direct-box-label {
            flex:0 0 auto !important;
            margin:0 !important;
            padding:0 !important;
            color:#aeb3b9 !important;
            font-size:8.5px !important;
            line-height:1.08 !important;
            font-weight:700 !important;
            white-space:nowrap !important;
            text-align:right !important;
        }

        body.direct-ad-site .cityma-direct-city-value,
        body.direct-ad-site .cityma-direct-name-value {
            flex:1 1 auto !important;
            min-width:0 !important;
            margin:0 !important;
            padding:0 !important;
            color:#00e5ff !important;
            font-size:13.7px !important;
            line-height:1.08 !important;
            font-weight:900 !important;
            letter-spacing:-.01em !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
            text-align:right !important;
        }

        body.direct-ad-site .cityma-direct-city-value {
            color:#fff !important;
        }

        /* Retire the older unboxed direct-name rules. */
        body.direct-ad-site .cityma-direct-name-block,
        body.direct-ad-site .cityma-direct-name-label {
            display:none !important;
        }


        /* ==================================================================
           CITYMA DIRECT CATEGORY TWO-ROW BOX · 2026-08-27
           Closed City/private ShortsSite:
           label on top, category value below, both right aligned.
           ================================================================== */

        body.direct-ad-site .cityma-direct-name-box {
            min-height:43px !important;
            display:flex !important;
            flex-direction:column !important;
            align-items:flex-end !important;
            justify-content:center !important;
            gap:3px !important;
            padding:5px 7px !important;
            text-align:right !important;
        }

        body.direct-ad-site .cityma-direct-name-box .cityma-direct-box-label {
            width:100% !important;
            text-align:right !important;
            font-size:8.5px !important;
            line-height:1 !important;
        }

        body.direct-ad-site .cityma-direct-name-box .cityma-direct-name-value {
            width:100% !important;
            max-width:100% !important;
            text-align:right !important;
            font-size:13.7px !important;
            line-height:1.08 !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
        }


        /* ==================================================================
           CITYMA DIRECT SHORTSSITE · HEADER ALIGN + MAX PORTRAIT MEDIA
           2026-08-27
           ================================================================== */

        /* Closed City / direct ShortsSite only:
           compress the header so media begins almost immediately below
           the Address / Product Category row. */
        body.direct-ad-site .app-container {
            --header-h:132px !important;
        }
        body.direct-ad-site .viewer-top-bar {
            height:132px !important;
            padding-top:5px !important;
            padding-bottom:2px !important;
        }

        /* One common bottom line for the left Address and right Category box. */
        body.direct-ad-site .top-bar-row {
            height:108px !important;
            min-height:108px !important;
            align-items:stretch !important;
            gap:8px !important;
        }
        body.direct-ad-site .top-left-brand-box,
        body.direct-ad-site .platform-brand-area {
            height:108px !important;
            min-height:108px !important;
            box-sizing:border-box !important;
        }
        body.direct-ad-site .top-left-brand-box {
            top:0 !important;
            display:flex !important;
            flex-direction:column !important;
        }
        body.direct-ad-site .platform-brand-area {
            display:flex !important;
            flex-direction:column !important;
        }

        /* Address and Category bottoms share the exact same baseline. */
        body.direct-ad-site .top-address-box {
            margin-top:auto !important;
            margin-bottom:0 !important;
            align-self:flex-start !important;
        }
        body.direct-ad-site .cityma-direct-name-box {
            margin-top:auto !important;
            margin-bottom:0 !important;
        }

        /* City box: 5% shorter than 31px. */
        body.direct-ad-site .cityma-direct-city-box {
            min-height:29.45px !important;
            height:29.45px !important;
            padding-top:3px !important;
            padding-bottom:3px !important;
        }

        /* Use every pixel between the aligned header bottom and Contact row.
           Portrait video remains proportional and hard-left aligned. */
        body.direct-ad-site .video-wrap {
            top:132px !important;
            bottom:var(--info-h) !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            padding:0 !important;
            margin:0 !important;
            align-items:center !important;
            justify-content:flex-start !important;
            overflow:hidden !important;
        }
        body.direct-ad-site .video-wrap .cityeer-square-frame {
            width:100% !important;
            height:100% !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:0 !important;
            padding:0 !important;
            align-items:center !important;
            justify-content:flex-start !important;
            overflow:hidden !important;
        }
        body.direct-ad-site .cityeer-square-frame.media-portrait > #mediaPlayer {
            width:auto !important;
            height:100% !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:0 !important;
            padding:0 !important;
            align-self:center !important;
            object-fit:contain !important;
            object-position:left center !important;
        }

        /* The media floor meets the Contact/Order row with only the info padding. */
        body.direct-ad-site .info-box {
            padding-top:3px !important;
        }


        /* ==================================================================
           CITYMA DIRECT SHORTSSITE · RIGHT STACK UP + MAX MEDIA
           2026-08-27
           ================================================================== */

        body.direct-ad-site .app-container {
            --header-h:116px !important;
        }
        body.direct-ad-site .viewer-top-bar {
            height:116px !important;
            padding-top:2px !important;
            padding-bottom:0 !important;
        }

        body.direct-ad-site .top-bar-row {
            height:94px !important;
            min-height:94px !important;
            align-items:stretch !important;
            gap:7px !important;
        }
        body.direct-ad-site .top-left-brand-box,
        body.direct-ad-site .platform-brand-area {
            height:94px !important;
            min-height:94px !important;
        }

        /* Move the full right-side stack upward. */
        body.direct-ad-site .platform-brand-area {
            position:relative !important;
            top:-8px !important;
            gap:1px !important;
            justify-content:flex-start !important;
        }
        body.direct-ad-site .adid-search-wrap {
            margin-top:0 !important;
            margin-bottom:0 !important;
        }

        /* Compact City and Category boxes. */
        body.direct-ad-site .cityma-direct-city-box {
            min-height:27px !important;
            height:27px !important;
            margin-top:1px !important;
            margin-bottom:0 !important;
            padding-top:2px !important;
            padding-bottom:2px !important;
        }
        body.direct-ad-site .cityma-direct-name-box {
            min-height:38px !important;
            height:38px !important;
            margin-top:1px !important;
            margin-bottom:0 !important;
            padding:3px 6px !important;
            gap:2px !important;
        }
        body.direct-ad-site .cityma-direct-name-box .cityma-direct-box-label {
            line-height:1 !important;
        }
        body.direct-ad-site .cityma-direct-name-box .cityma-direct-name-value {
            line-height:1.03 !important;
        }

        /* Keep the address at the bottom of the compact header. */
        body.direct-ad-site .top-address-box {
            margin-top:auto !important;
            margin-bottom:0 !important;
        }

        /* Maximize portrait media between header and CTA/info area. */
        body.direct-ad-site .video-wrap {
            top:116px !important;
            bottom:var(--info-h) !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            padding:0 !important;
            margin:0 !important;
            align-items:center !important;
            justify-content:flex-start !important;
            overflow:hidden !important;
        }
        body.direct-ad-site .video-wrap .cityeer-square-frame {
            width:100% !important;
            height:100% !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:0 !important;
            padding:0 !important;
            display:flex !important;
            align-items:center !important;
            justify-content:flex-start !important;
        }
        body.direct-ad-site .cityeer-square-frame.media-portrait > #mediaPlayer {
            width:auto !important;
            height:100% !important;
            max-width:100% !important;
            max-height:100% !important;
            margin:0 !important;
            padding:0 !important;
            object-fit:contain !important;
            object-position:left center !important;
            align-self:center !important;
        }

        body.direct-ad-site .info-box {
            padding-top:1px !important;
        }


        /* ================================================================
           CITYMA SEARCH DISCOVERY ENGINE · crawlable link compatibility
           No visual geometry changes; anchors inherit the existing controls.
           ================================================================ */
        a.cityma-dropdown-item {
            text-decoration:none !important;
            box-sizing:border-box !important;
        }
        a.market-section-text {
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            text-decoration:none !important;
            box-sizing:border-box !important;
        }


        /* ==================================================================
           CITYMA DIRECT HEADER · POWERED-BY CLEAR LAYER
           2026-08-27
           Keep the compact direct header, but prevent the ADNO stack from
           covering the Powered by CityMarketeer brand.
           ================================================================== */
        body.direct-ad-site .top-logo-link {
            position:relative !important;
            z-index:320 !important;
            min-height:23px !important;
            margin-bottom:2px !important;
            transform:translateY(-2px) !important;
            pointer-events:auto !important;
        }
        body.direct-ad-site .top-logo-banner,
        body.direct-ad-site .top-favicon-auth,
        body.direct-ad-site .top-brand-info-link {
            position:relative !important;
            z-index:321 !important;
        }
        body.direct-ad-site .top-brand-info-link {
            opacity:1 !important;
        }

        /* The prior -8px lift was slightly entering the Powered-by row.
           Keep the stack high, but leave a clean visual separation. */
        body.direct-ad-site .platform-brand-area {
            top:-3px !important;
            z-index:180 !important;
        }
        body.direct-ad-site .adid-search-wrap {
            position:relative !important;
            z-index:181 !important;
        }


        /* ==================================================================
           CITYMA MEDIA/INFO FINAL BALANCE · 2026-08-29
           Progress line sits on the media/ORDER boundary. AI rests directly
           above the six-menu navigation. Title/description always layer in
           front so their lower lines are not visually covered by the AI box.
           ================================================================== */
        .app-container {
            /* 195px -> 184px: move the red progress boundary lower and
               open more vertical room for original Shorts portrait video. */
            --info-h:184px !important;
        }

        .info-box {
            padding-top:0 !important;
        }
        .info-inner {
            position:relative !important;
            height:100% !important;
            min-height:0 !important;
            gap:2px !important;
        }

        /* Video progress line: directly above the price / ORDER NOW row. */
        .info-box .progress-bar-wrap {
            position:absolute !important;
            top:0 !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            margin:0 !important;
            transform:none !important;
            z-index:70 !important;
        }
        .info-box .progress-bar-inline {
            height:2px !important;
        }
        .info-box .price-action-row {
            position:relative !important;
            z-index:40 !important;
            flex:0 0 auto !important;
            margin-top:6px !important;
        }

        /* Keep title and description visually in front of the AI composer. */
        .info-box .company-name,
        .info-box .title-text,
        .info-box .desc-bg {
            position:relative !important;
            z-index:50 !important;
            flex:0 0 auto !important;
        }
        .info-box .title-text {
            padding-bottom:4px !important;
            margin-bottom:2px !important;
        }
        .info-box .desc-bg {
            padding-bottom:3px !important;
            margin-bottom:1px !important;
        }

        /* AI composer: use the freed floor and sit directly above bottom menu. */
        .info-box .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            z-index:20 !important;
            flex:0 0 auto !important;
            margin:auto -10px 0 !important;
        }

        /* Send button: give it a little breathing room from the right edge. */
        .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-send {
            margin-right:7px !important;
        }

        /* Left AI sparkle: taller / more vertical as requested. */
        .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-service-icon {
            width:22px !important;
            height:35px !important;
            min-width:22px !important;
            flex:0 0 22px !important;
            object-fit:fill !important;
            align-self:flex-start !important;
            margin-top:0 !important;
        }


        /* ==================================================================
           CITYMA AI FRONT + OPEN CITY HEIGHT ALIGN · 2026-08-29
           Keep the current balance. Show the compact AI box completely in
           front and shorten ONLY the Open City dropdown by 15%.
           ================================================================== */

        /* Compact Customer Service box: preserve its full rounded bottom edge
           immediately above the six-menu bar and keep it on the front layer. */
        .info-box {
            overflow:visible !important;
            z-index:80 !important;
        }
        .info-box .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            z-index:120 !important;
            transform:translateY(-2px) !important;
        }

        /* Open City box only: 30px -> 25.5px (15% shorter).
           Category and section-name rows remain unchanged. */
        body.cityma-marketplace .platform-brand-area > .cityma-open-city-wrap {
            min-height:25.5px !important;
            height:25.5px !important;
            padding-top:1.5px !important;
            padding-bottom:1.5px !important;
        }

        /* Two-line location kicker requested by user: We / are in. */
        body.cityma-marketplace .cityma-open-city-wrap .cityma-we-are-in {
            display:flex !important;
            flex-direction:column !important;
            align-items:flex-start !important;
            justify-content:center !important;
            gap:0 !important;
            line-height:.92 !important;
            white-space:nowrap !important;
        }
        body.cityma-marketplace .cityma-open-city-wrap .cityma-we-are-in > span {
            display:block !important;
        }


        /* ==================================================================
           CITYMA MEDIA WIDTH-100 MASTER + HEADER/AI MICRO ADJUSTMENTS
           2026-08-29
           - Every media orientation uses 100% ShortsSite width as the base.
           - Portrait: center crop vertically with soft top/bottom gradients.
           - Landscape: full width, true vertical center.
           - Square: full width, bottom aligned to the progress/action floor,
             with a soft top gradient from the header side.
           ================================================================== */

        /* Customer Service bar: about 5% lower, but above the nav stacking layer
           so the rounded bottom edge remains fully visible. */
        .info-box {
            z-index:1100 !important;
            overflow:visible !important;
        }
        .info-box .cityma-ai-inline:not(.is-expanded) {
            z-index:1200 !important;
            transform:translateY(4px) !important;
        }

        /* Powered-by row: move visually upward about 10% of its compact height. */
        .top-logo-link {
            transform:translateY(-2px) !important;
        }
        body.direct-ad-site .top-logo-link {
            transform:translateY(-4px) !important;
        }

        /* GO control: about 10% larger than the current compact 23x17 button. */
        .app-container .adid-search-btn {
            width:25.3px !important;
            min-width:25.3px !important;
            height:18.7px !important;
            font-size:7.7px !important;
            line-height:17px !important;
            border-radius:4.4px !important;
        }

        /* Media frame itself remains exactly between the header floor and the
           red progress/action boundary. */
        body .app-container .video-wrap,
        body.direct-ad-site .app-container .video-wrap,
        body.cityma-marketplace .app-container .video-wrap {
            align-items:stretch !important;
            justify-content:center !important;
            overflow:hidden !important;
            background:#000 !important;
        }
        body .app-container .video-wrap .cityeer-square-frame {
            position:relative !important;
            width:100% !important;
            max-width:100% !important;
            height:100% !important;
            max-height:100% !important;
            display:block !important;
            overflow:hidden !important;
            background:#000 !important;
            isolation:isolate !important;
        }

        /* Reset the media element to a width-first master. Orientation rules
           below decide only the vertical placement. */
        body .app-container .cityeer-square-frame > #mediaPlayer {
            position:absolute !important;
            left:0 !important;
            right:auto !important;
            width:100% !important;
            min-width:100% !important;
            max-width:none !important;
            max-height:none !important;
            margin:0 !important;
            object-fit:contain !important;
            object-position:center center !important;
            background:#000 !important;
            z-index:1 !important;
        }

        /* Vertical Shorts: width 100%. The extra height is cropped equally
           above and below; the bright center remains between the header and
           the red progress line. */
        body .app-container .cityeer-square-frame.media-portrait > #mediaPlayer {
            top:50% !important;
            bottom:auto !important;
            width:100% !important;
            height:auto !important;
            min-width:100% !important;
            max-width:none !important;
            max-height:none !important;
            transform:translateY(-50%) !important;
            object-position:center center !important;
        }
        body .app-container .cityeer-square-frame.media-portrait > iframe#mediaPlayer {
            aspect-ratio:9 / 16 !important;
        }

        /* Wide video: width 100%, natural ratio, vertically centered. */
        body .app-container .cityeer-square-frame.media-landscape > #mediaPlayer {
            top:50% !important;
            bottom:auto !important;
            width:100% !important;
            height:auto !important;
            min-width:100% !important;
            max-width:none !important;
            max-height:none !important;
            transform:translateY(-50%) !important;
            object-position:center center !important;
        }
        body .app-container .cityeer-square-frame.media-landscape > iframe#mediaPlayer {
            aspect-ratio:16 / 9 !important;
        }

        /* Square: width 100% and bottom aligned directly toward the red
           progress/action boundary. */
        body .app-container .cityeer-square-frame.media-square > #mediaPlayer {
            top:auto !important;
            bottom:0 !important;
            width:100% !important;
            height:auto !important;
            min-width:100% !important;
            max-width:none !important;
            max-height:none !important;
            transform:none !important;
            object-position:center bottom !important;
        }
        body .app-container .cityeer-square-frame.media-square > iframe#mediaPlayer {
            aspect-ratio:1 / 1 !important;
        }

        /* Gradient masks are visual only and never block media taps/captions. */
        body .app-container .cityeer-square-frame::before,
        body .app-container .cityeer-square-frame::after {
            content:"";
            position:absolute !important;
            left:0 !important;
            right:0 !important;
            pointer-events:none !important;
            opacity:0 !important;
            z-index:4 !important;
        }
        body .app-container .cityeer-square-frame.media-portrait::before {
            top:0 !important;
            height:42% !important;
            opacity:1 !important;
            background:linear-gradient(to bottom,
                rgba(0,0,0,.24) 0%,
                rgba(0,0,0,.17) 18%,
                rgba(0,0,0,.10) 40%,
                rgba(0,0,0,.05) 63%,
                rgba(0,0,0,.02) 80%,
                rgba(0,0,0,0) 100%) !important;
        }
        body .app-container .cityeer-square-frame.media-portrait::after {
            bottom:0 !important;
            height:10% !important;
            opacity:1 !important;
            background:linear-gradient(to top,
                rgba(0,0,0,.28) 0%,
                rgba(0,0,0,.12) 45%,
                rgba(0,0,0,0) 100%) !important;
        }
        body .app-container .cityeer-square-frame.media-square::before {
            top:0 !important;
            height:24% !important;
            opacity:1 !important;
            background:linear-gradient(to bottom, rgba(0,0,0,.96) 0%, rgba(0,0,0,.48) 52%, rgba(0,0,0,0) 100%) !important;
        }
        body .app-container .cityeer-square-frame.media-square::after {
            opacity:0 !important;
        }

        /* Keep advertiser text overlays above the new gradient masks. */
        .cityma-media-caption-overlay {
            z-index:7 !important;
        }

        /* ==================================================================
           CITYMA PORTRAIT SHORTS FULL-SCREEN BACKDROP · 2026-08-29
           Portrait/Shorts media now fills the entire phone viewer behind the
           header and lower customer-information layer. The top is intentionally
           uncovered. A long bottom-to-title black gradient keeps the lower
           price/title/description/AI text readable while preserving as much of
           the original Shorts frame as possible. Landscape and square media are
           unchanged.
           ================================================================== */
        body.cityma-media-portrait .video-wrap {
            top:0 !important;
            bottom:0 !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:auto !important;
            padding:0 !important;
            margin:0 !important;
            overflow:hidden !important;
            background:#000 !important;
            z-index:1 !important;
        }
        body.cityma-media-portrait .video-wrap .cityeer-square-frame {
            width:100% !important;
            height:100% !important;
            max-width:none !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            overflow:hidden !important;
            background:#000 !important;
        }
        body.cityma-media-portrait .cityeer-square-frame.media-portrait > #mediaPlayer {
            position:absolute !important;
            inset:0 !important;
            width:100% !important;
            height:100% !important;
            min-width:100% !important;
            min-height:100% !important;
            max-width:none !important;
            max-height:none !important;
            transform:none !important;
            object-fit:cover !important;
            object-position:center center !important;
            background:#000 !important;
        }
        body.cityma-media-portrait .cityeer-square-frame.media-portrait > iframe#mediaPlayer {
            aspect-ratio:auto !important;
        }

        /* No top dark mask for portrait Shorts: expose the original image all
           the way to the physical top of the phone. */
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::before {
            opacity:0 !important;
            height:0 !important;
            background:none !important;
        }

        /* One continuous lower scrim. It begins softly around the title zone
           and becomes nearly solid behind description + Customer Service. */
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::after {
            top:auto !important;
            bottom:0 !important;
            height:54% !important;
            opacity:1 !important;
            background:linear-gradient(to top,
                rgba(0,0,0,.98) 0%,
                rgba(0,0,0,.94) 24%,
                rgba(0,0,0,.78) 46%,
                rgba(0,0,0,.46) 67%,
                rgba(0,0,0,.18) 84%,
                rgba(0,0,0,0) 100%) !important;
            z-index:5 !important;
        }

        /* Let the full-screen video/gradient show through the lower information
           area; its text and controls stay above the video. */
        body.cityma-media-portrait .info-box {
            background:transparent !important;
            z-index:1100 !important;
        }
        body.cityma-media-portrait .info-box .price-action-row,
        body.cityma-media-portrait .info-box .company-name,
        body.cityma-media-portrait .info-box .title-text,
        body.cityma-media-portrait .info-box .desc-bg,
        body.cityma-media-portrait .info-box .cityma-ai-inline,
        body.cityma-media-portrait .info-box .progress-bar-wrap {
            position:relative !important;
            z-index:1200 !important;
        }

        /* ==================================================================
           CITYMA PORTRAIT SHORTS · CAPTION / AI VISIBILITY REFINEMENT
           2026-08-29
           - Portrait-only "bottom" captions are lifted into the video center
             so they never collide with the price/title/description layer.
           - The lower scrim begins later, around the title zone, preserving
             more of the original Shorts image.
           - Compact Customer Service is lifted just enough to show its entire
             rounded white box above the six-menu navigation.
           ================================================================== */

        /* Portrait only: a stored BOTTOM caption is displayed in the central
           video-safe zone. Landscape and square captions keep their existing
           center/bottom behavior. */
        body.cityma-media-portrait .cityma-media-caption-overlay.is-bottom {
            top:58% !important;
            bottom:auto !important;
            transform:translateY(-50%) !important;
            left:8% !important;
            right:8% !important;
            z-index:900 !important;
        }

        /* The lower readability gradient starts later, near the lower text
           area instead of darkening half of the Shorts frame. */
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::after {
            top:auto !important;
            bottom:0 !important;
            height:40% !important;
            opacity:1 !important;
            background:linear-gradient(to top,
                rgba(0,0,0,.98) 0%,
                rgba(0,0,0,.93) 26%,
                rgba(0,0,0,.74) 48%,
                rgba(0,0,0,.38) 70%,
                rgba(0,0,0,.12) 87%,
                rgba(0,0,0,0) 100%) !important;
        }

        /* Show the complete compact Customer Service composer. Keep it above
           the bottom navigation and on the front layer without increasing the
           info height/progress boundary. */
        body.cityma-media-portrait .info-box {
            overflow:visible !important;
        }
        body.cityma-media-portrait .info-box .cityma-ai-inline:not(.is-expanded) {
            z-index:1500 !important;
            transform:translateY(-8px) !important;
            margin-bottom:0 !important;
            overflow:visible !important;
        }
        body.cityma-media-portrait .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer {
            overflow:visible !important;
        }

        /* ==================================================================
           CITYMA PORTRAIT CAPTION + INFO SPACING + DIRECT POWERED POSITION
           2026-08-29
           ================================================================== */

        /* Portrait Shorts only: lower the converted bottom caption slightly
           while keeping it above the lower information stack. */
        body.cityma-media-portrait .cityma-media-caption-overlay.is-bottom {
            top:61% !important;
        }

        /* Tighten the two-line title by 10% and reduce the vertical gaps
           among Process Type -> Title -> Description by 5% to preserve more
           room for the Customer Service composer below. */
        .info-box .company-name {
            margin-bottom:2.85px !important;
        }
        .info-box .title-text {
            line-height:1.0368 !important;
            padding-bottom:3.8px !important;
            margin-bottom:1.9px !important;
        }
        .info-box .desc-bg {
            padding-bottom:2.85px !important;
            margin-bottom:.95px !important;
        }

        /* Closed/direct advertiser ShortsSite only: lower Powered by about
           7% of its compact 23px header line. Open City keeps its position. */
        body.direct-ad-site .top-logo-link {
            transform:translateY(-2.4px) !important;
        }


        /* ==================================================================
           CITYMA OPEN/CLOSED TOP-STACK COMPACT + CUSTOMER SERVICE DOWN
           2026-08-29
           Open City: reduce vertical gaps 15%, align the right stack upward.
           Closed/Direct: reduce vertical gaps 12%, align the right stack upward.
           Customer Service: move about 15% lower while preserving front layer.
           ================================================================== */

        /* OPEN CITY — compact the Powered by -> ADNO -> City -> Category ->
           Section stack without changing the box font sizes or widths. */
        body.cityma-marketplace .top-logo-link {
            margin-bottom:.85px !important; /* 1px -> 15% tighter */
        }
        body.cityma-marketplace .top-bar-row {
            align-items:flex-start !important;
            margin-top:0 !important;
        }
        body.cityma-marketplace .platform-brand-area {
            justify-content:flex-start !important;
            align-self:flex-start !important;
            gap:1.7px !important; /* 2px -> 15% tighter */
        }
        body.cityma-marketplace .platform-brand-area > .adid-search-wrap,
        body.cityma-marketplace .platform-brand-area > .cityma-open-city-wrap,
        body.cityma-marketplace .platform-brand-area > .cityma-category-wrap,
        body.cityma-marketplace .platform-brand-area > .category-under-row {
            margin-top:0 !important;
            margin-bottom:0 !important;
        }
        body.cityma-marketplace .category-under-row {
            gap:0 !important;
        }

        /* CLOSED / DIRECT SHORTSSITE — same compression at 12% while keeping
           the previously approved Powered-by vertical position. */
        body.direct-ad-site .top-logo-link {
            margin-bottom:1.76px !important; /* 2px -> 12% tighter */
        }
        body.direct-ad-site .top-bar-row {
            align-items:flex-start !important;
            margin-top:0 !important;
        }
        body.direct-ad-site .platform-brand-area {
            justify-content:flex-start !important;
            align-self:flex-start !important;
            gap:.88px !important; /* compact current 1px stack by 12% */
        }
        body.direct-ad-site .platform-brand-area > .adid-search-wrap,
        body.direct-ad-site .platform-brand-area > .cityma-direct-city-box,
        body.direct-ad-site .platform-brand-area > .cityma-direct-name-box,
        body.direct-ad-site .platform-brand-area > .direct-category-under-row {
            margin-top:0 !important;
            margin-bottom:0 !important;
        }
        body.direct-ad-site .direct-category-under-row {
            gap:0 !important;
        }


        /* ==================================================================
           CITYMA FINAL LAYER FIX + DIRECT POWERED DOWN 5%
           2026-08-29
           - Allow the compact Customer Service box to escape the viewer crop
             and sit above the bottom navigation as the true top layer.
           - Closed/Direct only: lower Powered by about 5% from its current
             compact line position. Open City remains unchanged.
           ================================================================== */

        /* The viewer used overflow:hidden and z-index:1, which can clip a
           child even when the child itself has a very high z-index. Portrait
           Shorts therefore let only the viewer layer escape; the media frame
           itself remains overflow:hidden, so the video still crops normally. */
        body.cityma-media-portrait .viewer {
            overflow:visible !important;
            z-index:2000 !important;
        }
        body.cityma-media-portrait .video-wrap,
        body.cityma-media-portrait .cityeer-square-frame {
            overflow:hidden !important;
        }
        body.cityma-media-portrait .info-box {
            overflow:visible !important;
            z-index:2100 !important;
        }
        body.cityma-media-portrait .info-box .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            z-index:2300 !important;
            overflow:visible !important;
        }
        body.cityma-media-portrait .bottom-nav {
            position:relative !important;
            z-index:100 !important;
        }

        /* Closed / Direct only. Current approved position is -2.4px.
           Move it downward by about 5% of the compact ~23px line (~1.15px). */
        body.direct-ad-site .top-logo-link {
            transform:translateY(-1.25px) !important;
        }

        /* ==================================================================
           CITYMA DIRECT FINAL MICRO TUNE · 2026-08-29
           - Direct/individual ShortsSite only: City -> We / are in.
           - Direct/individual only: Powered by moves 10% lower.
           Open City remains unchanged.
           ================================================================== */
        body.direct-ad-site .cityma-direct-city-box .cityma-direct-we-are-in {
            display:flex !important;
            flex-direction:column !important;
            align-items:flex-start !important;
            justify-content:center !important;
            gap:0 !important;
            line-height:.90 !important;
            white-space:nowrap !important;
        }
        body.direct-ad-site .cityma-direct-city-box .cityma-direct-we-are-in > span {
            display:block !important;
        }

        /* Current approved direct position was -1.25px. Move it down by
           about 10% of the compact ~23px Powered-by line (~2.3px). */
        body.direct-ad-site .top-logo-link {
            transform:translateY(1.05px) !important;
        }


        /* ==================================================================
           CITYMA FINAL TOP SHORTS SCRIM + ALL-SECTION CUSTOMER SERVICE FRONT
           2026-08-29
           - Portrait Shorts only: softly cover the original video's busy top
             text from the address/header floor up to the physical ceiling.
           - SERVICE / PRODUCT / HOTSPOT, Open City + Direct/Closed: keep the
             compact Customer Service box above the bottom navigation.
           ================================================================== */

        /* Portrait Shorts: transparent at the bottom of the header/address
           zone, increasingly dark toward the physical ceiling. Header boxes
           and CityMarketeer text stay on top because viewer-top-bar is z=100. */
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::before {
            top:0 !important;
            bottom:auto !important;
            height:calc(var(--header-h) + 8px) !important;
            opacity:1 !important;
            z-index:6 !important;
            background:linear-gradient(to bottom,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.73) 24%,
                rgba(0,0,0,.56) 50%,
                rgba(0,0,0,.34) 72%,
                rgba(0,0,0,.14) 88%,
                rgba(0,0,0,0) 100%) !important;
            pointer-events:none !important;
        }

        /* Customer Service front-layer rule is intentionally NOT limited to
           portrait media. This makes it identical for SERVICE / PRODUCT /
           HOTSPOT and for both Open City and Direct/Closed ShortsSites. */
        body.cityma-marketplace .viewer,
        body.direct-ad-site .viewer {
            overflow:visible !important;
            z-index:2000 !important;
        }
        body.cityma-marketplace .video-wrap,
        body.direct-ad-site .video-wrap,
        body.cityma-marketplace .cityeer-square-frame,
        body.direct-ad-site .cityeer-square-frame {
            overflow:hidden !important;
        }
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box {
            overflow:visible !important;
            z-index:2100 !important;
        }
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            z-index:2600 !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer,
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer {
            overflow:visible !important;
        }
        body.cityma-marketplace .bottom-nav,
        body.direct-ad-site .bottom-nav {
            position:relative !important;
            z-index:100 !important;
        }

        /* ==================================================================
           CITYMA FINAL LOWER STACK CLEARANCE · 2026-08-29
           Open City + Direct/Closed, SERVICE / PRODUCT / HOTSPOT:
           move the complete lower information panel slightly upward as ONE
           block. This includes the red video progress line, action/price,
           process line, title, description and Customer Service composer.
           Bottom navigation itself is not moved.
           ================================================================== */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box {
            bottom:5px !important;
        }



        /* ==================================================================
           CITYMA ONE VIEW · UNIFIED LOWER GEOMETRY · 2026-08-29
           One physical layout for PRODUCT / SERVICE / HOTSPOT / future
           sections, regardless of portrait / landscape / square media.

           Root cause removed here: the previous -8px lower-stack lift was
           portrait-only. A landscape HOTSPOT therefore sat lower even though
           it used the same index.php. All media shapes now use the SAME lift.
           CTA rows/buttons also reserve the SAME physical height so ORDER,
           CONTACT, COUPON, BOOK, APPLY and future actions cannot move the
           title/description/Customer Service stack vertically.
           ================================================================== */

        body.cityma-marketplace .info-box .price-action-row,
        body.cityma-marketplace .info-box .company-name,
        body.cityma-marketplace .info-box .title-text,
        body.cityma-marketplace .info-box .desc-bg,
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site .info-box .price-action-row,
        body.direct-ad-site .info-box .company-name,
        body.direct-ad-site .info-box .title-text,
        body.direct-ad-site .info-box .desc-bg,
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            top:-8px !important;
        }

        /* One fixed action row for every section/action type. */
        body.cityma-marketplace .info-box .price-action-row,
        body.direct-ad-site .info-box .price-action-row {
            height:34px !important;
            min-height:34px !important;
            max-height:34px !important;
            box-sizing:border-box !important;
            align-items:center !important;
            overflow:visible !important;
        }

        body.cityma-marketplace .info-box .action-btn-inline,
        body.direct-ad-site .info-box .action-btn-inline {
            height:34px !important;
            min-height:34px !important;
            max-height:34px !important;
            box-sizing:border-box !important;
            align-items:center !important;
        }

        body.cityma-marketplace .info-box .price-tag,
        body.direct-ad-site .info-box .price-tag {
            height:34px !important;
            min-height:34px !important;
            max-height:34px !important;
            box-sizing:border-box !important;
            align-items:center !important;
            line-height:1 !important;
        }

        body.cityma-marketplace .info-box .inline-contact-actions,
        body.direct-ad-site .info-box .inline-contact-actions {
            height:34px !important;
            min-height:34px !important;
            max-height:34px !important;
            align-items:center !important;
        }

        /* ==================================================================
           CITYMA ONE VIEW ENGINE · ALL SECTIONS · 2026-08-29
           PRODUCT / SERVICE / HOTSPOT and Open/Direct use the SAME media
           overlay layer. Text is always in front of the media/gradient.
           ================================================================== */
        .cityma-media-caption-overlay {
            z-index:1600 !important;
            max-width:86% !important;
            margin-left:auto !important;
            margin-right:auto !important;
        }
        .cityma-media-caption-overlay.is-top {
            top:9% !important;
            bottom:auto !important;
            transform:none !important;
        }
        .cityma-media-caption-overlay.is-bottom {
            top:auto !important;
            bottom:9% !important;
            transform:none !important;
        }
        /* Landscape video is contained in the square media stage; move both
           lines inward so Top/Bottom sit on the actual 16:9 picture, not in
           the black letterbox area. */
        .cityeer-square-frame.media-landscape .cityma-media-caption-overlay.is-top {
            top:25% !important;
        }
        .cityeer-square-frame.media-landscape .cityma-media-caption-overlay.is-bottom {
            top:auto !important;
            bottom:25% !important;
        }
        /* Portrait Shorts fills the viewer behind the header/info stack.
           Keep both text lines in safe visible video zones. */
        /* CITYMA-908 R83 · Lower media subtitle: move exactly 0.5 CSS inch
           (48 CSS px) DOWN on square media. Landscape and portrait use their
           tuned transforms below, also advanced by the same 48px. */
        body.cityma-media-square.cityma-media-fit-ready .cityma-media-caption-overlay.is-bottom {
            transform:translateY(48px) !important;
        }

        body.cityma-media-portrait .cityma-media-caption-overlay.is-top {
            top:28% !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-portrait .cityma-media-caption-overlay.is-bottom {
            top:61% !important;
            bottom:auto !important;
            transform:translateY(-50%) !important;
        }


        /* ==================================================================
           CITYMA 3-MEDIA FIXED GEOMETRY · 2026-08-29
           ONE VIEW / ONE LOWER STACK

           The media SHAPE may change, but the customer-information geometry
           never changes. PRODUCT / SERVICE / HOTSPOT / future CAREER use the
           exact same lower coordinates in Open City and Direct/Closed mode.

           Fixed anchors:
           1) ceiling = 0
           2) header floor = --header-h
           3) progress/action floor = top of --info-h
           4) Customer Service = fixed last row of --info-h
           5) bottom navigation = --nav-h

           Only the media fitting + caption safe-zones vary by aspect ratio.
           ================================================================== */

        /* ONE fixed lower information grid for every section and media shape.
           184px total: progress 2 + CTA 38 + process 18 + title 40 +
           description 30 + Customer Service 56 = 184. */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box {
            height:184px !important;
            min-height:184px !important;
            max-height:184px !important;
            bottom:5px !important;
            padding:0 10px !important;
            box-sizing:border-box !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .info-inner,
        body.direct-ad-site .info-box .info-inner {
            display:grid !important;
            grid-template-rows:2px 38px 18px 40px 30px 56px !important;
            gap:0 !important;
            height:184px !important;
            min-height:184px !important;
            max-height:184px !important;
            position:relative !important;
            overflow:visible !important;
        }

        /* Remove all media-specific lower-stack nudges. */
        body.cityma-marketplace .info-box .progress-bar-wrap,
        body.cityma-marketplace .info-box .price-action-row,
        body.cityma-marketplace .info-box .company-name,
        body.cityma-marketplace .info-box .title-text,
        body.cityma-marketplace .info-box .desc-bg,
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site .info-box .progress-bar-wrap,
        body.direct-ad-site .info-box .price-action-row,
        body.direct-ad-site .info-box .company-name,
        body.direct-ad-site .info-box .title-text,
        body.direct-ad-site .info-box .desc-bg,
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) {
            position:relative !important;
            top:auto !important;
            bottom:auto !important;
            transform:none !important;
            margin:0 !important;
            min-height:0 !important;
            box-sizing:border-box !important;
        }

        body.cityma-marketplace .info-box .progress-bar-wrap,
        body.direct-ad-site .info-box .progress-bar-wrap {
            grid-row:1 !important;
            align-self:start !important;
            width:100% !important;
            height:2px !important;
            left:auto !important;
            right:auto !important;
        }
        body.cityma-marketplace .info-box .price-action-row,
        body.direct-ad-site .info-box .price-action-row {
            grid-row:2 !important;
            height:38px !important;
            min-height:38px !important;
            max-height:38px !important;
            align-self:center !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .company-name,
        body.direct-ad-site .info-box .company-name {
            grid-row:3 !important;
            height:18px !important;
            min-height:18px !important;
            max-height:18px !important;
            line-height:18px !important;
            overflow:hidden !important;
            white-space:nowrap !important;
            text-overflow:ellipsis !important;
        }
        body.cityma-marketplace .info-box .title-text,
        body.direct-ad-site .info-box .title-text {
            grid-row:4 !important;
            height:40px !important;
            min-height:40px !important;
            max-height:40px !important;
            margin:0 !important;
            padding:1px 0 0 !important;
            line-height:1.10 !important;
            -webkit-line-clamp:2 !important;
            overflow:hidden !important;
        }
        body.cityma-marketplace .info-box .desc-bg,
        body.direct-ad-site .info-box .desc-bg {
            grid-row:5 !important;
            height:30px !important;
            min-height:30px !important;
            max-height:30px !important;
            margin:0 !important;
            padding:1px 0 0 !important;
            line-height:1.12 !important;
            -webkit-line-clamp:2 !important;
            overflow:hidden !important;
        }
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) {
            grid-row:6 !important;
            align-self:end !important;
            width:calc(100% + 20px) !important;
            height:56px !important;
            min-height:56px !important;
            max-height:56px !important;
            margin:0 -10px !important;
            z-index:2600 !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer,
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer {
            height:54px !important;
            min-height:54px !important;
            max-height:54px !important;
        }

        /* The red progress line is the universal media/info boundary for
           landscape and square. Portrait may continue behind the information
           layer, but the information coordinates remain identical. */
        body.cityma-media-landscape .video-wrap,
        body.cityma-media-square .video-wrap {
            top:var(--header-h) !important;
            bottom:calc(184px + 5px) !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:auto !important;
            padding:0 !important;
            margin:0 !important;
            overflow:hidden !important;
            background:#000 !important;
        }
        body.cityma-media-landscape .video-wrap .cityeer-square-frame,
        body.cityma-media-square .video-wrap .cityeer-square-frame {
            width:100% !important;
            max-width:100% !important;
            height:100% !important;
            max-height:100% !important;
            margin:0 !important;
            padding:0 !important;
            overflow:hidden !important;
            background:#000 !important;
        }

        /* LANDSCAPE: left-to-right is always 100%. Keep the true 16:9 frame
           vertically centered inside the fixed media stage. */
        body.cityma-media-landscape .cityeer-square-frame.media-landscape > #mediaPlayer {
            position:absolute !important;
            left:0 !important;
            top:50% !important;
            width:100% !important;
            height:auto !important;
            max-width:none !important;
            max-height:none !important;
            transform:translateY(-50%) !important;
            object-fit:contain !important;
            object-position:center center !important;
        }

        /* SQUARE: width is always 100%; use the progress line as the bottom
           anchor. Any unavoidable crop happens toward the top. */
        body.cityma-media-square .cityeer-square-frame.media-square > #mediaPlayer {
            position:absolute !important;
            left:0 !important;
            right:0 !important;
            top:auto !important;
            bottom:0 !important;
            width:100% !important;
            height:auto !important;
            max-width:none !important;
            max-height:none !important;
            transform:none !important;
            object-fit:contain !important;
            object-position:center bottom !important;
        }

        /* PORTRAIT SHORTS: width 100%, physical ceiling is the top anchor.
           The video is the full-view backdrop through the title/description
           area, while the fixed Customer Service row remains above navigation.
           This maximizes the original Shorts image without moving any lower UI. */
        body.cityma-media-portrait .video-wrap {
            top:0 !important;
            bottom:0 !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:auto !important;
            padding:0 !important;
            margin:0 !important;
            overflow:hidden !important;
            background:#000 !important;
        }
        body.cityma-media-portrait .cityeer-square-frame.media-portrait > #mediaPlayer {
            position:absolute !important;
            inset:0 !important;
            width:100% !important;
            height:100% !important;
            min-width:100% !important;
            min-height:100% !important;
            max-width:none !important;
            max-height:none !important;
            transform:none !important;
            object-fit:cover !important;
            object-position:center center !important;
        }

        /* Portrait top protection: from physical ceiling to header/address
           floor. Busy text already burned into Shorts is softened underneath
           the CityMarketeer header. */
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::before {
            top:0 !important;
            height:calc(var(--header-h) + 8px) !important;
            opacity:1 !important;
            background:linear-gradient(to bottom,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.68) 28%,
                rgba(0,0,0,.46) 55%,
                rgba(0,0,0,.22) 78%,
                rgba(0,0,0,0) 100%) !important;
        }

        /* Portrait lower readability: begin softly before the fixed title zone
           and become dark behind title/description. Customer Service itself is
           opaque and therefore never depends on the video shape. */
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::after {
            bottom:0 !important;
            /* Lower scrim begins slightly later so more of the video remains visible. */
            height:42% !important;
            opacity:1 !important;
            background:linear-gradient(to top,
                rgba(0,0,0,.98) 0%,
                rgba(0,0,0,.92) 28%,
                rgba(0,0,0,.66) 54%,
                rgba(0,0,0,.30) 76%,
                rgba(0,0,0,0) 100%) !important;
        }

        /* CAPTION SAFE ZONES: only caption coordinates depend on media shape.
           All caption text remains above video and gradient layers. */
        .cityma-media-caption-overlay {
            z-index:3000 !important;
            left:7% !important;
            right:7% !important;
            max-width:86% !important;
        }
        /* --------------------------------------------------------------
           CAPTION SAFE ZONES BY MEDIA SHAPE
           Only caption coordinates vary. The lower information stack
           remains identical for every section and every media ratio.
           -------------------------------------------------------------- */

        /* LANDSCAPE 16:9
           The video is width 100% and vertically centered in the media stage.
           In a square-equivalent stage a 16:9 picture occupies 56.25% height,
           leaving about 21.875% above/below. Put captions about 12% inside
           the real picture itself:
             21.875% + (56.25% × 12%) ≈ 28.625%
           This makes the position depend on the actual 16:9 picture area,
           not on the black letterbox space. */
        body.cityma-media-landscape .cityma-media-caption-overlay.is-top {
            top:28.625% !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-landscape .cityma-media-caption-overlay.is-bottom {
            top:auto !important;
            bottom:28.625% !important;
            transform:none !important;
        }

        /* SQUARE 1:1
           Keep both captions equally inset from the real image edges. */
        body.cityma-media-square .cityma-media-caption-overlay.is-top {
            top:12% !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-square .cityma-media-caption-overlay.is-bottom {
            top:auto !important;
            bottom:12% !important;
            transform:none !important;
        }

        /* PORTRAIT / SHORTS 9:16
           The video fills the whole phone background. Top caption begins
           safely below the CityMarketeer header/address zone; bottom caption
           stays above the fixed progress/action/title area. */
        body.cityma-media-portrait .cityma-media-caption-overlay.is-top {
            top:30% !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-portrait .cityma-media-caption-overlay.is-bottom {
            top:58% !important;
            bottom:auto !important;
            transform:translateY(-50%) !important;
        }

        /* ==================================================================
           CITYMA FINAL COMMON VIEW TUNE · 2026-08-29
           ================================================================== */
        body.cityma-marketplace .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site .info-box .cityma-ai-inline:not(.is-expanded) {
            transform:translateY(8px) !important;
            z-index:2800 !important;
        }

        .app-container .supplier-brand-hero > span:first-child {
            font-size:2.034rem !important;
        }
        .app-container .supplier-brand-hero > span:nth-child(2) {
            font-size:.847795rem !important;
            font-family:"Arial Narrow","Roboto Condensed","Inter Tight","Helvetica Neue Condensed",Arial,sans-serif !important;
            font-stretch:condensed !important;
            font-weight:900 !important;
            letter-spacing:-.035em !important;
            /* Company two-line tune: move only the second line upward by
               15% of its own text height. Layout/address position stays unchanged. */
            transform:translateY(-0.127169rem) !important;
        }

        body.cityma-marketplace .info-box .action-btn-inline,
        body.direct-ad-site .info-box .action-btn-inline {
            height:34px !important;
            min-height:34px !important;
            max-height:34px !important;
            padding-top:0 !important;
            padding-bottom:0 !important;
        }
        body.cityma-marketplace .info-box .action-btn-inline .btn-text-box,
        body.direct-ad-site .info-box .action-btn-inline .btn-text-box {
            height:100% !important;
            min-height:0 !important;
            justify-content:center !important;
        }
        body.cityma-marketplace .info-box .action-btn-inline .btn-sub-txt:empty,
        body.direct-ad-site .info-box .action-btn-inline .btn-sub-txt:empty {
            display:none !important;
        }

        /* ==================================================================
           CITYMA TRUE MEDIA-POSITION EQUALIZATION · 2026-08-29
           Landscape / Portrait / Square all use the exact same lower UI
           coordinates. Media shape changes ONLY the media fitting/caption
           safe-zone; never the CTA/title/description/Customer Service rows.
           ================================================================== */
        body.cityma-marketplace.cityma-media-landscape .info-box,
        body.cityma-marketplace.cityma-media-portrait .info-box,
        body.cityma-marketplace.cityma-media-square .info-box,
        body.direct-ad-site.cityma-media-landscape .info-box,
        body.direct-ad-site.cityma-media-portrait .info-box,
        body.direct-ad-site.cityma-media-square .info-box {
            bottom:5px !important;
            height:184px !important;
            min-height:184px !important;
            max-height:184px !important;
        }

        body.cityma-marketplace.cityma-media-landscape .info-box .price-action-row,
        body.cityma-marketplace.cityma-media-landscape .info-box .company-name,
        body.cityma-marketplace.cityma-media-landscape .info-box .title-text,
        body.cityma-marketplace.cityma-media-landscape .info-box .desc-bg,
        body.cityma-marketplace.cityma-media-portrait .info-box .price-action-row,
        body.cityma-marketplace.cityma-media-portrait .info-box .company-name,
        body.cityma-marketplace.cityma-media-portrait .info-box .title-text,
        body.cityma-marketplace.cityma-media-portrait .info-box .desc-bg,
        body.cityma-marketplace.cityma-media-square .info-box .price-action-row,
        body.cityma-marketplace.cityma-media-square .info-box .company-name,
        body.cityma-marketplace.cityma-media-square .info-box .title-text,
        body.cityma-marketplace.cityma-media-square .info-box .desc-bg,
        body.direct-ad-site.cityma-media-landscape .info-box .price-action-row,
        body.direct-ad-site.cityma-media-landscape .info-box .company-name,
        body.direct-ad-site.cityma-media-landscape .info-box .title-text,
        body.direct-ad-site.cityma-media-landscape .info-box .desc-bg,
        body.direct-ad-site.cityma-media-portrait .info-box .price-action-row,
        body.direct-ad-site.cityma-media-portrait .info-box .company-name,
        body.direct-ad-site.cityma-media-portrait .info-box .title-text,
        body.direct-ad-site.cityma-media-portrait .info-box .desc-bg,
        body.direct-ad-site.cityma-media-square .info-box .price-action-row,
        body.direct-ad-site.cityma-media-square .info-box .company-name,
        body.direct-ad-site.cityma-media-square .info-box .title-text,
        body.direct-ad-site.cityma-media-square .info-box .desc-bg {
            top:0 !important;
            bottom:auto !important;
            transform:none !important;
        }

        body.cityma-marketplace.cityma-media-landscape .info-box .cityma-ai-inline:not(.is-expanded),
        body.cityma-marketplace.cityma-media-portrait .info-box .cityma-ai-inline:not(.is-expanded),
        body.cityma-marketplace.cityma-media-square .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site.cityma-media-landscape .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site.cityma-media-portrait .info-box .cityma-ai-inline:not(.is-expanded),
        body.direct-ad-site.cityma-media-square .info-box .cityma-ai-inline:not(.is-expanded) {
            top:0 !important;
            bottom:auto !important;
            transform:translateY(8px) !important;
            z-index:2800 !important;
        }

        /* ==================================================================
           CITYMA CAPTION STABLE AFTER MEDIA FIT · 2026-08-29
           Prevent the first-paint caption position from flashing and then
           jumping when video metadata determines landscape/portrait/square.
           Captions appear only after the real media geometry is known.
           ================================================================== */
        body:not(.cityma-media-fit-ready) .cityma-media-caption-overlay {
            opacity:0 !important;
            visibility:hidden !important;
        }
        body.cityma-media-fit-ready .cityma-media-caption-overlay {
            opacity:1 !important;
            visibility:visible !important;
        }

        body.cityma-media-landscape .cityma-media-caption-overlay.is-top,
        body.cityma-media-square .cityma-media-caption-overlay.is-top {
            top:var(--cityma-caption-top-y, 12%) !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-landscape .cityma-media-caption-overlay.is-bottom,
        body.cityma-media-square .cityma-media-caption-overlay.is-bottom {
            top:auto !important;
            bottom:var(--cityma-caption-bottom-y, 12%) !important;
            transform:none !important;
        }

        body.cityma-media-portrait .cityma-media-caption-overlay.is-top {
            top:var(--cityma-caption-top-y, 30%) !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-portrait .cityma-media-caption-overlay.is-bottom {
            top:var(--cityma-caption-bottom-top-y, 58%) !important;
            bottom:auto !important;
            transform:translateY(-50%) !important;
        }

        /* CITYMA CAPTION FINAL MANUAL TUNE · 2026-08-29
           LANDSCAPE:
             upper = keep current 1 inch upward
             lower = move 0.5 inch upward from its previous position
                     (previous +96px becomes +48px)
           PORTRAIT:
             upper = move 2 inches upward from current position
             lower = move 2 inches upward from current position
           1 CSS inch = 96 CSS px. */
        body.cityma-media-landscape.cityma-media-fit-ready
        .cityma-media-caption-overlay.is-top {
            /* LANDSCAPE ONLY · final single-line caption policy.
               From the latest live position: upper caption 0.7 CSS inch UP.
               1 CSS inch = 96px, therefore 0.7in = 67.2px. */
            transform:translateY(-67.2px) !important;
            z-index:9000 !important;
            position:absolute !important;
            font-size:32.4px !important;
            line-height:1.08 !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
        }
        body.cityma-media-landscape.cityma-media-fit-ready
        .cityma-media-caption-overlay.is-bottom {
            /* LANDSCAPE ONLY · final fine tune:
               move the approved lower caption an additional 0.5 CSS inch DOWN.
               1 CSS inch = 96px, therefore +48px from the current position. */
            transform:translateY(115.2px) !important;
            font-size:24.3px !important;
            line-height:1.08 !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
        }

        body.cityma-media-portrait.cityma-media-fit-ready
        .cityma-media-caption-overlay.cityma-caption-dual.is-top {
            /* PORTRAIT ONLY · 2026-08-29
               Move the approved live upper caption an additional 0.3 CSS inch UP.
               Existing -32px + 28.8px = -60.8px total.
               Keep the same typography/22-character policy as landscape. */
            transform:translateY(-60.8px) !important;
            display:flex !important;
            justify-content:center !important;
            align-items:center !important;
            text-align:center !important;
        }
        body.cityma-media-portrait.cityma-media-fit-ready
        .cityma-media-caption-overlay.cityma-caption-dual.is-bottom {
            /* PORTRAIT ONLY · move the approved lower caption 0.5 CSS inch DOWN and force
               the same centered 32-character line behavior as landscape. */
            transform:translateY(calc(-50% + 28.8px)) !important;
            display:flex !important;
            justify-content:center !important;
            align-items:center !important;
            text-align:center !important;
        }

        /* LANDSCAPE LAYER LOCK · keep the upper black/gradient layer behind
           the video/caption so the upper caption can never be covered or cut
           by a visual mask. */
        body.cityma-media-landscape .cityeer-square-frame::before,
        body.cityma-media-landscape .cityeer-square-frame::after {
            z-index:0 !important;
        }
        body.cityma-media-landscape .cityeer-square-frame.media-landscape > #mediaPlayer {
            z-index:1 !important;
        }
        body.cityma-media-landscape .cityma-media-caption-overlay {
            z-index:9000 !important;
            position:absolute !important;
        }

        /* Caption usable width · landscape + portrait only.
           Keep 2.5% safety margin on each side = 95% total width. */
        body.cityma-media-landscape .cityma-media-caption-overlay,
        body.cityma-media-portrait .cityma-media-caption-overlay {
            left:2.5% !important;
            right:auto !important;
            width:95% !important;
            max-width:95% !important;
            box-sizing:border-box !important;
        }

        /* CITYMA CAPTION TYPOGRAPHY FINAL · 2026-08-29
           One line only. Use 96% of the media stage. Top is a strong compact
           headline; Bottom is a lighter compact support line. Preferred font
           sizes are +35% (Top 32.4px / Bottom 24.3px). If text is too wide,
           JavaScript compresses HORIZONTAL width only; font height stays +35%. */
        .cityma-media-caption-overlay.cityma-caption-dual.is-top,
        .cityma-media-caption-overlay.cityma-caption-dual.is-bottom {
            left:2% !important;
            right:auto !important;
            width:96% !important;
            max-width:96% !important;
            box-sizing:border-box !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
            text-align:center !important;
        }
        .cityma-media-caption-overlay.cityma-caption-dual .cityma-caption-text {
            display:inline-block !important;
            max-width:none !important;
            white-space:nowrap !important;
            transform-origin:center center !important;
            will-change:transform;
        }
        .cityma-media-caption-overlay.cityma-caption-dual.is-bottom .cityma-caption-text {
            flex:0 0 auto !important;
            transform-origin:center center !important;
        }
        .cityma-media-caption-overlay.cityma-caption-dual.is-top {
            font-family:"Roboto Condensed","Arial Narrow","Noto Sans KR",Arial,sans-serif !important;
            font-size:32.4px !important;
            font-weight:900 !important;
            font-stretch:condensed !important;
            letter-spacing:-.04em !important;
            line-height:1.04 !important;
        }
        .cityma-media-caption-overlay.cityma-caption-dual.is-bottom {
            display:flex !important;
            justify-content:center !important;
            align-items:center !important;
            text-align:center !important;
            font-family:"Roboto Condensed","Arial Narrow","Noto Sans KR",Arial,sans-serif !important;
            font-size:24.3px !important;
            font-weight:600 !important;
            font-stretch:condensed !important;
            letter-spacing:-.05em !important;
            line-height:1.06 !important;
        }


        /* ==================================================================
           PORTRAIT CAPTION HARD LOCK · 2026-08-29
           Apply to the ACTUAL portrait top/bottom overlay elements regardless
           of legacy/dual storage class. Same typography policy as landscape.
           ================================================================== */
        body.cityma-media-portrait.cityma-media-fit-ready .cityma-media-caption-overlay.is-top {
            left:2% !important;
            right:auto !important;
            width:96% !important;
            max-width:96% !important;
            top:calc(var(--cityma-caption-top-y, 30%) - 60.8px) !important;
            bottom:auto !important;
            transform:none !important;
            display:flex !important;
            justify-content:center !important;
            align-items:center !important;
            text-align:center !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
            font-family:"Roboto Condensed","Arial Narrow","Noto Sans KR",Arial,sans-serif !important;
            font-size:32.4px !important;
            font-weight:900 !important;
            font-stretch:condensed !important;
            letter-spacing:-.04em !important;
            line-height:1.04 !important;
            box-sizing:border-box !important;
            z-index:9000 !important;
        }
        body.cityma-media-portrait.cityma-media-fit-ready .cityma-media-caption-overlay.is-bottom {
            left:2% !important;
            right:auto !important;
            width:96% !important;
            max-width:96% !important;
            top:var(--cityma-caption-bottom-top-y, 58%) !important;
            bottom:auto !important;
            transform:translateY(calc(-50% + 28.8px)) !important;
            display:flex !important;
            justify-content:center !important;
            align-items:center !important;
            text-align:center !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:clip !important;
            font-family:"Roboto Condensed","Arial Narrow","Noto Sans KR",Arial,sans-serif !important;
            font-size:24.3px !important;
            font-weight:600 !important;
            font-stretch:condensed !important;
            letter-spacing:-.05em !important;
            line-height:1.06 !important;
            box-sizing:border-box !important;
            z-index:9000 !important;
        }
        body.cityma-media-portrait.cityma-media-fit-ready .cityma-media-caption-overlay.is-top .cityma-caption-text,
        body.cityma-media-portrait.cityma-media-fit-ready .cityma-media-caption-overlay.is-bottom .cityma-caption-text {
            display:inline-block !important;
            flex:0 0 auto !important;
            white-space:nowrap !important;
            transform-origin:center center !important;
            text-align:center !important;
        }


        /* ==================================================================
           CITYMA MOBILE AI CUSTOMER SERVICE STABLE CHAT · 2026-09-01
           Final override only.
           - Larger phone typography and controls.
           - Conversation has a fixed scroll area.
           - New messages appear at the bottom; prior messages move upward.
           - Composer stays below the conversation instead of being pushed down.
           - visualViewport variables keep the sheet above the mobile keyboard.
           ================================================================== */
        :root {
            --cityma-ai-keyboard-offset:0px;
            --cityma-ai-vv-height:100dvh;
        }

        .cityma-ai-inline.is-expanded {
            position:fixed !important;
            left:50% !important;
            right:auto !important;
            top:auto !important;
            bottom:var(--cityma-ai-keyboard-offset, 0px) !important;
            transform:translateX(-50%) !important;
            width:360px !important;
            min-width:360px !important;
            max-width:360px !important;

            height:min(62dvh, 540px, calc(var(--cityma-ai-vv-height, 100dvh) - 10px)) !important;
            min-height:min(430px, calc(var(--cityma-ai-vv-height, 100dvh) - 10px)) !important;
            max-height:calc(var(--cityma-ai-vv-height, 100dvh) - 10px) !important;

            display:grid !important;
            grid-template-columns:minmax(0,1fr) !important;
            grid-template-rows:38px minmax(0,1fr) 74px 44px 24px !important;
            row-gap:6px !important;

            margin:0 !important;
            padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
            overflow:hidden !important;
            box-sizing:border-box !important;
            border:0 !important;
            border-radius:20px 20px 0 0 !important;
            background:#f8fafc !important;
            box-shadow:0 -12px 34px rgba(0,0,0,.42) !important;
            z-index:12000 !important;
        }

        @media (max-width:650px) {
            .cityma-ai-inline.is-expanded {
                width:100vw !important;
                min-width:0 !important;
                max-width:100vw !important;
                border-radius:20px 20px 0 0 !important;
            }
        }

        /* Flatten result wrapper so the fixed grid controls each part. */
        .cityma-ai-inline.is-expanded .cityma-ai-inline-result {
            display:contents !important;
        }

        .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
            grid-row:1 !important;
            grid-column:1 !important;
            height:38px !important;
            min-height:38px !important;
            margin:0 !important;
            padding:0 2px !important;
            display:flex !important;
            align-items:center !important;
            justify-content:space-between !important;
            color:#202124 !important;
            font-size:14px !important;
            line-height:1 !important;
            font-weight:900 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-inline-close {
            width:34px !important;
            height:34px !important;
            min-width:34px !important;
            flex:0 0 34px !important;
            border-radius:50% !important;
            font-size:22px !important;
        }

        /* Conversation = one fixed scrolling area. It never makes the sheet grow. */
        .cityma-ai-inline.is-expanded .cityma-ai-answer {
            grid-row:2 !important;
            grid-column:1 !important;
            min-height:0 !important;
            height:auto !important;
            margin:0 !important;
            padding:10px !important;
            display:flex !important;
            flex-direction:column !important;
            gap:9px !important;
            overflow-y:auto !important;
            overflow-x:hidden !important;
            overscroll-behavior:contain !important;
            scroll-behavior:smooth !important;
            scrollbar-width:thin !important;
            background:#eef1f4 !important;
            border:1px solid #d8dde3 !important;
            border-radius:15px !important;
            color:#202124 !important;
            font-size:16px !important;
            line-height:1.55 !important;
            box-sizing:border-box !important;
            -webkit-overflow-scrolling:touch !important;
        }

        .cityma-ai-message {
            width:fit-content;
            max-width:90%;
            padding:10px 12px;
            border-radius:14px;
            box-sizing:border-box;
            overflow-wrap:anywhere;
            white-space:pre-wrap;
            font-size:16px;
            line-height:1.52;
        }
        .cityma-ai-message.is-user {
            align-self:flex-end;
            background:#fff0e6;
            border:1px solid #ffc59f;
            color:#2b2b2b;
            border-bottom-right-radius:5px;
        }
        .cityma-ai-message.is-assistant {
            align-self:flex-start;
            background:#fff;
            border:1px solid #d8dde3;
            color:#25282d;
            border-bottom-left-radius:5px;
        }
        .cityma-ai-message.is-pending {
            color:#6b7280;
        }
        .cityma-ai-message .cityma-ai-answer-source {
            margin-top:8px !important;
            padding-top:7px !important;
            border-top:1px solid #eceff2 !important;
            color:#707780 !important;
            font-size:12px !important;
            line-height:1.35 !important;
        }

        /* Composer is always the fixed row immediately below the conversation. */
        .cityma-ai-inline.is-expanded > form {
            grid-row:3 !important;
            grid-column:1 !important;
            position:static !important;
            align-self:stretch !important;
            width:100% !important;
            height:74px !important;
            min-height:74px !important;
            margin:0 !important;
            padding:0 !important;
            background:transparent !important;
            z-index:4 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer {
            display:grid !important;
            grid-template-columns:32px minmax(0,1fr) 50px !important;
            column-gap:7px !important;
            align-items:center !important;
            width:100% !important;
            height:74px !important;
            min-height:74px !important;
            max-height:74px !important;
            margin:0 !important;
            padding:5px 6px 5px 5px !important;
            border:1px solid #d8dde3 !important;
            border-radius:18px !important;
            background:#fff !important;
            box-sizing:border-box !important;
            box-shadow:0 2px 7px rgba(0,0,0,.07) !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-service-icon {
            grid-column:1 !important;
            width:30px !important;
            height:34px !important;
            min-width:30px !important;
            object-fit:fill !important;
            align-self:center !important;
            justify-self:start !important;
            margin:0 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
            grid-column:2 !important;
            width:100% !important;
            min-width:0 !important;
            height:62px !important;
            max-height:62px !important;
            margin:0 !important;
            padding:8px 3px !important;
            box-sizing:border-box !important;
            color:#202124 !important;
            font-size:16px !important;
            line-height:1.35 !important;
            font-weight:500 !important;
            overflow-y:auto !important;
            resize:none !important;
            scrollbar-width:none !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-composer textarea::-webkit-scrollbar {
            display:none !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-send {
            grid-column:3 !important;
            justify-self:end !important;
            align-self:center !important;
            width:48px !important;
            height:48px !important;
            min-width:48px !important;
            flex:0 0 48px !important;
            margin:0 !important;
            background:#202124 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-send span {
            font-size:25px !important;
        }

        .cityma-ai-inline.is-expanded .cityma-ai-actions {
            grid-row:4 !important;
            grid-column:1 !important;
            width:100% !important;
            height:44px !important;
            min-height:44px !important;
            margin:0 !important;
            padding:0 !important;
            gap:7px !important;
            align-self:end !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-action {
            min-height:44px !important;
            height:44px !important;
            padding:7px 6px !important;
            font-size:12px !important;
            line-height:1.15 !important;
            font-weight:800 !important;
        }

        .cityma-ai-inline.is-expanded .cityma-ai-help {
            grid-row:5 !important;
            grid-column:1 !important;
            margin:0 2px !important;
            padding:0 !important;
            align-self:center !important;
            overflow:hidden !important;
            white-space:nowrap !important;
            text-overflow:ellipsis !important;
            color:#7d838b !important;
            opacity:1 !important;
            font-size:10.5px !important;
            line-height:1.2 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-help-title {
            display:inline !important;
            margin-right:3px !important;
            color:#5e646c !important;
            font-size:10.5px !important;
            font-weight:800 !important;
        }

        /* Form-mail temporarily occupies the conversation+composer area but
           leaves the bottom contact buttons visible. */
        .cityma-ai-inline.is-expanded .cityma-ai-formmail {
            grid-row:2 / 4 !important;
            grid-column:1 !important;
            z-index:8 !important;
            min-height:0 !important;
            max-height:none !important;
            margin:0 !important;
            padding:12px !important;
            overflow-y:auto !important;
            background:#f8fafc !important;
            border:1px solid #d8dde3 !important;
            border-radius:15px !important;
            box-sizing:border-box !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail-title {
            font-size:15px !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail-note {
            font-size:12px !important;
            line-height:1.4 !important;
        }
        .cityma-ai-inline.is-expanded .cityma-ai-formmail input,
        .cityma-ai-inline.is-expanded .cityma-ai-formmail-submit {
            min-height:44px !important;
            font-size:16px !important;
        }

        /* Compact bar: only typography/control size is enlarged; the approved
           lower-site geometry itself remains unchanged. */
        .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-composer textarea {
            font-size:16px !important;
            line-height:1.30 !important;
        }
        .info-box .cityma-ai-inline:not(.is-expanded) .cityma-ai-send {
            width:42px !important;
            height:42px !important;
            min-width:42px !important;
        }


        /* ==================================================================
           CITYMA MOBILE AI FULL-VISIBLE-SCREEN · 2026-09-01 R3
           Phone only:
           - AI consultation fills 100% of the currently visible viewport.
           - When the keyboard opens, the sheet automatically shrinks to the
             visible area and the composer stays immediately above keyboard.
           - Answer remains above; question composer remains below.
           Desktop keeps the R2 sheet size.
           ================================================================== */
        @media (max-width:650px) {
            body.cityma-ai-sheet-open {
                overflow:hidden !important;
            }

            .cityma-ai-inline.is-expanded {
                left:0 !important;
                right:0 !important;
                top:auto !important;
                bottom:var(--cityma-ai-keyboard-offset, 0px) !important;
                transform:none !important;

                width:100vw !important;
                min-width:100vw !important;
                max-width:100vw !important;

                height:var(--cityma-ai-vv-height, 100dvh) !important;
                min-height:var(--cityma-ai-vv-height, 100dvh) !important;
                max-height:var(--cityma-ai-vv-height, 100dvh) !important;

                grid-template-rows:42px minmax(0,1fr) 78px 46px 24px !important;
                row-gap:6px !important;

                padding:8px 9px calc(8px + env(safe-area-inset-bottom)) !important;
                border-radius:0 !important;
                box-shadow:none !important;
                background:#f8fafc !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
                height:42px !important;
                min-height:42px !important;
                font-size:15px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-inline-close {
                width:38px !important;
                height:38px !important;
                min-width:38px !important;
                flex-basis:38px !important;
                font-size:24px !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-answer {
                min-height:0 !important;
                font-size:17px !important;
                line-height:1.55 !important;
                padding:11px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-message {
                max-width:92% !important;
                padding:11px 13px !important;
                font-size:17px !important;
                line-height:1.5 !important;
            }

            .cityma-ai-inline.is-expanded > form {
                height:78px !important;
                min-height:78px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-composer {
                height:78px !important;
                min-height:78px !important;
                max-height:78px !important;
                grid-template-columns:34px minmax(0,1fr) 52px !important;
                padding:5px 6px 5px 5px !important;
                border-radius:18px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-service-icon {
                width:32px !important;
                height:38px !important;
                min-width:32px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
                height:66px !important;
                max-height:66px !important;
                font-size:17px !important;
                line-height:1.35 !important;
                padding:8px 4px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-send {
                width:50px !important;
                height:50px !important;
                min-width:50px !important;
                flex-basis:50px !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-actions {
                height:46px !important;
                min-height:46px !important;
                gap:6px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action {
                height:46px !important;
                min-height:46px !important;
                font-size:12.5px !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-help,
            .cityma-ai-inline.is-expanded .cityma-ai-help-title {
                font-size:10.5px !important;
            }
        }

        /* While the software keyboard is open, use every available pixel for
           conversation + composer and temporarily hide secondary action rows.
           They return automatically as soon as the keyboard closes. */
        @media (max-width:650px) {
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded {
                grid-template-rows:38px minmax(0,1fr) 78px !important;
                row-gap:5px !important;
                padding-bottom:6px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-actions,
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-help {
                display:none !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded > form {
                grid-row:3 !important;
            }
        }


        /* ==================================================================
           CITYMA MOBILE AI FULLSCREEN REFINED · 2026-09-01 R4
           Requested refinements:
           - Mobile sheet pins to the ACTUAL visible viewport top + height,
             preventing keyboard-induced whole-page upward drift.
           - Bottom 3 actions are smaller, 95% wide, centered.
           - Default/placeholder text is softer and less visually heavy.
           - Extra breathing room around sparkle + send button.
           ================================================================== */

        :root {
            --cityma-ai-vv-top:0px;
        }

        /* Softer default prompt text in both compact and expanded composer. */
        .cityma-ai-inline .cityma-ai-composer textarea::placeholder {
            color:#a3a8af !important;
            opacity:1 !important;
            font-weight:400 !important;
        }

        @media (max-width:650px) {
            body.cityma-ai-sheet-open {
                position:fixed !important;
                inset:0 !important;
                width:100% !important;
                height:100% !important;
                overflow:hidden !important;
                overscroll-behavior:none !important;
            }

            /* Use visualViewport TOP + HEIGHT instead of bottom compensation.
               This keeps the AI sheet inside the visible phone area even when
               Android Chrome opens the software keyboard and pans the page. */
            .cityma-ai-inline.is-expanded {
                left:0 !important;
                right:0 !important;
                top:var(--cityma-ai-vv-top, 0px) !important;
                bottom:auto !important;
                transform:none !important;

                width:100vw !important;
                min-width:100vw !important;
                max-width:100vw !important;

                height:var(--cityma-ai-vv-height, 100dvh) !important;
                min-height:var(--cityma-ai-vv-height, 100dvh) !important;
                max-height:var(--cityma-ai-vv-height, 100dvh) !important;

                grid-template-rows:40px minmax(0,1fr) 74px 38px 20px !important;
                row-gap:5px !important;

                padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
                border-radius:0 !important;
                box-shadow:none !important;
                overflow:hidden !important;
                overscroll-behavior:none !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
                height:40px !important;
                min-height:40px !important;
                padding:0 1px !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-answer {
                padding:10px !important;
                font-size:16px !important;
                line-height:1.52 !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-message {
                max-width:91% !important;
                padding:10px 12px !important;
                font-size:16px !important;
                line-height:1.48 !important;
            }

            /* Compact, spacious composer. Sparkle/send have guaranteed room. */
            .cityma-ai-inline.is-expanded > form {
                height:74px !important;
                min-height:74px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-composer {
                height:74px !important;
                min-height:74px !important;
                max-height:74px !important;
                grid-template-columns:36px minmax(0,1fr) 50px !important;
                column-gap:8px !important;
                padding:5px 7px 5px 5px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-service-icon {
                width:32px !important;
                height:38px !important;
                min-width:32px !important;
                margin-left:1px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
                height:62px !important;
                max-height:62px !important;
                padding:8px 3px !important;
                font-size:16px !important;
                font-weight:400 !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-send {
                width:48px !important;
                height:48px !important;
                min-width:48px !important;
                flex-basis:48px !important;
                margin-right:1px !important;
            }

            /* Bottom 3 buttons: 95% centered and visually lighter. */
            .cityma-ai-inline.is-expanded .cityma-ai-actions {
                width:95% !important;
                height:38px !important;
                min-height:38px !important;
                margin:0 auto !important;
                padding:0 !important;
                gap:5px !important;
                align-self:center !important;
                justify-self:center !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action {
                height:38px !important;
                min-height:38px !important;
                padding:5px 4px !important;
                border-radius:7px !important;
                font-size:10.5px !important;
                line-height:1.05 !important;
                font-weight:700 !important;
                color:#62676e !important;
                border-color:#777d84 !important;
                background:#e4e6e9 !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-help {
                width:95% !important;
                margin:0 auto !important;
                font-size:9px !important;
                text-align:left !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-help-title {
                font-size:9px !important;
            }

            /* Keyboard open: conversation + composer only.
               Secondary actions disappear so nothing covers sparkle/send. */
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded {
                grid-template-rows:36px minmax(0,1fr) 72px !important;
                row-gap:4px !important;
                padding:5px 7px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded > form {
                height:72px !important;
                min-height:72px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-composer {
                height:72px !important;
                min-height:72px !important;
                max-height:72px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-actions,
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-help {
                display:none !important;
            }
        }

        /* Desktop also gets lighter/smaller bottom buttons, without changing
           the approved desktop AI sheet dimensions. */
        @media (min-width:651px) {
            .cityma-ai-inline.is-expanded .cityma-ai-actions {
                width:95% !important;
                margin:0 auto !important;
                gap:5px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action {
                min-height:36px !important;
                height:36px !important;
                padding:5px !important;
                font-size:10.5px !important;
                font-weight:700 !important;
                color:#62676e !important;
                background:#e4e6e9 !important;
                border-color:#777d84 !important;
            }
        }


        /* ==================================================================
           CITYMA MOBILE AI DEVICE-SAFE VIEWPORT · 2026-09-01 R5
           Cross-phone fix for Samsung Internet / Chrome / Android UI bars.
           Do NOT trust 100vw while AI is open. Use exact VisualViewport
           left/top/width/height supplied by JS.
           ================================================================== */
        :root {
            --cityma-ai-vv-left:0px;
            --cityma-ai-vv-width:100vw;
        }

        /* Underlying marketplace controls must never float over AI. */
        body.cityma-ai-sheet-open .right-wall-scroll-indicator,
        body.cityma-ai-sheet-open .media-sound-btn {
            visibility:hidden !important;
            pointer-events:none !important;
        }

        @media (max-width:650px) {
            /* Avoid position:fixed on BODY itself. Some Android browsers pan a
               fixed body when the keyboard opens, which can clip the AI sheet. */
            body.cityma-ai-sheet-open {
                position:static !important;
                inset:auto !important;
                width:auto !important;
                height:auto !important;
                overflow:hidden !important;
                overscroll-behavior:none !important;
            }

            .cityma-ai-inline.is-expanded {
                position:fixed !important;
                left:var(--cityma-ai-vv-left, 0px) !important;
                right:auto !important;
                top:var(--cityma-ai-vv-top, 0px) !important;
                bottom:auto !important;
                transform:none !important;

                width:var(--cityma-ai-vv-width, 100vw) !important;
                min-width:0 !important;
                max-width:var(--cityma-ai-vv-width, 100vw) !important;

                height:var(--cityma-ai-vv-height, 100dvh) !important;
                min-height:var(--cityma-ai-vv-height, 100dvh) !important;
                max-height:var(--cityma-ai-vv-height, 100dvh) !important;

                margin:0 !important;
                box-sizing:border-box !important;
                overflow:hidden !important;
                border-radius:0 !important;
                z-index:2147483000 !important;
            }

            /* Every internal row is constrained to the measured viewport width. */
            .cityma-ai-inline.is-expanded .cityma-ai-inline-head,
            .cityma-ai-inline.is-expanded .cityma-ai-answer,
            .cityma-ai-inline.is-expanded > form,
            .cityma-ai-inline.is-expanded .cityma-ai-composer,
            .cityma-ai-inline.is-expanded .cityma-ai-actions,
            .cityma-ai-inline.is-expanded .cityma-ai-help {
                width:100% !important;
                min-width:0 !important;
                max-width:100% !important;
                box-sizing:border-box !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-answer {
                overflow-x:hidden !important;
            }

            /* Keep both speech bubbles completely inside narrow phones. */
            .cityma-ai-inline.is-expanded .cityma-ai-message {
                width:auto !important;
                min-width:0 !important;
                max-width:calc(100% - 8px) !important;
                box-sizing:border-box !important;
                overflow-wrap:anywhere !important;
                word-break:break-word !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-message.is-user {
                align-self:flex-end !important;
                margin-left:8px !important;
                margin-right:0 !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-message.is-assistant {
                align-self:flex-start !important;
                margin-left:0 !important;
                margin-right:8px !important;
            }

            /* Requested 95% centered action group remains, but never exceeds
               the measured phone width. */
            .cityma-ai-inline.is-expanded .cityma-ai-actions {
                width:95% !important;
                max-width:95% !important;
                justify-self:center !important;
                margin-left:auto !important;
                margin-right:auto !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action {
                min-width:0 !important;
                overflow:hidden !important;
                overflow-wrap:anywhere !important;
            }

            .cityma-ai-inline.is-expanded .cityma-ai-help {
                width:95% !important;
                max-width:95% !important;
                justify-self:center !important;
                margin-left:auto !important;
                margin-right:auto !important;
            }

            /* Samsung Internet sometimes reports a very short viewport while
               keyboard animation is still moving. Keep the input visible first. */
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded {
                grid-template-rows:34px minmax(80px,1fr) 70px !important;
                padding:4px 6px 5px !important;
                row-gap:4px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-inline-head {
                height:34px !important;
                min-height:34px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded > form,
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-composer {
                height:70px !important;
                min-height:70px !important;
                max-height:70px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded .cityma-ai-composer textarea {
                height:58px !important;
                max-height:58px !important;
            }
        }


        /* ==================================================================
           CITYMA MOBILE AI PORTAL STABLE · 2026-09-01 R6
           Samsung/Chrome safe structure:
           mobile expanded AI is moved directly under <body>, so no parent
           clipping/grid/display:contents behavior can hide the composer.
           Direct child order is:
           HEADER -> CONVERSATION -> COMPOSER -> 3 ACTIONS -> HELP.
           ================================================================== */
        @media (max-width:650px) {
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal {
                position:fixed !important;
                left:var(--cityma-ai-vv-left,0px) !important;
                top:var(--cityma-ai-vv-top,0px) !important;
                right:auto !important;
                bottom:auto !important;
                transform:none !important;

                width:var(--cityma-ai-vv-width,100vw) !important;
                min-width:0 !important;
                max-width:var(--cityma-ai-vv-width,100vw) !important;
                height:var(--cityma-ai-vv-height,100dvh) !important;
                min-height:var(--cityma-ai-vv-height,100dvh) !important;
                max-height:var(--cityma-ai-vv-height,100dvh) !important;

                margin:0 !important;
                padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
                box-sizing:border-box !important;

                display:flex !important;
                flex-direction:column !important;
                align-items:stretch !important;
                gap:5px !important;

                overflow:hidden !important;
                overscroll-behavior:none !important;
                border:0 !important;
                border-radius:0 !important;
                background:#f8fafc !important;
                box-shadow:none !important;
                z-index:2147483000 !important;
            }

            /* The old wrapper stays empty while portal mode is active. */
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-inline-result {
                display:none !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-inline-head {
                order:1 !important;
                flex:0 0 40px !important;
                width:100% !important;
                min-width:0 !important;
                height:40px !important;
                min-height:40px !important;
                margin:0 !important;
                padding:0 2px !important;
                display:flex !important;
                align-items:center !important;
                justify-content:space-between !important;
                box-sizing:border-box !important;
                color:#202124 !important;
                font-size:15px !important;
                line-height:1 !important;
                font-weight:900 !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-inline-head .cityma-ai-inline-close {
                width:36px !important;
                height:36px !important;
                min-width:36px !important;
                flex:0 0 36px !important;
                font-size:23px !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-answer {
                order:2 !important;
                flex:1 1 auto !important;
                min-height:0 !important;
                width:100% !important;
                max-width:100% !important;
                margin:0 !important;
                padding:10px !important;
                box-sizing:border-box !important;
                overflow-y:auto !important;
                overflow-x:hidden !important;
                -webkit-overflow-scrolling:touch !important;
                overscroll-behavior:contain !important;
                background:#eef1f4 !important;
                border:1px solid #d8dde3 !important;
                border-radius:15px !important;
                font-size:16px !important;
                line-height:1.52 !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-answer .cityma-ai-message {
                width:auto !important;
                min-width:0 !important;
                max-width:calc(100% - 8px) !important;
                padding:10px 12px !important;
                box-sizing:border-box !important;
                overflow-wrap:anywhere !important;
                word-break:break-word !important;
                font-size:16px !important;
                line-height:1.48 !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm {
                order:3 !important;
                flex:0 0 74px !important;
                position:static !important;
                width:100% !important;
                min-width:0 !important;
                height:74px !important;
                min-height:74px !important;
                margin:0 !important;
                padding:0 !important;
                box-sizing:border-box !important;
                background:transparent !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm .cityma-ai-composer {
                display:grid !important;
                grid-template-columns:36px minmax(0,1fr) 50px !important;
                column-gap:8px !important;
                align-items:center !important;
                width:100% !important;
                min-width:0 !important;
                height:74px !important;
                min-height:74px !important;
                max-height:74px !important;
                margin:0 !important;
                padding:5px 7px 5px 5px !important;
                box-sizing:border-box !important;
                border:1px solid #d8dde3 !important;
                border-radius:18px !important;
                background:#fff !important;
                box-shadow:0 2px 7px rgba(0,0,0,.07) !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-service-icon {
                width:32px !important;
                height:38px !important;
                min-width:32px !important;
                margin:0 0 0 1px !important;
                align-self:center !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-composer textarea {
                width:100% !important;
                min-width:0 !important;
                height:62px !important;
                max-height:62px !important;
                margin:0 !important;
                padding:8px 3px !important;
                box-sizing:border-box !important;
                font-size:16px !important;
                line-height:1.35 !important;
                font-weight:400 !important;
                overflow-y:auto !important;
                scrollbar-width:none !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-composer textarea::placeholder {
                color:#a8adb4 !important;
                opacity:1 !important;
                font-weight:400 !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-send {
                width:48px !important;
                height:48px !important;
                min-width:48px !important;
                flex:0 0 48px !important;
                margin:0 1px 0 0 !important;
                align-self:center !important;
                justify-self:end !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-actions {
                order:4 !important;
                flex:0 0 38px !important;
                width:95% !important;
                max-width:95% !important;
                height:38px !important;
                min-height:38px !important;
                margin:0 auto !important;
                padding:0 !important;
                display:grid !important;
                grid-template-columns:repeat(3,minmax(0,1fr)) !important;
                gap:5px !important;
                box-sizing:border-box !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-actions .cityma-ai-action {
                min-width:0 !important;
                height:38px !important;
                min-height:38px !important;
                padding:4px 3px !important;
                border-radius:7px !important;
                overflow:hidden !important;
                font-size:10px !important;
                line-height:1.05 !important;
                font-weight:700 !important;
                color:#686d74 !important;
                background:#e5e7ea !important;
                border-color:#858a91 !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-help {
                order:5 !important;
                flex:0 0 19px !important;
                width:95% !important;
                max-width:95% !important;
                height:19px !important;
                min-height:19px !important;
                margin:0 auto !important;
                padding:0 !important;
                overflow:hidden !important;
                white-space:nowrap !important;
                text-overflow:ellipsis !important;
                box-sizing:border-box !important;
                color:#81868d !important;
                font-size:9px !important;
                line-height:19px !important;
                opacity:1 !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-help .cityma-ai-help-title {
                display:inline !important;
                margin-right:3px !important;
                font-size:9px !important;
                font-weight:800 !important;
            }

            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-formmail {
                position:absolute !important;
                z-index:20 !important;
                left:8px !important;
                right:8px !important;
                top:48px !important;
                bottom:67px !important;
                margin:0 !important;
                padding:12px !important;
                overflow-y:auto !important;
                background:#f8fafc !important;
                border:1px solid #d8dde3 !important;
                border-radius:15px !important;
                box-sizing:border-box !important;
            }

            /* Keyboard open: keep only header + answer + composer.
               No incorrect "keyboard" detection unless the textarea itself is focused. */
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-actions,
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-help {
                display:none !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal {
                gap:4px !important;
                padding:4px 6px 5px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-inline-head {
                flex-basis:34px !important;
                height:34px !important;
                min-height:34px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm {
                flex-basis:70px !important;
                height:70px !important;
                min-height:70px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm .cityma-ai-composer {
                height:70px !important;
                min-height:70px !important;
                max-height:70px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-composer textarea {
                height:58px !important;
                max-height:58px !important;
            }
        }


        /* ==================================================================
           CITYMA MOBILE AI LIGHT ACTIONS + TALL INPUT · 2026-09-01 R7
           - Softer default Customer Service placeholder.
           - Three bottom actions become compact icon + small label controls.
           - Fullscreen customer input gets a little more writing height.
           ================================================================== */

        .cityma-ai-inline .cityma-ai-composer textarea::placeholder {
            color:#c3c7cd !important;
            opacity:.92 !important;
            font-weight:400 !important;
        }

        .cityma-ai-action {
            flex-direction:column !important;
        }
        .cityma-ai-action-icon {
            display:block !important;
            margin:0 !important;
            line-height:1 !important;
        }
        .cityma-ai-action-label {
            display:block !important;
            white-space:nowrap !important;
            line-height:1 !important;
        }

        @media (max-width:650px) {
            /* Slightly taller customer typing area in the full-screen chat. */
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm {
                flex:0 0 86px !important;
                height:86px !important;
                min-height:86px !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm .cityma-ai-composer {
                height:86px !important;
                min-height:86px !important;
                max-height:86px !important;
                grid-template-columns:36px minmax(0,1fr) 52px !important;
                column-gap:8px !important;
                padding:6px 7px 6px 5px !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-composer textarea {
                height:74px !important;
                max-height:74px !important;
                padding:9px 4px !important;
                font-size:16px !important;
                line-height:1.36 !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-send {
                width:50px !important;
                height:50px !important;
                min-width:50px !important;
                flex-basis:50px !important;
            }

            /* Light, compact icon actions. Keep group 95% centered. */
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-actions {
                flex:0 0 36px !important;
                width:95% !important;
                max-width:95% !important;
                height:36px !important;
                min-height:36px !important;
                margin:0 auto !important;
                gap:7px !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > .cityma-ai-actions .cityma-ai-action {
                height:36px !important;
                min-height:36px !important;
                padding:3px 2px 2px !important;
                border:1px solid #d5d9de !important;
                border-radius:9px !important;
                background:#f1f3f5 !important;
                color:#7b8188 !important;
                display:flex !important;
                flex-direction:column !important;
                align-items:center !important;
                justify-content:center !important;
                gap:2px !important;
                box-shadow:none !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-action-icon {
                font-size:16px !important;
                color:#6f757c !important;
            }
            .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-action-label {
                font-size:8px !important;
                font-weight:700 !important;
                letter-spacing:.02em !important;
                color:#7d838a !important;
            }

            /* With the keyboard open, still preserve a comfortable input box. */
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm {
                flex-basis:80px !important;
                height:80px !important;
                min-height:80px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal > form#citymaAiForm .cityma-ai-composer {
                height:80px !important;
                min-height:80px !important;
                max-height:80px !important;
            }
            body.cityma-ai-keyboard-open .cityma-ai-inline.is-expanded.cityma-ai-mobile-portal .cityma-ai-composer textarea {
                height:68px !important;
                max-height:68px !important;
            }
        }

        /* Desktop: same lighter visual language, but keep it modest. */
        @media (min-width:651px) {
            .cityma-ai-inline.is-expanded .cityma-ai-actions {
                width:95% !important;
                max-width:95% !important;
                margin-left:auto !important;
                margin-right:auto !important;
                gap:7px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action {
                min-height:34px !important;
                height:34px !important;
                padding:3px 2px !important;
                border:1px solid #d5d9de !important;
                border-radius:8px !important;
                background:#f1f3f5 !important;
                color:#7b8188 !important;
                display:flex !important;
                flex-direction:column !important;
                align-items:center !important;
                justify-content:center !important;
                gap:2px !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action-icon {
                font-size:15px !important;
                color:#6f757c !important;
            }
            .cityma-ai-inline.is-expanded .cityma-ai-action-label {
                font-size:7.8px !important;
                font-weight:700 !important;
                color:#7d838a !important;
            }
        }

        /* CITYMA-905 · ROBBANG launcher replaces the Home AI input bar only. */
        .cityma-robbang-launcher{width:calc(100% + 20px);max-width:none;margin:2px -10px 0;padding:3px 5px 4px 2px;box-sizing:border-box}
        .cityma-robbang-link{width:100%;min-height:52px;display:grid;grid-template-columns:50px minmax(0,1fr) 48px;align-items:center;column-gap:7px;padding:3px 5px 3px 5px;border:1.8px solid #d9dde2;border-radius:28px;background:#f7f8fa;color:#111;text-decoration:none;box-sizing:border-box;box-shadow:0 1px 2px rgba(0,0,0,.04)}
        .cityma-robbang-mark{width:48px;height:46px;border-radius:18px;overflow:hidden;background:#fff;display:flex;align-items:flex-end;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.10)}
        .cityma-robbang-mark img{width:46px;height:46px;object-fit:contain;object-position:center bottom;display:block}
        .cityma-robbang-copy{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden}
        .cityma-robbang-title{color:#111;font-size:13px;line-height:1.12;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .cityma-robbang-sub{color:#8b9098;font-size:10.5px;line-height:1.15;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .cityma-robbang-go{width:42px;height:42px;border-radius:50%;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;justify-self:end;font:700 23px/1 Arial,sans-serif}
        .cityma-robbang-link:hover,.cityma-robbang-link:focus-visible{border-color:#111;outline:0}
        .cityma-robbang-link.is-unlinked .cityma-robbang-mark{background:#5f646b}
        .cityma-robbang-link.is-unlinked .cityma-robbang-go{background:#8a8f95}
        @media(max-width:420px){.cityma-robbang-link{min-height:52px;grid-template-columns:48px minmax(0,1fr) 46px;column-gap:6px}.cityma-robbang-mark{width:46px;height:44px}.cityma-robbang-mark img{width:44px;height:44px}.cityma-robbang-go{width:40px;height:40px}.cityma-robbang-title{font-size:12.5px}.cityma-robbang-sub{font-size:10px}}


        /* ================================================================
           CITYMA-907 · ROBIN BRANDED DIRECT CHAT · R6
           - one YELLOW ROBBANG header only (no blue duplicate bar)
           - X sits inside the yellow header
           - Robin is clearly presented as this business's AI Customer Service Manager
           - bottom uses ONLY the requested microphone + up-arrow icons
           ================================================================ */
        .cityma-robbang-launcher{
            cursor:pointer !important;
        }
        .cityma-robbang-launcher:focus-visible{
            outline:2px solid #ff6600 !important;
            outline-offset:2px !important;
            border-radius:30px !important;
        }
        .cityma-robbang-fullscreen{
            display:none;
            position:fixed;
            z-index:30000;
            left:0;
            top:0;
            width:360px;
            height:calc(100dvh - 174px);
            margin:0;
            padding:0;
            background:#fff;
            overflow:hidden;
            box-shadow:0 10px 28px rgba(0,0,0,.26);
        }
        .cityma-robbang-fullscreen.is-open{
            display:flex;
            flex-direction:column;
        }

        .cityma-robin-head{
            flex:0 0 auto;
            background:#ffca12;
            color:#111;
            border-bottom:1px solid #dfad00;
            padding:8px 10px 10px;
            position:relative;
            overflow:hidden;
        }
        .cityma-robin-head-main{
            display:grid;
            grid-template-columns:108px minmax(0,1fr);
            gap:8px;
            align-items:end;
            min-height:112px;
        }
        .cityma-robin-mascot{
            width:108px;
            height:118px;
            align-self:end;
            display:flex;
            align-items:flex-end;
            justify-content:center;
            margin:-5px 0 -10px -4px;
            overflow:hidden;
        }
        .cityma-robin-mascot img{
            width:108px;
            height:118px;
            object-fit:contain;
            object-position:center bottom;
            display:block;
        }
        .cityma-robin-copy{
            min-width:0;
            padding:4px 34px 6px 0;
        }
        .cityma-robin-brandrow{
            display:flex;
            align-items:center;
            gap:7px;
            margin-bottom:3px;
        }
        .cityma-robin-brand-word{
            font:950 18px/1 Arial,sans-serif;
            letter-spacing:-.45px;
            color:#111;
        }
        .cityma-robin-brand-space{
            font:800 8.7px/1.1 Arial,sans-serif;
            color:#5c4a00;
            letter-spacing:.01em;
        }
        .cityma-robbang-fullscreen-close{
            position:absolute;
            top:8px;
            right:8px;
            z-index:3;
            width:32px;
            height:32px;
            flex:0 0 32px;
            border:2px solid #111;
            border-radius:50%;
            background:#111;
            color:#fff;
            display:grid;
            place-items:center;
            padding:0 0 1px;
            font:900 20px/1 Arial,sans-serif;
            cursor:pointer;
        }
        .cityma-robin-role{
            font-size:15.5px;
            line-height:1.16;
            font-weight:950;
            letter-spacing:-.02em;
            color:#111;
        }
        .cityma-robin-role strong{
            color:#111;
        }
        .cityma-robin-promise{
            margin-top:5px;
            color:#168c29;
            font-size:10.5px;
            line-height:1.32;
            font-weight:800;
        }
        .cityma-robin-promptline{
            margin-top:5px;
            color:#5d4b00;
            font-size:9.5px;
            line-height:1.3;
            font-weight:700;
        }

        .cityma-robin-log{
            flex:1 1 auto;
            min-height:0;
            overflow-y:auto;
            overflow-x:hidden;
            padding:12px 10px 14px;
            background:#fff;
            -webkit-overflow-scrolling:touch;
        }
        .cityma-robin-msg{
            max-width:90%;
            margin:0 0 9px;
            padding:11px 12px;
            border-radius:15px;
            font-size:11.5px;
            line-height:1.48;
            white-space:pre-wrap;
            overflow-wrap:anywhere;
            word-break:break-word;
        }
        .cityma-robin-msg.is-assistant{
            margin-right:auto;
            background:#fff;
            border:1px solid #dfe3e8;
            color:#23272d;
            box-shadow:0 2px 7px rgba(0,0,0,.04);
        }
        .cityma-robin-msg.is-user{
            margin-left:auto;
            background:#fff2e8;
            border:1px solid #ffd0ae;
            color:#4b250b;
        }
        .cityma-robin-msg.is-pending{
            color:#737a83;
            font-style:italic;
        }

        .cityma-robin-help{
            flex:0 0 auto;
            padding:5px 8px 0;
            background:#fff;
        }
        .cityma-robin-help button{
            border:0;
            border-radius:8px;
            background:#eadbff;
            color:#5b3a70;
            padding:7px 9px;
            font-size:9px;
            font-weight:850;
            cursor:pointer;
        }

        .cityma-robin-form{
            flex:0 0 auto;
            display:grid;
            grid-template-columns:minmax(0,1fr) 42px 42px;
            align-items:end;
            gap:5px;
            padding:7px 8px calc(7px + env(safe-area-inset-bottom));
            background:#fff;
            border-top:1px solid #e4e6e9;
        }
        .cityma-robin-input{
            width:100%;
            min-width:0;
            min-height:42px;
            max-height:100px;
            resize:none;
            border:1.5px solid #222;
            border-radius:22px;
            background:#fff;
            color:#222;
            padding:10px 12px;
            font:500 10.5px/1.35 Arial,sans-serif;
            outline:none;
        }
        .cityma-robin-input:focus{
            border-color:#ff6b00;
            box-shadow:0 0 0 2px rgba(255,107,0,.10);
        }
        .cityma-robin-input::placeholder{
            color:#8b9098;
            font-size:9px;
            font-weight:500;
            opacity:1;
        }

        /* Bottom action icon #1: clean black microphone, no emoji. */
        .cityma-robin-mic{
            width:42px;height:42px;
            border:0;
            border-radius:50%;
            background:#fff;
            color:#111;
            display:grid;
            place-items:center;
            padding:0;
            cursor:pointer;
        }
        .cityma-robin-mic svg{
            width:27px;height:27px;
            display:block;
            stroke:#111;
            fill:none;
            stroke-width:2.05;
            stroke-linecap:round;
            stroke-linejoin:round;
        }
        .cityma-robin-mic.is-listening{
            background:#111;
        }
        .cityma-robin-mic.is-listening svg{
            stroke:#fff;
        }

        /* Bottom action icon #2: white up-arrow in a black circle. */
        .cityma-robin-send{
            width:42px;height:42px;
            border:0;
            border-radius:50%;
            background:#050505;
            color:#fff;
            display:grid;
            place-items:center;
            padding:0;
            cursor:pointer;
        }
        .cityma-robin-send svg{
            width:22px;height:22px;
            display:block;
            stroke:#fff;
            fill:none;
            stroke-width:2.2;
            stroke-linecap:round;
            stroke-linejoin:round;
        }
        .cityma-robin-send:active{transform:scale(.96)}
        .cityma-robin-send{
            position:relative !important;
            z-index:120 !important;
            pointer-events:auto !important;
            touch-action:manipulation !important;
            -webkit-tap-highlight-color:transparent !important;
        }
        .cityma-robin-form{pointer-events:auto !important;position:relative !important;z-index:110 !important;}

        .cityma-robin-note{
            flex:0 0 auto;
            padding:0 8px 6px;
            background:#fff;
            color:#16a34a;
            text-align:center;
            font-size:8px;
            line-height:1.25;
        }
        body.cityma-robbang-fullscreen-open{
            overflow:hidden !important;
        }

        @media(max-width:420px){
            .cityma-robin-head{padding:7px 8px 9px}
            .cityma-robin-head-main{grid-template-columns:100px minmax(0,1fr);min-height:108px}
            .cityma-robin-mascot{width:100px;height:112px;margin:-4px 0 -9px -4px}
            .cityma-robin-mascot img{width:100px;height:112px}
            .cityma-robin-copy{padding-right:31px}
            .cityma-robin-brand-word{font-size:17px}
            .cityma-robin-role{font-size:14.5px}
            .cityma-robin-promise{font-size:9.5px}
        }

        /* CITYMA-907 · 6-product organizer.
           Hidden by default; opens only from Powered by CityMarketeer. */
        .cityma-product-family-modal{
            display:none;
            position:fixed;
            inset:0;
            z-index:10040;
            background:rgba(0,0,0,.78);
            padding:16px;
            align-items:center;
            justify-content:center;
        }
        .cityma-product-family-modal.is-open{
            display:flex;
        }
        .cityma-product-family-card{
            width:min(760px,100%);
            max-height:min(84vh,760px);
            overflow:auto;
            background:#fff;
            color:#171717;
            border-radius:22px;
            padding:18px;
            box-shadow:0 22px 70px rgba(0,0,0,.48);
        }
        .cityma-product-family-top{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:12px;
            margin-bottom:13px;
        }
        .cityma-product-family-top b{font-size:21px}
        .cityma-product-family-top span{
            display:block;
            color:#777;
            font-size:11px;
            margin-top:3px;
        }
        .cityma-product-family-close{
            border:0;
            background:#f1f3f4;
            border-radius:50%;
            width:36px;
            height:36px;
            font-size:21px;
            cursor:pointer;
        }
        .cityma-product-family-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:8px;
        }
        .cityma-product-family-item{
            display:grid;
            grid-template-columns:54px minmax(0,1fr);
            gap:10px;
            align-items:center;
            padding:11px;
            border:1px solid #e1e4e8;
            border-radius:13px;
            text-decoration:none;
            color:#171717;
            background:#fff;
        }
        .cityma-product-family-item.is-current{
            border-color:#ff6500;
            background:#fff6ef;
        }
        .cityma-product-family-price{
            font-weight:950;
            color:#ff6500;
            font-size:15px;
        }
        .cityma-product-family-name{
            font-weight:900;
            font-size:13px;
        }
        .cityma-product-family-desc{
            font-size:10px;
            color:#777;
            margin-top:2px;
            line-height:1.25;
        }
        .cityma-product-family-more{
            display:flex;
            justify-content:flex-end;
            margin-top:12px;
        }
        .cityma-product-family-more a{
            background:#111;
            color:#fff;
            padding:9px 13px;
            border-radius:999px;
            font-size:11px;
            font-weight:900;
            text-decoration:none;
        }
        @media(max-width:560px){
            .cityma-product-family-grid{grid-template-columns:1fr}
            .cityma-product-family-card{padding:15px}
            .cityma-product-family-item{padding:9px}
        }


        /* ==================================================================
           CITYMA PC FIXED PHONE MASTER · TOP LOCK · 2026-09-07
           Desktop only:
           - keep the same 360 x 780 phone face
           - horizontal center only
           - attach the phone master to the TOP of the browser page
           - never vertically center it in the black canvas
           - phone/mobile behavior remains unchanged
           ================================================================== */
        @media (min-width:700px) {
            body.cityma-master-desktop-host {
                align-items:flex-start !important;
                justify-content:center !important;
                padding-top:0 !important;
            }
            body.cityma-master-desktop-host .app-container {
                transform-origin:top center !important;
                margin:0 !important;
            }
        }


        /* CITYMA-907 R10 · public identity + customer-first Robin UI */
        .cityma-public-nickname{
            position:absolute;left:1px;top:-9px;z-index:4;
            max-width:96%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
            color:#fff;font-size:7.5px;line-height:1;font-weight:750;letter-spacing:.25px;
            text-shadow:0 1px 2px rgba(0,0,0,.85);opacity:.88;text-align:left;
        }
        body.direct-ad-site .platform-brand-area{padding-top:0 !important;}
        body.direct-ad-site .info-box .price-action-row{margin-top:4px !important;}
        .cityma-robbang-mark{background:transparent !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;}
        .cityma-robbang-mark img{object-fit:contain !important;filter:none !important;}
        .cityma-robbang-brand-name{color:#ff6500;font-weight:950;}

        /* Customer-service room: compact yellow header; conversation is primary. */
        .cityma-robin-head{padding:5px 8px 5px !important;}
        .cityma-robin-head-main{grid-template-columns:76px minmax(0,1fr) !important;gap:6px !important;min-height:72px !important;align-items:center !important;}
        .cityma-robin-mascot{position:relative !important;width:76px !important;height:74px !important;margin:0 !important;overflow:visible !important;align-self:center !important;}
        .cityma-robin-mascot img{width:74px !important;height:74px !important;object-fit:contain !important;}
        .cityma-robin-copy{padding:1px 32px 1px 0 !important;align-self:center !important;}
        .cityma-robin-brandrow{margin:0 0 2px !important;}
        .cityma-robin-brand-word{font-size:18px !important;line-height:1 !important;}
        .cityma-robin-role{font-size:12.8px !important;line-height:1.12 !important;}
        .cityma-robbang-fullscreen-close{top:7px !important;right:7px !important;width:31px !important;height:31px !important;}
        .cityma-robbang-chest-brand{
            position:absolute;left:50%;top:47%;transform:translate(-5%,-50%) rotate(-2deg);
            padding:1px 2px;border-radius:2px;background:rgba(255,255,255,.82);
            color:#ff4a19;font:950 6.7px/1 Arial,sans-serif;letter-spacing:-.25px;
            text-shadow:0 .4px 0 #fff;pointer-events:none;
        }

        /* ================================================================
           CITYMA-908 HAPPY R12 · FINAL HOME FACE REFINEMENT
           1) permanent Shared Nickname at the physical left-top
           2) no public ADNO/search box in the top-right
           3) lower progress + price/action + Robin launcher as one compact stack
           4) keep title/description readable without overlap
           5) compact RobBang promise line inside the opened Robin room
           ================================================================ */
        .viewer-top-bar > .cityma-public-nickname-global{
            position:absolute !important;
            left:11px !important;
            top:5px !important;
            z-index:130 !important;
            max-width:46% !important;
            color:#fff !important;
            font:700 10.5px/1.05 Arial,sans-serif !important;
            letter-spacing:.12px !important;
            text-shadow:0 1px 3px rgba(0,0,0,.92) !important;
            opacity:.96 !important;
            white-space:nowrap !important;
            overflow:hidden !important;
            text-overflow:ellipsis !important;
            text-align:left !important;
            pointer-events:none !important;
        }
        /* Retire the older nickname location inside the business block. */
        .top-left-brand-box > .cityma-public-nickname{display:none !important;}

        /* ADNO remains an internal management/reference key; do not spend the
           public ShortsSite header on it. */
        .platform-brand-area .adid-search-wrap{display:none !important;}

        /* Move the entire lower stack downward and make it shallower so
           the video area gains space on both desktop and S23 mobile.
           Result: progress line + price row + description + RobBang bar
           sit tighter to the bottom navigation. */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            height:130px !important;
            min-height:130px !important;
            max-height:130px !important;
            bottom:0 !important;
            padding:0 10px !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .info-inner,
        body.direct-ad-site .info-box .info-inner{
            display:grid !important;
            grid-template-rows:2px 36px 40px 52px !important;
            height:130px !important;
            min-height:130px !important;
            max-height:130px !important;
            gap:0 !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .progress-bar-wrap,
        body.direct-ad-site .info-box .progress-bar-wrap{
            grid-row:1 !important;
            position:relative !important;
            top:0 !important;
            margin:0 !important;
            height:2px !important;
        }
        body.cityma-marketplace .info-box .price-action-row,
        body.direct-ad-site .info-box .price-action-row{
            grid-row:2 !important;
            position:relative !important;
            top:0 !important;
            margin:0 !important;
            height:36px !important;
            min-height:36px !important;
            max-height:36px !important;
            align-self:end !important;
        }
        body.cityma-marketplace .info-box .title-text,
        body.direct-ad-site .info-box .title-text{
            display:none !important;
        }
        body.cityma-marketplace .info-box .desc-bg,
        body.direct-ad-site .info-box .desc-bg{
            grid-row:3 !important;
            position:relative !important;
            top:0 !important;
            height:40px !important;
            min-height:40px !important;
            max-height:40px !important;
            margin:0 !important;
            padding:2px 0 0 0 !important;
            border-left:0 !important;
            font-size:9.5px !important;
            line-height:1.18 !important;
            -webkit-line-clamp:3 !important;
            display:-webkit-box !important;
            -webkit-box-orient:vertical !important;
            overflow:hidden !important;
            text-shadow:none !important;
            align-self:end !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-launcher,
        body.direct-ad-site .info-box .cityma-robbang-launcher{
            grid-row:4 !important;
            align-self:end !important;
            position:relative !important;
            top:0 !important;
            width:calc(100% + 20px) !important;
            height:52px !important;
            min-height:52px !important;
            max-height:52px !important;
            margin:0 -10px !important;
            padding:0 4px 0 !important;
            overflow:visible !important;
            z-index:2800 !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-link,
        body.direct-ad-site .info-box .cityma-robbang-link{
            min-height:48px !important;
            height:48px !important;
        }
        /* The media now extends farther down for all view modes. */
        body.cityma-media-landscape .video-wrap,
        body.cityma-media-portrait .video-wrap,
        body.cityma-media-square .video-wrap{
            bottom:130px !important;
        }



        /* ================================================================
           CITYMA-908 HAPPY R78 · DESC-FONT+10 / FULL-FRONT / NO-GRADIENT / BOTTOM-LOCK
           - Portrait media fills the complete front viewer.
           - All Home media scrims/gradients are removed.
           - Bottom nav is the physical floor.
           - RobBang sits directly above that floor.
           - Description reserves five compact lines (up to 300 chars).
           - Progress + price/action sit immediately above Description.
           ================================================================ */

        /* One physical phone face: viewer occupies the complete app height;
           the navigation overlays the bottom 64px. This lets the lower stack
           lock exactly to the navigation instead of floating above it. */
        body.cityma-marketplace .viewer,
        body.direct-ad-site .viewer{
            height:100% !important;
            min-height:100% !important;
            max-height:100% !important;
            overflow:hidden !important;
        }
        body.cityma-marketplace .bottom-nav,
        body.direct-ad-site .bottom-nav{
            position:absolute !important;
            left:0 !important;
            right:0 !important;
            bottom:0 !important;
            height:var(--nav-h,64px) !important;
            margin:0 !important;
            z-index:5000 !important;
            background:#000 !important;
        }

        /* Portrait Shorts/video becomes the full front surface from the
           physical top through the information area. */
        body.cityma-media-portrait .video-wrap{
            top:0 !important;
            bottom:0 !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            background:#000 !important;
        }
        body.cityma-media-portrait .video-wrap .cityeer-square-frame{
            width:100% !important;
            height:100% !important;
            max-width:none !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            background:#000 !important;
        }
        body.cityma-media-portrait .cityeer-square-frame.media-portrait > #mediaPlayer{
            position:absolute !important;
            inset:0 !important;
            width:100% !important;
            height:100% !important;
            min-width:100% !important;
            min-height:100% !important;
            max-width:none !important;
            max-height:none !important;
            object-fit:cover !important;
            object-position:center center !important;
            transform:none !important;
            background:#000 !important;
        }

        /* Remove every Home media shading layer. Text and controls remain
           readable through their own solid/outlined UI, not a video scrim. */
        body .app-container .cityeer-square-frame::before,
        body .app-container .cityeer-square-frame::after,
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::before,
        body.cityma-media-portrait .cityeer-square-frame.media-portrait::after,
        body.cityma-media-square .cityeer-square-frame.media-square::before,
        body.cityma-media-square .cityeer-square-frame.media-square::after{
            content:none !important;
            display:none !important;
            opacity:0 !important;
            width:0 !important;
            height:0 !important;
            background:none !important;
        }
        body.cityma-marketplace .viewer-top-bar,
        body.direct-ad-site .viewer-top-bar,
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            background:none !important;
            background-image:none !important;
        }
        .video-wrap.image-mode{background:#000 !important;background-image:none !important;}
        .action-btn-inline{background:#ff6600 !important;background-image:none !important;}

        /* CITYMA-908 R81 · force the whole lower content stack 0.25 inch upward
           while the bottom navigation remains physically fixed.
           Use translateY(-24px) instead of relying on a larger bottom offset,
           so the movement is visually explicit on desktop and S23. */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            position:absolute !important;
            left:0 !important;
            right:0 !important;
            top:auto !important;
            bottom:var(--nav-h,64px) !important;
            transform:translateY(-24px) !important;
            height:150px !important;
            min-height:150px !important;
            max-height:150px !important;
            padding:0 10px !important;
            margin:0 !important;
            overflow:visible !important;
            z-index:4000 !important;
        }
        body.cityma-marketplace .info-box .info-inner,
        body.direct-ad-site .info-box .info-inner{
            display:grid !important;
            grid-template-rows:2px 36px 60px 52px !important;
            height:150px !important;
            min-height:150px !important;
            max-height:150px !important;
            gap:0 !important;
            margin:0 !important;
            padding:0 !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .progress-bar-wrap,
        body.direct-ad-site .info-box .progress-bar-wrap{
            grid-row:1 !important;
            position:relative !important;
            top:0 !important;
            height:2px !important;
            min-height:2px !important;
            max-height:2px !important;
            margin:0 !important;
        }
        body.cityma-marketplace .info-box .price-action-row,
        body.direct-ad-site .info-box .price-action-row{
            grid-row:2 !important;
            position:relative !important;
            top:0 !important;
            height:36px !important;
            min-height:36px !important;
            max-height:36px !important;
            margin:0 !important;
            align-self:end !important;
        }
        body.cityma-marketplace .info-box .title-text,
        body.direct-ad-site .info-box .title-text{
            display:none !important;
        }
        body.cityma-marketplace .info-box .desc-bg,
        body.direct-ad-site .info-box .desc-bg{
            grid-row:3 !important;
            position:relative !important;
            top:0 !important;
            height:60px !important;
            min-height:60px !important;
            max-height:60px !important;
            margin:0 !important;
            padding:0 !important;
            border:0 !important;
            font-size:11.76px !important; /* R84: +5% from R83 */
            line-height:1.006 !important; /* R84: +5% line spacing from R83 */
            display:-webkit-box !important;
            -webkit-box-orient:vertical !important;
            -webkit-line-clamp:5 !important;
            overflow:hidden !important;
            text-overflow:ellipsis !important;
            text-shadow:0 1px 2px rgba(0,0,0,.95) !important;
            align-self:end !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-launcher,
        body.direct-ad-site .info-box .cityma-robbang-launcher{
            grid-row:4 !important;
            position:relative !important;
            top:0 !important;
            align-self:end !important;
            width:calc(100% + 20px) !important;
            height:52px !important;
            min-height:52px !important;
            max-height:52px !important;
            margin:0 -10px !important;
            padding:0 4px !important;
            overflow:visible !important;
            z-index:4500 !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-link,
        body.direct-ad-site .info-box .cityma-robbang-link{
            height:50px !important;
            min-height:50px !important;
            max-height:50px !important;
            margin:0 !important;
        }

        @media(max-width:420px){
            body.cityma-marketplace .info-box .desc-bg,
            body.direct-ad-site .info-box .desc-bg{
                font-size:11.56px !important; /* R84 mobile: +5% from R83 */
                line-height:0.996 !important; /* R84 mobile: +5% line spacing from R83 */
            }
        }

        .cityma-robin-powerline{
            margin-top:4px;
            color:#6b5200;
            font:700 8.6px/1.15 Arial,sans-serif;
            letter-spacing:.01em;
            white-space:normal;
        }
        @media(max-width:420px){
            .viewer-top-bar > .cityma-public-nickname-global{font-size:10px !important;left:9px !important;}
            .cityma-robin-powerline{font-size:8.1px;}
        }

        /* ================================================================
           CITYMA-908 R85 · ROBBANG MOBILE VIEWPORT + HALF YELLOW HEADER
           - RobBang opens at the very top of the web viewport.
           - No automatic keyboard on open.
           - Header is about half the previous visual height.
           - Robot is lifted; chest RobBang label is removed.
           - Yellow header copy stops at the RobBang AI General Manager identity.
           ================================================================ */
        .cityma-robbang-fullscreen{
            max-width:650px !important;
        }
        .cityma-robin-head{
            flex:0 0 62px !important;
            height:62px !important;
            min-height:62px !important;
            max-height:62px !important;
            padding:2px 7px !important;
            overflow:hidden !important;
        }
        .cityma-robin-head-main{
            grid-template-columns:64px minmax(0,1fr) !important;
            gap:6px !important;
            height:58px !important;
            min-height:58px !important;
            max-height:58px !important;
            align-items:start !important;
        }
        .cityma-robin-mascot{
            width:64px !important;
            height:68px !important;
            margin:-7px 0 0 -2px !important;
            align-self:start !important;
            overflow:hidden !important;
            transform:none !important;
        }
        .cityma-robin-mascot img{
            width:64px !important;
            height:68px !important;
            object-fit:contain !important;
            object-position:center top !important;
        }
        .cityma-robbang-chest-brand{display:none !important;}
        .cityma-robin-copy{
            padding:3px 32px 0 0 !important;
            align-self:start !important;
        }
        .cityma-robin-brandrow{margin:0 0 1px !important;}
        .cityma-robin-brand-word{font-size:15.5px !important;line-height:1 !important;}
        .cityma-robin-role{font-size:11.3px !important;line-height:1.05 !important;}
        .cityma-robin-role strong{font-size:11.8px !important;}
        .cityma-robin-powerline{display:none !important;}
        .cityma-robbang-fullscreen-close{
            top:5px !important;
            right:6px !important;
            width:28px !important;
            height:28px !important;
            font-size:18px !important;
        }
        @media(max-width:420px){
            .cityma-robin-head{
                height:62px !important;
                min-height:62px !important;
                max-height:62px !important;
                padding:2px 7px !important;
            }
            .cityma-robin-head-main{
                grid-template-columns:62px minmax(0,1fr) !important;
                height:58px !important;
                min-height:58px !important;
                max-height:58px !important;
            }
            .cityma-robin-mascot{width:62px !important;height:67px !important;margin:-7px 0 0 -2px !important;}
            .cityma-robin-mascot img{width:62px !important;height:67px !important;}
            .cityma-robin-copy{padding:3px 31px 0 0 !important;}
            .cityma-robin-brand-word{font-size:15px !important;}
            .cityma-robin-role{font-size:11px !important;}
            .cityma-robin-role strong{font-size:11.5px !important;}
        }


        /* ================================================================
           CITYMA-908 R86 · ROBIN VISIBILITY + STABLE CHAT SEND
           - Home launcher title is 2x larger.
           - Greeting is larger, regular-weight and may use two lines.
           - RobBang room begins immediately above the advertiser address box
             (therefore directly below the Happy Karaoke identity area).
           - Yellow header is reduced to 50px.
           - Chat send never submits/navigates the Home page.
           ================================================================ */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            height:166px !important;
            min-height:166px !important;
            max-height:166px !important;
        }
        body.cityma-marketplace .info-box .info-inner,
        body.direct-ad-site .info-box .info-inner{
            grid-template-rows:2px 36px 60px 68px !important;
            height:166px !important;
            min-height:166px !important;
            max-height:166px !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-launcher,
        body.direct-ad-site .info-box .cityma-robbang-launcher{
            height:68px !important;
            min-height:68px !important;
            max-height:68px !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-link,
        body.direct-ad-site .info-box .cityma-robbang-link{
            height:66px !important;
            min-height:66px !important;
            max-height:66px !important;
        }
        .cityma-robbang-title{
            font-size:26px !important;
            line-height:1 !important;
            font-weight:800 !important;
            letter-spacing:-.5px !important;
            overflow:visible !important;
            text-overflow:clip !important;
        }
        .cityma-robbang-sub{
            margin-top:2px !important;
            font-size:13.5px !important;
            line-height:1.08 !important;
            font-weight:400 !important;
            color:#747a82 !important;
            white-space:normal !important;
            display:-webkit-box !important;
            -webkit-box-orient:vertical !important;
            -webkit-line-clamp:2 !important;
            overflow:hidden !important;
        }

        /* Opened RobBang: compact yellow identity strip only. */
        .cityma-robin-head{
            flex:0 0 50px !important;
            height:50px !important;
            min-height:50px !important;
            max-height:50px !important;
            padding:1px 6px !important;
        }
        .cityma-robin-head-main{
            grid-template-columns:50px minmax(0,1fr) !important;
            gap:5px !important;
            height:48px !important;
            min-height:48px !important;
            max-height:48px !important;
            align-items:center !important;
        }
        .cityma-robin-mascot{
            width:50px !important;
            height:52px !important;
            margin:-4px 0 0 -1px !important;
            align-self:start !important;
        }
        .cityma-robin-mascot img{
            width:50px !important;
            height:52px !important;
        }
        .cityma-robin-copy{
            padding:1px 27px 0 0 !important;
            align-self:center !important;
        }
        .cityma-robin-brandrow{margin:0 0 1px !important;}
        .cityma-robin-brand-word{font-size:13.5px !important;line-height:1 !important;font-weight:800 !important;}
        .cityma-robin-role{font-size:12.2px !important;line-height:1.04 !important;font-weight:600 !important;letter-spacing:0 !important;}
        .cityma-robin-role strong{font-size:12.2px !important;font-weight:700 !important;}
        .cityma-robbang-fullscreen-close{
            top:4px !important;
            right:5px !important;
            width:24px !important;
            height:24px !important;
            font-size:16px !important;
        }

        /* Make the first Robin greeting unmistakably readable without heavy bold. */
        .cityma-robin-msg.is-welcome{
            max-width:94% !important;
            font-size:15.5px !important;
            line-height:1.35 !important;
            font-weight:400 !important;
            color:#20242a !important;
            padding:12px 13px !important;
        }
        .cityma-robin-msg.is-assistant:not(.is-welcome),
        .cityma-robin-msg.is-user{
            font-size:13px !important;
            line-height:1.42 !important;
            font-weight:400 !important;
        }

        @media(max-width:420px){
            .cityma-robbang-title{font-size:25px !important;}
            .cityma-robbang-sub{font-size:13px !important;}
            .cityma-robin-head{height:50px !important;min-height:50px !important;max-height:50px !important;padding:1px 6px !important;}
            .cityma-robin-head-main{grid-template-columns:48px minmax(0,1fr) !important;height:48px !important;min-height:48px !important;max-height:48px !important;}
            .cityma-robin-mascot{width:48px !important;height:51px !important;margin:-4px 0 0 -1px !important;}
            .cityma-robin-mascot img{width:48px !important;height:51px !important;}
            .cityma-robin-copy{padding:1px 26px 0 0 !important;}
            .cityma-robin-brand-word{font-size:13px !important;}
            .cityma-robin-role,.cityma-robin-role strong{font-size:11.8px !important;}
            .cityma-robin-msg.is-welcome{font-size:15px !important;}
        }


        /* ================================================================
           CITYMA-908 R87 · HOME ROBBANG FRONT LAYER
           Keep the bottom navigation physically fixed, but allow the Home
           RobBang launcher to render in front of its black background when
           their vertical areas overlap. No geometry or spacing changes.
           ================================================================ */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            z-index:6000 !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-launcher,
        body.direct-ad-site .info-box .cityma-robbang-launcher{
            z-index:7000 !important;
            isolation:isolate !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-link,
        body.direct-ad-site .info-box .cityma-robbang-link{
            position:relative !important;
            z-index:7100 !important;
        }

        /* ================================================================
           CITYMA-908 R88 · TRUE ROBBANG OVER NAV FIX
           R87 raised the child layers, but .viewer itself still created a
           z-index:1 stacking context and overflow:hidden clipping boundary.
           Remove that parent stacking/clipping so the RobBang launcher can
           actually paint above the fixed black bottom navigation while the
           video remains behind it.
           ================================================================ */
        body.cityma-marketplace .viewer,
        body.direct-ad-site .viewer{
            overflow:visible !important;
            z-index:auto !important;
        }
        body.cityma-marketplace .video-wrap,
        body.direct-ad-site .video-wrap{
            z-index:1 !important;
            overflow:hidden !important;
        }
        body.cityma-marketplace .bottom-nav,
        body.direct-ad-site .bottom-nav{
            z-index:5000 !important;
        }
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            z-index:6000 !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-launcher,
        body.direct-ad-site .info-box .cityma-robbang-launcher{
            z-index:7000 !important;
            overflow:visible !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-link,
        body.direct-ad-site .info-box .cityma-robbang-link{
            z-index:7100 !important;
        }

        /* ================================================================
           CITYMA-908 R89 · HOME ROBBANG COMPACT 10% + TITLE -15%
           - Keep the R88 front-layer fix.
           - Reduce the Home RobBang pill height by about 10%.
           - Reduce the Robin in RobBang title by 15%.
           - Greeting is exactly two readable lines.
           ================================================================ */
        body.cityma-marketplace .info-box,
        body.direct-ad-site .info-box{
            height:159px !important;
            min-height:159px !important;
            max-height:159px !important;
        }
        body.cityma-marketplace .info-box .info-inner,
        body.direct-ad-site .info-box .info-inner{
            grid-template-rows:2px 36px 60px 61px !important;
            height:159px !important;
            min-height:159px !important;
            max-height:159px !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-launcher,
        body.direct-ad-site .info-box .cityma-robbang-launcher{
            height:61px !important;
            min-height:61px !important;
            max-height:61px !important;
        }
        body.cityma-marketplace .info-box .cityma-robbang-link,
        body.direct-ad-site .info-box .cityma-robbang-link{
            height:59px !important;
            min-height:59px !important;
            max-height:59px !important;
        }
        .cityma-robbang-title{
            font-size:22.1px !important;
            line-height:1 !important;
        }
        .cityma-robbang-sub{
            font-size:13.5px !important;
            line-height:1.08 !important;
            font-weight:400 !important;
            white-space:normal !important;
            display:block !important;
            overflow:hidden !important;
        }
        @media(max-width:420px){
            .cityma-robbang-title{font-size:21.25px !important;}
            .cityma-robbang-sub{font-size:13px !important;}
        }

        /* ================================================================
           CITYMA-908 R90 · HOME ROBBANG 3-LINE GREETING
           - Remove the Home "Robin in RobBang" title.
           - Use three clear black greeting lines.
           - Keep the advertiser name on the final line.
           ================================================================ */
        .cityma-robbang-title{display:none !important;}
        .cityma-robbang-copy{
            gap:0 !important;
            justify-content:center !important;
        }
        .cityma-robbang-sub{
            color:#000 !important;
            font-size:13.5px !important;
            line-height:1.05 !important;
            font-weight:400 !important;
            white-space:normal !important;
            overflow:visible !important;
            text-overflow:clip !important;
        }
        @media(max-width:420px){
            .cityma-robbang-sub{font-size:13px !important;line-height:1.05 !important;}
        }

        /* ================================================================
           CITYMA-908 R93 · CONVERSATION-FIRST ROBBANG
           - Remove the yellow identity box completely.
           - Keep only the floating close button.
           - Move Robin's welcome conversation into the former header space.
           - Match the message input text size to the welcome text.
           - Make sent visitor questions unmistakably visible in the log.
           ================================================================ */
        .cityma-robin-head{
            flex:0 0 0 !important;
            height:0 !important;
            min-height:0 !important;
            max-height:0 !important;
            padding:0 !important;
            margin:0 !important;
            background:transparent !important;
            border:0 !important;
            overflow:visible !important;
            position:relative !important;
            z-index:20 !important;
            pointer-events:none !important;
        }
        .cityma-robin-head-main{
            display:none !important;
        }
        .cityma-robbang-fullscreen-close{
            top:8px !important;
            right:9px !important;
            width:32px !important;
            height:32px !important;
            border:0 !important;
            background:#111 !important;
            color:#fff !important;
            font-size:20px !important;
            z-index:50 !important;
            pointer-events:auto !important;
        }
        .cityma-robin-log{
            padding:12px 10px 10px !important;
            background:#fff !important;
            scroll-padding-bottom:14px !important;
        }
        .cityma-robin-msg.is-welcome{
            width:100% !important;
            max-width:100% !important;
            margin:0 0 10px !important;
            padding:4px 48px 12px 4px !important;
            border:0 !important;
            border-radius:0 !important;
            background:#fff !important;
            box-shadow:none !important;
            color:#20242a !important;
            font-size:18px !important;
            line-height:1.28 !important;
            font-weight:400 !important;
        }
        .cityma-robin-msg.is-user{
            max-width:92% !important;
            font-size:18px !important;
            line-height:1.28 !important;
            font-weight:400 !important;
            padding:10px 13px !important;
            margin-top:4px !important;
            margin-bottom:9px !important;
        }
        .cityma-robin-msg.is-assistant:not(.is-welcome){
            max-width:94% !important;
            font-size:18px !important;
            line-height:1.28 !important;
            font-weight:400 !important;
            padding:10px 13px !important;
        }
        /* CITYMA-908 R94 · conversation alignment refinement
           Customer question stays color-coded on the left.
           Robin's answers step inward by about 1/4 inch (24 CSS px)
           so question and answer are visually distinct at a glance. */
        .cityma-robin-msg.is-user{
            margin-left:0 !important;
            margin-right:auto !important;
            background:#fff2e8 !important;
            border-color:#ffd0ae !important;
        }
        .cityma-robin-msg.is-assistant:not(.is-welcome){
            margin-left:24px !important;
            margin-right:auto !important;
            max-width:calc(94% - 24px) !important;
        }

        .cityma-robin-form{
            grid-template-columns:minmax(0,1fr) 48px 48px !important;
            gap:6px !important;
            padding:7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
        }
        .cityma-robin-input{
            min-height:58px !important;
            max-height:118px !important;
            padding:13px 16px !important;
            font-family:Arial,sans-serif !important;
            font-size:18px !important;
            line-height:1.28 !important;
            font-weight:400 !important;
            border-radius:25px !important;
        }
        .cityma-robin-input::placeholder{
            font-size:16px !important;
            line-height:1.2 !important;
            font-weight:400 !important;
        }
        .cityma-robin-mic,
        .cityma-robin-send{
            width:48px !important;
            height:48px !important;
        }
        @media(max-width:420px){
            .cityma-robin-head{
                height:0 !important;
                min-height:0 !important;
                max-height:0 !important;
                padding:0 !important;
            }
            .cityma-robin-msg.is-welcome,
            .cityma-robin-msg.is-user,
            .cityma-robin-msg.is-assistant:not(.is-welcome),
            .cityma-robin-input{
                font-size:18px !important;
            }
            .cityma-robin-input::placeholder{font-size:16px !important;}
        }


        /* CITYMA-908 R93 · robust RobBang controls on desktop + Samsung/Android */
        .cityma-robin-form{isolation:isolate !important;overflow:visible !important;}
        .cityma-robin-mic,.cityma-robin-send{
            position:relative !important;
            z-index:32000 !important;
            pointer-events:auto !important;
            touch-action:manipulation !important;
            -webkit-user-select:none !important;
            user-select:none !important;
        }
        .cityma-robin-send::after,.cityma-robin-mic::after{
            content:"";position:absolute;inset:-6px;border-radius:50%;pointer-events:auto;
        }

        .cityma-robin-send:active,.cityma-robin-send.is-sending{
            transform:scale(.92) !important;
            opacity:.82 !important;
        }


        /* ================================================================
           CITYMA-909 R1 · SHORTSSITE HANDLE + DIRECT SEARCH GATEWAY
           - Public identity reads "ShortsSite.com/nickname".
           - Direct/free ShortsSite keeps City and Category down arrows.
           - Choosing an item enters the normal Open-City discovery result.
           - The advertiser Home itself remains the current page until a
             visitor deliberately chooses another City/Category.
           ================================================================ */
        .viewer-top-bar > .cityma-public-nickname-global .cityma-shortssite-handle-brand{
            font-weight:900 !important;
        }
        .viewer-top-bar > .cityma-public-nickname-global .cityma-shortssite-handle-id{
            font-weight:700 !important;
        }
        body.direct-ad-site .cityma-direct-search-gateway{
            position:relative !important;
            overflow:visible !important;
            z-index:2600 !important;
        }
        body.direct-ad-site .cityma-direct-search-gateway.is-open{
            z-index:2900 !important;
        }
        body.direct-ad-site .cityma-direct-dropdown-trigger{
            flex:1 1 auto !important;
            min-width:0 !important;
            width:auto !important;
            margin:0 !important;
            padding:0 !important;
            display:flex !important;
            align-items:center !important;
            justify-content:flex-end !important;
            gap:4px !important;
            background:transparent !important;
            border:0 !important;
            cursor:pointer !important;
            text-align:right !important;
        }
        body.direct-ad-site .cityma-direct-dropdown-trigger .material-icons-outlined{
            flex:0 0 auto !important;
            color:#00e5ff !important;
            font-size:15px !important;
            line-height:1 !important;
        }
        body.direct-ad-site .cityma-direct-name-box .cityma-direct-dropdown-trigger{
            width:100% !important;
        }
        body.direct-ad-site .cityma-direct-name-box .cityma-direct-box-label{
            display:none !important;
        }
        body.direct-ad-site .cityma-direct-name-box{
            min-height:31px !important;
            height:31px !important;
            flex-direction:row !important;
            align-items:center !important;
            justify-content:flex-end !important;
            padding:3px 7px !important;
            gap:4px !important;
        }
        body.direct-ad-site .cityma-direct-dropdown-menu{
            left:auto !important;
            right:0 !important;
            top:calc(100% + 3px) !important;
            width:min(230px,calc(100vw - 24px)) !important;
            max-height:280px !important;
            overflow-y:auto !important;
            z-index:3000 !important;
        }


        /* ================================================================
           CITYMA-909 R4 · FINAL WIDE/SQUARE MEDIA STAGE LOCK · 2026-09-09
           User rule (authoritative):
           - Every LANDSCAPE or SQUARE media uses the complete ShortsSite width.
           - Keep the original aspect ratio; never stretch vertically.
           - Vertically center the media inside the exact visible stage whose
             ceiling is the BOTTOM of the advertiser address box and whose
             floor is the TOP of the red video progress line.
           - This final block intentionally overrides every older landscape /
             square placement rule above (including old bottom-anchored square).
           ================================================================ */
        body.cityma-media-landscape .viewer .video-wrap,
        body.cityma-media-square .viewer .video-wrap{
            position:absolute !important;
            top:var(--cityma-wide-stage-top, var(--header-h)) !important;
            bottom:var(--cityma-wide-stage-bottom, 190px) !important;
            left:0 !important;
            right:0 !important;
            width:100% !important;
            height:auto !important;
            min-width:100% !important;
            max-width:100% !important;
            padding:0 !important;
            margin:0 !important;
            box-sizing:border-box !important;
            display:flex !important;
            align-items:center !important;
            justify-content:center !important;
            overflow:hidden !important;
            background:#000 !important;
        }
        body.cityma-media-landscape .viewer .video-wrap .cityeer-square-frame,
        body.cityma-media-square .viewer .video-wrap .cityeer-square-frame{
            position:relative !important;
            width:100% !important;
            min-width:100% !important;
            max-width:100% !important;
            height:100% !important;
            min-height:100% !important;
            max-height:100% !important;
            aspect-ratio:auto !important;
            margin:0 !important;
            padding:0 !important;
            display:block !important;
            overflow:hidden !important;
            background:#000 !important;
            box-shadow:none !important;
        }
        body.cityma-media-landscape .viewer .cityeer-square-frame.media-landscape > #mediaPlayer,
        body.cityma-media-square .viewer .cityeer-square-frame.media-square > #mediaPlayer{
            position:absolute !important;
            left:0 !important;
            right:auto !important;
            top:50% !important;
            bottom:auto !important;
            display:block !important;
            width:100% !important;
            min-width:100% !important;
            max-width:100% !important;
            height:auto !important;
            min-height:0 !important;
            max-height:none !important;
            margin:0 !important;
            padding:0 !important;
            transform:translateY(-50%) !important;
            transform-origin:center center !important;
            object-fit:contain !important;
            object-position:center center !important;
            background:#000 !important;
            border:0 !important;
        }
        body.cityma-media-landscape .viewer .cityeer-square-frame.media-landscape > iframe#mediaPlayer{
            aspect-ratio:16 / 9 !important;
        }
        body.cityma-media-square .viewer .cityeer-square-frame.media-square > iframe#mediaPlayer{
            aspect-ratio:1 / 1 !important;
        }


        /* ================================================================
           CITYMA-909 R5 · TRUE FULL-WIDTH WIDE/SQUARE + CAPTION LOCK
           Authoritative final rule:
           1) landscape AND square media = exactly 100% ShortsSite phone width;
           2) preserve original aspect ratio;
           3) vertically center between address-box bottom and red progress line;
           4) top/bottom captions sit inside the real picture edges, not in
              the black letterbox area. This block overrides all old manual
              landscape/square caption offsets above.
           ================================================================ */
        body.cityma-media-landscape .viewer .video-wrap,
        body.cityma-media-square .viewer .video-wrap{
            left:0 !important;
            right:0 !important;
            width:100% !important;
            max-width:100% !important;
            padding-left:0 !important;
            padding-right:0 !important;
            justify-content:center !important;
            align-items:stretch !important;
        }
        body.cityma-media-landscape .viewer .video-wrap .cityeer-square-frame,
        body.cityma-media-square .viewer .video-wrap .cityeer-square-frame{
            left:0 !important;
            width:100% !important;
            min-width:100% !important;
            max-width:100% !important;
            height:100% !important;
            margin:0 !important;
            padding:0 !important;
        }
        body.cityma-media-landscape .viewer .cityeer-square-frame.media-landscape > #mediaPlayer,
        body.cityma-media-square .viewer .cityeer-square-frame.media-square > #mediaPlayer{
            left:0 !important;
            right:auto !important;
            width:100% !important;
            min-width:100% !important;
            max-width:100% !important;
            margin-left:0 !important;
            margin-right:0 !important;
            transform:none !important;
            object-fit:contain !important;
            object-position:center center !important;
        }
        /* CITYMA-909 R5 · LANDSCAPE CAPTION EDGE FINAL
           Landscape only: captions are 2% inside the REAL video edges.
           Portrait Shorts and Square caption positions are intentionally unchanged. */
        body.cityma-media-landscape.cityma-media-fit-ready .cityma-media-caption-overlay.is-top,
        body.cityma-media-square.cityma-media-fit-ready .cityma-media-caption-overlay.is-top{
            top:var(--cityma-caption-top-y,8%) !important;
            bottom:auto !important;
            transform:none !important;
        }
        body.cityma-media-landscape.cityma-media-fit-ready .cityma-media-caption-overlay.is-bottom,
        body.cityma-media-square.cityma-media-fit-ready .cityma-media-caption-overlay.is-bottom{
            top:auto !important;
            bottom:var(--cityma-caption-bottom-y,8%) !important;
            transform:none !important;
        }
        body.cityma-media-landscape .cityma-media-caption-overlay,
        body.cityma-media-square .cityma-media-caption-overlay{
            left:2% !important;
            right:auto !important;
            width:96% !important;
            max-width:96% !important;
            box-sizing:border-box !important;
            text-align:center !important;
            z-index:9000 !important;
        }