/* "Ask a question" (assets/js/assistant.js): the floating launcher and its panel, on the website
   and in the app (/app). One stylesheet for both: it reads only --ask-* properties, which each surface
   maps to its own design tokens (site: site.css; app: app/src/shared/shell/shell.css), so it follows
   each one's look, light/dark theme and stacking scale (tokens.json `layer`: under every modal dialog). --ask-bottom lifts the launcher over a surface's bottom bars. */

.pmc-ask__launch {
  position: fixed; right: var(--ask-space-5); bottom: var(--ask-bottom, calc(var(--ask-space-5) + env(safe-area-inset-bottom))); z-index: var(--ask-layer-launcher);
  min-height: var(--ask-launch-h, 48px); padding: 0 var(--ask-space-5); border-radius: var(--ask-radius-control); border: 0; cursor: pointer;
  font: 600 var(--ask-size-note)/1 var(--ask-font); color: var(--ask-color-on-accent); background: var(--ask-color-accent);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); transition: transform var(--ask-press) var(--ask-ease);
}
.pmc-ask__launch:active { transform: scale(0.97); }
.pmc-ask {
  position: fixed; z-index: var(--ask-layer-assistant); inset: auto 0 0 0; display: flex; flex-direction: column; gap: var(--ask-space-3);
  max-height: min(640px, 85dvh); padding: var(--ask-space-5) var(--ask-space-5) calc(var(--ask-space-5) + env(safe-area-inset-bottom));
  background: var(--ask-color-panel); border: 1px solid var(--ask-color-rule-card); border-radius: var(--ask-radius-card) var(--ask-radius-card) 0 0;
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.4);
  transition: opacity 200ms var(--ask-ease), transform 200ms var(--ask-ease);
  @starting-style { opacity: 0; transform: translateY(12px); }
}
@media (min-width: 640px) { .pmc-ask { inset: auto var(--ask-space-5) var(--ask-space-5) auto; width: 400px; border-radius: var(--ask-radius-card); } }
@media (prefers-reduced-motion: reduce) { .pmc-ask { @starting-style { transform: none; } } }
.pmc-ask[hidden] { display: none; }
.pmc-ask__head { display: flex; justify-content: space-between; align-items: center; }
.pmc-ask__head h2 { font-size: var(--ask-size-card); }
.pmc-ask__close { min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1; color: var(--ask-color-text-muted); background: none; border: 0; cursor: pointer; }
.pmc-ask__note { font-size: var(--ask-size-label); color: var(--ask-color-text-label); }
.pmc-ask__log { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--ask-space-3); overscroll-behavior: contain; }
.pmc-ask__msg {
  max-width: 88%; padding: var(--ask-space-3) var(--ask-space-4); border-radius: var(--ask-radius-card); font-size: var(--ask-size-small); line-height: 1.5; overflow-wrap: anywhere;
  /* Each message rises in as it's added; the answer cross-fades in over the spinning coin. */
  transition: opacity 220ms var(--ask-ease), transform 220ms var(--ask-ease), filter 120ms ease;
  @starting-style { opacity: 0; transform: translateY(8px) scale(0.98); }
}
.pmc-ask__msg--user { transform-origin: bottom right; }
.pmc-ask__msg--assistant { transform-origin: bottom left; }
.pmc-ask__msg.is-arriving { opacity: 0.3; filter: blur(2px); }
.pmc-ask__msg--wait { display: inline-flex; align-items: center; min-height: 44px; }
.pmc-ask.is-closing { opacity: 0; transform: translateY(8px); transition-duration: 160ms; }
@media (prefers-reduced-motion: reduce) {
  .pmc-ask__msg { @starting-style { transform: none; } }
  .pmc-ask__msg.is-arriving { filter: none; }
  .pmc-ask.is-closing { transform: none; }
  .pmc-ask__launch { transition: none; }
  .pmc-ask__launch:active { transform: none; }
}
.pmc-ask__msg--user { align-self: flex-end; color: var(--ask-color-on-accent); background: var(--ask-color-accent); }
.pmc-ask__msg--assistant { align-self: flex-start; background: var(--ask-color-card); border: 1px solid var(--ask-color-rule-card); }
.pmc-ask__msg--error { border-color: var(--ask-color-accent); }
.pmc-ask__msg--error::before { content: "Couldn’t answer · "; font-weight: 600; color: var(--ask-color-accent); }
.pmc-ask__msg a { color: var(--ask-color-accent); }
.pmc-ask__form { display: flex; gap: var(--ask-space-2); align-items: stretch; }
/* Room under the page for the floating launcher, so it never covers the last row or the footer. */
body.pmc-has-ask { padding-bottom: 80px; }
.pmc-ask__form textarea {
  flex: 1; resize: none; font: inherit; font-size: max(16px, var(--ask-size-body)); color: var(--ask-color-text);
  background: var(--ask-color-ground); border: 1px solid var(--ask-color-rule-input); border-radius: var(--ask-radius-control); padding: var(--ask-space-3);
}
.pmc-ask__form textarea:focus-visible { outline: 2px solid var(--ask-color-accent); outline-offset: 1px; border-color: var(--ask-color-accent); }

/* ---------- Photo viewer (assets/js/lightbox.js) ----------
   A full-screen modal <dialog>; the script sizes and moves the frame, CSS only paints it. */
.pmc-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ask-color-text); overflow: hidden; overscroll-behavior: contain; }
.pmc-lb::backdrop { background: transparent; }
.pmc-lb__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ask-color-ground) 94%, black); }
.pmc-lb__stage { position: absolute; inset: 0; padding: var(--ask-space-3) var(--ask-gutter); touch-action: none; }   /* its padding is the photo's margin (lightbox.js reads it) */
.pmc-lb__img { cursor: zoom-in; }
.pmc-lb.is-zoomed .pmc-lb__stage, .pmc-lb.is-zoomed .pmc-lb__img { cursor: grab; }
.pmc-lb__frame { position: absolute; transform-origin: 50% 50%; will-change: transform; }
.pmc-lb__frame.is-easing { transition: transform 300ms var(--ask-ease); }
.pmc-lb__img { width: 100%; height: 100%; max-width: none; border-radius: var(--ask-radius-card); user-select: none; -webkit-user-drag: none; }
.pmc-lb__tools { position: absolute; top: calc(var(--ask-space-3) + env(safe-area-inset-top)); right: var(--ask-space-3); display: flex; gap: var(--ask-space-2); }
.pmc-lb__btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  color: var(--ask-color-text); background: color-mix(in srgb, var(--ask-color-panel) 86%, transparent); transition: background-color var(--ask-fast) ease, transform var(--ask-press) var(--ask-ease);
}
.pmc-lb__btn:active:not(:focus-visible) { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .pmc-lb__btn:hover { background: var(--ask-color-panel); color: var(--ask-color-accent); } }
.pmc-lb__bar { position: absolute; inset: auto 0 0; width: fit-content; margin-inline: auto; padding: var(--ask-space-4) var(--ask-space-5) calc(var(--ask-space-4) + env(safe-area-inset-bottom)); text-align: center; pointer-events: none; }
.pmc-lb__caption { font-weight: 600; }
.pmc-lb__hint { font-size: var(--ask-size-label); color: var(--ask-color-text-label); }
.pmc-lb.is-zoomed .pmc-lb__bar { opacity: 0; transition: opacity var(--ask-fast) ease; }
@media (max-height: 499.98px) { .pmc-lb__bar { display: none; } }   /* short landscape screens: all the height goes to the photo */
@media (prefers-reduced-motion: reduce) { .pmc-zoom img, .pmc-lb__btn { transition: none; } .pmc-zoom:active img, .pmc-lb__btn:active { transform: none; } }

/* Visually hidden, still read by screen readers. */
.pmc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* The panel's own "Ask" button (it doesn't depend on either surface's button styles). */
.pmc-ask__send {
  min-height: 48px; padding: 0 var(--ask-space-4); border: 0; border-radius: var(--ask-radius-control); cursor: pointer;
  font: 600 var(--ask-size-note)/1 var(--ask-font); color: var(--ask-color-on-accent); background: var(--ask-color-accent);
  transition: transform var(--ask-press) var(--ask-ease);
}
.pmc-ask__send:active:not(:focus-visible) { transform: scale(0.97); }
.pmc-ask__send[aria-disabled="true"] { opacity: 0.6; cursor: progress; }
.pmc-ask__send:focus-visible, .pmc-ask__launch:focus-visible, .pmc-ask__close:focus-visible { outline: 2px solid var(--ask-color-accent); outline-offset: 3px; }

/* "Send this to the team?": Penny's write-up of a problem, for the customer to check and send. */
.pmc-ask__card {
  display: grid; gap: var(--ask-space-2); padding: var(--ask-space-4);
  background: var(--ask-color-card); border: 1px solid var(--ask-color-rule-card); border-left: 3px solid var(--ask-color-accent); border-radius: var(--ask-radius-card);
  overflow-y: auto; max-height: 70%;   /* it replaces the question box; the conversation keeps some room */
}
.pmc-ask.has-talk .pmc-ask__note { display: none; }   /* once there's a conversation, it needs the room */
.pmc-ask__form[hidden] { display: none; }
.pmc-ask__card h3 { margin: 0; font: 600 var(--ask-size-body)/1.3 var(--ask-font); color: var(--ask-color-text); }
.pmc-ask__card h3:focus { outline: none; }   /* a starting point for the keyboard, not a control */
.pmc-ask__card label { margin-top: var(--ask-space-2); font: 600 var(--ask-size-note)/1.3 var(--ask-font); color: var(--ask-color-text); }
.pmc-ask__field {
  width: 100%; min-height: 48px; box-sizing: border-box; font: inherit; font-size: max(16px, var(--ask-size-note)); color: var(--ask-color-text);
  background: var(--ask-color-ground); border: 1px solid var(--ask-color-rule-input); border-radius: var(--ask-radius-control); padding: var(--ask-space-2) var(--ask-space-3);
}
textarea.pmc-ask__field { resize: vertical; }
.pmc-ask__field:focus-visible { outline: 2px solid var(--ask-color-accent); outline-offset: 1px; border-color: var(--ask-color-accent); }
.pmc-ask__card-status:empty { display: none; }
.pmc-ask__card-status { margin: 0; font-size: var(--ask-size-label); color: var(--ask-color-text); }
.pmc-ask__card-status.is-error { color: var(--ask-color-danger); font-weight: 600; }
.pmc-ask__card-status.is-error::before { content: "⚠ "; }
.pmc-ask__field[aria-invalid="true"] { border-color: var(--ask-color-danger); }
.pmc-ask__card-actions { display: flex; flex-wrap: wrap; gap: var(--ask-space-2); margin-top: var(--ask-space-2); }
.pmc-ask__later {
  min-height: 44px; padding: 0 var(--ask-space-4); border-radius: var(--ask-radius-control); cursor: pointer;
  font: 600 var(--ask-size-note)/1 var(--ask-font); color: var(--ask-color-text); background: transparent; border: 1px solid var(--ask-color-rule-input);
}
.pmc-ask__later:focus-visible { outline: 2px solid var(--ask-color-accent); outline-offset: 3px; }

/* Penny's coin. On the button and beside her name it sits still; while she thinks it spins (steady,
   linear, quick: a fast spinner makes the wait feel shorter); the first time the button appears in a
   tab it flips once. Reduced motion: a soft glow while thinking, no flip. */
.pmc-ask__coin { width: 20px; height: 20px; flex: none; }
.pmc-ask__launch { display: inline-flex; align-items: center; gap: var(--ask-space-2); }
.pmc-ask__launch[hidden] { display: none; }   /* inline-flex would otherwise beat [hidden] */
.pmc-ask__head h2 { display: flex; align-items: center; gap: var(--ask-space-2); }
.pmc-ask__coin--head { width: 24px; height: 24px; color: var(--ask-color-accent); }
.pmc-ask__msg--wait .pmc-ask__coin { width: 24px; height: 24px; color: var(--ask-color-accent); }
.pmc-ask__coin--spin { animation: pmc-ask-spin 0.9s linear infinite; }
@keyframes pmc-ask-spin { to { transform: rotateY(360deg); } }
.pmc-ask__launch.is-new .pmc-ask__coin { animation: pmc-ask-flip 700ms cubic-bezier(0.23, 1, 0.32, 1) 300ms both; }
@keyframes pmc-ask-flip { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
@keyframes pmc-ask-glow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pmc-ask__coin--spin { animation: pmc-ask-glow 1.2s ease-in-out infinite; }
  .pmc-ask__launch.is-new .pmc-ask__coin { animation: none; }
}

/* The conversation's scrollbar: present (it's the sign there's more above, and some people choose
   always-visible bars) but quiet: thin, in the panel's own rule colour, no track; the gutter stays so
   the bubbles don't change width; a soft fade at the top hints at earlier messages when bars are hidden. */
.pmc-ask__log {
  scrollbar-width: thin; scrollbar-color: var(--ask-color-rule-input) transparent; scrollbar-gutter: stable;
}
.pmc-ask__log.is-scrolled { mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ask-space-4)); }