/*.chat-container { display:flex; height:80vh; border:1px solid #ccc; }
.chat-list { width:30%; border-right:1px solid #ccc; background:#f0f0f0; overflow-y:auto; }
.chat-user { display:block; padding:10px; border-bottom:1px solid #ddd; color:#000; text-decoration:none; }
.chat-user:hover { background:#ddd; }

.chat-window { width:70%; display:flex; flex-direction:column; }
.chat-messages { flex:1; padding:10px; overflow-y:auto; }

.chat-bubble { max-width:60%; padding:8px; margin-bottom:10px; border-radius:10px; }
.chat-bubble.me { background:#dcf8c6; margin-left:auto; }
.chat-bubble.them { background:#fff; border:1px solid #ccc; }

.chat-input { display:flex; border-top:1px solid #ccc; }
.chat-input input { flex:1; padding:10px; border:none; }
.chat-input button { padding:10px; background:#25d366; color:#fff; border:none; }

.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thread-card {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 8px;
}

.msg {
    padding: 8px 12px;
    margin: 5px 0;
    border-radius: 10px;
    max-width: 70%;
}

.sent {
    background: #d1e7dd;
    margin-left: auto;
}

.received {
    background: #f8d7da;
}
.inbox-btn {
    position: relative;
}
*/
@layer rp-base, rp-components, rp-utilities, rp-overrides;


/* =========================
   BASE
   ========================= */
@layer rp-base {

    .rp-scope {
        font-family: system-ui, sans-serif;
    }

    .rp-scope * {
        box-sizing: border-box;
    }

}


/* =========================
   COMPONENTS
   ========================= */
@layer rp-components {

    .rp-scope .chat-container {
        display: flex;
        height: 80vh;
        border: 1px solid #ccc;
    }

    .rp-scope .chat-list {
        width: 30%;
        border-right: 1px solid #ccc;
        background: #f0f0f0;
        overflow-y: auto;
    }

    .rp-scope .chat-user {
        display: block;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        color: #000;
        text-decoration: none;
    }

    .rp-scope .chat-user:hover {
        background: #ddd;
    }

    .rp-scope .chat-window {
        width: 70%;
        display: flex;
        flex-direction: column;
    }

    .rp-scope .chat-messages {
        flex: 1;
        padding: 10px;
        overflow-y: auto;
    }

    .rp-scope .chat-bubble {
        max-width: 60%;
        padding: 8px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .rp-scope .chat-bubble.me {
        background: #dcf8c6;
        margin-left: auto;
    }

    .rp-scope .chat-bubble.them {
        background: #fff;
        border: 1px solid #ccc;
    }

    .rp-scope .chat-input {
        display: flex;
        border-top: 1px solid #ccc;
    }

    .rp-scope .chat-input input {
        flex: 1;
        padding: 10px;
        border: none;
    }

    .rp-scope .chat-input button {
        padding: 10px;
        background: #25d366;
        color: #fff;
        border: none;
    }

    /* THREAD LIST */

    .rp-scope .inbox-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .rp-scope .thread-card {
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 8px;
    }

    .rp-scope .msg {
        padding: 8px 12px;
        margin: 5px 0;
        border-radius: 10px;
        max-width: 70%;
    }

    .rp-scope .sent {
        background: #d1e7dd;
        margin-left: auto;
    }

    .rp-scope .received {
        background: #f8d7da;
    }

    .rp-scope .inbox-btn {
        position: relative;
    }

}

.conv-listing {
    font-size: 12px;
    color: #6c3cff;
    margin-bottom: 4px;
}
/* Base */
.conversation-item {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

/* 🔥 UNREAD STATE */
.conversation-item.unread {
    background: rgba(108, 60, 255, 0.05); /* subtle highlight */
}

/* Name bold */
.conversation-item.unread .conv-name {
    font-weight: 700;
}

/* Last message bold */
.conversation-item.unread .conv-last {
    font-weight: 600;
}

/* Listing highlight */
.conversation-item.unread .conv-listing {
    font-weight: 600;
    color: #6c3cff;
}

/* Optional: unread dot effect */
.conversation-item.unread::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #6c3cff;
    border-radius: 50%;
    position: absolute;
    left: -12px;
    top: 18px;
}
.conversation-item {
    position: relative;
}
.conversation-item.unread .conv-name {
    font-weight: 500;
}

.conversation-item.unread .conv-last {
    font-weight: 700;
}
.conv-actions {
    position: relative;
    margin-left: auto;
}

.conv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.conv-left {
    display: flex;
    align-items: center;
}

.conv-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.conv-menu-btn {
    cursor: pointer;
    font-size: 18px;
    padding: 4px 6px;
}

.conv-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 28px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    z-index: 20;
    min-width: 140px;
}

.conv-dropdown div {
    padding: 8px 12px;
    cursor: pointer;
}

.conv-dropdown div:hover {
    background: #f5f5f5;
}

.conv-dropdown.show {
    display: block;
}
.conv-listing {
	margin-top: 4px;
    cursor: pointer;
    color: #6c5ce7;
}
.conv-listing:hover {
    text-decoration: underline;
}
.chat-menu {
    position: relative;
    z-index: 10;
}
.conv-message {
    margin-top: 2px;
    color: #555;
}
.chat-dropdown {
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 20;
}
.rp-listing-link {
    display: inline-block;   /* 🔥 key fix */
    width: fit-content;      /* ensures no stretching */
    cursor: pointer;
}
/* ========================= */
@layer rp-utilities {}
@layer rp-overrides {}