/* Shared site CSS: header + footer. Generated from _header.php/_footer.php; edit here. */
/* Header (_header.php) */
header.hdr.wbh{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #E4E7EE;font-family:'Inter',system-ui,sans-serif;color:#0A0A14;margin:0;padding:0;}
header.hdr.wbh a{text-decoration:none;color:inherit;}
header.hdr.wbh .hdr-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;gap:10px;}
@media (min-width:769px){header.hdr.wbh .hdr-inner{padding:14px 24px;gap:16px;}}
header.hdr.wbh .logo{display:flex;align-items:center;gap:10px;font-size:40px;font-weight:900;letter-spacing:-0.5px;flex-shrink:0;line-height:1.2;color:#0A0A14;}
header.hdr.wbh .logo-icon{width:36px;height:36px;border-radius:10px;background:#5B4EFA;display:flex;align-items:center;justify-content:center;}
header.hdr.wbh .logo-icon svg{width:20px;height:20px;}
header.hdr.wbh .logo-name span{color:#5B4EFA;}
/* Desktop only: on mobile the search is a slide-down panel (see "Mobile-only collapsible search" below). */
@media (min-width:769px){header.hdr.wbh .search-wrap{flex:1;max-width:480px;position:relative;}}
header.hdr.wbh .search-form{position:relative;margin:0;}
header.hdr.wbh .search-box{display:flex;align-items:center;gap:8px;background:#F7F8FF;border:1.5px solid #E4E7EE;border-radius:24px;padding:7px 14px;transition:border-color .15s,box-shadow .15s;}
header.hdr.wbh .search-box:focus-within{border-color:#5B4EFA;box-shadow:0 0 0 3px rgba(91,78,250,.1);background:#fff;}
header.hdr.wbh .search-box svg{flex-shrink:0;color:#9CA3AF;}
header.hdr.wbh .search-box input{flex:1;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:#0A0A14;min-width:0;padding:0;margin:0;}
header.hdr.wbh .search-box input::placeholder{color:#9CA3AF;}
header.hdr.wbh .search-box button{flex-shrink:0;background:#5B4EFA;color:#fff;border:none;border-radius:16px;padding:4px 13px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;}
header.hdr.wbh .search-box button:hover{background:#4338E8;}
header.hdr.wbh .search-suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1.5px solid #E4E7EE;border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);z-index:200;overflow:hidden;}
header.hdr.wbh .search-suggestions[hidden]{display:none;}
header.hdr.wbh .sg-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;transition:background .1s;color:inherit;}
header.hdr.wbh .sg-item:hover,header.hdr.wbh .sg-item.focused{background:#F7F8FF;}
header.hdr.wbh .sg-icon{color:#9CA3AF;flex-shrink:0;}
header.hdr.wbh .sg-label{font-size:13.5px;font-weight:600;flex:1;color:#0A0A14;}
header.hdr.wbh .sg-count{font-size:11.5px;color:#9CA3AF;white-space:nowrap;}
header.hdr.wbh .hdr-nav{display:flex;align-items:center;gap:2px;flex-shrink:0;}
header.hdr.wbh .hdr-nav a{position:relative;font-size:12px;font-weight:500;color:#6B7280;text-transform:uppercase;letter-spacing:.08em;padding:8px 12px;border-radius:10px;transition:color .18s,background .18s;}
header.hdr.wbh .hdr-nav a:hover{color:#0A0A14;background:#F7F8FF;}
header.hdr.wbh .hdr-nav a.active{color:#5B4EFA;}
header.hdr.wbh .hdr-nav a.active::after{content:'';position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:#5B4EFA;border-radius:2px;}
header.hdr.wbh .hdr-nav a.hdr-home{display:flex;align-items:center;}
header.hdr.wbh .hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;color:#6B7280;flex-shrink:0;}
header.hdr.wbh .mob-menu{position:absolute;top:100%;right:12px;left:12px;margin-top:8px;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #E4E7EE;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.12);z-index:99;padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transition:opacity .2s ease,transform .2s ease,visibility .2s ease;display:block;}
header.hdr.wbh .mob-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
header.hdr.wbh .mob-menu a{display:flex;align-items:center;padding:12px 16px;font-size:13.5px;font-weight:700;color:#0A0A14;border-radius:10px;text-transform:uppercase;letter-spacing:.06em;transition:background .15s,color .15s;}
header.hdr.wbh .mob-menu a+a{margin-top:2px;}
header.hdr.wbh .mob-menu a:hover,header.hdr.wbh .mob-menu a.active{background:#F7F8FF;color:#5B4EFA;}
@media (max-width:768px){
  header.hdr.wbh .search-box button{display:none;}
  header.hdr.wbh .hdr-nav{display:none;}
  header.hdr.wbh .hamburger{display:flex;align-items:center;justify-content:center;}
  header.hdr.wbh .logo{font-size:17px;gap:7px;}
  header.hdr.wbh .logo-icon{width:28px;height:28px;border-radius:8px;}
  header.hdr.wbh .logo-icon svg{width:16px;height:16px;}
  header.hdr.wbh.scrolled .logo-name{font-size:0;line-height:0;}
  header.hdr.wbh.scrolled .logo-name::before,header.hdr.wbh.scrolled .logo-name::after{font-size:17px;line-height:1;font-weight:900;letter-spacing:-0.5px;}
  header.hdr.wbh.scrolled .logo-name::before{content:"W";color:#0A0A14;}
  header.hdr.wbh.scrolled .logo-name::after{content:"B";color:#5B4EFA;}
}
@media (max-width:480px){header.hdr.wbh .hdr-inner{padding-left:16px;padding-right:16px;}header.hdr.wbh .mob-menu a{padding-left:16px;padding-right:16px;}}

/* Footer (_footer.php) */
/* Sticky menu bar on every page. Many pages set overflow-x:hidden on html,body,
   which turns <body> into a scroll container and silently breaks position:sticky.
   overflow-x:clip hides sideways overflow the same way without that side effect
   (browsers without clip support ignore it and keep hidden). */
html,body{overflow-x:clip !important;}
.hdr{position:sticky !important;top:0;z-index:100;}
/* "Popular" label in the header sub-bar uses the logo purple everywhere. */
.hdr-sub-lbl{color:#5B4EFA !important;}
.ftr{border-top:1px solid var(--border);padding:32px 24px;text-align:center;}
.ftr-inner{max-width:1400px;margin:0 auto;}
.ftr p{font-size:12px;color:var(--soft);line-height:1.8;}
.ftr strong{color:var(--muted);}
.ftr-links{margin-top:6px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.ftr-links a{font-size:12px;color:var(--soft);font-weight:600;transition:color .15s;}
.ftr-links a:hover{color:var(--accent);}
.ftr-socials{margin:14px auto 0;display:flex;justify-content:center;gap:10px;}
.ftr-socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--surface);color:var(--muted);transition:background .15s,color .15s,transform .15s;}
.ftr-socials a:hover{background:var(--accent);color:#fff;transform:translateY(-1px);}
.ftr-socials svg{width:16px;height:16px;display:block;}
.ftr p.ftr-quote{margin:0 auto 18px;max-width:820px;padding-bottom:20px;border-bottom:1px solid var(--border);font-family:'Lora',Georgia,'Times New Roman',serif;font-style:italic;font-weight:500;font-size:16px;line-height:1.75;color:#5c5c5c;letter-spacing:.1px;}
@media(max-width:480px){.ftr{padding-left:16px;padding-right:16px;}.ftr p.ftr-quote{font-size:15px;line-height:1.65;}}

.wb-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9999;display:none;align-items:center;justify-content:center;padding:24px;}
.wb-modal.open{display:flex;}
.wb-modal-box{background:#fff;width:100%;height:100%;max-width:min(80vw,1600px);max-height:min(94vh,1250px);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 100px rgba(0,0,0,.45);overscroll-behavior:contain;}
.wb-modal-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);background:#fff;}
.wb-modal-logo{display:inline-flex;align-items:center;flex-shrink:0;font-size:18px;font-weight:900;letter-spacing:-.4px;color:var(--text);text-decoration:none;line-height:1;}
.wb-modal-logo span{color:var(--accent);}
.wb-modal-logo:hover{opacity:.85;}
.wb-modal-title{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-modal-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:10px 18px;border-radius:22px;background:#E4E7EE;color:#0A0A14;transition:background .15s;line-height:1;}
.wb-modal-btn svg{width:12px;height:12px;flex-shrink:0;opacity:.7;}
.wb-modal-btn:hover{background:#CED3DC;}
.wb-modal-close{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:700;padding:10px 18px;border-radius:22px;background:var(--accent);color:#fff;border:none;cursor:pointer;transition:background .15s;flex-shrink:0;line-height:1;order:2;}
.wb-modal-close:hover{background:var(--accent-h);}
/* Share icon in the bar, next to the Back button. */
.wb-modal-share{display:inline-flex;flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;align-items:center;justify-content:center;padding:0;transition:background .15s,color .15s,border-color .15s;order:3;}
.wb-modal-share:hover{background:#0A0A14;color:#fff;border-color:#0A0A14;}
.wb-modal-share svg{width:18px;height:18px;display:block;}
.wb-modal-body{flex:1;position:relative;background:var(--surface);}
.wb-modal-iframe{width:100%;height:100%;border:0;background:#fff;overscroll-behavior:contain;}
.wb-modal-loader{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#fff;pointer-events:none;z-index:2;}
.wb-modal.loading .wb-modal-loader{display:flex;}
.wb-modal-spinner{width:42px;height:42px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:wb-spin .85s linear infinite;}
.wb-modal-loader-label{font-size:12px;font-weight:600;color:var(--soft);letter-spacing:.06em;text-transform:uppercase;}
@keyframes wb-spin{to{transform:rotate(360deg);}}
.wb-modal-fallback{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;color:var(--muted);font-size:14px;background:#fff;z-index:3;}
.wb-modal.fallback .wb-modal-fallback{display:flex;}
.wb-modal.fallback .wb-modal-iframe{display:none;}
.wb-modal-fallback-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.wb-modal-btn-retry{font-family:inherit;background:var(--accent);color:#fff;border:none;cursor:pointer;}
.wb-modal-btn-retry:hover{background:var(--accent-h);}
.wb-modal-retry-link{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:18px;padding:6px 14px;cursor:pointer;pointer-events:auto;letter-spacing:.02em;transition:background .15s,color .15s;}
.wb-modal-retry-link:hover{background:var(--accent);color:#fff;}
body.wb-modal-open{overflow:hidden;}
.wb-modal-close-short{display:none;}
.wb-modal-close-full{display:inline;}
@media (max-width:640px), (max-height:500px) and (orientation:landscape){
  /* Mobile + landscape phones: full-bleed. Use the dynamic viewport unit
     (100dvh) so the modal grows when iOS Safari's URL bar collapses on
     scroll, falling back to 100svh on older WebKit and 100vh on browsers
     without dvh support. (svh prevented an early bug where the modal
     overflowed past the URL bar; dvh is the modern equivalent and matches
     the YouTube video modal below.) */
  .wb-modal{padding:0;height:100vh;height:100svh;height:100dvh;}
  .wb-modal-box{border-radius:0;max-width:100%;height:100vh;height:100svh;height:100dvh;max-height:100vh;max-height:100svh;max-height:100dvh;}
  /* Pad the top bar with the iOS safe-area inset so the Close/Open buttons
     stay below the notch + status bar on full-bleed mobile (modal-box runs
     y:0 to y:100% on mobile; without this padding the bar sits beneath the
     iPhone status bar / Dynamic Island and the buttons clip out of view). */
  /* Tighten the inter-button spacing on mobile so Back/Open/Share read as a
     single cluster; the logo is pushed to the left by an auto margin on Back. */
  .wb-modal-bar{gap:6px;padding:max(11px,calc(11px + env(safe-area-inset-top))) 14px 11px 14px;}
  .wb-modal-title{display:none;}
  /* Bump the wordmark on mobile so it carries the header visually now that
     the article title is hidden. */
  .wb-modal-logo{font-size:24px;letter-spacing:-.5px;}
  /* Restore source order on mobile: logo · Back · Open · Share. (Desktop uses
     flex `order` to slide Back between Open and Share for clarity, but on
     mobile we want Back grouped immediately after the logo.) */
  #wb-modal-close{margin-left:auto;order:0;}
  #wb-modal-share{order:0;}
  #wb-modal-open{max-width:50%;overflow:hidden;}
  #wb-modal-open #wb-modal-open-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wb-modal-btn{padding:9px 12px;font-size:12.5px;border-radius:20px;}
  .wb-modal-close{padding:9px 12px;font-size:12.5px;border-radius:20px;}
  .wb-modal-share{width:34px;height:34px;}
  .wb-modal-close-full{display:none;}
  .wb-modal-close-short{display:inline;}
}

/* Shared YouTube video modal: any page can trigger it by clicking an element
   with [data-video-id] (and optional data-video-title / data-video-channel). */
.vm{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease;}
.vm.open{opacity:1;visibility:visible;}
.vm-stage{width:100%;max-width:min(80vw,1600px);max-height:min(94vh,1250px);background:#fff;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 80px rgba(0,0,0,.5);transform:scale(.98);transition:transform .18s ease;}
.vm.open .vm-stage{transform:scale(1);}
.vm-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);background:#fff;flex-shrink:0;}
.vm-meta{flex:1;min-width:0;display:flex;align-items:center;gap:10px;line-height:1.3;overflow:hidden;}
.vm-meta-title{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vm-meta-channel{flex-shrink:0;font-size:12px;color:var(--soft);font-weight:500;white-space:nowrap;}
.vm-close{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:700;padding:10px 18px;border-radius:22px;background:var(--accent);color:#fff;border:none;cursor:pointer;transition:background .15s;flex-shrink:0;line-height:1;}
.vm-close:hover,.vm-close:focus-visible{background:var(--accent-h);outline:none;}
.vm-close-short{display:none;}
.vm-body{position:relative;aspect-ratio:16/9;background:#000;}
.vm-body iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
@media (max-width:640px), (max-height:500px) and (orientation:landscape){
  .vm{padding:0;}
  .vm-stage{border-radius:0;max-width:100%;max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;}
  .vm-bar{gap:10px;padding:10px 14px;}
  .vm-meta-channel{display:none;}
  .vm-close{padding:10px 16px;font-size:12.5px;border-radius:20px;}
  .vm-close-full{display:none;}
  .vm-close-short{display:inline;}
  .vm-body{aspect-ratio:auto;flex:1;min-height:0;}
}
body.vm-open{overflow:hidden;overscroll-behavior:contain;}

/* Mobile-only clear button injected next to #wb-search. Lives in _footer.php
   so every page that ships the standard header gets it without per-page edits. */
.wb-search-clear{display:none;flex-shrink:0;background:var(--accent-bg);border:0;border-radius:50%;cursor:pointer;color:var(--accent);padding:0;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(91,78,250,.18);}
.wb-search-clear:active{background:var(--accent);color:#fff;}
@media(max-width:768px){
  /* iOS Safari zooms the page when a focused input has font-size < 16px.
     Bump the header search input to 16px on mobile to suppress the zoom. */
  .search-box input#wb-search{font-size:16px;}
  .search-box input:not(:placeholder-shown) ~ .wb-search-clear{display:flex;width:34px;height:34px;}
}

/* Disable the per-page "shrink WristBuzz to W+B on scroll" rule on mobile.
   Each page's <head> CSS swaps the wordmark for the W/B initials when the
   header gets the .scrolled class; this override restores the full wordmark
   so the brand name stays legible while scrolling. Also bump the mobile
   logo size up from the cramped 17px default so the brand reads cleanly. */
@media(max-width:768px){
  .hdr .logo{font-size:22px!important;gap:9px!important;}
  .hdr .logo-icon{width:32px!important;height:32px!important;border-radius:9px!important;}
  .hdr .logo-icon svg{width:18px!important;height:18px!important;}
  .hdr.scrolled .logo-name{font-size:inherit!important;line-height:inherit!important;}
  .hdr.scrolled .logo-name::before,
  .hdr.scrolled .logo-name::after{content:none!important;}
}

/* Mobile-only collapsible search: hide the inline .search-wrap and surface a
   compact toggle icon next to the hamburger. Tapping the icon slides a
   full-width input panel down from under the sticky header (Fratello-style). */
.wb-search-toggle{display:none;background:none;border:0;cursor:pointer;padding:4px;color:var(--muted);flex-shrink:0;align-items:center;justify-content:center;}
.wb-search-toggle:hover{color:var(--accent);}
.wb-search-toggle .ico-close{display:none;}
@media(max-width:768px){
  .wb-search-toggle{display:flex;margin-left:auto;}
  .search-wrap{
    position:fixed;
    top:60px;
    left:0;
    right:0;
    max-width:none;
    padding:12px 16px;
    background:#fff;
    border-bottom:1px solid var(--border);
    box-shadow:0 10px 28px rgba(0,0,0,.10);
    z-index:90;
    transform:translateY(-110%);
    transition:transform .22s ease, opacity .22s ease;
    opacity:0;
    pointer-events:none;
  }
  body.wb-search-open .search-wrap{transform:translateY(0);opacity:1;pointer-events:auto;}
  body.wb-search-open .wb-search-toggle{color:var(--accent);}
  body.wb-search-open .wb-search-toggle .ico-search{display:none;}
  body.wb-search-open .wb-search-toggle .ico-close{display:block;}
  /* In panel mode, let suggestions span the panel naturally. */
  body.wb-search-open .search-suggestions{left:0;right:0;}
}

/* Footer (_footer.php) */
.wb-chat { position: fixed; right: 22px; bottom: 22px; z-index: 9000; font-family: 'Inter', sans-serif; }
@media (max-width: 768px) { .wb-chat { display: none; } }
.wb-chat-fab {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent, #5B4EFA); color: #fff;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(91,78,250,.35), 0 2px 8px rgba(0,0,0,.12);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.wb-chat-fab:hover { transform: translateY(-2px) scale(1.04); background: var(--accent-h, #4338E8); box-shadow: 0 12px 32px rgba(91,78,250,.45); }
.wb-chat-fab svg { width: 24px; height: 24px; }
.wb-chat-fab.is-open { background: var(--text, #0A0A14); }
.wb-chat-fab .chat-close { display: none; }
.wb-chat-fab.is-open .chat-icon { display: none; }
.wb-chat-fab.is-open .chat-close { display: block; }

.wb-chat-panel {
  position: absolute; right: 0; bottom: 72px;
  width: 340px; max-width: calc(100vw - 44px);
  background: #fff; border: 1px solid var(--border, #E4E7EE);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(10,10,20,.18), 0 4px 12px rgba(10,10,20,.06);
  overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.wb-chat-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.wb-chat-head {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--accent, #5B4EFA) 0%, var(--accent-h, #4338E8) 100%);
  color: #fff;
}
.wb-chat-head h3 { font-size: 15px; font-weight: 800; margin: 0; letter-spacing: -.2px; }
.wb-chat-head p { font-size: 12px; color: rgba(255,255,255,.85); margin: 2px 0 0; line-height: 1.4; }
.wb-chat-body { padding: 14px 16px 16px; }
.wb-chat-body label { display: block; font-size: 11px; font-weight: 700; color: var(--muted, #6B7280); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; }
.wb-chat-body input,
.wb-chat-body textarea {
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 13.5px; color: var(--text, #0A0A14);
  background: var(--surface, #F7F8FF);
  border: 1.5px solid var(--border, #E4E7EE); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.wb-chat-body input:focus,
.wb-chat-body textarea:focus { outline: 0; border-color: var(--accent, #5B4EFA); box-shadow: 0 0 0 3px rgba(91,78,250,.12); background: #fff; }
.wb-chat-body textarea { resize: vertical; min-height: 92px; line-height: 1.5; }
.wb-chat-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.wb-chat-submit {
  width: 100%; padding: 10px 14px;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: #fff; background: var(--accent, #5B4EFA);
  border: 0; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .15s, transform .15s;
}
.wb-chat-submit:hover:not(:disabled) { background: var(--accent-h, #4338E8); transform: translateY(-1px); }
.wb-chat-submit:disabled { opacity: .55; cursor: progress; transform: none; }
.wb-chat-status {
  margin-top: 8px;
  font-size: 12px; line-height: 1.5; min-height: 1em;
}
.wb-chat-status.is-error   { color: #DC2626; }
.wb-chat-status.is-success { color: #16A34A; font-weight: 600; }
.wb-chat-foot {
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border, #E4E7EE);
  font-size: 11px; color: var(--soft, #9CA3AF); line-height: 1.5;
}

/* Footer (_footer.php) */
/* Same dimensions as .wb-chat-fab (56×56 + 24×24 icon) so the two FABs read
   as a matched pair when stacked. Bottom offset = chat-fab bottom (22px) +
   chat-fab height (56px) + 14px gap = 92px. */
.wb-share-x { position: fixed; right: 22px; bottom: 92px; z-index: 9000; width: 56px; height: 56px; border-radius: 50%; background: #000; color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s, background .15s; text-decoration: none; }
.wb-share-x.wb-show { display: inline-flex; }
.wb-share-x:hover { transform: translateY(-2px) scale(1.04); background: #1a1a1a; box-shadow: 0 12px 32px rgba(0,0,0,.35); color: #fff; }
.wb-share-x svg { width: 22px; height: 22px; display: block; }
/* Mobile: chat-fab is hidden, so the share-x slides down to the corner where
   the chat-fab would sit on desktop. */
@media (max-width: 768px) { .wb-share-x { right: 22px; bottom: 22px; } }