/* * Agentlo Community — front-end stylesheet (v5). * * Brand split: * --acc = coral #fc5c64 (community accent: hero, status pills, * active tab underline, primary CTA fill) * --purple = #8B5CF6 (site-wide accent: logo "lo", tags, * "Add link" reply button, links to other site areas) * --like = red (heart, only when active) * --save = yellow (bookmark, only when active) * * Topbar + tabs are one sticky unit. Hero matches the home page's * .sell-card pattern (icon tile + head + full-width centered CTA, shine * animation, gradient shadow), in coral. * * My Requests view uses a separate compact card pattern with a Close * post button and compact reply bars. * * !important is used aggressively on backgrounds, borders, paddings, * and colors that GeneratePress otherwise wins via its enqueued * stylesheet (which loads AFTER our wp_head output). */ /* ─── Tokens ─── */ /* NOTE: .agcom-cm-modal MUST be in this list. The comment composer + thread modals (templates/_comments-ui.php) are rendered at the top of , OUTSIDE .agcom-app — without their own token scope, var(--card)/--t1/etc. resolve to nothing and the full-screen modal paints transparent (looks like stray "text at top and bottom of the page, no modal background"). */ .agcom-app, .agcom-overlay, .agcom-searchscreen, .agcom-lightbox, .agcom-cm-modal, .agcom-home-embed { --bg:#F5F4F0;--bg2:#EEEDE8;--card:#fff;--t1:#111;--t2:#666;--t3:#999; --bdr:#E8E7E3; --acc:#fc5c64; --accbg:rgba(252,92,100,.10); --acchov:#e74e57; --purple:#8B5CF6; --purplebg:rgba(139,92,246,.10); --grn:#10B981; --gnbg:rgba(16,185,129,.08); --gntx:#059669; --gnbd:rgba(16,185,129,.2); --ylw:#F59E0B; --ylbg:rgba(245,158,11,.10); --yltx:#92400E; --red:#EF4444; --rdbg:rgba(239,68,68,.10); --rdtx:#DC2626; --like:#EF4444; --save:#F59E0B; } body.dark .agcom-app, body.dark .agcom-overlay, body.dark .agcom-searchscreen, body.dark .agcom-lightbox, body.dark .agcom-cm-modal, body.dark .agcom-home-embed { --bg:#111114;--bg2:#131316;--card:#18181B;--t1:#FAFAFA;--t2:#8B8B93;--t3:#52525B; --bdr:#27272A; --accbg:rgba(252,92,100,.16); --purple:#A78BFA; --purplebg:rgba(167,139,250,.15); --grn:#34D399;--gnbg:rgba(52,211,153,.1);--gntx:#34D399; --like:#F87171; --save:#FBBF24; } /* ─── Self-contained body ─── */ .agcom-body { margin:0; padding:0; font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--t1); font-size:14px; min-height:100vh; min-height:100dvh; padding-bottom:84px; -webkit-text-size-adjust:100%; } body.dark.agcom-body { background:#111114; color:#FAFAFA; } .agcom-app { max-width:560px; margin:0 auto; background:var(--bg); color:var(--t1); min-height:100vh; min-height:100dvh; -webkit-tap-highlight-color:transparent; } /* Home-page embed — one feed card dropped onto the theme home page. Scoped class is in the token lists above so var(--card)/--t1/etc resolve. */ .agcom-home-embed { padding:2px 16px 6px; cursor:pointer; } .agcom-home-embed .agcom-post { max-width:600px; margin:0 auto; } .agcom-app *, .agcom-app *::before, .agcom-app *::after { box-sizing:border-box; } .agcom-app img { display:block; max-width:100%; } /* ─── GP override ─── */ .agcom-app button, .agcom-overlay button, .agcom-searchscreen button, .agcom-lightbox button { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; border:none !important; background:none !important; background-color:transparent !important; padding:0 !important; margin:0 !important; color:inherit !important; cursor:pointer !important; border-radius:0 !important; box-shadow:none !important; text-shadow:none !important; text-transform:none !important; letter-spacing:normal !important; line-height:1.35 !important; -webkit-appearance:none !important; appearance:none !important; } .agcom-app button:hover, .agcom-app button:focus, .agcom-app button:focus-visible, .agcom-app button:active, .agcom-overlay button:hover, .agcom-overlay button:focus, .agcom-overlay button:focus-visible, .agcom-overlay button:active, .agcom-searchscreen button:hover, .agcom-searchscreen button:focus, .agcom-searchscreen button:focus-visible, .agcom-searchscreen button:active { outline:none !important; box-shadow:none !important; background:none !important; background-color:transparent !important; text-decoration:none !important; } .agcom-app a { -webkit-tap-highlight-color:transparent !important; } .agcom-app input[type="text"], .agcom-app input[type="url"], .agcom-app input[type="number"], .agcom-app input[type="email"], .agcom-app input[type="search"], .agcom-app input[type="password"], .agcom-app textarea, .agcom-overlay input[type="text"], .agcom-overlay input[type="url"], .agcom-overlay input[type="number"], .agcom-overlay input[type="email"], .agcom-overlay textarea, .agcom-searchscreen input[type="search"], .agcom-searchscreen input[type="text"] { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; font-size:16px !important; background:var(--bg2) !important; background-color:var(--bg2) !important; border:1.5px solid var(--bdr) !important; border-radius:12px !important; color:var(--t1) !important; padding:12px 14px !important; margin:0 !important; outline:none !important; box-shadow:none !important; -webkit-appearance:none !important; appearance:none !important; line-height:1.4 !important; letter-spacing:normal !important; width:100% !important; max-width:100% !important; } .agcom-app input:focus, .agcom-overlay input:focus, .agcom-app textarea:focus, .agcom-overlay textarea:focus { background:var(--card) !important; background-color:var(--card) !important; border-color:var(--purple) !important; outline:none !important; box-shadow:none !important; } .agcom-app textarea { resize:vertical !important; min-height:90px !important; } /* ─── Topbar + tabs (sticky together) ─── */ .agcom-topbar { position:sticky; top:0; z-index:60; background:var(--card); } .agcom-topbar-row { display:flex; align-items:center; justify-content:space-between; padding:0 16px; height:54px; gap:8px; } .agcom-logo-wrap { display:flex; align-items:center; gap:8px; flex:none; } .agcom-logo { font-family:'Outfit',sans-serif !important; font-size:24px !important; font-weight:900 !important; font-style:italic !important; letter-spacing:-1px !important; text-decoration:none !important; display:inline-flex !important; color:var(--t1) !important; word-spacing:0; gap:0; flex:none; line-height:1 !important; } .agcom-beta-badge { display:inline-flex; align-items:center; padding:3px 6px; font-size:9px; font-weight:800; color:var(--purple); background:var(--purplebg); border-radius:6px; letter-spacing:.6px; line-height:1; text-transform:uppercase; flex:none; } .agcom-logo span { display:inline; } .agcom-logo .agent { color:var(--t1) !important; } .agcom-logo .lo { color:var(--purple) !important; } /* always site-wide purple, even in coral community scope */ .agcom-hdr-acts { display:flex; align-items:center; gap:2px; flex:none; } .agcom-icon-btn { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; flex:none !important; background:none !important; background-color:transparent !important; border:none !important; color:var(--t2) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:12px !important; position:relative !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; cursor:pointer !important; line-height:0 !important; } .agcom-icon-btn:active { background:var(--bg2) !important; } .agcom-icon-btn svg { width:20px !important; height:20px !important; display:block !important; } .agcom-badge-count { position:absolute !important; top:5px; right:5px; min-width:16px; height:16px; padding:0 4px; background:var(--acc); color:#fff; border-radius:999px; font-size:10px; font-weight:800; display:grid !important; place-items:center; border:1.5px solid var(--card); line-height:1; } .agcom-badge-count.is-hidden { display:none !important; } .agcom-search-trigger { flex:1 !important; min-width:0 !important; display:flex !important; align-items:center !important; gap:8px !important; background:var(--bg2) !important; border:none !important; cursor:pointer !important; border-radius:12px !important; padding:9px 14px !important; color:var(--t3) !important; font-size:13px !important; font-weight:500 !important; text-align:left !important; height:40px !important; font-family:inherit !important; } .agcom-search-trigger:hover, .agcom-search-trigger:focus, .agcom-search-trigger:active { background:var(--bg2) !important; color:var(--t3) !important; outline:none !important; } .agcom-search-trigger svg { width:16px !important; height:16px !important; flex:none; color:var(--t3); } .agcom-search-trigger span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Tabs glued to the topbar — more breathing room + icons */ .agcom-tabs { display:flex; padding:10px 8px; border-top:1px solid #f5f5f5; border-bottom:1px solid var(--bdr); background:var(--card); overflow-x:auto; scrollbar-width:none; gap:4px; } body.dark .agcom-tabs { border-top-color:#1f1f23; } .agcom-tabs::-webkit-scrollbar { display:none; } .agcom-tab { flex:1 !important; min-width:0 !important; padding:8px 6px !important; border:none !important; background:transparent !important; color:var(--t3) !important; font-size:13px !important; font-weight:600 !important; font-family:inherit !important; cursor:pointer !important; border-radius:0 !important; border-bottom:2px solid transparent !important; transition:color .15s,border-color .15s; white-space:nowrap; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; } .agcom-tab svg { width:15px !important; height:15px !important; flex:none; stroke-width:2; } .agcom-tab:hover { color:var(--t2) !important; } .agcom-tab.is-active { color:#000 !important; border-bottom-color:var(--acc) !important; font-weight:800 !important; } body.dark .agcom-tab.is-active { color:#fff !important; } .agcom-tab:hover, .agcom-tab:focus, .agcom-tab:active { background:transparent !important; outline:none !important; box-shadow:none !important; } /* ─── Hero — matches .sell-card pattern from home page (icon + head + CTA) ─── */ .agcom-hero-wrap { padding:12px 16px 2px; } .agcom-hero { position:relative; overflow:hidden; margin:0; background:linear-gradient(135deg,#ff7a45 0%,#fc5c64 55%,#f0506e 100%); border-radius:16px; padding:16px 16px 14px; box-shadow:0 8px 24px rgba(252,92,100,.22),0 2px 6px rgba(252,92,100,.16); display:flex; flex-direction:column; gap:12px; color:#fff; } body.dark .agcom-hero { box-shadow:0 6px 18px rgba(252,92,100,.22); } .agcom-hero::after { content:''; position:absolute; top:0; left:-100%; width:55%; height:100%; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%); pointer-events:none; animation:agcom-shine 3.6s ease-in-out infinite 1s; } .agcom-hero > * { position:relative; z-index:1; } @keyframes agcom-shine { 0% { left:-100%; } 25% { left:130%; } 100% { left:130%; } } .agcom-hero-head { display:flex; align-items:center; gap:12px; } .agcom-hero-icon { width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.18); color:#fff; display:grid; place-items:center; flex-shrink:0; border:1px solid rgba(255,255,255,.25); } .agcom-hero-icon svg { width:22px; height:22px; } .agcom-hero-text { flex:1; min-width:0; } .agcom-hero-title { font-size:16px; font-weight:800; color:#fff; letter-spacing:-.2px; line-height:1.2; display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .agcom-hero-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:9999px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.3); font-size:9px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#fff; } .agcom-hero-sub { font-size:12px; color:rgba(255,255,255,.92); margin-top:3px; line-height:1.4; } .agcom-hero-cta { display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; padding:11px 14px !important; background:#fff !important; background-color:#fff !important; color:#d63b48 !important; border:none !important; border-radius:10px !important; font-family:inherit !important; font-weight:800 !important; font-size:13px !important; cursor:pointer !important; letter-spacing:.2px !important; text-decoration:none !important; transition:transform .12s,background .15s; box-shadow:none !important; width:100% !important; } .agcom-hero-cta:hover { background:#F5F4F0 !important; color:#d63b48 !important; } .agcom-hero-cta:active { transform:scale(.98); background:#fff !important; color:#d63b48 !important; } .agcom-hero-cta svg { width:14px !important; height:14px !important; stroke:currentColor; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; } /* ─── Hero close button (same pattern as .aff-close on the home page) ─── */ .agcom-hero-close { position:absolute !important; top:8px; right:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; display:flex !important; align-items:center; justify-content:center; padding:0; z-index:3; transition:background .15s,transform .12s; } .agcom-hero-close:active { transform:scale(.9); background:rgba(0,0,0,.42); } .agcom-hero-close svg { width:10px !important; height:10px !important; stroke:#fff; fill:none; stroke-width:2.8; stroke-linecap:round; } .agcom-hero-wrap.agcom-hero-dismissed { display:none !important; } /* ─── Theme toggle button (copied from templates/new-home-page.php so the community header has the same sun/moon toggle on the far right) ─── */ .agcom-hdr-acts .ib { width:40px !important; height:40px !important; flex-shrink:0 !important; background:none !important; border:none !important; color:var(--t2) !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:12px !important; position:relative !important; transition:background .15s; padding:0 !important; box-sizing:border-box !important; cursor:pointer !important; } .agcom-hdr-acts .ib:active { background:var(--bg2) !important; } .agcom-hdr-acts .theme-btn { width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important; flex-shrink:0 !important; aspect-ratio:1/1; border:1.5px solid var(--bdr) !important; border-radius:9999px !important; box-sizing:border-box !important; padding:0 !important; line-height:0 !important; margin-left:4px; } .agcom-hdr-acts .theme-btn svg { width:15px !important; height:15px !important; } /* ─── Section bar (matches .sbar from new-home-page.php) — title + inline info button. Used above the filter slider for the "Link Requests" section + disclaimer trigger. ─── */ .agcom-sbar { display:flex; align-items:center; padding:18px 16px 4px; gap:4px; } .agcom-sbar-t { font-size:18px; font-weight:700; letter-spacing:-.3px; color:var(--t1); } /* Prefixed with `.agcom-app` so this beats the broad button-reset's `color:inherit !important` (which would otherwise pull the icon to the body text colour). Matches the home page .sbar-info exactly: muted-grey by default, brand accent on hover. */ .agcom-app .agcom-sbar-info { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:20px !important; height:20px !important; min-width:20px !important; flex-shrink:0 !important; aspect-ratio:1/1; padding:0 !important; margin-left:6px !important; background:none !important; border:none !important; border-radius:9999px !important; color:var(--t3) !important; cursor:pointer !important; transition:color .15s,background .15s; } .agcom-app .agcom-sbar-info:hover { color:var(--acc) !important; background:var(--bg2) !important; } .agcom-app .agcom-sbar-info svg { width:16px !important; height:16px !important; display:block; stroke-width:2; } /* ─── Filter slider — popular tag chips under the hero ─── */ .agcom-filters { display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; padding:12px 14px 6px; -webkit-overflow-scrolling:touch; } .agcom-filters::-webkit-scrollbar { display:none; } .agcom-app .agcom-filter { flex:none !important; padding:6px 13px !important; height:30px !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; border-radius:9999px !important; background:var(--bg2) !important; background-color:var(--bg2) !important; border:none !important; color:var(--t2) !important; font-family:inherit !important; font-weight:700 !important; font-size:12.5px !important; cursor:pointer !important; white-space:nowrap; transition:background .15s,color .15s; } .agcom-app .agcom-filter:hover { background:var(--bdr) !important; color:var(--t1) !important; } .agcom-app .agcom-filter.is-active { background:#000 !important; background-color:#000 !important; color:#fff !important; } .agcom-app .agcom-filter.is-active:hover { background:#000 !important; color:#fff !important; } body.dark .agcom-app .agcom-filter.is-active { background:#fff !important; background-color:#fff !important; color:#000 !important; } body.dark .agcom-app .agcom-filter.is-active:hover { background:#fff !important; color:#000 !important; } /* Hide the hero, sbar + filter slider on My Requests / Saved views. The JS toggles data-view on .agcom-app; "all" keeps everything, anything else trims to just the feed. */ .agcom-app[data-view="mine"] .agcom-hero-wrap, .agcom-app[data-view="mine"] .agcom-sbar, .agcom-app[data-view="mine"] .agcom-filters, .agcom-app[data-view="saved"] .agcom-hero-wrap, .agcom-app[data-view="saved"] .agcom-sbar, .agcom-app[data-view="saved"] .agcom-filters { display:none !important; } /* ─── Standalone find card (used on /request detail page — each reply gets its own card below the request, instead of nesting them inside the request's card via .agcom-finds) ─── */ .agcom-find-card-body { display:flex; gap:12px; padding:0 14px 12px; align-items:flex-start; } .agcom-find-card-thumb { width:96px !important; height:96px !important; border-radius:11px !important; object-fit:cover !important; flex:none !important; background:var(--bg2) !important; cursor:zoom-in; } .agcom-find-card-thumb-empty { width:96px; height:96px; border-radius:11px; background:var(--bg2); display:grid; place-items:center; color:var(--t3); flex:none; cursor:default !important; } .agcom-find-card-thumb-empty svg { width:28px; height:28px; } .agcom-find-card-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; padding-top:2px; } .agcom-find-card-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .agcom-find-card-platform { font-size:10px; font-weight:800; padding:3px 8px; border-radius:9999px; text-transform:uppercase; letter-spacing:.4px; background:var(--bg2); color:var(--t2); } .agcom-find-card-platform.agcom-find-platform-wd { background:rgba(245,158,11,.15); color:#92400E; } .agcom-find-card-platform.agcom-find-platform-tb { background:rgba(239,68,68,.12); color:#DC2626; } .agcom-find-card-platform.agcom-find-platform-al { background:rgba(59,130,246,.15); color:#1D4ED8; } body.dark .agcom-find-card-platform.agcom-find-platform-wd { background:rgba(251,191,36,.15); color:#FCD34D; } body.dark .agcom-find-card-platform.agcom-find-platform-tb { background:rgba(248,113,113,.15); color:#FCA5A5; } body.dark .agcom-find-card-platform.agcom-find-platform-al { background:rgba(96,165,250,.15); color:#BFDBFE; } .agcom-find-card-price { font-size:15px; font-weight:800; color:var(--purple); } .agcom-find-card-note { font-size:13.5px; line-height:1.45; color:var(--t1); word-break:break-word; } .agcom-post.agcom-find-card.is-top { border:1px solid var(--gnbd); } /* ─── Admin debug panel (only rendered for managers) ─── */ .agcom-debug-panel { background:#FFFDE7; border:1px solid #F0E58A; border-radius:12px; margin:8px 0 14px; font-family:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#3F2F00; overflow:hidden; } body.dark .agcom-debug-panel { background:#1F1B0A; border-color:#5C4E1F; color:#FCD34D; } .agcom-debug-panel summary { padding:10px 12px; cursor:pointer; font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; list-style:none; } .agcom-debug-panel summary::-webkit-details-marker { display:none; } .agcom-debug-panel summary::before { content:'▸'; display:inline-block; margin-right:4px; transition:transform .15s; } .agcom-debug-panel[open] summary::before { transform:rotate(90deg); } .agcom-debug-title { color:#7C5C00; } body.dark .agcom-debug-title { color:#FCD34D; } .agcom-debug-summary { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-weight:600; font-size:11px; } .agcom-debug-pill { padding:2px 7px; border-radius:9999px; background:rgba(0,0,0,.06); } .agcom-debug-pill.is-ok { background:#D1FAE5; color:#065F46; } .agcom-debug-pill.is-warn { background:#FEE2E2; color:#991B1B; } .agcom-debug-pill.is-bad { background:#E5E7EB; color:#374151; } .agcom-debug-pill.is-thumb { background:#DBEAFE; color:#1E40AF; } .agcom-debug-body { padding:0 12px 12px; max-height:70vh; overflow-y:auto; } .agcom-debug-toolbar { display:flex; align-items:center; gap:10px; padding:6px 0 10px; position:sticky; top:0; background:#FFFDE7; z-index:2; } body.dark .agcom-debug-toolbar { background:#1F1B0A; } .agcom-app .agcom-debug-copy { padding:7px 14px !important; background:#1a1a1a !important; background-color:#1a1a1a !important; color:#fff !important; border:none !important; border-radius:9px !important; font-family:inherit !important; font-weight:800 !important; font-size:12px !important; cursor:pointer !important; } .agcom-app .agcom-debug-copy:hover { background:#000 !important; color:#fff !important; } #agcomDebugText { position:absolute; left:-9999px; top:-9999px; opacity:0; pointer-events:none; height:1px; width:1px; } .agcom-debug-list { list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; gap:8px; } .agcom-debug-entry { background:rgba(255,255,255,.6); border:1px solid rgba(0,0,0,.05); border-radius:10px; padding:10px 12px; font-size:11.5px; line-height:1.5; } body.dark .agcom-debug-entry { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.06); } .agcom-debug-entry header { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; } .agcom-debug-id { font-weight:800; font-size:12px; } .agcom-debug-statusbadge { font-size:10px; font-weight:800; padding:2px 8px; border-radius:9999px; letter-spacing:.3px; } .agcom-debug-statusbadge.status-found { background:#D1FAE5; color:#065F46; } .agcom-debug-statusbadge.status-not_found { background:#FEE2E2; color:#991B1B; } .agcom-debug-statusbadge.status-no_detect { background:#E5E7EB; color:#374151; } .agcom-debug-statusbadge.status-lookup_tried { background:#FEF3C7; color:#92400E; } .agcom-debug-row { word-break:break-all; padding:2px 0; } .agcom-debug-row b { color:#4B5563; font-weight:700; margin-right:6px; } body.dark .agcom-debug-row b { color:#9CA3AF; } .agcom-debug-row a { color:#1D4ED8; text-decoration:underline; } body.dark .agcom-debug-row a { color:#93C5FD; } .agcom-debug-resolved { margin-top:6px; padding:6px 10px; background:rgba(16,185,129,.10); border-left:3px solid #10B981; border-radius:6px; } .agcom-debug-sources { margin:6px 0; } .agcom-debug-sources summary { padding:4px 0; cursor:pointer; font-weight:700; font-size:11px; color:#4B5563; } .agcom-debug-sources summary::before { content:'▸ '; } .agcom-debug-sources[open] summary::before { content:'▾ '; } .agcom-debug-sources table { width:100%; border-collapse:collapse; font-size:11px; margin-top:4px; } .agcom-debug-sources td { padding:3px 6px; vertical-align:top; border-bottom:1px solid rgba(0,0,0,.04); word-break:break-all; } .agcom-debug-sources td:first-child { font-weight:700; color:#4B5563; white-space:nowrap; width:200px; } body.dark .agcom-debug-sources td { border-color:rgba(255,255,255,.05); } body.dark .agcom-debug-sources td:first-child { color:#9CA3AF; } .agcom-debug-images { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .agcom-debug-img { margin:0; display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(0,0,0,.04); padding:6px; border-radius:8px; border:2px solid transparent; max-width:130px; } body.dark .agcom-debug-img { background:rgba(255,255,255,.04); } .agcom-debug-img.is-resolved { border-color:#10B981; background:rgba(16,185,129,.10); } .agcom-debug-img img { width:96px; height:96px; object-fit:cover; border-radius:6px; background:#fff; display:block; } .agcom-debug-img figcaption { font-size:9.5px; font-weight:600; text-align:center; color:#4B5563; word-break:break-all; line-height:1.25; max-width:96px; } body.dark .agcom-debug-img figcaption { color:#9CA3AF; } .agcom-debug-noimg { font-style:italic; color:#9CA3AF; padding:8px; } /* ─── Feed ─── */ .agcom-feed { padding:10px 14px 16px; display:flex; flex-direction:column; gap:12px; } .agcom-feed-empty { text-align:center; color:var(--t3); font-weight:500; font-size:14px; line-height:1.6; padding:48px 24px; } /* ─── Standard post card (used in "Find For Me" + "Saved") ─── */ .agcom-post { background:#ffffff !important; background-color:#ffffff !important; border:1px solid var(--bdr); border-radius:16px; overflow:hidden; } body.dark .agcom-post { background:var(--card) !important; background-color:var(--card) !important; } .agcom-post-head { display:flex; align-items:center; gap:10px; padding:11px 14px 8px; } .agcom-avatar { width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; background:linear-gradient(135deg,#ff8a78,var(--acc)); overflow:hidden; } .agcom-avatar img { width:100%; height:100%; object-fit:cover; } .agcom-who { flex:1; min-width:0; } .agcom-who b { font-size:13.5px; font-weight:800; color:var(--t1); } .agcom-who .agcom-meta { font-size:11.5px; color:var(--t3); font-weight:500; margin-top:1px; } .agcom-status { flex:none; font-size:10px; font-weight:800; padding:5px 9px; border-radius:999px; letter-spacing:.2px; } .agcom-status.is-open { background:var(--purplebg); color:var(--purple); } .agcom-status.is-found { background:var(--gnbg); color:var(--gntx); } .agcom-status.is-closed { background:var(--bg2); color:var(--t3); } .agcom-status.is-pending { background:var(--ylbg); color:var(--yltx); } body.dark .agcom-status.is-pending { background:rgba(251,191,36,.15); color:#FBBF24; } .agcom-post-body { padding:0 14px 10px; cursor:pointer; } .agcom-post-body p { font-size:14px; line-height:1.45; margin:2px 0 9px; color:var(--t1); word-break:break-word; } /* "Request" label before the request text — small, subtle, lightly tinted (a different tint per card so the feed isn't monotone). */ .agcom-req-label { display:inline-block; vertical-align:middle; font-size:9.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; padding:1px 7px; border-radius:6px; margin-right:7px; position:relative; top:-1px; background:var(--bg2); color:var(--t3); } .agcom-req-label--0 { background:rgba(139,92,246,.12); color:#7c3aed; } .agcom-req-label--1 { background:rgba(59,130,246,.12); color:#2563eb; } .agcom-req-label--2 { background:rgba(16,185,129,.12); color:#059669; } .agcom-req-label--3 { background:rgba(236,72,153,.12); color:#db2777; } .agcom-ptags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; } .agcom-ptag { font-size:11px; font-weight:700; color:var(--purple); background:var(--purplebg); padding:4px 9px; border-radius:7px; } .agcom-ptag.is-budget { color:var(--gntx); background:var(--gnbg); } /* Square image grid — single image no longer stretches */ .agcom-pimgs { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; } .agcom-pimgs img { width:110px !important; height:110px !important; aspect-ratio:1/1 !important; object-fit:cover !important; border-radius:10px !important; cursor:zoom-in !important; flex:none !important; background:var(--bg2); } @media (max-width:380px) { .agcom-pimgs img { width:calc(33.333% - 4px) !important; height:auto !important; } } .agcom-post-actions { display:flex; align-items:center; gap:4px; padding:5px 6px; } .agcom-act { flex:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; padding:9px !important; border:none !important; background:none !important; cursor:pointer !important; font-family:inherit !important; font-weight:700 !important; font-size:12.5px !important; color:var(--t3) !important; border-radius:10px !important; } .agcom-act:hover { background:var(--bg2) !important; color:var(--t2) !important; } .agcom-act:active { background:var(--bg2) !important; transform:scale(.98); } .agcom-act svg { width:17px; height:17px; flex:none; } /* Labels (Comment / Add link) — never wrap; shrink gracefully on small screens. */ .agcom-act { white-space:nowrap !important; min-width:0 !important; } .agcom-act-txt { overflow:hidden; text-overflow:ellipsis; } /* Add link button → site-wide purple (not coral) */ .agcom-act[data-action="reply"], .agcom-act.is-primary { color:var(--purple) !important; } .agcom-act[data-action="reply"]:hover { color:var(--purple) !important; background:var(--purplebg) !important; } /* Like = red, Save = yellow when on */ .agcom-act[data-action="like"].is-on { color:var(--like) !important; } .agcom-act[data-action="like"].is-on svg { fill:currentColor !important; stroke:currentColor !important; } .agcom-act[data-action="save"].is-on { color:var(--save) !important; } .agcom-act[data-action="save"].is-on svg { fill:currentColor !important; stroke:currentColor !important; } /* ─── Finds list (inside a standard card) ─── */ .agcom-finds { padding:2px 14px 14px; display:flex; flex-direction:column; gap:6px; } .agcom-finds-head { font-size:11.5px; font-weight:800; color:var(--t3); padding:4px 0 1px; letter-spacing:.2px; } /* Feed-card preview = the modal's comment cards, just more compact. Same bg/border/badges; action rows hidden (tap a card to open the full thread). */ .agcom-finds-preview .agcom-cm-card { padding:11px !important; gap:8px; border-radius:11px; cursor:pointer; } .agcom-finds-preview .agcom-cm-reply { cursor:pointer; } .agcom-finds-preview .agcom-cm-av { width:34px; height:34px; } .agcom-finds-preview .agcom-cm-av-sm { width:26px; height:26px; font-size:11px; } .agcom-finds-preview .agcom-cm-name { font-size:12.5px; } .agcom-finds-preview .agcom-cm-text { font-size:12.5px; } /* Everything in the feed preview — comments, replies AND links — keeps its full Like / Reply / Delete action row (delete only when allowed), just a touch more compact than the modal. */ .agcom-finds-preview .agcom-cm-actions { display:flex !important; gap:14px; margin-top:4px; } .agcom-finds-preview .agcom-cm-act { font-size:12px !important; } .agcom-finds-preview .agcom-cm-replies { margin-top:8px; padding-top:8px; } .agcom-finds-preview .agcom-cm-card:hover, .agcom-finds-preview .agcom-cm-reply:hover { border-color:var(--purple); } /* Replies to a LINK hang directly off the card (no gap / no double divider) so the link + its replies read as one connected thread. Applies in both the modal and the feed preview. */ .agcom-cm-finditem > .agcom-cm-replies { margin-top:0 !important; border-top:none; padding-top:2px !important; } /* Link card = comment card + an embedded product strip (one unified card). */ .agcom-cm-top-tag { background:#16a34a !important; } /* Author-only "Mark top" action on a link card. */ .agcom-find-top { color:#16a34a !important; font-weight:800 !important; } .agcom-cm-linkembed { display:flex; align-items:center; gap:10px; margin-top:8px; padding:8px; border:1px solid var(--bdr); border-radius:10px; background:var(--bg2); text-decoration:none !important; color:inherit !important; } .agcom-cm-linkembed:hover { border-color:var(--purple); } .agcom-cm-linkembed-thumb { position:relative; flex:none; width:46px; height:46px; } .agcom-cm-linkembed-thumb img, .agcom-cm-linkembed-ph { width:46px; height:46px; border-radius:8px; object-fit:cover; display:block; background:var(--bg); } .agcom-cm-linkembed-ph { display:grid; place-items:center; color:var(--t3); } .agcom-cm-linkembed-ph svg { width:20px; height:20px; } .agcom-cm-linkembed-thumb .agcom-fplat { position:absolute; right:-4px; bottom:-4px; border:2px solid var(--card); box-shadow:none; } .agcom-cm-linkembed-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .agcom-cm-linkembed-plat { font-size:11.5px; font-weight:700; color:var(--t2); } .agcom-cm-linkembed-price { font-size:14px; font-weight:800; color:var(--purple); } .agcom-cm-linkembed-go { width:18px; height:18px; flex:none; color:var(--t3); } /* The find vote button sits in the comment actions row (horizontal). */ .agcom-cm-linkcard .agcom-find-like { flex-direction:row !important; gap:5px !important; padding:5px 9px !important; border-radius:8px !important; font-size:12px !important; } .agcom-cm-linkcard .agcom-find-like:hover { background:var(--bg2) !important; } .agcom-cm-linkcard .agcom-find-like svg { width:15px !important; height:15px !important; } /* Compact comment row in the mixed activity preview. */ .agcom-cprev { display:flex; gap:9px; padding:7px; border-radius:11px; background:var(--bg2); border:1px solid var(--bdr); align-items:flex-start; text-decoration:none !important; color:inherit !important; } .agcom-cprev:hover { background:var(--bdr); } .agcom-cprev-av { flex:none; width:28px; height:28px; } .agcom-cprev-av img, .agcom-cprev-av-ph { width:28px; height:28px; border-radius:50%; object-fit:cover; display:block; } .agcom-cprev-av-ph { display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; background:linear-gradient(135deg,#ff8a78,var(--acc)); } .agcom-cprev-body { flex:1; min-width:0; } .agcom-cprev-name { font-size:12px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .agcom-cprev-time { font-weight:500; color:var(--t3); } .agcom-cprev-text { font-size:12.5px; color:var(--t2); line-height:1.4; margin-top:1px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; } .agcom-cprev-sticker { max-width:70px; max-height:70px; margin-top:4px; display:block; } .agcom-cprev-gif { max-width:120px; max-height:120px; border-radius:8px; margin-top:4px; display:block; background:var(--bg); } .agcom-find { display:flex; gap:9px; padding:8px; border-radius:12px; background:var(--card); border:1px solid var(--bdr); align-items:center; cursor:pointer; transition:border-color .12s, box-shadow .12s; } .agcom-find:hover { border-color:var(--purple); box-shadow:0 1px 6px rgba(0,0,0,.05); } .agcom-find.is-best { border-color:var(--gnbd); background:var(--gnbg); } .agcom-find-thumb { width:42px; height:42px; border-radius:9px; object-fit:cover; flex:none; background:var(--bg2); display:grid; place-items:center; color:var(--t3); } .agcom-find-thumb svg { width:20px; height:20px; } .agcom-find-info { flex:1; min-width:0; } .agcom-find-info .agcom-ftitle { font-size:12.5px; font-weight:700; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--t1); } .agcom-find-info .agcom-fprice { font-size:13px; font-weight:800; color:var(--purple); } .agcom-find-info .agcom-fby { font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .agcom-find-best-tag { font-size:9px; font-weight:800; color:#fff; background:var(--gntx); padding:2px 6px; border-radius:6px; display:inline-block; margin-right:5px; } .agcom-find-like { flex:none !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:1px !important; border:none !important; background:none !important; cursor:pointer !important; color:var(--t3) !important; font-weight:800 !important; font-size:11px !important; padding:2px 4px !important; } .agcom-find-like svg { width:17px; height:17px; } .agcom-find-like.is-liked { color:var(--like) !important; } .agcom-find-like.is-liked svg { fill:currentColor !important; stroke:currentColor !important; } .agcom-find-cta { flex:none; background:none !important; color:var(--t3) !important; border:none !important; width:34px; height:34px; border-radius:10px !important; display:grid !important; place-items:center !important; cursor:pointer; transition:background .15s,color .15s; text-decoration:none !important; } .agcom-find-cta:hover { color:var(--purple) !important; background:var(--bg2) !important; } .agcom-find-cta svg { width:20px; height:20px; } /* Reply-to-this-link button on inline finds (icon button, like the CTA). */ .agcom-find > .agcom-find-reply { flex:none !important; background:none !important; color:var(--t3) !important; border:none !important; width:34px; height:34px; border-radius:10px !important; display:grid !important; place-items:center !important; cursor:pointer; padding:0 !important; transition:background .15s,color .15s; } .agcom-find > .agcom-find-reply:hover { color:var(--purple) !important; background:var(--bg2) !important; } .agcom-find > .agcom-find-reply svg { width:19px; height:19px; } /* Delete-link button — icon button in the inline find row + red hover. */ .agcom-find > .agcom-find-del { flex:none !important; background:none !important; color:var(--t3) !important; border:none !important; width:34px; height:34px; border-radius:10px !important; display:grid !important; place-items:center !important; cursor:pointer; padding:0 !important; transition:background .15s,color .15s; } .agcom-find > .agcom-find-del:hover { color:#e5484d !important; background:rgba(229,72,77,.1) !important; } .agcom-find > .agcom-find-del svg { width:18px; height:18px; } .agcom-find-card .agcom-find-del:hover, .agcom-cm-linkcard .agcom-find-del:hover { color:#e5484d !important; } /* Platform logo badge — replaces the textual platform name in find rows. */ .agcom-find-thumbwrap { position:relative; flex:none; width:42px; height:42px; } .agcom-find-thumbwrap .agcom-find-thumb { width:42px; height:42px; } .agcom-fplat { display:inline-block; width:18px; height:18px; border-radius:5px; background:#fff center/cover no-repeat; box-shadow:0 0 0 1px var(--bdr); flex:none; vertical-align:middle; } .agcom-fplat-wd { background-image:url('/wp-content/uploads/2025/12/weidian-logo.png'); } .agcom-fplat-tb { background-image:url('/wp-content/uploads/2025/12/taobao-logo.png'); } .agcom-fplat-al { background-image:url('/wp-content/uploads/2025/12/1688-logo.png'); } .agcom-find-thumbwrap .agcom-fplat { position:absolute; right:-4px; bottom:-4px; border:2px solid var(--card); box-shadow:none; } .agcom-fplat-lg { width:22px; height:22px; border-radius:6px; } /* ─── Compact card (My Requests view) — matches the user-spec markup ─── */ .agcom-post.is-compact { padding:0; background:#fff !important; } body.dark .agcom-post.is-compact { background:var(--card) !important; } .agcom-post.is-compact.is-fade { opacity:.6; } .agcom-cpost { display:flex; align-items:center; gap:11px; padding:12px 14px; cursor:pointer; text-decoration:none !important; color:var(--t1) !important; } .agcom-cpost:hover { background:var(--bg2); } .agcom-cpost-thumb { width:46px !important; height:46px !important; border-radius:11px !important; object-fit:cover !important; flex:none !important; background:var(--bg2) !important; } .agcom-cpost-thumb.is-noimg { display:grid; place-items:center; color:var(--t3); font-weight:800; font-size:18px; line-height:1; } .agcom-cpost-info { flex:1; min-width:0; } .agcom-cpost-text { font-size:13.5px; font-weight:600; line-height:1.35; color:var(--t1); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; } .agcom-cpost-meta { font-size:11.5px; color:var(--t3); font-weight:500; margin-top:3px; } .agcom-cpost-meta b { color:var(--purple); font-weight:800; } .agcom-cpost-actions { display:flex; } .agcom-cbtn { flex:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:7px !important; padding:11px !important; border:none !important; background:none !important; cursor:pointer !important; font-family:inherit !important; font-weight:800 !important; font-size:13px !important; color:var(--t3) !important; } .agcom-cbtn:hover { background:var(--bg2) !important; color:var(--t2) !important; } .agcom-cbtn svg { width:16px !important; height:16px !important; flex:none; } .agcom-cbtn.is-danger { color:var(--rdtx) !important; } .agcom-cbtn.is-danger:hover { color:var(--rdtx) !important; background:var(--rdbg) !important; } .agcom-replybars { padding:8px 10px 10px; display:flex; flex-direction:column; gap:5px; } .agcom-replybar { display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:10px; background:var(--bg2); } .agcom-replybar.is-best { background:var(--gnbg); } .agcom-replybar > img, .agcom-rb-thumb-empty { width:34px !important; height:34px !important; border-radius:8px !important; object-fit:cover !important; flex:none !important; } .agcom-rb-thumb-empty { background:var(--bg2); display:grid !important; place-items:center !important; color:var(--t3); } .agcom-rb-thumb-empty svg { width:16px; height:16px; } .agcom-rb-info { flex:1; min-width:0; } .agcom-rb-title { font-size:12.5px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--t1); } .agcom-rb-by { font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .agcom-rb-top { font-size:8.5px; font-weight:800; color:#fff; background:var(--gntx); padding:1.5px 5px; border-radius:5px; margin-right:5px; vertical-align:middle; } .agcom-rb-like { flex:none !important; display:flex !important; align-items:center !important; gap:4px !important; border:none !important; background:none !important; cursor:pointer !important; color:var(--t3) !important; font-family:inherit !important; font-weight:800 !important; font-size:11px !important; padding:3px 5px !important; } .agcom-rb-like.is-liked { color:var(--purple) !important; } .agcom-rb-like.is-liked svg { fill:currentColor !important; } .agcom-rb-like svg { width:15px; height:15px; } .agcom-rb-open { flex:none !important; width:28px !important; height:28px !important; border-radius:7px !important; background:none !important; display:grid !important; place-items:center !important; border:none !important; cursor:pointer !important; color:var(--t3) !important; text-decoration:none !important; } .agcom-rb-open:hover { color:var(--purple) !important; background:var(--bg2) !important; } .agcom-rb-open svg { width:17px; height:17px; } /* ─── Centered "ms-card" modal — exact copy of .ms-modal/.ms-card from templates/new-home-page.php so disclaimer / coming-soon-style alerts match the rest of the site. Uses .agcom-overlay.agcom-overlay-center to switch from the bottom-sheet alignment to a true centered dialog with backdrop blur. ─── */ .agcom-overlay.agcom-overlay-center { align-items:center !important; justify-content:center !important; padding:24px !important; background:rgba(0,0,0,.55) !important; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .agcom-mscard { background:var(--card); border-radius:20px; padding:28px 24px 22px; text-align:center; max-width:340px; width:100%; box-shadow:0 10px 40px rgba(0,0,0,.25); animation:agcom-ms-rise .25s cubic-bezier(.34,1.56,.64,1); color:var(--t1); } @keyframes agcom-ms-rise { from { transform:translateY(12px) scale(.98); opacity:.4; } to { transform:translateY(0) scale(1); opacity:1; } } .agcom-mscard-icon { width:62px; height:62px; border-radius:50%; background:var(--accbg); color:var(--acc); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; } .agcom-mscard-icon svg { width:28px; height:28px; stroke-width:2.2; } .agcom-mscard-title { font-size:18px; font-weight:700; color:var(--t1); margin:0 0 8px; letter-spacing:-.2px; } .agcom-mscard-sub { font-size:13.5px; color:var(--t2); line-height:1.55; margin:0 0 10px; text-align:center; } .agcom-mscard-sub:last-of-type { margin-bottom:20px; } .agcom-app .agcom-mscard-btn, .agcom-overlay .agcom-mscard-btn { width:100% !important; padding:13px 18px !important; background:var(--acc) !important; background-color:var(--acc) !important; color:#fff !important; border:none !important; border-radius:12px !important; font-size:14px !important; font-weight:700 !important; font-family:inherit !important; cursor:pointer !important; transition:filter .15s,transform .12s; box-shadow:none !important; } .agcom-overlay .agcom-mscard-btn:active { transform:scale(.97); filter:brightness(1.05); } /* ─── Modals / bottom-sheets ─── */ .agcom-overlay { position:fixed !important; inset:0 !important; z-index:9990 !important; background:rgba(0,0,0,.5) !important; display:none; align-items:flex-end !important; justify-content:center !important; } .agcom-overlay.is-open { display:flex !important; } .agcom-sheet, .agcom-notif-sheet { background:var(--card) !important; background-color:var(--card) !important; width:100% !important; max-width:560px !important; border-radius:20px 20px 0 0 !important; padding:8px 18px 24px !important; max-height:88vh !important; overflow-y:auto !important; animation:agcom-rise .3s cubic-bezier(.32,1.05,.64,1); color:var(--t1) !important; display:flex !important; flex-direction:column !important; } .agcom-notif-sheet { padding:8px 0 16px !important; } @keyframes agcom-rise { from { transform:translateY(100%); } to { transform:translateY(0); } } .agcom-grab { width:38px; height:4px; background:var(--bdr); border-radius:2px; margin:8px auto 14px; flex:none; } .agcom-sheet h2, .agcom-notif-sheet h2 { font-size:19px; font-weight:800; margin:0 0 4px; color:var(--t1); letter-spacing:-.2px; } .agcom-sheet .agcom-sub { font-size:13px; color:var(--t2); margin-bottom:16px; font-weight:500; } .agcom-field { margin-bottom:14px; } .agcom-field label { display:block; font-size:12px; font-weight:800; margin-bottom:7px; color:var(--t2); text-transform:uppercase; letter-spacing:.4px; } .agcom-uploader { display:flex; gap:8px; flex-wrap:wrap; } .agcom-upbox { width:72px !important; height:72px !important; border-radius:12px !important; border:1.5px dashed var(--bdr) !important; display:grid !important; place-items:center !important; color:var(--t3) !important; cursor:pointer !important; background:var(--bg2) !important; padding:0 !important; margin:0 !important; } .agcom-upbox:hover { border-color:var(--purple) !important; color:var(--purple) !important; } .agcom-upbox svg { width:24px; height:24px; } .agcom-thumb { position:relative; width:72px; height:72px; } .agcom-thumb img { width:100%; height:100%; border-radius:12px; object-fit:cover; } .agcom-thumb-x { position:absolute !important; top:4px !important; right:4px !important; width:20px !important; height:20px !important; border-radius:50% !important; background:rgba(0,0,0,.65) !important; color:#fff !important; border:none !important; cursor:pointer !important; display:grid !important; place-items:center !important; padding:0 !important; } .agcom-thumb-x svg { width:11px; height:11px; } .agcom-tagentry { display:flex !important; flex-wrap:wrap !important; gap:6px !important; align-items:center !important; border:1.5px solid var(--bdr) !important; border-radius:12px !important; padding:8px !important; background:var(--bg2) !important; min-height:50px; } .agcom-tagentry:focus-within { border-color:var(--purple) !important; background:var(--card) !important; } .agcom-tagentry input { border:none !important; background:none !important; flex:1 !important; min-width:90px !important; padding:4px !important; font-size:15px !important; font-family:inherit !important; color:var(--t1) !important; } .agcom-tagentry input:focus { outline:none !important; background:none !important; border:none !important; } #agcomTagInput { border:none !important; box-shadow:none !important; outline:none !important; } .agcom-mtag { font-size:12px; font-weight:700; color:var(--purple); background:var(--purplebg); padding:5px 10px; border-radius:8px; display:flex; align-items:center; gap:5px; cursor:pointer; } .agcom-mtag::after { content:'×'; font-weight:800; font-size:14px; } /* Submit + CTA — coral (community brand) */ .agcom-submit { width:100% !important; box-sizing:border-box !important; background:var(--acc) !important; background-color:var(--acc) !important; color:#fff !important; border:none !important; cursor:pointer !important; padding:16px 20px !important; min-height:54px !important; line-height:1.2 !important; border-radius:14px !important; font-family:inherit !important; font-weight:800 !important; font-size:15.5px !important; margin-top:10px !important; box-shadow:none !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; transition:transform .12s,background .15s; } .agcom-submit:hover { background:var(--acchov) !important; color:#fff !important; } .agcom-submit:active { background:var(--acchov) !important; transform:scale(.98); } .agcom-submit:disabled, .agcom-submit.is-disabled { opacity:.55 !important; cursor:not-allowed !important; filter:saturate(.7); } .agcom-submit svg { width:18px; height:18px; } /* Ensure the coral full-width bg always wins over theme/GP button rules. */ .agcom-overlay .agcom-submit, .agcom-app .agcom-submit { width:100% !important; background:var(--acc) !important; background-color:var(--acc) !important; color:#fff !important; border:none !important; } /* Force the rounded pill on the submit buttons (beats any theme square-off). */ .agcom-submit, .agcom-confirm-go, #agcomComposeSubmit, #agcomConfirmPostBtn, #agcomReplySubmit { border-radius:14px !important; } /* Confirm-before-post (no reference photos) modal. */ .agcom-confirm-overlay { z-index:9993 !important; } .agcom-confirm-sheet { text-align:center; } .agcom-confirm-ic { width:58px; height:58px; margin:6px auto 12px; border-radius:50%; background:var(--accbg); color:var(--acc); display:grid; place-items:center; } .agcom-confirm-ic svg { width:28px; height:28px; } .agcom-confirm-actions { display:flex; gap:10px; margin-top:18px; } .agcom-confirm-cancel { flex:1; padding:14px !important; border-radius:14px !important; border:1.5px solid var(--bdr) !important; background:var(--card) !important; color:var(--t1) !important; font-family:inherit !important; font-weight:800 !important; font-size:15px !important; cursor:pointer !important; } .agcom-confirm-actions .agcom-submit { flex:1; margin-top:0 !important; } /* Danger variant (e.g. delete comment) — red CTA + red icon chip. */ .agcom-confirm-go.is-danger { background:#e53935 !important; background-color:#e53935 !important; } .agcom-confirm-go.is-danger:hover, .agcom-confirm-go.is-danger:active { background:#c62828 !important; } #agcomConfirmModal .agcom-confirm-ic { background:rgba(229,57,53,.12); color:#e53935; } /* Create-account-to-post draft preview. */ .agcom-ca-preview { margin:14px 0 4px; text-align:left; } .agcom-ca-card { background:var(--bg2); border:1px solid var(--bdr); border-radius:14px; padding:13px 14px; } .agcom-ca-label { font-size:11px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:var(--t3); margin-bottom:5px; } .agcom-ca-desc { font-size:14px; line-height:1.45; color:var(--t1); margin:0; white-space:pre-wrap; word-break:break-word; } .agcom-ca-budget { font-size:12.5px; font-weight:700; color:var(--t2); margin-top:7px; } .agcom-ca-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; } .agcom-ca-imgs { display:flex; gap:7px; margin-top:10px; } .agcom-ca-imgs img { width:54px; height:54px; border-radius:9px; object-fit:cover; border:1px solid var(--bdr); } /* Reply modal header */ .agcom-reply-hd { display:flex; align-items:center; gap:12px; margin-bottom:12px; } .agcom-reply-hd-ic { width:42px; height:42px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--purplebg); color:var(--purple); } .agcom-reply-hd-ic svg { width:21px; height:21px; } .agcom-reply-hd h2 { font-size:18px; font-weight:800; } .agcom-opt { color:var(--t3); font-weight:600; } .agcom-reply-quote { display:flex; gap:10px; align-items:center; background:var(--bg2); border:1px solid var(--bdr); border-radius:12px; padding:10px; margin-bottom:14px; } .agcom-reply-quote img { width:38px; height:38px; border-radius:8px; object-fit:cover; flex:none; } .agcom-reply-quote .agcom-rq-noimg { width:38px; height:38px; border-radius:8px; background:var(--bg2); flex:none; display:grid; place-items:center; color:var(--t3); font-weight:800; } .agcom-reply-quote .agcom-rq-txt { font-size:12.5px; font-weight:500; color:var(--t1); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; opacity:.85; } .agcom-link-input { display:flex !important; align-items:center !important; gap:8px !important; border:1.5px solid var(--bdr) !important; border-radius:12px !important; padding:0 8px 0 12px !important; background:var(--bg2) !important; } .agcom-link-input:focus-within { border-color:var(--purple) !important; background:var(--card) !important; } .agcom-link-ic { width:18px; height:18px; flex:none; color:var(--t3); } .agcom-link-input input { flex:1 !important; border:none !important; background:none !important; font-family:inherit !important; font-size:15px !important; padding:13px 0 !important; color:var(--t1) !important; } .agcom-link-input input:focus { outline:none !important; border:none !important; background:none !important; } .agcom-link-paste { flex:none !important; background:var(--t1) !important; color:var(--card) !important; border:none !important; cursor:pointer !important; font-family:inherit !important; font-weight:800 !important; font-size:12.5px !important; padding:7px 13px !important; border-radius:9px !important; } .agcom-link-paste:hover { background:#000 !important; color:#fff !important; } .agcom-src-pill { display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:11.5px; font-weight:800; color:var(--gntx); background:var(--gnbg); padding:5px 10px; border-radius:999px; } .agcom-src-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gntx); } .agcom-src-pill.is-unknown { color:var(--t2); background:var(--bg2); } .agcom-src-pill.is-unknown::before { background:var(--t3); } .agcom-price-input { display:flex !important; align-items:center !important; border:1.5px solid var(--bdr) !important; border-radius:12px !important; padding:0 14px !important; background:var(--bg2) !important; } .agcom-price-input:focus-within { border-color:var(--purple) !important; background:var(--card) !important; } .agcom-price-input input { flex:1 !important; border:none !important; background:none !important; font-family:inherit !important; font-size:15px !important; font-weight:700 !important; padding:13px 0 !important; color:var(--t1) !important; } .agcom-price-input input:focus { outline:none !important; border:none !important; background:none !important; } .agcom-price-input span { font-weight:800; color:var(--t3); font-size:13px; } /* ─── Search overlay ─── */ .agcom-searchscreen { position:fixed; inset:0; z-index:9995; background:var(--bg); display:none; flex-direction:column; color:var(--t1); } .agcom-searchscreen.is-open { display:flex; animation:agcom-fadein .18s ease; } @keyframes agcom-fadein { from { opacity:0; } to { opacity:1; } } .agcom-search-top { display:flex; align-items:center; gap:8px; padding:12px 12px 10px; background:var(--card); border-bottom:1px solid var(--bdr); } .agcom-search-back { width:38px !important; height:38px !important; flex:none !important; border:none !important; background:none !important; cursor:pointer !important; display:grid !important; place-items:center !important; color:var(--t1) !important; border-radius:11px !important; padding:0 !important; } .agcom-search-back:hover, .agcom-search-back:active { background:var(--bg2) !important; } .agcom-search-back svg { width:22px; height:22px; } .agcom-search-field { flex:1; display:flex; align-items:center; gap:8px; background:var(--bg2); border-radius:12px; padding:0 14px; } .agcom-search-field > svg { width:18px; height:18px; flex:none; color:var(--t3); } .agcom-search-field input { flex:1 !important; border:none !important; background:none !important; font-family:inherit !important; font-size:16px !important; padding:12px 0 !important; color:var(--t1) !important; } .agcom-search-field input:focus { outline:none !important; border:none !important; background:none !important; } .agcom-search-clear { width:30px !important; height:30px !important; flex:none !important; border:none !important; background:none !important; cursor:pointer !important; display:grid !important; place-items:center !important; color:var(--t3) !important; padding:0 !important; border-radius:8px !important; } .agcom-search-clear svg { width:18px; height:18px; } .agcom-search-body { flex:1; overflow-y:auto; padding:12px 14px 30px; } .agcom-search-empty { text-align:center; color:var(--t3); font-weight:500; font-size:14px; padding:40px 20px; } .agcom-search-hint { font-size:11px; font-weight:800; color:var(--t3); margin-bottom:10px; letter-spacing:.4px; } .agcom-schip-row { display:flex; flex-wrap:wrap; gap:7px; } .agcom-schip { padding:8px 13px !important; border-radius:999px !important; background:var(--bg2) !important; font-weight:700 !important; font-size:13px !important; color:var(--t1) !important; border:none !important; cursor:pointer !important; font-family:inherit !important; } .agcom-schip:hover { background:var(--bdr) !important; } .agcom-sresult { display:flex; gap:11px; padding:11px; border-radius:12px; cursor:pointer; align-items:flex-start; text-decoration:none !important; color:var(--t1) !important; } .agcom-sresult:hover, .agcom-sresult:active { background:var(--bg2); } .agcom-sresult-av { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; background:linear-gradient(135deg,#ff8a78,var(--acc)); overflow:hidden; } .agcom-sresult-av img { width:100%; height:100%; object-fit:cover; } .agcom-sresult-info { flex:1; min-width:0; } .agcom-sresult-info .agcom-st { font-size:13.5px; font-weight:700; line-height:1.4; color:var(--t1); } .agcom-sresult-info .agcom-sm { font-size:11.5px; color:var(--t3); font-weight:500; margin-top:2px; } .agcom-sresult mark { background:#fef08a; color:inherit; border-radius:3px; padding:0 1px; } body.dark .agcom-sresult mark { background:rgba(251,191,36,.3); color:#FCD34D; } /* ─── Notifications ─── */ .agcom-notif-head { display:flex; align-items:center; justify-content:space-between; padding:6px 18px 12px; border-bottom:1px solid var(--bdr); } .agcom-notif-head h2 { font-size:17px; font-weight:800; color:var(--t1); } .agcom-notif-clear { border:none !important; background:none !important; cursor:pointer !important; color:var(--purple) !important; font-family:inherit !important; font-weight:800 !important; font-size:13px !important; padding:6px 10px !important; border-radius:8px !important; } .agcom-notif-clear:hover { background:var(--purplebg) !important; color:var(--purple) !important; } .agcom-notif-list { overflow-y:auto; padding:6px 0; flex:1; } .agcom-notif { display:flex; gap:11px; align-items:center; padding:11px 18px; cursor:pointer; position:relative; text-decoration:none !important; color:var(--t1) !important; } .agcom-notif:hover, .agcom-notif:active { background:var(--bg2); } .agcom-notif.is-unread { background:var(--purplebg); } .agcom-notif.is-unread::before { content:''; position:absolute; left:7px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:var(--purple); } .agcom-notif-ic { width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center; } .agcom-notif-ic svg { width:18px; height:18px; color:#fff; } .agcom-notif-ic.is-reply { background:var(--purple); } .agcom-notif-ic.is-like { background:var(--like); } .agcom-notif-info { flex:1; min-width:0; } .agcom-notif-info .agcom-nt { font-size:13.5px; line-height:1.35; color:var(--t1); } .agcom-notif-info .agcom-nt b { font-weight:800; } .agcom-notif-info .agcom-ntime { font-size:11.5px; color:var(--t3); font-weight:500; margin-top:2px; } .agcom-notif-empty { text-align:center; color:var(--t3); font-weight:500; font-size:14px; padding:40px 20px; } /* ─── Lightbox ─── */ .agcom-lightbox { position:fixed !important; inset:0 !important; z-index:99999 !important; background:rgba(0,0,0,.92) !important; display:none; align-items:center !important; justify-content:center !important; padding:20px; animation:agcom-fadein .15s ease; } .agcom-lightbox.is-open { display:flex !important; } .agcom-lightbox img { max-width:100%; max-height:90vh; border-radius:12px; object-fit:contain; } .agcom-lightbox-close { position:absolute !important; top:16px; right:16px; width:38px !important; height:38px !important; border-radius:50% !important; background:rgba(255,255,255,.15) !important; border:none !important; cursor:pointer !important; display:grid !important; place-items:center !important; color:#fff !important; padding:0 !important; } .agcom-lightbox-close:hover { background:rgba(255,255,255,.25) !important; } .agcom-lightbox-close svg { width:20px; height:20px; } /* ─── Loadmore ─── */ .agcom-loadmore { margin:10px auto 0 !important; padding:11px 22px !important; background:var(--card) !important; color:var(--t1) !important; border:1px solid var(--bdr) !important; border-radius:12px !important; font-family:inherit !important; font-size:13px !important; font-weight:800 !important; cursor:pointer !important; display:block !important; } .agcom-loadmore:hover { background:var(--bg2) !important; color:var(--t1) !important; } .agcom-loadmore:disabled { opacity:.6 !important; cursor:not-allowed !important; } /* ─── Detail header ─── */ .agcom-detail-header { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--card); border-bottom:1px solid var(--bdr); position:sticky; top:0; z-index:60; height:54px; } .agcom-detail-back { width:38px !important; height:38px !important; border-radius:11px !important; border:none !important; background:none !important; background-color:transparent !important; cursor:pointer !important; display:grid !important; place-items:center !important; color:var(--t1) !important; padding:0 !important; text-decoration:none !important; } .agcom-detail-back:hover { background:var(--bg2) !important; background-color:var(--bg2) !important; } .agcom-detail-back svg { width:20px; height:20px; } .agcom-detail-title { font-size:15px; font-weight:800; color:var(--t1); } /* ─── Desktop ─── */ @media (min-width:768px) { .agcom-app { max-width:680px; } } @media (min-width:1024px) { .agcom-app { max-width:880px; } .agcom-feed { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; } .agcom-feed-empty, .agcom-loadmore { grid-column:1/-1; } } /* ─── Floating "Request Link" CTA — same shape as the home page .sell-float-btn, recoloured to the community coral. The selectors are prefixed with `.agcom-app` so they out-specify the broad button-reset above (which would otherwise zero out the background and padding). `bottom` is bumped to clear the bottom nav (~70px tall) with breathing room. ─── */ .agcom-app .agcom-float { position:fixed !important; bottom:calc(85px + env(safe-area-inset-bottom)) !important; left:50% !important; transform:translateX(-50%) !important; z-index:69 !important; pointer-events:auto; padding:0 !important; background:none !important; } .agcom-app .agcom-float-btn { display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:2px !important; padding:8px 22px 9px !important; background:var(--acc) !important; background-color:var(--acc) !important; color:#fff !important; border:none !important; border-radius:99px !important; font-family:inherit !important; font-size:13px !important; font-weight:700 !important; box-shadow:0 4px 16px rgba(252,92,100,.35) !important; position:relative !important; overflow:visible !important; white-space:nowrap !important; cursor:pointer !important; transition:transform .12s; margin:0 !important; } .agcom-app .agcom-float-btn:hover { background:var(--acchov) !important; background-color:var(--acchov) !important; color:#fff !important; box-shadow:0 4px 16px rgba(252,92,100,.45) !important; } .agcom-app .agcom-float-btn:active { transform:scale(.95); background:var(--acchov) !important; color:#fff !important; } .agcom-app .agcom-float-btn::before { content:''; position:absolute; inset:0; border-radius:99px; border:3px solid var(--acc); opacity:0; pointer-events:none; animation:agcom-float-ring 2.5s ease-out infinite; } @keyframes agcom-float-ring { 0% { transform:scale(1); opacity:.65; } 50%, 100% { transform:scale(1.15); opacity:0; } } .agcom-app .agcom-float-row { display:flex; align-items:center; gap:6px; line-height:1.1; } .agcom-app .agcom-float-row svg { width:16px !important; height:16px !important; stroke:currentColor; fill:none; stroke-width:2.2; } .agcom-app .agcom-float-sub { font-size:9px; font-weight:500; opacity:.7; line-height:1; margin-top:-1px; } body.dark .agcom-app .agcom-float-btn { box-shadow:0 4px 16px rgba(252,92,100,.18) !important; } /* ─── Theme bottom nav ─── */ .repsearch-bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--card); border-top:1px solid var(--bdr); padding:8px 0 calc(8px + env(safe-area-inset-bottom)); display:flex; justify-content:space-around; z-index:70; } .repsearch-nav-item { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:8px 16px; flex:1; text-decoration:none; position:relative; -webkit-tap-highlight-color:transparent; user-select:none; background:none; border:none; font-family:inherit; } .repsearch-nav-item:active { transform:scale(.95); } .repsearch-nav-item svg { width:24px; height:24px; stroke:var(--t3); fill:none; stroke-width:2; } .repsearch-nav-item span.nav-label { font-size:11px; font-weight:600; color:var(--t3); } .repsearch-nav-item.active svg { stroke:var(--purple); } .repsearch-nav-item.active span.nav-label { color:var(--purple); } .repsearch-nav-badge { position:absolute; right:33% !important; transform:translateX(16px); background:#996DFF; color:#fff; font-size:10px; font-weight:700; padding:2px 6px; border-radius:10px; min-width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; line-height:1; } @keyframes agcom-badgePulse { 0%,100% { transform:translateX(16px) scale(1); } 50% { transform:translateX(16px) scale(1.1); } } .repsearch-nav-badge.pulse { animation:agcom-badgePulse 2s ease-in-out infinite; } /* ─── Full-screen "Add a link" composer ─────────────────────────────── Promotes #agcomReplyOverlay from a bottom sheet to a full-width (max 560px, centered) + full-height panel with a fixed header and a scrollable form body — mirrors the resell #rpCm composer. Additive: the base .agcom-overlay/.agcom-sheet rules still apply elsewhere. */ .agcom-overlay.agcom-overlay-fs { align-items:stretch !important; justify-content:center !important; } .agcom-overlay-fs .agcom-sheet { max-width:560px !important; width:100% !important; height:100% !important; max-height:100% !important; border-radius:0 !important; padding:0 !important; overflow:hidden !important; animation:agcom-fadein .18s ease !important; } .agcom-overlay-fs .agcom-grab { display:none !important; } .agcom-overlay-fs .agcom-reply-hd { flex:none; position:relative; align-items:center; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-top)); padding-top:max(14px, env(safe-area-inset-top)); margin-bottom:0; border-bottom:1px solid var(--bdr); background:var(--card); } .agcom-overlay-fs .agcom-reply-hd > div:not(.agcom-reply-hd-ic) { flex:1; min-width:0; } .agcom-overlay-fs .agcom-reply-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 18px calc(28px + env(safe-area-inset-bottom)); } .agcom-reply-x { flex:none !important; width:36px !important; height:36px !important; border-radius:50% !important; border:none !important; background:var(--bg2) !important; color:var(--t1) !important; display:grid !important; place-items:center !important; cursor:pointer !important; padding:0 !important; } .agcom-reply-x:hover, .agcom-reply-x:active { background:var(--bdr) !important; color:var(--t1) !important; } .agcom-reply-x svg { width:18px; height:18px; } /* Commission explainer — green info card shown before the submit button. */ .agcom-commission-note { display:flex; gap:9px; align-items:flex-start; margin:4px 0 16px; padding:12px 13px; background:var(--gnbg); border:1px solid var(--gnbd); border-radius:12px; color:var(--gntx); font-size:12.5px; font-weight:600; line-height:1.45; } .agcom-commission-emoji { flex:none; font-size:16px; line-height:1.3; } .agcom-commission-sub { display:block; margin-top:3px; font-weight:600; opacity:.85; } /* ═══ Comments / discussion on request pages ═══════════════════════════ */ .agcom-cm-section { padding:4px 0 0; margin-top:8px; } .agcom-cm-bar { display:flex; align-items:center; gap:8px; padding:6px 4px 10px; } .agcom-cm-bar-t { font-size:16px; font-weight:800; color:var(--t1); letter-spacing:-.2px; } .agcom-cm-bar-count { font-size:12px; font-weight:800; color:var(--t3); background:var(--bg2); border-radius:999px; padding:2px 9px; } .agcom-cm-compose-trigger { display:flex !important; align-items:center !important; gap:8px !important; width:100% !important; padding:12px 14px !important; margin-bottom:12px !important; background:var(--bg2) !important; border:1px solid var(--bdr) !important; border-radius:14px !important; color:var(--t3) !important; font-family:inherit !important; font-size:13px !important; font-weight:600 !important; cursor:pointer !important; text-align:left !important; } .agcom-cm-compose-trigger:hover { background:var(--bdr) !important; color:var(--t2) !important; } .agcom-cm-compose-trigger svg { width:18px; height:18px; flex:none; color:var(--acc); } .agcom-cm-empty { text-align:center; color:var(--t3); font-weight:500; font-size:13.5px; padding:24px 16px; } .agcom-cm-list { display:flex; flex-direction:column; gap:10px; padding:2px 2px 8px; } /* ─── Request page = a full-screen Comments-modal clone (post pinned on top) ─── */ .agcom-cm-pagewrap { padding:12px 14px 8px; display:flex; flex-direction:column; gap:12px; } .agcom-cm-owneractions { display:flex; gap:8px; } .agcom-cm-owneractions .agcom-cbtn { flex:1 !important; background:var(--card) !important; border:1px solid var(--bdr) !important; border-radius:14px !important; padding:13px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; font-family:inherit !important; font-weight:700 !important; cursor:pointer !important; color:var(--t1) !important; } .agcom-cm-owneractions .agcom-cbtn svg { width:18px; height:18px; } .agcom-cm-page { margin-top:2px !important; padding:0 !important; } .agcom-cm-page .agcom-cm-pagebar { position:relative; display:flex; align-items:center; padding:6px 2px 10px; border-bottom:1px solid var(--bdr); margin-bottom:10px; } .agcom-cm-page .agcom-cm-sort-toggle { display:inline-flex !important; align-items:center; gap:7px; margin-left:-6px; padding:6px 8px !important; background:transparent !important; border:none !important; border-radius:10px !important; cursor:pointer !important; font-family:inherit !important; font-size:16px !important; font-weight:800 !important; color:var(--t1) !important; letter-spacing:-.2px; } .agcom-cm-page .agcom-cm-sort-toggle:active { background:var(--bg2) !important; } .agcom-cm-page .agcom-cm-sort-menu { left:6px; right:auto; transform:none; } /* Sticky add-comment bar pinned above the bottom nav. */ .agcom-cm-page-add { position:fixed !important; left:50%; transform:translateX(-50%); bottom:calc(74px + env(safe-area-inset-bottom)); width:calc(100% - 28px) !important; max-width:532px; z-index:66; margin:0 !important; background:var(--card) !important; box-shadow:0 8px 26px rgba(0,0,0,.16) !important; } .agcom-cm-page-add:active { transform:translateX(-50%) scale(.99); } body.dark .agcom-cm-page-add { box-shadow:0 8px 26px rgba(0,0,0,.5) !important; } /* Verified blue-check — shared contract with the resell plugin */ .agcom-verified { flex-shrink:0; vertical-align:middle; } /* User links (avatar + name + @handle) — inherit, no underline */ .agcom-userlink { text-decoration:none !important; color:inherit !important; display:inline-flex; align-items:center; } .agcom-userlink:hover .agcom-cm-name, .agcom-userlink:hover b { text-decoration:underline; } /* Comment author name + handle are links → kill the default blue/underline entirely (including hover), and pin the intended text colours. */ .agcom-cm-userlink, .agcom-cm-userlink:visited, .agcom-cm-userlink:hover, .agcom-cm-namelink, .agcom-cm-namelink:visited, .agcom-cm-namelink:hover { color:inherit !important; text-decoration:none !important; } .agcom-cm-name { color:var(--t1) !important; text-decoration:none !important; } .agcom-cm-handle { color:var(--t3) !important; text-decoration:none !important; } .agcom-name-row { display:inline-flex; align-items:center; gap:5px; } /* Unified comment cards — converge on the resell "Questions" card spec: #fff bg, 1px #efefef border, 14px radius, 14px padding, 10px gap; avatar 42px (replies 32px); head = name(700/13.5) + blue check inline, @username 12px muted on the line below (~6px under). */ .agcom-cm-card, .agcom-cm-reply { display:flex; gap:10px; } .agcom-cm-card { background:#fff; border:1px solid #efefef; border-radius:14px; padding:16px !important; box-sizing:border-box; } body.dark .agcom-cm-card { background:var(--card); border-color:var(--bdr); } .agcom-cm-avwrap { flex:none; } .agcom-cm-av { width:42px; height:42px; border-radius:50%; object-fit:cover; display:block; background:var(--bg2); } .agcom-cm-av.is-ph { display:grid; place-items:center; color:#fff; font-weight:800; font-size:16px; background:linear-gradient(135deg,#ff8a78,var(--acc)); } .agcom-cm-av-sm { width:32px; height:32px; font-size:13px; } .agcom-cm-main { flex:1; min-width:0; } .agcom-cm-head { display:flex; align-items:flex-start; gap:8px; } .agcom-cm-idcol { flex:1; min-width:0; } .agcom-cm-nameline { display:flex; align-items:center; gap:5px; flex-wrap:wrap; } .agcom-cm-name { font-size:13.5px; font-weight:700; color:var(--t1); } .agcom-cm-handle { display:block; font-size:12px; color:var(--t3); font-weight:500; } .agcom-cm-time { flex:none; font-size:11px; color:var(--t3); font-weight:500; white-space:nowrap; } .agcom-cm-op-tag { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--acc); padding:2px 6px; border-radius:6px; } .agcom-cm-mine-tag { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:var(--t2); background:var(--bg2); padding:2px 6px; border-radius:6px; } .agcom-cm-pending-tag { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; color:#92400e; background:rgba(245,158,11,.16); padding:2px 6px; border-radius:6px; } .agcom-cm-text { font-size:13.5px; line-height:1.45; color:var(--t1); word-break:break-word; margin-top:4px; } .agcom-cm-sticker { max-width:140px; max-height:140px; margin-top:6px; display:block; cursor:zoom-in; border-radius:10px; } .agcom-cm-gif-wrap { display:inline-block; margin-top:6px; line-height:0; } .agcom-cm-gif { max-width:220px; max-height:220px; border-radius:12px; display:block; background:var(--bg2); cursor:zoom-in; } .agcom-cm-actions { display:flex; align-items:center; gap:4px; margin-top:7px; } .agcom-cm-act { display:inline-flex !important; align-items:center !important; gap:5px !important; padding:5px 9px !important; border:none !important; background:none !important; cursor:pointer !important; font-family:inherit !important; font-weight:700 !important; font-size:12px !important; color:var(--t3) !important; border-radius:8px !important; } .agcom-cm-act:hover { background:var(--bg2) !important; color:var(--t2) !important; } .agcom-cm-act svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; } .agcom-cm-like.on { color:var(--acc) !important; } .agcom-cm-like.on svg { fill:var(--acc); stroke:var(--acc); } .agcom-cm-replies { margin-top:10px; margin-left:8px; padding-top:10px; padding-left:12px; border-top:1px solid var(--bdr); border-left:1px solid var(--bdr); border-top-left-radius:6px; display:flex; flex-direction:column; gap:10px; } /* ── Full-screen comment composer (mirrors resell #rpCm) ── */ .agcom-cm-modal { position:fixed; inset:0; z-index:9991; background:var(--card); display:none; flex-direction:column; max-width:560px; margin:0 auto; color:var(--t1); } .agcom-cm-modal.on { display:flex; animation:agcom-fadein .18s ease; } .agcom-cm-sheet { display:flex; flex-direction:column; flex:1; min-height:0; } .agcom-cm-hdr { flex-shrink:0; display:flex; align-items:center; gap:10px; padding:10px 12px; padding-top:max(10px, env(safe-area-inset-top)); border-bottom:1px solid var(--bdr); } .agcom-cm-x { flex-shrink:0; width:36px !important; height:36px !important; border-radius:50% !important; border:none !important; background:transparent !important; color:var(--t1) !important; display:grid !important; place-items:center !important; cursor:pointer !important; padding:0 !important; } .agcom-cm-x:active { background:var(--bg2) !important; } .agcom-cm-x svg { width:20px; height:20px; } .agcom-cm-modal-title { flex:1; text-align:center; font-size:16px; font-weight:800; color:var(--t1); } .agcom-cm-post { flex-shrink:0; padding:8px 18px !important; background:var(--acc) !important; color:#fff !important; border:none !important; border-radius:999px !important; font-size:14px !important; font-weight:800 !important; font-family:inherit !important; cursor:pointer !important; } .agcom-cm-post:disabled { opacity:.45 !important; cursor:not-allowed !important; } /* ─── Comments thread modal (feed surface) ─── */ .agcom-cm-thread-modal .agcom-cm-hdr { position:relative; } .agcom-cm-thread-modal .agcom-cm-hdr-spacer { flex-shrink:0; width:36px; } .agcom-cm-thread-modal .agcom-cm-modal-title .agcom-cm-bar-count { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; margin-left:6px; border-radius:999px; background:var(--bg2); color:var(--t2); font-size:12px; font-weight:800; vertical-align:middle; } /* Sort toggle (▾) inside the thread-modal title */ .agcom-cm-sort-toggle { display:inline-flex !important; align-items:center; justify-content:center; gap:5px; background:transparent !important; border:none !important; padding:6px 8px !important; border-radius:10px !important; cursor:pointer !important; font-family:inherit !important; } .agcom-cm-sort-toggle:active { background:var(--bg2) !important; } .agcom-cm-sort-chev { width:15px; height:15px; color:var(--t2); transition:transform .18s; } .agcom-cm-sort-toggle[aria-expanded="true"] .agcom-cm-sort-chev { transform:rotate(180deg); } .agcom-cm-sort-menu { position:absolute; top:calc(100% - 2px); left:50%; transform:translateX(-50%); z-index:30; min-width:180px; background:var(--card); border:1px solid var(--bdr); border-radius:14px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.16); } .agcom-cm-sort-menu[hidden] { display:none; } .agcom-cm-sort-opt { display:flex !important; align-items:center; gap:8px; width:100% !important; text-align:left !important; padding:11px 12px !important; border:none !important; background:transparent !important; color:var(--t1) !important; font-family:inherit !important; font-size:14.5px !important; font-weight:700 !important; border-radius:10px !important; cursor:pointer !important; } .agcom-cm-sort-opt:active { background:var(--bg2) !important; } .agcom-cm-sort-opt.is-active { color:var(--acc) !important; background:var(--accbg) !important; } .agcom-cm-sort-opt.is-active::after { content:'✓'; margin-left:auto; font-weight:900; } .agcom-cm-thread-body { flex:1; min-height:0; overflow-y:auto; padding:14px 16px; -webkit-overflow-scrolling:touch; } /* Bottom "Add a comment…" trigger — a contained, rounded button with breathing room (was a flat full-width zero-radius bar that looked out of place). Sits above a hairline separator from the thread list. */ .agcom-cm-thread-add { flex-shrink:0; width:auto !important; margin:4px 16px calc(14px + env(safe-area-inset-bottom)) !important; border:1px solid var(--bdr) !important; border-radius:14px !important; padding:13px 16px !important; } /* Post thumbnail on the right of the "Commenting on" context card. */ .agcom-cm-ctx-img { flex:none; width:48px; height:48px; border-radius:10px; object-fit:cover; background:var(--bg2); margin-left:10px; align-self:flex-start; } /* Broken / missing image fallback — neutral icon, centered, padded. */ .agcom-img-ph { object-fit:contain !important; background:var(--bg2) !important; padding:18% !important; box-sizing:border-box; } /* Affiliate commission note inside the composer — a touch of top spacing. */ #agcomCmCommission { margin-top:2px; } /* Auto-detected product-link card inside the comment composer. */ .agcom-cm-linkprev { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--bdr); border-radius:14px; background:var(--card); } .agcom-cm-linkprev[hidden] { display:none; } .agcom-cm-linkprev-thumbwrap { position:relative; flex:none; width:54px; height:54px; } .agcom-cm-linkprev-img { width:54px; height:54px; border-radius:10px; object-fit:cover; background:var(--bg); display:block; } .agcom-cm-linkprev-thumbwrap .agcom-fplat { position:absolute; right:-4px; bottom:-4px; border:2px solid var(--card); box-shadow:none; } .agcom-cm-linkprev-info { flex:1; min-width:0; } .agcom-cm-linkprev-title { font-size:13px; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .agcom-cm-linkprev-meta { display:flex; align-items:center; gap:8px; margin-top:2px; } .agcom-cm-linkprev-plat { font-size:12px; font-weight:800; color:var(--acc); } .agcom-cm-linkprev-price { font-size:12px; font-weight:800; color:var(--t1); } .agcom-cm-linkprev-url { font-size:11px; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; } .agcom-cm-linkprev-x { flex:none; width:28px; height:28px; border:none; background:transparent; color:var(--t3); cursor:pointer; display:grid; place-items:center; border-radius:50%; } .agcom-cm-linkprev-x:hover { background:var(--bdr); } .agcom-cm-linkprev-x svg { width:16px; height:16px; } /* Comment affordance on feed cards — sits in the action row. */ .agcom-comment-btn .agcom-comment-count { font-size:12.5px; font-weight:700; } .agcom-cm-modal-body { flex:1; min-height:0; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:12px; } .agcom-cm-author { display:flex; align-items:center; gap:10px; } .agcom-cm-modal-av { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#ff8a78,var(--acc)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px; overflow:hidden; flex-shrink:0; } .agcom-cm-modal-av img { width:100%; height:100%; object-fit:cover; display:block; } .agcom-cm-modal-name { font-size:14px; font-weight:800; color:var(--t1); } /* Modal context card — the post / replied-to comment shown atop the composer */ .agcom-cm-ctx { background:var(--bg2); border:1px solid var(--bdr); border-radius:12px; padding:10px 12px; } .agcom-cm-ctx[hidden] { display:none; } .agcom-cm-ctx-label { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--t3); margin-bottom:7px; } .agcom-cm-ctx-row { display:flex; gap:9px; align-items:flex-start; } .agcom-cm-ctx-av { width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none; background:var(--bg); display:block; } .agcom-cm-ctx-av.is-ph { display:grid; place-items:center; color:#fff; font-weight:800; font-size:13px; background:linear-gradient(135deg,#ff8a78,var(--acc)); } .agcom-cm-ctx-main { flex:1; min-width:0; } .agcom-cm-ctx-name { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:12.5px; font-weight:700; color:var(--t1); } .agcom-cm-ctx-handle { font-size:11.5px; font-weight:500; color:var(--t3); } .agcom-cm-ctx-text { font-size:12.5px; line-height:1.4; color:var(--t2); margin-top:2px; word-break:break-word; } .agcom-cm-ctx .agcom-cm-userlink { text-decoration:none; color:inherit; } .agcom-cm-area { width:100% !important; border:none !important; outline:none !important; background:transparent !important; resize:none !important; font-family:inherit !important; font-size:16px !important; line-height:1.5 !important; color:var(--t1) !important; min-height:80px; overflow:hidden; padding:0 !important; } .agcom-cm-area::placeholder { color:var(--t3); } .agcom-cm-preview { position:relative; display:inline-block; align-self:flex-start; line-height:0; } .agcom-cm-preview[hidden] { display:none; } .agcom-cm-preview-img { max-width:200px; max-height:200px; border-radius:12px; display:block; background:var(--bg2); } .agcom-cm-preview-x { position:absolute; top:6px; right:6px; width:26px !important; height:26px !important; border-radius:50% !important; border:none !important; background:rgba(0,0,0,.6) !important; color:#fff !important; display:grid !important; place-items:center !important; cursor:pointer !important; padding:0 !important; } .agcom-cm-preview-x svg { width:14px; height:14px; } .agcom-cm-err { display:none; padding:9px 12px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.24); border-radius:8px; color:#DC2626; font-size:12.5px; font-weight:500; } .agcom-cm-err.on { display:block; } .agcom-cm-toolbar { flex-shrink:0; display:flex; align-items:center; gap:8px; padding:10px 14px; padding-bottom:max(10px, env(safe-area-inset-bottom)); border-top:1px solid var(--bdr); } .agcom-cm-tool { display:inline-flex !important; align-items:center !important; gap:6px !important; padding:8px 14px !important; border:1px solid var(--bdr) !important; background:var(--card) !important; color:var(--acc) !important; border-radius:999px !important; font-size:13px !important; font-weight:700 !important; font-family:inherit !important; cursor:pointer !important; } .agcom-cm-tool:active { background:var(--bg2) !important; } .agcom-cm-tool svg { width:18px; height:18px; } /* Picker panel (slides up within the composer) */ .agcom-cm-pick { position:absolute; left:0; right:0; bottom:0; max-height:60vh; background:var(--card); border-top:1px solid var(--bdr); border-radius:16px 16px 0 0; box-shadow:0 -6px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; z-index:5; padding-bottom:env(safe-area-inset-bottom); } .agcom-cm-pick[hidden] { display:none; } .agcom-cm-pick-hdr { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:12px 14px 8px; } .agcom-cm-pick-title { font-size:14px; font-weight:800; color:var(--t1); } .agcom-cm-pick-x { width:30px !important; height:30px !important; border-radius:50% !important; border:none !important; background:var(--bg2) !important; color:var(--t1) !important; display:grid !important; place-items:center !important; cursor:pointer !important; padding:0 !important; } .agcom-cm-pick-x svg { width:16px; height:16px; } .agcom-cm-pick-search { flex-shrink:0; padding:0 14px 10px; } .agcom-cm-pick-search input { width:100% !important; padding:10px 14px !important; background:var(--bg2) !important; border:1px solid var(--bdr) !important; border-radius:10px !important; font-size:16px !important; font-family:inherit !important; color:var(--t1) !important; outline:none !important; } .agcom-cm-pick-search input:focus { border-color:var(--acc) !important; background:var(--card) !important; } .agcom-cm-pick-grid { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 14px 14px; align-content:start; } .agcom-cm-pick-cell { position:relative; border:none !important; background:var(--bg2) !important; border-radius:10px !important; padding:0 !important; width:100%; height:0; padding-bottom:100% !important; cursor:pointer !important; overflow:hidden; display:block; } .agcom-cm-pick-cell:active { transform:scale(.94); } .agcom-cm-pick-cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } .agcom-cm-gif-cell img { object-fit:cover; } .agcom-cm-pick-loading, .agcom-cm-pick-empty { grid-column:1/-1; text-align:center; color:var(--t2); font-size:13px; padding:24px 8px; } .agcom-cm-pick-attr { flex-shrink:0; text-align:center; font-size:10px; color:var(--t3); padding:0 0 8px; letter-spacing:.4px; } /* Add-link bottom-sheet panel (reuses .agcom-cm-pick shell) */ .agcom-cm-linkpanel { max-height:none; } .agcom-cm-linkpanel-body { padding:0 14px 16px; display:flex; flex-direction:column; gap:10px; } .agcom-cm-linkpanel-row { display:flex; gap:8px; } .agcom-cm-linkpanel-row input { flex:1; min-width:0; padding:11px 14px !important; background:var(--bg2) !important; border:1px solid var(--bdr) !important; border-radius:10px !important; font-size:16px !important; font-family:inherit !important; color:var(--t1) !important; outline:none !important; } .agcom-cm-linkpanel-row input:focus { border-color:var(--acc) !important; background:var(--card) !important; } .agcom-cm-linkpanel-paste { flex:none; padding:0 16px !important; border:1px solid var(--bdr) !important; background:var(--card) !important; color:var(--acc) !important; border-radius:10px !important; font-size:13px !important; font-weight:800 !important; font-family:inherit !important; cursor:pointer !important; } .agcom-cm-linkpanel-paste:active { background:var(--bg2) !important; } .agcom-cm-linkpanel-pill { font-size:12px; font-weight:700; color:var(--acc); padding:2px 2px; } .agcom-cm-linkpanel-pill.is-unknown { color:#b91c1c; } .agcom-cm-linkpanel-add { padding:13px 16px !important; border:none !important; border-radius:12px !important; background:var(--acc) !important; color:#fff !important; font-size:14px !important; font-weight:800 !important; font-family:inherit !important; cursor:pointer !important; } .agcom-cm-linkpanel-add:disabled { opacity:.45 !important; cursor:not-allowed !important; }