/*
 * The website help assistant (resources/views/partials/help-assistant.blade.php).
 *
 * Self-contained and scoped under .ha: it loads on the marketing layout
 * AND on PublicPageRenderer's pages, which do not share a stylesheet, so
 * it carries its own tokens rather than borrowing either shell's.
 */
.ha {
  --ha-bg: #ffffff;
  --ha-ink: #143723;
  --ha-muted: #4b5d52;
  --ha-line: #d9d4c7;
  --ha-accent: #14663f;
  --ha-accent-ink: #ffffff;
  --ha-soft: #ddf0e5;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ha-ink);
  /* iOS Safari enlarges text in landscape unless told not to. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ha {
    --ha-bg: #13201a;
    --ha-ink: #e8efe9;
    --ha-muted: #b3c2b8;
    --ha-line: #2e4237;
    --ha-accent: #3fae73;
    --ha-accent-ink: #0c2417;
    --ha-soft: #1d3327;
  }
}

:root[data-theme="dark"] .ha {
  --ha-bg: #13201a;
  --ha-ink: #e8efe9;
  --ha-muted: #b3c2b8;
  --ha-line: #2e4237;
  --ha-accent: #3fae73;
  --ha-accent-ink: #0c2417;
  --ha-soft: #1d3327;
}

.ha *, .ha *::before, .ha *::after { box-sizing: border-box; }

.ha-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.ha-launcher {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 0; border-radius: 999px;
  background: var(--ha-accent); color: var(--ha-accent-ink);
  font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.ha-launcher span {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ha-accent-ink); color: var(--ha-accent);
  font-size: 14px; font-weight: 700;
}
.ha-open .ha-launcher { display: none; }

.ha-panel {
  position: fixed; right: 16px; bottom: 16px;
  width: 380px; max-width: calc(100vw - 32px);
  max-height: min(640px, calc(100vh - 32px));
  display: flex; flex-direction: column;
  background: var(--ha-bg); color: var(--ha-ink);
  border: 1px solid var(--ha-line); border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
  overflow: hidden;
}
.ha-panel[hidden] { display: none; }

.ha-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--ha-accent); color: var(--ha-accent-ink);
}
.ha-title { margin: 0; font-size: 17px; font-weight: 700; color: inherit; }
.ha-close {
  width: 40px; height: 40px; border: 0; border-radius: 8px;
  background: transparent; color: inherit; font-size: 26px; line-height: 1; cursor: pointer;
}

.ha-body { padding: 14px 16px 16px; overflow-y: auto; }
.ha-note, .ha-small { margin: 0 0 10px; color: var(--ha-muted); font-size: 13px; }
.ha-note a, .ha-card-title a { color: var(--ha-accent); }

.ha-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* The input takes the row; on a very narrow screen the button wraps
   below it rather than pushing either past the panel's edge. */
.ha-search input { flex: 1 1 160px; min-width: 0; }
.ha-search .ha-btn { flex: 0 0 auto; }

.ha input[type="search"], .ha input[type="text"], .ha input[type="email"], .ha textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--ha-line); border-radius: 8px;
  background: var(--ha-bg); color: var(--ha-ink); font: inherit;
  /* 16px, NOT the panel's 15px: iOS Safari zooms the whole page in when
     an input under 16px is focused, which pushed the panel's right edge
     and the Search button off an iPhone's screen (14 October 2026). */
  font-size: 16px;
  max-width: 100%;
  -webkit-appearance: none;
  appearance: none;
}
.ha textarea { min-height: 96px; resize: vertical; }

.ha-btn {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px;
  background: var(--ha-accent); color: var(--ha-accent-ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.ha-btn[disabled] { opacity: .6; cursor: default; }
.ha-btn-secondary { background: var(--ha-soft); color: var(--ha-ink); }

.ha :focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.ha-card { padding: 10px 0; border-bottom: 1px solid var(--ha-line); overflow-wrap: anywhere; }
.ha-card-title { margin: 0 0 4px; font-size: 15px; }
.ha-card-text { margin: 0; color: var(--ha-muted); font-size: 14px; }
.ha-empty { margin: 0 0 10px; }
/* AI mode: the answer, set as text. Kept apart from the cards below it. */
.ha-answer { margin: 0 0 12px; white-space: pre-line; overflow-wrap: anywhere; }

.ha-sub { margin: 12px 0 6px; font-size: 14px; }
.ha-list { list-style: none; margin: 0; padding: 0; }
.ha-suggestion {
  display: block; width: 100%; min-height: 44px; margin-bottom: 6px; padding: 8px 12px;
  border: 1px solid var(--ha-line); border-radius: 8px;
  background: transparent; color: var(--ha-ink); font: inherit; text-align: left; cursor: pointer;
  overflow-wrap: anywhere;
}

.ha-person { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ha-line); }
.ha-person p { margin: 0 0 6px; font-weight: 600; }

.ha-ticket { margin-top: 12px; }
.ha-ticket[hidden] { display: none; }
.ha-ticket label { display: block; margin: 10px 0 4px; font-weight: 600; font-size: 14px; }
.ha-ticket .ha-btn { margin-top: 12px; width: 100%; }
.ha-status { margin: 10px 0 0; }

/*
 * PHONES: the panel is the whole screen, pinned to all four edges rather
 * than sized in vw/vh. 100vw and 100vh are the LAYOUT viewport on iOS
 * Safari -- 100vh includes the area under the browser bars -- so they
 * can describe a box larger than what the visitor sees. Equal side
 * padding comes from .ha-head and .ha-body, widened to the safe-area
 * insets where a page sets viewport-fit=cover (the marketing layout
 * does); elsewhere env() is 0 and the 16px floor applies.
 */
@media (max-width: 480px) {
  .ha {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }
  .ha-panel {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto; max-width: none;
    height: 100%; height: 100dvh; max-height: none;
    border: 0; border-radius: 0;
  }
  .ha-head {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .ha-body {
    flex: 1 1 auto;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
}

@media print { .ha { display: none; } }