/* CSS for customizing the appearance and alignment of the bot avatar in Web Chat */
#block-block-33 {
  /* CSS for customizing the appearance and alignment of the bot avatar in Web Chat */

  /* CSS for customizing the appearance and alignment of the bot avatar in Web Chat */

  /* To remove the tabing of host website */
  *:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
  }

  .webchat__defaultAvatar {
    border-radius: 0px !important;
  }

  .webchat__initialsAvatar {
    background-color: transparent !important;
  }

  .clearTextIcon {
    transform: scale(0.9);
  }

  .webchat__bubble__nub-pad {
    display: contents;
  }

  /* Disable all interactions for the mic icon */
  .mic-disabled {
    pointer-events: none; /* blocks mouse clicks */
    opacity: 0.5; /* visual feedback */
    cursor: not-allowed; /* shows disabled cursor */
    user-select: none; /* disables text selection */
    outline: none; /* removes focus outline */
  }

  /* Prevent focus via tabbing */
  .mic-disabled:focus {
    outline: none;
  }

  /* Optional: remove from tab order if the element is focusable (like a button) */
  .mic-disabled[tabindex] {
    tabindex: -1;
  }

  /* CSS for styling the fixed header in collapsed state */

  .collapsed-header {
    background: linear-gradient(90deg, #3A5B97 5.91%, #1A79A8 92.46%);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    box-sizing: border-box;
  }

  .collapsed-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
  }

  .collapsed-title {
    font-size: 16px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .collapsed-icon {
    width: 14px;
    height: 7px;
    margin-top: 7px;
    margin-right: 5px;
    transform: rotate(180deg);
    cursor: pointer;
    transition: all 1s ease-in-out;
  }

  /* CSS for styling bot and user messages in Web Chat */

  .webchat_botmessage {
    background: #f0f4fe !important;
    border-color: #f0f4fe !important;
    border-radius: 4px !important;
    font-size: 18px !important;
    font-family: Arial !important;
    color: #5B5B5B !important;
  }

  /* Fix link color contrast in bot messages - WCAG AA compliance */
  .webchat_botmessage a,
  .webchat_botmessage a:link,
  .webchat_botmessage a:visited {
    color: #3073ad; /* Contrast ratio 4.56:1 on #f0f4fe background */
  }

  .webchat__usermessage {
    background: linear-gradient(90deg,#3B5B97 0%,#1A7AA9 100%) !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    font-size: 16px !important;
    font-family: Arial !important;
  }

  .webchat__basic-transcript__activity-body {
    padding-bottom: 16px !important;
  }

  .webchat__bubble--from-user {
    width: auto !important;
  }

  .container {
    padding-left: 20px;
  }


  .hide-mode {
    display: none !important;
  }

  /* CSS for positioning the feedback container below bot messages */

  .feedbackContainer {
    display: flex;
    justify-content: flex-end;
  }

  /* CSS for styling the manual iframe section in dark mode */

  .iframe-overlay.dark-mode {
    background-color: #303030 !important;
  }

  /* CSS for styling the "Show More" button, its hover state, and hiding it for older messages */

  .show-more-button {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    color: #2667A0;
    border: 0.5px solid #2667A0;
    border-radius: 2px;
    letter-spacing: 0px;
    opacity: 1;
    margin-top: -5px !important;
    transition: background 0.3s ease, color 0.3s ease;
  }

  /* Hover effect */
  .show-more-button:hover {
    background: #2667A0;
    color: #FFFFFF;
  }

  /* Hide button when messages get old */
  .hide-show-more-button {
    display: none !important;
  }

  /* CSS for styling the "Copy Message" button and its hover state */

  .copyMessageButton {
    display: grid;
    place-items: center;
    padding: 0 4px 0;
    cursor: pointer;
    min-height: 24px;
    justify-items: end;
  }

  .selected {
    pointer-events: none;
    background-color: #3F5E94 !important;
  }

  .copyInUser {
    opacity: 0;
  }

  .copyInUser:hover {
    opacity: 100;
  }

  /* CSS for the bot container in normal, collapsed, and minimum screen dimension states */
  .bot-container {
    width: 95%;
    height: calc(100dvh - 20px);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    position: fixed !important;
    bottom: 10px;
    right: 2.5%;
    left: auto;
    transition: all 0.6s ease-in-out;
    background: #fff;
    box-shadow: 0 0 15px 3px #CCCCCC;
    z-index: 1000;
    box-sizing: border-box;
  }

  /* Responsive fix for mobile and resizing issues */
  @media (max-width: 680px) {
    .bot-container {
      width: 100vw;
      min-width: 0;
      max-width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      bottom: 0;
      right: 0;
      left: 0;
      border-radius: 0;
      box-sizing: border-box;
    }
  }

  /* Ensure correct width when resizing back to desktop */
  @media (min-width: 681px) {
    .bot-container {
      width: 95%;
      right: 2.5%;
      left: auto;
      border-radius: 8px;
      box-sizing: border-box;
    }
  }

  /* Collapsed State */
  .bot-container.collapsed {
    width: 30%;
    height: 48px;
    bottom: 10px;
    left: auto; /* Reset left */
    right: 20px;
    min-width: 320px;
    transform: none; /* Remove centering */
  }

  .bot-container.minScrnDimension {
    height: 70%;
    width: 30%;
    box-shadow: 0 0 15px 3px #CCCCCC;
    transition: all 1s;
    bottom: 20px;
    right: 40px;
    min-width: 404px;
    min-height: 200px;
  }

  /* CSS for the bot header, including layout, colors, and typography */

  .bot-header {
    height: 50px;
    line-height: 45px;
    cursor: pointer;
    background-image: linear-gradient(90deg,#3A5B97 5.91%, #1A79A8 92.46%);
    color: white;
    padding: 8px 13px 0 8px;
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Arial;
    font-size: 20px;
    font-weight: 400;
    box-shadow: 0 1px rgba(0, 0, 0, 0.2);
    box-sizing: content-box;
  }

  .bot-header-left {
    display: flex;
    align-items: center;
  }

  /* CSS for the bot avatar styling and adjustments for image size */

  .bot-avatar {
    vertical-align: middle;
    margin-bottom: 22px;
    margin-left: 1px;
    height: 72px;
    width: 60px !important;
  }

  .webchat__imageAvatar__image img {
    height: 38px !important;
    width: 75% !important;
  }

  /* CSS for bot title styling, responsive adjustments, and header action icons */

  .bot-title {
    font-size: 20px !important;
    font-weight: 400 !important;
    white-space: nowrap;
    margin-left: 5px;
    letter-spacing: 0.5px;
  }

  @media screen and (max-width: 374px) {
    .bot-title {
      white-space: normal;
      word-wrap: break-word;
    }
  }

  .bot-header-actions {
    display: flex;
    gap: 12px;
    z-index: 1000;
    align-items: center;
  }

  .header-icon {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  button.header-icon {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  button.header-icon img {
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* CSS for bot chat container, input area, message bubbles, and button styling */

  .bot-header.no-click {
    pointer-events: none;
  }

  .bot-header.no-click::before {
    content: '';
    position: absolute;
    inset: 0;
    cursor: not-allowed;
  }


  .bot-chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #ffffff;
  }

  .bot-input-container {
    border-top: 1px solid #ddd;
    padding: 15px;
    background: white;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .bot-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 14px;
    outline: none;
  }

  .bot-send-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
  }

  .message-counter {
    font-size: 12px;
    color: #767676;
    margin-right: 10px;
  }

  .webchat__bubble {
    display: flex;
    align-items: flex-start;
    max-width: 82% !important;
    width: fit-content !important;
  }

  /* CSS for message bubbles, buttons, and custom user message styling */

  .didyoumeanbutton {
    border: none;
    appearance: none;
    background-color: white;
    color: rgb(0, 99, 177);
    font-weight: 400;
    padding: 5px;
    text-align: left;
    padding-left: 15px;
    font-size: 20px !important;
  }

  .webchat__bubble--from-user {
    flex-direction: row-reverse;
  }

  .webchat_bubble_content {
    max-width: 82% !important;
    min-width: 40px;
    padding: 8px 12px;
    border-radius: 18px;
    background: #ddd;
    margin: 0 8px;
  }

  .webchat__text-content {
    font-size: 18px !important;
    line-height: 1.4;
    word-wrap: break-word;
    display: inline-block;
    font-family: Arial !important;
    padding: 15px 15px 15px 15px !important;
  }

  .webchat__stacked-layout_alignment-pad {
    flex: 1;
  }

  /* Bot container styles with fixed height and scroll */
  .bot-chat-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
  }

  /* Message grouping and alignment */
  .webchat__stacked-layout__message {
    display: flex;
    align-items: flex-start;
    margin: 2px 0;
    caret-color: black !important;
  }

  .webchat__stacked-layout__message--content {
    display: inline-block;
    max-width: fit-content;
  }

  /* Status message styles */
  .webchat__stacked-layout__status {
    text-align: center;
    color: #767676;
    font-size: 12px;
    margin: 8px 0;
  }

  /* Timestamp styles */
  .webchat__timestamp {
    font-size: 11px;
    color: #767676;
    margin: 4px 0;
    text-align: center;
  }

  /* CSS for dropdown menu and item styling, including dark mode and hover effects */
  .dropdown-menu {
    position: absolute !important;
    color: #000000;
    padding: 0px;
    right: 42px !important;
    top: 47px !important;
    border: none;
    background-color: transparent;
    z-index: 1002;
  }

  .dropdown-item {
    display: flex;
    padding: 0px 8px;
    width: 220px;
    height: 50px;
    align-items: center;
    border: 1px solid #e4e4e4;
    font-family: Arial;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    background-color: white;
  }

  .dropdown-item:hover {
    background-color: #0281AF;
    color: #FFFFFF;
  }

  .dropdown-item.dark-mode {
    border-color: #494949;
    background-color: #404040;
    color: #FFFFFF;
  }

  .dropdown-item.dark-mode:hover {
    border-color: #494949;
    background-color: #0281AF;
    color: #FFFFFF;
  }

  /* CSS for icon adjustments, send box styling, upload button hide, and dark mode tweaks */
  .icon-only {
    height: 5px !important;
    top: -5px !important;
    background-color: transparent !important;
    position: absolute !important;
    border: none !important;
    padding: 0px !important;
  }

  .webchat__send-box-text-box {
    border-right: none;
    padding: 8px !important;
    bottom: 0;
    height: 70%;
    margin-right: 3px;
    margin-left: 1px;
    min-width: 0px;
  }

  .react-film__flipper {
    display: none;
  }

  .webchat__upload-button {
    display: none;
  }

  .collapseIcon {
    width: 14px !important;
    height: 7px;
  }

  button.collapseIcon,
  button.header-icon.collapseIcon {
    width: 14px;
    height: 7px;
  }

  .bot-container.dark-mode {
    box-shadow: none;
  }

  .header-icon {
    height: 23px;
    width: 23px;
  }

  .bot-chat-container.dark-mode {
    background-color: #3d3939;
    caret-color: black !important;
  }

  .webchat__send-box.dark-mode {
    background-color: #090909 !important;
    caret-color: #FFFFFF !important;
  }

  .webchat__send-box__main.dark-mode {
    background-color: #333333 !important;
    caret-color: #FFFFFF !important;
    border-color: #606060 !important;
  }

  .webchat__send-box-text-box__input.dark-mode {
    background-color: #333333 !important;
    color: #FFFFFF !important;
    caret-color: #FFFFFF !important;
  }

  .webchat__basic-transcript__filler.dark-mode {
    background-color: #3d3939 !important;
    caret-color: #FFFFFF !important;
  }

  .webchat-send-box-text-box .webchat-send-box-text-box_input.dark-mode {
    caret-color: black !important;
  }

  .webchat__send-box-text-box__input:disabled {
    cursor: not-allowed;
  }

  /* CSS for visibility, carousel content styling, and dark mode adjustments */
  .webchat__basic-transcript__activity {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .webchat_bubble_content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .bot-chat-container {
    padding: 0px;
  }

  @media screen and (max-width: 680px) {
    .webchat__carousel-filmstrip__alignment-pad {
      display: none !important;
    }
  }

  .webchat__carousel-filmstrip__complimentary-content {
    background: #f0f4fe;
    border-color: #f0f4fe;
    border-radius: 4px;
    padding: 12px 12px 0px 12px;
  }

  .webchat__carousel-filmstrip__complimentary-content.dark-mode {
    background-color: transparent !important;
  }

  .webchat__carousel-filmstrip__complimentary-content .dark-mode .ac-textBlock {
    border: solid 1px;
    border-color: #b2ceff;
    padding: 10px;
  }

  .webchat__carousel-filmstrip__complimentary-content.dark-mode .ac-container {
    padding: 0px !important;
  }

  .ac-container p {
    padding: 0px !important;
  }

  .webchat__carousel-filmstrip__complimentary-content.dark-mode .webchat__bubble {
    overflow: visible !important;
    margin-bottom: 12px;
  }

  .webchat__carousel-filmstrip__complimentary-content.dark-mode .webchat__bubble__content {
    overflow: visible !important;
  }

  .webchat__carousel-filmstrip__complimentary-content.dark-mode .containerCounter {
    color: white;
  }

  /* CSS for "Show More" button, carousel bubble content, and attachment styling */
  .showMeMore {
    background-color: transparent;
    border: none;
    color: #337ab7;
    padding: 2px;
    font-size: 20px;
    text-decoration: underline;
  }

  .showMeMore.dark-mode {
    color: #B2CEFF;
    background-color: #303030;
  }

  .webchat__carousel-layout li .webchat__bubble__content {
    background: #ffffff !important;
  }

  .webchat__carousel-filmstrip__attachments {
    display: flex;
    flex-direction: column; /* Makes the flex layout vertical */
    margin: 0px !important;
  }

  .webchat__carousel-filmstrip-attachment {
    width: 100% !important;
    padding: 0px !important;
    max-width: 100% !important;
    margin-bottom: 8px;
  }

  .webchat__carousel-filmstrip-attachment .webchat__bubble {
    width: 100% !important;
  }

  /* CSS for feedback container, action buttons, and hover effects */
  .feedbackProcessed {
    padding: 0px !important;
  }

  .feedback-container {
    display: flex;
    justify-content: flex-end; /* Align the action items to the end */
    padding: 2px 6px 6px 0px;
  }

  .feedback-container .hide-mode {
    display: none !important;
  }

  .feedback-actions {
    display: flex;
    gap: 8px; /* Add gap between action items */
    min-height: 32px;
    padding: 0px 15px;
  }

  .webchat__bubble {
    width: 100%;
  }

  .feedback-action-button {
    padding: 2px 12px;
    border: 1px solid #ccc;
    border-radius: 40px; /* Set border-radius */
    background-color: white;
    color: black;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
  }

  .feedback-action-button:hover {
    background-color: #1A7AA9; /* Set hover background color */
    color: white; /* Change text color on hover */
    border-color: #3F5E94; /* Optional: change border color on hover */
    border: 1px solid transparent;
  }

  /* CSS for action buttons, text blocks, dark mode styling, and visibility control */
  .ac-pushButton {
    color: #2667A0;
    font-size: 20px !important;
    font-weight: 400 !important;
    width: 100%;
    padding: 8px 10px;
    justify-content: left !important;
    text-align: left !important;
    border: 1px solid #FFFFFF;
    height: auto;
    display: flex;
    align-items: center;
  }

  .ac-pushButton div {
    text-overflow: inherit !important;
    white-space: normal !important;
  }

  .ac-textBlock {
    font-family: Arial !important;
    font-size: 18px !important;
    line-height: 140% !important;
    max-height: max-content !important;
    color: #5B5B5B !important;
  }

  .show-more-button.dark-mode {
    background-color: #303030 !important;
    border: 1px solid #B2CEFF !important;
    color: #B2CEFF !important;
  }

  .show-more-button.dark-mode:hover {
    background-color: #b2ceff !important;
    color: #000000 !important;
  }

  .bot-container.dark-mode .ac-pushButton {
    background-color: #303030 !important;
    border: 1px solid #B2CEFF !important;
    color: #B2CEFF !important;
  }


  .showMoreOptionsDiv {
    padding: 2px;
    color: #3F5E94;
    background-color: #f0f4fe;
  }

  .dark-mode {
    background-color: #090909;
  }

  .hidden-mode {
    display: none !important;
  }

  .darkModeMessage {
    background-color: #3d3939;
  }

  .darkModeInput {
    background-color: #3d3939;
  }

  /* Add webchat filler background in dark mode */
  .webchat__bubble__content.webchat_botmessage.dark-mode {
    background-color: #303030 !important;
    border: none !important;
    color: #ffffff !important;
  }

  /* Ensure dark-mode link contrast in bot messages meets WCAG 1.4.3 */
  .webchat__bubble__content.webchat_botmessage.dark-mode a,
  .webchat__bubble__content.webchat_botmessage.dark-mode a:link,
  .webchat__bubble__content.webchat_botmessage.dark-mode a:visited,
  .webchat__bubble__content.webchat_botmessage.dark-mode a:hover,
  .webchat__bubble__content.webchat_botmessage.dark-mode a:focus,
  .webchat__bubble__content.webchat_botmessage.dark-mode .links {
    color: #B2CEFF !important;
    background-color: transparent !important;
  }

  /* CSS for icon button shading, feedback action buttons in dark mode, and user message styling */
  .webchat__icon-button__shade {
    border-radius: 50px !important;
    overflow: hidden;
  }

  .feedback-action-button.dark-mode {
    background-color: #303030 !important;
    border-style: solid !important;
    border: 1px solid #7D7D7D !important;
    color: white !important;
  }

  .feedback-action-button.dark-mode:hover {
    background-color: #3F5E94 !important;
    border: 1px solid transparent !important;
  }

  .feedback-actions .feedback-action-button.dark-mode.selected {
    background-color: #3F5E94 !important;
    border: 1px solid #7D7D7D !important;
  }

  .webchat__bubble__content.webchat__usermessage.dark-mode {
    border: none !important;
    border-style: none !important;
  }

  .webchat__typingIndicator.dark-mode {
    background-color: #000000 !important;
  }

  /* CSS for icon sizes, dark mode styles, carousel content, and responsive bot container adjustments */
  .collapseIcon {
    width: 14px;
    height: 7px;
  }

  .webchat__connectivityStatus.dark-mode {
    background-color: #000000 !important;
  }

  .threeDots {
    width: 24px !important;
    height: 14px !important;
  }

  .lighton {
    width: 27px !important;
    height: 19px !important;
  }

  .location {
    width: 23px !important;
  }

  .webchat__carousel-filmstrip__content.dark-mode {
    background: #303030 !important;
    border-color: none !important;
    border-radius: 4px !important;
    margin: 0px 12px;
    color: #ffffff;
  }

  .ac-textBlock.dark-mode {
    background-color: #303030 !important;
    color: #ffffff !important;
  }

  .bot-container p,
  .custom-dialog-container p,
  .idle-dialog-container p,
  #mic-permission-modal p {
    margin: 0;
    padding: 0 !important;
  }

  .webchat__usermessage {
    min-height: auto !important;
  }

  .webchat__usermessage .webchat__text-content {
    padding: 6px 6px 6px 6px !important;
  }

  .webchat__carousel-filmstrip__attachments .webchat__bubble {
    max-width: 100% !important;
  }

  .webchat__carousel-layout,
  .webchat__carousel-filmstrip__attachments,
  .webchat__carousel-filmstrip-attachment {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .ac-textBlock,
  .webchat__render-markdown {
    white-space: normal !important;
    text-overflow: unset !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .ac-textBlock p {
    white-space: normal !important;
    word-break: break-word !important;
  }

  @media screen and (max-width: 680px) {
    .bot-container {
      width: 100% !important;
      bottom: 0px !important;
      right: 0% !important;
    }
  }

  /* CSS for custom scrollbar styling and adjustments for bot message container */

  .bot-chat-container ::-webkit-scrollbar {
    width: 8px;
  }

  .bot-chat-container ::-webkit-scrollbar * {
    background-color: transparent;
  }

  .bot-chat-container ::-webkit-scrollbar-thumb {
    background-color: #DBDEE1;
  }

  .webchat_botmessage.ac-container {
    padding: 0px !important;
  }

  /* CSS for input box, send button, text limit logic, and associated icons with dark mode support */
  .verticalLine, .verticalLine2, .verticalLineCancel {
    line-height: 1.42857143;
    color: #333;
    font-family: Arial;
    font-size: 16px;
    box-sizing: border-box;
    border-left: 2px solid #D3D3D3;
    height: 26px;
    position: relative;
    float: right;
    margin: 0 8px;
    height: 24px;
    width: 1px;
    background-color: #ccc;
    display: inline-block;
    vertical-align: middle;
  }

  .visible {
    display: inline-block !important;
  }

  /* Send button states */
  .sendButton {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 8px;
  }

  .sendButton.disableSend {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .sendButton.enableSend {
    opacity: 1;
  }

  /* Hidden text for screen readers */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* Prompt guide icon */
  .promptGuideDiv {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }

  button.promptGuideDiv {
    background: none;
    border: none;
    padding: 0;
    line-height: 0;
  }

  /* Character counter */
  .limitText {
    font-size: 12px;
    color: #666;
    margin-left: 8px;
  }

  .limitText.exceeded {
    color: red;
    font-weight: 500;
  }

  /* Clear text (cancel) icon */
  .clearTextIcon {
    cursor: pointer;
    vertical-align: middle;
    display: none;
    margin-left: 4px;
  }

  button.clearTextIcon {
    background: none;
    border: none;
    padding: 2px;
    line-height: 0;
    overflow: visible;
  }

  button.clearTextIcon:focus,
  button.clearTextIcon:focus-visible {
    outline: 2.5px solid #000;
    outline-offset: 0;
    border-radius: 2px;
  }

  button.clearTextIcon::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  .clearTextIcon.visible {
    display: inline-block;
  }

  /* Prompts dropdown */
  .promptsListDiv {
    position: absolute;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    display: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
  }

  .webchat__send-box {
    height: 85px;
    border-top: 1px solid #dddddd;
    padding: 20px 12px 72px 12px;
  }

  .webchat__send-box.dark-mode {
    border-color: #606060 !important;
  }

  .webchat__send-box__main {
    display: flex;
    text-align: end;
    border: 1px solid #dddddd;
    border-radius: 48px;
  }

  .webchat__microphone-button {
    align-self: center;
    order: -1;
  }

  .inputBox {
    display: flex;
  }

  .limitText.dark-mode {
    color: #FFFFFF;
    background-color: transparent;
  }

  .verticalLine.dark-mode, .verticalLine2.dark-mode, .verticalLineCancel.dark-mode {
    border-color: #707070;
  }

  .verticalLineCancel {
    display: none;
    margin: 0px 8px 0px 8px;
  }

  .verticalLineCancel.visible {
    display: inline-block;
  }

  .clearTextIcon.dark-mode {
    color: #7d7d7d;
    background-color: transparent;
  }

  .webchat__send-box-text-box__input {
    font-size: 16px !important;
    font-family: Arial !important;
    min-width: 0px;
  }

  .sendButton {
    box-sizing: border-box;
    margin: 0;
    font: inherit;
    color: inherit;
    overflow: visible;
    text-transform: none;
    -webkit-appearance: button;
    line-height: inherit;
    border: none;
    background: none;
    background-size: cover;
    width: 30px;
    font-family: Arial;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease;
    height: 25px;
    font-size: 13px;
    margin-left: 2px;
  }

  .webchat__typingIndicator {
    background-image: var(--typing-indicator-icon) !important;
  }

  .disableSend {
    background-image: var(--send-disabled-light-icon);
    cursor: default;
  }

  .enableSend {
    background-image: var(--send-enabled-light-icon);
    cursor: pointer;
  }

  .sendButton.disableSend.dark-mode {
    background-image: var(--send-disabled-dark-icon) !important;
    cursor: not-allowed;
  }

  .sendButton.enableSend.dark-mode {
    background-image: var(--send-enabled-dark-icon) !important;
    cursor: pointer;
  }

  .clearTextIcon {
    font-family: Arial;
    box-sizing: border-box;
    line-height: 1;
    text-shadow: none;
    color: #000;
    cursor: pointer;
    display: none;
    transition: opacity 0.2s ease;
  }

  .clearTextIcon:hover {
    opacity: 0.75;
  }

  .clearTextIcon.visible {
    display: block;
  }

  .limitText {
    font-family: Arial;
    box-sizing: border-box;
    float: right;
    font-size: 17px;
    padding-right: 20px;
    padding-top: 4px;
    color: #5B5B5B;
    position: absolute;
    right: 14px;
    bottom: 1px;
  }

  .limitText.exceeded {
    color: #FF0000;
  }

  /* CSS for "Did You Mean" layout, dark mode styling, buttons, and message positioning */
  .wrapperDiv {
    width: 82%;
    background-color: #f1f4ff;
    border-radius: 5px;
    padding: 15px;
  }

  .wrapperDiv.dark-mode {
    background-color: #303030 !important;
  }

  .wrapperDiv.dark-mode {
    background-color: #303030 !important;
  }

  .dark-ac-container {
    padding: 0px !important;
  }

  .dark-ac-container.dark-mode {
    background-color: #303030 !important;
  }

  .newCardContainer.dark-mode {
    background-color: #303030 !important;
  }

  .newCardContainer2.dark-mode {
    background-color: #303030 !important;
  }

  .didyoumeanbutton.dark-mode {
    background-color: #303030 !important;
    color: #B2CEFF !important;
  }

  .didyoumeanbutton:hover.dark-mode {
    background-color: #B2CEFF !important;
    color: #333333 !important;
    border-color: #B2CEFF !important;
  }

  .bot-container.dark-mode .ac-pushButton:hover {
    background-color: #B2CEFF !important;
    color: #333333 !important;
    border-color: #B2CEFF !important;
  }

  .didyoumeanpara.dark-mode {
    background-color: #303030 !important;
    color: #FFF !important;
  }

  .summary-button {
    border: 1px solid #D5DFF2 !important;
  }

  .summary-button.dark-mode {
    border: 1px solid #B2CEFF !important;
  }

  .summaryButtonInner {
    overflow: hidden !important;
  }

  .summaryButtonInnerFlex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .summaryButtonPadding {
    padding: 0px !important;
    margin: 0px !important;
  }

  .buttonswithpara.dark-mode {
    border: 2px solid #B2CEFF !important;
  }

  .ac-pushButton:hover {
    background-color: #2667A0 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
  }

  .webchat__typingIndicator.dark-mode {
    background-color: #303030 !important;
  }

  :root {
    --point-left-fill: #F2F2F2;
  }

  .wc-message-callout {
    line-height: 1.42857143;
    font-family: Arial;
    font-size: 18px;
    word-wrap: break-word;
    color: #5B5B5B;
    stroke: none;
    box-sizing: border-box;
    overflow: hidden;
    height: 22px;
    position: absolute;
    stroke: none;
    top: 14px;
    width: 6px;
  }

  /* Bot message positioning */
  .webchat__stacked-layout__content:not(:has(.webchat__bubble--from-user)) .wc-message-callout {
    left: 44px;
  }
  /* User message positioning */
  .webchat__stacked-layout__content:has(.webchat__bubble--from-user) .wc-message-callout {
    right: -5px;
  }

  /* CSS for adding triangle SVG (callout arrows) in user and bot messages */

  .wc-message-callout .point-left {
    fill: var(--point-left-fill);
  }

  .wc-message-callout .point-right {
    fill: #2667A0;
  }

  /* CSS for styling and behavior of custom modal dialog, including buttons, content, and fade-in/fade-out transitions */
  .custom-dialog-container.modal.fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
  }

  .custom-dialog-container.modal.fade.show {
    visibility: visible;
    opacity: 1;
  }

  .custom-dialog-container .modal-dialog {
    margin: 0 auto;
  }

  /* DEFAULT (MAXIMIZED CHATBOT) */
  .modal-dialog {
    width: 85%;
    max-width: 720px;
    height: 0%;
    display: flex;
    align-items: center;
  }

  .custom-modal-content {
    background: #f3f3f3;
    pointer-events: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border-radius: 2px;
    padding: 25px 0;
  }

  .custom-dialog-container .custom-modal-intro-title {
    font-size: 18px;
    font-weight: 600;
    color: #2f6fa5;
    padding: 0 30px 12px !important;
    margin: 0;
  }

  .custom-dialog-container .custom-modal-intro {
    font-size: 14px;
    color: #555;
    padding: 0 30px 12px !important;
    margin: 0;
    line-height: 1.5;
  }

  /* Horizontal buttons (MAXIMIZED) */
  .custom-modal-center {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 30px 0;
    flex-wrap: wrap;
  }

  .btn {
    padding: 8px 18px;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    background-color: #2f6fa5;
    color: #fff;
    min-width: 170px;
  }

  .btn:hover {
    opacity: 0.9;
  }

  /* Show keyboard focus ring OUTSIDE the new-conversation modal buttons (not inside) */
  .custom-dialog-container .custom-modal-center .btn:focus,
  .custom-dialog-container .custom-modal-center .btn:focus-visible {
    outline-offset: 1px;
    box-shadow: white 0px 0px 0px 2.5px !important;
  }

  .bot-container.minScrnDimension .modal-dialog {
    max-width: 384px;
  }

  .bot-container.minScrnDimension .custom-modal-center {
    flex-direction: column;
    align-items: stretch;
  }

  .bot-container.minScrnDimension .btn {
    width: 100%;
    min-width: unset;
  }

  .bot-container.minScrnDimension ~ .custom-dialog-container .modal-dialog,
  .custom-dialog-container.minimized-view .modal-dialog {
    width: clamp(404px, 30vw, 500px);
  }

  @media (max-width: 680px) {
    .modal-dialog {
      max-width: 90%;
    }
  }

  @media (max-width: 768px) {

    .modal-dialog {
      max-width: 90%;
    }

    .custom-modal-content {
      padding: 20px 0;
      border-radius: 0;
    }

    .custom-dialog-container .custom-modal-intro-title {
      font-size: 16px;
      padding: 0 20px 10px;
    }

    .custom-dialog-container .custom-modal-intro {
      font-size: 13px;
      padding: 0 20px 10px;
    }

    .custom-modal-center {
      flex-direction: column;
      align-items: stretch;
      padding: 10px 28px;
      gap: 10px;
    }

    .btn {
      width: 100%;
      min-width: unset;
      padding: 10px 14px;
      font-size: 13px;
    }
  }

  /* CSS for styling and behavior of idle modal dialog, including fade-in/fade-out transitions, layout, and button styling */
  .idle-dialog-container.modal.fade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    z-index: 9999;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
  }

  .idle-dialog-container.modal.fade.show {
    visibility: visible;
    opacity: 1;
  }

  .idle-dialog-container .modal-dialog {
    margin: 0 auto;
    width: 85%;
    max-width: 720px;
    display: flex;
    align-items: center;
  }

  .idlemodal-content {
    background: #f3f3f3;
    pointer-events: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
  }

  .modal-body {
    flex: 0 0 auto;
    text-align: center;
    padding: 15px;
  }

  .captcha-dialog {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .modal-intro {
    font-size: 18px;
    font-weight: 600;
    color: #2f6fa5;
    padding: 0 30px 12px;
    margin: 0;
    text-align: left;
  }

  .idlemodal-center {
    display: flex;
    justify-content: center;
  }

  .idlemodal-center .btn {
    padding: 8px 18px;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    background-color: #2f6fa5;
    color: #fff;
    min-width: 170px;
  }

  .idlemodal-center .btn:hover {
    opacity: 0.9;
  }

  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 0px;
  }

  .btn:hover, .btn:focus {
    color: #FFFFFF !important;
  }

  .yesbtn,
  .nobtn {
    border: 12px;
    border-radius: 0;
    font-family: Arial;
    font-size: 12px;
    color: #FFFFFF;
    float: right;
    margin: -2px 2%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    min-width: 250px;
  }

  .modal.fade {
    opacity: 0;
    transition: all 0.25s ease-in-out;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    outline: 0;
    background: white;
    visibility: hidden;
    width: 100%;
    height: 100%;
  }

  .modal.fade.show {
    opacity: 1;
    visibility: visible;
  }

  @media (max-width: 768px) {

    .modal-dialog {
      max-width: 90%;
    }

    .idlemodal-content {
      padding: 20px 0;
      border-radius: 0;
    }

    .modal-intro {
      font-size: 16px;
      padding: 0 20px 10px;
    }

    .idlemodal-center {
      flex-direction: column;
      align-items: stretch;
      padding: 20px;
      gap: 20px;
    }

    .idlemodal-center .btn {
      width: 100%;
      min-width: unset;
      padding: 10px 14px;
      font-size: 13px;
    }
  }


  /* Styling for CAPTCHA modal, including content layout, checkbox container, modal body, intro text, CAPTCHA centering, and verify button styling */
  .captcha-modal-content {
    position: absolute;
    background-color: #fff;
    background-clip: padding-box;
    border: none;
    border-radius: 0px;
    outline: 0;
    box-shadow: none;
    height: fit-content !important; /* This will make it match content height */
    display: flex;
    flex-direction: column;
  }

  .checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
  }

  .modal-body {
    flex: 0 0 auto; /* Prevents flex from adding extra space */
    text-align: center;
    padding: 15px;
  }

  .modal-intro {
    margin: 0 0 10px;
    font-family: Arial;
    font-weight: bolder;
    font-size: 18px;
    text-align: center;
    padding: 5px 20px;
    color: #5B5B5B;
  }

  .modal.fade.show {
    opacity: 1;
    display: block;
  }

  .captcha-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: 100%;
    min-height: 78px; /* reCAPTCHA height */
    min-width: 302px; /* reCAPTCHA width */
  }

  .verify-btn {
    padding: 10px 20px;
    transition: background-color 0.3s;
    background-color: #2172A4;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
  }


  .g-recaptcha {
    display: inline-block;
    min-height: 78px; /* reCAPTCHA height */
    min-width: 302px; /* reCAPTCHA width */
  }

  /*  Split-pane overlay: sidebar left, iframe right  */
  .iframe-overlay {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 50px);
    background: white;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
    z-index: 999;
  }

  .iframe-overlay.dark-mode {
    background-color: #1e2533 !important;
  }

  /* Sidebar column: fixed width, contains the lsb-panel */
  .lsb-sidebar-col {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width 0.28s cubic-bezier(0.4,0,0.2,1), min-width 0.28s, max-width 0.28s;
    border-right: 1px solid #d0d7e3;
  }

  .iframe-overlay.dark-mode .lsb-sidebar-col {
    border-right-color: #363e50;
  }

  /* Collapsed sidebar: shrinks to a slim gradient stub — list is hidden, header stays */
  .lsb-sidebar-col.lsb-collapsed {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
  }

  .lsb-sidebar-col.lsb-collapsed .lsb-list {
    display: none;
  }

  .lsb-sidebar-col.lsb-collapsed .lsb-panel-title,
  .lsb-sidebar-col.lsb-collapsed .lsb-panel-count {
    display: none;
  }

  /* iframe column: fills remaining space */
  .lsb-iframe-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    padding: 10px 12px 12px 12px;
    box-sizing: border-box;
  }

  /* Toolbar row inside iframe column (holds close button) */
  .lsb-overlay-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 6px 0;
    flex-shrink: 0;
    background: transparent;
  }

  /* The iframe itself inside the iframe column */
  .lsb-iframe {
    flex: 1;
    border: none;
    width: 100%;
    min-height: 0;
    display: block;
    border-radius: 4px;
  }

  /* Keep legacy .iframe class working too */
  .iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    flex: 1;
    border-radius: 4px;
  }

  .newCardContainer2 {
    font-family: Arial;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8px;
    line-height: 1.42857143;
    font-family: Arial, sans-serif;
    font-size: 18px;
    word-wrap: break-word;
    color: #5B5B5B;
    box-sizing: border-box;
    background-color: #FFFFFF;
  }

  /* DARK mode: keep the close (X) icon white. Scope by the wrapper's dark-mode
     class so the rule works even though the SVG itself may not get the class. */
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__close-button-image,
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__close-button-image path,
  .webchat__keyboard-help__close-button-image.dark-mode,
  .webchat__keyboard-help__close-button-image.dark-mode path {
    fill: #FFFFFF !important;
  }

  /* LIGHT mode: force the close (X) icon to dark, regardless of the OS
     prefers-color-scheme. Scope by the wrapper NOT having the dark-mode class
     so this overrides the library's @media (prefers-color-scheme: dark) fill
     that turns the icon white when the chatbot is actually in light mode.
     Hover / focus / active all use the same color so there is no visual change. */
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button-image,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button-image path,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:hover .webchat__keyboard-help__close-button-image,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:hover .webchat__keyboard-help__close-button-image path,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:focus .webchat__keyboard-help__close-button-image,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:focus .webchat__keyboard-help__close-button-image path,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:focus-visible .webchat__keyboard-help__close-button-image,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:focus-visible .webchat__keyboard-help__close-button-image path,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:active .webchat__keyboard-help__close-button-image,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__close-button:active .webchat__keyboard-help__close-button-image path {
    fill: #000000 !important;
    background: none !important;
  }

  /* Remove mouse hover / click visual effects on the keyboard-help close (X)
     button. The browser's default focus ring is left untouched so keyboard
     tab navigation uses the default tab ordering / focus indicator. */
  .webchat__keyboard-help__close-button,
  .webchat__keyboard-help__close-button:hover,
  .webchat__keyboard-help__close-button:active,
  .webchat__keyboard-help__close-button:focus,
  .webchat__keyboard-help__close-button:focus-visible,
  .webchat__keyboard-help__close-button .webchat__keyboard-help__close-button-border {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Ensure the dialog and its focusable children participate in normal tab
     order. The WebChat library renders the modal but host-site CSS sometimes
     sets tabindex/visibility that blocks tabbing. Force interactive elements
     inside the modal to be reachable. */
  .webchat__keyboard-help,
  .webchat__keyboard-help__scrollable {
    pointer-events: auto !important;
  }

  .webchat__keyboard-help__close-button {
    pointer-events: auto !important;
  }

  /* Keep the browser's default focus ring on the close (X) button but draw it
 INSIDE the button bounds so the scrollable container's edge does not clip
 the top/right of the dashed outline. Also ensure ancestors don't clip it. */
  .webchat__keyboard-help__close-button:focus,
  .webchat__keyboard-help__close-button:focus-visible {
    outline-offset: -4px !important;
  }

  .webchat__keyboard-help__scrollable {
    overflow: auto;
  }

  /* When the chatbot is in LIGHT mode, force the keyboard-help dialog to use light
 styling even if the OS prefers-color-scheme is dark. The WebChat library applies
 its own dark theme via @media (prefers-color-scheme: dark), which causes the
 modal to look dark while the rest of the chatbot is light. These :not(.dark-mode)
 rules override that media query. */
  .webchat__keyboard-help__scrollable:not(.dark-mode) {
    background-color: #FFFFFF !important;
    color: #000000 !important;
  }

  .webchat__keyboard-help__border:not(.dark-mode) {
    background-color: #FFFFFF !important;
    color: #000000 !important;
  }

  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__header,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__sub-header,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__notes-header,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__notes-text,
  .webchat__keyboard-help__scrollable:not(.dark-mode) h1,
  .webchat__keyboard-help__scrollable:not(.dark-mode) h2,
  .webchat__keyboard-help__scrollable:not(.dark-mode) h3,
  .webchat__keyboard-help__scrollable:not(.dark-mode) h4,
  .webchat__keyboard-help__scrollable:not(.dark-mode) h5,
  .webchat__keyboard-help__scrollable:not(.dark-mode) h6,
  .webchat__keyboard-help__scrollable:not(.dark-mode) dt,
  .webchat__keyboard-help__scrollable:not(.dark-mode) dd {
    color: #17375d !important;
  }
  /* Force the correct SVG illustration variant for light vs dark mode, overriding
     the library's prefers-color-scheme media queries. */
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__image--light {
    display: inline-block !important;
  }

  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__image--dark,
  .webchat__keyboard-help__scrollable:not(.dark-mode) .webchat__keyboard-help__image--high-contrast {
    display: none !important;
  }

  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__image--dark {
    display: inline-block !important;
  }

  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__image--light,
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__image--high-contrast {
    display: none !important;
  }

  /* Force headings inside the WebChat keyboard help dialog to white in dark mode,
     so host-site CSS cannot override their color. Scoped strictly to this dialog. */
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__header,
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__two-panes,
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__sub-header,
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__notes-header,
  .webchat__keyboard-help__scrollable.dark-mode .webchat__keyboard-help__notes-pane dt,
  .webchat__keyboard-help__scrollable.dark-mode h1,
  .webchat__keyboard-help__scrollable.dark-mode h2,
  .webchat__keyboard-help__scrollable.dark-mode h3,
  .webchat__keyboard-help__scrollable.dark-mode h4,
  .webchat__keyboard-help__scrollable.dark-mode h5,
  .webchat__keyboard-help__scrollable.dark-mode h6,
  .webchat__keyboard-help__scrollable.dark-mode dt,
  .webchat__keyboard-help__border.dark-mode dt,
  .dark-mode.webchat__keyboard-help__scrollable h2,
  .dark-mode.webchat__keyboard-help__scrollable h3 {
    color: #FFFFFF !important;
  }

  .newCardContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
    flex: 0 0 auto;
    padding: 0px 0px 8px 0px;
  }

  .didyoumeanpara {
    text-align: left;
    font-weight: 400;
    overflow-wrap: break-word;
    box-sizing: border-box;
    margin-left: 0;
    margin-right: 0;
    padding: 5px 15px;
    min-height: 20px;
    max-height: max-content;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 140%;
    margin-top: 0px;
    width: 100%;
    margin-bottom: 0px;
  }

  .summary {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    flex: 0 0 auto;
    border-bottom: 1px solid #D5DFF2;
    border-right: 1px solid #D5DFF2;
    border-left: 1px solid #D5DFF2;
  }

  .summary div p {
    padding: 5px 15px !important;
  }

  .toFullScreen {
    height: 100% !important;
    width: 100% !important;
  }

  .suggestions-parent-container {
    background-color: #F8F8F8;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
  }

  .suggestion-container {
    background-color: #F8F8F8;
    border-top: 1px solid #CCCCCC;
    padding-left: 8px;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .suggestion-area {
    width: 90%;
    min-height: 44px;
    overflow-y: scroll;
    padding-right: 8px;
    background-color: #F8F8F8 !important;
  }

  .suggestion-button {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 25px;
    padding: 0px 5px;
    margin: 6px 5px 0 0;
    display: -webkit-inline-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    height: 32px;
    font-size: 18px;
    color: #5B5B5B;
  }

  .containerCounter {
    text-align: center;
    margin: 10px 0px 0px 0px;
    font-size: 18px;
    color: #555;
  }


  .typing-indicator-style {
    height: 27px !important;
    width: 55px !important;
    border-radius: 30px;
    background-color: #F0F4FE;
    box-shadow: none;
    margin-top: -5px;
    margin-left: -5px;
  }

  .parent-div-style {
    display: flex;
  }

  .bot-chat-image {
    height: 40px;
    margin-left: 5px;
    margin-right: 9px;
    margin-top: -15px;
  }

  .bot-chat-svg {
    margin: 0;
    padding: 0;
  }

  .dark-mode-bg {
    background-color: #090909 !important;
  }

  .chat-container-style {
    flex: 0 !important;
  }

  .webchat__basic-transcript__filler {
    display: none;
  }

  .webchat_img_avatarDiv {
    width: 75%;
    height: 40px;
    margin-left: 5px;
  }

  .did__you__mean__bubble {
    margin: 0px;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100px !important;
  }

  .did__you__mean__button__hover {
    background-color: #2667A0 !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
  }

  .closeCNAPButton {
    cursor: pointer;
    align-self: flex-end;
  }

  .captcha-error {
    display: none;
    color: red;
    font-size: 12px;
    font-weight: 400;
    margin-top: -10px;
  }

  /* Styles for microphone button with hover effects and dark mode support */

  .webchat__microphone-button {
    padding: 0;
    height: 28px;
    width: 28px; /* Ensuring it's a square */
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    border-radius: 50%; /* Makes it fully circular */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .webchat__microphone-button:hover {
    background-color: rgb(243, 242, 241);
    box-shadow: 0 0 10px 6px rgb(243, 242, 241); /* Expands background effect */
  }

  .webchat__microphone-button__icon {
    height: 28px; /* Keeps the icon size same */
    width: 28px;
    fill: #767676;
  }

  .webchat__microphone-button.dark-mode:hover {
    background-color: #404040;
    box-shadow: 0 0 10px 6px #404040;
  }

  /* Styles for disabling clicks, bot toggle icon, splash screen transition, and preventing clicks on certain elements */

  .disable-clicks {
    pointer-events: none;
  }

  .botToggleIcon {
    width: auto;
    height: auto;
    float: right;
    cursor: pointer;
  }

  .newConvoIcon {
    cursor: pointer;
  }

  button.newConvoIcon {
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .seanPlusDiv {
    pointer-events: none; /* prevent clicks */
  }

  .splash-screen {
    transition: opacity 0.8s ease-in-out;
  }

  /* Styles for prompt guide, prompts list, and hover effects, including dark mode adjustments */

  .promptsListDiv {
    width: 280px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    background-color: #F0F4FE;
    position: absolute;
    right: 15px;
    bottom: 70px;
    display: none;
    z-index: 1000;
    text-align: left;
    font-family: Arial;
    font-size: 18px;
    font-weight: 400;
  }

  .scrollable-item {
    padding: 5px;
    margin-bottom: 5px;
    background-color: #FFFFFF;
    border-radius: 3px;
    cursor: pointer;
    color: #2667A0;
    border: 1px solid #FFFFFF;
  }

  .no-prompts {
    text-align: center;
    cursor: not-allowed;
    border: none;
    margin-bottom: 0;
    background-color: #F0F4FE;
  }

  .no-prompts.dark-mode {
    border: none;
    margin-bottom: 0;
    background-color: #303030;
    color: #B2CEFF;
  }

  .scrollable-item {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .scrollable-item:hover {
    background-color: #2667A0;
    color: #FFFFFF;
  }

  #promptGuideIcon {
    cursor: pointer;
  }

  .promptsListDiv.dark-mode {
    background-color: #303030 !important;
  }

  .scrollable-item.dark-mode {
    background-color: #333333 !important;
    color: #B2CEFF !important;
    border: 1px solid #B2CEFF !important;
  }

  /* Styles for suggestion container, button, and hover effects with dark mode adjustments */

  .suggestions-parent-container.dark-mode {
    background-color: #333333 !important;
    border: 1px solid #333333 !important;
  }

  .suggestion-container.dark-mode {
    background-color: #333333 !important;
    border-top: 1px solid #606060 !important;
  }

  .suggestion-area.dark-mode {
    background-color: #333333 !important;
  }

  .suggestion-button.dark-mode {
    background-color: #333333;
    border: 1px solid #B2CEFF;
    color: #B2CEFF;
  }

  .suggestion-button:hover {
    background-color: #2667A0 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
  }

  .suggestion-button:hover.dark-mode {
    background-color: #B2CEFF !important;
    color: #333333 !important;
    border-color: #B2CEFF !important;
  }

  /* Styles for scroll-to-end button and hover effects in dark mode */

  .webchat__scroll-to-end-button {
    background-color: #f0f4fe !important;
    color: #5B5B5B !important;
    font-family: Arial, sans-serif !important;
    z-index: 1001;
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  .webchat__scroll-to-end-button.dark-mode {
    background-color: #303030 !important;
    color: #FFFFFF !important;
    font-family: Arial, sans-serif !important;
    font-size: 15px !important;
  }

  .scrollable-item:hover.dark-mode {
    background-color: #B2CEFF !important;
    color: #333333 !important;
    border-color: #B2CEFF !important;
  }

  .ww_skin_page_body {
    visibility: visible !important;
  }

  iframe body {
    visibility: visible !important;
  }

  /* Styles for active ac-pushButton, hover effects, and dark mode variations */

  .ac-pushButton[aria-pressed="true"] {
    background-color: white !important;
    border: 1px solid #FFFFFF !important;
    color: rgb(0, 99, 177) !important;
  }

  .ac-pushButton[aria-pressed="true"]:hover {
    background-color: #2667A0 !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
  }

  .bot-container.dark-mode .ac-pushButton[aria-pressed="true"] {
    background-color: #303030 !important;
    border: 1px solid #B2CEFF !important;
    color: #B2CEFF !important;
  }

  .bot-container.dark-mode .ac-pushButton[aria-pressed="true"]:hover {
    background-color: #B2CEFF !important;
    color: #333333 !important;
    border-color: #B2CEFF !important;
  }

  .suggestion-area {
    display: flex;
    flex-wrap: wrap;
    max-height: 40px; /* Height of one line of buttons */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .suggestion-area.expanded {
    max-height: 1000px; /* effectively no limit */
    margin: 0px 0px 5px 0px;
  }

  .suggestions-parent-container,
  .suggestion-container {
    overflow: visible; /* or auto if scrollbars are needed */
  }

  .down-arrow.flipped {
    transform: scaleY(-1);
  }

  .suggestion-area {
    transition: max-height 0.3s ease;
  }


  .toggle-suggestions-button {
    display: none;
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
  }

  .toggle-arrow {
    width: 24px;
    height: 24px;
  }

  .up-arrow {
    display: none;
  }

  .suggestion-container {
    position: relative;
    width: 100%;
  }

  /* Helper class to determine if there's overflow */
  .needs-toggle::after {
    content: '';
    clear: both;
  }

  .webchat__stacked-layout__main:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .links {
    font-size: 18px;
    font-family: Arial, sans-serif;
    color: #3073ad;
    text-decoration: underline;
  }

  .links.dark-mode {
    color: #B2CEFF !important;
  }

  a {
    font-size: 20px !important;
    text-decoration: underline;
  }

  a.dark-mode {
    background-color: transparent !important;
    color: #B2CEFF !important;
  }

  /* Show keyboard focus ring OUTSIDE bot-message link anchors (not inside) */
  .links:focus,
  .links:focus-visible {
    outline-offset: 0px !important;
  }

  .links.dark-mode:focus,
  .links.dark-mode:focus-visible {
    outline-color: #FFFFFF;
    outline-offset: 0px !important;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .webchat__tts-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  /* Mic block Status Popup - hardened against host page overrides via .bot-container specificity boost */
  .bot-container #mic-permission-modal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1100 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .bot-container #mic-permission-modal .mic-modal-content {
    background-color: #ffffff !important;
    padding: 15px !important;
    width: 330px !important;
    max-width: calc(100% - 32px) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #5B5B5B;
    font-family: Arial, sans-serif !important;
    line-height: 1.4 !important;
  }

  .bot-container #mic-permission-modal .mic-modal-actions {
    margin-top: 10px !important;
    text-align: center !important;
    text-align-last: center !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .bot-container #mic-permission-modal .modal-btn-primary {
    background-color: #2172A4 !important;
    color: #ffffff !important;
    width: 60% !important;
    margin: 0 20px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-family: Arial, sans-serif !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    height: auto !important;
  }

  .bot-container #mic-permission-modal .mic-modal-content .custom-modal-data,
  .bot-container #mic-permission-modal .mic-modal-content .custom-modal-data p {
    color: #5B5B5B !important;
    font-size: 14px !important;
    padding: 3px 15px !important;
    text-align: left !important;
    line-height: 1.4 !important;
    background: transparent !important;
    font-weight: 400 !important;
  }

  .bot-container #mic-permission-modal .mic-modal-content .custom-data-list {
    padding: 0 15px !important;
    list-style: none !important;
    list-style-position: outside !important;
    counter-reset: micstep !important;
    box-sizing: border-box !important;
    text-align: left !important;
    text-indent: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .bot-container #mic-permission-modal .mic-modal-content .custom-data-list li {
    counter-increment: micstep !important;
    position: relative !important;
    padding: 0 0 0 20px !important;
    color: #5B5B5B !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    border: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-align: left !important;
    text-indent: 0 !important;
    list-style: none !important;
    list-style-position: outside !important;
    display: block !important;
    font-weight: 400 !important;
  }

  .bot-container #mic-permission-modal .mic-modal-content .custom-data-list li::before {
    content: counter(micstep) ". " !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #5B5B5B;
    font-size: inherit !important;
    line-height: inherit !important;
    text-indent: 0 !important;
    background: transparent !important;
  }

  .bot-container #mic-permission-modal .modal-btn-primary:hover {
    background-color: #005a9e !important;
    border-color: #005a9e !important;
    color: #ffffff !important;
  }

  .bot-container #mic-permission-modal .modal-btn-primary:active {
    background-color: #004578 !important;
    border-color: #004578 !important;
  }

  .bot-container #mic-permission-modal .mic-modal-content .custom-intro-title {
    color: #286CA1 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 0 15px !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    background: transparent !important;
    text-transform: none !important;
  }

  .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content {
    background-color: #ffffff !important;
    padding: 15px !important;
    width: 501.158px !important;
    max-width: calc(100% - 32px) !important;
  }

  .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-intro-title {
    color: #286CA1 !important;
    font-size: 20px !important;
    padding: 0 25px !important;
    text-align: left !important;
  }

  .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-modal-data {
    color: #5B5B5B;
    font-size: 14px !important;
    padding: 3px 25px !important;
    text-align: left;
  }

  .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-actions {
    margin-top: 0 !important;
    padding-bottom: 10px !important;
  }

  .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-data-list {
    padding: 0 25px !important;
    margin: 0 0 10px 0 !important;
  }

  .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-data-list li {
    font-size: 14px !important;
    padding: 0 0 0 22px !important;
  }

  /* Responsive override: when viewport shrinks to mobile size (e.g., user
     resizes from laptop to mobile in dev tools while modal is open), make
     sure the mic permission modal content adapts and stays centered inside
     the bot container instead of overflowing with the desktop fixed width. */
  @media (max-width: 680px) {
    .bot-container #mic-permission-modal .mic-modal-content {
      width: auto !important;
      max-width: calc(100% - 32px) !important;
      margin: 0 16px !important;
      box-sizing: border-box !important;
    }

    .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-intro-title {
      font-size: 18px !important;
      padding: 0 15px !important;
    }

    .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-modal-data {
      font-size: 14px !important;
      padding: 3px 15px !important;
    }

    .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-data-list {
      padding: 0 15px !important;
    }

    .bot-container.maxScreenDimension #mic-permission-modal .mic-modal-content .custom-data-list li {
      font-size: 14px !important;
      padding: 0 0 0 20px !important;
    }
  }

  /* Mic permission modal header: title left, close (X) icon right */
  .bot-container #mic-permission-modal .mic-modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 10px 15px 0 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .bot-container #mic-permission-modal .mic-modal-close-icon {
    background: transparent !important;
    border: none !important;
    color: #5B5B5B !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    margin: 0 0 0 8px !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    width: auto !important;
    height: auto !important;
  }

  .bot-container #mic-permission-modal .mic-modal-close-icon:hover {
    opacity: 0.7 !important;
    background: transparent !important;
  }

  /* Dark-mode styling for the mic permission modal - hardened to beat html body light-mode rules */
  .bot-container.dark-mode #mic-permission-modal {
    background: rgba(0, 0, 0, 0.5) !important;
  }

  .bot-container.dark-mode #mic-permission-modal .mic-modal-content {
    background-color: #1f1f1f !important;
    color: #ffffff !important;
    border: none !important;
  }

  /* Dark-mode text overrides so mic permission modal content (title, description, steps) is readable on the dark background */
  .bot-container.dark-mode #mic-permission-modal .mic-modal-content .custom-intro-title {
    color: #B2CEFF !important;
    background: transparent !important;
  }

  .bot-container.dark-mode #mic-permission-modal .mic-modal-content .custom-modal-data,
  .bot-container.dark-mode #mic-permission-modal .mic-modal-content .custom-modal-data p,
  .bot-container.dark-mode #mic-permission-modal .mic-modal-content .custom-data-list li {
    color: #ffffff !important;
    background: transparent !important;
  }

  .bot-container.dark-mode #mic-permission-modal .mic-modal-content .custom-data-list li::before {
    color: #ffffff !important;
    background: transparent !important;
  }

  /* Mic icon ON (listening) */
  .webchat__microphone-button__icon.mic-on {
    filter: invert(24%) sepia(90%) saturate(7483%) hue-rotate(351deg) brightness(105%) contrast(107%);
  }

  /* Mic icon OFF (idle / reset) */
  .webchat__microphone-button__icon.mic-off {
    filter: invert(43%) sepia(0%) saturate(0%) hue-rotate(192deg) brightness(94%) contrast(89%);
  }

  /* Mic button visual while listening (light mode default) */
  .webchat__microphone-button.mic-listening {
    background-color: rgb(243, 242, 241);
    box-shadow: 0 0 10px 6px rgb(243, 242, 241);
  }

  /* Mic button visual while listening (dark mode) */
  .webchat__microphone-button.mic-listening-dark {
    background-color: #404040;
    box-shadow: 0 0 10px 6px #404040;
  }

  .webchat__microphone-button.mic-reset {
    background-color: initial;
    box-shadow: none;
  }

  .bot-container.dark-mode #mic-permission-modal .mic-modal-close-icon {
    color: #ffffff !important;
    background: transparent !important;
  }

  .bot-container.dark-mode #mic-permission-modal .modal-btn-primary {
    background-color: rgb(63, 94, 148) !important;
    color: #ffffff !important;
    border: none !important;
  }

  /*  Move the existing closeCNAPButton into flow inside the toolbar  */
  .iframe-overlay .closeCNAPButton {
    position: static !important;
    top: unset !important;
    right: unset !important;
    z-index: unset !important;
    align-self: center;
    cursor: pointer;
  }

  .bot-container .webchat__render-markdown ul,
  .bot-container .ac-textBlock ul {
    list-style: disc outside;
  }

  /* Make sure each <li> can actually display its marker */
  .bot-container .webchat__render-markdown li,
  .bot-container .ac-textBlock li {
    display: list-item;
    list-style: inherit;
    margin-left: 0;
  }

  /*  Sidebar panel: fills the sidebar column  */
  .lsb-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: #fff;
  }

  .lsb-panel.is-open {
    display: flex;
  }

  /* Dark-mode panel */
  .iframe-overlay.dark-mode .lsb-panel {
    background: #1e2533;
  }

  /* Panel header */
  .lsb-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px 12px 14px;
    background: linear-gradient(90deg, #3A5B97 0%, #1A79A8 100%);
    flex-shrink: 0;
    min-height: 44px;
  }

  .lsb-panel-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }

  /* When collapsed the header is the only visible part — centre the arrow */
  .lsb-sidebar-col.lsb-collapsed .lsb-panel-header {
    justify-content: center;
    padding: 12px 0;
  }

  .lsb-panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    font-family: Arial, sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }

  .lsb-panel-count {
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    color: #fff;
    border-radius: 20px;
    padding: 2px 8px;
    font-family: Arial, sans-serif;
  }

  /* Scrollable list */
  .lsb-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 12px;
    scrollbar-width: thin;
    scrollbar-color: #c0c8d8 transparent;
  }

  .lsb-list::-webkit-scrollbar {
    width: 4px;
  }

  .lsb-list::-webkit-scrollbar-thumb {
    background: #c0c8d8;
    border-radius: 4px;
  }

  .iframe-overlay.dark-mode .lsb-list::-webkit-scrollbar-thumb {
    background: #3d4a60;
  }

  /* Link row */
  .lsb-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    width: 100%;
    text-align: left;
    box-sizing: border-box;
    transition: background 0.15s, border-left-color 0.15s;
    outline: none;
    border-bottom: 1px solid #edf0f5;
  }

  .lsb-item:hover {
    background: #f0f4fe;
    border-left-color: #1A79A8;
  }

  .lsb-item:focus {
    background: #e8f0fb;
    border-left-color: #3A5B97;
  }
  /* Active (currently loaded) state */
  .lsb-item.lsb-active {
    background: #e8f2fb;
    border-left-color: #1A79A8;
  }

  .lsb-item.lsb-active .lsb-item-label {
    color: #18729f; /* Updated for WCAG AA contrast ratio of 4.69:1 */
    font-weight: 600;
  }

  .lsb-item.lsb-active .lsb-dot {
    background: #18729f; /* Updated to match label color */
  }

  /* Dark mode rows */
  .iframe-overlay.dark-mode .lsb-item {
    border-bottom-color: #2a3348;
  }

  .iframe-overlay.dark-mode .lsb-item:hover {
    background: #253045;
    border-left-color: #4a90d9;
  }

  .iframe-overlay.dark-mode .lsb-item:focus {
    background: #2a3a55;
    border-left-color: #b2ceff;
  }

  .iframe-overlay.dark-mode .lsb-item.lsb-active {
    background: #1e3050;
    border-left-color: #4a90d9;
  }

  .iframe-overlay.dark-mode .lsb-item.lsb-active .lsb-item-label {
    color: #b2ceff;
  }

  .iframe-overlay.dark-mode .lsb-item.lsb-active .lsb-dot {
    background: #4a90d9;
  }

  /* Dot */
  .lsb-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3A5B97;
    margin-top: 5px;
    transition: background 0.15s;
  }

  .iframe-overlay.dark-mode .lsb-dot {
    background: #4a90d9;
  }

  /* Label */
  .lsb-item-label {
    font-size: 13px;
    line-height: 1.5;
    color: #3a4a6b;
    font-family: Arial, sans-serif;
    word-break: break-word;
    transition: color 0.15s;
  }

  .lsb-item:hover .lsb-item-label {
    color: #1A79A8;
  }

  .iframe-overlay.dark-mode .lsb-item-label {
    color: #c0cce0;
  }

  .iframe-overlay.dark-mode .lsb-item:hover .lsb-item-label {
    color: #b2ceff;
  }

  /* Empty state */
  .lsb-empty {
    padding: 28px 16px;
    text-align: center;
    color: #8a9ab5;
    font-size: 13px;
    font-family: Arial, sans-serif;
    line-height: 1.6;
  }

  .iframe-overlay.dark-mode .lsb-empty {
    color: #566880;
  }

  /* Responsive: on very narrow overlays shrink sidebar column */
  @media (max-width: 400px) {
    .lsb-sidebar-col {
      width: 160px;
      min-width: 160px;
      max-width: 160px;
    }
  }
  /* Toggle Button — lives in the panel header right side */
  .lsb-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    flex-shrink: 0;
    transition: background 0.18s;
  }

  .lsb-toggle:hover {
    background: rgba(255,255,255,0.18);
  }

  .iframe-overlay.dark-mode .lsb-toggle:hover {
    background: rgba(178,206,255,0.15);
  }

  /* Sidebar toggle icon */
  .lsb-icon {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
    user-select: none;
    transition: transform 0.22s ease;
  }

  .iframe-overlay.dark-mode .lsb-icon {
    /* dark icon is a separate image — no filter needed */
  }

  /* end of sidebar styles */

  .bot-container .webchat__render-markdown ul,
  .bot-container .webchat__render-markdown ol,
  .bot-container .ac-textBlock ul,
  .bot-container .ac-textBlock ol {
    padding-inline-start: 24px;
    padding-left: 24px;
    margin-top: 0.25em;
    margin-bottom: 0.5em;
    list-style-position: outside;
  }

  .bot-container .webchat__render-markdown ul,
  .bot-container .ac-textBlock ul {
    list-style: disc outside;
  }

  /* Make sure each <li> can actually display its marker */
  .bot-container .webchat__render-markdown li,
  .bot-container .ac-textBlock li {
    display: list-item;
    list-style: inherit;
    margin-left: 0;
  }

  /* Remove focus outline/shadow for mouse focus */
  #botContainer :focus:not(:focus-visible):not(.custom-dialog-container *),
  #webchat :focus:not(:focus-visible):not(.custom-dialog-container *),
  .wc-app :focus:not(:focus-visible):not(.custom-dialog-container *),
  #botContainer input:focus:not(.custom-dialog-container input),
  #botContainer textarea:focus:not(.custom-dialog-container textarea),
  #botContainer [contenteditable="true"]:focus,
  #botContainer .webchat__send-box-text-box__input:focus,
  .webchat__send-box-text-box__input:focus,
  .webchat__send-box-text-box textarea:focus,
  .webchat__send-box-text-box input:focus {
    outline: none !important;
    box-shadow: none !important;
  }

  .webchat__keyboard-help__close-button-border {
    border: none;
    background: none;
  }

  .bot-container :focus-visible,
  #botContainer :focus-visible,
  #webchat :focus-visible,
  .wc-app :focus-visible {
    outline: 2.5px dashed #808080 !important;
    box-shadow: white 0 0 0 2.5px; /* add a white border outside the dashed outline for better visibility on dark backgrounds */
  }

  .ac-pushButton:focus,
  .ac-pushButton:focus-visible {
    outline-offset: -2.5px !important;
    box-shadow: none !important;
  }
}