/*
 * "Copy page" menu in the API reference top bar.
 *
 * Built entirely on the --wa-* tokens the docs page declares inline, so light
 * and dark come for free and the control cannot drift from the rest of the
 * chrome. Lives beside its script rather than in the page template: the
 * template is already ~950 lines, and a component split across two files is
 * worse than one that owns both of its own.
 */

.docs-ai {
  position: relative;
  flex: none;
}

/* ------------------------------------------------------------------ trigger */
.docs-ai__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 9px 0 10px;
  border: 1px solid var(--wa-border);
  border-radius: 8px;
  background: transparent;
  color: var(--wa-fg-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.docs-ai__trigger:hover {
  background: var(--wa-bg-hover);
  color: var(--wa-fg);
}

.docs-ai__trigger[aria-expanded='true'] {
  background: var(--wa-bg-hover);
  color: var(--wa-fg);
  border-color: var(--wa-fg-subtle);
}

.docs-ai__icon svg,
.docs-ai__chevron svg {
  display: block;
  width: 14px;
  height: 14px;
}

.docs-ai__chevron {
  color: var(--wa-fg-subtle);
  transition: transform 0.15s ease;
}

.docs-ai__trigger[aria-expanded='true'] .docs-ai__chevron {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------- menu */
.docs-ai__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 290px;
  padding: 6px;
  border: 1px solid var(--wa-border);
  border-radius: 12px;
  background: var(--wa-bg);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.22), 0 2px 6px -2px rgba(0, 0, 0, 0.12);
  animation: docs-ai-in 0.14s ease-out;
}

:root.dark .docs-ai__menu {
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 6px -2px rgba(0, 0, 0, 0.45);
}

@keyframes docs-ai-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-ai__menu { animation: none; }
  .docs-ai__chevron { transition: none; }
}

.docs-ai__sep {
  height: 1px;
  margin: 6px 8px;
  background: var(--wa-border-soft);
}

/* -------------------------------------------------------------------- items */
.docs-ai__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--wa-fg);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.docs-ai__item:hover,
.docs-ai__item:focus-visible {
  background: var(--wa-bg-hover);
}

.docs-ai__item-icon {
  flex: none;
  color: var(--wa-fg-subtle);
  padding-top: 1px;
}

.docs-ai__item-icon svg {
  display: block;
  width: 15px;
  height: 15px;
}

.docs-ai__item:hover .docs-ai__item-icon {
  color: var(--wa-accent);
}

.docs-ai__item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.docs-ai__item-label {
  font-weight: 500;
  line-height: 1.35;
}

.docs-ai__item-hint {
  color: var(--wa-fg-subtle);
  font-size: 11.5px;
  line-height: 1.35;
}

.docs-ai__item-ext {
  flex: none;
  margin-left: auto;
  padding-top: 2px;
  color: var(--wa-fg-subtle);
  opacity: 0.55;
}

.docs-ai__item-ext svg {
  display: block;
  width: 12px;
  height: 12px;
}

/* Confirmation states. The label text is swapped by the script; colour here
   only reinforces it, so the feedback survives a forced-colours mode. */
.docs-ai__item.is-done .docs-ai__item-icon,
.docs-ai__item.is-done .docs-ai__item-label {
  color: var(--wa-accent);
}

.docs-ai__item.is-failed .docs-ai__item-icon,
.docs-ai__item.is-failed .docs-ai__item-label {
  color: var(--wa-warn-accent);
}

/* -------------------------------------------------- endpoint-scoped menu */
/* One per operation, sharing Redoc's own heading container. That container is
   a flex *column* holding nothing but the h2, so it is turned into a row here
   and `margin-left: auto` pushes the control to the right of the title. The
   class is only ever added to a container we put a menu into. `wrap` so a long
   title drops the control to its own line instead of squashing it.

   Doubled class: Redoc's own `flex-direction: column` lands on a hashed
   styled-component class at the same specificity and is injected after this
   sheet, so a single class loses. */
.docs-ai-head.docs-ai-head {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.docs-ai--endpoint {
  margin-left: auto;
  /* Redoc's h2 carries a large top margin the row inherits visually; nudge the
     control onto the title's optical baseline rather than the box's. */
  align-self: center;
}

.docs-ai--endpoint .docs-ai__trigger {
  height: 28px;
  font-size: 12.5px;
  color: var(--wa-fg-subtle);
}

.docs-ai--endpoint .docs-ai__trigger:hover,
.docs-ai--endpoint .docs-ai__trigger[aria-expanded='true'] {
  color: var(--wa-fg);
}

/* The endpoint title is the thing being read; the control should not compete
   with it until the reader goes looking. */
.docs-ai--endpoint .docs-ai__trigger {
  opacity: 0.65;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.docs-ai-head:hover .docs-ai__trigger,
.docs-ai--endpoint .docs-ai__trigger:focus-visible,
.docs-ai--endpoint .docs-ai__trigger[aria-expanded='true'] {
  opacity: 1;
}

/* Touch devices never hover, so the control would sit permanently faded. */
@media (hover: none) {
  .docs-ai--endpoint .docs-ai__trigger { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .docs-ai--endpoint .docs-ai__trigger { transition: none; }
}

/* ------------------------------------------------------------- responsive */
/* Matches the top bar's existing drop order: the label goes before the whole
   control does, so the icon button survives down to narrow phones. */
@media (max-width: 820px) {
  .docs-ai__label { display: none; }
  .docs-ai__trigger { padding: 0 6px; }
}

@media (max-width: 560px) {
  .docs-ai__menu { min-width: 250px; }
}

/* Beside a wrapping title there is no room for both; the icon still opens the
   same menu. */
@media (max-width: 1000px) {
  .docs-ai--endpoint .docs-ai__label { display: none; }
  .docs-ai--endpoint .docs-ai__trigger { padding: 0 6px; }
}

@media print {
  .docs-ai { display: none !important; }
}