/* ===========================================================
   AGX Chat — shared demo styles  (AutoGenX.AI)
   Platform chrome uses the AGX brand gradient.
   Storefronts theme per-scenario via --brand / --brand2 / --accent.
   =========================================================== */

:root {
  --agx-ink: #0b1020;
  --agx-ink-2: #161c2e;
  --agx-slate: #5b6478;
  --agx-line: #e7e9f0;
  --agx-bg: #f6f7fb;
  --agx-card: #ffffff;

  /* AGX product brand */
  --agx-violet: #6d4bff;
  --agx-blue: #2d7cff;
  --agx-teal: #16c6c2;
  --agx-grad: linear-gradient(120deg, #6d4bff 0%, #2d7cff 55%, #16c6c2 100%);
  --agx-grad-soft: linear-gradient(120deg, rgba(109,75,255,.12), rgba(45,124,255,.10), rgba(22,198,194,.12));

  /* Per-scenario brand (overridden inline by JS) */
  --brand: #2d7cff;
  --brand2: #6d4bff;
  --accent: #16c6c2;
  --brand-grad: linear-gradient(120deg, var(--brand2), var(--brand));

  --ok: #15a86b;
  --warn: #f0a020;
  --bad: #e2435b;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 8px 24px rgba(16,24,40,.10);
  --shadow-lg: 0 24px 60px rgba(16,24,40,.18);
  --radius: 16px;
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--agx-ink); background: var(--agx-bg); -webkit-font-smoothing: antialiased; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { width: min(1180px, 92vw); margin-inline: auto; }
.muted { color: var(--agx-slate); }
.center { text-align: center; }
.grad-text { background: var(--agx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-grad-text { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1.15rem; border-radius: 999px; font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, background .2s ease; font-family: inherit; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--agx-grad); color: #fff; box-shadow: 0 10px 24px rgba(45,124,255,.35); }
.btn-brand { background: var(--brand-grad); color: #fff; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.btn-ghost { background: #fff; border-color: var(--agx-line); color: var(--agx-ink); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { border-color: #c9cfe0; }
.btn-dark { background: var(--agx-ink); color: #fff; }

/* Top nav */
.agx-nav { position: sticky; top: 0; z-index: 60; backdrop-filter: saturate(140%) blur(10px); background: rgba(255,255,255,.8); border-bottom: 1px solid var(--agx-line); }
.agx-nav .inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -.02em; }
.brand .logo { min-width: 34px; height: 34px; padding: 0 7px; border-radius: 9px; background: var(--agx-grad); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .82rem; box-shadow: 0 6px 16px rgba(45,124,255,.4); }
.brand .logo.brandlogo { background: var(--brand-grad); }
.nav-links { display: flex; gap: 1.3rem; align-items: center; }
.nav-links a { font-weight: 500; color: var(--agx-slate); font-size: .94rem; }
.nav-links a:hover, .nav-links a.active { color: var(--agx-ink); }
.pill { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; background: var(--agx-grad-soft); color: var(--agx-blue); border: 1px solid rgba(45,124,255,.2); }

section { padding: 72px 0; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
h1,h2,h3,h4 { letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .4em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.lead { font-size: 1.12rem; color: var(--agx-slate); }

.grid { display: grid; gap: 22px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } .nav-links{ display:none; } }

.card { background: var(--agx-card); border: 1px solid var(--agx-line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); }
.card.feature { transition: transform .2s ease, box-shadow .2s ease; }
.card.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-chip { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--agx-grad-soft); color: var(--brand); font-size: 1.3rem; margin-bottom: 12px; }
.badge-soft { background: var(--agx-grad-soft); border:1px solid rgba(45,124,255,.2); border-radius:999px; padding:.3rem .7rem; font-size:.8rem; font-weight:600; color: var(--agx-blue); }
.kpi { font-size: clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.03em; }
.divider { height:1px; background: var(--agx-line); border:0; margin: 0; }
.hide { display:none !important; }

/* ---------- Hub (landing) ---------- */
.hub-hero { background: radial-gradient(1200px 500px at 70% -10%, rgba(109,75,255,.18), transparent), radial-gradient(900px 500px at 10% 0%, rgba(22,198,194,.14), transparent), var(--agx-bg); }
.product-card { position: relative; overflow: hidden; }
.product-card .glow { position:absolute; inset:0; background: var(--agx-grad-soft); opacity:0; transition:.25s; }
.product-card:hover .glow { opacity:1; }
.product-card .inner { position: relative; }
.product-card .status { position:absolute; top:18px; right:18px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; padding:.25rem .6rem; border-radius:999px; }
.status.live { background: rgba(21,168,107,.14); color: var(--ok); }
.status.soon { background:#eef1f7; color: var(--agx-slate); }
.prod-logo { width:54px; height:54px; border-radius:14px; display:grid; place-items:center; font-size:1.6rem; background: var(--agx-grad); color:#fff; box-shadow: var(--shadow-md); margin-bottom:14px; }

/* ---------- Storefront hero ---------- */
.store-hero { position: relative; color:#fff; overflow:hidden; }
.store-hero::before { content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-image: var(--hero-img); }
.store-hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,12,24,.30), rgba(8,12,24,.78)); }
.store-hero .container { position: relative; padding: 92px 0 104px; }
.store-hero .glass { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(6px); border-radius:999px; padding:.3rem .8rem; font-size:.82rem; font-weight:600; }
.store-hero h1 { max-width: 18ch; }
.store-hero .lead { color:#e7eefc; max-width: 54ch; }

/* scenario switcher bar */
.switcher { background: var(--agx-ink); color:#fff; }
.switcher .inner { display:flex; align-items:center; gap:14px; padding:10px 0; flex-wrap:wrap; }
.switcher .label { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#8b93ab; }
.seg { display:flex; gap:6px; background:#161c2e; border:1px solid #26304a; border-radius:999px; padding:4px; flex-wrap:wrap; }
.seg a { padding:.45rem .9rem; border-radius:999px; font-size:.88rem; font-weight:600; color:#aab3cc; }
.seg a.active { background: var(--agx-grad); color:#fff; }
.switcher .ai-flag { margin-left:auto; font-size:.78rem; display:flex; align-items:center; gap:.4rem; color:#aab3cc; }
.dot-live { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.3); }
.dot-mock { width:8px; height:8px; border-radius:50%; background:#f0a020; box-shadow:0 0 0 3px rgba(240,160,32,.3); }

/* product/listing cards */
.catfilter { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.catchip { border:1px solid var(--agx-line); background:#fff; color: var(--agx-ink); border-radius:999px; padding:.55rem 1rem; font-size:.9rem; font-weight:600; cursor:pointer; font-family:inherit; transition: all .18s ease; box-shadow: 0 1px 3px rgba(16,24,40,.05); }
.catchip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.catchip.active { background: var(--brand); border-color: var(--brand); color:#fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 38%, transparent); }

.item-card { overflow:hidden; padding:0; cursor:pointer; }
.item-card .ph { height:190px; background-size:cover; background-position:center; position:relative; }
.item-card .ph .tags { position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; }
.tagchip { font-size:.72rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; color:#fff; background: var(--accent); }
.item-card .body { padding:18px; }
.item-card h3 { font-size:1.18rem; margin-bottom:.3rem; }
.item-card .meta { font-size:.82rem; color:var(--agx-slate); display:flex; gap:.6rem; flex-wrap:wrap; margin:.5rem 0 .7rem; }
.item-card .foot { display:flex; align-items:center; justify-content:space-between; margin-top:.6rem; gap:8px; }
.item-card .price { font-weight:800; font-size:1.2rem; }
.item-card .price s { color:var(--agx-slate); font-weight:500; font-size:.9rem; margin-right:6px; }
.item-card .price .sub { font-weight:500; font-size:.78rem; color:var(--agx-slate); }

/* ---------- tour / product detail takeover ---------- */
.tour-detail { animation: tdfade .35s ease both; }
@keyframes tdfade { from { opacity: 0; } to { opacity: 1; } }
.td-hero { background-size: cover; background-position: center; color: #fff; }
.td-hero-in { padding: 120px 0 40px; }
.td-back { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.4); color: #fff; padding: .5rem 1rem; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: .88rem; font-weight: 600; backdrop-filter: blur(6px); transition: background .15s; }
.td-back:hover { background: rgba(255,255,255,.28); }
.td-hero .td-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 12px; }
.td-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 .5rem; max-width: 18ch; }
.td-hero .td-meta { font-size: 1rem; opacity: .95; }
.td-grid { display: grid; grid-template-columns: 1fr 340px; gap: 34px; padding: 44px 0 64px; align-items: start; }
.td-main .lead { font-size: 1.12rem; color: var(--agx-ink); }
.td-h { font-size: 1.15rem; margin: 28px 0 12px; }
.td-incl { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.td-incl li { position: relative; padding-left: 26px; color: var(--agx-slate); font-size: .96rem; }
.td-incl li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 16%, #fff); color: var(--brand); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.td-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.td-gcard { text-align: left; border: 1px solid var(--agx-line); background: #fff; border-radius: 16px; overflow: hidden; cursor: pointer; padding: 0 0 12px; font-family: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.td-gcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; }
.td-gcard .gph { display: block; height: 120px; background-size: cover; background-position: center; }
.td-gcard .gname { display: block; font-weight: 700; font-size: .96rem; margin: 10px 12px 2px; color: var(--agx-ink); }
.td-gcard .gprice { display: block; margin: 0 12px; font-weight: 800; color: var(--agx-ink); }
.td-gcard .gprice s { color: var(--agx-slate); font-weight: 500; font-size: .82rem; margin-right: 5px; }
.td-side { position: sticky; top: 90px; }
.td-card { border: 1px solid var(--agx-line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow-md); background: #fff; }
.td-card .td-price { font-size: 1.9rem; font-weight: 800; color: var(--agx-ink); margin-bottom: 14px; }
.td-card .td-price s { color: var(--agx-slate); font-weight: 500; font-size: 1.1rem; margin-right: 8px; }
.td-card .td-price .sub { font-weight: 500; font-size: .9rem; color: var(--agx-slate); }
.td-card .btn { width: 100%; margin-bottom: 10px; }
.td-card .td-trust { text-align: center; font-size: .8rem; color: var(--agx-slate); margin-top: 4px; }
@media (max-width: 820px) { .td-grid { grid-template-columns: 1fr; } .td-side { position: static; } .td-incl { grid-template-columns: 1fr; } }

/* ---------- AGX Chat web widget ---------- */
.agx-launcher { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 64px; height: 64px; border-radius: 20px; border: none; cursor: pointer; background: var(--agx-grad); color: #fff; box-shadow: 0 14px 32px rgba(45,124,255,.45); display: grid; place-items: center; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.agx-launcher svg { width: 30px; height: 30px; }
.agx-launcher::after { content:""; position:absolute; inset:0; border-radius:inherit; animation: agxpulse 2.6s ease-out infinite; }
@keyframes agxpulse { 0%{ box-shadow:0 0 0 0 rgba(45,124,255,.4);} 70%{ box-shadow:0 0 0 18px rgba(45,124,255,0);} 100%{ box-shadow:0 0 0 0 rgba(45,124,255,0);} }
.agx-launcher:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 20px 40px rgba(45,124,255,.52); }
.agx-launcher .ping { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #ff5d73; color: #fff; font-size: .7rem; display: grid; place-items: center; border: 2px solid #fff; font-weight: 700; }

.agx-widget { position: fixed; top: 0; right: 0; bottom: 0; z-index: 95; width: min(440px, 100vw); height: 100vh; background: #fff; border-radius: 24px 0 0 24px; overflow: hidden; box-shadow: -18px 0 50px rgba(16,24,40,.22); display: none; flex-direction: column; }
.agx-widget.open { display: flex; animation: agxslide .32s cubic-bezier(.2,.8,.2,1); }
@keyframes agxslide { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 520px) { .agx-widget { width: 100vw; border-radius: 0; } }
body { transition: padding-right .3s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 1024px) { body.agx-chat-open { padding-right: 440px; } }

.agx-w-head { position: relative; background: var(--agx-grad); color: #fff; padding: 16px 18px; overflow: hidden; }
.agx-w-head::before { content:""; position:absolute; inset:0; background: radial-gradient(160px 150px at 90% -45%, rgba(255,255,255,.30), transparent); }
.agx-w-head .row { position: relative; display: flex; align-items: center; gap: .75rem; }
.agx-w-head .av { position: relative; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.20), 0 0 0 4px rgba(255,255,255,.22); display: grid; place-items: center; font-size: 1.55rem; }
.agx-w-head .av .av-dot { position: absolute; right: 1px; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #2bd07a; border: 2.5px solid #fff; }
.agx-w-head .who { line-height: 1.25; }
.agx-w-head .name { font-weight: 800; letter-spacing: -.01em; font-size: 1.04rem; }
.agx-w-head .status { font-size: .76rem; opacity: .9; margin-top: 1px; }
.agx-w-head .x { margin-left: auto; background: rgba(255,255,255,.16); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.agx-w-head .x:hover { background: rgba(255,255,255,.3); }

.agx-w-body { flex: 1; overflow-y: auto; padding: 20px 16px 16px; background: #f6f8fc; scroll-behavior: smooth; }
.agx-w-body::-webkit-scrollbar { width: 7px; }
.agx-w-body::-webkit-scrollbar-thumb { background: #d4d9e6; border-radius: 999px; }
.msg { display: flex; margin-bottom: 10px; align-items: flex-end; animation: msgin .26s ease both; }
@keyframes msgin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.bot { justify-content: flex-start; }
.msg .bubble { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: .93rem; line-height: 1.55; }
.msg.bot .bubble { background: #fff; color: var(--agx-ink); border: 1px solid #ebedf3; border-bottom-left-radius: 7px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.msg.user { flex-direction: row-reverse; }
.msg.user .bubble { background: var(--agx-grad); color: #fff; border-bottom-right-radius: 7px; box-shadow: 0 6px 16px rgba(45,124,255,.30); }
/* rich content (cards/forms) renders without the chat bubble chrome */
.msg.bot .bubble:has(> .chat-product), .msg.bot .bubble:has(> .offer-card), .msg.bot .bubble:has(> .lead-card), .msg.bot .bubble:has(> .welcome) { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 96%; width: 100%; }

/* welcome card (first message) */
.welcome { background: #fff; border: 1px solid #e9ecf3; border-radius: 18px; padding: 18px; box-shadow: 0 8px 22px rgba(16,24,40,.07); }
.welcome .wav { width: 54px; height: 54px; border-radius: 50%; background: var(--agx-grad); display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 8px 18px rgba(45,124,255,.35); margin-bottom: 11px; }
.welcome .wtitle { font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; color: var(--agx-ink); }
.welcome .wsub { color: var(--agx-slate); font-size: .9rem; margin-top: 5px; line-height: 1.55; }

.typing { display: inline-flex; gap: 5px; padding: 13px 15px; background:#fff; border:1px solid #ebedf3; border-radius:20px; border-bottom-left-radius:7px; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: #b9c0d4; animation: blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay: .2s; } .typing span:nth-child(3){ animation-delay: .4s; }
@keyframes blink { 0%,60%,100%{ opacity:.3; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-4px);} }

.chat-product { background:#fff; border:1px solid #eef0f6; border-radius:18px; overflow:hidden; box-shadow: 0 6px 18px rgba(16,24,40,.08); margin-top:6px; }
.chat-product .ph { height: 124px; background-size: cover; background-position:center; position:relative; }
.chat-product .badge { position:absolute; top:10px; left:10px; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color:#fff; font-size:.7rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.chat-product .pp { padding: 12px 14px; }
.chat-product .pp h5 { margin:0 0 3px; font-size:1rem; }
.chat-product .pp .price { font-weight:800; color: var(--agx-ink); }
.chat-product .pp .price s { color: var(--agx-slate); font-weight:500; margin-right:6px; font-size:.85rem; }
.chat-product .pp .meta { font-size:.78rem; color: var(--agx-slate); }
.chat-product .pp .row { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; }
.chat-product .pp .add { background: var(--agx-grad); color:#fff; border:none; border-radius:999px; padding:.5rem .9rem; font-weight:700; font-size:.82rem; cursor:pointer; box-shadow: 0 6px 14px rgba(45,124,255,.3); transition: transform .15s; }
.chat-product .pp .add:hover { transform: translateY(-1px); }

.offer-card { background: linear-gradient(120deg,#fff6ef,#ffffff); border:1px dashed var(--accent); border-radius:18px; padding:14px; margin-top:6px; }
.offer-card .code { font-weight:800; letter-spacing:.06em; color:var(--accent); }
.offer-card .add { background: var(--agx-grad); color:#fff; border:none; border-radius:999px; padding:.6rem; font-weight:700; font-size:.85rem; cursor:pointer; width:100%; margin-top:10px; box-shadow: 0 6px 14px rgba(45,124,255,.3); }

.lead-card { background:#f4f7ff; border:1px solid #dde8ff; border-radius:18px; padding:14px; margin-top:6px; }
.lead-card input { width:100%; border:1px solid #dbe2f0; border-radius:12px; padding:.6rem .8rem; font-size:.88rem; margin-top:8px; font-family:inherit; outline:none; }
.lead-card input:focus { border-color: var(--agx-blue); box-shadow: 0 0 0 3px rgba(45,124,255,.15); }
.lead-card .add { background: var(--agx-grad); color:#fff; border:none; border-radius:999px; padding:.6rem; font-weight:700; font-size:.85rem; cursor:pointer; width:100%; margin-top:10px; }

.kb-source { font-size:.74rem; color: var(--agx-slate); margin-top:8px; display:flex; gap:6px; align-items:center; }
.kb-source .ic { color: var(--agx-teal); }
.handoff { background:#fff4f5; border:1px solid #ffd6db; border-radius:14px; padding:11px 13px; margin-bottom:12px; font-size:.85rem; color:#a3283c; display:flex; gap:8px; align-items:center; }

.agx-quick { display:flex; flex-wrap:wrap; gap:7px; padding: 4px 16px 10px; background: linear-gradient(180deg, rgba(246,248,252,0), #f6f8fc 45%); }
.agx-quick.tiles { flex-direction: column; gap: 8px; }
.chip { border:1px solid #e2e6f0; background:#fff; border-radius:999px; padding:.5rem .85rem; font-size:.83rem; cursor:pointer; color: var(--agx-ink); transition: all .15s ease; font-family:inherit; box-shadow: 0 1px 3px rgba(16,24,40,.06); }
.chip:hover { border-color: transparent; color:#fff; background: var(--agx-grad); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(45,124,255,.3); }
.chip.qtile { display:flex; align-items:center; gap:11px; width:100%; text-align:left; border-radius:14px; padding:11px 13px; font-size:.91rem; }
.chip.qtile .qico { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#eef2ff; font-size:1.05rem; flex:none; transition:.15s; }
.chip.qtile .qlbl { flex:1; font-weight:600; line-height:1.2; }
.chip.qtile .qarr { color: var(--agx-slate); font-size:1.2rem; font-weight:700; line-height:1; }
.chip.qtile:hover { background:#fff; border-color: var(--agx-blue); color: var(--agx-ink); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(45,124,255,.16); }
.chip.qtile:hover .qico { background: var(--agx-grad); color:#fff; }
.chip.qtile:hover .qarr { color: var(--agx-blue); }

.agx-w-foot { padding: 12px 14px 14px; border-top:1px solid #eef0f6; background:#fff; }
.agx-w-foot .ipt { display:flex; gap:6px; align-items:center; background:#f4f6fb; border:1px solid #e6e9f2; border-radius:999px; padding:4px 4px 4px 8px; transition: .15s; }
.agx-w-foot .ipt:focus-within { border-color: var(--agx-blue); box-shadow: 0 0 0 3px rgba(45,124,255,.14); background:#fff; }
.agx-w-foot input { flex:1; border:none; background:transparent; padding:.55rem .6rem; font-size:.92rem; outline:none; font-family:inherit; }
.agx-w-foot .send { background: var(--agx-grad); color:#fff; border:none; width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1rem; flex:none; display:grid; place-items:center; box-shadow: 0 6px 14px rgba(45,124,255,.35); transition: transform .15s; }
.agx-w-foot .send:hover { transform: scale(1.06); }
.agx-w-foot .powered { text-align:center; font-size:.68rem; color: var(--agx-slate); margin-top:9px; }

.agx-footer { background: var(--agx-ink); color:#c7cdde; padding: 48px 0; }
.agx-footer a { color:#c7cdde; } .agx-footer a:hover{ color:#fff; }
.tag-sell{ background: rgba(109,75,255,.12); color:#6d4bff; } .tag-support{ background: rgba(22,198,194,.14); color:#0f9b97; } .tag-scale{ background: rgba(45,124,255,.12); color:#2d7cff; }
.tag { display:inline-block; font-size:.74rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; }