/* Progbiz Convo look. Applies only when index.html has set data-product="convo" on <html> (convo.* hosts).
   !important on the variables: the theme switcher writes its colours as inline styles on <html>. */

html[data-product="convo"] {
    --convo-green: #25D366;
    --convo-teal: #128C7E;
    --convo-dark: #075E54;
    --convo-tick: #34B7F1;
    --convo-chat-bg: #ECE5DD;
    --convo-bubble-in: #FFFFFF;
    --convo-bubble-out: #005C4B;
    --primary-rgb: 18, 140, 126 !important;
    --menu-bg: #075E54 !important;
    --menu-prime-color: rgba(255, 255, 255, 0.82) !important;
    --menu-border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-product="convo"][data-theme-mode="dark"] {
    --convo-chat-bg: #0B141A;
    --convo-bubble-in: #202C33;
    --menu-bg: #111B21 !important;
}

html[data-product="convo"] .app-sidebar,
html[data-product="convo"] .app-sidebar .main-sidebar-header {
    background: var(--menu-bg) !important;
    border-color: var(--menu-border-color) !important;
}

html[data-product="convo"] .app-sidebar .side-menu__item,
html[data-product="convo"] .app-sidebar .side-menu__icon,
html[data-product="convo"] .app-sidebar .side-menu__label,
html[data-product="convo"] .app-sidebar .side-menu__angle {
    color: var(--menu-prime-color) !important;
}

html[data-product="convo"] .app-sidebar .side-menu__item:hover,
html[data-product="convo"] .app-sidebar .side-menu__item.active,
html[data-product="convo"] .app-sidebar .slide.open > .side-menu__item {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-product="convo"] .app-sidebar .side-menu__item:hover,
html[data-product="convo"] .app-sidebar .side-menu__item:hover .side-menu__icon,
html[data-product="convo"] .app-sidebar .side-menu__item:hover .side-menu__label,
html[data-product="convo"] .app-sidebar .side-menu__item.active,
html[data-product="convo"] .app-sidebar .side-menu__item.active .side-menu__icon,
html[data-product="convo"] .app-sidebar .side-menu__item.active .side-menu__label {
    color: #FFFFFF !important;
}

html[data-product="convo"] .main-chart-wrapper .main-chat-area .chat-content {
    background-color: var(--convo-chat-bg);
}

html[data-product="convo"] .main-chart-wrapper .main-chat-area .chat-content .chat-item-start .main-chat-msg div {
    background-color: var(--convo-bubble-in);
}

html[data-product="convo"]:not([data-theme-mode="dark"]) .main-chart-wrapper .main-chat-area .chat-content .chat-item-start .main-chat-msg div {
    color: #111B21;
}

html[data-product="convo"] .main-chart-wrapper .main-chat-area .chat-content .chat-item-end .main-chat-msg div {
    background-color: var(--convo-bubble-out);
    color: #FFFFFF;
}

.convo-home-hero {
    background: linear-gradient(120deg, #075E54 0%, #128C7E 60%, #25D366 100%);
    color: #FFFFFF;
    border-radius: 1rem;
}

.convo-home-hero .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

.convo-home-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.convo-home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1.25rem rgba(7, 94, 84, 0.15);
}

.convo-home-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background-color: rgba(37, 211, 102, 0.15);
    color: #128C7E;
}