/*
 * Insights UI (offcanvas, results, and the shared Insights button style).
 *
 * Button tokens: change --insights-* below to retheme every Insights CTA app-wide.
 * Markup: {% include "includes/btn_insights.html" %} or class btn-insights / btn-insights-outline
 * with <i class="bi bi-stars">. See docs/ai-insights.md section 10.
 */
:root {
  --insights-accent: #7c3aed;
  --insights-accent-hover: #6d28d9;
  --insights-accent-active: #5b21b6;
  --insights-accent-rgb: 124, 58, 237;
  --insights-accent-subtle: rgba(var(--insights-accent-rgb), 0.12);
  --insights-navbar-fg: #c4b5fd;
  --insights-navbar-fg-hover: #ede9fe;
  --insights-navbar-hover-bg: rgba(167, 139, 250, 0.35);
  --insights-navbar-active-bg: var(--insights-accent);
  --insights-navbar-active-fg: #fff;
}

.btn-insights {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--insights-accent);
  --bs-btn-border-color: var(--insights-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--insights-accent-hover);
  --bs-btn-hover-border-color: var(--insights-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--insights-accent-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--insights-accent-active);
  --bs-btn-active-border-color: var(--insights-accent-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--insights-accent);
  --bs-btn-disabled-border-color: var(--insights-accent);
}

.btn-insights-outline {
  --bs-btn-color: var(--insights-accent);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--insights-accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--insights-accent);
  --bs-btn-hover-border-color: var(--insights-accent);
  --bs-btn-focus-shadow-rgb: var(--insights-accent-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--insights-accent-active);
  --bs-btn-active-border-color: var(--insights-accent-active);
}

.btn-insights .bi-stars,
.btn-insights-outline .bi-stars {
  margin-right: 0.125rem;
}

.player-insights-offcanvas {
  --bs-offcanvas-width: min(100vw, 28rem);
}

.player-insights-presets .btn {
  margin-bottom: 0.25rem;
}

.player-insights-result {
  min-height: 6rem;
}

.insights-result-wrap {
  position: relative;
  min-height: 6rem;
}

.insights-result-wrap .insights-result {
  min-height: inherit;
}

.insights-result-wrap .insights-result:not(:empty) {
  padding-top: 2.25rem;
}

.insights-result-toolbar {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 2;
  display: none;
  gap: 0.25rem;
}

.insights-result-wrap:has(.player-insights-markdown) .insights-result-toolbar {
  display: flex;
}

.insights-result-toolbar .btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: var(--bs-border-color);
  background-color: rgba(var(--bs-body-bg-rgb), 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.insights-result-toolbar .insights-copy-icon {
  font-size: 0.95rem;
}

.player-insights-result .player-insights-markdown > :last-child {
  margin-bottom: 0;
}

.player-insights-result .player-insights-markdown h1,
.player-insights-result .player-insights-markdown h2,
.player-insights-result .player-insights-markdown h3 {
  font-size: 1rem;
  margin-top: 0.75rem;
}

.player-insights-result .player-insights-markdown ul,
.player-insights-result .player-insights-markdown ol {
  padding-left: 1.25rem;
}

.player-insights-result .player-insights-markdown ul ul,
.player-insights-result .player-insights-markdown ol ol,
.player-insights-result .player-insights-markdown ul ol,
.player-insights-result .player-insights-markdown ol ul {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.player-insights-result .player-insights-markdown li > p {
  margin-bottom: 0.25rem;
}

.player-insights-result .player-insights-markdown li > p:last-child {
  margin-bottom: 0;
}

.player-insights-result .player-insights-markdown li > ul,
.player-insights-result .player-insights-markdown li > ol {
  margin-top: 0.25rem;
}

.player-insights-result .player-insights-markdown p {
  margin-bottom: 0.75rem;
}

.insights-progress-spinner {
  color: var(--insights-accent);
}

.insights-progress-label {
  color: var(--bs-secondary-color);
}

.ask-lodge-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 4.25rem;
}

.ask-lodge-submit-leading {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ask-lodge-submit-stars {
  line-height: 1;
}

.ask-lodge-submit-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  color: currentColor;
}

nav.navbar.bg-primary .navbar-nav-link--insights {
  font-weight: 600;
}

nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active)
  .navbar-nav-icon,
nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active)
  .navbar-nav-label {
  color: var(--insights-navbar-fg);
}

nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active):hover,
nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active):focus {
  background-color: var(--insights-navbar-hover-bg);
  border-radius: var(--bs-border-radius);
  color: var(--insights-navbar-fg-hover);
}

nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active):hover
  .navbar-nav-icon,
nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active):hover
  .navbar-nav-label,
nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active):focus
  .navbar-nav-icon,
nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights:not(.active):focus
  .navbar-nav-label {
  color: var(--insights-navbar-fg-hover);
}

nav.navbar.bg-primary .navbar-nav-main .navbar-nav-link--insights.active {
  background-color: var(--insights-navbar-active-bg);
  border-radius: var(--bs-border-radius);
  color: var(--insights-navbar-active-fg);
  font-weight: 600;
}

nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights.active
  .navbar-nav-icon,
nav.navbar.bg-primary
  .navbar-nav-main
  .navbar-nav-link--insights.active
  .navbar-nav-label {
  color: var(--insights-navbar-active-fg);
}

.dropdown-item.dropdown-item--insights,
.dropdown-item.dropdown-item--insights .navbar-menu-icon {
  color: var(--insights-accent);
}

.dropdown-item.dropdown-item--insights:hover,
.dropdown-item.dropdown-item--insights:focus,
.dropdown-item.dropdown-item--insights.active {
  color: var(--insights-accent-hover);
  background-color: var(--insights-accent-subtle);
}

.insights-debug-wrap {
  padding-top: 0.25rem;
}

.insights-debug-json {
  max-height: 18rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
  white-space: pre-wrap;
  word-break: break-word;
}

.insights-debug-structured .card-header {
  background-color: var(--bs-body-bg);
}

.insights-debug-section-toggle {
  gap: 0.25rem;
  align-items: flex-start;
}

.insights-debug-section-summary {
  font-weight: normal;
}

.insights-debug-tool-list {
  padding-left: 1.25rem;
  margin-bottom: 0;
}

.insights-debug-answer {
  max-height: 12rem;
  overflow: auto;
  padding: 0.75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-tertiary-bg);
  white-space: pre-wrap;
  word-break: break-word;
}

.insights-debug-seq {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.insights-debug-seq-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 2rem;
  gap: 0.35rem;
  align-items: center;
}

.insights-debug-seq-step--header {
  margin-bottom: 0.15rem;
}

.insights-debug-seq-lane {
  box-sizing: border-box;
  width: 2rem;
  padding: 0.15rem 0;
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--bs-border-color);
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
}

.insights-debug-seq-lane--app {
  background-color: var(--bs-tertiary-bg);
}

.insights-debug-seq-lane--ai {
  background-color: var(--insights-accent-subtle);
  color: var(--insights-accent-active);
}

.insights-debug-seq-mid {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.insights-debug-seq-mid--header {
  justify-content: center;
}

.insights-debug-seq-header-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.insights-debug-seq-arrow {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--bs-secondary-color);
}

.insights-debug-seq-label {
  min-width: 0;
  word-break: break-word;
}

.ask-examples-table-wrap {
  overflow: auto;
  max-height: min(70vh, 42rem);
}

.ask-examples-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bs-table-bg);
  box-shadow: inset 0 -1px 0 var(--bs-table-border-color);
}

.ask-examples-col-category {
  width: 28%;
  min-width: 7rem;
}

.ask-examples-col-question {
  width: auto;
}

.ask-examples-col-more {
  width: 2.75rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.ask-examples-more-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ask-examples-reliability--supported {
  background-color: var(--bs-success-bg-subtle);
  color: var(--bs-success-text-emphasis);
}

.ask-examples-reliability--partial {
  background-color: var(--bs-warning-bg-subtle);
  color: var(--bs-warning-text-emphasis);
}

.ask-examples-reliability--not_supported {
  background-color: var(--bs-secondary-bg-subtle);
  color: var(--bs-secondary-text-emphasis);
}

.ask-examples-tool-list .ask-examples-tool-item + .ask-examples-tool-item {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bs-border-color);
}

.ask-examples-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ask-examples-toggle.collapsed .ask-examples-chevron {
  transform: rotate(-90deg);
}