/**
 * tooltips.css — presentation for the shared tooltip layer (see tooltips.js).
 * ============================================================================
 *
 * The tooltip element is appended to <body>, deliberately OUTSIDE both panels,
 * so it is not affected by either app's scoped stylesheet and cannot be
 * clipped by a panel's overflow or stacking context.
 */

/* --------------------------------------------------------------------------
 * Neutralise the vendored CSS-only tooltip.
 *
 * The AI Architect sheet implements tooltips as `[data-tooltip]:hover::after`
 * with `content: attr(data-tooltip)`. Those rules were namespaced to the panel
 * by the build, so they still fire inside the AI Architect tab and would draw
 * a SECOND tooltip underneath the shared one — and a CSS-only tooltip cannot
 * honour the 5-second dismiss, which is the whole point of the JS layer.
 *
 * Suppressed here rather than stripped from the vendored sheet so that
 * src/vendor/aiarch/styles.css stays byte-identical to upstream.
 * ----------------------------------------------------------------------- */
.pi-panel [data-tooltip]:hover::after,
.pi-panel [data-tooltip]:focus-visible::after,
.pi-panel [data-tooltip]:hover::before,
.pi-panel [data-tooltip]:focus-visible::before {
  content: none !important;
  display: none !important;
}

/* Keep the affordance: anything with a tooltip reads as explainable. */
.pi-panel [data-tooltip] { position: relative; }

/* --------------------------------------------------------------------------
 * The shared tooltip
 * ----------------------------------------------------------------------- */
.pi-tip {
  position: fixed;
  z-index: 2000;
  max-width: 300px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #1c1630;
  color: #f4f0fc;
  border: 1px solid #3a2c5c;
  box-shadow: 0 12px 32px rgba(10, 5, 20, .38);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.005em;
  text-align: left;

  /* The tooltip must never eat a pointer event — hovering it would otherwise
     retrigger mouseout on the element underneath and cause a flicker loop. */
  pointer-events: none;

  opacity: 0;
  transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease;
}

.pi-tip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:root[data-theme="light"] .pi-tip {
  background: #241d33;
  color: #f7f5fc;
  border-color: #3d3253;
}

/* A small arrow, drawn on the side the tooltip actually landed on. */
.pi-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
}
.pi-tip[data-placement="top"]::after {
  top: 100%;
  border-top-color: #1c1630;
}
.pi-tip[data-placement="bottom"]::after {
  bottom: 100%;
  border-bottom-color: #1c1630;
}
:root[data-theme="light"] .pi-tip[data-placement="top"]::after { border-top-color: #241d33; }
:root[data-theme="light"] .pi-tip[data-placement="bottom"]::after { border-bottom-color: #241d33; }

@media (prefers-reduced-motion: reduce) {
  .pi-tip { transition: none; transform: none; }
  .pi-tip.is-visible { transform: none; }
}

/* On touch there is no hover, so a tooltip would only ever appear via focus
   after a tap — which fires at the same moment as the action itself. Narrow
   the width so it does not cover the control the user just pressed. */
@media (max-width: 560px) {
  .pi-tip { max-width: min(260px, calc(100vw - 24px)); }
}