/**
 * UI Interaction System V3 — focus + hover rules.
 * Tokens: interaction-tokens.css (loaded early).
 * This file loads AFTER theme-magicbox so page recipes win without !important wars.
 */

/* ── Form controls: :focus only (native fields) ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus,
textarea:focus,
select:focus {
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow);
}

/* ── Primary CTAs — focus ── */
.gen:focus-visible,
.buy:focus-visible,
.send:focus-visible,
.login-btn:focus-visible,
.bal-topup:focus-visible,
.cookie-accept:focus-visible,
.job-open:focus-visible,
.hist-search button:focus-visible,
.dock .go:focus-visible,
.cab-cta:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-glow-cta);
}

/* ── Primary CTAs — hover ── */
.gen:hover,
.buy:hover,
.send:hover,
.login-btn:hover,
.cookie-accept:hover,
.job-open:hover,
.hist-search button:hover,
.cab-cta:hover,
.dock .go:hover {
  filter: var(--ui-hover-cta-filter);
  box-shadow: var(--ui-hover-cta-glow, var(--glow-strong));
  transform: var(--ui-hover-cta-lift);
}

/* ── Secondary / outlined ── */
.cab-btn-secondary:hover,
.cab-chip:hover:not(.is-on),
.bal-tab:hover:not(.is-on),
.cab-dd-btn:hover,
.app-confirm-btn:hover:not(.app-confirm-ok) {
  border-color: var(--ui-hover-border);
  background: var(--ui-hover-soft);
  box-shadow: var(--ui-hover-glow);
}

.cab-btn-secondary:focus-visible,
.cab-chip:focus-visible,
.bal-tab:focus-visible,
.cab-dd-btn:focus-visible,
.cab-select-trigger:focus-visible {
  outline: none;
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow);
}

.app-confirm-btn.app-confirm-ok:hover {
  filter: var(--ui-hover-cta-filter);
  box-shadow: var(--ui-hover-cta-glow);
  opacity: 1;
  transform: var(--ui-hover-cta-lift);
}

/* ── Cards ── */
.model-catalog-card:hover,
.buy-pack:hover,
.idea-card:hover,
.create-quick-tool-card:hover,
.t-card:hover,
.c-card:hover {
  border-color: var(--ui-hover-card-border);
  box-shadow: var(--ui-hover-card-glow);
}

/* Balance history row — keyboard focus (card/control recipe) */
.hist-tx:focus-visible {
  outline: none;
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow);
}

/* Support upload dropzone — keyboard focus (form/upload recipe) */
.sup-drop:focus-visible {
  outline: none;
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow);
}

/* ── Form hover (quieter than focus) ── */
.cab-search input[type="search"]:hover,
.cab-select-trigger:hover {
  border-color: var(--ui-hover-form-border);
  box-shadow: var(--ui-hover-form-glow);
}

.cab-search input[type="search"]:focus,
.cab-select-trigger:focus {
  outline: none;
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow);
}

.cab-dd-opt:focus-visible {
  outline: none;
  background: var(--ui-hover-quiet-bg);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.35), var(--ui-focus-glow-quiet);
}

.cab-search-clear:focus-visible {
  outline: none;
  color: var(--text, #fff);
  background: var(--ui-hover-quiet-bg);
  box-shadow: var(--ui-focus-glow-quiet);
}

.buy-pack:has(.cab-cta:focus-visible) {
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow);
}

/* ── Quiet chrome ── */
.login-x:hover,
.cab-search-clear:hover,
.account-menu-close:hover,
.sheet-h-close:hover,
.aspect-all-h .x:hover,
.prompt-enhance-panel-h .x:hover,
.prompt-examples-h .x:hover,
.field-clear-btn:hover,
html.create-v2-page .sheet-create-v2 .field-clear-btn:hover {
  opacity: 1;
  color: var(--text, #fff);
  background: var(--ui-hover-quiet-bg);
  border-color: var(--ui-hover-quiet-border);
  box-shadow: none;
}

.login-x:focus-visible,
.sheet-h-close:focus-visible,
.account-menu-close:focus-visible,
.aspect-all-h .x:focus-visible,
.prompt-enhance-panel-h .x:focus-visible,
.prompt-examples-h .x:focus-visible,
.field-clear-btn:focus-visible,
html.create-v2-page .sheet-create-v2 .field-clear-btn:focus-visible {
  outline: none;
  border-color: var(--ui-focus-border);
  box-shadow: var(--ui-focus-glow-quiet);
}

.cab-dd-opt:hover,
.hist-tx-menu:hover,
.hist-tx-more-item:hover {
  background: var(--ui-hover-quiet-bg);
  color: var(--text, #fff);
}

.account-menu-item:hover {
  background: var(--ui-hover-quiet-bg);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.18);
}

/* ── Text links ── */
.linkish:hover,
.job-copy:hover,
.sup-bot-link:hover,
.bal-summary-link:hover,
.hist-tx-gen:hover,
.sup-ticket-cta:hover {
  text-decoration: underline;
}

.linkish:focus-visible,
.job-copy:focus-visible,
.sup-ticket-cta:focus-visible,
.cab-page a.cab-lead:focus-visible,
.cab-page .cab-empty a:not(.cab-cta):not(.cab-btn-secondary):focus-visible {
  outline: var(--ui-focus-link-outline);
  outline-offset: var(--ui-focus-link-offset);
}

/* ── Destructive ── */
.account-menu-item--logout:hover,
.account-logout:hover,
.lib-more-item--danger:hover,
.lib-act--danger:hover,
.lib-delete-confirm:hover {
  color: var(--ui-hover-danger-color, #ffb4bb);
  background: var(--ui-hover-danger-bg);
  border-color: var(--ui-hover-danger-border);
}

.account-menu-item--logout:focus-visible,
.account-logout:focus-visible,
.lib-more-item--danger:focus-visible,
.lib-act--danger:focus-visible,
.lib-delete-confirm:focus-visible {
  outline: none;
  border-color: var(--ui-focus-danger-border);
  background: var(--ui-focus-danger-bg);
  box-shadow: var(--ui-focus-danger-glow);
  color: #ffb4bb;
}

.buy-compare-summary:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: var(--ui-focus-glow);
}

/* =============================================================================
   Dock — shared semantic recipe (late cascade; no !important).
   Create pages override --ui-dock-*-bg for opaque fills.
   ============================================================================= */
.dock a.dock-link {
  transition: var(--ui-transition);
}

html.create-v2-page .dock a.dock-link {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--ui-dock-bg);
  box-shadow: none;
  transform: none;
}

html.create-v2-page .dock a.dock-link:hover {
  border-color: var(--ui-hover-border);
  background: var(--ui-dock-hover-bg);
  color: #fff;
  box-shadow: var(--ui-hover-glow);
  transform: none;
  filter: none;
}

html.create-v2-page .dock a.dock-link:focus-visible {
  border-color: var(--ui-focus-border);
  background: var(--ui-dock-hover-bg);
  color: #fff;
  box-shadow: var(--ui-focus-glow);
  transform: none;
  outline: none;
}

html.create-v2-page .dock a.dock-link:active {
  box-shadow: var(--ui-hover-glow);
  transform: none;
}

html.create-v2-page .dock a.dock-link.is-on {
  border-color: rgba(168, 85, 247, 0.45);
  background: var(--ui-dock-on-bg);
  color: #fff;
  box-shadow: var(--cv2-glow-nav-selected, var(--ui-selected-glow));
  transform: none;
}

html.create-v2-page .dock a.dock-link.is-on:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: var(--ui-dock-on-hover-bg);
  box-shadow: var(--cv2-glow-nav-selected, var(--ui-selected-glow));
  transform: none;
}

html.create-v2-page .dock a.dock-link.is-on:focus-visible {
  border-color: rgba(168, 85, 247, 0.55);
  box-shadow: var(--cv2-glow-nav-selected, var(--ui-selected-glow)), 0 0 0 2px rgba(168, 85, 247, 0.18);
  outline: none;
  transform: none;
}

html[data-theme="light"].create-v2-page .dock a.dock-link {
  border-color: var(--border);
  background: var(--ui-dock-bg);
  color: var(--text);
}

html[data-theme="light"].create-v2-page .dock a.dock-link:hover,
html[data-theme="light"].create-v2-page .dock a.dock-link:focus-visible {
  border-color: var(--ui-hover-border);
  background: var(--ui-dock-hover-bg);
  color: var(--text);
  filter: none;
  transform: none;
}

html[data-theme="light"].create-v2-page .dock a.dock-link.is-on,
html[data-theme="light"].create-v2-page .dock a.dock-link.is-on:hover,
html[data-theme="light"].create-v2-page .dock a.dock-link.is-on:focus-visible {
  border-color: rgba(138, 43, 226, 0.5);
  background: var(--ui-dock-on-bg);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(138, 43, 226, 0.12);
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gen:hover,
  .buy:hover,
  .send:hover,
  .login-btn:hover,
  .cookie-accept:hover,
  .job-open:hover,
  .hist-search button:hover,
  .cab-cta:hover,
  .dock .go:hover,
  .app-confirm-btn.app-confirm-ok:hover,
  .model-catalog-card:hover,
  .buy-pack:hover,
  .c-card:hover {
    transform: none;
  }
}