/* help-widget.css — AST-1705 / AST-1717 in-app contextual help widget.
   Floating "Help?" button + panel on all authenticated pages (base.html).
   Uses only AST design tokens (tokens.css) — no new framework.
   Aligned with Senior Product Designer AST-326 token specs (2026-09-10). */

/* ── Floating Help trigger (FAB) ──────────────────────────────────────── */
.help-widget-toggle {
  align-items: center;
  background: var(--clr-primary-base, #6d5dfc);
  border: none;
  border-radius: var(--radius-full, 9999px);
  bottom: var(--space-6, 24px);
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.1));
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans, inherit);
  height: 48px;
  justify-content: center;
  padding: 0;
  position: fixed;
  right: var(--space-6, 24px);
  transition: background var(--duration-fast, 150ms) ease,
              box-shadow var(--duration-fast, 150ms) ease,
              transform var(--duration-fast, 150ms) ease;
  width: 48px;
  z-index: 1500; /* above --z-sticky (200) per spec minimum */
}
.help-widget-toggle .bi {
  font-size: 1.3rem;
  line-height: 1;
}
.help-widget-toggle:hover {
  background: var(--clr-primary-hover, #5a4be0);
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.15));
  transform: scale(1.05);
}
.help-widget-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(109, 93, 252, 0.2));
}
/* Mobile: same position, 44px (still ≥ --target-min). */
@media (max-width: 767px) {
  .help-widget-toggle {
    height: 44px;
    width: 44px;
  }
}

/* ── Help panel (drawer) ─────────────────────────────────────────────── */
.help-widget {
  animation: ast-fade-in-up 250ms ease-out;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--clr-primary-border, #cbc3ff);
  border-radius: var(--radius-lg, 0.75rem);
  bottom: 84px;
  box-shadow: var(--shadow-xl, 0 20px 60px rgba(0, 0, 0, 0.15));
  display: flex;
  flex-direction: column;
  max-height: 480px;
  max-width: calc(100vw - 48px);
  overflow: hidden;
  position: fixed;
  right: var(--space-6, 24px);
  width: 360px;
  z-index: 1500;
}
.help-widget[hidden] {
  display: none;
}

.help-widget__header {
  align-items: center;
  background: var(--clr-primary-surface, #f3f0ff);
  border-bottom: 1px solid var(--clr-primary-border, #cbc3ff);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.help-widget__title {
  align-items: center;
  color: var(--text-primary, #1a1a1a);
  display: inline-flex;
  font-size: 1rem;
  gap: 0.5rem;
  margin: 0;
}
.help-widget__close {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm, 0.375rem);
  color: var(--text-secondary, #666666);
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  min-height: var(--target-min, 44px);
  min-width: var(--target-min, 44px);
  padding: 0.25rem;
}
.help-widget__close:hover {
  background: var(--clr-primary-surface, #f3f0ff);
  color: var(--text-primary, #1a1a1a);
}
.help-widget__close:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(109, 93, 252, 0.2));
}

/* ── Friction-aware suggestions ("On this page") ─────────────────────── */
.help-widget__suggestion {
  padding: var(--space-3) var(--space-4) 0;
}
.help-widget__pill {
  background: var(--clr-primary-surface, #f3f0ff);
  color: var(--clr-primary-base, #6d5dfc);
}
.help-widget__suggestion-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.help-widget__suggestion-link {
  align-items: center;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--text-primary, #1a1a1a);
  display: flex;
  font-size: var(--text-sm, 0.875rem);
  gap: 0.5rem;
  justify-content: space-between;
  padding: var(--space-3, 0.75rem);
  text-decoration: none;
}
.help-widget__suggestion-link:hover {
  background: var(--clr-primary-surface, #f3f0ff);
}
.help-widget__suggestion-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(109, 93, 252, 0.2));
}
.help-widget__suggestion-link .bi-box-arrow-up-right {
  color: var(--text-muted, #999999);
  font-size: var(--text-xs, 0.75rem);
}

/* ── Search box ──────────────────────────────────────────────────────── */
.help-widget__search {
  padding: var(--space-3) var(--space-4);
}
.help-widget__search-label {
  color: var(--text-secondary, #666666);
  display: block;
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}
.help-widget__search-box {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  position: relative;
}
.help-widget__search-box > .bi {
  color: var(--text-muted, #999999);
  left: 0.75rem;
  position: absolute;
  pointer-events: none;
}
.help-widget__search-box .ast-input {
  border-radius: var(--radius-md, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem)
           var(--space-3, 0.75rem) 2.1rem;
  width: 100%;
}
.help-widget__results {
  border-top: 1px solid var(--clr-primary-border, #cbc3ff);
  margin-top: 0.5rem;
  max-height: 220px;
  overflow-y: auto;
}
.help-widget__results[hidden] {
  display: none;
}
.help-widget__result {
  border-radius: var(--radius-md, 0.5rem);
  display: block;
  padding: var(--space-3, 0.75rem);
  text-decoration: none;
}
.help-widget__result + .help-widget__result {
  border-top: 1px solid var(--clr-primary-border, #cbc3ff);
}
.help-widget__result:hover {
  background: var(--clr-primary-surface, #f3f0ff);
}
.help-widget__result-title {
  color: var(--text-primary, #1a1a1a);
  display: block;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
}
.help-widget__result-desc {
  color: var(--text-secondary, #666666);
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}
.help-widget__no-results {
  color: var(--text-secondary, #666666);
  font-size: var(--text-sm, 0.875rem);
  margin: 0.5rem 0.25rem;
}
.help-widget__no-results a {
  color: var(--clr-primary-base, #6d5dfc);
}

/* ── Quick links ─────────────────────────────────────────────────────── */
.help-widget__links {
  border-top: 1px solid var(--clr-primary-border, #cbc3ff);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-4, 1rem);
}
.help-widget__link {
  align-items: center;
  border-radius: var(--radius-md, 0.5rem);
  color: var(--text-primary, #1a1a1a);
  display: flex;
  font-size: var(--text-sm, 0.875rem);
  gap: 0.5rem;
  justify-content: space-between;
  padding: var(--space-3, 0.75rem);
  text-decoration: none;
}
.help-widget__link:hover {
  background: var(--clr-primary-surface, #f3f0ff);
  color: var(--clr-primary-base, #6d5dfc);
}
.help-widget__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(109, 93, 252, 0.2));
}
.help-widget__link .bi-box-arrow-up-right {
  color: var(--text-muted, #999999);
  font-size: var(--text-xs, 0.75rem);
  margin-left: auto;
}
.help-widget__link .bi:first-child {
  color: var(--clr-primary-base, #6d5dfc);
}

.help-widget__footer {
  border-top: 1px solid var(--clr-primary-border, #cbc3ff);
  padding: var(--space-3) var(--space-4);
}
.help-widget__contact {
  align-items: center;
  color: var(--clr-primary-base, #6d5dfc);
  display: flex;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  gap: 0.5rem;
  text-decoration: none;
}
.help-widget__contact:hover {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .help-widget-toggle {
    transition: none;
  }
  .help-widget {
    animation: none;
  }
}