/* --- 1. CONTENEDOR PRINCIPAL Y SOMBRAS --- */
#divWrap {
    border-style: none !important;
    box-shadow: 10px 5px 5px rgba(0,0,0,0.1) !important;
}

/* --- 2. CABECERA, BOTONES Y FOOTER (DEGRADADO UNIFICADO) --- */
body.withHeader #divHeader,
body.withCloseButtons #divButtons,
body.withFooter #divFooter {
    background: #373636 !important; /* Color sólido de respaldo */
    background: linear-gradient(to right, #373636, #eeee) !important;
    border: none !important;
}

/* Sombra específica para el Header (hacia abajo) */
body.withHeader #divHeader {
    box-shadow: 0px 1px 5px grey !important;
}

body.withFooter #divFooter {
    border-top: none !important;
}

/* --- 3. BARRA DE NAVEGACIÓN --- */
.navbar-default {
    border-color: transparent !important;
    background-image: none !important;
    background-color: transparent !important
}

/* --- 4. ZONA DE ESCRITURA --- */
#divWrap #divMainContainer #divYFlow #divYFlowChating .compose {
    border-top: 1px solid #ccc !important;
    box-shadow: 0px -1px 2px #ccc !important

}

#divWrap #divMainContainer #divYFlow #divYFlowChating .compose .pm {
    border-right: 1px solid #ccc !important
}
/* --- 5. Estilo para todos los globos de mensaje --- */
body.bubblesButtonsInsideThemeInverted  #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message{
    border-radius: 10px 10px 0px 10px !important; 
    box-shadow: 0px 1px 5px #ccc !important
}

/* --- 6. Estilo específico para mensajes del cliente --- */
body.bubblesButtonsInsideThemeInverted  #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.client {
    border-radius: 10px 10px 10px 0px !important
}

/* --- 6. Botones --- */
body.bubblesButtonsInsideThemeInverted  #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.yflow.yflow.attach.template.button .buttons {
    display: flex !important; 
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important
}

body.bubblesButtonsInsideThemeInverted  #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.yflow.yflow.attach.template.button .buttons .button {
    border-radius: 5px !important
}

body.bubblesButtonsInsideThemeInverted  #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.yflow.yflow.attach.template.button .buttons .button:hover {
    box-shadow: 0px 1px 5px #ccc !important
}

/* --- 7. Margen en el navbar para que quede centrado --- */
body.withLogo #divHeader div.navbar-header img.navbar-brand {
    margin: 5px !important
}

body.withHeader #divHeader div.navbar-header img {
    height: 40px !important
}

#divWrap .btn-primary {
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2) !important;
    background-color: #373636 !important;
    border: none !important
}

/* --- 8. Margen a la hora de envío del mensaje --- */
body.bubblesButtonsInsideThemeInverted #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.yflow .time,
body.bubblesButtonsInsideThemeInverted #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.agent .time,
body.bubblesButtonsInsideThemeInverted #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.supervisor .time {
    right: -35px !important;
}

body.bubblesButtonsInsideThemeInverted #divWrap #divMainContainer #divYFlow #divYFlowChating .messages > div div.message.client .time{
    left: -35px !important
}