/* ============================================================
   v6 Tooltip styles
   ============================================================
   Singleton popover rendered by src/ui/components/Tooltip.js.
   Position / transform are driven by JS; this file owns colors,
   typography, spacing, arrow rendering, and motion easing.
*/

@layer v6-components {

  .v6-tooltip {
    /* Base layout — JS sets `position: fixed`, this is the visual style. */
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 6px 10px;
    background: rgba(20, 20, 22, 0.96);
    /* v8.9 fix: tooltip BG is hard-coded dark, so the text must stay
       light regardless of theme. Was using var(--text-primary), which
       the light theme flips to a dark value — producing dark-on-dark.
       Hard-code white so tooltips are always readable on both themes. */
    color: #fafafa;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: var(--text-xs, 12px);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.01em;

    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-3, 0 8px 24px rgba(0, 0, 0, 0.55));

    transform-origin: var(--tt-origin, 50% 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  /* v8.9: ensure inner body / kbd colors stay light too (they used
     var(--text-secondary) which the light theme also flips). */
  .v6-tooltip .v6-tooltip__body { color: #fafafa; }
  .v6-tooltip .v6-tooltip__kbd {
    color: #d4d4d8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* Arrow — small rotated square sticking out of the bubble. */
  .v6-tooltip__arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(20, 20, 22, 0.96);
    border: 1px solid var(--v6-border, rgba(255, 255, 255, 0.08));
    pointer-events: none;
  }
  .v6-tooltip[data-side="top"] .v6-tooltip__arrow {
    bottom: -5px;
    transform: rotate(45deg);
    border-top: none;
    border-left: none;
  }
  .v6-tooltip[data-side="bottom"] .v6-tooltip__arrow {
    top: -5px;
    transform: rotate(45deg);
    border-bottom: none;
    border-right: none;
  }
  .v6-tooltip[data-side="left"] .v6-tooltip__arrow {
    right: -5px;
    transform: rotate(45deg);
    border-top: none;
    border-right: none;
  }
  .v6-tooltip[data-side="right"] .v6-tooltip__arrow {
    left: -5px;
    transform: rotate(45deg);
    border-bottom: none;
    border-left: none;
  }

  .v6-tooltip__body {
    white-space: pre-wrap;
    text-align: left;
    flex: 1;
  }

  /* Keyboard shortcut chip — appears to the right of the body */
  .v6-tooltip__kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #a1a1aa);
    font-family: var(--font-mono, 'SF Mono', monospace);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-sm, 4px);
    text-transform: uppercase;
    white-space: nowrap;
  }
  .v6-tooltip__kbd[hidden] {
    display: none;
  }

  /* Reduced motion — instant show/hide */
  @media (prefers-reduced-motion: reduce) {
    .v6-tooltip {
      transition: none !important;
    }
  }
}

/* ============================================================
   v9.3 — UNLAYERED tooltip-text guard (always wins)
   ============================================================
   Layered @layer rules can be overridden by ANY unlayered rule
   from any other file. This UNLAYERED guard makes absolutely
   sure the tooltip text stays light, no matter what theme or
   override gets loaded later in the cascade.
   ============================================================ */
body .v6-tooltip,
body[data-theme="light"] .v6-tooltip,
body .v6-tooltip .v6-tooltip__body,
body[data-theme="light"] .v6-tooltip .v6-tooltip__body {
  color: #fafafa !important;
}
body .v6-tooltip .v6-tooltip__kbd,
body[data-theme="light"] .v6-tooltip .v6-tooltip__kbd {
  color: #d4d4d8 !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}