/**
 * Глобальные компоненты ASGUARD: подсказка-«?» и тултип.
 * Слово/кнопка не подчёркиваются; справа сверху — кружок «?».
 * Тултип появляется только при наведении на кружок, его левый нижний угол
 * крепится к точке курсора (правый верхний угол слова).
 */
.ag-tip { position: relative; display: inline-block; border-bottom: none; cursor: inherit; }

.ag-tip__badge {
  position: absolute; top: -7px; right: -7px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ag-color-panel); color: var(--ag-color-text);
  border: 1px solid var(--ag-color-border);
  font: 600 9px/13px var(--ag-font-sans); text-align: center;
  cursor: pointer; pointer-events: auto; z-index: var(--ag-z-dropdown);
  transition: background var(--ag-dur-fast), opacity var(--ag-dur-fast);
}
.ag-tip__badge:hover, .ag-tip__badge:focus-visible { background: var(--ag-color-border); color: var(--ag-color-text); outline: none; }
.ag-tip.is-tip-open .ag-tip__badge { opacity: .35; }
.ag-tip--dark .ag-tip__badge { background: var(--ag-color-bg); color: var(--ag-color-text); border-color: var(--ag-color-bg); }

/* Тултип — обычный элемент внутри слова: рамка и текст всегда вместе. */
.ag-tip__bubble {
  position: absolute; left: var(--tip-x, 0px); top: var(--tip-y, 0px);
  transform: translateY(-100%);
  width: max-content; max-width: 280px; padding: 7px 11px;
  background: var(--ag-color-panel); color: var(--ag-color-text);
  border: 1px solid var(--ag-color-border); border-radius: var(--ag-radius-sm);
  box-shadow: var(--ag-shadow-md);
  font: var(--ag-font-weight-regular) var(--ag-font-size-small)/1.4 var(--ag-font-sans);
  pointer-events: none; z-index: var(--ag-z-toast); white-space: normal;
  opacity: 0; visibility: hidden;
  transition: opacity var(--ag-dur-fast) var(--ag-ease-standard);
}
.ag-tip.is-tip-open .ag-tip__bubble { opacity: 1; visibility: visible; }

/**
 * Переключатель темы — плавающая кнопка над статус-баром.
 * Цвета только из токенов, поэтому dark/light переключаются автоматически.
 * Разметка кнопки: functions.php → asguard_ide_theme_toggle() (wp_footer).
 *
 * Геометрия: на десктопе .ide-window = 90vh + margin 40px, статус-бар absolute
 * внизу окна → его верх на (10vh − 9px) от низа вьюпорта. 10vh + 8px даёт
 * постоянный зазор 17px к статус-бару при любой высоте окна (820–1560px и т.д.).
 * На ≤1350px статус-бар fixed у низа вьюпорта (30px + safe-area).
 */
.ag-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: calc(10vh + var(--ag-space-2));
  z-index: var(--ag-z-toast); /* ниже чата (.terminal-messenger = 2000000) и статус-бара */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ag-color-border);
  border-radius: var(--ag-radius-pill);
  background: var(--ag-color-panel);
  color: var(--ag-color-text);
  box-shadow: var(--ag-shadow-md);
  cursor: pointer;
  transition: background var(--ag-dur-fast) var(--ag-ease-standard),
              border-color var(--ag-dur-fast) var(--ag-ease-standard),
              color var(--ag-dur-fast) var(--ag-ease-standard);
}
.ag-theme-toggle:hover { background: var(--ag-color-border); }
.ag-theme-toggle:focus-visible { outline: 2px solid var(--ag-color-primary); outline-offset: 2px; }
.ag-theme-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Иконки взаимоисключающие: в тёмной теме — луна, в светлой — солнце. */
.ag-theme-toggle .ag-theme-toggle__icon--sun { display: none; }
html[data-theme="light"] .ag-theme-toggle .ag-theme-toggle__icon--sun { display: block; }
html[data-theme="light"] .ag-theme-toggle .ag-theme-toggle__icon--moon { display: none; }

@media (max-width: 1350px) {
  .ag-theme-toggle {
    bottom: calc(30px + env(safe-area-inset-bottom) + var(--ag-space-4));
  }
}

@media print {
  .ag-theme-toggle { display: none; }
}