/* Instrucciones */
/* 
    * Desabilitar el diseño desde el panel administrador de Oct8ne tanto de mobil como PC
    * Agregar la archivo oct8ne.css en la etiqueta <head> el sitio web junto al script de Oct8ne
    * Ajustar variables de colores e imagenes del css en :root
        
        *Sugerencias:
        *El icono del boton del chat debe tener las medidas de 62x62
        *El icono del buton del chat debe ser .png o .webp

    !Nota: Si tiene bloqueador de anuncios, usar en una pagina de privada
 */

:root{
    --color-primary:rgb(12, 134, 67);
    --color-secondary:#444;
    --color-shadow: #333;
    --color-shadow-message:rgba(50, 50, 50, 0.2);
    --background-color-primary:rgb(12, 134, 67);
    --background-color-secondary:#fff;
    --position-bottom:20px;
    --position-right:75px;
    --position-bottom-mobil:10px;
    --position-right-mobil:10px;
    --position-bottom-message:85px;
    --position-right-message:75px;
    --position-bottom-message-mobil:95px;
    --position-right-message-mobil:15px;
    --position-x-icon:auto;
    --position-y-icon:9%;
    --size-btn: 60px;
    --size-icon-btn:48px;
    --size-border-btn:1px;
    --icon-btn:url('/view/images/chat_icon_oc8ne.png'); /* Cambia la ruta dependiendo el proyecto */
    --font-size-message:13px;
    --shadow-btn:2px 2px 10px var(--color-shadow);
    --shadow-message:var(--color-shadow-message) 0px 2px 8px 0px;
}


/* boton de chat */
#livechat-wrapper {
    box-shadow: var(--shadow-btn) !important;
    text-align: center !important;
    border-radius: 100px !important;
    line-height: 61px !important;
    height: var(--size-btn) !important;
    width: var(--size-btn) !important;
    position: fixed !important;
    cursor: pointer !important;
    z-index: 2147483646 !important;
    background-color: var(--background-color-primary) !important;
    border: var(--size-border-btn) solid var(--background-color-secondary);
    color: var(--color-primary) !important;
    bottom: var(--position-bottom) !important;
    right: var(--position-right) !important;
}

#livechat-wrapper .chat-oct8ne-ball-icon {
    margin: 0 !important;
    font-size: 31px !important;
    color: var(--color-primary) !important;
}

#livechat-wrapper .chat-oct8ne-ball-icon:before {
    content: "" !important;
    display: block;
    margin: var(--position-y-icon) var(--position-x-icon) !important;
    background-image: var(--icon-btn) !important;
    height: var(--size-icon-btn);
    width: var(--size-icon-btn);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 50%;
}

/* Mensaje del boton */
#oct8ne-alerts-callouts-wrapper{
    position: fixed;
    z-index: 99999;
    max-width: 243px;
    cursor: pointer;
    padding-top: 50px;
    max-height: 80%;
    right: var(--position-right-message) !important;
    bottom: var(--position-bottom-message) !important;
}

#oct8ne-alerts-callouts-wrapper #oct8ne-callouts-close {
    background-color: var(--background-color-secondary) !important;
    position: absolute;
    display: none;
    margin: -28px 3px;
    height: 30px;
    border-radius: 30px;
    cursor: pointer;
    right: 0;
}

#oct8ne-alerts-callouts-wrapper #oct8ne-callouts-close svg {
    fill: var(--background-color-primary) !important;
}

#oct8ne-alerts-callouts-wrapper .oct8ne-alerts-callout-message{
    margin: 4px -7px 4px 0;
    padding: 0 5px;
    overflow: auto;
}

#oct8ne-alerts-callouts-wrapper .oct8ne-alerts-callout-message span{
    margin: 6px;
    box-shadow: var(--shadow-message) !important;
    padding: 12px;
    line-height: 19px;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    float: right;
    background-color: var(--background-color-secondary) !important;
    color: var(--color-secondary) !important;
    word-break: break-word;
}

#oct8ne-alerts-callouts-wrapper .oct8ne-alerts-callout-message .oct8ne-alert-animated {
    margin: 6px;
    box-shadow: var(--shadow-message) !important;
    padding: 12px;
    line-height: 19px;
    border-radius: 5px;
    font-size: var(--font-size-message)!important;
    cursor: pointer;
    float: right;
    background-color: var(--background-color-secondary) !important;
    color: var(--color-secondary) !important;
    word-break: break-word;
}


/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) { 
    #livechat-wrapper {
        bottom: var(--position-bottom-mobil) !important;
        right: var(--position-right-mobil) !important;
    }

    #oct8ne-alerts-callouts-wrapper{
        right: var(--position-right-message-mobil) !important;
        bottom: var(--position-bottom-message-mobil) !important;
    }
}