/* One geometry and motion model for every contextual segmented control. */

#bxw-root {
  --bxw-segment-panel-height: 46px;
  --bxw-segment-panel-radius: 23px;
  --bxw-segment-panel-padding: 3px;
  --bxw-segment-option-height: 38px;
  --bxw-segment-option-radius: 19px;
  --bxw-segment-indicator-inset: 0px;
  --bxw-segment-indicator-radius: 19px;
  --bxw-segment-gap: 6px;
  --bxw-segment-label-size: 13px;
  --bxw-segment-icon-size: 20px;
  --bxw-segment-option-gap: 7px;
  --bxw-segment-option-pad: 9px;
  --bxw-segment-muted: rgba(31, 32, 39, .66);
  --bxw-segment-accent: #e86a00;
  --bxw-segment-indicator: rgba(255, 237, 213, .78);
  --bxw-segment-indicator-border: rgba(232, 106, 0, .18);
  --bxw-segment-indicator-shadow: rgba(232, 106, 0, .10);
}

#bxw-root :is(#bxw-conversation-switch, #bxw-meet-toggle, #bxw-second-mode-toggle, #bxw-search-mode-toggle).bxw-panel-toggle {
  height: var(--bxw-segment-panel-height) !important;
  min-height: var(--bxw-segment-panel-height) !important;
  padding: var(--bxw-segment-panel-padding) !important;
  border: 1px solid transparent !important;
  border-radius: var(--bxw-segment-panel-radius) !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) > .toggle-container {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--bxw-segment-option-height) !important;
  min-height: var(--bxw-segment-option-height) !important;
  padding: 0 !important;
  gap: var(--bxw-segment-gap) !important;
  border: 0 !important;
  border-radius: var(--bxw-segment-option-radius) !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#bxw-root #bxw-second-mode-toggle > .toggle-container[data-option-layout] {
  grid-template-columns: repeat(var(--bxw-second-option-count, 2), minmax(0, 1fr)) !important;
}

#bxw-root #bxw-meet-toggle.bxw-panel-toggle {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--bxw-segment-gap) !important;
  align-items: stretch !important;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

#bxw-root #bxw-meet-toggle [data-meet-mode="history"] {
  display: none !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-option,
#bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn {
  position: relative;
  z-index: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--bxw-segment-option-height) !important;
  min-height: var(--bxw-segment-option-height) !important;
  padding: 0 var(--bxw-segment-option-pad) !important;
  gap: var(--bxw-segment-option-gap) !important;
  border: 0 !important;
  border-radius: var(--bxw-segment-option-radius) !important;
  background: transparent !important;
  color: var(--bxw-segment-muted) !important;
  font-family: inherit !important;
  font-size: var(--bxw-segment-label-size) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-align: center;
  box-sizing: border-box !important;
  scale: 1;
  transform: none !important;
  transition-property: color, opacity, scale !important;
  transition-duration: 160ms !important;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important;
  -webkit-tap-highlight-color: transparent;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-option > span,
#bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn > span {
  min-width: 0;
  max-width: 100%;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
  text-wrap: balance;
}

#bxw-root #bxw-second-mode-toggle .toggle-container .toggle-option > span,
#bxw-root #bxw-search-mode-toggle .toggle-container .toggle-option > span {
  white-space: normal !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .bxw-conversation-toggle-icon,
#bxw-root #bxw-meet-toggle .bxw-meet-toggle-icon {
  width: var(--bxw-segment-icon-size) !important;
  height: var(--bxw-segment-icon-size) !important;
  flex: 0 0 var(--bxw-segment-icon-size) !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-option:active,
#bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn:active {
  scale: .96;
  transform: none !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-option:focus-visible,
#bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn:focus-visible {
  outline: 2px solid rgba(var(--bxw-user-accent-main-rgb, 242, 118, 0), .62) !important;
  outline-offset: -2px !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-slider,
#bxw-root #bxw-meet-toggle .bxw-meet-toggle-slider {
  position: absolute !important;
  z-index: 1 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  width: var(--bxw-segment-w, 0px) !important;
  height: var(--bxw-segment-h, calc(var(--bxw-segment-option-height) - (var(--bxw-segment-indicator-inset) * 2))) !important;
  margin: 0 !important;
  border: 1px solid var(--bxw-segment-indicator-border) !important;
  border-radius: var(--bxw-segment-indicator-radius) !important;
  background: var(--bxw-segment-indicator) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56), 0 8px 18px var(--bxw-segment-indicator-shadow) !important;
  box-sizing: border-box !important;
  opacity: 0 !important;
  pointer-events: none !important;
  translate: 0 0 !important;
  rotate: 0deg !important;
  scale: 1 !important;
  transform: translate3d(
    var(--bxw-segment-x, 0px),
    var(--bxw-segment-y, var(--bxw-segment-indicator-inset)),
    0
  ) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition-property: transform, opacity, background-color, border-color, box-shadow !important;
  transition-duration: 240ms, 140ms, 180ms, 180ms, 180ms !important;
  transition-timing-function:
    cubic-bezier(.23, 1, .32, 1),
    cubic-bezier(.23, 1, .32, 1),
    cubic-bezier(.77, 0, .175, 1),
    cubic-bezier(.77, 0, .175, 1),
    cubic-bezier(.77, 0, .175, 1) !important;
}

#bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-container[data-bxw-segmented-ready="true"] .toggle-slider,
#bxw-root #bxw-meet-toggle[data-bxw-segmented-ready="true"] .bxw-meet-toggle-slider {
  opacity: 1 !important;
}

#bxw-root .bxw-panel-dragging :is(.toggle-slider, .bxw-meet-toggle-slider) {
  transition-duration: 0ms !important;
  will-change: transform;
}

#bxw-root .bxw-panel-dragging :is(.toggle-option, .bxw-meet-toggle-btn):active {
  scale: 1;
}

#bxw-root [data-bxw-segmented-measuring="true"] :is(.toggle-slider, .bxw-meet-toggle-slider),
#bxw-root #bxw-meet-toggle[data-bxw-segmented-measuring="true"] .bxw-meet-toggle-slider {
  transition: none !important;
}

/* Orange conversation family. */
#bxw-root #bxw-conversation-switch,
#bxw-root #bxw-meet-toggle:has(:is([data-meet-mode="summary"], [data-meet-mode="library"]).is-active) {
  --bxw-segment-accent: #e86a00;
  --bxw-segment-indicator: rgba(255, 237, 213, .78);
  --bxw-segment-indicator-border: rgba(232, 106, 0, .18);
  --bxw-segment-indicator-shadow: rgba(232, 106, 0, .10);
}

#bxw-root #bxw-conversation-switch .toggle-option.active,
#bxw-root #bxw-meet-toggle :is([data-meet-mode="summary"], [data-meet-mode="library"]).is-active {
  color: #e86a00 !important;
}

/* The history state stays neutral but uses the same material and dimensions. */
#bxw-root #bxw-meet-toggle:has([data-meet-mode="history"].is-active) {
  --bxw-segment-accent: #5f6067;
  --bxw-segment-indicator: rgba(229, 229, 234, .78);
  --bxw-segment-indicator-border: rgba(95, 96, 103, .16);
  --bxw-segment-indicator-shadow: rgba(31, 32, 39, .08);
}

#bxw-root #bxw-meet-toggle [data-meet-mode="history"].is-active {
  color: #5f6067 !important;
}

/* Blue Bible family. */
#bxw-root #bxw-second-mode-toggle[data-active-second-mode="daily"],
#bxw-root #bxw-second-mode-toggle[data-active-second-mode="source"],
#bxw-root #bxw-search-mode-toggle[data-active-search-mode="bible"] {
  --bxw-segment-accent: #1d4ed8;
  --bxw-segment-indicator: rgba(219, 234, 254, .42);
  --bxw-segment-indicator-border: rgba(29, 78, 216, .24);
  --bxw-segment-indicator-shadow: rgba(29, 78, 216, .14);
}

#bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider {
  overflow: hidden !important;
  background: rgba(219, 234, 254, .24) !important;
  border-color: rgba(147, 197, 253, .58) !important;
  -webkit-backdrop-filter: blur(22px) saturate(185%) brightness(1.04) !important;
  backdrop-filter: blur(22px) saturate(185%) brightness(1.04) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 1px 0 0 rgba(255, 255, 255, .64),
    inset 0 -1px 0 rgba(29, 78, 216, .12),
    inset -1px 0 0 rgba(29, 78, 216, .06),
    0 1px 1px rgba(255, 255, 255, .74),
    0 10px 22px rgba(29, 78, 216, .13) !important;
}

#bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider.bxw-liquid-glass-surface {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider.bxw-liquid-glass-surface > .bxw-liquid-glass-component-root {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: inherit !important;
}

#bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider.bxw-liquid-glass-surface .bxw-liquid-glass-material-proxy {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: rgba(219, 234, 254, .48) !important;
  -webkit-backdrop-filter: blur(24px) saturate(185%) brightness(1.04) !important;
  backdrop-filter: blur(24px) saturate(185%) brightness(1.04) !important;
  box-shadow:
    0 7px 18px rgba(29, 78, 216, .14),
    inset 0 0 0 .75px rgba(96, 165, 250, .46),
    inset 0 1px 0 rgba(255, 255, 255, .92),
    inset 1px 0 0 rgba(255, 255, 255, .44),
    inset 0 -1px 0 rgba(29, 78, 216, .10) !important;
}

#bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider::before {
  content: '';
  position: absolute;
  inset: 1px 5px auto;
  height: 42%;
  border-radius: inherit;
  background: rgba(255, 255, 255, .48);
  filter: blur(5px);
  opacity: .76;
  pointer-events: none;
}

#bxw-root #bxw-second-mode-toggle :is([data-second-mode="daily"], [data-second-mode="source"]).active,
#bxw-root #bxw-search-mode-toggle [data-search-mode="bible"].active {
  color: #1d4ed8 !important;
}

/* Green second-part state. */
#bxw-root #bxw-second-mode-toggle[data-active-second-mode="second"] {
  --bxw-segment-accent: #15803d;
  --bxw-segment-indicator: rgba(220, 252, 231, .72);
  --bxw-segment-indicator-border: rgba(21, 128, 61, .18);
  --bxw-segment-indicator-shadow: rgba(21, 128, 61, .10);
}

#bxw-root #bxw-second-mode-toggle [data-second-mode="second"].active {
  color: #15803d !important;
}

/* Orange Psalms state. */
#bxw-root #bxw-search-mode-toggle[data-active-search-mode="psalms"] {
  --bxw-segment-accent: #d85d0a;
  --bxw-segment-indicator: rgba(255, 237, 213, .78);
  --bxw-segment-indicator-border: rgba(216, 93, 10, .18);
  --bxw-segment-indicator-shadow: rgba(216, 93, 10, .10);
}

#bxw-root #bxw-search-mode-toggle [data-search-mode="psalms"].active {
  color: #d85d0a !important;
}

#bxw-root #bxw-second-mode-toggle .bxw-second-option-enter {
  opacity: 0;
  translate: 0 3px;
  transition-property: color, opacity, translate !important;
  transition-duration: 160ms, 180ms, 180ms !important;
  transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important;
}

#bxw-root #bxw-second-mode-toggle .bxw-second-option-enter.bxw-second-option-entered {
  opacity: 1;
  translate: 0 0;
}

:is(html.dark-theme, body.dark-theme) #bxw-root {
  --bxw-segment-muted: rgba(245, 245, 247, .64);
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-conversation-switch,
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-meet-toggle:has(:is([data-meet-mode="summary"], [data-meet-mode="library"]).is-active),
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-search-mode-toggle[data-active-search-mode="psalms"] {
  --bxw-segment-indicator: rgba(154, 52, 18, .36);
  --bxw-segment-indicator-border: rgba(254, 215, 170, .16);
  --bxw-segment-indicator-shadow: rgba(0, 0, 0, .18);
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-conversation-switch .toggle-option.active,
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-meet-toggle :is([data-meet-mode="summary"], [data-meet-mode="library"]).is-active,
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-search-mode-toggle [data-search-mode="psalms"].active {
  color: #fed7aa !important;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-meet-toggle:has([data-meet-mode="history"].is-active) {
  --bxw-segment-indicator: rgba(118, 118, 128, .34);
  --bxw-segment-indicator-border: rgba(255, 255, 255, .14);
  --bxw-segment-indicator-shadow: rgba(0, 0, 0, .18);
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-meet-toggle [data-meet-mode="history"].is-active {
  color: #f5f5f7 !important;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle[data-active-second-mode="daily"],
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle[data-active-second-mode="source"],
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-search-mode-toggle[data-active-search-mode="bible"] {
  --bxw-segment-indicator: rgba(30, 64, 175, .30);
  --bxw-segment-indicator-border: rgba(191, 219, 254, .24);
  --bxw-segment-indicator-shadow: rgba(0, 0, 0, .18);
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider {
  background: rgba(30, 64, 175, .22) !important;
  border-color: rgba(191, 219, 254, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 1px 0 0 rgba(191, 219, 254, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    inset -1px 0 0 rgba(0, 0, 0, .12),
    0 10px 22px rgba(0, 0, 0, .22) !important;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider.bxw-liquid-glass-surface .bxw-liquid-glass-material-proxy {
  background: rgba(30, 64, 175, .38) !important;
  box-shadow:
    0 7px 18px rgba(0, 0, 0, .24),
    inset 0 0 0 .75px rgba(191, 219, 254, .30),
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 1px 0 0 rgba(191, 219, 254, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .18) !important;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle:is(
  [data-active-second-mode="daily"],
  [data-active-second-mode="source"]
) .toggle-slider::before {
  background: rgba(219, 234, 254, .18);
  opacity: .62;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle :is([data-second-mode="daily"], [data-second-mode="source"]).active,
:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-search-mode-toggle [data-search-mode="bible"].active {
  color: #bfdbfe !important;
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle[data-active-second-mode="second"] {
  --bxw-segment-indicator: rgba(22, 101, 52, .34);
  --bxw-segment-indicator-border: rgba(187, 247, 208, .16);
  --bxw-segment-indicator-shadow: rgba(0, 0, 0, .18);
}

:is(html.dark-theme, body.dark-theme) #bxw-root #bxw-second-mode-toggle [data-second-mode="second"].active {
  color: #bbf7d0 !important;
}

@media (max-width: 430px) {
  #bxw-root {
    --bxw-segment-label-size: 12px;
    --bxw-segment-icon-size: 18px;
    --bxw-segment-option-gap: 5px;
    --bxw-segment-option-pad: 7px;
  }

  #bxw-root #bxw-second-mode-toggle .toggle-container[data-option-layout="daily-source-second"] .toggle-option {
    padding: 0 var(--bxw-segment-option-pad) !important;
    gap: var(--bxw-segment-option-gap) !important;
    font-size: var(--bxw-segment-label-size) !important;
  }

  #bxw-root #bxw-second-mode-toggle .toggle-container[data-option-layout="daily-source-second"] .bxw-conversation-toggle-icon {
    width: var(--bxw-segment-icon-size) !important;
    height: var(--bxw-segment-icon-size) !important;
  }
}

@media (max-width: 340px) {
  #bxw-root {
    --bxw-segment-option-gap: 0px;
  }

  #bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .bxw-conversation-toggle-icon,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-icon {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-option,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-btn {
    scale: 1 !important;
    transition-duration: 100ms !important;
  }

  #bxw-root #bxw-second-mode-toggle .bxw-second-option-enter {
    translate: 0 0;
  }

  #bxw-root :is(#bxw-conversation-switch, #bxw-second-mode-toggle, #bxw-search-mode-toggle) .toggle-slider,
  #bxw-root #bxw-meet-toggle .bxw-meet-toggle-slider {
    transition-property: opacity, background-color, border-color, box-shadow !important;
    transition-duration: 100ms !important;
  }

  #bxw-root .bxw-panel-dragging :is(.toggle-slider, .bxw-meet-toggle-slider) {
    transition-duration: 0ms !important;
  }
}