:root{
    --bubble-out:#e8f1ff;
    --bubble-out-border:#cfe0ff;
    --hover:#eaf2ff;
    --scroll-thumb: rgba(0,0,0,.10);
    --scroll-thumb-hover: rgba(0,0,0,.16);
}

/* Page: tắt scroll chung, mỗi pane scroll riêng */
html,body{height:100%;}
body{overflow:hidden;}
.chat-shell{height:100vh; padding:.75rem 0;}
.min-h-0{min-height:0 !important}

/* Hover tone */
.list-group-item:hover,.btn-light:hover,.nav-underline .nav-link:hover{ background-color: var(--hover); }
.list-group-item.active{ background: var(--hover); border-color:#d9e7ff; color:#1b3b7a; }

/* Sidebar text truncation */
.min-w-0{min-width:0!important}
.list-group-item{overflow:hidden}

/* Messages: scroll dọc riêng + scrollbar nhỏ & nhạt */
.messages{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    overflow-y:auto;
    overflow-x:hidden;
    scroll-behavior:smooth;
    background:
            radial-gradient(circle at 1px 1px, #edf1f5 1px, transparent 0) 0 0/20px 20px,
            linear-gradient(#f7f9fb,#f7f9fb);
}

.messages::before{
    content:"";
    flex:1 0 auto;
}

/* Bỏ khoảng hở cuối cùng để “dính đáy” đẹp hơn */
.messages > *:last-child { margin-bottom: 0 !important; }

/* Scrollbar (WebKit) */
.messages::-webkit-scrollbar,
#convList::-webkit-scrollbar{ width:8px; height:8px; }
.messages::-webkit-scrollbar-track,
#convList::-webkit-scrollbar-track{ background: transparent; }
.messages::-webkit-scrollbar-thumb,
#convList::-webkit-scrollbar-thumb{
    background: var(--scroll-thumb);
    border-radius: 8px;
}
.messages:hover::-webkit-scrollbar-thumb,
#convList:hover::-webkit-scrollbar-thumb{ background: var(--scroll-thumb-hover); }

/* Scrollbar (Firefox) */
.messages, #convList{
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

/* Date chip */
.date-chip{
    display:inline-block; padding:.25rem .6rem; border-radius:999px;
    background:#eef2f7; color:#6c757d; font-size:.8rem;
}

/* Bubble & layout */
.message{display:flex; margin-bottom:22px;}
.bubble{
    position:relative; max-width:min(75%, 720px);
    background:#fff; border:1px solid #e7eaf0; border-radius:14px;
    padding:.6rem .9rem; box-shadow:0 1px 2px rgba(0,0,0,.04);
    overflow-wrap:anywhere; word-break:break-word;
}
.message.incoming{align-items:flex-start;}
.message.outgoing{justify-content:flex-end}
.message.outgoing .bubble{
    background:var(--bubble-out); border-color:var(--bubble-out-border);
    box-shadow:0 4px 10px rgba(13,110,253,.08);
}
.bubble .time{display:block; font-size:.78rem; color:#6c757d; margin-top:.25rem}

/* Like/Heart */
.react-like{
    position:absolute; right:8px; bottom:-16px;
    width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center;
    border:none; background:#fff;
    box-shadow:0 1px 6px rgba(0,0,0,.06);
    transition: transform .12s, box-shadow .12s;
    font-size:15px;
}
.react-like.incoming{ color:#ff3b30; }
.react-like.outgoing{ color:#1176ff; }
.react-like:hover{ transform: translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.12); }

/* Composer */
.chat-composer .form-control{ border-radius:20px; padding:.6rem .9rem }
.chat-composer .btn{ border-radius:10px }

/* Nút gửi: chỉ icon, làm tròn & dễ bấm */
.send-only-icon{
    width:40px; height:40px; padding:0; border-radius:12px;
    display:grid; place-items:center; font-size:18px;
}

/* Emoji popover */
.emoji-popover{
    position:absolute;
    left:8px;                 /* căn theo composer */
    bottom:52px;              /* nằm trên hàng input */
    background:#fff;
    z-index:1050;
}
@media (max-width: 576px){
    .emoji-popover{ left:6px; bottom:60px; }
}