/* Підказки при наведенні (js/tooltip.js) — замість системних title. */
@layer components {
  .aa-tip {
    position: fixed;
    inset: auto;
    left: 0; top: 0;
    z-index: 2147483000;
    margin: 0;
    padding: 6px 10px 7px;
    max-width: min(300px, calc(100vw - 16px));
    overflow: visible;
    border: 1px solid color-mix(in oklab, #fff 8%, transparent);
    border-radius: 9px;
    background: color-mix(in oklab, #161a22 94%, transparent);
    color: #f3f5f8;
    font: 500 12px/1.42 Inter, "Segoe UI", system-ui, sans-serif;
    letter-spacing: .005em;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: anywhere;
    box-shadow: 0 10px 28px -10px rgba(10, 14, 22, .45), 0 2px 6px rgba(10, 14, 22, .18);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px) scale(.97);
    transform-origin: var(--tip-arrow, 50%) 100%;
    transition: opacity 130ms cubic-bezier(.22, 1, .36, 1), transform 160ms cubic-bezier(.22, 1, .36, 1);
  }
  .aa-tip.is-below { transform: translateY(-3px) scale(.97); transform-origin: var(--tip-arrow, 50%) 0; }
  .aa-tip.is-shown { opacity: 1; transform: none; }

  /* Стрілка до елемента. */
  .aa-tip::after {
    content: "";
    position: absolute;
    left: var(--tip-arrow, 50%);
    bottom: -5px;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    background: inherit;
    border-right: inherit;
    border-bottom: inherit;
    border-bottom-right-radius: 2px;
    transform: rotate(45deg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .aa-tip.is-below::after { bottom: auto; top: -5px; transform: rotate(225deg); }
  .aa-tip__text { position: relative; z-index: 1; display: block; }

  :root[data-theme="dark"] .aa-tip {
    background: color-mix(in oklab, #2b313d 96%, transparent);
    border-color: color-mix(in oklab, #fff 12%, transparent);
    color: #f0f2f6;
  }

  @media (prefers-reduced-motion: reduce) {
    .aa-tip { transition: opacity 80ms linear; transform: none; }
    .aa-tip.is-below { transform: none; }
  }
}