/* SHOPLINK_LIGHT_PRODUCT_V2 — staged Theme layer, 2026-10-28. */
:root{color-scheme:light;--bg:#f8fafc;--card:#fff;--card-h:#f1f5fa;--line:#e4e9f1;--line2:#d8e0eb;--ink:#172233;--mute:#657286;--mute2:#8390a2;--ok:#159d67;--blue:#2564c8;--r:16px;--hub-bg:#f8fafc;--hub-ink:#172233;--hub-soft:#657286;--hub-line:#dfe5ef;--hub-blue:#245dc4}
html,body{background:#f8fafc!important;color:#172233!important}
body:has(#shoplink-creator-app){background:#f6f8fc!important}
#shoplink-creator-app{background:#f6f8fc!important;gap:16px!important}
#shoplink-creator-app .main{gap:12px!important}
#shoplink-creator-app .top nav button,#shoplink-creator-app .top nav a{border-color:#dce3ed;background:#fff;color:#304158;box-shadow:0 1px 2px #24394e08}
#shoplink-creator-app .top nav .seo-nav-link{color:#385375}
#shoplink-creator-app .top nav .seo-nav-link:hover{color:#163a72}
#shoplink-creator-app .hero .eyebrow{color:#6c7a90}
#shoplink-creator-app .hero h1{color:#142237}
#shoplink-creator-app .hero .sub{color:#657285}
#shoplink-creator-app .cat{background:#fff;color:#42536b;border-color:#dce4ef}
#shoplink-creator-app .step{background:#fff;border-color:#e0e6ee;box-shadow:0 3px 11px #1b324e07}
#shoplink-creator-app .step:hover,#shoplink-creator-app .step.active{background:#f5f9ff;border-color:#b1c7e8;box-shadow:0 7px 21px #1b324e13}
#shoplink-creator-app .step .ic{background:transparent}
#shoplink-creator-app .step .ic svg{stroke:#375472}
#shoplink-creator-app .step .n{color:#8998ab}
#shoplink-creator-app .step strong{color:#1c2c40}
#shoplink-creator-app .step small{color:#6a7b91}
#shoplink-creator-app .v3-footnote{background:#fff;border-color:#e0e6f0;color:#64748a;box-shadow:0 1px 3px #22375108}
#shoplink-creator-app .v3-status-dot{background:#3172dd}
#shoplink-creator-app .bar{background:#fff;border-color:#dce4ed;box-shadow:0 4px 14px #1428400d}
#shoplink-creator-app .trust li{color:#40516a}
#shoplink-creator-app .cta{background:#1d4f9f;color:#fff!important}
#shoplink-creator-app .cta:hover{background:#174487}
#shoplink-creator-app .chat{background:#fff;border:1px solid #e2e8f0;border-radius:21px;box-shadow:0 12px 46px #1428400d;padding:17px!important;gap:12px}
#shoplink-creator-app .chat-head{border-bottom:1px solid #edf1f6;padding:0 2px 12px;flex-basis:55px}
#shoplink-creator-app .chat-head img{width:38px;height:38px;flex-basis:38px;border-radius:11px;background:#0d1523;object-fit:contain;padding:4px}
#shoplink-creator-app .chat-head .who b{color:#172840}
#shoplink-creator-app .chat-head .who span{color:#6a7c90}
#shoplink-creator-app .mine,#shoplink-creator-app .more{background:#f8fafc;border-color:#e0e7f1;color:#324865}
#shoplink-creator-app .mine:hover,#shoplink-creator-app .more:hover{background:#eaf1fa}
#shoplink-creator-app .menu{background:#fff;border-color:#dbe4ef;box-shadow:0 22px 44px #18304d1e}
#shoplink-creator-app .menu button,#shoplink-creator-app .menu a{color:#223650}
#shoplink-creator-app .thread{padding:12px 8px 16px}
#shoplink-creator-app .bubble{font-size:14px;line-height:1.63}
#shoplink-creator-app .bubble.ai{background:#f1f5fa;border:1px solid #e8edf4;color:#213049}
#shoplink-creator-app .bubble.user{background:#e3edff;color:#153c75;border:1px solid #d0e0fb}
#shoplink-creator-app .bubble.user a{color:#174887}
#shoplink-creator-app .chips button{background:#fff;border-color:#dce5f1;color:#435670}
#shoplink-creator-app .chips button:hover{background:#eff5fd}
#shoplink-creator-app .legal-note{color:#758397;font-size:11.5px}
#shoplink-creator-app .legal-note a{color:#285db5}
#shoplink-creator-app .composer{background:#f5f8fc;border:1px solid #d4dfec;box-shadow:none;gap:4px}
#shoplink-creator-app .composer:focus-within{border-color:#8cb3ea;box-shadow:0 0 0 3px #2a77dc1c}
#shoplink-creator-app #creator-input{color:#1a2c42}
#shoplink-creator-app #creator-input::placeholder{color:#8594a8}
#shoplink-creator-app .composer .send{background:#2057ab;color:white;border-radius:11px}
#shoplink-creator-app .composer .send svg{stroke:#fff}
#shoplink-creator-app .composer .mic{border-radius:11px;color:#405b78}
#shoplink-creator-app .composer .mic svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#shoplink-creator-app .composer .mic:hover{background:#e6eef9}
#shoplink-creator-app .composer .mic[aria-pressed=true]{background:#fff0ef;color:#c63f3a;box-shadow:0 0 0 1px #f2bbbb inset}
#shoplink-creator-app .composer .mic[aria-pressed=true] svg{animation:slmic-pulse 1.25s ease-in-out infinite}
#shoplink-creator-app .voice-status{display:flex;gap:7px;align-items:center;flex:0 0 auto;min-height:29px;padding:4px 11px;margin:0;background:#edf5ff;color:#24568d;border:1px solid #d8e9fd;border-radius:10px;font-size:12px}
#shoplink-creator-app .voice-status[hidden]{display:none!important}
#shoplink-creator-app .voice-status.listening:before{content:"";width:8px;height:8px;background:#e45450;border-radius:50%;animation:slmic-pulse 1.25s ease-in-out infinite}
#shoplink-creator-app .voice-status.error{background:#fff1f1;color:#9a3431;border-color:#f4dbd8}
#shoplink-creator-app .act{color:#7d8da0}
#shoplink-creator-app .act:hover{color:#234b88;background:#eaf2ff}
#shoplink-creator-app .req{background:#fafcff;color:#6b7890;border-color:#e1e8f1}
#shoplink-creator-app .req b{color:#263d59}
#shoplink-creator-app .tobottom{background:#fff;border-color:#dce5ef;box-shadow:0 5px 18px #243a5319}
#shoplink-creator-app .seo-panel{background:#fff;color:#43526a;border-color:#e0e6f0}
#shoplink-creator-app .seo-panel h2{color:#24384f}
#shoplink-creator-app .seo-panel dd{color:#536780}
#shoplink-creator-app .dialog{background:#fff;color:#1b2c40;border-color:#dbe4ef;box-shadow:0 28px 65px #16243e27}
#shoplink-creator-app .dialog p{color:#536780}
#shoplink-creator-app .qform input,#shoplink-creator-app .qform select,#shoplink-creator-app .qform textarea{background:#fbfcff;color:#20354e;border-color:#d8e2ee}
#shoplink-creator-app .qform button[type=submit]{background:#2057ab;color:white!important}
#shoplink-creator-app .sl-agency-card{background:#f7faff;border-color:#dbe7f7}
#shoplink-creator-app .sl-agency-fields p{color:#40516a}
@keyframes slmic-pulse{50%{opacity:.45;transform:scale(.86)}}
@media(min-width:901px){
 #shoplink-creator-app .steps{grid-template-rows:repeat(2,minmax(0,1fr))}
 #shoplink-creator-app .step{box-shadow:0 4px 13px #1b324e07}
 #shoplink-creator-app .chat{min-height:0}
}
@media(max-width:900px){
 #shoplink-creator-app{background:#f6f8fc!important}
 #shoplink-creator-app .main{background:#f6f8fc;overflow:visible;min-height:100dvh;height:auto;padding-bottom:calc(18px + env(safe-area-inset-bottom))!important}
 #shoplink-creator-app .main-content{min-height:0;height:auto}
 #shoplink-creator-app .steps{flex:0 0 auto;grid-auto-rows:minmax(115px,auto);grid-template-rows:none;min-height:236px}
 #shoplink-creator-app .step .ic{min-height:40px}
 #shoplink-creator-app .step .txt{min-height:52px}
 #shoplink-creator-app .bar{flex:0 0 auto;min-height:68px;height:auto;padding:8px 9px 8px 12px;gap:7px}
 #shoplink-creator-app .cta{font-size:12px;padding:0 12px;height:43px}
 #shoplink-creator-app .trust li{font-size:10px}
 #shoplink-creator-app .chat{height:var(--sl-mobile-h,100dvh);min-height:0;padding:12px 12px calc(10px + env(safe-area-inset-bottom))!important;border:0;border-top:1px solid #e1e7f0;border-radius:0}
 #shoplink-creator-app .chat-head{flex-basis:48px}
 #shoplink-creator-app .voice-status{min-height:27px}
 #shoplink-creator-app .composer{min-height:60px;height:60px}
}
@media(max-width:390px){#shoplink-creator-app .cta{padding:0 9px;font-size:11px}}
@media(prefers-reduced-motion:reduce){#shoplink-creator-app .composer .mic svg,#shoplink-creator-app .voice-status:before{animation:none!important}}

/* Shared informational pages: still keep their structured HTML/SEO. */
body.shoplink-light-content{background:#f8fafc!important;color:#172233!important}
body.shoplink-light-content header{background:#fff;border-color:#e3e8f0}
body.shoplink-light-content header .brand{color:#172233!important}
body.shoplink-light-content nav a{color:#51627b}
body.shoplink-light-content .lead,body.shoplink-light-content section.content p,body.shoplink-light-content section.content li,body.shoplink-light-content .faq dd{color:#53647a}
body.shoplink-light-content h1,body.shoplink-light-content section.content h2,body.shoplink-light-content .card h3{color:#16253b}
body.shoplink-light-content .eyebrow{color:#3968a7}
body.shoplink-light-content section.content{border-color:#e0e6f0}
body.shoplink-light-content .card,body.shoplink-light-content .steps li{background:#fff;border-color:#e2e8f0;color:#263b55;box-shadow:0 3px 11px #16345309}
body.shoplink-light-content .card p{color:#5d6d83}
body.shoplink-light-content .content strong{color:#20334b}
body.shoplink-light-content .action{background:#2057ab;color:#fff}
body.shoplink-light-content .action.secondary{background:#fff;border-color:#dbe3ed;color:#244c85}
body.shoplink-light-content .disclaimer{color:#738299}
body.shoplink-light-content footer{border-color:#e2e8f0;color:#6d7d90}
body.shoplink-light-content a{color:#285da9}

/* Account hub: light across its existing role-aware and historical sections. */
body:has(.hub){background:#f7f9fc!important;color:#1a2b43!important}
body:has(.hub) .hub-top{background:#fff;color:#1a2b43;border-color:#e0e7f0}
body:has(.hub) .hub-topnav>a{color:#415673}
body:has(.hub) .hub-topnav .nav-login,body:has(.hub) .hub-topnav .nav-back{background:#f7fafe;color:#244575;border-color:#dce5f1}
body:has(.hub) .hub-hero{border-color:#e0e7ef}
body:has(.hub) .hub-hero h1{color:#162b43}
body:has(.hub) .hub-hero h1 em{color:#2662ae}
body:has(.hub) .hero-lede{color:#5a6b80}
body:has(.hub) .eyebrow,body:has(.hub) .kicker{color:#446ca1}
body:has(.hub) .hub-primary{background:#2057ab;color:#fff;border-color:#2057ab}
body:has(.hub) .hub-secondary{background:#fff;color:#22446e;border-color:#d6e0ed}
body:has(.hub) .hero-visual{background:radial-gradient(circle at 40% 35%,#eaf2ff,#f8fafc 65%,#eff4fb);border-color:#dce5ef}
body:has(.hub) .hero-visual *{color:#20354e}
body:has(.hub) .card,body:has(.hub) .workspace-card,body:has(.hub) .role-card{background:#fff;color:#1f3046;border-color:#dce4ee}
body:has(.hub) .role-card:hover,body:has(.hub) .workspace-card:hover{background:#f3f8ff}
body:has(.hub) .hero-disclaimer,body:has(.hub) .small-note{color:#68778c}
body:has(.hub) .hub-btn{box-shadow:0 1px 2px #2040640a}
body:has(.hub) .hub-footer{color:#6a798d;border-color:#e0e7ef}
body:has(.hub) .hub-footer a{color:#385b89}


/* Compact desktop step rhythm: balanced icons and text, not blank tiles. */
@media(min-width:901px){
 #shoplink-creator-app .step .ic{display:grid;place-items:center;flex:1 1 55%;padding:8px 12px 0}
 #shoplink-creator-app .step .txt{flex:0 0 auto;min-height:70px;justify-content:center;padding:8px 16px 14px}
}

/* Account hub: full contrast correction for cards and diagrams. */
body:has(.hub) .hub-statement{border-color:#e2e8f0}
body:has(.hub) .hub-statement>span{color:#778aa2}
body:has(.hub) .hub-statement p{color:#465a74}
body:has(.hub) .hub-statement b{color:#1b304a}
body:has(.hub) .section-heading>p{color:#68798f}
body:has(.hub) .hero-visual .visual-index{color:#5b7192}
body:has(.hub) .hero-visual .orbit{border-color:#bfd1e8}
body:has(.hub) .hero-visual .core-product{background:linear-gradient(160deg,#ffffff,#eaf3ff);border:1px solid #b9cde7;box-shadow:0 12px 30px #14345118}
body:has(.hub) .hero-visual .core-icon{background:#1a4c98;color:#fff}
body:has(.hub) .hero-visual .core-product>span:not(.core-icon){color:#6280a2}
body:has(.hub) .hero-visual .core-product strong{color:#173b6b}
body:has(.hub) .hero-visual .creator-node{background:#fff;box-shadow:0 9px 24px #254b7518;border-color:#c8d7e8;color:#1a3553}
body:has(.hub) .hero-visual .creator-node strong{color:#1c3a61}
body:has(.hub) .hero-visual .creator-node small{color:#59738e}
body:has(.hub) .hero-visual .node-mark{background:#e7f0fb;border-color:#cedef0;color:#25558c}
body:has(.hub) .hero-visual .node-ai{background:#efecff;color:#6652a0}
body:has(.hub) .hero-visual .visual-caption{color:#5d7087}
body:has(.hub) .role-card{color:#1b2d44!important;border-color:#dbe4ee;background:#fff}
body:has(.hub) .role-card:hover{background:#f3f8ff;border-color:#b6cee9}
body:has(.hub) .role-card.is-selected{background:#eaf3ff;border-color:#98bee8;box-shadow:0 0 0 1px #bfd8f6 inset}
body:has(.hub) .role-index{color:#6d85a4}
body:has(.hub) .role-arrow{color:#3b6ba6}
body:has(.hub) .role-icon{background:#edf4fc;color:#285ca1}
body:has(.hub) .role-card>span:nth-last-child(2){color:#65768d}
body:has(.hub) .role-foot{color:#245da8!important}
body:has(.hub) .role-detail{background:#fff;border-color:#dce5ef}
body:has(.hub) .detail-label{color:#57708d}
body:has(.hub) .detail-number{color:#205b9e}
body:has(.hub) .detail-columns h3{color:#20354c}
body:has(.hub) .detail-columns p{color:#60748d}
body:has(.hub) .detail-steps li{color:#2e4867;background:#f5f8fc;border-color:#dfe7f1}
body:has(.hub) .step-no{color:#346fb0}
body:has(.hub) .hub-loop{border-color:#e1e8f1}
body:has(.hub) .loop-step{background:#fff;border-color:#dfe7f0}
body:has(.hub) .loop-step>span{color:#7c8ea7}
body:has(.hub) .loop-icon{background:#eef5fe;border-color:#d4e1f0;color:#316aa9}
body:has(.hub) .loop-step h3{color:#1d304b}
body:has(.hub) .loop-step p{color:#63748b}
body:has(.hub) .hub-invite{background:linear-gradient(115deg,#eaf2fc,#f6faff);border-color:#c8dbed}
body:has(.hub) .invite-copy>p:not(.kicker){color:#546981}
body:has(.hub) .invite-copy .small-note{color:#6c8098}
body:has(.hub) .share-status{color:#316bb1!important}
body:has(.hub) .invite-art{background:radial-gradient(circle at 50% 48%,#dcecff,#f4f9ff 72%);color:#416894}
body:has(.hub) .invite-art strong{color:#205393}
body:has(.hub) .account-status{color:#526a86;border-color:#dce5ef}
body:has(.hub) .account-status.is-authenticated{color:#16845b;border-color:#a8dfca}
body:has(.hub) .workspace-card{background:#fff;border-color:#dbe4ef;color:#1c344d}
body:has(.hub) .workspace-card p{color:#64758a}
body:has(.hub) .workspace-link{color:#285da8}
body:has(.hub) .coming-label{color:#7a899c}
body:has(.hub) .legacy-head{background:#fff;border-color:#dce5ee}
body:has(.hub) .legacy-head p{color:#65768b}
body:has(.hub) #agency-cabinet{background:#fff;border-color:#dae4f0}
body:has(.hub) #agency-cabinet .ag-project,body:has(.hub) #agency-cabinet .ag-inbox{background:#f5f8fd;border-color:#d7e2ee}
body:has(.hub) #agency-cabinet .ag-note,body:has(.hub) #agency-cabinet pre{color:#5e7089}
body:has(.hub) #legacy-region input,body:has(.hub) #legacy-region select,body:has(.hub) #legacy-region textarea{background:#fff;color:#1d334d;border-color:#c9d5e5}
body:has(.hub) #legacy-region .card,body:has(.hub) #legacy-region .quote{background:#fff;border-color:#dce5ef;color:#1d334d}
body:has(.hub) #legacy-region .quote.old{background:#f4f7fc}
body:has(.hub) #legacy-region .msgs{background:#f7fafc;border-color:#dce5ef}
body:has(.hub) #legacy-region .tabs button,body:has(.hub) #legacy-region .ghost{background:#fff;color:#28527b;border-color:#d8e3ef}
body:has(.hub) #legacy-region .tabs button[aria-pressed=true]{background:#2057ab;color:#fff}
body:has(.hub) #legacy-region .btn,body:has(.hub) #legacy-region .form>button{background:#2057ab;color:#fff}
body:has(.hub) #legacy-region .meta{color:#71839a}
body:has(.hub) #legacy-region .pill{border-color:#dce5ef}
body:has(.hub) #legacy-region td,body:has(.hub) #legacy-region th{border-color:#e3eaf2}
body:has(.hub) .footer-logo{color:#1c3049}
body:has(.hub) .footer-links a{color:#526989}
/* CHANGE02_NATIVE_CHAT_V3 — no framed chat container, glass controls and lower dock. */
@media (min-width:901px){
  #shoplink-creator-app{padding-bottom:9px!important;gap:19px!important}
  #shoplink-creator-app .chat{padding:0 5px 0 7px!important}
}
#shoplink-creator-app .chat{
  border:0!important;border-radius:0!important;
  box-shadow:none!important;background:transparent!important;
  gap:8px;
}
#shoplink-creator-app .chat-head{
  flex:0 0 60px;min-height:0;padding:0 1px 6px!important;
  border:0!important;background:transparent!important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
#shoplink-creator-app .chat-head img{
  width:39px;height:39px;flex:0 0 39px;
  padding:4px;border-radius:13px!important;
  background:#131b2a;
  box-shadow:0 3px 13px rgba(29,55,87,.13);
}
#shoplink-creator-app .chat-head .who{gap:2px}
#shoplink-creator-app .chat-head .who b{font-weight:750;letter-spacing:-.02em}
#shoplink-creator-app .mine,
#shoplink-creator-app .more,
#shoplink-creator-app .top nav a,
#shoplink-creator-app .top nav button,
#shoplink-creator-app .chips button{
  background:rgba(255,255,255,.67)!important;
  border:1px solid rgba(187,204,226,.63)!important;
  color:#344968!important;
  box-shadow:0 2px 9px rgba(30,63,104,.045),inset 0 1px 0 rgba(255,255,255,.86);
  backdrop-filter:blur(13px) saturate(130%);
  -webkit-backdrop-filter:blur(13px) saturate(130%);
}
#shoplink-creator-app .mine:hover,
#shoplink-creator-app .more:hover,
#shoplink-creator-app .top nav a:hover,
#shoplink-creator-app .top nav button:hover,
#shoplink-creator-app .chips button:hover{
  background:rgba(241,247,255,.94)!important;
  border-color:rgba(125,161,207,.67)!important;
}
#shoplink-creator-app .mine:focus-visible,
#shoplink-creator-app .more:focus-visible,
#shoplink-creator-app .composer .mic:focus-visible,
#shoplink-creator-app .composer .send:focus-visible{
  outline:2px solid #3274d2!important;outline-offset:3px;
}
#shoplink-creator-app .thread{
  width:100%;max-width:none!important;
  padding:2px 2px 18px 0!important;
  scrollbar-width:thin;scrollbar-color:rgba(130,151,178,.32) transparent;
}
#shoplink-creator-app .msg{max-width:min(91%,710px)}
#shoplink-creator-app .bubble{
  border-radius:18px;
  line-height:1.65;
  padding:12px 16px;
  box-shadow:0 2px 7px rgba(24,48,85,.026);
}
#shoplink-creator-app .bubble.ai{border-bottom-left-radius:7px}
#shoplink-creator-app .bubble.user{border-bottom-right-radius:7px}
#shoplink-creator-app .acts{margin:5px 0 0 7px}
#shoplink-creator-app .act{border-radius:9px}
#shoplink-creator-app .chips{
  gap:7px;align-items:center;
  padding:0 1px 2px;
}
#shoplink-creator-app .chips button{height:33px;border-radius:999px;padding:0 13px}
#shoplink-creator-app .legal-note{
  text-align:left!important;
  margin:0 0 0 3px;
  padding:0!important;
  background:transparent;border:0!important;
  font-size:10.5px;letter-spacing:.005em;
  line-height:1.22;color:#8795a6;
  flex:0 0 auto;min-height:13px;
}
#shoplink-creator-app .legal-note a{color:#5c7b9f!important}
#shoplink-creator-app .composer{
  width:100%;max-width:none!important;
  flex:0 0 66px!important;height:66px!important;
  margin-bottom:0!important;
  padding:0 9px 0 18px!important;
  border-radius:18px!important;
  border:1px solid #d3dfeb!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 3px 18px rgba(31,64,108,.065),inset 0 1px 0 rgba(255,255,255,.9)!important;
  backdrop-filter:blur(22px) saturate(128%);
  -webkit-backdrop-filter:blur(22px) saturate(128%);
}
#shoplink-creator-app .composer:focus-within{
  border-color:#7bace5!important;
  box-shadow:0 0 0 3px rgba(45,117,220,.12),0 3px 18px rgba(31,64,108,.07)!important;
}
#shoplink-creator-app #creator-input{height:48px!important;font-size:14.5px!important}
#shoplink-creator-app .composer .mic{color:#4c6482!important}
#shoplink-creator-app .composer .send{background:#235ab0!important;box-shadow:0 2px 5px #1c4a9b16}
#shoplink-creator-app .composer .send:hover{background:#194d9d!important}
#shoplink-creator-app .voice-status{align-self:stretch;margin:0 1px;padding:7px 10px}
#shoplink-creator-app .menu{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(191,207,228,.8);
  border-radius:15px;
  box-shadow:0 18px 45px rgba(29,49,83,.19);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
#shoplink-creator-app .tobottom{
  background:rgba(255,255,255,.89);
  backdrop-filter:blur(16px);
}
@media(max-width:900px){
  #shoplink-creator-app .chat{
    padding:10px 12px calc(4px + env(safe-area-inset-bottom))!important;
    background:#f6f8fc!important;
  }
  #shoplink-creator-app .chat-head{flex:0 0 52px;min-height:52px}
  #shoplink-creator-app .thread{padding:2px 0 12px!important}
  #shoplink-creator-app .msg{max-width:93%}
  #shoplink-creator-app .bubble{font-size:13.5px;padding:10px 13px}
  #shoplink-creator-app .composer{
    flex:0 0 62px!important;height:62px!important;min-height:62px!important;
    padding:0 7px 0 14px!important;
    margin-bottom:0!important;
  }
  #shoplink-creator-app .legal-note{font-size:10px}
  #shoplink-creator-app .chips{padding-bottom:1px}
}
@media(prefers-reduced-transparency:reduce){
  #shoplink-creator-app .mine,#shoplink-creator-app .more,
  #shoplink-creator-app .chips button,#shoplink-creator-app .composer{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff!important}
}

/* SHOPLINK_CHAT_MEDIA_V4: native document tray, slightly bolder reading weight. */
#shoplink-creator-app .chat .bubble{
  font-weight:550;line-height:1.68;letter-spacing:.002em;
}
#shoplink-creator-app .chat .bubble a{font-weight:630}
#shoplink-creator-app .chat .who b{font-weight:760}
#shoplink-creator-app .chat-head img{
  background:#e7e4db!important;
  border:1px solid #d5e0ec;
  padding:0!important;
  object-fit:cover!important;
  border-radius:50%!important;
  width:42px!important;height:42px!important;flex:0 0 42px!important;
}
#shoplink-creator-app .attachment-tray{
  flex:0 0 auto;display:flex;flex-wrap:wrap;gap:7px;
  padding:3px 2px 0;align-items:center;max-height:99px;overflow-y:auto;
}
#shoplink-creator-app .attachment-tray[hidden]{display:none!important}
#shoplink-creator-app .attach-chip{
  display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:98%;
  padding:6px 8px 6px 11px;background:#fff;border:1px solid #d7e3f0;
  border-radius:12px;color:#39536f;font-size:12px;font-weight:600;
  box-shadow:0 1px 5px #2047750b;
}
#shoplink-creator-app .attach-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
#shoplink-creator-app .attach-chip button{
  display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;
  background:#ecf2f9;border:0;border-radius:7px;color:#546983;
  font-size:17px;cursor:pointer;
}
#shoplink-creator-app .attach-chip button:hover{background:#e4edf8;color:#244b81}
#shoplink-creator-app .file-inline{
  display:block;margin-top:8px;font-weight:560;font-size:11.5px;
  color:#3e638e;border-top:1px solid #c6d7ef;padding-top:5px;
  word-break:break-word;
}
#shoplink-creator-app .composer .attach{
  width:39px;height:39px;display:grid;place-items:center;
  flex:0 0 39px;background:transparent;border:0;border-radius:11px;
  color:#4b6888;cursor:pointer;
}
#shoplink-creator-app .composer .attach svg{
  width:20px;height:20px;stroke:currentColor;fill:none;
}
#shoplink-creator-app .composer .attach:hover{background:#e7effa;color:#205aa2}
#shoplink-creator-app .composer .attach:focus-visible{
  outline:2px solid #3274d2;outline-offset:2px;
}
#shoplink-creator-app .composer .attach:disabled{opacity:.4;cursor:default}
#shoplink-creator-app #creator-input{min-width:0;flex:1 1 auto!important}
#shoplink-creator-app .pending .bubble.ai{
  background:linear-gradient(100deg,#eff4fa,#f9fcff,#eff4fa);
  background-size:220% 100%;
  animation:slthinking-wave 2.3s linear infinite;
  border-color:#d9e5f3;
}
#shoplink-creator-app .pending .think-orbit{
  display:inline-flex;gap:4px;align-items:center;margin-right:9px;
  width:23px;height:17px;justify-content:center;
}
#shoplink-creator-app .pending .think-orbit i{
  width:5px;height:5px;border-radius:50%;
  background:#4c7fbe;animation:slthinking-bounce 1.1s infinite ease-in-out;
}
#shoplink-creator-app .pending .think-orbit i:nth-child(2){animation-delay:.15s}
#shoplink-creator-app .pending .think-orbit i:nth-child(3){animation-delay:.3s}
#shoplink-creator-app .pending .stage{font-size:12.5px;font-weight:570;color:#507298}
#shoplink-creator-app .pending .streaming{animation:none!important;white-space:pre-wrap;font-weight:550}
#shoplink-creator-app .pending .streaming:after{
  content:"";display:inline-block;width:2px;height:13px;
  margin-left:2px;vertical-align:-1px;background:#497fbd;
  animation:blink .85s steps(1) infinite;
}
@keyframes slthinking-wave{to{background-position-x:-220%}}
@keyframes slthinking-bounce{0%,80%,100%{opacity:.4;transform:translateY(1px)}40%{opacity:1;transform:translateY(-3px)}}
@media(max-width:900px){
 #shoplink-creator-app .composer .attach{width:35px;height:35px;flex-basis:35px}
 #shoplink-creator-app .composer{padding-left:8px!important}
 #shoplink-creator-app .attach-chip span{max-width:185px}
}
@media(prefers-reduced-motion:reduce){
 #shoplink-creator-app .pending .bubble.ai,
 #shoplink-creator-app .pending .think-orbit i,
 #shoplink-creator-app .pending .streaming:after{animation:none!important}
}

/* SHOPLINK_CHAT_GEOMETRY_V5 — centered desktop composer and exactly two
   viewport-height mobile screens. Keep the native chat, attachments and
   streaming behavior intact. */
@media (min-width:901px){
  #shoplink-creator-app .composer,
  #shoplink-creator-app.panel-collapsed .composer{
    width:calc(100% - 24px)!important;
    max-width:820px!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #shoplink-creator-app .legal-note,
  #shoplink-creator-app .chips,
  #shoplink-creator-app .attachment-tray{
    width:calc(100% - 24px)!important;
    max-width:820px!important;
    align-self:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
/* The first mobile panel is a complete viewport; distribute its free space
   into the 2x2 step grid instead of leaving a large empty area underneath. */
@media (max-width:900px){
  #shoplink-creator-app{
    height:var(--sl-mobile-h,100dvh)!important;
    overflow-y:auto!important;
    scroll-snap-type:y mandatory!important;
    scroll-padding-block:0;
  }
  #shoplink-creator-app.keyboard-open{
    scroll-snap-type:none!important;
  }
  #shoplink-creator-app .main{
    height:var(--sl-mobile-h,100dvh)!important;
    min-height:0!important;
    max-height:var(--sl-mobile-h,100dvh);
    box-sizing:border-box;
    overflow:hidden!important;
    flex:0 0 var(--sl-mobile-h,100dvh);
    display:flex;
    flex-direction:column;
    gap:8px!important;
    padding:10px 12px calc(12px + env(safe-area-inset-bottom))!important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  #shoplink-creator-app .main-content{
    height:100%!important;
    min-height:0!important;
    flex:1 1 auto!important;
    gap:9px!important;
    display:flex;
    flex-direction:column;
  }
  #shoplink-creator-app .top,
  #shoplink-creator-app .hero,
  #shoplink-creator-app .cats,
  #shoplink-creator-app .v3-footnote,
  #shoplink-creator-app .bar{
    flex-shrink:0!important;
  }
  #shoplink-creator-app .steps{
    flex:1 1 auto!important;
    min-height:0!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(0,1fr)!important;
    align-content:stretch;
    gap:8px!important;
  }
  #shoplink-creator-app .step{min-height:0}
  #shoplink-creator-app .step .ic{
    min-height:0!important;
    flex:1 1 auto!important;
    align-items:center!important;
  }
  #shoplink-creator-app .step .txt{
    flex:0 0 auto!important;
    min-height:48px!important;
    padding:4px 6px 11px!important;
  }
  #shoplink-creator-app .bar{
    margin-top:auto!important;
    min-height:65px;
    flex-basis:65px!important;
  }
  /* The second snap panel is a self-contained native messenger screen. */
  #shoplink-creator-app .chat{
    height:var(--sl-mobile-h,100dvh)!important;
    max-height:var(--sl-mobile-h,100dvh);
    box-sizing:border-box;
    overflow:hidden;
    flex:0 0 var(--sl-mobile-h,100dvh);
    scroll-snap-align:start;
    scroll-snap-stop:always;
    gap:7px!important;
    padding:9px 10px calc(7px + env(safe-area-inset-bottom))!important;
  }
  #shoplink-creator-app .chat-head{
    flex:0 0 49px!important;
    min-height:49px!important;
    padding-bottom:4px!important;
  }
  #shoplink-creator-app .composer{
    width:100%!important;
    max-width:none!important;
    flex:0 0 51px!important;
    height:51px!important;
    min-height:51px!important;
    border-radius:17px!important;
    margin:0!important;
    padding:0 5px 0 8px!important;
    gap:2px!important;
    box-shadow:0 2px 11px rgba(36,67,105,.045)!important;
  }
  #shoplink-creator-app #creator-input{
    height:45px!important;
    font-size:14px!important;
  }
  #shoplink-creator-app .composer .attach,
  #shoplink-creator-app .composer .mic{
    width:35px!important;
    height:37px!important;
    flex:0 0 35px!important;
    border-radius:10px!important;
  }
  #shoplink-creator-app .composer .send{
    width:39px!important;
    height:39px!important;
    flex:0 0 39px!important;
    border-radius:12px!important;
  }
  #shoplink-creator-app .composer .send svg{width:18px;height:18px}
  #shoplink-creator-app .legal-note{
    font-size:9.5px!important;
    min-height:12px!important;
    margin:0 1px!important;
    line-height:1.2!important;
  }
  #shoplink-creator-app .attachment-tray{max-height:70px}
}
/* Small screens still retain the two-panel swipe without overflow or
   shrinking the important send/voice/tap targets below usability. */
@media (max-width:900px) and (max-height:700px){
  #shoplink-creator-app .main{
    gap:6px!important;
    padding-top:7px!important;
    padding-bottom:8px!important;
  }
  #shoplink-creator-app .main-content{gap:6px!important}
  #shoplink-creator-app .hero h1{
    font-size:clamp(24px,6vw,30px)!important;
    line-height:1.05!important;
  }
  #shoplink-creator-app .hero .sub{
    font-size:11px!important;
    line-height:1.24!important;
  }
  #shoplink-creator-app .steps{gap:6px!important}
  #shoplink-creator-app .step .txt{
    min-height:39px!important;
    padding:2px 5px 7px!important;
  }
  #shoplink-creator-app .step small{font-size:9.5px!important}
  #shoplink-creator-app .step .ic svg{height:27px!important;width:27px!important}
  #shoplink-creator-app .v3-footnote{padding:5px 8px!important}
  #shoplink-creator-app .bar{
    flex-basis:60px!important;
    min-height:60px!important;
  }
}
/* Small viewport finish: never overlap CTA and copy at 320px. */
@media(max-width:900px) and (max-height:700px){
 #shoplink-creator-app .hero .sub{
  display:block!important;
 }
}
@media(max-width:360px){
 #shoplink-creator-app .step strong{
  font-size:12px!important;
  line-height:1.15!important;
  overflow-wrap:anywhere!important;
  word-break:normal;
 }
 #shoplink-creator-app .step .txt{
  min-width:0!important;
  max-width:100%;
  padding-left:5px!important;
  padding-right:5px!important;
 }
 #shoplink-creator-app .trust{
  gap:0!important;
  min-width:0!important;
 }
 #shoplink-creator-app .trust li{
  font-size:10px!important;
  white-space:nowrap;
 }
 #shoplink-creator-app .trust li:nth-child(n+2){display:none!important}
 #shoplink-creator-app .bar{
  gap:5px!important;
  padding-left:9px!important;
  padding-right:5px!important;
 }
 #shoplink-creator-app .cta{
  font-size:11px!important;
  padding:0 9px!important;
  max-width:62%;
  min-width:0;
 }
}
@media(max-width:360px){
 #shoplink-creator-app .cta{
  font-size:10px!important;
  padding:0 5px!important;
  height:40px!important;
  max-width:55%!important;
 }
 #shoplink-creator-app .trust li{
  font-size:9.5px!important;
 }
}