/***********************
Genesys Chat 
  Styles for Genesys Chat
  - This section contains styles specific to the Genesys Chat component.
  - It includes styles for buttons, title bars, forms, and chat bubbles.
  - The colors and fonts are customized to match the overall theme.
************************/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* bubble button */
.txumaster .genesys-chat-button button { 
  background-color: #003F6E !important; 
  height: auto;
  padding: 16px;
  border-radius: 50%;
  outline: 1px solid;
  outline: 5px auto #003F6E;
}

/* disabled - button */
.txumaster .genesys-chat-button button:disabled { 
  pointer-events: none; 
  background-color: rgb(56 53 67) !important; 
  opacity: .5;
}

/* title bar - icon */
.txumaster .cx-widget { 
  z-index: 9 !important;
  right: 25px;

}
.txumaster .cx-common-container .cx-titlebar .cx-icon .cx-svg-icon-tone1 ,
.txumaster .cx-widget.cx-theme-light .cx-svg-icon-tone1 { 
  color: #003F6E !important; 
  fill: #003F6E !important;
}

/* title bar - heading */
.txumaster .cx-docked-WebChat .cx-widget .cx-titlebar .cx-title {
  color: #3f475a !important;
  line-height: normal;
  font-family: "Myriad pro Black";
  margin-top: 2px;
}
/* form - label */
.txumaster .cx-docked-WebChat .cx-body .cx-form-wrapper .cx-form label.cx-control-label {
  color: #3f475a !important;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}
/* form - input */
.cx-form-wrapper .cx-form-inputs table,
.cx-form-wrapper .cx-form-inputs table tr,
.cx-form-wrapper .cx-form-inputs table tr th,
.cx-form-wrapper .cx-form-inputs table tr td {
    border: 0;
}

.txumaster .cx-widget input[type='email'], 
.txumaster .cx-widget input[type='tel'], 
.txumaster .cx-widget input[type='text'], 
.txumaster .cx-widget select, 
.txumaster .cx-widget textarea {
  font-family: Arial, Helvetica, sans-serif;
  border-color: #515A72;
}
/* border highlighted */
.txumaster .cx-widget .cx-btn:focus,
.txumaster .cx-widget .cx-button-group button:focus,
.txumaster .cx-widget .cx-form-control:not(.cx-error):focus,
.txumaster .cx-widget .cx-input:focus,
.txumaster .cx-widget .cx-textarea:focus {
  border-color: #0075DA !important;
}
.txumaster .cx-widget .cx-input-focus {
  box-shadow:  0 2px 2px #0075DA !important;
  border-color: #0075DA !important;
}
/* form error */
.cx-widget .cx-form-control.cx-error {
    border-color:#f53131
}
.cx-widget .cx-icon-alert-circle {
    color:#f53131
}
/* buttons */
.txumaster .cx-widget .cx-btn {
  letter-spacing: normal;
  font-weight: unset;
  font-size: 14px;
  background-image: none !important;
}
.txumaster .cx-widget .cx-widget.cx-webchat .cx-btn:focus {
  border-color: #003F6E !important;
  outline: none !important;
}
/* button - font family */
.txumaster .cx-widget .cx-btn { 
  font-family: 'Myriad pro regular'; 
}

/* button - start chat */
.txumaster .cx-widget .cx-btn-primary {
  background-color: #003F6E !important;
  border-color: #003F6E !important;
  color: #FFFFFF !important;
}
/* button - cancel */
.txumaster .cx-widget .cx-btn-default {
  background:none;
  border-color:#515A72 !important;
  color:#fdfdfd !important;
  background-color:#515A72 !important;
}
.txumaster .cx-webchat .cx-alert.cx-normal-alert .cx-button-single {
  margin-top: 16px;
}
/* bubble - customer */
.txumaster .cx-webchat .cx-message.cx-you .cx-bubble { 
  background-color: #eeeef1; 
  color: #000; 
  font-size: 14px; 
}

/* bubble - agent */
.txumaster .cx-webchat .cx-message.cx-them .cx-bubble {
  background-color: #00C2F5; 
  font-size: 14px;
}

/* alert msg */
.txumaster .cx-webchat .cx-alert > .cx-wrapper { padding-top: 24px; }

.txumaster .cx-webchat .cx-alert > .cx-wrapper .cx-button-group.cx-buttons-binary { margin-top: 16px; }

/* bubble */
.txumaster .cx-widget .cx-message-group { margin-bottom: 16px; }

/* bubble agent */
/* icon */
.txumaster .cx-webchat .cx-message.cx-them .cx-avatar-wrapper .cx-avatar.agent .cx-svg-icon-tone1 { fill: #003F6E; }

/* bubble */
.txumaster .cx-webchat .cx-message.cx-them .cx-bubble-arrow svg * { fill: #eeeef1; }
.txumaster .cx-webchat .cx-message.cx-them .cx-bubble { background-color: #eeeef1; }

/* bubble - customer */
.txumaster .cx-webchat .cx-message.cx-you .cx-bubble { background-color: #003F6E; }
.txumaster .cx-webchat .cx-message.cx-you .cx-bubble * { color: white; }
.txumaster .cx-webchat .cx-message.cx-you .cx-bubble-arrow svg * { fill: #003F6E; }

/* chat windows - text icons */
.txumaster .cx-widget .cx-emoji.cx-icon .cx-svg-icon-tone1,
.txumaster .cx-widget .cx-send.cx-icon .cx-svg-icon-tone1,
.txumaster .cx-widget .cx-cobrowseio.cx-icon .cx-svg-icon-tone1,
.txumaster .cx-webchat .cx-message.cx-agent-typing.cx-them .cx-svg-icon-tone1 {
  fill: #003F6E;
} 

/* chevron to open and close */
.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-minimize svg,
.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-maximize svg {
  visibility: hidden;
} 

.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-minimize {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z' fill='%238795a6'/%3E%3C/svg%3E") center no-repeat !important;
  background-size: 100% !important;
  width: 30px;
  height: 30px;
  top:0;
}
.cx-common-container.cx-close .cx-buttons-window-control button.cx-button-close {
  position: relative;
}

.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-maximize {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.29289 8.29289C4.68342 7.90237 5.31658 7.90237 5.70711 8.29289L12 14.5858L18.2929 8.29289C18.6834 7.90237 19.3166 7.90237 19.7071 8.29289C20.0976 8.68342 20.0976 9.31658 19.7071 9.70711L12.7071 16.7071C12.3166 17.0976 11.6834 17.0976 11.2929 16.7071L4.29289 9.70711C3.90237 9.31658 3.90237 8.68342 4.29289 8.29289Z' fill='%238795a6'/%3E%3C/svg%3E") center no-repeat !important;
  background-size: 100% !important;
  width: 30px;
  height: 30px;
  transform: rotate(180deg);
}

.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-minimize,
.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-maximize {
  transition: transform 0.6s ease-in-out; /* Duración y suavidad de la animación */
}

/* open (max) */
.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-maximize {
  transform: rotate(180deg);
}

/* avoid animation in focus */
.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-minimize:focus,
.cx-common-container.cx-minimize .cx-buttons-window-control button.cx-button-maximize:focus {
  border: transparent;
}

/* dots animation */
/* default value  (fallback) */
:root { --typing-dots: #003F6E; }

/* brand color */
body { --typing-dots: #003F6E; }

/* 'hide' original ... */
.cx-message.cx-them.cx-agent-typing .cx-bubble .cx-message-text {
  color: #eeeef1;
}

/* base */
.cx-message.cx-them.cx-agent-typing .cx-bubble .cx-message-text {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 24px;
}

/* dot */
.cx-message.cx-them.cx-agent-typing .cx-bubble .cx-message-text::before {
  content: "";
  position: relative; 
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--typing-dots);
  box-shadow:
    -10px 0 0 var(--typing-dots),
     10px 0 0 var(--typing-dots);
  transform: translateY(0);
  animation: gx-minimize-dots 1.2s infinite ease-in-out;
}

/* animación secuencial: centro → derecha → izquierda */
@keyframes gx-minimize-dots {
  0%, 80%, 100% {
    transform: translateY(0);
    box-shadow:
      -10px 0 0 var(--typing-dots),
       10px 0 0 var(--typing-dots);
    opacity: .85;
  }
  /* jump center dot */
  20% {
    transform: translateY(-4px);
    box-shadow:
      -10px 0 0 var(--typing-dots),
       10px 0 0 var(--typing-dots);
    opacity: 1;
  }
  /* jump right dot */
  40% {
    transform: translateY(0);
    box-shadow:
      -10px 0 0 var(--typing-dots),
       10px -4px 0 var(--typing-dots);
  }
  /* jump left dot */
  60% {
    transform: translateY(0);
    box-shadow:
      -10px -4px 0 var(--typing-dots),
       10px 0 0 var(--typing-dots);
  }
}
  
@media (prefers-reduced-motion: reduce) {
  .cx-message.cx-them.cx-agent-typing .cx-bubble .cx-message-text {
    animation: none;
    opacity: .7;
  }
}

.cx-webchat .cx-form-wrapper .cx-form-inputs table,td,th {
    border: 0;
}

/* fix for MWNE sites */
.cx-widget.cx-window-manager .cx-side-button-group {
  top: 80%;
}
.cx-widget.cx-window-manager .cx-side-button-group .cx-side-button {
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
}
.cx-widget.cx-window-manager .cx-side-button-group .cx-side-button svg {
  width: 24px;
  height: 24px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  color: white;
}

/* fix font size issue */
.cx-widget.cx-window-manager .cx-form-wrapper label,
.cx-widget.cx-window-manager .cx-form-wrapper .cx-form-control, 
.cx-widget.cx-window-manager .cx-form-wrapper output,
.cx-webchat.cx-widget .cx-message-group .cx-transcript,
.cx-webchat.cx-widget .cx-input-container .cx-message-input  {
  font-size: 14px;
}
.cx-widget.cx-window-manager .cx-form-wrapper .cx-buttons-binary .cx-btn-default,
.cx-widget.cx-window-manager .cx-buttons-binary .cx-btn-default {
  float: none;
}