/* =============================================================================
   Bot Framework Web Chat, dressed as the ABF panel.

   Ported from the component Silverside delivered
   (Silverside/silverside.html), with three deliberate departures:

   1. Their shell was a fixed 820px box with its own header, sponsor card and
      footer. Ours is the full-height panel in index.html, which already carries
      the Microsoft and Silverside credits in its header — a hard client
      requirement. So only the chat itself is ported; the chrome stays ours.

   2. Their type was set for a small embed: 11px bubbles, 9px sources, 8px
      timestamps. In a 100vh column that is needlessly small, and 8px is not
      readable text. Everything is in rem here, scaled to the rest of the panel.

   3. Colours come from ds/tokens instead of being hard-coded. Their navy
      (#07185f) and pink (#ec008c) were near-misses of the ABF swatches
      (#001358, #e6007e), which shows up when they sit next to our own
      elements. Bubbles use a white overlay rather than a third navy, so they
      track the panel background.

   Web Chat ships its own stylesheet with high specificity, so overriding it
   needs !important more often than is comfortable. That is on their side of
   the fence, not ours.
   ============================================================================= */

/* The chat replaces the body's own padding and scrolling: Web Chat brings its
   own transcript scroller, and two nested scrollers is the classic way to make
   a panel feel broken. */
.panel__body.has-chat { padding: 0; gap: 0; overflow: hidden; }

.panel__chat-head { flex: none; padding: 1.5rem 1.5rem 0.75rem; }
.panel__chat-head .panel__prompts-label { margin-bottom: 0.5rem; }

#panelChat {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: var(--abf-navy);
}

/* --- connection status ---------------------------------------------------- */

.panel__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex: none;
  margin-left: auto;
  padding: 0.1875rem 0.5rem;
  border-radius: var(--radius-round);
  background: #ffffff14;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.panel__status-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: var(--radius-round);
  background: var(--abf-orange);
  flex: none;
}
.panel__status.is-online .panel__status-dot { background: #22c55e; }
.panel__status.is-down .panel__status-dot { background: var(--abf-magenta); }

/* --- the ABF thinking indicator: three sparkles -------------------------- */

#panelChat .webchat__typing-indicator {
  position: relative !important;
  display: block !important;
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  height: 1.375rem !important;
  min-height: 1.375rem !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  background: url("../ds/assets/agent-spin.png") no-repeat 0 center/1.25rem 1.25rem !important;
  animation: abf-sparkle-1 1.2s linear infinite !important;
}
#panelChat .webchat__typing-indicator > * { display: none !important; }

#panelChat .webchat__typing-indicator::before,
#panelChat .webchat__typing-indicator::after {
  content: "";
  position: absolute;
  top: 0.0625rem;
  width: 1.25rem;
  height: 1.25rem;
  background: url("../ds/assets/agent-spin.png") no-repeat center/contain;
  opacity: 0.45;
}
#panelChat .webchat__typing-indicator::before { left: 1.625rem; animation: abf-sparkle-2 1.2s linear infinite; }
#panelChat .webchat__typing-indicator::after  { left: 3.25rem;  animation: abf-sparkle-3 1.2s linear infinite; }

@keyframes abf-sparkle-1 {
  0%, 20%, 100% { filter: brightness(1.7); }
  30%, 90%      { filter: brightness(0.65); }
}
@keyframes abf-sparkle-2 {
  0%, 25%, 62%, 100% { opacity: 0.45; filter: brightness(0.75); }
  33%, 53%           { opacity: 1;    filter: brightness(1.7); }
}
@keyframes abf-sparkle-3 {
  0%, 58%, 95%, 100% { opacity: 0.45; filter: brightness(0.75); }
  66%, 86%           { opacity: 1;    filter: brightness(1.7); }
}

/* Respect a stated preference for less movement — the sparkles are decoration,
   the typing indicator's presence is the actual signal. */
@media (prefers-reduced-motion: reduce) {
  #panelChat .webchat__typing-indicator,
  #panelChat .webchat__typing-indicator::before,
  #panelChat .webchat__typing-indicator::after { animation: none !important; }
}

/* --- answers -------------------------------------------------------------- */

#panelChat .webchat__bubble__content {
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}
#panelChat .webchat__bubble__content p { margin: 0 0 0.625rem !important; }
#panelChat .webchat__bubble__content p:last-child { margin-bottom: 0 !important; }

#panelChat .webchat__bubble__content ul,
#panelChat .webchat__bubble__content ol {
  margin: 0.5rem 0 0.75rem !important;
  padding-left: 1.125rem !important;
}
#panelChat .webchat__bubble__content li { margin-bottom: 0.25rem !important; }

#panelChat .webchat__bubble__content h1,
#panelChat .webchat__bubble__content h2,
#panelChat .webchat__bubble__content h3,
#panelChat .webchat__bubble__content h4 {
  margin: 0.875rem 0 0.375rem !important;
  color: #fff !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
#panelChat .webchat__bubble__content h1 { font-size: 1.125rem !important; }
#panelChat .webchat__bubble__content h2 { font-size: 1rem !important; }
#panelChat .webchat__bubble__content h3 { font-size: 0.9375rem !important; }
#panelChat .webchat__bubble__content h4 { font-size: 0.875rem !important; }

/* Azure for links, the same as the credit line in the panel header. */
#panelChat .webchat__bubble__content a {
  color: var(--abf-azure) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  overflow-wrap: anywhere;
}
#panelChat .webchat__bubble__content a:hover { text-decoration: underline !important; }

/* --- Sources ------------------------------------------------------------
   The agent closes an answer with a "Sources" heading and a list. There is no
   class to hook onto, so this leans on it being the last heading in the
   bubble, as their original did. Fragile by nature: if the answer format
   changes, this styling quietly stops applying. It degrades to an ordinary
   heading and list, which is why it is acceptable. */
#panelChat .webchat__bubble__content h3:last-of-type {
  margin-top: 0.75rem !important;
  margin-bottom: 0.25rem !important;
  padding-top: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-top: 1px solid var(--abf-white-faded) !important;
}
#panelChat .webchat__bubble__content h3:last-of-type + ul {
  margin: 0.25rem 0 0.125rem !important;
  padding-left: 1rem !important;
  font-size: 0.75rem !important;
  line-height: 1.4 !important;
}
#panelChat .webchat__bubble__content h3:last-of-type + ul li { margin-bottom: 0.125rem !important; }
#panelChat .webchat__bubble__content h3:last-of-type + ul a {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

/* --- timestamps ----------------------------------------------------------- */

#panelChat [class*="timestamp"],
#panelChat [class*="activity-status"],
#panelChat [class*="activity-status"] span,
#panelChat time {
  font-size: 0.6875rem !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  color: #ffffff7a !important;
}

/* --- references ----------------------------------------------------------- */

#panelChat button[aria-label*="reference" i],
#panelChat button[title*="reference" i] {
  min-height: 1.75rem !important;
  margin-top: 0.125rem !important;
  padding: 0.25rem 0.5rem !important;
  background: #ffffff0f !important;
  color: #ffffffb8 !important;
  border: 1px solid var(--abf-white-faded) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
  font-size: 0.6875rem !important;
  line-height: 1.2 !important;
}
#panelChat button[aria-label*="reference" i]:hover,
#panelChat button[title*="reference" i]:hover {
  background: #e6007e1f !important;
  border-color: #e6007e66 !important;
  color: #fff !important;
}

#panelChat hr {
  margin: 0.75rem 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--abf-white-faded) !important;
}

#panelChat code {
  padding: 0.0625rem 0.25rem !important;
  background: #ffffff14 !important;
  color: #ffffffeb !important;
  border-radius: 0.25rem !important;
  font-size: 0.9em !important;
}

/* --- send box ------------------------------------------------------------- */

#panelChat .webchat__send-box {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0.75rem !important;
  background: #ffffff08 !important;
  border-top: 1px solid var(--abf-white-faded) !important;
}
#panelChat .webchat__send-box__main {
  min-height: 2.75rem !important;
  overflow: hidden !important;
  background: #ffffff14 !important;
  border: 1px solid var(--abf-white-faded) !important;
  border-radius: var(--radius-small) !important;
}
#panelChat .webchat__send-box-text-box {
  min-height: 2.625rem !important;
  padding: 0 0.75rem !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 0.875rem !important;
}

/* The line above only dresses the WRAPPER. What you actually type lives in an
   <input> (a <textarea> once Web Chat grows the box), and Web Chat colours that
   one itself — black by default, which is close to invisible on navy. The
   styleOptions in js/agent.js are the real fix; this is the belt to that
   braces, and it also covers Chrome's autofill, which overrides `color` and
   only answers to -webkit-text-fill-color. */
#panelChat .webchat__send-box-text-box input,
#panelChat .webchat__send-box-text-box textarea,
#panelChat .webchat__send-box-text-box__input,
#panelChat .webchat__send-box-text-box__text-area {
  background: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff !important;
  font-size: 0.875rem !important;
}
#panelChat .webchat__send-box-text-box input::placeholder,
#panelChat .webchat__send-box-text-box textarea::placeholder,
#panelChat .webchat__send-box-text-box__input::placeholder {
  color: #ffffff8a !important;
  -webkit-text-fill-color: #ffffff8a !important;
  opacity: 1 !important;
}
#panelChat .webchat__send-box__button {
  width: 2.375rem !important;
  height: 2.375rem !important;
  min-width: 2.375rem !important;
  min-height: 2.375rem !important;
  margin: 0.1875rem 0.1875rem 0.1875rem 0 !important;
  padding: 0 !important;
  background: var(--abf-magenta) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}
#panelChat .webchat__send-box__button:hover { filter: brightness(1.12) !important; }

/* Web Chat draws its own focus styling; make sure it is the ABF ring and that
   it is actually visible on navy. */
#panelChat :focus-visible {
  outline: 2px solid var(--abf-azure) !important;
  outline-offset: 2px !important;
}

/* --- the failure state ---------------------------------------------------- */

.panel__chat-error {
  margin: 1.5rem;
  padding: 1rem;
  border-radius: var(--radius-small);
  background: #ffffff0f;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.panel__chat-error strong { display: block; margin-bottom: 0.375rem; font-weight: 700; }
.panel__chat-error button {
  margin-top: 0.75rem;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--abf-white-faded);
  border-radius: var(--radius-control);
  background: #ffffff14;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.panel__chat-error button:hover { background: #ffffff24; }


/* =========================================================
   HIDE COPILOT REFERENCES & INLINE CITATIONS
   ========================================================= */

/* Reference list below the answer */
#abf-webchat details[class*="webchat__link-definitions"] {
  display:none !important;
}

/* Inline citation markers: [1], [2], etc. */
#abf-webchat button[class*="webchat__render-markdown__citation"] {
  display:none !important;
}

.webchat__link-definitions { display:none !important; }
.webchat__render-markdown__citation { display:none !important; }

/* HIDE INTERNAL REFERENCES */
#abf-webchat button[aria-label*="reference" i],
#abf-webchat button[title*="reference" i] {

 display:none !important;
}