#chat-widget {
 position: fixed;
 bottom: 120px;
 right: 20px;
 width: 400px;
 height: 580px;
 background-color: white;
 border-radius: 12px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
 overflow: hidden;
 z-index: 9999;
 font-family: Arial, sans-serif;
 line-height: 1.5;
}
#chat-widget, ::before, ::after {
 box-sizing: unset !important;
}

.bot-icon {
 z-index: 2000;
 position: fixed;
 bottom: 60px;
 right: 24px;
 display: flex;
 align-items: center;
 gap: 6px;
}
.bot-icon .bot-help {
 padding: 10px 10px 10px 0;
 border-radius: 5px;
 height: fit-content;
 font-weight: 600;
 font-family: "Courier New", serif;
 display: flex;
}
.bot-icon .bot-help .close-container {
 margin-top: -18px;
 margin-left: -10px;
}
.bot-icon .bot-help .close-container .close {
 background-color: white;
 border: 2px solid gray;
 border-radius: 50%;
 font-size: larger;
 color: gray;
 font-weight: bold;
 justify-content: center;
 display: flex;
 width: 25px;
 height: 25px;
 cursor: pointer;
}

.bot-icon .avatar-image button {
 background: none;
 border: none;
 padding: 0 !important;
}

.bot-icon .avatar-image .avatar {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 margin-right: 10px;
 cursor: pointer;
}

.hidden {
 display: none;
}

#chat-widget .header {
 background-color: #f5f5f5;
 padding: 10px;
 display: flex;
 align-items: center;
 height: 10%;
}

#chat-widget .avatar-image .avatar {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 margin-right: 10px;
}

#chat-widget .title-custom-container {
 display: flex;
 flex-direction: column;
 flex-grow: 1;
}

#chat-widget .title-custom-container h1,
#chat-widget .title-custom-container h2 {
 margin-top: 0;
 margin-bottom: 0;
}

#chat-widget .title-custom-container .title-custom {
 font-size: 18px;
 font-weight: bold;
}

#chat-widget .title-custom-container .subtitle-custom {
 font-size: 14px;
 font-weight: bold;
}

#chat-widget .title {
 font-size: 18px;
 font-weight: bold;
 flex-grow: 1;
}

#chat-widget .chat-submenu {
 min-width: 150px;
 position: absolute;
 z-index: 100;
 top: 10%;
 right: 0;
 margin-right: 25px;
 padding: 12px;
 list-style-type: none;
 background-color: white;
 color: black;
 display: flex;
 flex-direction: column;
 box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)!important;
 border-radius: 3px;
 gap: 10px;
}

#chat-widget .chat-submenu button {
 cursor: pointer;
 background: none;
 border: none;
 padding: 0;
 font-size: 16px;
 text-align: left;
 color: black;
 font-family: Arial, sans-serif;
}

#chat-widget .chat-submenu button {
 gap: 5px;
}

#chat-widget .chat-submenu #fs-S {
 font-size: 12px;
}

#chat-widget .chat-submenu #fs-M {
 font-size: 16px;
}

#chat-widget .chat-submenu #fs-L {
 font-size: 20px;
}

#chat-widget .header-button {
 border: none;
 background-color: transparent;
 cursor: pointer;
 font-size: 16px;
 margin-right: 10px;
 padding: 0 !important;
}

#chat-widget .header-button:hover {
 text-decoration: underline;
}

#chat-widget .messages {
 height: 71%;
 overflow-y: scroll;
 padding: 10px;
}

#chat-widget .message-widget {
 display: flex;
 margin-bottom: 10px;
 font-size: 16px;
}

#chat-widget .user-message .message-text-widget {
 border-radius: 5px 5px 0 5px;
 margin-left: auto;
 max-width: 80%;
 padding: 10px;
 word-wrap: break-word;
}

#chat-widget .bot-message .message-text-widget {
 border-radius: 5px 5px 5px 0;
 max-width: 80%;
 padding: 10px;
 word-wrap: break-word;
}

#chat-widget .message-widget img {
 max-width: 100%;
 margin-top: 10px;
}

#chat-widget .buttons-message,
#chat-widget .buttons-multiselect-message {
 max-width: 80%;
 gap: 10px;
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
}

#chat-widget .buttons-message .message-button,
#chat-widget .buttons-multiselect-message .message-button{
 padding: 5px 10px;
 border: 2px solid red;
 border-radius: 6px;
 color: red;
 background-color: transparent;
 cursor: pointer;
}

#chat-widget .message-widget .video-wrapper {
 position: relative;

 padding-bottom: 56.25%;
}
#chat-widget .message-widget .video-wrapper iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#chat-widget .widget-input {
 display: flex;
 gap: 6px;
 align-items: center;
 padding: 10px;
 border: none;
 min-height: 9%;
}
#chat-widget .widget-input input:focus {
 outline: none;
}
#chat-widget input[type="text"] {
 flex-grow: 1;
 padding: 10px;
 border-radius: 5px;
 font-size: 16px;
 height: max-content;
 border: 1px solid gray;
}
#chat-widget input[type="text"]::placeholder {
 font-style: italic;
}
#chat-widget .widget-input button {
 background: none;
 border: none;
 padding: 0 !important;
}
#chat-widget .send-button {
 margin-right: 10px;
}

/* Theme dark styles */
#chat-widget.theme-dark .header,
#chat-widget.theme-dark .messages{
 background-color: black !important;
}

#chat-widget.theme-dark .header .title-custom,
#chat-widget.theme-dark .header .subtitle-custom{
 color: white !important;
}

#chat-widget.theme-dark .header path[fill]{
 fill: white !important;
}

#chat-widget.theme-dark .user-message .message-text-widget,
#chat-widget.theme-dark .bot-message .message-text-widget{
 background-color: white !important;
 color: black !important;
}

#chat-widget.theme-dark .buttons-message .message-button {
 border-color: white !important;
 color: white !important;
}

#chat-widget.theme-dark .widget-input {
 background-color: white !important;
}

#chat-widget.theme-dark input[type="text"] {
 background-color: white !important;
 color: black !important;
 border-color: black !important;
}

#chat-widget.theme-dark input[type="text"]::placeholder {
 color: black;
}

#chat-widget.theme-dark .send-button path[fill]{
 fill: black !important;
}
/* End darkmode styles */

#chat-widget.fullscreen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 99999;
 display: flex !important;
 flex-direction: column;
 justify-content: space-between;
}
#chat-widget.fullscreen .messages {
 height: inherit;
}
#chat-widget.fullscreen #chat-widget .header {
 background-color: #f5f5f5;
 color: black;
}
#chat-widget.fullscreen.theme-dark #chat-widget .header {
 background-color: #1a1a1a !important;
 color: white !important;
}
#chat-widget.fullscreen #chat-widget .user-message .message-text-widget {
 background-color: #d7e2f1;
 color: black;
}
#chat-widget.fullscreen.theme-dark #chat-widget .user-message .message-text-widget {
 background-color: #606060 !important;
 color: white !important;
}
#chat-widget.fullscreen #chat-widget .bot-message .message-text-widget {
 background-color: #e1ffe1;
 color: black;
}
#chat-widget.fullscreen.theme-dark #chat-widget .bot-message .message-text-widget {
 background-color: #303030 !important;
}
#chat-widget.fullscreen #chat-widget input[type="text"] {
 background-color: white !important;
 color: black !important;
}
#chat-widget.fullscreen.theme-dark #chat-widget input[type="text"] {
 background-color: #606060 !important;
 color: white !important;
}

@media only screen and (max-width: 600px) {
 #chat-widget {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
 #chat-widget #fullscreen {
  display: none;
 }
 #chat-widget #fontsize-selector {
  display: flex;
  flex-direction: row;
 }
 #chat-widget .messages {
  height: 73%;
 }
 #chat-widget .title-custom-container .title-custom {
  font-size: 24px;
 }

 #chat-widget .title-custom-container .subtitle-custom {
  font-size: 18px;
 }
 .bot-icon {
  align-items: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
 }
 .bot-icon .bot-help {
  padding-left: 5px;
 }
 .bot-icon .bot-help .close-container {
  margin-top: -26px;
  margin-left: -14px;
 }
}

.avatar {
  width: 70px;
  height: 70px;
  display: block;
  border: 2px solid #1c345d;
  overflow: hidden;
  border-radius: 50%; /* si quieres que sea circular */
}

.avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}