/* ==========================================================================
   sell-v3.css — /sell-memory-ssds.php, chat-first layout (2026-09-30).
   Owner: "more of a simple page with just the chat — too much stuff on a
   mobile device". So: a slim title strip, Henry's chat filling the rest of the
   screen (the card height tracks the viewport minus the site header, measured
   into --sl-hdr by sell-v3.js), then a collapsed FAQ that backs the page's
   FAQPage JSON-LD. The chat itself is assets/js/buy-chat.js + buy-chat.css;
   on phones it still opens its full-screen messenger as soon as you use it.
   Motion is gated on html.sv-js like the rest of the v3 kit.
   ========================================================================== */
.sl--chat { background: var(--forest); }

/* ─── The app band ─────────────────────────────────────────────────────── */
.sl-app { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: clamp(14px, 2.6vw, 34px) 0 clamp(20px, 3vw, 40px);
  background: radial-gradient(80% 60% at 0% 0%, rgba(15, 162, 74, .36), transparent 62%), radial-gradient(70% 60% at 100% 100%, rgba(185, 242, 74, .14), transparent 60%), var(--forest); }
/* eco-chrome.css paints any dark-mode section holding a Breadcrumb nav a pale sage band (and darkens the crumb) — keep this one forest */
html[data-theme="dark"] body.eco-chromed main.sv section.sl-app { background: radial-gradient(80% 60% at 0% 0%, rgba(15, 162, 74, .3), transparent 62%), radial-gradient(70% 60% at 100% 100%, rgba(185, 242, 74, .1), transparent 60%), #030f07 !important; border: 0 !important; }
html[data-theme="dark"] body.eco-chromed main.sv nav.sl-crumb { color: rgba(255, 255, 255, .7) !important; }
html[data-theme="dark"] body.eco-chromed main.sv nav.sl-crumb a { color: var(--lime) !important; }
.sl-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 30%, #000, transparent); }
.sl-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; }
.sl-blob--a { width: 420px; height: 420px; left: -140px; top: 18%; background: #0fa24a; }
.sl-blob--b { width: 360px; height: 360px; right: -120px; bottom: -80px; background: rgba(185, 242, 74, .55); }
html.sv-js .sl-blob--a { animation: slDrift 16s ease-in-out infinite alternate; }
html.sv-js .sl-blob--b { animation: slDrift 19s ease-in-out -6s infinite alternate-reverse; }
@keyframes slDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, -40px) scale(1.15); } }

.sl-app-in { position: relative; width: min(760px, 100% - 32px); margin-inline: auto; }

/* ─── Title strip ──────────────────────────────────────────────────────── */
.sl-top { text-align: center; margin-bottom: clamp(12px, 1.8vw, 20px); }
.sl-crumb { display: inline-flex; gap: 8px; margin-bottom: 10px; font: 600 13px/1 var(--body); color: rgba(255, 255, 255, .7); }
.sl-crumb a { color: var(--lime) !important; text-decoration: none !important; }
html body.eco-chromed main.sv .sl-title { margin: 0 !important; font: 900 clamp(27px, 4.4vw, 48px)/1.04 var(--display) !important; letter-spacing: -.035em !important; color: #fff !important; }
.sl-hl { color: var(--lime); }
html body.eco-chromed main.sv .sl-sub { margin-top: 8px !important; font: 600 clamp(14px, 1.4vw, 17px)/1.4 var(--body); color: rgba(255, 255, 255, .8) !important; }
html.sv-js .sl-top > * { animation: slUp .6s var(--ease) backwards; }
html.sv-js .sl-top > :nth-child(2) { animation-delay: .05s; }
html.sv-js .sl-top > :nth-child(3) { animation-delay: .12s; }
html.sv-js .sl-chat-wrap { animation: slUp .7s var(--ease) .22s backwards; }
@keyframes slUp { from { opacity: 0; transform: translateY(14px); } }

/* ─── The chat fills the screen ────────────────────────────────────────── */
.sl-chat-wrap { position: relative; }
.sl-chat-wrap [data-buy-chat] { position: relative; z-index: 2; min-height: clamp(460px, calc(100svh - var(--sl-hdr, 72px) - 170px), 820px); }
.sl-chat-wrap [data-buy-chat][data-ready] { min-height: 0; }
.sl-chat-wrap .bc-chat { height: clamp(460px, calc(100svh - var(--sl-hdr, 72px) - 170px), 820px); }
.sl-chat-wrap .bc-log { height: auto; flex: 1 1 0; min-height: 150px; }
.sl-henry { display: none; }
.sl-talk { margin-top: 12px !important; text-align: center; font: 600 14px/1.45 var(--body); color: rgba(255, 255, 255, .78) !important; }
.sl-talk a { color: var(--lime) !important; font-weight: 800; text-decoration: none !important; }
.sl-talk a:hover { text-decoration: underline !important; }

/* Henry presents the chat from its right on wide screens (the image only downloads ≥1320px, where he fits) */
@media (min-width: 1320px) {
  .sl-henry { display: block; position: absolute; left: calc(100% - 4px); bottom: 24px; width: 290px; z-index: 1; pointer-events: none; }   /* right of the chat: his hand points back at it */
  .sl-henry img { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); }
  html.sv-js .sl-henry { animation: slHenry 6s ease-in-out infinite; }
}
@keyframes slHenry { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }

/* ─── FAQ (collapsed, below the chat) ──────────────────────────────────── */
.sl-faq { background: var(--bg); padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.sl-faq-in { width: min(760px, 100% - 32px); margin-inline: auto; }
html body.eco-chromed main.sv .sl-faq-h { margin: 0 !important; font: 900 clamp(26px, 3.2vw, 38px)/1.08 var(--display) !important; letter-spacing: -.03em !important; color: var(--fg) !important; }
html body.eco-chromed main.sv .sl-faq-p { margin: 10px 0 22px !important; font-size: 16px; line-height: 1.6; color: var(--fg-2) !important; }
.sl-faq .sv-faq summary { padding: 18px 20px; font-size: 17px; }
.sl-faq .sv-faq details p { padding: 0 20px 18px; }

/* ─── Phones ───────────────────────────────────────────────────────────── */
@media (max-width: 759px) {
  .sl-app { padding: 10px 0 16px; }
  .sl-app-in { width: calc(100% - 20px); }
  .sl-crumb { display: none; }
      .sl-chat-wrap [data-buy-chat], .sl-chat-wrap .bc-chat { height: auto; min-height: 0; }
  .sl-chat-wrap .bc-chat { height: max(440px, calc(100svh - var(--sl-hdr, 64px) - 112px)); border-radius: 22px; }
  .sl-talk { font-size: 13.5px; }
}

/* ── No quick-action bar / site chat on this page (body[data-no-quickbar]) ── */
@media (max-width: 899px) { body[data-no-quickbar] { padding-bottom: 0 !important; } }

@media (prefers-reduced-motion: reduce) {
  .sl-blob, .sl-henry, .sl-top > *, .sl-chat-wrap { animation: none !important; }
}