/* Simon Sahi floating intro video widget — v4
   Deep navy + site blue accent + gold trim on the card, matching the
   Ask Simon button family; the control trio borrows the reference
   site's round grey buttons. No external dependencies. Prefix: siw-
   v2: card sized to the Dunnion Law reference proportions Simon approved,
   greeting line at the top of the card, quick question chips at the
   bottom of the video (collapsed state only).
   v3: captions removed everywhere at Simon's direction. Four chips.
   v4: (Simon's direction, 2026-10-29) a trio of round grey buttons —
   play or pause, expand or shrink, close — floats above the top right
   of the card, like the reference. New resting form in the same spirit
   as hers but in Simon's own words: a small round bubble at the bottom
   right with the video still playing and a white pill at its left,
   "Hi, I'm Simon 👋 tap to watch", which reopens the card. Closing the
   card rests it into the mini form; the mini form's own small x is the
   full dismiss for the session. */

.siw-wrap {
  --siw-navy: #0a2540;
  --siw-navy-2: #0e2f52;
  --siw-blue: #1b9bd8;
  --siw-gold: #c9a24b;
  /* Distance from the bottom of the screen to the bottom of this widget.
     Must clear the Ask Simon chat button below it (chat button ~52px tall,
     sitting ~20px off the bottom) plus a clear gap. Tune on the live site
     if the chat button's position ever changes. */
  --siw-bottom: 92px;
  position: fixed;
  right: 16px;
  bottom: var(--siw-bottom);
  z-index: 99990; /* below modal layers, above page content */
  width: 250px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Extra headroom so the floating control trio (which sits above the
   card) never clips against the wrap's top edge. */
.siw-wrap { padding-top: 48px; margin-top: -48px; }

.siw-card {
  background: var(--siw-navy);
  border: 1px solid var(--siw-gold);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(4, 24, 43, 0.45);
}

.siw-video-box {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  cursor: pointer;
}

.siw-video-box video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Control trio (v4, the reference technique): round grey buttons in a
   row floating above the card's top right corner — play or pause,
   expand or shrink, close. They live on the wrap, outside the card, so
   the card's rounded overflow never clips them. */
.siw-controls {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  gap: 7px;
  z-index: 6;
}
.siw-ctl {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: rgba(133, 138, 144, 0.95);
  color: #fff;
  box-shadow: 0 3px 10px rgba(4, 24, 43, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.siw-ctl svg { width: 18px; height: 18px; flex: none; }
.siw-ctl:hover { background: rgba(105, 110, 116, 0.97); }
.siw-ctl:active { transform: scale(0.94); }

/* Greeting line (v2, the Dunnion technique): a small pill at the top of
   the card, over the video. The v3 close button that shared this corner
   is gone in v4 (the trio floats above the card), so the pill gets the
   full width. */
.siw-greeting {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  white-space: nowrap;
  overflow: hidden;
  background: rgba(10, 37, 64, 0.85);
  color: #fff;
  border: 1px solid rgba(201, 162, 75, 0.7);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
  z-index: 3;
}
/* Expanded state is a clean player: the greeting has done its job. */
.siw-wrap.siw-expanded .siw-greeting { display: none; }

/* Quick question chips (v2 technique): white translucent pills stacked
   at the bottom of the video, collapsed state only. Tapping one hands
   the question to the Ask Simon chat (see the JS). Four chips (v3). */
.siw-chips {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
}
.siw-wrap.siw-expanded .siw-chips { display: none; }

.siw-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--siw-navy);
  border: 1px solid rgba(10, 37, 64, 0.18);
  box-shadow: 0 2px 8px rgba(4, 24, 43, 0.25);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.siw-chip::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(10, 37, 64, 0.45);
}
.siw-chip:hover, .siw-chip:active {
  background: #fff;
  border-color: var(--siw-gold);
}

/* No caption styles: captions were removed at Simon's direction (v3). */

.siw-hint {
  position: absolute;
  left: 8px;
  top: 44px; /* below the greeting pill */
  white-space: nowrap;
  background: rgba(10, 37, 64, 0.85);
  color: #fff;
  border: 1px solid rgba(201, 162, 75, 0.7);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 3;
}

.siw-play {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 22, 38, 0.35);
  color: #fff;
  font-size: 40px;
  border: 0;
  cursor: pointer;
}
.siw-wrap.siw-manual .siw-play { display: flex; }
.siw-wrap.siw-manual .siw-hint { display: none; }

/* Call Simon button: always visible, collapsed and expanded */
.siw-call {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 8px 6px;
  background: linear-gradient(180deg, var(--siw-blue), #1283bd);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.siw-call:hover { filter: brightness(1.08); }
.siw-call .siw-call-num { font-weight: 600; font-size: 11.5px; opacity: 0.95; }
.siw-wrap.siw-expanded .siw-call { flex-direction: row; gap: 8px; padding: 10px 8px; }

/* Expanded player: never wider than 340px and never wider than 92% of the
   viewport, so on a 390px phone it sits fully on screen with margin. */
.siw-wrap.siw-expanded { width: min(340px, 92vw); }
.siw-wrap.siw-expanded .siw-hint { display: none; }

/* Resting form (v4): the card and its trio hide; a white clickable pill
   and a small round bubble with the video still playing take their
   place at the same bottom right corner. */
.siw-mini { display: none; }
.siw-wrap.siw-is-mini { width: auto; padding-top: 0; margin-top: 0; }
.siw-wrap.siw-is-mini .siw-card,
.siw-wrap.siw-is-mini .siw-controls { display: none; }
.siw-wrap.siw-is-mini .siw-mini {
  display: flex;
  align-items: center;
  gap: 9px;
}
.siw-pill {
  background: #fff;
  color: var(--siw-navy);
  border: 1px solid rgba(10, 37, 64, 0.12);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(4, 24, 43, 0.3);
  padding: 10px 15px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.siw-pill:hover, .siw-pill:active { background: #f4f7fa; }
.siw-bubble-box { position: relative; flex: none; }
.siw-bubble {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(4, 24, 43, 0.35);
  cursor: pointer;
  background: #000;
}
.siw-bubble video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  pointer-events: none;
}
.siw-mini-close {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 0;
  background: rgba(133, 138, 144, 0.97);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(4, 24, 43, 0.35);
  z-index: 2;
}

/* Mobile: card matches the Dunnion reference proportions Simon approved —
   about 58% of a 390px phone screen wide (225px), fully on screen. */
@media (max-width: 640px) {
  .siw-wrap { width: 225px; right: 12px; --siw-bottom: 88px; }
  .siw-greeting { font-size: 12.5px; padding: 5px 10px; }
  .siw-chip { font-size: 13px; min-height: 31px; }
  .siw-call { font-size: 13px; padding: 9px 6px; }
  .siw-call .siw-call-num { display: none; }
  .siw-hint .siw-hint-text { display: none; }
  .siw-hint { padding: 3px 6px; }
  .siw-ctl { width: 36px; height: 36px; }
  .siw-bubble { width: 60px; height: 60px; }
  .siw-pill { font-size: 13px; padding: 9px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .siw-card { box-shadow: 0 6px 18px rgba(4, 24, 43, 0.4); }
}