/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  /* Shared header dimensions make the header and chat offset stay in sync. */
  --header-height: 57px;
  --header-max-width: 1200px;
  --header-side-padding: 40px;
  --banner-logo-offset: clamp(-48px, calc((1280px - 100vw) / 2), 0px);
  --conversation-top: 58px;
  --conversation-max-width: 700px;
  --conversation-side-gutter: 16px;
  --conversation-padding-block: 20px;
  --conversation-activity-gap: 32px;
  --bot-content-padding: 16px;
  --bot-paragraph-gap: 12px;
  --bot-list-gap: 8px;
  --bot-list-indent: 24px;
  --bot-list-item-gap: 4px;
  --bot-reference-gap: 12px;
  --composer-max-width: 740px;
  --composer-height: 56px;
  --composer-bottom-gap: 20px;
  --composer-padding: 12px 20px;
  --composer-radius: 20px;
  --composer-background: #FBFBFB;
  --composer-send-size: 32px;
  --composer-send-icon-size: 24px;
  --conversation-card-width: 210px;
  --conversation-card-height: 180px;
  /* Preserve the 180px card content plus the bubble's 1px top and bottom borders. */
  --conversation-card-frame-height: calc(var(--conversation-card-height) + 2px);
}

/* ==========================================================================
   Page foundation
   ========================================================================== */

html,
body {
  height: 100%;
}

body {
  height: 100vh;
  margin: 0;
}

h1,
h2,
p {
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Helvetica Neue', sans-serif;
}

h3,
h4 {
  padding-left: 5px;
}

/* ==========================================================================
   Disclaimer modal
   ========================================================================== */

.popup-h2 {
  font-weight: 600;
  margin-bottom: 13px;
  margin-top: 10px;
}

.popup-modal-content p {
  color: grey;
  font-size: 14px;
  line-height: 18px;
}

.popup-msg-modal {
  background-color: rgba(0, 0, 0, 0.4);
  display: block;
  height: 100%;
  left: 0;
  overflow: auto;
  padding-top: 25vh;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 101;
}

.popup-modal-content {
  background-color: #fefefe;
  border: 1px solid #888;
  border-radius: 10px;
  margin: auto;
  padding: 30px 35px;
  width: 70%;
}

.popup-button-container-mobile {
  display: none;
}

.popup-button-container-desktop {
  display: block;
}

.popup-button-special:hover {
  cursor: pointer;
}

@media (min-width: 1000px) {
  .popup-modal-content {
    width: 60%;
  }
}

@media (min-width: 1250px) {
  .popup-modal-content {
    width: 50%;
  }
}

.popup-button-special {
  background-color: white;
  border: 1px solid #093500;
  color: #093500;
  padding: 5px 25px;
}

.popup-button-link-special {
  padding-right: 20px;
  text-align: center;
  text-decoration: none;
}

.popup-button-link-special:hover {
  color: inherit;
  text-decoration: none;
}

.popup-button-text-special,
#popup-countdown-mobile,
#popup-countdown-desktop {
  color: #093500;
  font-size: 14px;
  font-weight: 600;
}

.popup-link-button-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 25px;
  margin-top: 25px;
}

/* ==========================================================================
   Header and reset control
   ========================================================================== */

#banner {
  /* Responsive equivalent of Figma's fixed 1280px top-nav frame. */
  box-sizing: border-box;
  align-items: stretch;
  background: #FFFFFF;
  border-bottom: 1px solid #E8E8E8;
  display: block;
  height: var(--header-height);
  padding: 12px var(--header-side-padding);
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  z-index: 10;
}

.banner-inner {
  /* Figma Frame 236: centered Auto Layout row with a 1200px maximum width. */
  align-items: center;
  display: flex;
  gap: 20px;
  height: 33px;
  margin: 0 auto;
  max-width: var(--header-max-width);
  width: 100%;
}

.banner-logo {
  /* Size the combined wordmark by height while preserving its native aspect ratio. */
  display: block;
  flex: 0 0 auto;
  height: 32px;
  object-fit: contain;
  transform: translateX(var(--banner-logo-offset));
  width: auto;
}

#banner .tooltip-container {
  /* Keep the reset control inside the Auto Layout row instead of fixing it separately. */
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  right: auto;
  transform: none;
}

#refreshButton {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 360px;
  box-sizing: border-box;
  color: #686868;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  height: 32px;
  justify-content: center;
  padding: 4px 12px;
  width: 48px;
}

#refreshButton:hover,
#refreshButton:focus-visible {
  background: #F3F3F3;
}

#refreshButton:focus-visible {
  outline: 2px solid #303030;
  outline-offset: 2px;
}

#refreshButton svg {
  /* currentColor lets the button's color control the SVG path fill. */
  color: inherit;
  fill: currentColor;
  height: 24px;
  width: 24px;
}

#refreshButton path {
  fill: currentColor;
}

/* Tooltip for the reset control. */
.tooltip-container::before {
  content: '';
  position: absolute;
  bottom: -27%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #0A3500 transparent;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
}

.tooltip-container:hover::before {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s ease;
}

.tooltip-container::after {
  content: 'Start Over';
  position: absolute;
  top: 125%; /* Position the tooltip at the bottom of the element */
  left: 50%;
  width: 75px;
  transform: translateX(-60px);
  background-color: #0A3500;
  color: white;
  padding: 5px;
  /* border-radius: 5px; */
  /* white-space: nowrap; */
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.3s ease;
  text-align: left;
  z-index: 1;
  border-radius: 5px 5px 5px 5px;
  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Helvetica Neue', sans-serif;
}

.tooltip-container:hover::after {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s ease;
}

/* ==========================================================================
   Web Chat layout
   ========================================================================== */

#webchat {
  /* Figma positions the conversation at y=58, immediately below the header. */
  height: calc(100% - var(--conversation-top));
  overflow: hidden;
  position: absolute;
  top: var(--conversation-top);
  width: 100%;
}

#webchat-inner {
  /* Keep the scrolling layer viewport-wide so its native scrollbar sits at the far right. */
  height: 100%;
  margin-inline: 0;
  max-width: none;
  width: 100%;
}

#webchat-inner > div {
  height: 100%;
}

#webchat-inner .webchat__basic-transcript__scrollable {
  /* Apply Figma's vertical padding and reserve the far-right scrollbar gutter. */
  box-sizing: border-box;
  padding-block: var(--conversation-padding-block);
  scrollbar-gutter: stable;
}

#webchat-inner .webchat__basic-transcript__filler {
  /* Web Chat normally pushes a short transcript to the bottom; Figma starts at the top. */
  flex: 0 0 0 !important;
  min-height: 0 !important;
}

#webchat-inner .webchat__basic-transcript__activity {
  /* Center visible messages independently of the viewport-wide scrolling layer. */
  box-sizing: border-box;
  margin-inline: auto !important;
  max-width: var(--conversation-max-width);
  margin-top: 0 !important;
  width: calc(100% - (2 * var(--conversation-side-gutter)));
}

#webchat-inner .webchat__basic-transcript__scrollable > div:has(> .webchat__typing-indicator) {
  /* Web Chat renders the loading indicator outside a normal activity. */
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--conversation-max-width);
  width: calc(100% - (2 * var(--conversation-side-gutter)));
}

#webchat-inner .webchat__typing-indicator {
  border-radius: 12px !important;
}

#webchat-inner .webchat__connectivityStatus {
  /* Keep transient connection feedback aligned with the conversation column. */
  box-sizing: border-box;
  justify-content: center;
  margin-inline: auto;
  max-width: var(--conversation-max-width);
  width: calc(100% - (2 * var(--conversation-side-gutter)));
}

#webchat-inner .webchat__basic-transcript__activity +
.webchat__basic-transcript__activity {
  /* Separate complete conversation activities, not paragraphs inside a message. */
  margin-top: var(--conversation-activity-gap) !important;
}

#webchat-inner > div {
  background-color: #F9F9F9 !important;
}

/* ==========================================================================
   Message bubbles and generated Web Chat content
   ========================================================================== */

/*
 * Microsoft Web Chat injects its Emotion stylesheet after this file. The
 * !important declarations in the sections below are therefore limited to
 * third-party generated elements; page-owned components use the normal cascade.
 */

/* Preserve the original desktop padding for non-plain user messages. */
.webchat__text-content:not(.webchat__text-content--is-plain) {
  padding: 20px 15px;
}

.react-film__filmstrip button {
    border-radius: 10px !important;
    font-size: 11px !important;
    height: 22px !important;
    color: #5b6cff !important;
    border-color: #5b6cff !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
}
.webchat__bubble__content {
    border-radius: 10px !important;
}
.webchat__text-content__markdown p, .webchat__bubble__content p {
    font-size: 12px !important;
    padding: 0 5px 0 5px !important;
    color: rgb(36, 36, 36);
}
.webchat__bubble__content li {
    font-size: 14px !important;
    color: rgb(36, 36, 36);
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__bubble__content,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__text-content,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity li {
    font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}

/* Bot response spacing */
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__text-content:not(.webchat__text-content--is-plain) {
    box-sizing: border-box !important;
    padding: var(--bot-content-padding) !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity ul,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity ol,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity li {
    margin: 0 !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p {
    padding: 0 !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity ul,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity ol {
    padding-inline-start: var(--bot-list-indent) !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p + p,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity ul + p,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity ol + p {
    margin-top: var(--bot-paragraph-gap) !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p + ul,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p + ol,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity li > ul,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity li > ol {
    margin-top: var(--bot-list-gap) !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity li + li {
    margin-top: var(--bot-list-item-gap) !important;
}

#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__link-definitions {
    margin-top: var(--bot-reference-gap) !important;
}

/* Match generated response links and their external-link icon to the HKU green. */
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity a,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity a:visited,
#webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity a:hover {
    color: #338F7C !important;
}

#webchat-inner .webchat__render-markdown__external-link-icon {
    background: #338F7C !important;
    -webkit-mask: var(--webchat__icon-url--external-link) center / contain no-repeat;
    mask: var(--webchat__icon-url--external-link) center / contain no-repeat;
}
.react-film__flipper__body {
    border-radius: 0 !important;
    width: 25px !important;
}
.react-film__flipper--left .react-film__flipper__body {
    transform: translateX(-17px);
}
.react-film__flipper--right .react-film__flipper__body {
    transform: translateX(17px);
}
.ac-actionSet button {
    border-radius: 0 !important;
    font-size: 13px !important;
    height: 30px !important;
    color: #5b6cff !important;
    border-color: #f2f2f2 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-width: 1px 0 0 0 !important;
}
.ac-actionSet button div {
    transform: translateY(3px);
}
.ac-adaptiveCard {
    padding: 0 0 7px 0 !important;
}
.ac-adaptiveCard img{
    padding: 7px 7px 0 7px !important;
}
.ac-columnSet img {
    padding: 0 !important;
}
.webchat__stacked-layout__attachment .ac-columnSet .ac-container {
    justify-content: center !important;
    padding-left: 15px !important;
    padding-top: 5px !important;
}
.webchat__stacked-layout__attachment .ac-vertical-separator {
    width: 1px !important;
}
.ac-adaptiveCard .ac-textBlock {
    padding: 1px 7px !important;
}

.ac-adaptiveCard .ac-textBlock p {
    color: #424242
}

.ac-horizontal-separator {
    height: 7px !important;
}
.ac-textBlock a {
    color: #5b6cff !important;
    text-decoration: none !important;
}
.ac-textBlock a:hover {
    color: #5b6cff !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Conversation-start category cards
   Scoped to carousel Adaptive Cards so ordinary answer cards are unaffected.
   ========================================================================== */

/* Use one fixed desktop footprint so cards with different copy stay aligned. */
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) :is(.webchat__carousel-filmstrip-attachment, .carousel-filmstrip-attachment) {
  box-sizing: border-box;
  flex: 0 0 var(--conversation-card-width) !important;
  height: var(--conversation-card-frame-height) !important;
  min-height: var(--conversation-card-frame-height) !important;
  min-width: var(--conversation-card-width) !important;
  width: var(--conversation-card-width) !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) :is(.webchat__bubble, .bubble),
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) :is(.webchat__bubble__content, .bubble__content),
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) :is(.webchat__adaptive-card-renderer, .adaptive-card-renderer) {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) :is(.webchat__bubble__content, .bubble__content) {
  border: 1px solid #D8DEDB !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard {
  background: #FFFFFF !important;
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 12px !important;
}

/* Basic Cards normally reserve a large media panel; collapse it to the 24px category icon. */
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-image-container,
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard div:has(> .ac-image) {
  align-self: flex-start !important;
  height: 24px !important;
  margin: 0 0 8px !important;
  max-height: 24px !important;
  max-width: 24px !important;
  min-height: 24px !important;
  min-width: 24px !important;
  width: 24px !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard img {
  display: block !important;
  height: 24px !important;
  margin: 0 !important;
  max-height: 24px !important;
  max-width: 24px !important;
  object-fit: contain !important;
  padding: 0 !important;
  width: 24px !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard .ac-textBlock[role="heading"] {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #163F36 !important;
  display: -webkit-box !important;
  font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 18px !important;
  background-color: #F7F7F7 !important;
  border-radius: 12px;
  min-height: 36px;
  overflow: hidden !important;
  padding: 3px !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard .ac-textBlock[role="heading"] p {
  margin: 0 !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard .ac-textBlock[role="heading"] > div,
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard .ac-textBlock[role="heading"] p {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-adaptiveCard > .ac-horizontal-separator {
  /* Consume spare vertical space so every native question action sits at the card bottom. */
  /*flex: 1 1 auto !important;*/
  height: 2px !important;
  min-height: 2px !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-actionSet button {
  align-items: center !important;
  background: #FFFFFF !important;
  border: 0px solid #CFD8D4 !important;
  border-radius: 6px !important;
  color: #164D41 !important;
  font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  height: auto !important;
  justify-content: center !important;
  text-align: left;
  line-height: 17px !important;
  min-height: 58px !important;
  padding: 8px 10px !important;
  transition: background-color 120ms ease, border-color 120ms ease !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-actionSet button:hover {
  background: #F2F8F5 !important;
  border-color: #79A79B !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-actionSet button:focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #338F7C !important;
  outline: 0 !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .ac-actionSet button > div {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  display: -webkit-box !important;
  line-height: 17px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  transform: none !important;
  white-space: normal !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper__body {
  align-items: center !important;
  background: #FFFFFF !important;
  border: 1px solid #D8DEDB !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 3px rgba(22, 63, 54, 0.12) !important;
  color: #356F61 !important;
  display: flex !important;
  height: 32px !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  transform: none !important;
  width: 32px !important;
}

/* Replace Web Chat's full-height carousel overlays with compact edge controls. */
#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper {
  border-radius: 50% !important;
  bottom: auto !important;
  height: 40px !important;
  padding: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper__slider {
  bottom: 0 !important;
  height: 40px !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 40px !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper:has(.react-film__main__slider--hide) {
  pointer-events: none !important;
  visibility: hidden !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper--left {
  left: 2px !important;
  right: auto !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper--right {
  left: auto !important;
  right: 2px !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper__body:hover {
  background: #F2F8F5 !important;
  border-color: #79A79B !important;
}

#webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper:focus-visible {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #338F7C !important;
  outline: 0 !important;
}

.webchat__basic-transcript__activity-indicator--focus {
    border-width: 0 !important;
}
.webchat__suggested-actions__carousel .react-film__flipper {
  display: none !important;
}
.webchat__suggested-actions .react-film__filmstrip__item:first-child {
  padding-left: 0 !important;
}
.webchat__bubble--from-user .webchat__bubble__content {
  background: #E6F1EE !important;
  border: 0 !important;
  color: #2B2B2B !important;

}
.webchat__bubble--from-user .webchat__bubble__content p:not(.webchat__render-markdown--message-activity p) {
  color: #2B2B2B !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
}

.webchat__stacked-layout--from-user .webchat__render-markdown--message-activity p {
  color: #2B2B2B !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.webchat__bubble--from-user .webchat__bubble__content,
.webchat__bubble--from-user .webchat__bubble__content p,
.webchat__stacked-layout--from-user .webchat__render-markdown--message-activity p {
  font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* ==========================================================================
   Reference chips
   ========================================================================== */

.webchat__link-definitions__list {
  align-items: center !important;
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 12px !important;
}

.webchat__link-definitions__header-chevron {
  color: #338F7C !important;
}

.webchat__link-definitions__list-item {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.webchat__link-definitions__list-item-box {
  align-items: center !important;
  border: 1px solid #DDDDDD !important;
  border-radius: 360px !important;
  box-sizing: border-box !important;
  color: #2B2B2B !important;
  display: inline-flex !important;
  flex: 0 1 auto !important;
  justify-content: center !important;
  max-width: 100% !important;
  min-height: 28px !important;
  min-width: 89px !important;
  padding: 4px 12px !important;
  text-decoration: none !important;
  width: max-content !important;
}

.webchat__link-definitions__list-item-box:hover {
  background: #F7F7F7 !important;
}

.webchat__link-definitions__list-item-box:focus-visible {
  outline: 2px solid #2B2B2B !important;
  outline-offset: 2px !important;
}

.webchat__link-definitions__list-item-body {
  align-items: center !important;
  display: flex !important;
  font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  gap: 4px !important;
  line-height: 18px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.webchat__link-definitions__badge {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #2B2B2B !important;
  display: inline !important;
  flex: none !important;
  font: inherit !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.webchat__link-definitions__badge::after {
  content: " -";
}

.webchat__link-definitions__list-item-body-main,
.webchat__link-definitions__list-item-main-text {
  align-items: center !important;
  display: flex !important;
  min-width: 0 !important;
}

.webchat__link-definitions__list-item-text {
  color: #2B2B2B !important;
  font: inherit !important;
  max-width: min(240px, calc(100vw - 120px)) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.webchat__link-definitions__open-in-new-window-icon {
  display: none !important;
}

/* ==========================================================================
   Message width and Adaptive Card state
   ========================================================================== */

.webchat__stacked-layout__message {
  max-width: 90vw !important;
}

.ac-pushButton[aria-pressed="true"] {
  background-color: transparent !important;
}

/* ==========================================================================
   Composer and suggested actions
   ========================================================================== */

#webchat-inner .webchat__send-box {
  box-sizing: border-box;
  flex: 0 0 calc(var(--composer-height) + var(--composer-bottom-gap));
  height: calc(var(--composer-height) + var(--composer-bottom-gap));
  left: 50%;
  max-width: var(--composer-max-width);
  padding-bottom: var(--composer-bottom-gap);
  position: relative;
  transform: translateX(-50%);
  width: min(var(--composer-max-width), calc(100vw - (2 * var(--conversation-side-gutter))));
}

#webchat-inner .webchat__suggested-actions {
  /* Align bot-provided actions with the centered conversation, not the wider composer. */
  box-sizing: border-box;
  margin-inline: auto;
  max-width: var(--conversation-max-width);
  width: min(var(--conversation-max-width), calc(100vw - (2 * var(--conversation-side-gutter))));
}

#webchat-inner .webchat__suggested-actions .react-film__filmstrip__list {
  /* Compensate for the native 5px action-item padding so button and bot-bubble edges match. */
  box-sizing: border-box;
  padding-inline-start: 5px !important;
}

#webchat-inner .webchat__send-box__main {
  align-items: center;
  background: var(--composer-background) !important;
  border: 0 !important;
  border-radius: var(--composer-radius) !important;
  box-shadow: none !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: var(--composer-height) !important;
  justify-content: space-between;
  margin: 0 !important;
  padding: var(--composer-padding) !important;
  width: 100%;
}

#webchat-inner .webchat__send-box__text-box {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 28px;
  min-height: 28px;
  min-width: 0;
  padding: 0 !important;
  width: auto;
}

#webchat-inner .webchat__send-box-text-box__input {
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box;
  color: #2B2B2B !important;
  font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  height: 28px;
  line-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

#webchat-inner .webchat__send-box-text-box__input::placeholder {
  color: #AAAAAA !important;
  line-height: 28px !important;
  opacity: 1;
}

#webchat-inner .webchat__send-button {
  align-items: center;
  align-self: center;
  background: #96F748 !important;
  border: 0 !important;
  border-radius: 360px !important;
  box-shadow: none !important;
  box-sizing: border-box;
  display: flex;
  flex: 0 0 var(--composer-send-size);
  height: var(--composer-send-size) !important;
  justify-content: center;
  min-height: var(--composer-send-size) !important;
  min-width: var(--composer-send-size) !important;
  padding: 0 !important;
  width: var(--composer-send-size) !important;
}

#webchat-inner .webchat__send-button:hover:not(:disabled) {
  background: #86E93A !important;
}

#webchat-inner .webchat__send-button:active:not(:disabled) {
  background: #78DA2F !important;
}

#webchat-inner .webchat__send-button:focus-visible {
  outline: 2px solid #1C1B1F;
  outline-offset: 2px;
}

#webchat-inner .webchat__send-button:disabled {
  opacity: 0.55;
}

#webchat-inner .webchat__send-icon {
  color: #1C1B1F !important;
  fill: #1C1B1F !important;
  height: var(--composer-send-icon-size) !important;
  width: var(--composer-send-icon-size) !important;
}

#webchat-inner .webchat__send-icon path {
  fill: currentColor !important;
}

/* ==========================================================================
   Responsive layout
   ========================================================================== */

@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
  .popup-link-button-container {
    display: block;
  }

  .popup-button-special {
    line-height: 0.8;
    width: 100%;
  }

  .popup-button-container-mobile {
    display: block;
  }

  .popup-button-container-desktop {
    display: none;
  }

  /* Mobile values are based on the 393 x 852 Figma reference frame. */
  :root {
    --header-height: 49px;
    --header-side-padding: 24px;
    --banner-logo-offset: 0px;
    --conversation-top: 57px;
    --conversation-side-gutter: 20px;
    --conversation-padding-block: 20px;
    --conversation-activity-gap: 20px;
    --bot-content-padding: 12px;
    --bot-paragraph-gap: 12px;
    --bot-list-gap: 8px;
    --bot-list-indent: 20px;
    --bot-reference-gap: 10px;
    --composer-height: 56px;
    --composer-padding: 12px 20px;
    --composer-radius: 12px;
    /* Keep the card inside Web Chat's mobile filmstrip while leaving the next card as a cue. */
    --conversation-card-width: min(78vw, 320px);
  }

  #webchat-inner :is(.webchat__carousel-layout, .carousel-layout),
  #webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__main {
    /* The inner filmstrip still clips cards; this lets only the controls use the side gutters. */
    overflow: visible !important;
  }

  #webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper--left {
    left: -20px !important;
  }

  #webchat-inner :is(.webchat__carousel-layout, .carousel-layout) .react-film__flipper--right {
    right: -20px !important;
  }

  html,
  body {
    background: #FFFFFF;
    height: 100%;
    min-height: 100%;
  }

  body {
    height: 100dvh;
    overflow: hidden;
  }

  #banner {
    height: var(--header-height);
    padding: 12px var(--header-side-padding);
  }

  .banner-inner {
    gap: 12px;
    height: 25px;
  }

  .banner-logo {
    height: 24px;
    object-fit: contain;
    width: auto;
  }

  #banner .tooltip-container {
    align-items: center;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin-block: -10px;
    width: 44px;
  }

  #refreshButton {
    height: 44px;
    padding: 10px;
    width: 44px;
  }

  #refreshButton svg {
    height: 16px;
    width: 16px;
  }

  #webchat {
    background: #FFFFFF !important;
    height: calc(100dvh - var(--conversation-top));
    top: var(--conversation-top);
  }

  #webchat > div > div,
  #webchat-inner,
  #webchat-inner > div {
    background: #FFFFFF !important;
  }

  #webchat-inner .webchat__basic-transcript__scrollable {
    background: #FFFFFF !important;
    padding-block: var(--conversation-padding-block);
  }

  #webchat-inner .webchat__basic-transcript__activity,
  #webchat-inner .webchat__basic-transcript__scrollable > div:has(> .webchat__typing-indicator),
  #webchat-inner .webchat__connectivityStatus {
    max-width: 353px;
    width: calc(100% - (2 * var(--conversation-side-gutter)));
  }

  #webchat-inner .webchat__stacked-layout {
    margin-inline: 0 !important;
  }

  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__stacked-layout__message {
    max-width: min(295.2px, 100%) !important;
  }

  #webchat-inner .webchat__stacked-layout--from-user .webchat__stacked-layout__message {
    max-width: min(280px, 100%) !important;
  }

  #webchat-inner .webchat__bubble__content,
  #webchat-inner .webchat__text-content {
    border-radius: 12px !important;
  }

  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__bubble__content {
    background: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
    box-shadow: none !important;
  }

  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__text-content,
  #webchat-inner .webchat__stacked-layout--from-user .webchat__text-content {
    box-sizing: border-box !important;
    padding: 12px !important;
  }

  #webchat-inner .webchat__stacked-layout--from-user .webchat__text-content {
    --webchat__padding--regular: 12px;
  }

  #webchat-inner .webchat__bubble--from-user .webchat__bubble__content {
    box-sizing: border-box !important;
    padding: 12px !important;
  }

  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__bubble__content,
  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__text-content,
  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity,
  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity p,
  #webchat-inner .webchat__stacked-layout:not(.webchat__stacked-layout--from-user) .webchat__render-markdown--message-activity li,
  #webchat-inner .webchat__stacked-layout--from-user .webchat__bubble__content,
  #webchat-inner .webchat__stacked-layout--from-user .webchat__bubble__content p,
  #webchat-inner .webchat__stacked-layout--from-user .webchat__render-markdown--message-activity p {
    font-size: 14px !important;
    line-height: 18px !important;
  }

  #webchat-inner .webchat__stacked-layout--from-user .webchat__bubble__content p,
  #webchat-inner .webchat__stacked-layout--from-user .webchat__render-markdown--message-activity p {
    margin: 0 !important;
    padding: 0 !important;
  }

  #webchat-inner .webchat__link-definitions__list {
    gap: 10px !important;
  }

  #webchat-inner .webchat__activity-status,
  #webchat-inner .webchat__activity-status * {
    color: #999999 !important;
    font-family: 'Source Sans Pro', 'Segoe UI', 'Helvetica Neue', sans-serif !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    line-height: 10px !important;
  }

  #webchat-inner .webchat__send-box {
    backdrop-filter: blur(2px);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
      linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%) !important;
    box-sizing: border-box;
    flex: 0 0 calc(var(--composer-height) + var(--composer-bottom-gap) + env(safe-area-inset-bottom));
    height: calc(var(--composer-height) + var(--composer-bottom-gap) + env(safe-area-inset-bottom));
    left: auto;
    max-width: none;
    padding: 0 12px calc(var(--composer-bottom-gap) + env(safe-area-inset-bottom));
    transform: none;
    width: 100%;
  }

  .popup-msg-modal {
    box-sizing: border-box;
    height: 100dvh;
    padding: 24px 16px;
  }

  .popup-modal-content {
    box-sizing: border-box;
    margin: auto;
    max-width: 540px;
    padding: 24px;
    width: 100%;
  }

  .popup-button-special {
    min-height: 44px;
  }

  .popup-link-button-container {
    margin-bottom: 0;
  }
}

@media (max-width: 359px) {
  #banner {
    padding-inline: 16px;
  }
}