/***********************
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 */
.genesys-chat-button button {
  position: fixed;
  bottom: 20px; /* distance from bottom */
  right: 20px; /* distance from right */
  background-color: #004861;
  color: white;
  border: none;
  border-radius: 50%;
  padding: 15px 20px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  z-index: 9999; /* always on top */
  transition: background-color 0.3s;
  width: 64px;
  height: 64px;
}
.genesys-chat-button button:hover {
  background-color: #297f9d !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 .cx-svg-icon-tone1,
.cx-widget.cx-theme-light .cx-svg-icon-tone1 { 
  color: #004861 !important; 
  fill: #004861 !important; 
}

/* title bar - heading */
.cx-docked-WebChat .cx-widget .cx-titlebar .cx-title {
  color: #414042 !important;
  line-height: 32px;
  font-family: Gotham Medium;
  font-size: 22px;
}
/* form - label */
.cx-docked-WebChat .cx-body .cx-form-wrapper .cx-form label.cx-control-label {
  color: #414042 !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;
}

.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;
  border-color: #8096A2;
}
/* 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: #297F9D !important;
}
.cx-widget .cx-input-focus {
  box-shadow:  0 2px 2px #297F9D !important;
  border-color: #297F9D !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: #2e69db;
  outline: none !important;
}
.cx-widget .cx-btn { 
  font-family: Gotham Medium; 
}

.cx-widget .cx-btn-primary {
  color:#d7df23 !important;
  border-color:#2e69db!important;
  background-color:#004861!important;
}
/* button - cancel */
.cx-widget .cx-btn-default {
  background-color: #eeeeee !important;
  border-color: #8096A2 !important;
  color: #414042 !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:  #e7ed67 !important; 
  color: #000;
  font-size: 14px;
}
.cx-webchat .cx-message.cx-you .cx-bubble-arrow svg * { fill:  #e7ed67 !important; }
.cx-webchat .cx-transcript .cx-message .cx-name { color: #000!important; }
.cx-webchat.cx-theme-light .cx-time { color: #000 !important;}


/* bubble - agent */
.cx-webchat .cx-message.cx-them .cx-bubble { 
  background-color:#d4f0fa !important; 
  font-size: 14px;
}
.cx-webchat .cx-message.cx-them .cx-bubble-arrow svg * { fill: #d4f0fa !important; }
.cx-webchat .cx-message.cx-them .cx-transcript .cx-message .cx-name { 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; }


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

/* bubble */
.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: #004861;
} 

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

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

/* bubble - customer */
.cx-webchat .cx-message.cx-you .cx-bubble { background-color: #004861; }
.cx-webchat .cx-message.cx-you .cx-bubble * { color: #000; }
.cx-webchat .cx-message.cx-you .cx-bubble-arrow svg * { fill: #004861; }


/* chat windows - text icons */
.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: #004861;
}

/* 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;
  top: -4px;
}

.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: #004861; }

/* '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;   /* ajustá si tu botón es más grande */
  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;
}

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

/* 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 {
  font-size: 14px;
}

/* 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-webchat .cx-transcript .cx-message.cx-system .cx-message-text, .cx-webchat .cx-transcript .cx-message.cx-system .cx-time {
  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;
}