/***********************
Genesys Chat - 12-02-25
  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/css?family=Heebo:400,400i,500,600,700,700i,800,900&display=swap");

/* bubble button */
.genesys-chat-button button { 
  background-color: #44403E !important;
  height: auto;
  padding: 16px;
  border-radius: 50%;
}
.genesys-chat-button button:hover {
  background-color: #1077a3 !important;
}

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

/* title bar - icon */
.cx-common-container .cx-titlebar .cx-icon {
  margin-top: 0;
}
.cx-common-container .cx-titlebar .cx-icon .cx-svg-icon-tone1,
.cx-widget.cx-theme-light .cx-svg-icon-tone1 { 
  color: #44403E !important; 
  fill: #44403E !important; 
}

/* title bar - heading */
.cx-docked-WebChat .cx-widget .cx-titlebar .cx-title {
  color: #44403e !important;
  line-height: 1;
  font-family: "Heebo";
  font-size: 26px;
}
/* form - label */
.cx-docked-WebChat .cx-body .cx-form-wrapper .cx-form label.cx-control-label {
  color: #44403e !important;
  font-family: "Heebo";
  font-weight: normal;
}
/* form - input */
.cx-widget input[type='email'], 
.cx-widget input[type='tel'], 
.cx-widget input[type='text'], 
.cx-widget select, 
.cx-widget textarea {
  font-family: Arial, Helvetica, sans-serif;
  background-color:#fdfdfd;
  color:#000;
  border-color:#44403E;
}
/* border highlighted */
.cx-widget .cx-btn:focus,
.cx-widget .cx-button-group button:focus,
.cx-widget .cx-form-control:not(.cx-error):focus,
.cx-widget .cx-input:focus,
.cx-widget .cx-textarea:focus {
  border-color: #1077A3 !important;
}
/* chat input highlight */
.cx-widget .cx-input-focus {
  box-shadow:  0 2px 2px #1077A3 !important;
  border-color: #1077A3 !important;
}
/* form error */
.cx-widget .cx-form-control.cx-error {
    border-color:#f53131
}
.cx-widget .cx-icon-alert-circle {
    color:#f53131
}
/* buttons */
.cx-widget .cx-btn {
  letter-spacing: normal;
  font-weight: unset;
  font-size: 14px;
  background-image: none !important;
}
.cx-widget .cx-widget.cx-webchat .cx-btn:focus {
  border-color: #1077A3 !important;
  outline: none !important;
}
/* button - font family */
.cx-widget .cx-btn { 
  font-family: "Heebo";
  margin: 4px;
}

/* button - start chat */
.cx-webchat.cx-widget .cx-btn-primary {
  color:#fdfdfd !important;
  border-color:#1077A3 !important;
  background:#1077A3 !important;
}
/* button - cancel */
.cx-webchat.cx-widget .cx-btn-default {
  background:none;
  border-color:#545c65 !important;
  color:#fdfdfd !important;
  background-color:#545c65 !important;
}
.cx-webchat .cx-alert.cx-normal-alert .cx-button-single {
  margin-top: 16px;
}
/* bubble - customer */
.cx-webchat .cx-message.cx-you .cx-bubble { 
  background-color: #44403E !important; 
  color: white; 
  font-size: 14px; 
}
.cx-webchat .cx-message.cx-you .cx-bubble-arrow svg * { fill: #44403E !important; }
.cx-webchat .cx-transcript .cx-message.cx-you .cx-name { color: white!important; }
.cx-webchat.cx-theme-light .cx-message.cx-you .cx-time { color: white !important;}

.cx-webchat .cx-transcript .cx-message.cx-system .cx-message-text, 
.cx-webchat .cx-transcript .cx-message.cx-system .cx-time {
  font-size: 14px;
}

/* bubble - agent */
.cx-webchat .cx-message.cx-them .cx-bubble { 
  background-color:#FFD24F !important; 
  font-size: 14px;
  color: #000;
}
.cx-webchat .cx-message.cx-them .cx-bubble-arrow svg * { fill: #FFD24F !important; }
.cx-webchat .cx-message.cx-them .cx-transcript .cx-message .cx-name { color: #000 !important; }
.cx-webchat.cx-theme-light .cx-message.cx-them .cx-time { color: #000 !important;}
.cx-webchat .cx-message.cx-them .cx-transcript .cx-message-group >.cx-message.cx-participant:last-child .cx-time { color: #000 !important; }
.cx-webchat.cx-theme-light.cx-them .cx-time { color: #000 !important;}

/* alert msg */
.cx-webchat .cx-alert > .cx-wrapper { padding-top: 24px; }
.cx-webchat .cx-alert > .cx-wrapper .cx-button-group.cx-buttons-binary  { margin-top: 16px; }

.cx-widget .cx-message-group { margin-bottom: 16px; }

.cx-widget .cx-emoji.cx-icon .cx-svg-icon-tone1,
.cx-widget .cx-send.cx-icon .cx-svg-icon-tone1,
.cx-widget .cx-cobrowseio.cx-icon .cx-svg-icon-tone1,
.cx-webchat .cx-message.cx-agent-typing.cx-them .cx-svg-icon-tone1 {
  fill: #44403E;
} 
.cx-webchat .cx-message.cx-them .cx-avatar-wrapper .cx-avatar.agent .cx-svg-icon-tone1 { fill: #44403E; }


/* Powered by Genesys */
.cx-widget .cx-branding,
.cx-widget .cx-footer{
    color:#A9ADB2!important;
}
.cx-widget .cx-branding *,
.cx-widget .cx-footer * {
    fill:#A9ADB2!important;
}

/* 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;
}

.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;
}

:root { --typing-dots: #44403E; }
/* '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;         /* relativo al propio inline-block */
  display: inline-block;
  width: 3px;                 /* tamaño del dot */
  height: 3px;
  border-radius: 50%;
  background: var(--typing-dots);

  /* clona 2 dots (izq/der) usando box-shadow */
  box-shadow:
    -10px 0 0 var(--typing-dots),
     10px 0 0 var(--typing-dots);

  /* alineación visual dentro del botón */
  transform: translateY(0);
  animation: gx-minimize-dots 1.2s infinite ease-in-out;
}

/* animation: center → right → left */
@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;
}