/**
 * Floating simulator widget — tab and drawer.
 * assets/css/widget.css
 *
 * Depends on assets/css/simulator.css for the component inside, and
 * redeclares the handful of tokens it needs itself so the tab and
 * drawer survive on a page where the theme's token file is absent.
 * Same reasoning as the preamble in simulator.css.
 *
 * The z-index tiers match the ProSocial theme's own scale exactly:
 * sticky 100 for the tab, modal 300 for the drawer and its backdrop,
 * which clears the site nav at 200.
 */

.psc-widget-tab,
.psc-widget-backdrop,
.psc-widget-drawer {
  --psc-w-action:       #C45C26;
  --psc-w-action-hover: #A84D1F;
  --psc-w-band:         #1B2A4A;
  --psc-w-white:        #FFFFFF;
  --psc-w-text:         #3B4759;
  --psc-w-muted:        #78879B;
  --psc-w-border:       rgba(19, 30, 54, 0.10);
  --psc-w-radius:       12px;
  --psc-w-shadow:       0 4px 16px rgba(19, 30, 54, 0.14), 0 2px 6px rgba(19, 30, 54, 0.08);
  --psc-w-ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --psc-w-font:         'Outfit', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  box-sizing: border-box;
}

.psc-widget-tab *,
.psc-widget-drawer * { box-sizing: border-box; }

/* ── Tab ──────────────────────────────────────────────────── */

.psc-widget-tab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 12px 20px;
  border: none;
  border-radius: 9999px;
  background: var(--psc-w-action);
  color: var(--psc-w-white);
  font-family: var(--psc-w-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--psc-w-shadow);
  transition: background 150ms var(--psc-w-ease),
              transform 150ms var(--psc-w-ease),
              opacity 200ms var(--psc-w-ease);
}

.psc-widget-tab:hover { background: var(--psc-w-action-hover); transform: translateY(-1px); }

.psc-widget-tab:focus-visible { outline: 2px solid var(--psc-w-band); outline-offset: 3px; }

.psc-widget-tab__icon { display: inline-flex; }

/* Hidden while the drawer is open — it would sit on top of the panel
   and there is already a close button inside. */
.psc-widget-tab.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* ── Backdrop ─────────────────────────────────────────────── */

.psc-widget-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 43, 60, 0.55);
  opacity: 0;
  transition: opacity 300ms var(--psc-w-ease);
}

.psc-widget-backdrop.is-open { opacity: 1; }

/* ── Drawer ───────────────────────────────────────────────── */

.psc-widget-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: 600px;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  background: var(--psc-w-white);
  box-shadow: -8px 0 40px rgba(19, 30, 54, 0.18);
  transform: translateX(100%);
  transition: transform 500ms var(--psc-w-ease);
}

.psc-widget-drawer.is-open { transform: translateX(0); }

.psc-widget-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--psc-w-border);
  background: var(--psc-w-white);
}

.psc-widget-drawer__title {
  margin: 0;
  font-family: var(--psc-w-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--psc-w-band);
}

.psc-widget-drawer__close {
  background: transparent;
  border: 0;
  padding: 0.25rem 0.5rem;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--psc-w-muted);
  cursor: pointer;
  border-radius: var(--psc-w-radius);
  transition: color 150ms var(--psc-w-ease), background 150ms var(--psc-w-ease);
}

.psc-widget-drawer__close:hover { color: var(--psc-w-band); background: rgba(19, 30, 54, 0.05); }

.psc-widget-drawer__close:focus-visible { outline: 2px solid var(--psc-w-action); outline-offset: 2px; }

.psc-widget-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── The simulator, inside a 600px panel ──────────────────── */

/* The component is built for a page: five rem of vertical section
   padding and a 1440px container. Both are wrong in a drawer. */
.psc-widget-drawer .intelligence-section {
  --section-pad-y: 0;
  padding: 0;
  background: transparent;
}

.psc-widget-drawer .intelligence-section .container {
  max-width: none;
  padding-inline: 0;
}

.psc-widget-drawer .sim-card {
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

/* Reveal on load, unconditionally.
 *
 * .sim-card carries .fade-in, which starts at opacity 0 and waits for
 * simulator.js's IntersectionObserver to add .visible. Inside a closed
 * drawer that observer never fires — the element is off-screen behind a
 * transform — so without this the drawer would open onto a blank white
 * panel. The animation is a page-scroll effect and means nothing here
 * anyway.
 */
.psc-widget-drawer .intelligence-section .fade-in {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── Motion and small screens ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .psc-widget-tab,
  .psc-widget-backdrop,
  .psc-widget-drawer { transition: none; }
}

@media (max-width: 640px) {
  .psc-widget-drawer { width: 100vw; }

  .psc-widget-tab {
    right: 16px;
    bottom: 16px;
    padding: 11px 16px;
    font-size: 0.875rem;
  }
}

/* Very narrow phones: the label is the first thing to go, not the
   button. An unlabelled pill still reads as "open something". */
@media (max-width: 380px) {
  .psc-widget-tab__label { display: none; }
  .psc-widget-tab { padding: 12px; }
}

body.psc-widget-open { overflow: hidden; }