/* Make the CTA bar relative so the desktop button pins directly to its upper-left */
.ced-ctabar {
  position: relative !important;
}

/* Base style for header and mobile assistant buttons */
#ask-dr-caplan-top-btn,
a#ask-dr-caplan-top-btn.ced-topbar-cta,
#ask-dr-caplan-mobile-btn,
a#ask-dr-caplan-mobile-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-tap-highlight-color: rgba(56,189,248,0.3) !important;
}

#ask-dr-caplan-top-btn:hover,
a#ask-dr-caplan-top-btn.ced-topbar-cta:hover,
#ask-dr-caplan-mobile-btn:hover,
a#ask-dr-caplan-mobile-btn:hover {
  transform: translateY(-2px) scale(1.04) !important;
}

/* Mid-Page Circular Button Styling (100% Larger, Moved Down 25%) */
#ask-dr-caplan-midpage-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ask-dr-caplan-midpage-btn:hover {
  transform: translateY(-4px) scale(1.05) !important;
}

#ask-dr-caplan-midpage-btn:hover .ask-caplan-midpage-img {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 36px rgba(56,189,248,0.85), 0 12px 32px rgba(0,0,0,0.3) !important;
}

/* Footer Button Styling (Black Button with 100% Larger Square Logo on Left & Light Blue Glow) */
#ask-dr-caplan-footer-btn {
  display: block !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  pointer-events: auto !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 92px !important;
  position: relative !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

#ask-dr-caplan-footer-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 32px rgba(56, 189, 248, 0.8), 0 6px 20px rgba(0, 0, 0, 0.55) !important;
}

/* Living Counter Floating Badge */
.ask-caplan-living-badge {
  position: absolute !important;
  top: -6px !important;
  right: -8px !important;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  padding: 2.5px 8px !important;
  border-radius: 12px !important;
  border: 1.5px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  letter-spacing: -0.2px !important;
  pointer-events: none !important;
  z-index: 10 !important;
  line-height: 1.2 !important;
}

/* Desktop layout (Screen > 900px) - Lower Down 15% */
@media (min-width: 901px) {
  #ask-dr-caplan-top-btn,
  a#ask-dr-caplan-top-btn,
  a#ask-dr-caplan-top-btn.ced-topbar-cta {
    position: absolute !important;
    left: 28px !important;
    top: 58% !important;
    transform: translateY(-40%) !important;
    z-index: 999999 !important;
    display: inline-flex !important;
  }
  #ask-dr-caplan-top-btn:hover,
  a#ask-dr-caplan-top-btn.ced-topbar-cta:hover {
    transform: translateY(calc(-40% - 2px)) scale(1.04) !important;
  }
  #ask-dr-caplan-mobile-btn,
  a#ask-dr-caplan-mobile-btn {
    display: none !important;
  }
}

/* Mobile layout (Screen <= 900px) */
@media (max-width: 900px) {
  #ask-dr-caplan-top-btn,
  a#ask-dr-caplan-top-btn,
  a#ask-dr-caplan-top-btn.ced-topbar-cta {
    display: none !important;
    visibility: hidden !important;
  }
  #ask-dr-caplan-mobile-btn,
  a#ask-dr-caplan-mobile-btn {
    display: inline-flex !important;
    margin: 16px auto 12px auto !important;
    max-width: fit-content !important;
    z-index: 999999 !important;
  }
  .logo-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* ═══ DRAWER VISIBILITY GUARD - DO NOT REMOVE ═══════════════════
   WHERE THE HOSTILE RULE COMES FROM, so the next person edits the source
   instead of fighting its output:

     Appearance > Customize > Additional CSS
     stored as the `custom_css` post for theme `blogsy-news-standalone`
     (post id 57021 on this install), around line 7821, under the heading
     "PERMANENTLY CLOSE RIGHT-SIDED FLOATING RAIL MENU DOCK".

   Blogsy compiles that field into /wp-content/uploads/blogsy/dynamic-styles.css,
   which is REGENERATED every time anyone saves the Customizer. Editing the
   generated file achieves nothing; edit the Customizer field.

   CURRENT STATUS, measured 2026-09-18. That rule is INERT against this
   widget. Its selector list is .ced-drawer-right, .ask-caplan-rail,
   .ced-floating-rail, #ced-ask-drawer, #ced-sidebar-drawer and
   .ced-drawer-container, none of which match #ask-caplan-drawer. On
   2026-09-14 the three selectors that did match (#ask-caplan-drawer,
   .ask-caplan-drawer and div#ask-caplan-drawer) were removed from that list,
   and the Customizer field carries a comment saying so. The remaining six
   target the old floating rail, which is meant to stay hidden.

   So the block below is belt and braces, not load bearing against that rule
   today. Keep it anyway: the generated file comes back on every Customizer
   save, and whoever re-adds a drawer selector will not read this first.
   tests/test_widget_end_to_end.py asserts the inertness on every run
   (check_legacy_kill_rule_inert), so a regression is caught rather than
   rediscovered.

   The rules below out-specify it regardless: "html body #ask-caplan-drawer"
   scores (1,0,2) against the theme rule's (1,0,0).

   Sliding is done with transform, not "right", so an off-screen drawer can
   never add a horizontal scrollbar to the page.
   ═════════════════════════════════════════════════════════════════ */
html body #ask-caplan-drawer,
html body div#ask-caplan-drawer {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: 500px !important;
  max-width: 94vw !important;
  height: 100vh !important;
  overflow: visible !important;
  z-index: 2147483647 !important;
  will-change: transform !important;
  transform: translateX(calc(100% + 48px)) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

html body #ask-caplan-drawer.caplan-drawer-open,
html body div#ask-caplan-drawer.caplan-drawer-open {
  transform: translateX(0) !important;
}

/* A closed drawer must never intercept clicks meant for the page. */
html body #ask-caplan-drawer:not(.caplan-drawer-open) {
  pointer-events: none !important;
}
html body #ask-caplan-drawer.caplan-drawer-open {
  pointer-events: auto !important;
}

/* Keep the drawer header clear of the WordPress admin bar when signed in. */
html body.admin-bar #ask-caplan-drawer {
  top: 32px !important;
  height: calc(100vh - 32px) !important;
}
@media screen and (max-width: 782px) {
  html body.admin-bar #ask-caplan-drawer {
    top: 46px !important;
    height: calc(100vh - 46px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #ask-caplan-drawer { transition: none !important; }
}

/* ═══ DRAWER CHIP LEGIBILITY ═════════════════════════════════════
   Two site-wide rules reach into the drawer and repaint the red
   outline chips (the "Suggested Clinical Topics" pills and the
   follow-up buttons under each answer):

     style.min.css            button:hover { color: #fff }
     ced-contrast-fix-styles  .ced-topic-group-box * { color:#f8fafc !important }

   The second already wins at rest, which is why the resting colour
   was #1a1a1a rather than the intended #991b1b. On hover the first
   turns the label white on a white pill and it disappears entirely.

   Inline styles cannot express :hover, so this has to be a real rule,
   and it needs !important at higher specificity to outrank the
   contrast fix. Scoped so buttons that legitimately carry white text
   (the send arrow, the close X, the solid digest buttons) are left
   alone. Added 2026-09-14.
   ═══════════════════════════════════════════════════════════════ */
html body #caplan-starter-pills button,
html body #caplan-starter-pills button:hover,
html body #caplan-starter-pills button:focus,
html body #caplan-starter-pills button:active,
html body #caplan-messages button[style*="#ef4444"],
html body #caplan-messages button[style*="#ef4444"]:hover,
html body #caplan-messages button[style*="#ef4444"]:focus,
html body #caplan-messages button[style*="#ef4444"]:active {
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1.5px solid #ef4444 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

html body #caplan-starter-pills button *,
html body #caplan-messages button[style*="#ef4444"] * {
  color: #991b1b !important;
  -webkit-text-fill-color: #991b1b !important;
}

html body #caplan-starter-pills button:hover,
html body #caplan-messages button[style*="#ef4444"]:hover {
  background: #fef2f2 !important;
  background-color: #fef2f2 !important;
  border-color: #dc2626 !important;
}