/* AI shopping assistant (TODO 00001.5.19). DESIGN-GUIDE: AI panel = ai-surface ground, 1px ai edge, 4px radius,
   24px padding, ink text, source and caveat in small ai at the foot; the panel slides in from the right 0.35s
   (a sheet rises under 600); thinking dots pulse while waiting and stop when the answer lands. Teal only here. */

.norvane-assistant-open { overflow: hidden; }
.p-assistant { position: fixed; inset: 0; z-index: 300; }
.p-assistant *, .p-assistant *::before, .p-assistant *::after, .p-product-top__ai-ask, .p-product-top__ai-ask * { box-sizing: border-box; }
.p-assistant[hidden] { display: none; }
.p-assistant__scrim {
  position: absolute; inset: 0; background: rgba(4, 36, 77, 0.45); opacity: 0; transition: opacity 0.35s ease;
}
.p-assistant__sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100vw);
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--60); background: var(--wp--preset--color--ai-surface);
  border-left: 1px solid var(--wp--preset--color--ai); box-shadow: var(--wp--custom--shadow);
  color: var(--wp--preset--color--ink); transform: translateX(100%); transition: transform 0.35s cubic-bezier(.22, .61, .36, 1);
}
.p-assistant.is-open .p-assistant__scrim { opacity: 1; }
.p-assistant.is-open .p-assistant__sheet { transform: none; }
.p-assistant p { margin: 0; }
.p-assistant__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40); border-bottom: 1px solid var(--wp--preset--color--ai);
}
.p-assistant__label, .p-assistant__cap {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--30); color: var(--wp--preset--color--ai);
  font-size: var(--wp--preset--font-size--label); font-weight: var(--wp--custom--font-weight--label);
  letter-spacing: var(--wp--custom--letter-spacing--label); line-height: 1.3; text-transform: uppercase;
}
.p-assistant__close {
  display: inline-flex; align-items: center; justify-content: center; width: var(--wp--custom--touch); height: var(--wp--custom--touch);
  margin-right: -10px; border: 0; background: transparent; color: var(--wp--preset--color--navy); cursor: pointer; border-radius: var(--wp--custom--radius--default);
}
.p-assistant__close .p-icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.p-assistant__close:focus-visible, .p-assistant__chips button:focus-visible, .p-assistant__ask button:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px;
}
.p-assistant__log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50);
}
.p-assistant__intro { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.5; }
.p-assistant__cap { margin-bottom: calc(-1 * var(--wp--preset--spacing--30)); }
.p-assistant__chips { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); margin: 0; padding: 0; list-style: none; }
.p-assistant__chips button {
  width: 100%; min-height: var(--wp--custom--touch); padding: 8px var(--wp--preset--spacing--40); text-align: left; cursor: pointer;
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--ai); border-radius: var(--wp--custom--radius--default);
  color: var(--wp--preset--color--ai); font: 500 var(--wp--preset--font-size--small)/1.4 var(--wp--preset--font-family--montserrat);
}
@media (hover: hover) and (pointer: fine) { .p-assistant__chips button:hover { text-decoration: underline; } }
.p-assistant__ask, .p-product-top__ai-ask {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); flex: none;
  height: var(--wp--custom--control); padding-left: var(--wp--preset--spacing--50);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--slate);
  border-radius: var(--wp--custom--radius--default); color: var(--wp--preset--color--ai);
}
.p-assistant__ask input, .p-product-top__ai-ask input {
  flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent;
  font: 400 var(--wp--preset--font-size--body)/1 var(--wp--preset--font-family--montserrat); color: var(--wp--preset--color--ink);
}
.p-assistant__ask input::placeholder, .p-product-top__ai-ask input::placeholder { color: var(--wp--preset--color--slate); opacity: 1; }
.p-assistant__ask input:focus, .p-product-top__ai-ask input:focus { outline: none; }
.p-assistant__ask:focus-within, .p-product-top__ai-ask:focus-within { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px; }
.p-assistant__ask button, .p-product-top__ai-ask button {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 3px;
  border: 0; cursor: pointer; background: var(--wp--preset--color--ai); color: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--default);
}
.p-product-top .p-product-top__ai-ask input:focus-visible { outline: none; }
.p-product-top .p-product-top__ai-ask button:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px; }
.p-assistant__note { color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }

/* Messages (panel and Product aside). */
.p-ai-msg { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--40); }
.p-ai-msg p { margin: 0; }
.p-ai-msg--q { color: var(--wp--preset--color--navy); font-weight: 600; line-height: 1.45; }
.p-ai-msg--q .p-icon { flex: none; margin-top: 1px; color: var(--wp--preset--color--navy); fill: none; stroke: currentColor; stroke-width: 2; }
.p-ai-msg__mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-top: -4px;
  border-radius: 50%; background: var(--wp--preset--color--ai); color: var(--wp--preset--color--white);
}
.p-ai-msg__mark .p-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.p-ai-msg__body { min-width: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); }
.p-ai-msg__text { color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.55; overflow-wrap: anywhere; }
.p-ai-msg__nb { white-space: nowrap; }
.p-ai-msg.is-note .p-ai-msg__text { font-size: var(--wp--preset--font-size--small); }
.p-ai-msg__src { color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.p-ai-msg__src a { color: var(--wp--preset--color--ai); text-underline-offset: 3px; }
.p-ai-msg__src a:focus-visible { outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--navy); outline-offset: 2px; }
.p-ai-msg__dots { display: inline-flex; gap: 6px; padding-top: 8px; }
.p-ai-msg__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--ai); }
/* Motion (stage 10, 00001.5.22.11; design/FINDINGS.md "Motion inventory: p-assistant"). Interaction moves, not entrances:
   the kit observes only server markup, and every node here is built by assistant.js after a question. Start states live
   under html.mo only (reduced motion and JS off show the resting look). Transform only on messages: the question, the
   AI answer, its source line and the caveat keep opacity 1. Each message (the question, the waiting row, then the
   answer body when it lands) settles 8 px from above, 0.9 s, so nothing grows the log's scroll height. The thinking
   dots pulse in turn for three cycles (3.9 s, longer than every logged answer) and rest at full opacity: one-shot. */
.mo .p-ai-msg, .mo .p-ai-msg__body { animation: p-ai-settle var(--mo-dur) var(--mo-ease) backwards; }
.mo .p-ai-msg__dots span { animation: p-ai-dot 1.2s ease-in-out 3; }
.mo .p-ai-msg__dots span:nth-child(2) { animation-delay: 0.15s; }
.mo .p-ai-msg__dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes p-ai-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.p-ai-msg__think { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes p-ai-settle { from { transform: translate3d(0, -8px, 0); } to { transform: none; } }

/* Product aside live area. */
.p-product-top__ai-live { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--60); }
.p-product-top__ai-live[hidden] { display: none; }
.p-product-top__ai-ask { margin-top: var(--wp--preset--spacing--60); }

/* Under 600 the panel is a sheet that rises from the foot. */
@media (max-width: 599.98px) {
  .p-assistant__sheet {
    top: auto; left: 0; width: 100%; height: min(86vh, 720px); padding: var(--wp--preset--spacing--50) 16px;
    border-left: 0; border-top: 1px solid var(--wp--preset--color--ai); border-radius: 8px 8px 0 0; transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-assistant__scrim, .p-assistant__sheet { transition: none; }
  .p-ai-msg, .p-ai-msg__body, .p-ai-msg__dots span { animation: none; }
  .p-ai-msg__dots { display: none; }
  .p-ai-msg__think { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; padding-top: 4px; color: var(--wp--preset--color--ai); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
}