/* ============================================================
   Embedded Agent panel
   Mounts at <section data-agent-panel id="talk-to-the-agent"> on
   /the-agent between hero and band I. Per council brief Phase D:
     Paper: paper-tint background, barn border at 0.4, ink text.
     Night / Open: frosted dark plate alpha 0.42, blur 6px,
     warm-bright border, cream-fixed text.
   ============================================================ */

/* The panel band uses treatment="agent-panel". The default
   .band__content card chrome (paper bg, shadow, padding) would
   double up against the panel's own surface, so we transparent it
   out and let the panel be the only visible plate inside the band. */
.band[data-treatment="agent-panel"] .band__content {
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.band[data-treatment="agent-panel"] .band__copy {
  display: block;
}

/* Hide the corner-bubble floating Agent widget on /the-agent. The
   embedded panel is the only Agent surface on this page; the corner
   widget would be redundant and creates two opening affordances for
   the same product. Other pages keep the corner widget. */
body.page-the-agent #ba-chat-widget {
  display: none;
}

.agent-panel {
  --agent-tint: var(--paper-tint);
  --agent-border: rgba(166, 75, 59, 0.4);
  --agent-text: var(--ink);
  --agent-text-secondary: var(--ink-sec);
  --agent-rule: rgba(35, 31, 26, 0.14);

  background: var(--agent-tint);
  border: 1px solid var(--agent-border);
  border-radius: var(--r-md);
  color: var(--agent-text);
  padding: var(--sp-xl);
  scroll-margin-top: 5rem;
}

:root[data-mode="night"] .agent-panel,
:root[data-mode="open"]  .agent-panel {
  --agent-tint: rgba(22, 33, 46, 0.55);
  --agent-border: var(--warm-bright);
  --agent-text: var(--cream-fixed);
  --agent-text-secondary: rgba(240, 230, 207, 0.78);
  --agent-rule: rgba(240, 230, 207, 0.18);

  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.agent-panel > .fx-eyebrow {
  margin: 0 0 var(--sp-sm);
}
.agent-panel > p {
  color: var(--agent-text-secondary);
  margin: 0 0 var(--sp-lg);
}

/* ----- Chat area ----------------------------------------------- */

.agent-panel__chat {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}

.agent-panel__messages {
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--agent-rule);
  border-radius: var(--r-sm);
  padding: var(--sp-md);
  min-height: 180px;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}
:root[data-mode="night"] .agent-panel__messages,
:root[data-mode="open"]  .agent-panel__messages {
  background: rgba(22, 33, 46, 0.45);
}

.agent-panel__message {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 92%;
}
.agent-panel__message p {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  font-family: var(--type-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.agent-panel__message--agent {
  align-self: flex-start;
}
.agent-panel__message--agent p {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--agent-rule);
}
.agent-panel__message--user {
  align-self: flex-end;
}
.agent-panel__message--user p {
  background: var(--barn);
  color: var(--paper);
}
:root[data-mode="night"] .agent-panel__message--agent p,
:root[data-mode="open"]  .agent-panel__message--agent p {
  background: rgba(240, 230, 207, 0.10);
  color: var(--cream-fixed);
  border-color: rgba(240, 230, 207, 0.18);
}

.agent-panel__tel {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Typing dots */
.agent-panel__typing p {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.agent-panel__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation: agentPanelDot 1.2s infinite;
}
.agent-panel__typing-dot:nth-child(2) { animation-delay: 0.18s; }
.agent-panel__typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes agentPanelDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 0.9;  transform: translateY(-2px); }
}

/* ----- Citation chip (Confident / Quiet / Defer) -------------- */

.agent-panel__chip {
  align-self: flex-start;
  display: inline-block;
  padding: 0.18em 0.65em;
  font-family: var(--type-ui);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  border-radius: var(--r-pill);
  border: 1px solid var(--agent-border);
  background: var(--agent-tint);
  color: var(--agent-text);
  opacity: 0.92;
}
.agent-panel__chip--confident {
  border-color: rgba(166, 75, 59, 0.55);
}
.agent-panel__chip--quiet {
  opacity: 0.7;
}
.agent-panel__chip--defer {
  border-color: var(--barn);
  background: rgba(166, 75, 59, 0.12);
}
:root[data-mode="night"] .agent-panel__chip--defer,
:root[data-mode="open"]  .agent-panel__chip--defer {
  border-color: var(--warm-bright);
  background: rgba(244, 196, 90, 0.12);
}

/* ----- Form -------------------------------------------------- */

.agent-panel__form {
  display: flex;
  gap: var(--gap-sm);
  align-items: stretch;
}
.agent-panel__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.85rem 1rem;
  font-family: var(--type-body);
  font-size: var(--fs-md);
  color: var(--agent-text);
  background: var(--paper);
  border: 1px solid var(--agent-rule);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.agent-panel__input::placeholder {
  color: var(--agent-text-secondary);
  font-style: italic;
}
.agent-panel__input:focus {
  border-color: var(--agent-border);
  box-shadow: 0 0 0 3px rgba(166, 75, 59, 0.18);
}
:root[data-mode="night"] .agent-panel__input,
:root[data-mode="open"]  .agent-panel__input {
  background: rgba(22, 33, 46, 0.65);
  color: var(--cream-fixed);
  border-color: rgba(240, 230, 207, 0.18);
}
:root[data-mode="night"] .agent-panel__input:focus,
:root[data-mode="open"]  .agent-panel__input:focus {
  border-color: var(--warm-bright);
  box-shadow: 0 0 0 3px rgba(244, 196, 90, 0.20);
}

.agent-panel__submit {
  flex: 0 0 auto;
}

/* ----- Soft CTA tail ----------------------------------------- */

.agent-panel__cta-tail {
  margin: var(--sp-lg) 0 0;
  text-align: center;
}

/* ----- Mobile -------------------------------------------------- */

@media (max-width: 640px) {
  .agent-panel {
    padding: var(--sp-lg);
  }
  .agent-panel__messages {
    min-height: 160px;
    max-height: 280px;
  }
  .agent-panel__form {
    flex-wrap: wrap;
  }
  .agent-panel__input {
    flex: 1 1 100%;
  }
  .agent-panel__submit {
    flex: 1 1 100%;
  }
}