/* =========================================================
   CUBO CHATINSIEME CORE
   Version 0.5.1
   ========================================================= */

.cubo-chat-app {
    --cubo-bg: #f4f7fb;
    --cubo-primary: #2563eb;
    --cubo-primary-dark: #1d4ed8;
    --cubo-text: #172033;
    --cubo-muted: #64748b;
    --cubo-border: #e2e8f0;
    --cubo-white: #ffffff;

    width: 100% !important;
    max-width: 1180px !important;
    margin: 24px auto !important;
    color: var(--cubo-text) !important;
    box-sizing: border-box !important;
}

.cubo-chat-app *,
.cubo-chat-app *::before,
.cubo-chat-app *::after {
    box-sizing: border-box !important;
}


/* =========================================================
   HERO
   ========================================================= */

.cubo-chat-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;

    padding: 24px 28px !important;

    border-radius: 20px 20px 0 0 !important;

    background:
        linear-gradient(
            135deg,
            #172554 0%,
            #1e3a8a 48%,
            #2563eb 100%
        ) !important;

    color: #ffffff !important;
}

.cubo-chat-kicker {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    opacity: .75 !important;
    margin-bottom: 5px !important;
}

.cubo-chat-hero h2 {
    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 26px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
}

.cubo-chat-hero p {
    margin: 6px 0 0 !important;
    padding: 0 !important;

    color: rgba(255,255,255,.78) !important;

    font-size: 14px !important;
}

.cubo-chat-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 8px 12px !important;

    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.10) !important;

    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 600 !important;

    white-space: nowrap !important;
}

.cubo-chat-status-dot {
    width: 8px !important;
    height: 8px !important;

    border-radius: 50% !important;

    background: #22c55e !important;

    box-shadow: 0 0 0 4px rgba(34,197,94,.18) !important;
}


/* =========================================================
   ROOM NAVIGATION
   ========================================================= */

.cubo-chat-room-nav {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;

    padding: 12px !important;

    overflow-x: auto !important;

    background: #ffffff !important;
    border-left: 1px solid var(--cubo-border) !important;
    border-right: 1px solid var(--cubo-border) !important;
    border-bottom: 1px solid var(--cubo-border) !important;

    scrollbar-width: thin !important;
}

.cubo-chat-room-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    min-height: 42px !important;
    padding: 9px 14px !important;

    border-radius: 11px !important;

    color: #475569 !important;
    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    text-decoration: none !important;

    font-size: 14px !important;
    font-weight: 650 !important;

    white-space: nowrap !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.cubo-chat-room-link:hover {
    color: #1d4ed8 !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    transform: translateY(-1px) !important;
}

.cubo-chat-room-link.is-active {
    color: #ffffff !important;
    background: #2563eb !important;
    border-color: #2563eb !important;
    box-shadow: 0 4px 12px rgba(37,99,235,.20) !important;
}

.cubo-chat-room-icon {
    font-size: 17px !important;
    line-height: 1 !important;
}


/* =========================================================
   CURRENT ROOM LABEL
   ========================================================= */

.cubo-chat-room-label {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    padding: 12px 16px !important;

    background: #f8fafc !important;

    border-left: 1px solid var(--cubo-border) !important;
    border-right: 1px solid var(--cubo-border) !important;

    color: #64748b !important;

    font-size: 13px !important;
}

.cubo-chat-room-label strong {
    color: #172033 !important;
    font-weight: 750 !important;
}

.cubo-chat-room-label-icon {
    font-size: 16px !important;
}


/* =========================================================
   CHAT ENGINE CONTAINER
   ========================================================= */

.cubo-chat-engine {
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border: 1px solid var(--cubo-border) !important;
    border-top: 0 !important;

    border-radius: 0 0 20px 20px !important;

    box-shadow: 0 10px 30px rgba(15,23,42,.08) !important;
}


/* =========================================================
   BETTER MESSAGES — BASE
   ========================================================= */

.cubo-chat-engine .bm-card,
.cubo-chat-engine .bm-chat-wrap,
.cubo-chat-engine .bm-chat-content,
.cubo-chat-engine .bm-thread-col,
.cubo-chat-engine .bm-thread-col__main,
.cubo-chat-engine .bm-thread-col__split {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.cubo-chat-engine .bm-card {
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

.cubo-chat-engine .bm-chat-wrap {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: #ffffff !important;
}

.cubo-chat-engine .bm-chat-content {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
}


/* =========================================================
   THREAD HEADER
   ========================================================= */

.cubo-chat-engine .bm-thread-header {
    min-height: 64px !important;

    padding: 10px 16px !important;

    background: #ffffff !important;

    border-bottom: 1px solid #e5e7eb !important;

    box-shadow: none !important;
}

.cubo-chat-engine .bm-thread-header__title,
.cubo-chat-engine .bm-thread-header__name {
    color: #172033 !important;

    font-weight: 750 !important;
}

.cubo-chat-engine .bm-thread-header__subtitle {
    color: #64748b !important;
}


/* =========================================================
   MESSAGE LIST
   ========================================================= */

.cubo-chat-engine .bm-msg-list {
    width: 100% !important;
    max-width: 100% !important;

    background: #ffffff !important;
}

.cubo-chat-engine .bm-msg-list-wrap {
    width: 100% !important;
    max-width: 100% !important;

    background: #ffffff !important;
}

.cubo-chat-engine .bm-msg-stack {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;
}

.cubo-chat-engine .bm-msg-stack__bubbles {
    min-width: 0 !important;
    max-width: 100% !important;
}

.cubo-chat-engine .bm-msg-main {
    min-width: 0 !important;
    max-width: 100% !important;
}


/* =========================================================
   AVATAR
   ========================================================= */

.cubo-chat-engine .bm-msg-stack__avatar {
    flex: 0 0 auto !important;
}


/* =========================================================
   MESSAGE BODY
   ========================================================= */

.cubo-chat-engine .bm-msg-body {
    min-width: 0 !important;
    max-width: 100% !important;

    width: auto !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MESSAGE BUBBLE
   ========================================================= */

.cubo-chat-engine .bm-msg-bubble {
    display: inline-block !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: 92% !important;

    box-sizing: border-box !important;

    border-radius: 15px !important;

    box-shadow: none !important;
}

.cubo-chat-engine .bm-msg-bubble__text {
    display: block !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: none !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: normal !important;

    word-wrap: normal !important;

    text-align: left !important;

    line-height: 1.45 !important;
}

/* =========================================================
   MESSAGE TEXT — FIX 0.5.1
   Evita "Ci / ao" e simili.
   Il browser deve spezzare normalmente tra le parole.
   ========================================================= */

.cubo-chat-engine .bm-msg-bubble__text {
    display: block !important;

    width: auto !important;

    min-width: 0 !important;

    max-width: 100% !important;

    white-space: normal !important;

    word-break: normal !important;

    overflow-wrap: break-word !important;

    word-wrap: break-word !important;

    overflow: visible !important;

    text-align: left !important;

    line-height: 1.45 !important;
}


/* =========================================================
   MESSAGE DAY
   ========================================================= */

.cubo-chat-engine .bm-msg-day {
    color: #64748b !important;
    font-size: 12px !important;
}


/* =========================================================
   ROOM GATE
   ========================================================= */

.cubo-chat-engine .bm-room-gate {
    min-height: 220px !important;

    padding: 32px 24px !important;

    background: #ffffff !important;

    border: 0 !important;

    text-align: center !important;
}

.cubo-chat-engine .bm-room-gate__text {
    color: #475569 !important;
}

.cubo-chat-engine .bm-room-gate__btn {
    border-radius: 10px !important;
}

.cubo-chat-engine .bm-room-gate__btn--primary {
    background: #2563eb !important;
    border-color: #2563eb !important;
}


/* =========================================================
   COMPOSER
   ========================================================= */

.cubo-chat-engine .bm-composer {
    width: 100% !important;

    background: #ffffff !important;

    border-top: 1px solid #e5e7eb !important;

    padding: 10px !important;
}

.cubo-chat-engine .bm-composer textarea,
.cubo-chat-engine .bm-composer input {
    max-width: 100% !important;

    border-radius: 12px !important;

    border: 1px solid #dbe2ea !important;

    background: #f8fafc !important;

    color: #172033 !important;
}

.cubo-chat-engine .bm-composer textarea:focus,
.cubo-chat-engine .bm-composer input:focus {
    border-color: #93c5fd !important;

    background: #ffffff !important;

    outline: none !important;

    box-shadow: 0 0 0 3px rgba(37,99,235,.10) !important;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.cubo-chat-engine .bm-btn,
.cubo-chat-engine .bm-icon-btn {
    border-radius: 10px !important;
}


/* =========================================================
   ERROR
   ========================================================= */

.cubo-chat-error {
    padding: 30px !important;

    color: #b91c1c !important;

    background: #fef2f2 !important;

    border-radius: 12px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .cubo-chat-app {
        margin: 12px auto !important;
    }

    .cubo-chat-hero {
        padding: 20px !important;

        border-radius: 16px 16px 0 0 !important;
    }

    .cubo-chat-hero h2 {
        font-size: 22px !important;
    }

    .cubo-chat-status {
        font-size: 12px !important;
        padding: 7px 10px !important;
    }

    .cubo-chat-room-nav {
        padding: 9px !important;
    }

    .cubo-chat-room-link {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .cubo-chat-engine .bm-msg-bubble {
        max-width: 92% !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .cubo-chat-hero {
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cubo-chat-status {
        align-self: flex-start !important;
    }

    .cubo-chat-room-label {
        padding: 10px 12px !important;
    }

    .cubo-chat-engine .bm-msg-bubble {
        max-width: 92% !important;
    }
}

/* =========================================================
   CUBO 0.6.0 — ATTIVITA' CHAT
   ========================================================= */

.cubo-chat-activity-text {
    display: inline-block !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    white-space: nowrap !important;
}

.cubo-chat-status-dot {
    transition: opacity .2s ease !important;
}

/* =========================================================
   CUBO 0.7.0 — REAZIONI
   ========================================================= */

.bm-reactions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 5px !important;
}

.bm-reactions > * {
    transition:
        transform .15s ease,
        background-color .15s ease,
        box-shadow .15s ease !important;
}

.bm-reactions > *:hover {
    transform: translateY(-1px) scale(1.04) !important;
}

.bm-msg-bubble .bm-reactions {
    max-width: 100% !important;
}

@media (max-width: 600px) {

    .bm-reactions {
        gap: 4px !important;
        margin-top: 4px !important;
    }

    .bm-reactions > * {
        transform: none !important;
    }
}



/* CUBO 0.8.0 — REAZIONI */
.cubo-reaction-wrapper{position:relative!important;display:inline-flex!important;align-items:center!important;margin-left:6px!important;vertical-align:middle!important;z-index:50!important;}
.cubo-reaction-trigger{border:0!important;background:#fff!important;width:30px!important;height:30px!important;padding:0!important;border-radius:50%!important;cursor:pointer!important;font-size:17px!important;line-height:30px!important;box-shadow:0 2px 8px rgba(0,0,0,.12)!important;}
.cubo-reaction-panel{position:absolute!important;left:0!important;bottom:calc(100% + 7px)!important;display:none!important;align-items:center!important;gap:3px!important;padding:7px!important;background:#fff!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:14px!important;box-shadow:0 8px 25px rgba(0,0,0,.16)!important;white-space:nowrap!important;}
.cubo-reaction-panel.is-open{display:flex!important;}
.cubo-reaction-option{border:0!important;background:transparent!important;width:34px!important;height:34px!important;padding:0!important;border-radius:9px!important;cursor:pointer!important;font-size:21px!important;line-height:34px!important;}
.cubo-reaction-option:hover{background:#f0f2f5!important;transform:scale(1.15)!important;}
@media(max-width:600px){.cubo-reaction-option{width:31px!important;height:31px!important;line-height:31px!important;font-size:19px!important;}.cubo-reaction-trigger{width:28px!important;height:28px!important;line-height:28px!important;font-size:16px!important;}}