/* Visitech Assistant — panel additions on top of the theme's chrome.css.
   chrome.css already styles .search-panel, .search-panel__field, .search-q,
   .search-answer(+dots), .search-hits and .ai-spark (mockup port, lines
   660-800). This sheet adds only what the mockup never had: the thread,
   product cards, the note/foot rows and the phone sheet.
   Tokens (--radius-*, --ease-standard, --fw-*, --font-body) come from the
   theme; sensible literals back them up nowhere — a missing token means the
   theme changed and this sheet should be revisited, not papered over. */

/* The default submit button: must stay clickable-by-spec (clip, never
   display:none) so Enter submits the FORM instead of "clicking" the first
   suggested question. */
.search-panel--ai .vt-as-default-submit,
/* Honeypot: visually gone, still in the DOM for bots to find. */
.search-panel--ai .vt-as-hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0; padding: 0; margin: -1px;
}

/* Close button — a phone-sheet affordance, gone on desktop. */
.search-panel--ai .vt-as-close { display: none; }
@media (max-width: 820px) {
  .search-panel--ai .vt-as-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 12px;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    cursor: pointer;
    z-index: 1;
  }
}

/* Chat-shaped order: suggested/thread on top, Clear chat + input at the
   bottom. The first visible section loses the section top-margin. */
.search-panel--ai .vt-as-suggested { margin-top: 0; }
.search-panel--ai .search-panel__field { margin-top: 10px; }

/* --- the ask field: inverted out of the dark panel (Yoann, 2026-09-08).
       chrome.css dresses .search-panel__field as a translucent white-on-dark
       pill, which reads as one more muted row among the suggested questions.
       Here it is the one thing the visitor types into, so it gets a light
       ground and dark ink — the only light surface in the panel. */
.search-panel--ai .search-panel__field {
  background: #fff;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  transition: box-shadow 0.18s var(--ease-standard);
}
.search-panel--ai .search-panel__field:focus-within {
  box-shadow: 0 0 0 2px rgba(160, 104, 177, 0.75);
}
.search-panel--ai .search-panel__field svg { color: var(--color-purple-black-60); }
.search-panel--ai .search-panel__field input {
  color: var(--color-purple-black);
  caret-color: var(--color-dark-purple);
}
/* The icon may stay at -60 (non-text, 3:1 is the bar) but the placeholder is
   text: #7f7f84 on white is 3.98:1. -80 is 7.4:1. (a11y pass 2026-09-18) */
.search-panel--ai .search-panel__field input::placeholder { color: var(--color-purple-black-80); }
/* Chrome paints the search-clear glyph from the input's colour — already dark
   here — but its own focus ring would double up with the pill's. */
.search-panel--ai .search-panel__field input::-webkit-search-cancel-button { cursor: pointer; }

/* --- the bottom controls row: Clear chat, right-aligned. Empty (and
       spaceless) until a thread exists — the audience pills that shared it
       are gone, every answer is technical (Yoann, 2026-10-01). --- */
.search-panel--ai .vt-as-controls {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  margin-top: 14px;
}
.search-panel--ai .vt-as-controls:has(> .vt-as-clear[hidden]) { margin-top: 0; }
.vt-as-clear {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  padding: 4px 2px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.vt-as-clear:hover { color: #fff; }
.vt-as-clear[hidden] { display: none; }

/* --- the thread: grows downward, scrolls internally on laptops --- */
.search-panel--ai .vt-as-thread {
  margin-top: 6px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.search-panel--ai .vt-as-thread[hidden] { display: none; }
.vt-as-q {
  margin: 14px 0 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.vt-as-q::before { content: "› "; color: rgba(160, 104, 177, 0.9); }

/* --- product cards --- */
.vt-as-cards {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
}
.vt-as-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.18s var(--ease-standard), background 0.18s var(--ease-standard);
}
.vt-as-card:hover { border-color: rgba(160, 104, 177, 0.6); background: rgba(255, 255, 255, 0.05); text-decoration: none; }
.vt-as-card img {
  width: 54px; height: 54px;
  object-fit: contain;
  flex: 0 0 auto;
  border-radius: calc(var(--radius-lg) - 4px);
  background: rgba(255, 255, 255, 0.06);
}
.vt-as-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vt-as-card__meta {
  font-size: max(9px, var(--fs-floor, 0px)); letter-spacing: 0.1em; text-transform: uppercase; font-weight: var(--fw-bold);
  color: var(--color-light-purple-60);
}
.vt-as-card__title { font-size: 14px; color: #fff; font-weight: var(--fw-medium); }
.vt-as-card__lead { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

/* --- vote row --- */
.vt-as-vote { display: flex; gap: 6px; margin-top: 10px; }
.vt-as-vote__btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-standard);
}
.vt-as-vote__btn:hover:not(:disabled) { border-color: rgba(255, 255, 255, 0.4); }
.vt-as-vote__btn:disabled { opacity: 0.45; cursor: default; }
.vt-as-vote__btn.is-picked { opacity: 1; border-color: rgba(160, 104, 177, 0.8); background: rgba(160, 104, 177, 0.16); }

/* --- note (rate limit / degrade) + foot --- */
.vt-as-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: rgba(255, 214, 150, 0.9);
}
.vt-as-note[hidden] { display: none; }
.vt-as-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* 55%, not 45%: the panel ground is rgba(22,16,30,.92), so over a light page
   below it composites to ~#292330 — where 45% white is 4.26:1 and this is
   10.5px text. 55% is 5.6:1. (a11y pass 2026-09-18) */
.vt-as-disclaimer { font-size: max(10.5px, var(--fs-floor, 0px)); color: rgba(255, 255, 255, 0.55); }
/* padding-block lifts the tap target from 19px to 25px without growing the
   text: WCAG 2.2 SC 2.5.8 asks 24px (launch list B16, 2026-09-30). */
.vt-as-escalation {
  flex: 0 0 auto;
  display: inline-block;
  padding-block: 3px;
  font-size: 12.5px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
/* The colour has to be RESTATED here. base.css carries
   `a:hover { color: var(--color-link-hover) }` — specificity (0,1,1), which
   outranks the plain `.vt-as-escalation` (0,1,0) above — so on hover this link
   was repainted Deep Purple #302c80 on the panel's near-black ground: 1.3:1,
   i.e. the words vanished (WCAG 1.4.3). The link-hover token is built for ink
   on white and has no business on a dark surface. (a11y pass 2026-09-18) */
.vt-as-escalation:hover,
.vt-as-escalation:focus-visible { color: #fff; text-decoration: underline; }

/* --- degraded: the robot bows out, the field is plain search again --- */
.search-panel--ai.is-degraded .vt-as-clear,
.search-panel--ai.is-degraded .vt-as-thread,
.search-panel--ai.is-degraded .vt-as-foot .vt-as-disclaimer { display: none; }

/* --- the results rail: the latest answer's cards + related content,
       OUTSIDE the conversation --- */
.vt-as-rail[hidden] { display: none; }
.vt-as-rail-results > :first-child { margin-top: 0; }

/* Editor-pinned links under the results (Assistant → Questions). */
.vt-as-rail-results:not(:empty) + .vt-as-featured {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.vt-as-featured .search-hit__title .arrow { opacity: 0.5; }
.vt-as-featured .search-hit:hover .arrow { opacity: 1; }

@media (min-width: 821px) {
  /* Two columns while there is something to show: conversation left,
     results right. Without .has-rail the panel stays a single column. */
  .search-panel--ai.has-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    column-gap: 20px;
    grid-template-areas:
      "suggested rail"
      "thread    rail"
      "note      rail"
      "controls  rail"
      "field     rail"
      "foot      rail";
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
  }
  .search-panel--ai.has-rail .vt-as-suggested   { grid-area: suggested; }
  .search-panel--ai.has-rail .vt-as-thread      { grid-area: thread; }
  .search-panel--ai.has-rail .vt-as-note        { grid-area: note; }
  .search-panel--ai.has-rail .vt-as-controls    { grid-area: controls; }
  .search-panel--ai.has-rail .search-panel__field { grid-area: field; }
  .search-panel--ai.has-rail .vt-as-foot        { grid-area: foot; }
  .search-panel--ai.has-rail .vt-as-rail {
    grid-area: rail;
    min-height: 0;
    max-height: 560px;
    overflow-y: auto;
    scrollbar-width: thin;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
  }
}

@media (min-width: 1240px) {
  /* The dropdown widens only when the rail is showing. */
  .search-panel--ai.has-rail { width: 760px; }
}

/* --- phones: full-screen sheet (chrome.css already pins the panel fixed
       below 1240px; this takes it the rest of the way) --- */
@media (max-width: 820px) {
  /* Below WordPress's toolbar when an editor is logged in (46px here): at top 0
     the bar covered the sheet's first 46px, ✕ included. --wp-admin--admin-bar--height
     is WordPress's own and absent for visitors, so 0. (2026-09-30) */
  .search-panel--ai {
    top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; bottom: 0;
    width: auto;
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    border-radius: 0;
    border-left: 0; border-right: 0;
    display: flex; flex-direction: column;
    /* the THREAD scrolls, never the sheet — the input must stay on screen */
    overflow: hidden;
    /* top padding clears the absolute ✕ */
    padding: 56px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .search-panel--ai .vt-as-suggested { overflow-y: auto; }
  .search-panel--ai .vt-as-thread { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* the rail stacks between the thread and the input, with its own scroll */
  .search-panel--ai .vt-as-suggested { order: 1; }
  .search-panel--ai .vt-as-thread { order: 2; }
  .search-panel--ai .vt-as-rail { order: 3; flex: 0 0 auto; max-height: 34dvh; overflow-y: auto; scrollbar-width: thin; margin-top: 10px; }
  .search-panel--ai .vt-as-note { order: 4; }
  .search-panel--ai .vt-as-controls { order: 5; }
  .search-panel--ai .search-panel__field { order: 6; }
  .search-panel--ai .vt-as-foot { order: 7; }
  /* the bottom cluster (controls → input → foot) pins to the sheet's floor */
  .search-panel--ai .vt-as-controls { margin-top: auto; padding-top: 14px; }
  .search-panel--ai .vt-as-controls:has(> .vt-as-clear[hidden]) { margin-top: auto; padding-top: 0; }
  .search-panel--ai .vt-as-foot { padding-top: 12px; }
}