:root {
    --erp-float-bottom: 1.25rem;
}

.erp-floating-dock {
    position: fixed;
    right: 1.25rem;
    bottom: var(--erp-float-bottom);
    z-index: 72;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .65rem;
}

.erp-floating-chat-button {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, .78);
    border-radius: 1.1rem;
    color: #242128;
    background: #ffe700;
    box-shadow: 0 16px 34px rgba(36, 33, 40, .2);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.erp-floating-chat-button:hover,
.erp-floating-chat-button:focus-visible {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 20px 38px rgba(36, 33, 40, .28);
    filter: saturate(1.08);
}

.erp-floating-chat-button:active {
    transform: scale(.96);
}

.erp-floating-chat-button i {
    font-size: 1.35rem;
}

.erp-floating-chat-badge {
    position: absolute;
    top: -.35rem;
    right: -.35rem;
    min-width: 1.2rem;
    height: 1.2rem;
    display: grid;
    place-items: center;
    padding: 0 .25rem;
    border: 2px solid #242128;
    border-radius: 99px;
    color: #fff;
    background: #ef4444;
    font-size: .58rem;
    font-weight: 900;
    line-height: 1;
}

.erp-messaging-widget {
    position: fixed;
    right: 1.25rem;
    bottom: calc(var(--erp-float-bottom) + 4.15rem);
    z-index: 71;
    width: min(820px, calc(100vw - 2rem));
    height: min(680px, calc(100dvh - 8rem));
    min-height: 460px;
    overflow: hidden;
    border: 1px solid rgba(36, 33, 40, .12);
    border-radius: 1.35rem;
    background: #fff;
    box-shadow: 0 28px 90px rgba(36, 33, 40, .28);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(.98);
    transform-origin: bottom right;
    transition: opacity .2s ease, transform .2s ease;
}

.erp-messaging-widget.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.dark .erp-messaging-widget {
    border-color: rgba(255, 255, 255, .1);
    background: #2f2b34;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .5);
}

.erp-widget-shell {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.erp-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex: 0 0 auto;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(36, 33, 40, .09);
    background: linear-gradient(135deg, rgba(255, 231, 0, .16), transparent 65%);
}

.dark .erp-widget-header {
    border-color: rgba(255, 255, 255, .09);
    background: linear-gradient(135deg, rgba(255, 231, 0, .12), transparent 65%);
}

.erp-widget-brand,
.erp-widget-header-actions,
.erp-widget-thread-identity {
    display: flex;
    align-items: center;
}

.erp-widget-brand,
.erp-widget-thread-identity {
    min-width: 0;
    gap: .65rem;
}

.erp-widget-brand-mark,
.erp-widget-thread-avatar {
    width: 2.45rem;
    height: 2.45rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: .8rem;
    color: #242128;
    background: #ffe700;
}

.erp-widget-brand-copy {
    min-width: 0;
}

.erp-widget-brand-copy strong,
.erp-widget-brand-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-widget-brand-copy strong {
    color: #242128;
    font-family: Outfit, sans-serif;
    font-size: .98rem;
    font-weight: 800;
}

.dark .erp-widget-brand-copy strong {
    color: #fff;
}

.erp-widget-brand-copy small {
    margin-top: .12rem;
    color: #6f7480;
    font-size: .62rem;
}

.dark .erp-widget-brand-copy small {
    color: #b2b5bc;
}

.erp-widget-header-actions {
    gap: .35rem;
}

.erp-widget-header-actions button {
    width: 2.15rem;
    height: 2.15rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(36, 33, 40, .1);
    border-radius: .7rem;
    color: #6f7480;
    background: rgba(255, 255, 255, .72);
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

.dark .erp-widget-header-actions button {
    border-color: rgba(255, 255, 255, .1);
    color: #b2b5bc;
    background: rgba(255, 255, 255, .04);
}

.erp-widget-header-actions button:hover,
.erp-widget-header-actions button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255, 231, 0, .55);
    color: #242128;
    background: rgba(255, 231, 0, .16);
}

.dark .erp-widget-header-actions button:hover,
.dark .erp-widget-header-actions button:focus-visible {
    color: #ffe700;
}

.erp-widget-layout {
    min-height: 0;
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
}

.erp-widget-inbox,
.erp-widget-thread {
    min-width: 0;
    min-height: 0;
}

.erp-widget-inbox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(36, 33, 40, .09);
    background: #f5f7fb;
}

.dark .erp-widget-inbox {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(0, 0, 0, .12);
}

.erp-widget-inbox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex: 0 0 auto;
    padding: .75rem .8rem .55rem;
}

.erp-widget-inbox-head strong {
    display: block;
    color: #242128;
    font-size: .75rem;
    font-weight: 800;
}

.dark .erp-widget-inbox-head strong {
    color: #fff;
}

.erp-widget-inbox-head span {
    color: #6f7480;
    font-size: .6rem;
}

.dark .erp-widget-inbox-head span {
    color: #b2b5bc;
}

.erp-widget-search {
    flex: 0 0 auto;
    padding: 0 .7rem .65rem;
}

.erp-widget-search input {
    width: 100%;
    min-width: 0;
    padding: .55rem .65rem .55rem 2rem;
    border: 1px solid rgba(36, 33, 40, .1);
    border-radius: .7rem;
    outline: none;
    color: #242128;
    background: #fff;
    font-size: .7rem;
}

.dark .erp-widget-search input {
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
    background: rgba(255, 255, 255, .05);
}

.erp-widget-conversation-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 .55rem .7rem;
}

.erp-widget-conversation {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .55rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    color: #242128;
    background: transparent;
    text-align: left;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.dark .erp-widget-conversation {
    color: #f8f9fc;
}

.erp-widget-conversation:hover,
.erp-widget-conversation:focus-visible,
.erp-widget-conversation.is-active {
    border-color: rgba(255, 231, 0, .35);
    background: rgba(255, 231, 0, .13);
}

.erp-widget-conversation:hover {
    transform: translateX(1px);
}

.erp-widget-conversation-avatar {
    width: 2.15rem;
    height: 2.15rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: .7rem;
    color: #242128;
    background: rgba(255, 231, 0, .72);
    font-size: .75rem;
}

.erp-widget-conversation-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.erp-widget-conversation-copy strong,
.erp-widget-conversation-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-widget-conversation-copy strong {
    font-size: .7rem;
    font-weight: 800;
}

.erp-widget-conversation-copy small {
    margin-top: .18rem;
    color: #6f7480;
    font-size: .6rem;
}

.dark .erp-widget-conversation-copy small {
    color: #b2b5bc;
}

.erp-widget-conversation-time {
    align-self: flex-start;
    color: #8f939d;
    font-size: .55rem;
    white-space: nowrap;
}

.erp-widget-unread {
    min-width: 1rem;
    height: 1rem;
    display: inline-grid;
    place-items: center;
    margin-left: .25rem;
    padding: 0 .2rem;
    border-radius: 99px;
    color: #242128;
    background: #ffe700;
    font-size: .52rem;
    font-weight: 900;
}

.erp-widget-thread {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.dark .erp-widget-thread {
    background: #2f2b34;
}

.erp-widget-thread-empty,
.erp-widget-compose {
    min-height: 0;
    flex: 1 1 auto;
}

.erp-widget-thread-empty {
    display: grid;
    place-items: center;
    padding: 1.5rem;
    color: #6f7480;
    text-align: center;
}

.erp-widget-thread-empty-mark {
    width: 3.7rem;
    height: 3.7rem;
    display: grid;
    place-items: center;
    margin: 0 auto .7rem;
    border-radius: 1.1rem;
    color: #242128;
    background: rgba(255, 231, 0, .75);
}

.erp-widget-thread-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex: 0 0 auto;
    min-height: 3.7rem;
    padding: .6rem .8rem;
    border-bottom: 1px solid rgba(36, 33, 40, .09);
}

.dark .erp-widget-thread-head {
    border-color: rgba(255, 255, 255, .09);
}

.erp-widget-thread-copy {
    min-width: 0;
}

.erp-widget-thread-copy strong,
.erp-widget-thread-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.erp-widget-thread-copy strong {
    color: #242128;
    font-size: .78rem;
    font-weight: 800;
}

.dark .erp-widget-thread-copy strong {
    color: #fff;
}

.erp-widget-thread-copy small {
    margin-top: .15rem;
    color: #6f7480;
    font-size: .59rem;
}

.erp-widget-thread-copy .cumbre-presence-status {
    color: #159b63;
    font-weight: 800;
}

.dark .erp-widget-thread-copy small {
    color: #b2b5bc;
}

.dark .erp-widget-thread-copy .cumbre-presence-status {
    color: #67e8a5;
}

.erp-widget-thread-copy .cumbre-typing-status {
    min-height: .62rem;
    color: #d7a800;
    font-size: .58rem;
    font-weight: 800;
    opacity: 0;
    transition: opacity .16s ease;
}

.erp-widget-thread-copy .cumbre-typing-status.is-visible {
    opacity: 1;
}

.dark .erp-widget-thread-copy .cumbre-typing-status {
    color: #ffe700;
}

.erp-widget-thread-actions {
    display: flex;
    align-items: center;
    gap: .28rem;
}

.erp-widget-thread-actions button,
.erp-widget-back {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(36, 33, 40, .1);
    border-radius: .65rem;
    color: #6f7480;
    background: transparent;
}

.dark .erp-widget-thread-actions button,
.dark .erp-widget-back {
    border-color: rgba(255, 255, 255, .1);
    color: #b2b5bc;
}

.erp-widget-thread-actions button:hover,
.erp-widget-thread-actions button:focus-visible,
.erp-widget-back:hover,
.erp-widget-back:focus-visible {
    border-color: rgba(255, 231, 0, .55);
    color: #242128;
    background: rgba(255, 231, 0, .12);
}

.dark .erp-widget-thread-actions button:hover,
.dark .erp-widget-thread-actions button:focus-visible,
.dark .erp-widget-back:hover,
.dark .erp-widget-back:focus-visible {
    color: #ffe700;
}

.erp-widget-back {
    display: none;
}

.erp-widget-messages {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .9rem;
    background-color: #f8f9fc;
    background-image: radial-gradient(rgba(36, 33, 40, .055) .65px, transparent .65px);
    background-size: 17px 17px;
}

.dark .erp-widget-messages {
    background-color: #242128;
    background-image: radial-gradient(rgba(255, 255, 255, .035) .65px, transparent .65px);
}

.erp-widget-message-row {
    display: flex;
    margin-bottom: .45rem;
}

.erp-widget-message-row.mine {
    justify-content: flex-end;
}

.erp-widget-message-bubble {
    max-width: 84%;
    padding: .55rem .65rem .42rem;
    border: 1px solid rgba(36, 33, 40, .1);
    border-radius: .9rem .9rem .9rem .25rem;
    background: rgba(255, 255, 255, .92);
}

.erp-widget-message-row.mine .erp-widget-message-bubble {
    border-color: rgba(255, 231, 0, .35);
    border-radius: .9rem .9rem .25rem .9rem;
    background: rgba(255, 231, 0, .2);
}

.dark .erp-widget-message-bubble {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .07);
}

.erp-widget-message-bubble p {
    margin: 0;
    color: #242128;
    font-size: .72rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.dark .erp-widget-message-bubble p {
    color: #f8f9fc;
}

.erp-widget-message-action-target { cursor: pointer; }
.erp-widget-message-action-target:active { transform: scale(.99); }
.erp-widget-message-topline { min-height: .1rem; display: flex; align-items: center; gap: .4rem; }
.erp-widget-message-pinned, .erp-widget-message-edited { color: #a48700; font-size: .5rem; font-weight: 900; }
.erp-widget-message-edited { margin-left: auto; color: #8f939d; }
.erp-widget-message-reactions { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .18rem; }
.erp-widget-message-reaction { display: inline-flex; align-items: center; gap: .15rem; padding: .12rem .3rem; border: 1px solid rgba(36, 33, 40, .12); border-radius: 999px; color: #777b85; background: rgba(255, 255, 255, .7); font-size: .56rem; }
.erp-widget-message-reaction.is-mine { border-color: rgba(255, 231, 0, .55); background: rgba(255, 231, 0, .18); }
.dark .erp-widget-message-reaction { border-color: rgba(255, 255, 255, .12); color: #c7cad2; background: rgba(255, 255, 255, .06); }
.erp-widget-message-action-backdrop { position: fixed; z-index: 180; inset: 0; display: grid; place-items: end center; padding: 1rem; background: rgba(17, 15, 20, .62); backdrop-filter: blur(8px); }
.erp-widget-message-action-sheet { position: relative; width: min(100%, 29rem); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.1rem; border: 1px solid rgba(36, 33, 40, .12); border-radius: 1.2rem; color: #242128; background: #fff; box-shadow: 0 2rem 5rem rgba(0, 0, 0, .28); }
.dark .erp-widget-message-action-sheet { border-color: rgba(255, 255, 255, .12); color: #f8f9fc; background: #2f2b34; }
.erp-widget-message-action-sheet > small { color: #a48700; font-size: .57rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.erp-widget-message-action-sheet h3 { margin: .25rem 0 .7rem; font-size: 1.1rem; }
.erp-widget-message-action-close { position: absolute; top: .65rem; right: .65rem; width: 2rem; height: 2rem; border: 0; border-radius: .6rem; color: #777b85; background: rgba(36, 33, 40, .06); }
.dark .erp-widget-message-action-close { color: #d7d9df; background: rgba(255, 255, 255, .08); }
.erp-widget-message-action-preview { display: grid; gap: .25rem; margin: .55rem 0 .65rem; padding: .6rem; border: 1px solid rgba(36, 33, 40, .1); border-radius: .75rem; background: #f8f9fc; }
.dark .erp-widget-message-action-preview { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); }
.erp-widget-message-action-preview p { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .7rem; line-height: 1.45; }
.erp-widget-message-action-preview time { color: #8f939d; font-size: .52rem; }
.erp-widget-message-reaction-picker { display: flex; align-items: center; gap: .15rem; margin-bottom: .6rem; padding: .42rem; border: 1px solid rgba(36, 33, 40, .1); border-radius: .75rem; background: #f8f9fc; }
.dark .erp-widget-message-reaction-picker { border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .05); }
.erp-widget-message-reaction-picker > span { margin-right: auto; color: #8f939d; font-size: .55rem; font-weight: 800; }
.erp-widget-message-reaction-picker button { width: 1.8rem; height: 1.8rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; font-size: .9rem; }
.erp-widget-message-reaction-picker button:hover, .erp-widget-message-reaction-picker button.is-selected { border-color: rgba(255, 231, 0, .5); background: rgba(255, 231, 0, .16); }
.erp-widget-message-action-list { display: grid; gap: .35rem; }
.erp-widget-message-action-list button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem; border: 1px solid transparent; border-radius: .7rem; color: inherit; background: #f8f9fc; text-align: left; }
.dark .erp-widget-message-action-list button { background: rgba(255, 255, 255, .05); }
.erp-widget-message-action-list button:hover { border-color: rgba(255, 231, 0, .4); }
.erp-widget-message-action-list button > i { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: .55rem; color: #242128; background: #ffe700; }
.erp-widget-message-action-list button span { display: grid; gap: .1rem; }
.erp-widget-message-action-list button strong { font-size: .65rem; }
.erp-widget-message-action-list button small { color: #8f939d; font-size: .53rem; }
.erp-widget-message-action-sheet textarea { width: 100%; min-height: 7rem; resize: vertical; padding: .65rem; border: 1px solid rgba(36, 33, 40, .12); border-radius: .7rem; outline: 0; background: #f8f9fc; }
.dark .erp-widget-message-action-sheet textarea { border-color: rgba(255, 255, 255, .12); color: #fff; background: rgba(255, 255, 255, .06); }
.erp-widget-message-edit-actions { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .55rem; }
@media (max-width: 520px) { .erp-widget-message-action-backdrop { padding: .65rem 0 0; } .erp-widget-message-action-sheet { width: 100%; border-radius: 1.2rem 1.2rem 0 0; } .erp-widget-message-reaction-picker > span { display: none; } .erp-widget-message-reaction-picker button { flex: 1; } }

.erp-widget-message-meta {
    margin-top: .18rem;
    color: #8f939d;
    font-size: .52rem;
    text-align: right;
}

.erp-widget-composer {
    display: flex;
    align-items: flex-end;
    gap: .4rem;
    flex: 0 0 auto;
    padding: .55rem .65rem .65rem;
    border-top: 1px solid rgba(36, 33, 40, .09);
    background: #fff;
}

.dark .erp-widget-composer {
    border-color: rgba(255, 255, 255, .09);
    background: #2f2b34;
}

.erp-widget-composer textarea,
.erp-widget-compose select,
.erp-widget-compose textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(36, 33, 40, .1);
    border-radius: .75rem;
    outline: none;
    color: #242128;
    background: #f5f7fb;
    font-size: .7rem;
}

.erp-widget-composer textarea {
    min-height: 2.25rem;
    max-height: 6rem;
    flex: 1 1 auto;
    resize: none;
    padding: .58rem .65rem;
}

.dark .erp-widget-composer textarea,
.dark .erp-widget-compose select,
.dark .erp-widget-compose textarea {
    border-color: rgba(255, 255, 255, .1);
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.erp-widget-composer textarea:focus,
.erp-widget-compose select:focus,
.erp-widget-compose textarea:focus {
    border-color: rgba(255, 231, 0, .7);
}

.erp-widget-composer button[type="submit"] {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: .75rem;
    color: #242128;
    background: #ffe700;
}

.erp-widget-compose {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    overflow-y: auto;
    padding: .85rem;
}

.erp-widget-compose-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #242128;
    font-size: .75rem;
    font-weight: 800;
}

.dark .erp-widget-compose-head {
    color: #fff;
}

.erp-widget-compose select {
    padding: .65rem;
}

.erp-widget-compose textarea {
    min-height: 7rem;
    resize: vertical;
    padding: .65rem;
}

.erp-widget-compose-actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: auto;
}

.erp-widget-compose-actions button {
    padding: .58rem .75rem;
    border-radius: .7rem;
    font-size: .68rem;
    font-weight: 800;
}

.erp-widget-compose-actions .secondary {
    color: #6f7480;
    background: rgba(36, 33, 40, .07);
}

.dark .erp-widget-compose-actions .secondary {
    color: #b2b5bc;
    background: rgba(255, 255, 255, .07);
}

.erp-widget-compose-actions .primary {
    color: #242128;
    background: #ffe700;
}

@media (max-width: 680px) {
    :root {
        --erp-float-bottom: 5.4rem;
    }

    .erp-floating-dock {
        right: .8rem;
    }

    .erp-floating-chat-button {
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 1rem;
    }

    .erp-messaging-widget {
        right: .5rem;
        bottom: .65rem;
        width: calc(100vw - 1rem);
        height: calc(100dvh - 1.3rem);
        min-height: 0;
        border-radius: 1.15rem;
    }

    .erp-widget-layout {
        display: block;
    }

    .erp-widget-inbox,
    .erp-widget-thread {
        width: 100%;
        height: 100%;
    }

    .erp-widget-thread {
        display: none;
    }

    .erp-messaging-widget.is-thread .erp-widget-inbox {
        display: none;
    }

    .erp-messaging-widget.is-thread .erp-widget-thread {
        display: flex;
    }

    .erp-widget-back {
        display: grid;
    }

    .erp-widget-message-bubble {
        max-width: 88%;
    }
}
