/*
 * BookVault Reader Assistant - authoritative control rail.
 *
 * All Reader Assistant controls use this single layout path. Earlier component
 * styles remain responsible for colour and interaction states; this file owns
 * rail geometry, responsive arrangement and shared tooltips.
 */

html body #bvSideAssist #bvSideAssistControlRail {
  --bv-side-control-size: 48px;
  --bv-side-control-gap: 10px;

  position: absolute !important;
  top: 24px !important;
  right: auto !important;
  bottom: auto !important;
  left: -68px !important;
  z-index: 105 !important;

  width: var(--bv-side-control-size) !important;
  min-width: var(--bv-side-control-size) !important;
  max-width: var(--bv-side-control-size) !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--bv-side-control-gap) !important;

  overflow: visible !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

html body #bvSideAssist #bvSideAssistControlRail > .bv-side-assist__switcher,
html body #bvSideAssist #bvSideAssistControlRail > .bv-side-assist__rail-settings,
html body #bvSideAssist #bvSideAssistControlRail > .bv-side-assist__utility-rail {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;

  width: var(--bv-side-control-size) !important;
  min-width: var(--bv-side-control-size) !important;
  max-width: var(--bv-side-control-size) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: var(--bv-side-control-gap) !important;

  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto !important;
}

html body #bvSideAssist #bvSideAssistControlRail .bv-side-assist__tab,
html body #bvSideAssist #bvSideAssistControlRail #bvAISettingsToggle,
html body #bvSideAssist #bvSideAssistControlRail .bv-side-assist__utility-button {
  position: relative !important;
  flex: 0 0 var(--bv-side-control-size) !important;

  width: var(--bv-side-control-size) !important;
  min-width: var(--bv-side-control-size) !important;
  max-width: var(--bv-side-control-size) !important;
  height: var(--bv-side-control-size) !important;
  min-height: var(--bv-side-control-size) !important;
  max-height: var(--bv-side-control-size) !important;
  margin: 0 !important;

  overflow: visible !important;
}

/* One tooltip system for every button in the universal rail. */
html body #bvSideAssist #bvSideAssistControlRail [data-bv-tooltip]::after {
  content: attr(data-bv-tooltip) !important;
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 12px) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2000 !important;

  width: max-content !important;
  max-width: min(240px, calc(100vw - 110px)) !important;
  min-height: 0 !important;
  padding: 7px 10px !important;

  visibility: hidden !important;
  opacity: 0 !important;
  color: #ffffff !important;
  background: var(--bv-assist-ink, #0f172a) !important;
  border: 2px solid var(--bv-assist-ink, #0f172a) !important;
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 rgba(15, 23, 42, .24) !important;

  font-family: var(--bv-font-label, "Courier Prime", monospace) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: normal !important;

  pointer-events: none !important;
  transform: translateY(-50%) translateX(4px) !important;
  transition:
    opacity 100ms ease,
    transform 100ms ease,
    visibility 100ms ease !important;
}

html body #bvSideAssist #bvSideAssistControlRail [data-bv-tooltip]:hover::after,
html body #bvSideAssist #bvSideAssistControlRail [data-bv-tooltip]:focus-visible::after {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* Preserve one column on short desktop windows by scaling the entire system. */
@media (min-width: 761px) and (max-height: 620px) {
  html body #bvSideAssist #bvSideAssistControlRail {
    --bv-side-control-size: 40px;
    --bv-side-control-gap: 6px;
    top: 16px !important;
    left: -60px !important;
  }

  html body #bvSideAssist #bvSideAssistControlRail .bv-side-assist__tab,
  html body #bvSideAssist #bvSideAssistControlRail #bvAISettingsToggle,
  html body #bvSideAssist #bvSideAssistControlRail .bv-side-assist__utility-button {
    border-width: 3px !important;
    border-radius: 6px !important;
  }
}

/*
 * Mobile and tablet portrait share the same authority: one horizontal,
 * keyboard-accessible, scrollable control row that leaves room for Close.
 */
@media (max-width: 760px) {
  html body #bvSideAssist #bvSideAssistControlRail {
    --bv-side-control-size: 42px;
    --bv-side-control-gap: 8px;

    top: 12px !important;
    right: 68px !important;
    bottom: auto !important;
    left: 12px !important;
    z-index: 105 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: var(--bv-side-control-size) !important;
    max-height: var(--bv-side-control-size) !important;

    flex-direction: row !important;
    align-items: center !important;
    gap: var(--bv-side-control-gap) !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
  }

  html body #bvSideAssist #bvSideAssistControlRail::-webkit-scrollbar {
    display: none !important;
  }

  html body #bvSideAssist #bvSideAssistControlRail > .bv-side-assist__switcher,
  html body #bvSideAssist #bvSideAssistControlRail > .bv-side-assist__rail-settings,
  html body #bvSideAssist #bvSideAssistControlRail > .bv-side-assist__utility-rail {
    display: contents !important;
  }

  html body #bvSideAssist #bvSideAssistControlRail .bv-side-assist__tab,
  html body #bvSideAssist #bvSideAssistControlRail #bvAISettingsToggle,
  html body #bvSideAssist #bvSideAssistControlRail .bv-side-assist__utility-button {
    flex: 0 0 var(--bv-side-control-size) !important;
    border-width: 3px !important;
    border-radius: 6px !important;
  }

  html body #bvSideAssist #bvSideAssistControlRail [data-bv-tooltip]::after {
    display: none !important;
  }

  html body #bvSideAssist #bvAIChat {
    margin-top: 66px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #bvSideAssist #bvSideAssistControlRail [data-bv-tooltip]::after {
    transition: none !important;
  }
}