/*
 * Project report workspace, query bar, AI chat rail, breakdown tables, and Bullet Train form bridges.
 * Served as a plain file after bento-ui.css (themes/light/layouts/_product_head), so it needs no
 * Tailwind build and wins the cascade over equal-specificity design-system rules.
 */

/* Project report workspace. Account pages only: tokens load with the product layout.
   Breakpoints: phones below 640px, the chat rail from 1024px (a full-height sheet below). */
/* The workspace fills the viewport exactly, so it cannot rely on the Tailwind build's preflight body reset. */
body.ui-root:has(.project-report-shell) {
  margin: 0;
}

.ui-root .project-report-shell {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ui-root .project-report-shell .report-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ui-root .project-report-shell,
.ui-root .project-report-shell * {
  scrollbar-width: thin;
  scrollbar-color: var(--bento-border-strong) transparent;
}

.ui-root .project-report-shell ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.ui-root .project-report-shell ::-webkit-scrollbar-track {
  background: transparent;
}

.ui-root .project-report-shell ::-webkit-scrollbar-thumb {
  background: var(--bento-border-strong);
  border-radius: var(--bento-radius-full);
  border: 2px solid var(--bento-bg);
}

@media (max-width: 639px) {
  .ui-root .report-scroll > .ui-page-header {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }

  .ui-root .report-scroll > .ui-page-header .ui-page-title {
    overflow-wrap: anywhere;
  }
}

/* Horizontal scrollers (quick ranges, breakdown tabs) fade at the edge that has more content. */
.ui-root [data-scroll-fade~="end"] {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}

.ui-root [data-scroll-fade~="start"] {
  -webkit-mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
}

.ui-root [data-scroll-fade~="start"][data-scroll-fade~="end"] {
  -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}

/* Loading popover: top right of the report column, clear of the chat toggle and the site chat bubble. */
.ui-root .report-loading-popover {
  top: 16px;
  right: 16px;
}

.ui-root .project-report-shell .report-loading-popover {
  top: 56px;
}

@media (min-width: 1024px) {
  html:not([data-report-ai="hidden"]) .ui-root .project-report-shell:has(.report-ai-rail) .report-loading-popover {
    right: calc(20rem + 16px);
  }
}

@media (min-width: 1280px) {
  html:not([data-report-ai="hidden"]) .ui-root .project-report-shell:has(.report-ai-rail) .report-loading-popover {
    right: calc(24rem + 16px);
  }
}

/* AI chat: a rail beside the report from 1024px, a full-height sheet below. The rail never scrolls with the
   report; only its message list scrolls, and the composer stays pinned to the bottom. */
.ui-root .report-ai-rail {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: none;
  height: 100vh;
  height: var(--report-ai-sheet-height, 100dvh);
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  background-color: var(--bento-bg-subtle);
  color: var(--bento-fg);
}

.ui-root .report-ai-rail[data-open] {
  display: flex;
}

/* Chat parts (header, thread, tool cards, composer) are in product/chat.css. */
.ui-root .report-ai-toggle {
  position: fixed;
  left: calc(16px + env(safe-area-inset-left, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  min-height: 44px;
  box-shadow: var(--bento-shadow-md);
}

.ui-root:has(.report-ai-rail[data-open]) .report-ai-toggle {
  display: none;
}

.ui-root:has(.report-ai-rail[data-open]) .report-scroll {
  overflow: hidden;
}

.ui-root:has(.report-ai-rail[data-open]) .woot--bubble-holder,
.ui-root:has(.report-ai-rail[data-open]) .woot-widget-bubble {
  display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ui-root .report-ai-toggle {
    left: calc(240px + 16px);
  }

  html[data-sidebar="collapsed"] .ui-root .report-ai-toggle {
    left: calc(48px + 16px);
  }
}

@media (min-width: 1024px) {
  .ui-root .report-ai-rail,
  .ui-root .report-ai-rail[data-open] {
    position: static;
    z-index: auto;
    display: flex;
    width: 20rem;
    height: auto;
    flex-shrink: 0;
    align-self: stretch;
    padding: 0;
    border-left: 1px solid var(--bento-border);
  }

  .ui-root .report-ai-toggle {
    display: none;
  }

  /* Hidden from the chat header, the rail gives the report the full width until Ask AI in the page header brings it back. */
  html[data-report-ai="hidden"] .ui-root .report-ai-rail,
  html[data-report-ai="hidden"] .ui-root .report-ai-rail[data-open] {
    display: none;
  }

  html[data-report-ai="hidden"] .ui-root .report-ai-show {
    display: inline-flex;
  }

  /* While the rail is open, the floating Bento Chat support bubble would sit on top of the report.
     Support stays one click away in the user menu (Contact support). */
  html:not([data-report-ai="hidden"]) .ui-root:has(.report-ai-rail) .woot--bubble-holder,
  html:not([data-report-ai="hidden"]) .ui-root:has(.report-ai-rail) .woot-widget-bubble {
    display: none !important;
  }

  html:not([data-report-ai="hidden"]) .ui-root:has(.report-ai-rail) .woot-widget-holder.woot-elements--right {
    right: calc(20rem + 20px);
  }
}

/* Below 1024px the floating Ask AI button opens the chat sheet, and the rail's hide control does not apply. */
.ui-root .report-ai-show {
  display: none;
}

@media (max-width: 1023px) {
  .ui-root .report-ai-hide {
    display: none;
  }
}

.ui-root .report-ai-hide-icon {
  transform: scaleX(-1);
}

@media (min-width: 1280px) {
  .ui-root .report-ai-rail,
  .ui-root .report-ai-rail[data-open] {
    width: 24rem;
  }

  html:not([data-report-ai="hidden"]) .ui-root:has(.report-ai-rail) .woot-widget-holder.woot-elements--right {
    right: calc(24rem + 20px);
  }
}

/* Gem forms still emit class="button". Match the account styled_button recipe. */
:where(.ui-root) .button {
  background-color: var(--bento-accent) !important;
  color: var(--bento-fg-on-accent) !important;
  border-radius: var(--bento-radius-md) !important;
  box-shadow: none !important;
}

:where(.ui-root) .button:hover {
  background-color: var(--bento-accent-hover) !important;
  color: var(--bento-fg-on-accent) !important;
}

:where(.ui-root) .button-secondary {
  color: var(--bento-fg-muted) !important;
}

:where(.ui-root) .button-secondary:hover {
  color: var(--bento-fg) !important;
}

:where(.ui-root) input[type="checkbox"]:not(.ui-checkbox):not(.ui-switch),
:where(.ui-root) input[type="radio"]:not(.ui-radio) {
  accent-color: var(--bento-accent);
  color: var(--bento-accent) !important;
  background-color: var(--bento-surface);
  border: 1px solid var(--bento-border-strong);
  border-radius: var(--bento-radius-sm);
  width: 1rem;
  height: 1rem;
}

:where(.ui-root) input[type="checkbox"]:focus-visible,
:where(.ui-root) input[type="radio"]:focus-visible {
  outline: 2px solid var(--bento-accent);
  outline-offset: 1px;
}