/* ============================================================================
   Answers — Web Chat custom layer
   Styles Bot Framework Web Chat's rendered DOM to match the Answers design
   system where `styleOptions` alone can't reach: gradient user bubbles,
   asymmetric bubble tails, the branded header, the circular send button,
   and the suggested-action chips.

   Web Chat ships its own stylesheet; these rules are intentionally specific
   (and a few use !important) to win the cascade against the generated styleset.
   Class names follow Web Chat's stable `webchat__*` / `ac-*` hooks.
   ========================================================================== */

/* Depends on design-tokens.css and answers-shell.css being <link>ed first (no @import:
   imported URLs can't carry the ?v= cache-busting version the HTML uses). */
/* ---- Page shell ---------------------------------------------------------- */
html, body {
  height: 100%;
  margin: 0;
}
body {
  background: var(--ans-canvas);
  font-family: var(--ans-font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ans-ink);
}

/* The widget: a phone-width column, centered, with the app's elevation.
   On small screens it fills the viewport (true embed). */
.answers-chat {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  /* svh after the vh fallback, not dvh — see .answers-app in
     answers-shell.css for why: dvh can report its LARGE value on first
     paint even while the browser's address bar is still fully shown,
     sizing this box taller than what's actually visible and pushing the
     footer nav (and the escalation hint above it) below the fold. The
     Chat screen uses its own top-level wrapper instead of .answers-app,
     so it needed this fix applied separately. */
  height: 100vh;
  height: 100svh;
  max-height: 760px;
  margin: 24px auto;
  background: var(--ans-canvas);
  border-radius: 22px;
  /* clip, not hidden — see .answers-app in answers-shell.css: hidden leaves
     this a programmatically-scrollable container that mobile browsers shift
     to reveal the keyboard-focused input (chat's own send box, or the
     staged-attachment input), sticking the whole shell scrolled. */
  overflow: hidden;
  overflow: clip;
  box-shadow: 0 24px 60px rgba(0, 20, 45, 0.18), 0 0 0 1px var(--ans-line-soft);
}
@media (max-width: 480px) {
  /* Phones: the frame IS the app — the document must never scroll. Without
     this, the browser can scroll the page while the on-screen keyboard is
     up (e.g. attaching a file to translate) and some browsers leave that
     scroll offset behind after the keyboard closes, exposing a dead strip
     below the footer nav (the same strip the closed feedback sheet used to
     leak into). answers-pwa.js pairs this by sizing the frame to the live
     viewport height. */
  html, body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  .answers-chat {
    margin: 0;
    max-width: none;
    max-height: none;
    height: 100vh;
    height: 100svh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- Branded header: shared styles live in answers-shell.css ------------- */
/* ---- Escalation hint (below the widget) ---------------------------------- */
.answers-escalate {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px;
  font-size: 11.5px;
  color: var(--ans-slate);
  background: #f5f7fb;
  text-decoration: none;
  border-top: 1px solid var(--ans-line);
}
.answers-escalate strong {
  color: var(--ans-blue-500);
  font-weight: 600;
}
.answers-escalate:hover strong { text-decoration: underline; }
.answers-escalate:focus-visible {
  outline: 2px solid var(--ans-blue-500);
  outline-offset: -2px;
}

/* ---- Web Chat root ------------------------------------------------------- */
#webchat {
  flex: 1;
  min-height: 0;
  background: var(--ans-canvas);
}
#webchat .webchat__basic-transcript {
  background: var(--ans-canvas);
}

/* ---- Bubbles ------------------------------------------------------------- *
   styleOptions sets fill/border/radius; we add the asymmetric tail + shadow
   that the design uses (bot tail bottom-left, user tail bottom-right). */
.webchat__bubble--from-user .webchat__bubble__content {
  background: var(--ans-grad-user) !important;
  border: none !important;
  border-radius: var(--ans-r-bubble) var(--ans-r-bubble) var(--ans-r-tail) var(--ans-r-bubble) !important;
  box-shadow: var(--ans-shadow-user);
  color: #fff !important;
}
.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
  background: var(--ans-surface) !important;
  border: 1px solid var(--ans-line-soft) !important;
  border-radius: var(--ans-r-bubble) var(--ans-r-bubble) var(--ans-r-bubble) var(--ans-r-tail) !important;
  box-shadow: var(--ans-shadow-bot);
  color: var(--ans-ink) !important;
}
.webchat__bubble__content p,
.webchat__bubble__content li,
.webchat__bubble__content td,
.webchat__bubble__content th,
.webchat__bubble__content blockquote {
  font-size: var(--ans-fs-msg);
  line-height: var(--ans-lh-msg);
  margin: 0;
}
.webchat__bubble--from-user .webchat__bubble__content a { color: #fff; }
.webchat__bubble__content a { color: var(--ans-blue-500); }

/* ---- Share button on bot replies ------------------------------------------
   Appended by answers-webchat.js into .text-content__activity-actions, an
   already-empty slot in the real markup meant for exactly this — see that
   file's comment for why the first version of this (targeting
   .webchat__bubble__content, never matched) didn't work. Subtle by default,
   not hover-only: this is a touch-first PWA, and most visitors are on a
   device with no hover state at all. */
.answers-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 4px 0 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ans-slate-400);
  opacity: 0.65;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.answers-share-btn:hover,
.answers-share-btn:focus-visible {
  opacity: 1;
  background: var(--ans-canvas);
}
.answers-share-btn svg {
  width: 15px;
  height: 15px;
}
.answers-share-btn--copied::after {
  content: "Copied";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 4px;
  background: var(--ans-navy-900);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}

/* ---- Markdown tables ------------------------------------------------------
   A generated answer's table can have far more columns than a phone-width
   bubble can fit (e.g. a rate breakdown per payment status). Left unstyled,
   the browser shrinks every column to fit, wrapping each cell's text one
   character per line — unreadable. display:block + overflow-x:auto keeps
   the table at its natural width and makes IT scroll horizontally instead
   of the browser squeezing it; nowrap keeps each cell's value on one line
   so only the table (not individual cells) needs scrolling. */
.webchat__bubble__content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-collapse: collapse;
}
.webchat__bubble__content th,
.webchat__bubble__content td {
  /* font-size/line-height already set by the shared p/li/td/th/blockquote
     rule above */
  padding: 6px 10px;
  border: 1px solid var(--ans-line);
  white-space: nowrap;
  text-align: left;
}
.webchat__bubble__content th {
  background: var(--ans-canvas);
  font-weight: 600;
  color: var(--ans-navy-900);
}
.webchat__bubble__content tbody tr:nth-child(even) td {
  background: rgba(10, 40, 80, 0.03);
}

/* Markdown headings in a generated answer otherwise fall back to the
   browser's UA default sizing (h2 = 1.5em / h3 = 1.17em of the inherited
   16px root) — Web Chat itself doesn't style them. Sizes per 2026-07-03
   feedback; h1/h4-h6 are untouched (unflagged, and generated answers don't
   use them in practice). */
.webchat__bubble__content h2 {
  font-size: 18px;
  line-height: 1.3;
}
.webchat__bubble__content h3 {
  font-size: 16.5px;
  line-height: 1.3;
}

/* ---- Citation modal -------------------------------------------------------
   Tapping a citation on a grounded answer opens the source document (one of
   content/source/knowledge/*.md) in Web Chat's own citation-modal-dialog —
   a real DOM popup this vendored webchat.js bundle renders client-side.

   IMPORTANT: this component is styled via CSS Modules in the vendored
   bundle, not the .webchat__ BEM prefix used elsewhere in Web Chat — the
   live DOM classes are .citation-modal-dialog / __header / __body (no
   "webchat__"), confirmed via computed-style inspection in production on
   2026-07-05. Only the close button kept the .webchat__ prefix. A prior
   version of these rules used .webchat__citation-modal-dialog__body and
   never matched anything — do not reintroduce that prefix here.

   Separately: Copilot Studio's own citation content pipeline strips
   newlines from the source .md before it ever reaches this component, so
   a document that opens with "# Title" ends up with its ENTIRE body
   swallowed into one giant <h1> (no closing line break for the markdown
   parser to find) — headings/lists deeper in the file become literal
   "#"/"-" characters inside that one element, not real nested elements.
   That's a Microsoft-side limitation, not fixable via CSS or by
   reformatting the source file (confirmed against a re-uploaded,
   correctly-formatted file — no change). The h1/h2/h3 rules below
   deliberately look like body copy, not prominent headings, because in
   practice an h1 here usually contains the whole document, not a title. */
.citation-modal-dialog {
  font-family: var(--ans-font-body);
  border-radius: var(--ans-r-card);
  overflow: hidden;
}
.citation-modal-dialog__header {
  padding: 16px 44px 14px 20px; /* right padding clears the close button */
  background: var(--ans-surface);
  border-bottom: 1px solid var(--ans-line);
  font-family: var(--ans-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--ans-navy-900);
  word-break: break-word;
}
.citation-modal-dialog__body {
  padding: 18px 20px 22px;
  background: var(--ans-surface);
  color: var(--ans-ink);
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.citation-modal-dialog__body p,
.citation-modal-dialog__body li,
.citation-modal-dialog__body td,
.citation-modal-dialog__body th,
.citation-modal-dialog__body blockquote {
  font-size: var(--ans-fs-msg);
  line-height: var(--ans-lh-msg);
  font-weight: 400;
}
.citation-modal-dialog__body p,
.citation-modal-dialog__body ul,
.citation-modal-dialog__body ol,
.citation-modal-dialog__body blockquote,
.citation-modal-dialog__body table {
  margin: 0 0 12px;
}
.citation-modal-dialog__body ul,
.citation-modal-dialog__body ol {
  padding-inline-start: 22px;
}
.citation-modal-dialog__body li {
  margin-bottom: 4px;
}
.citation-modal-dialog__body li:last-child,
.citation-modal-dialog__body :last-child {
  margin-bottom: 0;
}
.citation-modal-dialog__body a {
  color: var(--ans-blue-500);
}
.citation-modal-dialog__body h1,
.citation-modal-dialog__body h2,
.citation-modal-dialog__body h3 {
  color: var(--ans-navy-900);
  font-weight: 600;
  margin: 12px 0 8px;
}
.citation-modal-dialog__body h1:first-child,
.citation-modal-dialog__body h2:first-child,
.citation-modal-dialog__body h3:first-child {
  margin-top: 0;
}
.citation-modal-dialog__body h1,
.citation-modal-dialog__body h2,
.citation-modal-dialog__body h3 {
  font-size: var(--ans-fs-msg);
  line-height: var(--ans-lh-msg);
}
.citation-modal-dialog__body strong {
  color: var(--ans-navy-900);
  font-weight: 600;
}
.citation-modal-dialog__body table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-collapse: collapse;
}
.citation-modal-dialog__body th,
.citation-modal-dialog__body td {
  padding: 6px 10px;
  border: 1px solid var(--ans-line);
  white-space: nowrap;
  text-align: left;
}
.citation-modal-dialog__body th {
  background: var(--ans-canvas);
  font-weight: 600;
  color: var(--ans-navy-900);
}
.webchat__modal-dialog__close-button-layout {
  top: 10px;
  right: 10px;
}

/* ---- Avatar (bot) -------------------------------------------------------- */
.webchat__defaultAvatar {
  border-radius: 50% !important;
}

/* ---- Suggested actions → design-system chips ----------------------------- */
.webchat__suggested-actions {
  padding: 4px 14px 10px;
}
.webchat__suggested-action {
  border-radius: var(--ans-r-chip) !important;
  border: 1px solid #cdd9e8 !important;
  background: var(--ans-surface) !important;
  box-shadow: var(--ans-shadow-bot);
}
.webchat__suggested-action__text,
.webchat__suggested-action button {
  color: var(--ans-blue-500) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}
.webchat__suggested-action:hover {
  border-color: var(--ans-blue-500) !important;
  background: #f6f9fd !important;
}

/* ---- Timestamps / status text ------------------------------------------- */
.webchat__activity-status,
.webchat__timestamp {
  color: var(--ans-slate-400) !important;
  font-size: 11.5px !important;
}

/* ---- Send box ------------------------------------------------------------ */
.webchat__send-box,
.main {
  background: var(--ans-surface) !important;
  border-top: 1px solid var(--ans-line) !important;
}
.webchat__send-box-text-box textarea,
.webchat__send-box__text-box textarea {
  font-family: var(--ans-font-body) !important;
  font-size: 15px !important;
  color: var(--ans-navy-900) !important;
}
.webchat__send-box-text-box textarea::placeholder {
  color: var(--ans-slate-400) !important;
}

/* Circular blue send button to match the app's input affordance. */
.webchat__send-box__button,
.webchat__icon-button {
  color: var(--ans-blue-500) !important;
}
.webchat__send-box__main .webchat__send-box__button {
  margin: 6px;
  border-radius: 50% !important;
  background: var(--ans-blue-500) !important;
  width: 36px;
  height: 36px;
}
.webchat__send-box__main .webchat__send-box__button svg path,
.webchat__send-box__main .webchat__send-box__button svg {
  fill: #fff !important;
}

/* ---- Typing indicator ---------------------------------------------------- */
.webchat__typingIndicator,
.webchat__typing-indicator { color: var(--ans-slate); }

/* ---- Scrollbar polish ---------------------------------------------------- */
#webchat ::-webkit-scrollbar { width: 8px; }
#webchat ::-webkit-scrollbar-thumb {
  background: rgba(10, 40, 80, 0.18);
  border-radius: 8px;
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Web Chat 4.19 send-button fix --- */
.webchat__send-box__main .webchat__send-box__button{
  background:transparent !important;
  border-radius:0 !important;
  width:auto !important;
  height:auto !important;
  margin:0 8px !important;
}
.webchat__send-box__button svg,
.webchat__send-icon{ fill: var(--ans-blue-500) !important; }

/* Paperclip next to Send, not pinned to the opposite edge of the row. Web
   Chat lays the send box out as a CSS Grid with named areas (upload-button,
   text-box, send-button) placed via each child's own `grid-area` — `order`
   has no effect there since the children aren't grid-auto-placed. Instead,
   override the parent's template so the text-box area comes first (still
   flexible-width) and the two icon areas sit together at the end.
   The attachment-bar row MUST stay in the template: when a file is staged,
   Web Chat mounts a grid-area:attachment-bar child, and without its named
   area the bar auto-places into a huge implicit track (a tall white void
   with the thumbnail floating at the far right). The row is `auto`, so it
   collapses to nothing while no attachment is staged. */
.webchat__send-box__main {
  grid-template-areas:
    "attachment-bar attachment-bar attachment-bar"
    "text-box upload-button send-button" !important;
  grid-template-rows: auto auto !important;
  grid-template-columns: 1fr auto auto !important;
}