/* Variables for LISCAT navigation buttons colors */
:root {
  --selected-color: #d8e5f3;
  --linde-color: rgb(0, 85, 145);
}
	  .webchat-toggle-button {
        opacity: 0; 
        visibility: hidden;
      }
      /**
       * Button Styles 
       */
      .btn-chat--menu {
        position: relative !important;
        padding: 0 !important;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 0;
        -webkit-transform: translateY(0) !important;
            -ms-transform: translateY(0) !important;
                transform: translateY(0) !important;
      }
      .btn-chat--menu .btn-chat__svg-line,
      .btn-chat--menu .btn-chat__svg-outer {
        stroke: #19578E;
        stroke-width: 4;
      }
      .btn-chat {
        font-family: 'LindeDax', 'Calibri', sans-serif;
        font-size: 1rem;
        cursor: pointer;
        z-index: 9999;
        position: fixed;
        bottom: 1.2em;
        right: 2em;
        outline: none;
        background: transparent;  
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: none;
        text-align: center;
        color: white;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        width: 4.3em;
        height: 4.3em; 
        -webkit-transform: translateY(calc(100% + 2.1em)); 
            -ms-transform: translateY(calc(100% + 2.1em)); 
                transform: translateY(calc(100% + 2.1em));
        -webkit-transition: -webkit-transform .5s cubic-bezier(0.4, 0, 0.2, 1);
        transition: -webkit-transform .5s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform .5s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .btn-chat.is-init {
        -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
                transform: translateY(0);  
      }
      .btn-chat__bg {
        background-color: #006497;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: block;
        -webkit-box-shadow: 0.25em 0.25em 1em 0.1em rgba(0,0,0,0.1);
                box-shadow: 0.25em 0.25em 1em 0.1em rgba(0,0,0,0.1);
      }
      .btn-chat__bg::before,
      .btn-chat__bg::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        will-change: opacity;
        -webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);  
      }
      .btn-chat__bg,
      .btn-chat__bg::after,
      .btn-chat__bg::before {
        border-radius: 50%;    
      }
      .btn-chat__bg::after {
        opacity: 0;
        background: -webkit-gradient(linear, left top, left bottom, from(#007ab9), to(#00a0e1));
        background: -o-linear-gradient(top, #007ab9, #00a0e1);
        background: linear-gradient(to bottom, #007ab9, #00a0e1); 
      }
      .btn-chat__bg::before {
        background: -webkit-gradient(linear, left top, left bottom, from(#00a0e1), to(#007ab9));
        background: -o-linear-gradient(top, #00a0e1, #007ab9);
        background: linear-gradient(to bottom, #00a0e1, #007ab9); 
      }
      .btn-chat:focus .btn-chat__bg {
        background-color: #00487D;
      }
      .btn-chat:hover .btn-chat__bg::before,
      .btn-chat:focus .btn-chat__bg::before{
        opacity: 0;
      }
      .btn-chat:hover .btn-chat__bg::after,
      .btn-chat:focus .btn-chat__bg::after{
        opacity: 1;
      }
      .btn-chat.is-open .btn-chat__bg::before,
      .btn-chat.is-open .btn-chat__bg::after,
      .btn-chat:active .btn-chat__bg::after,
      .btn-chat:active .btn-chat__bg::before {
        opacity: 0;
      }
      .btn-chat__icon,
      .btn-chat__copy {
        position: relative;
        z-index: 2;
      }
      .btn-chat__svg {  
        width: 1.75em;
        height: 1.75em;
      }
      .btn-chat__svg-line,
      .btn-chat__svg-outer {
        stroke-width: 6;
        stroke: white;  
      }
      .btn-chat__svg-line {
        will-change: stroke-dasharray, stroke-dashoffset;
        -webkit-transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .btn-chat__svg-line--right {
        stroke-dasharray: 0 112.59208679199219;
        stroke-dashoffset: 0;  
      }
      .btn-chat.is-init .btn-chat__svg-line--right {
        stroke-dasharray: 12.7 112.59208679199219;
        stroke-dashoffset: 0;  
        -webkit-transition-delay: 0.5s;  
             -o-transition-delay: 0.5s;  
                transition-delay: 0.5s;  
      }
      .btn-chat.is-open .btn-chat__svg-line--right {
        stroke-dasharray: 24.5 112.59208679199219 !important;
        stroke-dashoffset: -80.2 !important;  
        -webkit-transition-delay: 0s;  
             -o-transition-delay: 0s;  
                transition-delay: 0s;
      }
      .btn-chat.is-close .btn-chat__svg-line--right {
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;  
      }
      .btn-chat:hover .btn-chat__svg-line--right,
      .btn-chat:focus .btn-chat__svg-line--right {
        stroke-dasharray: 20.7 112.59208679199219;
        stroke-dashoffset: 0;  
        -webkit-transition-delay: 0s;  
             -o-transition-delay: 0s;  
                transition-delay: 0s;  
      }
      .btn-chat__svg-line--left {
        stroke-dasharray: 0 112.59208679199219;
        stroke-dashoffset: 0;
      }
      .btn-chat.is-init .btn-chat__svg-line--left {
        stroke-dasharray: 12.592087 112.59208679199219;
        stroke-dashoffset: 0;
        -webkit-transition-delay: 0.5s;
            -o-transition-delay: 0.5s;
                transition-delay: 0.5s;
      }
      .btn-chat.is-open .btn-chat__svg-line--left {
        stroke-dasharray: 24.5 112.59208679199219 !important;
        stroke-dashoffset: -80.2 !important; 
        -webkit-transition-delay: 0s; 
             -o-transition-delay: 0s; 
                transition-delay: 0s;  
      }
      .btn-chat.is-close .btn-chat__svg-line--left {
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;   
      }
      .btn-chat:hover .btn-chat__svg-line--left,
      .btn-chat:focus .btn-chat__svg-line--left {
       stroke-dasharray: 19.592087 112.59208679199219;
        stroke-dashoffset: 0;
        -webkit-transition-delay: 0s;
             -o-transition-delay: 0s;
                transition-delay: 0s;
      }
      .btn-chat__svg-eye {
        opacity: 0;
        visibility: hidden;
      }
      .btn-chat__copy {
        display: inline-block;
        position: relative;
        margin-left: 0.5em;
      }
      .btn-chat__copy,
      .btn-chat__copy-open > span:last-of-type {
        display: none;
      }
      .btn-chat__copy-open,
      .btn-chat__copy-close {
        -webkit-transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 300ms cubic-bezier(0.4, 0, 0.2, 1);    
        will-change: opacity, transform, visibility;  
      }
      .btn-chat__copy-open {
        opacity: 1;
        display: inline-block;
        visibility: visible;
        -webkit-transform: translateY(0em);
            -ms-transform: translateY(0em);
                transform: translateY(0em);
      }
      .btn-chat__copy-close > span:last-of-type {
        display: none;
      }
      .btn-chat.is-open .btn-chat__copy-open {
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(-0.5em);
            -ms-transform: translateY(-0.5em);
                transform: translateY(-0.5em);
      }
      .btn-chat__copy-close {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        text-align:left;
        -webkit-transform: translateY(0.5em);
            -ms-transform: translateY(0.5em);
                transform: translateY(0.5em);
        opacity: 0;
        visibility: hidden;
      }
      .btn-chat.is-open .btn-chat__copy-close {
        -webkit-transform: translateY(0em);
            -ms-transform: translateY(0em);
                transform: translateY(0em);
        opacity: 1;
        visibility: visible;  
      }
      /**
       * BTN Media Queries
       */
      @media (min-width: 768px) {
        .btn-chat {
          width: auto;
          height: auto;
          bottom: 2.5em;          
          padding: 1em 1.65em 1em 1.25em;
        }
        .btn-chat__bg,
        .btn-chat__bg::after,
        .btn-chat__bg::before {
          border-radius: 2.3em;    
        }  
        .btn-chat__svg {
          width: 1.5em;
          height: 1.5em;    
        }
        .btn-chat__copy {
          display: inline;
        }  
      }
      @media (min-width: 992px) {
        .btn-chat {
          padding: .9em 1.7em;    
        }
        .btn-chat__copy-open > span:last-of-type {
          display: inline;
        }
        .btn-chat__copy-close {
          font-size: 0.97em;
        }
        .btn-chat__copy-close > span:last-of-type {
          display: inline;
        }
      }
      /* Existing code left unchanged */
      [data-cognigy-webchat-root] .webchat-quick-reply-template-root {
        flex: 1 1 100% !important;
		pointer-events: auto !important;
		opacity: 1 !important; /* in case it's faded */
      }
      /* Existing code for standard messages; adjusted to dark blue (Linde) with white text */
      [data-cognigy-webchat-root]
        [data-cognigy-webchat].webchat
        .regular-message.bot {
        background: rgb(0, 85, 145);
        box-shadow: none;
        color: white;
      }
      /* Existing code for quick reply messages; adjusted to dark blue (Linde) with white text. 
         Added .webchat class, which was missing and caused the quick reply messages to not accept
         the style configurations previously. */
      [data-cognigy-webchat-root]
        .webchat
        .webchat-quick-reply-template-header-message {
        background: rgb(0, 85, 145);
        box-shadow: none;
        color: white;
      }
      /* Set link color for links in regular messages to light grey */
      [data-cognigy-webchat-root]
        [data-cognigy-webchat].webchat
        .regular-message.bot
       a {
        color: lightgrey;
      }
      /* Set link color for links in quick reply messages to light grey */
      [data-cognigy-webchat-root]
        [data-cognigy-webchat].webchat
        .webchat-quick-reply-template-header-message
        a {
        color: lightgrey;
      }
      /* Set background color of header bar to dark blue (Linde) */
      [data-cognigy-webchat-root]
        [data-cognigy-webchat].webchat
        .webchat-header-bar {
        background: rgb(0, 85, 145);
      }
	  .webchat-quick-reply-template-reply {
		width: 100%;
	  }
	  .regular-message.user, .webchat-unread-message-preview {
		  background-color: var(--selected-color) !important;
	  }

/* Chat typography override START (rem-based) */
/* Scope to Cognigy webchat root. If your integration wraps it in #webchatWindow, that is supported too. */
#webchatWindow,
[data-cognigy-webchat-root] [data-cognigy-webchat].webchat {
  /* Make 1rem = 10px locally (assuming site root is 16px) */
  font-size: 62.5% !important;
  font-family: 'LindeDax','Calibri',sans-serif;
}

/* Body text and controls */
#webchatWindow button span,
#webchatWindow p,
#webchatWindow div,
#webchatWindow label,
[data-cognigy-webchat-root] .webchat-message-text,
[data-cognigy-webchat-root] .webchat-quick-reply-template-reply,
[data-cognigy-webchat-root] .webchat-buttons-template-button,
[data-cognigy-webchat-root] form.webchat-input-menu-form textarea {
  font-size: 1.4rem !important; /* 14px */
  font-family: inherit;
}

/* Headings */
#webchatWindow h2,
[data-cognigy-webchat-root] h2 {
  font-size: 2rem !important; /* 20px */
  font-family: inherit;
}

/* ===== Quick Reply & Button Template: improve multiline readability ===== */
[data-cognigy-webchat-root] .webchat-quick-reply-template-button,
[data-cognigy-webchat-root] .webchat-quick-reply-template-button * {
  line-height: 1.0 !important;
  white-space: nowrap !important; /* allow wrapping */
}

[data-cognigy-webchat-root] .webchat-buttons-template-button,
[data-cognigy-webchat-root] .webchat-buttons-template-button * {
  line-height: 1.0 !important;
  white-space: nowrap !important;
}

/* Force quick replies to be full width and use proper spacing */
[data-cognigy-webchat-root] .webchat-quick-reply-template-button,
[data-cognigy-webchat-root] .webchat-quick-reply-template-button * {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  white-space: normal !important;
  line-height: 1.6 !important;   /* <-- change this number to adjust spacing */
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* ====================================================================== */

/* Chat typography override END */