/* Triage facade styles. Loaded by macros/triage.html via a static <link>
 * tag, so every page that surfaces the facade picks them up automatically. */

/* CTA variant (variant="cta"): heading and body live inside the same card
 * as the chat, separated by a dashed divider. The .triage-card--cta margin
 * rule lives below the base .triage-card rule on purpose so cascade order
 * lets the modifier override the base auto-only margin. */
.triage-cta-header {
  text-align: center;
  padding: 8px 4px 0;
}
.triage-cta-heading {
  font-family: var(--vc-font-heading);
  font-size: 26px;
  color: var(--vc-text);
  margin: 0 0 12px;
  line-height: 1.2;
}
/* Accented word treatment. Authors wrap a key word in markdown italics
 * (*word*) in the frontmatter `cta_heading` — the macro runs it through
 * Zola's markdown(inline=true) filter to produce a plain <em>, styled
 * here as sage italic serif to match the homepage hero accent pattern.
 * The explicit .accent-positive / .accent-dismiss classes are kept so
 * authors can still drop in raw HTML for the terracotta "dismiss" tone
 * when contrast is needed (markdown has no syntax for a second em colour). */
.triage-cta-heading em {
  font-family: var(--vc-font-heading);
  font-style: italic;
  color: var(--vc-accent-positive);
  transition: var(--vc-tw);
}
.triage-cta-heading em.accent-dismiss { color: var(--vc-accent-dismiss); transition: var(--vc-tw); }
.triage-cta-body {
  font-family: var(--vc-font-body);
  font-size: 15px;
  color: var(--vc-text-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}
.triage-cta-divider {
  border: 0;
  border-top: 1px dashed var(--vc-border);
  margin: 24px -8px 22px;
  height: 0;
}

.triage-card {
  border-radius: 16px;
  padding: 28px 28px 20px;
  max-width: 580px;
  margin: 0 auto;
  text-align: left;
  background: var(--vc-surface);
  border: 1px solid var(--vc-border-light);
  box-shadow: var(--vc-card-shadow);
  transition: var(--vc-tw);
  position: relative;
  z-index: 2;
}
.triage-card--cta {
  margin: 48px auto 64px;
  border-color: color-mix(in srgb, var(--vc-primary) 28%, var(--vc-border-light));
  /* Soft sage glow layered beneath the base card shadow to flag the CTA as
   * the action point on the page. color-mix keeps the tint theme-aware —
   * --vc-primary resolves per theme, so dark mode picks up Ember Sage. */
  box-shadow:
    var(--vc-card-shadow),
    0 0 48px -8px color-mix(in srgb, var(--vc-primary) 22%, transparent);
}
.triage-greeting {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 10px 10px 10px 4px;
  display: inline-block;
  background: var(--vc-sage-light);
  color: var(--vc-primary);
  transition: var(--vc-tw);
}
.input-area { position: relative; }
.input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  padding: 6px 6px 6px 16px;
  background: var(--vc-bg);
  border: 1px solid var(--vc-border);
  transition: var(--vc-tw);
}
.input-row.input-focused {
  border-color: var(--vc-sage-mid);
  box-shadow: 0 0 0 3px rgba(122,158,130,0.1);
}
.input-wrap {
  flex: 1;
  position: relative;
  min-height: 38px;
  display: flex;
  align-items: center;
}
.input-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--vc-font-body);
  font-size: 14px;
  outline: none;
  padding: 8px 0;
  color: var(--vc-text);
  position: relative;
  z-index: 2;
}
.placeholder-cycle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vc-font-body);
  font-size: 14px;
  color: var(--vc-text-tertiary);
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  height: 20px;
  transition: opacity 0.15s ease;
}
.placeholder-text {
  display: block;
  height: 20px;
  line-height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.placeholder-text.entering { opacity: 0; transform: translateY(10px); }
.placeholder-text.visible  { opacity: 1; transform: translateY(0); }
.placeholder-text.exiting  { opacity: 0; transform: translateY(-10px); }
.input-wrap.has-value .placeholder-cycle,
.input-wrap.is-focused .placeholder-cycle { opacity: 0; }

/* Animated caret on the cycling placeholder. Signals "this is a text input"
 * even when the input does not have focus. The cycle (and the caret with it)
 * fade out as soon as the user focuses or types via .input-wrap.is-focused
 * or .input-wrap.has-value, where the real browser caret takes over. */
.placeholder-text::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -2px;
  animation: triage-caret-blink 1.06s steps(1, end) infinite;
}
@keyframes triage-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .placeholder-text::after { animation: none; opacity: 0.7; }
}

/* Send icon button. Replaces the mic button slot when the input has a value.
 * The mic button is the empty-state affordance ("you can talk"); the send
 * icon is the ready-state affordance ("you have something to send"). Only
 * one is visible at a time. */
.send-icon-button {
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--vc-primary);
  color: #fff;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.send-icon-button:hover { filter: brightness(1.15); }
.send-icon-button svg { width: 18px; height: 18px; }
.input-row.has-value .mic-wrap { display: none; }
.input-row.has-value .send-icon-button { display: flex; }

.mic-button {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vc-text-tertiary);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.mic-button:hover {
  color: var(--vc-primary);
  background: var(--vc-sage-light);
}
.mic-button svg { width: 18px; height: 18px; }
.mic-wrap { position: relative; flex-shrink: 0; }
.mic-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  font-family: var(--vc-font-body);
  font-size: 10px;
  font-style: italic;
  color: var(--vc-tooltip-text);
  background: var(--vc-tooltip-bg);
  border: 1px solid var(--vc-tooltip-border);
  border-radius: 6px;
  padding: 4px 8px;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.mic-tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  right: 12px;
  width: 6px;
  height: 6px;
  background: var(--vc-tooltip-bg);
  border-right: 1px solid var(--vc-tooltip-border);
  border-bottom: 1px solid var(--vc-tooltip-border);
  transform: rotate(45deg);
}
.mic-tooltip.hidden {
  opacity: 0;
  transform: translateY(4px);
}

.focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
  /* max-height transition needs a fixed ceiling. Pick a value that comfortably
   * fits any reasonable starter list (4-6 chips wrapping to 2-3 rows on
   * narrow viewports). The actual rendered height is well under this. */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}
.focus-chips.visible { max-height: 480px; opacity: 1; margin-top: 12px; }
.focus-chips li {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.3;
  background: var(--vc-bg);
  border: 1px solid var(--vc-border);
  color: var(--vc-text-muted);
}
.focus-chips li:hover {
  border-color: var(--vc-sage-mid);
  color: var(--vc-primary);
  background: var(--vc-sage-light);
}
.focus-chips-label {
  font-size: 11px;
  font-weight: 400;
  color: var(--vc-text-tertiary);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
}
.focus-chips-label.visible { max-height: 20px; opacity: 1; margin-top: 14px; margin-bottom: 6px; }

.consent-disclosure {
  text-align: center;
  padding: 10px 0 2px;
  font-size: 11px;
  color: var(--vc-text-tertiary);
  transition: var(--vc-tw);
}
.consent-learn-more {
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  color: var(--vc-text-muted);
  padding: 0;
  /* Keep the label and chevron on the same line, even when the disclosure
   * sentence wraps. The whole button becomes a single inline-block atom that
   * the browser will move to the next line as one unit if it doesn't fit. */
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}
/* Animated expand/collapse via CSS grid-template-rows. The panel reserves
 * a 0fr / 1fr row that animates smoothly between collapsed and expanded
 * states without needing a fixed max-height. The inner wrapper carries the
 * actual padding and overflow:hidden so the content stays clipped during
 * the transition. */
.consent-panel {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  text-align: left;
  color: var(--vc-text-muted);
  font-size: 11px;
  line-height: 1.5;
  transition: grid-template-rows 0.3s ease, margin-top 0.3s ease, opacity 0.2s ease;
}
.consent-panel.visible {
  grid-template-rows: 1fr;
  margin-top: 8px;
  opacity: 1;
}
.consent-panel-inner {
  min-height: 0;
  overflow: hidden;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--vc-sand);
  transition: padding 0.3s ease;
}
.consent-panel.visible .consent-panel-inner {
  padding: 10px 12px;
}
.consent-panel p { margin: 0 0 6px; }
.consent-links { display: flex; gap: 12px; }
.consent-links a { color: var(--vc-primary); text-decoration: underline; }
.consent-learn-more svg {
  width: 10px;
  height: 10px;
  margin-left: 2px;
  vertical-align: -1px;
  transition: transform 0.25s ease;
}
.consent-disclosure[data-expanded="true"] .consent-learn-more svg {
  transform: rotate(180deg);
}

/* Mobile: collapse the padding so the input has room to breathe. Also bump
 * the input font-size to 16px to prevent iOS Safari's automatic zoom-on-focus. */
@media (max-width: 640px) {
  .triage-card {
    padding: 20px 16px 16px;
    border-radius: 14px;
  }
  .triage-card--cta {
    margin: 32px auto 48px;
  }
  .triage-cta-heading {
    font-size: 22px;
  }
  .triage-cta-body {
    font-size: 14px;
  }
  .triage-cta-divider {
    margin: 20px -4px 18px;
  }
  .input-row {
    padding: 6px 6px 6px 12px;
    gap: 6px;
  }
  .input-wrap input,
  .placeholder-cycle,
  .placeholder-text {
    font-size: 16px;
  }
  .mic-button,
  .send-icon-button {
    padding: 6px;
  }
}

/* Consent gate tooltip */
.consent-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 12px;
  right: 12px;
  background: var(--vc-surface, #2a2d33);
  border: 1px solid var(--vc-border, rgba(255,255,255,0.08));
  border-radius: 16px;
  padding: 16px;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  animation: consent-fade-in 0.2s ease;
}
@keyframes consent-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.consent-tooltip-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--vc-text, #e5e5e5);
  margin: 0 0 12px;
}
.consent-highlight {
  color: var(--vc-primary, #6E9B78);
  font-weight: 500;
}
.consent-tooltip-links {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
}
.consent-tooltip-links a {
  color: var(--vc-text-muted, #999);
  text-decoration: underline;
}
.consent-spacer { flex: 1; }
.consent-go-back {
  background: none;
  border: none;
  color: var(--vc-text-muted, #999);
  text-decoration: underline;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0;
}
.consent-tooltip-arrow {
  position: absolute;
  bottom: -6px;
  right: 48px;
  width: 12px;
  height: 12px;
  background: var(--vc-surface, #2a2d33);
  border-right: 1px solid var(--vc-border, rgba(255,255,255,0.08));
  border-bottom: 1px solid var(--vc-border, rgba(255,255,255,0.08));
  transform: rotate(45deg);
}
/* When the consent gate is active, hide the mic/send pair and show Continue */
.input-row.consent-gate-active .mic-wrap,
.input-row.consent-gate-active .send-icon-button {
  display: none !important;
}
.consent-continue-button {
  background: var(--vc-primary, #6E9B78);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s ease;
  white-space: nowrap;
}
.consent-continue-button:hover { filter: brightness(1.12); }
.facade-mic-denied {
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 0.8125rem;
  color: var(--vc-text-muted, #6b6b6b);
  background: var(--vc-surface-high, #f4eee4);
  border-radius: 8px;
  text-align: center;
}