/* ============================================================
   Howzit Webbot — Robot Website CSS (app_robot.css)
   ------------------------------------------------------------
   ZAK HTML-inspired design system: clean, simple, engaging,
   mobile-first, Material Design principles.
   
   5 DISTINCT LAYOUT THEMES — each is a genuinely different
   structural design (not just color swaps). All share the
   ZAK aesthetic: Roboto font, white/light backgrounds, soft
   card shadows, rounded corners, bottom navigation.
   
   The bot is ALWAYS present and interactive in every theme —
   users feel assisted by a bot, not browsing a static site.
   
   Theme 1 — "Chat Home":  Bot bubble + vertical card list
   Theme 2 — "Icon Grid":  App header + icon grid + h-scroll
   Theme 3 — "Tabbed":     Tab bar dashboard + bot assistant bar
   Theme 4 — "Split Hero": Hero card + 2-col grid + FAB chat
   Theme 5 — "Card Stack": Swipeable full-screen guided cards
   ============================================================ */

/* ── Shared design tokens (ZAK-inspired) ── */
:root{
  --wb-font:'Roboto','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --wb-radius:14px;
  --wb-radius-sm:10px;
  --wb-shadow:0 2px 8px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.06);
  --wb-shadow-lg:0 8px 24px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08);
  --wb-p:#6C63FF;
  --wb-s:#26C6DA;
  --wb-bg:#f5f6fa;
  --wb-surface:#ffffff;
  --wb-text:#2d3436;
  --wb-text-dim:#636e72;
  --wb-border:#eceef2;
  --wb-accent-soft:rgba(108,99,255,.10);
}

/* ── Default bot avatar fallback ──
   When no avatar_url is set or the image fails to load (ORB / 404),
   botAvatarHtml() swaps in an inline SVG with the .wb-avatar-fallback
   class. These rules ensure it looks good in every theme. */
.wb-avatar-fallback{object-fit:contain!important;background:linear-gradient(135deg,var(--wb-p,#7b5cff),var(--wb-s,#00e5ff))!important}
.wb-theme-6 .wb-biz-avatar .wb-avatar-fallback{border-radius:12px!important}
.wb-bot-avatar .wb-avatar-fallback{border-radius:50%!important}
.wb-theme-2 .wb-header-avatar .wb-avatar-fallback,
.wb-theme-4 .wb-hero-avatar .wb-avatar-fallback{border-radius:50%!important}

/* ── Language picker overlay (first-time visitor language selection) ── */
.wb-lang-picker{
  position:fixed;inset:0;z-index:99998;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1200px 700px at 20% -10%,rgba(123,92,255,.25),transparent 60%),
             radial-gradient(1000px 800px at 110% 20%,rgba(0,229,255,.18),transparent 55%),
             linear-gradient(160deg,#050816,#0a0f2c 55%,#0e1538);
  animation:wb-pop .4s ease;overflow-y:auto;
}
.wb-lang-picker-inner{
  width:100%;max-width:440px;text-align:center;
  animation:wbSplNameIn .6s ease;
}
.wb-lang-picker-bot{
  width:88px;height:88px;margin:0 auto 16px;border-radius:50%;
  overflow:hidden;box-shadow:0 0 28px rgba(0,229,255,.35);
  border:2px solid rgba(0,229,255,.3);
}
.wb-lang-picker-bot img{width:100%;height:100%;display:block}
.wb-lang-picker-bot .wb-avatar-fallback{border-radius:50%!important}
.wb-lang-picker-biz{
  font-size:15px;font-weight:600;color:#cfeefb;margin-bottom:6px;
  letter-spacing:.3px;
}
.wb-lang-picker-title{
  font-size:24px;font-weight:800;color:#fff;margin-bottom:8px;
  text-shadow:0 0 18px rgba(0,229,255,.4);
}
.wb-lang-picker-sub{
  font-size:14px;color:#9fb3d6;margin-bottom:28px;line-height:1.5;
}
.wb-lang-cards{
  display:flex;flex-direction:column;gap:12px;
}
.wb-lang-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;border:2px solid rgba(255,255,255,.12);
  border-radius:16px;background:rgba(255,255,255,.06);
  cursor:pointer;text-align:left;color:#fff;
  transition:.25s;backdrop-filter:blur(8px);
  font-family:inherit;
}
.wb-lang-card:hover{
  border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.1);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,229,255,.2);
}
.wb-lang-card:active{transform:scale(.98)}
.wb-lang-card-flag{font-size:28px;flex-shrink:0;line-height:1}
.wb-lang-card-name{font-size:16px;font-weight:700;display:block}
.wb-lang-card-native{font-size:13px;color:#9fb3d6;display:block;margin-top:2px}
@media(max-width:380px){
  .wb-lang-picker-title{font-size:20px}
  .wb-lang-card{padding:14px 16px;gap:10px}
  .wb-lang-card-flag{font-size:24px}
  .wb-lang-card-name{font-size:15px}
}




*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--wb-font);
  color:var(--wb-text);
  background:var(--wb-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

/* App mount — full-width, no max-width constraint.
   The webbot app fills the entire screen on ALL devices (mobile,
   tablet, desktop). No black bars on the sides. The content inside
   uses max-width on individual sections for readability. */
#wbApp{
  width:100%;
  max-width:100%;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  background:var(--wb-bg);
  overflow-x:hidden;
}
/* On very large screens, cap at 1200px but fill the background
   with the same color so there are no visible bars */
@media(min-width:1200px){
  #wbApp{
    max-width:1200px;
    box-shadow:0 0 40px rgba(0,0,0,.07);
  }
  body{background:var(--wb-bg)}
}

/* ── Shared components used across themes ── */

/* Bot avatar circle */
.wb-bot-avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;flex-shrink:0;
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  box-shadow:var(--wb-shadow);
}
.wb-bot-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Online status dot */
.wb-online-dot{
  width:10px;height:10px;border-radius:50%;
  background:#4caf50;border:2px solid var(--wb-surface);
  display:inline-block;flex-shrink:0;
  animation:wb-pulse 2s ease-in-out infinite;
}
@keyframes wb-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Bot speech bubble — chat style */
.wb-speech{
  background:var(--wb-surface);
  border-radius:var(--wb-radius);
  padding:14px 16px;
  box-shadow:var(--wb-shadow);
  position:relative;
  margin:12px 0;
}
.wb-speech .wb-name{
  font-size:13px;font-weight:700;color:var(--wb-p);
  text-transform:uppercase;letter-spacing:.5px;
  display:block;margin-bottom:4px;
}
.wb-speech #wbSpeechText{
  font-size:15px;line-height:1.5;color:var(--wb-text);
  min-height:20px;
}
.wb-typing::after{
  content:'\25CF\25CF\25CF';color:var(--wb-text-dim);font-size:10px;
  letter-spacing:2px;animation:wb-pulse 1.2s infinite;
}

/* Cards — ZAK material style */
.wb-card{
  background:var(--wb-surface);
  border-radius:var(--wb-radius);
  box-shadow:var(--wb-shadow);
  padding:16px;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  border:none;
}
.wb-card:hover,.wb-card:active{
  transform:translateY(-2px);
  box-shadow:var(--wb-shadow-lg);
}

/* Bottom navigation — ZAK fixed footer menu.
   Follows #wbApp container width (responsive).
   Mobile: full width up to 480px.
   Wider: matches app container max-width. */
.wb-bottom-nav{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:100%;
  background:var(--wb-surface);
  display:flex;justify-content:space-around;align-items:center;
  height:62px;
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
  z-index:100;
}
@media(min-width:480px){
  .wb-bottom-nav{max-width:480px;border-radius:18px 18px 0 0}
}
@media(min-width:768px){
  .wb-bottom-nav{max-width:768px}
}
@media(min-width:1024px){
  .wb-bottom-nav{max-width:1024px}
}
@media(min-width:1440px){
  .wb-bottom-nav{max-width:1200px}
}
.wb-nav-item{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 6px;color:var(--wb-text-dim);
  font-size:11px;font-family:var(--wb-font);
  transition:color .2s;flex:1;
}
.wb-nav-item .wb-nav-ico{font-size:20px;line-height:1}
.wb-nav-item.active{color:var(--wb-p)}
.wb-nav-item.active .wb-nav-ico{
  background:var(--wb-p);color:#fff;
  border-radius:50%;width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  margin-top:-12px;box-shadow:var(--wb-shadow);
  font-size:20px;
}

/* Language selection buttons */
.wb-lang-row{
  display:flex;gap:10px;margin:12px 0;
}
.wb-lang-btn{
  flex:1;background:var(--wb-surface);border:2px solid var(--wb-border);
  border-radius:var(--wb-radius-sm);padding:12px;cursor:pointer;
  font-size:14px;font-weight:500;color:var(--wb-text);
  font-family:var(--wb-font);transition:all .2s;
}
.wb-lang-btn:hover,.wb-lang-btn:active{
  border-color:var(--wb-p);background:var(--wb-accent-soft);
}
.wb-lang-btn .flag{font-size:18px;margin-right:6px}

/* Content area */
#wbContent{padding:0 0 80px}

/* Section heading */
.wb-section-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 16px 8px;
}
.wb-section-title{
  font-size:15px;font-weight:700;color:var(--wb-text);
  text-transform:uppercase;letter-spacing:.5px;
}
.wb-section-more{
  font-size:13px;color:var(--wb-p);cursor:pointer;font-weight:500;
}

/* Search/prompt bar */
.wb-search-prompt{
  background:var(--wb-surface);border-radius:var(--wb-radius);
  padding:14px 16px;margin:12px 16px;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  box-shadow:var(--wb-shadow);color:var(--wb-text-dim);
  font-size:14px;transition:all .2s;
}
.wb-search-prompt:hover{box-shadow:var(--wb-shadow-lg)}
.wb-search-ico{font-size:20px}

/* ── Landing-page bubble options ───────────────────────────────
   Replaces the old single "How can I help you today?" prompt bar.
   An inviting row of tappable bubbles shown right under the robot's
   typed welcome greeting. "Let's Talk" is the primary CTA (gradient),
   the rest are secondary outlined bubbles. Uses theme variables
   (--wb-p / --wb-s / --wb-surface etc.) so it matches each webbot's
   brand colours. */
.wb-landing-bubbles{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:4px 16px 8px;margin:14px 16px 4px;
}
.wb-landing-bubble{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--wb-surface);
  border:2px solid var(--wb-border);
  border-radius:999px;
  padding:11px 18px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--wb-text);
  font-family:var(--wb-font);line-height:1;
  transition:transform .18s cubic-bezier(.22,.61,.36,1),
             box-shadow .18s,border-color .18s,background .18s,color .18s;
  box-shadow:var(--wb-shadow);
  -webkit-tap-highlight-color:transparent;
}
.wb-landing-bubble .wb-landing-bubble-ico{font-size:17px;flex-shrink:0}
.wb-landing-bubble .wb-landing-bubble-lbl{white-space:nowrap}
.wb-landing-bubble:hover,.wb-landing-bubble:active{
  transform:translateY(-2px);
  border-color:var(--wb-p);
  background:var(--wb-accent-soft);
  color:var(--wb-p);
  box-shadow:var(--wb-shadow-lg);
}
/* Primary CTA ("Let's Talk") — filled gradient, stands out */
.wb-landing-bubble.primary{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  border-color:transparent;color:#fff;
  box-shadow:0 8px 18px -6px var(--wb-p);
}
.wb-landing-bubble.primary:hover,.wb-landing-bubble.primary:active{
  transform:translateY(-2px) scale(1.02);
  background:linear-gradient(135deg,var(--wb-s),var(--wb-p));
  color:#fff;box-shadow:0 12px 24px -6px var(--wb-p);
}
@media(max-width:420px){
  .wb-landing-bubbles{padding:4px 14px 8px;margin:12px 14px 4px;gap:8px}
  .wb-landing-bubble{padding:10px 15px;font-size:13.5px}
}

/* Services list */
.wb-services{padding:0 16px}
.wb-service{
  background:var(--wb-surface);border-radius:var(--wb-radius);
  padding:14px;margin-bottom:10px;display:flex;gap:12px;
  box-shadow:var(--wb-shadow);cursor:pointer;
  transition:transform .15s;
}
.wb-service:hover{transform:translateY(-1px)}
.wb-s-ico{
  width:44px;height:44px;border-radius:var(--wb-radius-sm);
  background:var(--wb-accent-soft);display:flex;align-items:center;
  justify-content:center;font-size:22px;flex-shrink:0;color:var(--wb-p);
}
.wb-s-title{font-size:15px;font-weight:600;color:var(--wb-text);margin-bottom:3px}
.wb-s-desc{font-size:13px;color:var(--wb-text-dim);line-height:1.4}

/* Gallery grid — responsive columns */
.wb-gallery{
  display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px;
}
@media(min-width:768px){
  .wb-gallery{grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px}
}
@media(min-width:1024px){
  .wb-gallery{grid-template-columns:repeat(4,1fr);gap:14px}
}
.wb-gallery img{
  width:100%;border-radius:var(--wb-radius-sm);aspect-ratio:1;
  object-fit:cover;cursor:pointer;box-shadow:var(--wb-shadow);
  transition:transform .15s;
}
.wb-gallery img:hover{transform:scale(1.03)}

/* Slideshow */
.wb-slideshow{
  position:relative;border-radius:var(--wb-radius);overflow:hidden;
  box-shadow:var(--wb-shadow);margin:0 16px;
}
.wb-slideshow img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.wb-slide-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.4);
  color:#fff;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:22px;user-select:none;
}
.wb-slide-nav.prev{left:8px}
.wb-slide-nav.next{right:8px}
.wb-slide-dots{
  display:flex;gap:6px;justify-content:center;padding:10px 0;
}
.wb-slide-dots span{
  width:8px;height:8px;border-radius:50%;background:var(--wb-border);
  cursor:pointer;transition:all .2s;
}
.wb-slide-dots span.active{background:var(--wb-p);width:22px;border-radius:4px}

/* Map */
.wb-map{border-radius:var(--wb-radius);overflow:hidden;box-shadow:var(--wb-shadow);margin:0 16px}
.wb-map iframe{width:100%;height:200px;border:none;display:block}
.wb-map-info{
  padding:14px 16px;background:var(--wb-surface);border-radius:var(--wb-radius);
  box-shadow:var(--wb-shadow);margin:10px 16px;font-size:14px;line-height:1.6;
}
.wb-map-info a{color:var(--wb-p);text-decoration:none}

/* Forms */
.wb-form{padding:0 16px}
.wb-field{margin-bottom:14px}
.wb-field label{
  display:block;font-size:13px;font-weight:600;color:var(--wb-text-dim);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px;
}
.wb-field input,.wb-field textarea{
  width:100%;padding:12px 14px;border:2px solid var(--wb-border);
  border-radius:var(--wb-radius-sm);font-size:15px;font-family:var(--wb-font);
  color:var(--wb-text);background:var(--wb-surface);transition:border-color .2s;
}
.wb-field input:focus,.wb-field textarea:focus{
  outline:none;border-color:var(--wb-p);
}
.wb-field textarea{resize:vertical;min-height:80px}
.wb-submit{
  width:100%;padding:14px;border:none;border-radius:var(--wb-radius-sm);
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  color:#fff;font-size:15px;font-weight:600;font-family:var(--wb-font);
  cursor:pointer;transition:transform .15s,box-shadow .15s;
}
.wb-submit:hover{transform:translateY(-1px);box-shadow:var(--wb-shadow-lg)}
.wb-submit:disabled{opacity:.6;cursor:wait}
.wb-banner{
  background:#e8f5e9;border-radius:var(--wb-radius-sm);padding:12px 16px;
  margin:12px 0;color:#2e7d32;font-size:14px;font-weight:500;
}

/* Panel */
.wb-panel{
  background:var(--wb-surface);border-radius:var(--wb-radius);
  box-shadow:var(--wb-shadow);margin:12px 16px;padding:16px;
}
.wb-panel h3{
  font-size:17px;font-weight:700;color:var(--wb-text);
  text-transform:uppercase;margin-bottom:12px;letter-spacing:.3px;
}

/* Back bubble */
.wb-bubbles{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap}
.wb-bubble{
  background:var(--wb-surface);border:2px solid var(--wb-border);
  border-radius:24px;padding:10px 18px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--wb-text);
  font-family:var(--wb-font);transition:all .2s;
}
.wb-bubble:hover,.wb-bubble:active{
  border-color:var(--wb-p);background:var(--wb-accent-soft);color:var(--wb-p);
}

/* Credit */
.wb-credit{
  text-align:center;padding:16px;font-size:11px;color:var(--wb-text-dim);
}
.wb-credit b{color:var(--wb-p)}

/* Transcript (chat messages) */
.wb-transcript{padding:0 16px}
.wb-msg{margin-bottom:10px}
.wb-msg-who{font-size:12px;font-weight:700;color:var(--wb-text-dim);margin-bottom:3px;text-transform:uppercase}
.wb-msg.bot .wb-msg-who{color:var(--wb-p)}
.wb-msg.bot>div:last-child{
  background:var(--wb-surface);border-radius:var(--wb-radius) var(--wb-radius) var(--wb-radius) 4px;
  padding:12px 14px;box-shadow:var(--wb-shadow);font-size:14px;line-height:1.5;
}
.wb-msg.user>div:last-child{
  background:var(--wb-p);color:#fff;border-radius:var(--wb-radius) var(--wb-radius) 4px var(--wb-radius);
  padding:12px 14px;font-size:14px;line-height:1.5;margin-left:40px;
}

/* Hidden utility */
.hidden{display:none!important}

/* ============================================================
   THEME 1 — "CHAT HOME"
   Bot greeting bubble at top + vertical card list below.
   Each card is a feature the bot presents. Chat-like feel.
   ============================================================ */
.wb-theme-1{
  --wb-p:#6C63FF;--wb-s:#26C6DA;
  --wb-bg:#f5f6fa;--wb-surface:#ffffff;
  --wb-text:#2d3436;--wb-text-dim:#636e72;
  --wb-border:#eceef2;--wb-accent-soft:rgba(108,99,255,.10);
  background:var(--wb-bg);
}
.wb-theme-1 .wb-chat-header{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  padding:18px 16px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:50;
}
.wb-theme-1 .wb-chat-header .wb-bot-avatar{
  background:rgba(255,255,255,.2);width:44px;height:44px;
}
.wb-theme-1 .wb-ch-info{flex:1;color:#fff}
.wb-theme-1 .wb-ch-greet{font-size:18px;font-weight:700}
.wb-theme-1 .wb-ch-status{font-size:12px;opacity:.9;display:flex;align-items:center;gap:5px}
.wb-theme-1 .wb-ch-status .wb-online-dot{background:#fff;border-color:transparent}
.wb-theme-1 .wb-chat-body{padding:12px 16px}
.wb-theme-1 .wb-card-list{display:flex;flex-direction:column;gap:10px}
.wb-theme-1 .wb-chat-card{
  background:var(--wb-surface);border-radius:var(--wb-radius);
  box-shadow:var(--wb-shadow);padding:16px;display:flex;gap:14px;
  cursor:pointer;transition:transform .15s,box-shadow .15s;
  align-items:center;border:none;width:100%;text-align:left;
  font-family:var(--wb-font);
}
.wb-theme-1 .wb-chat-card:hover{transform:translateY(-2px);box-shadow:var(--wb-shadow-lg)}
.wb-theme-1 .wb-cc-ico{
  width:50px;height:50px;border-radius:var(--wb-radius-sm);
  background:var(--wb-accent-soft);display:flex;align-items:center;
  justify-content:center;font-size:24px;flex-shrink:0;color:var(--wb-p);
}
.wb-theme-1 .wb-cc-body{flex:1}
.wb-theme-1 .wb-cc-title{font-size:15px;font-weight:700;color:var(--wb-text);margin-bottom:2px}
.wb-theme-1 .wb-cc-sub{font-size:13px;color:var(--wb-text-dim);line-height:1.4}
.wb-theme-1 .wb-cc-arrow{color:var(--wb-p);font-size:18px;flex-shrink:0}

/* ============================================================
   THEME 2 — "ICON GRID" (App-style)
   App header with bot avatar + quick-action icon grid +
   horizontal scroll sections + bottom nav.
   ============================================================ */
.wb-theme-2{
  --wb-p:#7C4DFF;--wb-s:#26C6DA;
  --wb-bg:#f0f2f8;--wb-surface:#ffffff;
  --wb-text:#1a1a2e;--wb-text-dim:#636e72;
  --wb-border:#e8eaf2;--wb-accent-soft:rgba(124,77,255,.10);
  background:var(--wb-bg);
}
.wb-theme-2 .wb-app-header{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  padding:16px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:50;
}
.wb-theme-2 .wb-header-avatar{
  width:46px;height:46px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.2);display:flex;align-items:center;
  justify-content:center;font-size:24px;flex-shrink:0;
}
.wb-theme-2 .wb-header-avatar img{width:100%;height:100%;object-fit:cover}
.wb-theme-2 .wb-header-info{flex:1;color:#fff}
.wb-theme-2 .wb-header-greet{font-size:17px;font-weight:700}
.wb-theme-2 .wb-header-status{font-size:12px;opacity:.9;display:flex;align-items:center;gap:5px}
.wb-theme-2 .wb-header-status .wb-online-dot{background:#fff;border-color:transparent}
.wb-theme-2 .wb-quick-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding:12px 16px;
}
@media(min-width:768px){
  .wb-theme-2 .wb-quick-grid{grid-template-columns:repeat(6,1fr);gap:12px;padding:16px 24px}
}
@media(min-width:1024px){
  .wb-theme-2 .wb-quick-grid{grid-template-columns:repeat(8,1fr)}
}
.wb-theme-2 .wb-quick-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;padding:10px 4px;border-radius:var(--wb-radius-sm);
  transition:background .2s;
}
.wb-theme-2 .wb-quick-item:hover{background:var(--wb-accent-soft)}
.wb-theme-2 .wb-quick-ico{
  width:48px;height:48px;border-radius:var(--wb-radius-sm);
  background:var(--wb-surface);display:flex;align-items:center;
  justify-content:center;font-size:24px;box-shadow:var(--wb-shadow);color:var(--wb-p);
}
.wb-theme-2 .wb-quick-lbl{font-size:11px;color:var(--wb-text-dim);text-align:center;font-weight:500}
/* ── Generic horizontal-scroll card strip (not theme-scoped) ──
   Previously .wb-hscroll / .wb-hscroll-card were only defined under
   .wb-theme-2, so on themes 1/3/4/5/6 the strip collapsed to
   display:block with full-width cards and distorted images.
   These generic rules give every theme a sensible default; theme-2
   overrides below still fine-tune the look. */
.wb-hscroll{
  display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:4px 16px 10px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;width:100%;max-width:100%;
}
.wb-hscroll::-webkit-scrollbar{display:none}
.wb-hscroll{scrollbar-width:none;-ms-overflow-style:none}
.wb-hscroll-card{
  flex:0 0 160px;min-width:160px;max-width:200px;scroll-snap-align:start;
  border-radius:var(--wb-radius);overflow:hidden;box-shadow:var(--wb-shadow);
  cursor:pointer;position:relative;background:var(--wb-surface);
}
.wb-hscroll-card img{
  width:100%;height:110px;object-fit:cover;display:block;
  background:linear-gradient(135deg,rgba(123,92,255,.12),rgba(0,229,255,.12));
}
/* Broken/placeholder image — keep the card a sensible size instead of
   collapsing to a thin sliver. */
.wb-hscroll-card img:not([src]),.wb-hscroll-card img[src=""]{min-height:110px}
.wb-hs-label{
  position:absolute;bottom:0;left:0;right:0;padding:6px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;
  font-size:12px;font-weight:600;line-height:1.3;
}

.wb-theme-2 .wb-hscroll{
  display:flex;gap:10px;overflow-x:auto;padding:4px 16px 8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.wb-theme-2 .wb-hscroll::-webkit-scrollbar{display:none}
.wb-theme-2 .wb-hscroll-card{
  flex:0 0 160px;scroll-snap-align:start;border-radius:var(--wb-radius);
  overflow:hidden;box-shadow:var(--wb-shadow);cursor:pointer;position:relative;
}
.wb-theme-2 .wb-hscroll-card img{width:100%;height:100px;object-fit:cover;display:block}
.wb-theme-2 .wb-hs-label{
  position:absolute;bottom:0;left:0;right:0;padding:6px 10px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;
  font-size:12px;font-weight:600;
}

/* ============================================================
   THEME 3 — "TABBED DASHBOARD"
   Top app bar + horizontal tab bar + content area.
   Bot assistant bar floats above tabs. Tab switch = bot speaks.
   ============================================================ */
.wb-theme-3{
  --wb-p:#00897B;--wb-s:#26C6DA;
  --wb-bg:#f5f7fa;--wb-surface:#ffffff;
  --wb-text:#263238;--wb-text-dim:#607D8B;
  --wb-border:#e0e4e8;--wb-accent-soft:rgba(0,137,123,.10);
  background:var(--wb-bg);
}
.wb-theme-3 .wb-tab-header{
  background:var(--wb-surface);padding:14px 16px 0;
  box-shadow:var(--wb-shadow);position:sticky;top:0;z-index:50;
}
.wb-theme-3 .wb-tab-topbar{
  display:flex;align-items:center;gap:12px;padding-bottom:10px;
}
.wb-theme-3 .wb-tab-topbar .wb-bot-avatar{width:40px;height:40px;font-size:22px}
.wb-theme-3 .wb-tb-info{flex:1}
.wb-theme-3 .wb-tb-name{font-size:16px;font-weight:700;color:var(--wb-text)}
.wb-theme-3 .wb-tb-status{font-size:12px;color:var(--wb-text-dim);display:flex;align-items:center;gap:5px}
.wb-theme-3 .wb-tab-bar{
  display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.wb-theme-3 .wb-tab-bar::-webkit-scrollbar{display:none}
.wb-theme-3 .wb-tab{
  flex:0 0 auto;padding:10px 16px;cursor:pointer;font-size:13px;
  font-weight:600;color:var(--wb-text-dim);border:none;background:none;
  font-family:var(--wb-font);border-bottom:3px solid transparent;
  transition:all .2s;white-space:nowrap;
}
.wb-theme-3 .wb-tab.active{color:var(--wb-p);border-bottom-color:var(--wb-p)}
.wb-theme-3 .wb-bot-assist{
  background:var(--wb-accent-soft);border-radius:var(--wb-radius);
  margin:12px 16px;padding:12px 14px;display:flex;gap:10px;align-items:flex-start;
}
.wb-theme-3 .wb-bot-assist .wb-ba-ico{font-size:20px;flex-shrink:0;color:var(--wb-p)}
.wb-theme-3 .wb-bot-assist #wbSpeechText{font-size:14px;line-height:1.5;color:var(--wb-text)}
.wb-theme-3 .wb-bot-assist .wb-name{display:none}

/* ============================================================
   THEME 4 — "SPLIT HERO"
   Large hero card with bot + business name, 2-col grid below,
   floating action button (FAB) to open bot chat. Sidebar drawer.
   ============================================================ */
.wb-theme-4{
  --wb-p:#E84A5F;--wb-s:#FF8A65;
  --wb-bg:#faf5f5;--wb-surface:#ffffff;
  --wb-text:#3d2c2e;--wb-text-dim:#8d7376;
  --wb-border:#f0e6e7;--wb-accent-soft:rgba(232,74,95,.10);
  background:var(--wb-bg);
}
.wb-theme-4 .wb-hero-card{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  border-radius:0 0 24px 24px;padding:24px 20px 20px;color:#fff;
  position:relative;overflow:hidden;
}
.wb-theme-4 .wb-hero-card::before{
  content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  background:rgba(255,255,255,.1);border-radius:50%;
}
.wb-theme-4 .wb-hero-bot{
  display:flex;align-items:center;gap:14px;margin-bottom:14px;position:relative;z-index:1;
}
.wb-theme-4 .wb-hero-avatar{
  width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.25);display:flex;align-items:center;
  justify-content:center;font-size:30px;flex-shrink:0;border:3px solid rgba(255,255,255,.4);
}
.wb-theme-4 .wb-hero-avatar img{width:100%;height:100%;object-fit:cover}
.wb-theme-4 .wb-hero-name{font-size:22px;font-weight:700}
.wb-theme-4 .wb-hero-status{font-size:13px;opacity:.9;display:flex;align-items:center;gap:5px}
.wb-theme-4 .wb-hero-status .wb-online-dot{background:#fff;border-color:transparent}
.wb-theme-4 .wb-hero-greet{
  font-size:15px;line-height:1.5;position:relative;z-index:1;
  background:rgba(255,255,255,.15);border-radius:var(--wb-radius);
  padding:12px 14px;
}
.wb-theme-4 .wb-grid-2col{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:16px;
}
@media(min-width:768px){
  .wb-theme-4 .wb-grid-2col{grid-template-columns:repeat(3,1fr);gap:14px;padding:20px 24px}
}
@media(min-width:1024px){
  .wb-theme-4 .wb-grid-2col{grid-template-columns:repeat(4,1fr);gap:16px}
}
.wb-theme-4 .wb-grid-card{
  background:var(--wb-surface);border-radius:var(--wb-radius);
  box-shadow:var(--wb-shadow);padding:16px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .15s,box-shadow .15s;text-align:center;border:none;
  font-family:var(--wb-font);
}
.wb-theme-4 .wb-grid-card:hover{transform:translateY(-3px);box-shadow:var(--wb-shadow-lg)}
.wb-theme-4 .wb-gc-ico{
  width:52px;height:52px;border-radius:50%;background:var(--wb-accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--wb-p);
}
.wb-theme-4 .wb-gc-lbl{font-size:13px;font-weight:700;color:var(--wb-text)}
.wb-theme-4 .wb-gc-sub{font-size:11px;color:var(--wb-text-dim);line-height:1.3}
.wb-theme-4 .wb-cta-card{
  margin:0 16px 16px;
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  border-radius:var(--wb-radius);
  box-shadow:0 6px 20px rgba(232,74,95,.30),0 2px 8px rgba(0,0,0,.08);
  padding:22px 20px;text-align:center;cursor:pointer;
  border:none;transition:transform .18s ease,box-shadow .18s ease;
  position:relative;overflow:hidden;
}
.wb-theme-4 .wb-cta-card::after{
  content:'';position:absolute;top:-40px;right:-40px;width:110px;height:110px;
  background:rgba(255,255,255,.12);border-radius:50%;pointer-events:none;
}
.wb-theme-4 .wb-cta-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(232,74,95,.40),0 3px 10px rgba(0,0,0,.10);
}
.wb-theme-4 .wb-cta-card:active{transform:translateY(-1px) scale(.99)}
.wb-theme-4 .wb-cta-ico{
  font-size:32px;margin-bottom:8px;display:inline-block;
  width:56px;height:56px;line-height:56px;border-radius:50%;
  background:rgba(255,255,255,.22);position:relative;z-index:1;
}
.wb-theme-4 .wb-cta-title{font-size:17px;font-weight:700;color:#fff;margin-bottom:5px;position:relative;z-index:1}
.wb-theme-4 .wb-cta-sub{font-size:13px;color:rgba(255,255,255,.88);position:relative;z-index:1}

/* ============================================================
   THEME 5 — "CARD STACK"
   Full-screen swipeable cards, bot walks user through guided tour.
   One feature per card. Dots indicator. "Ask Bot" persistent button.
   ============================================================ */
.wb-theme-5{
  --wb-p:#5B6EFF;--wb-s:#00BFA5;
  --wb-bg:#eef1f8;--wb-surface:#ffffff;
  --wb-text:#1a1a2e;--wb-text-dim:#636e72;
  --wb-border:#e0e4ee;--wb-accent-soft:rgba(91,110,255,.10);
  background:var(--wb-bg);
}
.wb-theme-5 .wb-stack-top{
  background:var(--wb-surface);padding:14px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:var(--wb-shadow);position:sticky;top:0;z-index:50;
}
.wb-theme-5 .wb-stack-top .wb-bot-avatar{width:42px;height:42px;font-size:22px}
.wb-theme-5 .wb-st-info{flex:1}
.wb-theme-5 .wb-st-name{font-size:16px;font-weight:700;color:var(--wb-text)}
.wb-theme-5 .wb-st-status{font-size:12px;color:var(--wb-text-dim);display:flex;align-items:center;gap:5px}
.wb-theme-5 .wb-stack-viewport{
  padding:16px;min-height:calc(100vh - 130px);
  display:flex;flex-direction:column;
}
.wb-theme-5 .wb-stack-card{
  background:var(--wb-surface);border-radius:20px;box-shadow:var(--wb-shadow-lg);
  padding:0;overflow:hidden;flex:1;display:flex;flex-direction:column;
  position:relative;animation:wb-cardIn .35s ease;
}
@keyframes wb-cardIn{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
.wb-theme-5 .wb-sc-banner{
  height:140px;background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  display:flex;align-items:center;justify-content:center;font-size:56px;
  position:relative;flex-shrink:0;
}
.wb-theme-5 .wb-sc-banner img{width:100%;height:100%;object-fit:cover}
.wb-theme-5 .wb-sc-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:12px}
.wb-theme-5 .wb-sc-title{font-size:20px;font-weight:700;color:var(--wb-text);text-transform:uppercase}
.wb-theme-5 .wb-sc-bot{
  background:var(--wb-accent-soft);border-radius:var(--wb-radius);
  padding:12px 14px;font-size:14px;line-height:1.5;color:var(--wb-text);
  display:flex;gap:8px;align-items:flex-start;
}
.wb-theme-5 .wb-sc-bot .wb-sb-ico{font-size:18px;flex-shrink:0;color:var(--wb-p)}
.wb-theme-5 .wb-sc-content{flex:1;font-size:14px;line-height:1.6;color:var(--wb-text-dim)}
.wb-theme-5 .wb-sc-actions{display:flex;gap:10px}
.wb-theme-5 .wb-sc-btn{
  flex:1;padding:12px;border:none;border-radius:var(--wb-radius-sm);
  font-size:14px;font-weight:600;font-family:var(--wb-font);cursor:pointer;
  transition:transform .15s;
}
.wb-theme-5 .wb-sc-btn:hover{transform:translateY(-1px)}
.wb-theme-5 .wb-sc-btn.primary{background:linear-gradient(135deg,var(--wb-p),var(--wb-s));color:#fff}
.wb-theme-5 .wb-sc-btn.secondary{background:var(--wb-bg);color:var(--wb-text)}
.wb-theme-5 .wb-stack-dots{
  display:flex;gap:8px;justify-content:center;padding:12px 0 16px;
}
.wb-theme-5 .wb-stack-dots span{
  width:10px;height:10px;border-radius:50%;background:var(--wb-border);
  cursor:pointer;transition:all .3s;
}
.wb-theme-5 .wb-stack-dots span.active{background:var(--wb-p);width:28px;border-radius:5px}
.wb-theme-5 .wb-ask-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  width:100%;max-width:100%;background:var(--wb-surface);
  padding:12px 16px;box-shadow:0 -2px 10px rgba(0,0,0,.08);z-index:100;
  display:flex;gap:10px;align-items:center;
}
@media(min-width:480px){
  .wb-theme-5 .wb-ask-bar{max-width:480px}
}
@media(min-width:768px){
  .wb-theme-5 .wb-ask-bar{max-width:768px}
}
@media(min-width:1024px){
  .wb-theme-5 .wb-ask-bar{max-width:1024px}
}
@media(min-width:1440px){
  .wb-theme-5 .wb-ask-bar{max-width:1200px}
}
.wb-theme-5 .wb-ask-btn{
  flex:1;padding:14px;border:none;border-radius:var(--wb-radius-sm);
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));color:#fff;
  font-size:15px;font-weight:600;font-family:var(--wb-font);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.wb-theme-5 .wb-ask-skip{
  padding:14px 18px;border:2px solid var(--wb-border);background:var(--wb-surface);
  border-radius:var(--wb-radius-sm);font-size:14px;font-weight:600;color:var(--wb-text-dim);
  cursor:pointer;font-family:var(--wb-font);
}

/* ============================================================
   THEME 6 — "BUSINESS PRO"
   Corporate service catalog for web design, hosting, email and
   company-registration businesses. Professional header,
   category filter tabs, responsive service-card grid.
   ============================================================ */
.wb-theme-6{
  --wb-p:#1565C0;--wb-s:#0097A7;
  --wb-bg:#f4f6fa;--wb-surface:#ffffff;
  --wb-text:#1a2332;--wb-text-dim:#5a6a7e;
  --wb-border:#dde3ed;--wb-accent-soft:rgba(21,101,192,.10);
  background:var(--wb-bg);
}
/* Corporate header bar */
.wb-theme-6 .wb-biz-header{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  padding:16px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--wb-shadow);position:sticky;top:0;z-index:50;
}
.wb-theme-6 .wb-biz-avatar{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  flex-shrink:0;overflow:hidden;
}
.wb-theme-6 .wb-biz-avatar img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.wb-theme-6 .wb-biz-hinfo{flex:1;min-width:0}
.wb-theme-6 .wb-biz-bname{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-theme-6 .wb-biz-status{font-size:12px;color:rgba(255,255,255,.88);display:flex;align-items:center;gap:5px;margin-top:2px}
.wb-theme-6 .wb-biz-status .wb-online-dot{background:#4CAF50;border-color:transparent;box-shadow:0 0 6px rgba(76,175,80,.6)}
/* Bot speech bar */
.wb-theme-6 .wb-biz-speech{
  background:var(--wb-surface);margin:12px 16px 0;border-radius:var(--wb-radius);
  padding:12px 14px;box-shadow:var(--wb-shadow);font-size:14px;line-height:1.6;
  color:var(--wb-text);
}
.wb-theme-6 .wb-biz-speech .wb-name{
  font-weight:700;color:var(--wb-p);font-size:13px;display:block;margin-bottom:2px;
}
/* Category filter tabs */
.wb-theme-6 .wb-biz-cats{
  display:flex;gap:8px;overflow-x:auto;padding:12px 16px 6px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
}
.wb-theme-6 .wb-biz-cats::-webkit-scrollbar{height:3px}
.wb-theme-6 .wb-biz-cats::-webkit-scrollbar-thumb{background:var(--wb-border);border-radius:2px}
.wb-theme-6 .wb-biz-cat{
  flex-shrink:0;padding:8px 16px;border:2px solid var(--wb-border);
  background:var(--wb-surface);border-radius:20px;font-size:13px;font-weight:600;
  color:var(--wb-text-dim);cursor:pointer;font-family:var(--wb-font);
  transition:all .2s;white-space:nowrap;
}
.wb-theme-6 .wb-biz-cat:hover{border-color:var(--wb-p);color:var(--wb-p)}
.wb-theme-6 .wb-biz-cat.active{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  border-color:transparent;color:#fff;box-shadow:0 2px 8px rgba(21,101,192,.25);
}
/* Service catalog grid */
.wb-theme-6 .wb-biz-grid{
  display:grid;grid-template-columns:1fr;gap:12px;padding:6px 16px 4px;
}
.wb-theme-6 .wb-biz-card{
  background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:var(--wb-radius);
  padding:16px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
}
.wb-theme-6 .wb-biz-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--wb-p),var(--wb-s));opacity:0;transition:opacity .2s;
}
.wb-theme-6 .wb-biz-card:hover{
  border-color:var(--wb-p);box-shadow:var(--wb-shadow-lg);transform:translateY(-2px);
}
.wb-theme-6 .wb-biz-card:hover::before{opacity:1}
.wb-theme-6 .wb-biz-card:active{transform:translateY(-1px) scale(.99)}
.wb-theme-6 .wb-biz-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wb-theme-6 .wb-biz-card-ico{
  width:44px;height:44px;border-radius:12px;background:var(--wb-accent-soft);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--wb-p);flex-shrink:0;
}
.wb-theme-6 .wb-biz-card-price{
  font-size:16px;font-weight:800;color:var(--wb-p);
  background:var(--wb-accent-soft);padding:4px 12px;border-radius:20px;
}
.wb-theme-6 .wb-biz-card-title{font-size:16px;font-weight:700;color:var(--wb-text);margin-bottom:4px}
.wb-theme-6 .wb-biz-card-desc{font-size:13px;color:var(--wb-text-dim);line-height:1.5;margin-bottom:6px}
.wb-theme-6 .wb-biz-card-turn{font-size:12px;color:var(--wb-s);font-weight:600;margin-bottom:8px}
.wb-theme-6 .wb-biz-card-cat{
  display:inline-block;font-size:11px;font-weight:600;color:var(--wb-text-dim);
  background:var(--wb-bg);padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.3px;
}
.wb-theme-6 .wb-biz-empty{
  grid-column:1/-1;padding:32px 16px;text-align:center;color:var(--wb-text-dim);
  font-size:14px;background:var(--wb-surface);border-radius:var(--wb-radius);border:1px dashed var(--wb-border);
}
/* Quick action tiles */
.wb-theme-6 .wb-biz-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 16px 8px;
}
.wb-theme-6 .wb-biz-qi{
  background:var(--wb-surface);border:1px solid var(--wb-border);border-radius:var(--wb-radius);
  padding:12px 6px;text-align:center;cursor:pointer;transition:all .2s;
}
.wb-theme-6 .wb-biz-qi:hover{border-color:var(--wb-p);transform:translateY(-2px);box-shadow:var(--wb-shadow)}
.wb-theme-6 .wb-biz-qi-ico{font-size:22px;margin-bottom:4px;color:var(--wb-p)}
.wb-theme-6 .wb-biz-qi-lbl{font-size:11px;font-weight:600;color:var(--wb-text-dim);line-height:1.2}
/* Search prompt bar (inherits shared .wb-search-prompt but theme-6 tweaks) */
.wb-theme-6 .wb-search-prompt{
  margin:12px 16px;border-color:var(--wb-border);
}
.wb-theme-6 .wb-search-prompt:hover{border-color:var(--wb-p)}
/* Language row */
.wb-theme-6 .wb-lang-row{padding:0 16px 4px}
/* Credit */
.wb-theme-6 .wb-credit{padding:8px 16px 80px}

/* ============================================================
   RESPONSIVE LAYOUT — Tablet (768px+) and Desktop (1024px+)
   ============================================================ */

/* ── TABLET (768px+) ── */
@media(min-width:768px){
  /* Increase horizontal padding for comfortable reading */
  #wbContent{padding:0 0 90px}
  .wb-search-prompt{margin:16px 24px;padding:16px 20px}
  .wb-services{padding:0 24px}
  .wb-service{padding:18px}
  .wb-form{padding:0 24px}
  .wb-panel{margin:16px 24px;padding:20px}
  .wb-bubbles{padding:0 24px 16px}
  .wb-transcript{padding:0 24px}
  .wb-section-head{padding:18px 24px 8px}
  .wb-map,.wb-slideshow{margin:0 24px}
  .wb-map iframe{height:300px}
  .wb-map-info{margin:12px 24px}

  /* Theme 1: 2-column card list on tablet */
  .wb-theme-1 .wb-card-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .wb-theme-1 .wb-chat-body{padding:16px 24px}

  /* Theme 2: horizontal scroll cards wider on tablet */
  .wb-theme-2 .wb-hscroll-card{flex:0 0 200px}
  .wb-theme-2 .wb-hscroll-card img{height:120px}

  /* Theme 3: bot assist wider, content more spacious */
  .wb-theme-3 .wb-bot-assist{margin:16px 24px}

  /* Theme 4: hero card more padding, CTA wider */
  .wb-theme-4 .wb-hero-card{padding:32px 28px 24px}
  /* THEME 6 — Business Pro tablet */
  .wb-theme-6 .wb-biz-grid{grid-template-columns:repeat(2,1fr);gap:14px;padding:6px 24px 4px}
  .wb-theme-6 .wb-biz-cats{padding:12px 24px 6px}
  .wb-theme-6 .wb-biz-speech{margin:12px 24px 0}
  .wb-theme-6 .wb-lang-row{padding:0 24px 4px}
  .wb-theme-6 .wb-biz-quick{padding:0 24px 8px}
  .wb-theme-6 .wb-credit{padding:8px 24px 80px}
  .wb-theme-6 .wb-search-prompt{margin:12px 24px}
  .wb-theme-4 .wb-hero-name{font-size:26px}
  .wb-theme-4 .wb-cta-card{margin:0 24px 20px}

/* ── DESKTOP (1024px+) ── */
@media(min-width:1024px){
  /* Larger paddings, font sizes */
  .wb-search-prompt{font-size:16px;padding:18px 24px;margin:20px 32px}
  .wb-services{padding:0 32px}
  .wb-service{padding:20px;gap:16px}
  .wb-s-ico{width:52px;height:52px;font-size:26px}
  .wb-s-title{font-size:17px}
  .wb-s-desc{font-size:14px}
  .wb-form{padding:0 32px}
  .wb-panel{margin:18px 32px;padding:24px}
  .wb-bubbles{padding:0 32px 16px}
  .wb-transcript{padding:0 32px}
  .wb-section-head{padding:20px 32px 10px}
  .wb-section-title{font-size:16px}
  .wb-map,.wb-slideshow{margin:0 32px}
  .wb-map iframe{height:360px}
  .wb-map-info{margin:14px 32px}

  /* Theme 1: 3-column card list on desktop */
  .wb-theme-1 .wb-card-list{grid-template-columns:repeat(3,1fr);gap:14px}
  .wb-theme-1 .wb-chat-body{padding:20px 32px}
  .wb-theme-1 .wb-chat-header{padding:22px 32px}
  .wb-theme-1 .wb-ch-greet{font-size:22px}

  /* Theme 2: app header taller, hscroll cards bigger */
  .wb-theme-2 .wb-app-header{padding:20px 32px}
  .wb-theme-2 .wb-header-greet{font-size:20px}
  .wb-theme-2 .wb-hscroll{padding:4px 32px 12px}
  .wb-theme-2 .wb-hscroll-card{flex:0 0 240px}
  .wb-theme-2 .wb-hscroll-card img{height:140px}
  .wb-theme-2 .wb-quick-ico{width:56px;height:56px;font-size:28px}

  /* Theme 3: tab bar taller, bot assist wider */
  .wb-theme-3 .wb-tab-header{padding:18px 32px 0}
  .wb-theme-3 .wb-tab{padding:12px 22px;font-size:15px}
  .wb-theme-3 .wb-tb-name{font-size:19px}
  .wb-theme-3 .wb-bot-assist{margin:18px 32px;padding:14px 18px}

  /* Theme 4: hero even larger, CTA card wider */
  .wb-theme-4 .wb-hero-card{padding:40px 36px 28px}
  .wb-theme-4 .wb-hero-name{font-size:30px}
  .wb-theme-4 .wb-hero-greet{font-size:17px;padding:16px 18px}
  .wb-theme-4 .wb-cta-card{margin:0 32px 24px;padding:28px 24px}
  .wb-theme-4 .wb-cta-ico{width:64px;height:64px;line-height:64px;font-size:36px}
  .wb-theme-4 .wb-cta-title{font-size:19px}

  /* Theme 5: stack card taller, banner taller, body more spacious */
  .wb-theme-5 .wb-stack-top{padding:18px 32px}
  .wb-theme-5 .wb-st-name{font-size:19px}
  .wb-theme-5 .wb-stack-viewport{padding:24px 32px}
  .wb-theme-5 .wb-sc-banner{height:220px;font-size:88px}
  .wb-theme-5 .wb-sc-body{padding:28px;gap:16px}
  .wb-theme-5 .wb-sc-title{font-size:28px}
  .wb-theme-5 .wb-sc-bot{font-size:15px;padding:16px 18px}
  .wb-theme-5 .wb-sc-content{font-size:15px}
  .wb-theme-5 .wb-sc-btn{font-size:16px;padding:14px}
}

/* ── LARGE DESKTOP (1440px+) ── */
@media(min-width:1440px){
  /* Theme 1: 4-column card list on very wide screens */
  .wb-theme-1 .wb-card-list{grid-template-columns:repeat(4,1fr)}
  .wb-theme-4 .wb-grid-2col{grid-template-columns:repeat(5,1fr)}
  /* THEME 6 — Business Pro desktop */
  .wb-theme-6 .wb-biz-grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .wb-theme-6 .wb-biz-header{padding:18px 32px}
  .wb-theme-6 .wb-biz-bname{font-size:19px}
  .wb-theme-6 .wb-biz-speech{margin:16px 32px 0;font-size:15px}
  .wb-theme-6 .wb-biz-cats{padding:14px 32px 8px}
  .wb-theme-6 .wb-biz-quick{padding:0 32px 8px}
  .wb-theme-6 .wb-lang-row{padding:0 32px 4px}
  .wb-theme-6 .wb-credit{padding:8px 32px 80px}
  .wb-theme-6 .wb-search-prompt{margin:14px 32px}
}
} /* close @media(min-width:768px) */

/* ============================================================
   DARK MODE support (all themes)
   Activated via .wb-dark class on #wbApp
   ============================================================ */
.wb-dark{
  --wb-bg:#1a1a2e;--wb-surface:#252542;
  --wb-text:#e8eaf6;--wb-text-dim:#9fa8da;
  --wb-border:#333355;
}
.wb-dark .wb-app-header,
.wb-dark .wb-chat-header,
.wb-dark .wb-tab-header,
.wb-dark .wb-stack-top,
.wb-dark .wb-ask-bar,
.wb-dark .wb-bottom-nav{
  background:var(--wb-surface)
}

/* ============================================================
   CHATFLOW CONVERSATION UI
   Used by showQueries() — the conversational chatflow engine
   that processes webflow items (bot messages, option chips,
   input fields, rich content cards, typing indicators).
   ============================================================ */
.wb-chatflow{
  display:flex;
  flex-direction:column;
  min-height:60vh;
  max-width:680px;
  margin:0 auto;
  width:100%;
}

/* Chat message container (scrollable) */
.wb-chat-container{
  flex:1;
  overflow-y:auto;
  padding:8px 0 16px;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.wb-chat-container::-webkit-scrollbar{width:6px}
.wb-chat-container::-webkit-scrollbar-track{background:transparent}
.wb-chat-container::-webkit-scrollbar-thumb{background:var(--wb-border);border-radius:10px}

/* Chat messages */
.wb-chat-msg{
  display:flex;
  margin-bottom:10px;
  animation:wb-chat-msg-in .3s ease;
}
.wb-chat-msg.bot{justify-content:flex-start}
.wb-chat-msg.user{justify-content:flex-end}
@keyframes wb-chat-msg-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Chat bubbles */
.wb-chat-bubble{
  max-width:82%;
  padding:12px 16px;
  border-radius:18px;
  font-size:15px;
  line-height:1.55;
  word-wrap:break-word;
  white-space:normal;
  box-shadow:var(--wb-shadow);
}
.wb-chat-bubble.bot{
  background:var(--wb-surface);
  color:var(--wb-text);
  border-bottom-left-radius:6px;
  border:1px solid var(--wb-border);
}
.wb-chat-bubble.user{
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  color:#fff;
  border-bottom-right-radius:6px;
}

/* Typing indicator */
.wb-chat-typing{
  display:flex;
  gap:4px;
  align-items:center;
  padding:2px 0;
}
.wb-chat-typing span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--wb-text-dim);
  animation:wb-chat-typing-bounce 1.4s infinite ease-in-out;
}
.wb-chat-typing span:nth-child(1){animation-delay:-.32s}
.wb-chat-typing span:nth-child(2){animation-delay:-.16s}
@keyframes wb-chat-typing-bounce{
  0%,80%,100%{transform:scale(.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}

/* Options bar (option chips) */
.wb-chat-options-bar{
  padding:8px 0 4px;
}
.wb-chat-options-wrap{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.wb-option-chip{
  background:var(--wb-surface);
  color:var(--wb-p);
  border:2px solid var(--wb-p);
  border-radius:22px;
  padding:10px 18px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--wb-font);
}
.wb-option-chip:hover{
  background:var(--wb-p);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(108,99,255,.25);
}
.wb-option-chip:active{transform:translateY(0)}
.wb-chip-icon{font-size:16px}

/* Input bar */
.wb-chat-input-bar{
  display:flex;
  gap:8px;
  padding:8px 0;
  align-items:center;
}
.wb-chat-input-bar input{
  flex:1;
  border:2px solid var(--wb-border);
  border-radius:22px;
  padding:12px 18px;
  font-size:15px;
  font-family:var(--wb-font);
  color:var(--wb-text);
  background:var(--wb-surface);
  outline:none;
  transition:border-color .2s ease;
}
.wb-chat-input-bar input:focus{border-color:var(--wb-p)}
.wb-chat-send{
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--wb-p),var(--wb-s));
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:var(--wb-shadow);
}
.wb-chat-send:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(108,99,255,.35)}
.wb-chat-send:active{transform:scale(.95)}

/* Free chat hint */
.wb-chat-free-hint{
  text-align:center;
  font-size:13px;
  color:var(--wb-text-dim);
  padding:6px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.wb-hint-ico{font-size:15px}

/* Conversation ended label */
.wb-chat-ended{
  text-align:center;
  color:var(--wb-text-dim);
  font-size:12px;
  padding:12px;
  font-style:italic;
}

/* Back button wrapper */
.wb-chat-back{
  margin-top:16px;
  text-align:center;
}

/* ── Rich content cards inside chat ── */
.wb-chat-rich-card{
  max-width:90%;
  background:var(--wb-surface);
  border-radius:var(--wb-radius);
  border:1px solid var(--wb-border);
  overflow:hidden;
  box-shadow:var(--wb-shadow);
  margin-bottom:4px;
}
.wb-chat-rich-title{
  font-size:15px;
  font-weight:700;
  color:var(--wb-text);
  padding:12px 16px 8px;
  border-bottom:1px solid var(--wb-border);
}
.wb-chat-rich-body{padding:8px 16px 12px}

/* Services card */
.wb-chat-service-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid var(--wb-border);
  gap:12px;
}
.wb-chat-service-item:last-child{border-bottom:none}
.wb-chat-service-name{
  font-weight:600;
  font-size:14px;
  color:var(--wb-text);
}
.wb-chat-service-desc{
  font-size:13px;
  color:var(--wb-text-dim);
  margin-top:2px;
}
.wb-chat-service-price{
  font-weight:700;
  font-size:14px;
  color:var(--wb-p);
  white-space:nowrap;
}

/* Gallery card */
.wb-chat-gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  padding:8px;
}
.wb-chat-gallery img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--wb-radius-sm);
  cursor:pointer;
  transition:transform .2s ease;
}
.wb-chat-gallery img:hover{transform:scale(1.04)}

/* Slideshow card */
.wb-chat-slideshow{
  position:relative;
  padding:8px;
}
.wb-chat-slideshow img{
  width:100%;
  border-radius:var(--wb-radius-sm);
  display:block;
}
.wb-chat-slide-caption{
  font-size:13px;
  color:var(--wb-text-dim);
  text-align:center;
  padding:8px 0 4px;
}

/* Map card */
.wb-chat-map{
  padding:8px;
}
.wb-chat-map iframe{
  width:100%;
  height:200px;
  border:none;
  border-radius:var(--wb-radius-sm);
}
.wb-chat-map-addr{
  font-size:13px;
  color:var(--wb-text-dim);
  padding:6px 16px 10px;
}

/* Working hours card */
.wb-chat-hours-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  font-size:14px;
  border-bottom:1px solid var(--wb-border);
}
.wb-chat-hours-row:last-child{border-bottom:none}
.wb-chat-hours-open{color:#4caf50;font-weight:600}
.wb-chat-hours-closed{color:#f44336;font-weight:600}

/* Rooms & prices card */
.wb-chat-room-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid var(--wb-border);
  gap:12px;
}
.wb-chat-room-item:last-child{border-bottom:none}
.wb-chat-room-name{font-weight:600;font-size:14px;color:var(--wb-text)}
.wb-chat-room-desc{font-size:13px;color:var(--wb-text-dim);margin-top:2px}
.wb-chat-room-price{font-weight:700;font-size:14px;color:var(--wb-p);white-space:nowrap}

/* Stock/price list card */
.wb-chat-stock-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--wb-border);
  gap:12px;
}
.wb-chat-stock-item:last-child{border-bottom:none}
.wb-chat-stock-name{font-weight:600;font-size:14px;color:var(--wb-text)}
.wb-chat-stock-price{font-weight:700;font-size:14px;color:var(--wb-p)}
.wb-chat-stock-in{font-size:11px;color:#4caf50;font-weight:600}
.wb-chat-stock-out{font-size:11px;color:#f44336;font-weight:600}

/* ── Chatflow responsive ── */
@media(min-width:768px){
  .wb-chatflow{min-height:70vh}
  .wb-chat-bubble{max-width:70%;font-size:16px}
  .wb-chat-gallery{grid-template-columns:repeat(4,1fr)}
}


/* ============================================================
   APP SHELL — splash, launch animation, offline screen
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  color:#2d3436;background:#f5f6fa;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* Splash / launch screen - scoped to #wbSplash with !important for resilience.
   Uses #wbSplash ID scoping + !important so it cannot be overridden or
   swallowed by any parse error in the robot styles above. app_engine.js
   also injects this same set of rules via ensureSplash() as a backup.
   Keyframes use unique wbSpl* prefix to avoid conflicts. */
#wbSplash{
  position:fixed!important;inset:0!important;z-index:99999!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;
  background:radial-gradient(1200px 700px at 20% -10%,rgba(123,92,255,.25),transparent 60%),
             radial-gradient(1000px 800px at 110% 20%,rgba(0,229,255,.18),transparent 55%),
             linear-gradient(160deg,#050816,#0a0f2c 55%,#0e1538)!important;
  transition:opacity .5s ease,visibility .5s ease;
  font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif!important;
  overflow:hidden!important;margin:0!important;padding:0!important;border:none!important;
  text-align:center!important;line-height:1.4!important;
}
#wbSplash.wb-splash-fade{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
#wbSplash *{box-sizing:border-box!important}
#wbSplash .wb-splash-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(0,229,255,.08),transparent 60%);animation:wbSplGlow 3s ease-in-out infinite alternate;pointer-events:none}
@keyframes wbSplGlow{from{opacity:.5}to{opacity:1}}
#wbSplash .wb-splash-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#wbSplash .wb-splash-stars span{position:absolute;border-radius:50%;background:#fff;opacity:.6;animation:wbSplTwinkle 3s ease-in-out infinite alternate}
@keyframes wbSplTwinkle{from{opacity:.2}to{opacity:.8}}
#wbSplash .wb-splash-robot{position:relative;width:130px;height:150px;animation:wbSplFloat 4s ease-in-out infinite;z-index:2;flex-shrink:0}
@keyframes wbSplFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
#wbSplash .wb-splash-antenna{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:4px;height:18px;background:linear-gradient(#00e5ff,#7b5cff);border-radius:3px}
#wbSplash .wb-splash-antenna::after{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#00e5ff;box-shadow:0 0 16px 4px #00e5ff;animation:wbSplPulse 1.6s ease-in-out infinite}
@keyframes wbSplPulse{0%,100%{opacity:1;transform:translateX(-50%) scale(1)}50%{opacity:.5;transform:translateX(-50%) scale(.7)}}
#wbSplash .wb-splash-head{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:104px;height:78px;background:linear-gradient(160deg,#1b2a5e,#0b1336);border-radius:26px;border:2px solid rgba(0,229,255,.35);box-shadow:0 0 26px rgba(0,229,255,.25),inset 0 0 18px rgba(0,229,255,.12)}
#wbSplash .wb-splash-face{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:84px;height:46px;background:#0c1640;border-radius:18px;overflow:hidden;border:1px solid rgba(0,229,255,.2)}
#wbSplash .wb-splash-eye{position:absolute;top:14px;width:18px;height:18px;border-radius:50%;background:#00e5ff;box-shadow:0 0 14px 4px #00e5ff;animation:wbSplBlink 4.5s infinite}
#wbSplash .wb-splash-eye.left{left:14px}
#wbSplash .wb-splash-eye.right{right:14px}
@keyframes wbSplBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
#wbSplash .wb-splash-mouth{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:30px;height:8px;border-radius:0 0 16px 16px;background:rgba(0,229,255,.5);box-shadow:0 0 10px #00e5ff;animation:wbSplTalk .4s ease-in-out infinite alternate}
@keyframes wbSplTalk{from{height:5px;width:24px}to{height:11px;width:34px}}
#wbSplash .wb-splash-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:96px;height:54px;background:linear-gradient(160deg,#1b2a5e,#0b1336);border-radius:22px 22px 18px 18px;border:2px solid rgba(0,229,255,.3);box-shadow:0 0 20px rgba(123,92,255,.25)}
#wbSplash .wb-splash-body::after{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);width:40px;height:8px;border-radius:6px;background:linear-gradient(90deg,#00e5ff,#7b5cff);box-shadow:0 0 12px #00e5ff}
#wbSplash .wb-splash-name{position:relative;z-index:2;margin-top:26px;font-size:26px;font-weight:800;letter-spacing:1px;color:#fff;text-shadow:0 0 20px rgba(0,229,255,.6);animation:wbSplNameIn .8s ease}
@keyframes wbSplNameIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#wbSplash .wb-splash-bar-wrap{margin-top:22px;z-index:2;width:240px;max-width:80vw;position:relative}
#wbSplash .wb-splash-bar-track{width:100%;height:7px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;box-shadow:inset 0 0 4px rgba(0,0,0,.35)}
#wbSplash .wb-splash-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#00e5ff,#7c5cff);transition:width .45s cubic-bezier(.22,.61,.36,1);box-shadow:0 0 10px rgba(0,229,255,.65)}
#wbSplash .wb-splash-pct{margin-top:9px;font-size:12px;font-weight:600;letter-spacing:.5px;color:#cfeefb}
#wbSplash .wb-splash-status{position:relative;z-index:2;margin-top:14px;font-size:13px;color:#9fb3d6;letter-spacing:.3px;min-height:18px}

/* App mount */
#wbApp{min-height:100vh}

/* Offline screen */
.wb-offline{position:fixed;inset:0;z-index:9998;background:radial-gradient(1000px 700px at 50% 30%,rgba(123,92,255,.18),transparent 60%),linear-gradient(160deg,#050816,#0a0f2c 60%,#0e1538);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center;animation:wb-pop .4s ease}
.wb-offline-robot{position:relative;width:110px;height:126px;animation:wb-float-bot 5s ease-in-out infinite;margin-bottom:8px;opacity:.85;filter:grayscale(.4)}
.wb-offline-antenna{position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:4px;height:18px;background:linear-gradient(#00e5ff,#7b5cff);border-radius:3px;opacity:.6}
.wb-offline-antenna::after{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:#00e5ff;box-shadow:0 0 14px 3px rgba(0,229,255,.5)}
.wb-offline-head{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:90px;height:66px;background:linear-gradient(160deg,#1b2a5e,#0b1336);border-radius:22px;border:2px solid rgba(0,229,255,.25)}
.wb-offline-face{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:72px;height:38px;background:#0c1640;border-radius:16px;overflow:hidden}
.wb-offline-eye{position:absolute;top:12px;width:15px;height:15px;border-radius:50%;background:#00e5ff;box-shadow:0 0 10px 2px rgba(0,229,255,.6);animation:wb-blink 4.5s infinite}
.wb-offline-eye.left{left:12px}.wb-offline-eye.right{right:12px}
.wb-offline-mouth{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:24px;height:6px;border-radius:0 0 12px 12px;background:rgba(0,229,255,.4)}
.wb-offline-body{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:82px;height:46px;background:linear-gradient(160deg,#1b2a5e,#0b1336);border-radius:18px 18px 14px 14px;border:2px solid rgba(0,229,255,.22)}
.wb-offline h2{margin-top:24px;font-size:24px;color:#fff;font-weight:800;letter-spacing:.5px}
.wb-offline p{margin-top:12px;font-size:15px;color:#9fb3d6;max-width:380px;line-height:1.6}
.wb-retry-btn{margin-top:26px;padding:14px 34px;border:none;border-radius:30px;background:linear-gradient(135deg,#00e5ff,#7b5cff);color:#031024;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 22px rgba(0,229,255,.4);transition:.25s}
.wb-retry-btn:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 10px 30px rgba(0,229,255,.55)}
.wb-retry-btn:active{transform:scale(.97)}
.wb-retry-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.wb-offline-credit{margin-top:36px;font-size:12px;color:#5a6d94;opacity:.8}
.wb-offline-credit b{color:#7b9dd6}

.hidden{display:none!important}