/* UI fixes (mobile-first) ------------------------------------------------ */

/* 1. Floating chat button must not cover the Analyze button */
html #supportLauncher.support-help-link{
  width:50px!important;min-width:50px!important;max-width:50px!important;
  height:50px!important;min-height:50px!important;max-height:50px!important;
  bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  right:14px!important;
}
@media(max-width:700px){
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}

/* 2. Step cards: keep the same padding on every card (incl. the last one) */
.steps li,.steps li:last-child{padding:24px!important}
@media(max-width:700px){.steps li,.steps li:last-child{padding:22px!important}}

/* 3. Live chat input never clips its text / placeholder */
#chatInput{min-height:48px;line-height:1.4;padding-top:12px;padding-bottom:12px;box-sizing:border-box}
#chatInput::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 6. Section headings: consistent centered alignment, no extra gap */
.sec-head{display:block;text-align:center}
.sec-head h2{display:block;text-align:center;margin-left:auto;margin-right:auto}
.sec-head p{margin-left:auto;margin-right:auto}

/* 7a. Back link pill: restore breathing room */
.back-link{padding:8px 16px 8px 12px}

/* 7b. Hero badge in dark mode */
html[data-theme="dark"] .hero-badge{
  background:rgba(199,243,107,.1)!important;
  border-color:rgba(199,243,107,.28)!important;
  color:#d6e8bd!important;box-shadow:none!important;
}

/* 7c. Feature cards: same horizontal padding as step cards */
.feat{padding:22px 24px}
@media(max-width:700px){.feat{padding:22px}}

/* 6b. Remove the oversized empty gap below the platform list */
.platforms{padding-bottom:0!important}

/* 8. Dark mode on Help Center + legal pages (editorial-pages.css forced light colours) */
html[data-theme="dark"] body.legal-page,
html[data-theme="dark"] body:has(.chat-hero){background:#111812!important;color:#edf2e9!important}
html[data-theme="dark"] body.legal-page nav,
html[data-theme="dark"] body:has(.chat-hero) nav{background:rgba(17,24,18,.94)!important;border-bottom:1px solid #2a382d!important}
html[data-theme="dark"] body.legal-page .legal-card,
html[data-theme="dark"] body:has(.chat-hero) .live-chat-panel,
html[data-theme="dark"] body:has(.chat-hero) .chat-side .side-card{background:#1a241c!important;border-color:#2a382d!important}
html[data-theme="dark"] body.legal-page .legal-card h1,
html[data-theme="dark"] body.legal-page .legal-card h2{color:#edf2e9!important}
html[data-theme="dark"] body.legal-page .legal-card p,
html[data-theme="dark"] body.legal-page .legal-card li{color:#b5c2b3!important}
html[data-theme="dark"] body.legal-page .legal-updated{color:#8d9c8b!important}
html[data-theme="dark"] body.legal-page .legal-tabs{border-bottom-color:#2a382d!important}
html[data-theme="dark"] body.legal-page .legal-tabs a.on{background:#2b3d22!important;color:#cdeea0!important}
html[data-theme="dark"] body.legal-page .back-link{color:#b9d79c!important}
html[data-theme="dark"] body:has(.chat-hero) .chat-hero{border-bottom-color:#2a382d!important}
html[data-theme="dark"] body:has(.chat-hero) .chat-hero h1{color:#edf2e9!important}
html[data-theme="dark"] body:has(.chat-hero) .side-card.warn{background:#2a2616!important}
html[data-theme="dark"] body:has(.chat-hero) .faq-item{border-bottom-color:#2a382d!important}

/* 9. Tombol "Pasang" di nav kini <button>, samakan dengan tampilan .nav-cta */
button.nav-cta{border:0;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.nav-cta[hidden]{display:none!important}

/* Riwayat: tombol Unduh lagi */
.hist-again{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--blue-b,var(--border));background:var(--blue-s);color:var(--blue);font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;transition:background-color .18s ease,opacity .18s ease}
.hist-again[hidden]{display:none}
.hist-again svg{width:15px;height:15px}
.hist-again:hover{background:var(--blue);color:#fff}
.hist-again:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hist-again:disabled{opacity:.6;cursor:progress}
@media (max-width:520px){.hist-again span{display:none}.hist-again{width:30px;padding:0;justify-content:center}}


/* Regression fix: controls stay readable in dark mode across homepage sections. */
html[data-theme="dark"] body .theme-toggle,
html[data-theme="dark"] body .mobile-nav-toggle,
html[data-theme="dark"] body .url-clear,
html[data-theme="dark"] body .url-paste,
html[data-theme="dark"] body .btn-ghost,
html[data-theme="dark"] body .chip-toggle,
html[data-theme="dark"] body .history-clear,
html[data-theme="dark"] body .modal-actions .btn-ghost {
  color: var(--ink, #f4f6ff) !important;
  background-color: var(--card2, #18181b) !important;
  border-color: var(--border2, #3f3f46) !important;
}
html[data-theme="dark"] body .theme-toggle:hover,
html[data-theme="dark"] body .url-paste:hover,
html[data-theme="dark"] body .btn-ghost:hover,
html[data-theme="dark"] body .chip-toggle:hover {
  color: #fff !important;
  background-color: #273449 !important;
  border-color: #5274a8 !important;
}
html[data-theme="dark"] body input,
html[data-theme="dark"] body textarea,
html[data-theme="dark"] body select {
  color: var(--ink, #f4f6ff) !important;
  background-color: var(--card2, #18181b) !important;
  border-color: var(--border2, #3f3f46) !important;
}
html[data-theme="dark"] body input::placeholder,
html[data-theme="dark"] body textarea::placeholder { color: #9ca3af !important; opacity: 1; }
html[data-theme="dark"] body .btn-primary:disabled,
html[data-theme="dark"] body .nav-cta:disabled { color: #d1d5db !important; opacity: .58; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}