/* Soanbole.com - Messaging CSS v1 - Nhan tin rieng */

/* Guest */
.msg-guest-wrap{text-align:center;padding:60px 20px;max-width:400px;margin:0 auto}
.msg-guest-icon{font-size:3.5rem;margin-bottom:16px}
.msg-guest-title{font-size:1.4rem;font-weight:700;color:var(--text-primary,#2d1b4e);margin:0 0 10px}
.msg-guest-sub{font-size:.88rem;color:var(--text-muted,#8a7d9b);margin:0 0 24px;line-height:1.5}

/* App Layout */
.msg-app{display:flex;height:calc(100vh - 180px);min-height:500px;border-radius:16px;overflow:hidden;background:var(--surface,rgba(255,255,255,.97));border:1px solid var(--border,rgba(107,70,150,.08));box-shadow:0 2px 20px rgba(0,0,0,.06)}

/* Sidebar */
.msg-sidebar{width:340px;min-width:280px;border-right:1px solid var(--border,rgba(107,70,150,.1));display:flex;flex-direction:column;background:var(--surface,rgba(255,255,255,.97))}
.msg-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px;border-bottom:1px solid var(--border,rgba(107,70,150,.06))}
.msg-sidebar-title{font-size:1.1rem;font-weight:700;color:var(--text-primary,#2d1b4e);margin:0}
.msg-new-btn{width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent,#6b4696),var(--gold,#c8963c));color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}
.msg-new-btn:hover{transform:scale(1.08);box-shadow:0 3px 12px rgba(107,70,150,.25)}

/* Search */
.msg-search-wrap{padding:8px 14px 12px;position:relative}
.msg-search-icon{position:absolute;left:26px;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.5}
.msg-search-input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--border,rgba(107,70,150,.12));border-radius:10px;font-size:.84rem;background:var(--card,rgba(255,255,255,.96));color:var(--text-primary,#2d1b4e);outline:none;transition:border-color .2s;box-sizing:border-box}
.msg-search-input:focus{border-color:var(--accent,#6b4696)}

/* Convo List */
.msg-convo-list{flex:1;overflow-y:auto;overflow-x:hidden}
.msg-convo-item{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border,rgba(107,70,150,.04));position:relative}
.msg-convo-item:hover{background:rgba(107,70,150,.04)}
.msg-convo-item.active{background:rgba(107,70,150,.08);border-left:3px solid var(--accent,#6b4696)}
.msg-convo-item.unread .msg-convo-name{font-weight:700}
.msg-convo-item.unread .msg-convo-preview{font-weight:600;color:var(--text-primary,#2d1b4e)}

.msg-convo-avatar,.msg-user-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,rgba(107,70,150,.12),rgba(200,150,60,.1));display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--accent,#6b4696);flex-shrink:0;overflow:hidden}
.msg-avatar-img,.msg-header-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.msg-convo-info{flex:1;min-width:0;overflow:hidden}
.msg-convo-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.msg-convo-name{font-size:.88rem;font-weight:600;color:var(--text-primary,#2d1b4e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-convo-time{font-size:.72rem;color:var(--text-muted,#8a7d9b);flex-shrink:0;margin-left:8px}
.msg-convo-preview{font-size:.8rem;color:var(--text-muted,#8a7d9b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-you{color:var(--text-muted,#8a7d9b);font-weight:500}
.msg-unread-badge{position:absolute;right:16px;top:50%;transform:translateY(-50%);background:var(--accent,#6b4696);color:#fff;font-size:.68rem;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px}

/* Chat Area */
.msg-chat-area{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--card,rgba(255,255,255,.96))}

/* Empty Chat */
.msg-empty-chat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
.msg-empty-icon{font-size:3rem;margin-bottom:16px;opacity:.4}
.msg-empty-chat h3{font-size:1.1rem;font-weight:600;color:var(--text-primary,#2d1b4e);margin:0 0 8px}
.msg-empty-chat p{font-size:.85rem;color:var(--text-muted,#8a7d9b);margin:0 0 20px}
.msg-empty-list{text-align:center;padding:40px 20px;color:var(--text-muted,#8a7d9b);font-size:.85rem}
.msg-empty-messages{text-align:center;padding:60px 20px;color:var(--text-muted,#8a7d9b);font-size:.9rem}

.msg-start-btn,.msg-start-btn-small{padding:10px 20px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--accent,#6b4696),var(--gold,#c8963c));color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.msg-start-btn:hover,.msg-start-btn-small:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(107,70,150,.25)}
.msg-start-btn-small{padding:8px 16px;font-size:.8rem;margin-top:12px}

/* Chat Header */
.msg-chat-header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border,rgba(107,70,150,.08));background:var(--surface,rgba(255,255,255,.97))}
.msg-back-btn{display:none;width:34px;height:34px;border:none;border-radius:50%;background:rgba(107,70,150,.08);color:var(--text-primary,#2d1b4e);font-size:1.1rem;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.msg-header-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,rgba(107,70,150,.12),rgba(200,150,60,.1));display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:var(--accent,#6b4696);flex-shrink:0;overflow:hidden}
.msg-header-info{flex:1;min-width:0}
.msg-header-name{font-size:.95rem;font-weight:700;color:var(--text-primary,#2d1b4e)}
.msg-header-status{font-size:.75rem;color:var(--text-muted,#8a7d9b)}

/* Messages */
.msg-messages-wrap{flex:1;overflow-y:auto;padding:16px 20px;scroll-behavior:smooth}
.msg-messages{display:flex;flex-direction:column;gap:4px;min-height:100%}
.msg-date-divider{text-align:center;padding:16px 0 8px}
.msg-date-divider span{background:var(--surface,rgba(255,255,255,.97));padding:4px 14px;border-radius:12px;font-size:.72rem;color:var(--text-muted,#8a7d9b);border:1px solid var(--border,rgba(107,70,150,.08))}

.msg-bubble-row{display:flex;align-items:flex-end;gap:8px;max-width:80%}
.msg-bubble-row.mine{margin-left:auto;flex-direction:row-reverse}
.msg-bubble-row.theirs{margin-right:auto}
.msg-bubble-row.no-avatar{padding-left:46px}
.msg-bubble-row.mine.no-avatar{padding-left:0;padding-right:0}

.msg-bubble-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,rgba(107,70,150,.12),rgba(200,150,60,.1));display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:var(--accent,#6b4696);flex-shrink:0;overflow:hidden}
.msg-bubble-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.msg-bubble{padding:10px 14px;border-radius:16px;max-width:100%;word-wrap:break-word;position:relative}
.msg-mine{background:linear-gradient(135deg,var(--accent,#6b4696),#8b5cf6);color:#fff;border-bottom-right-radius:4px}
.msg-theirs{background:var(--surface,rgba(255,255,255,.97));color:var(--text-primary,#2d1b4e);border:1px solid var(--border,rgba(107,70,150,.08));border-bottom-left-radius:4px}

.msg-bubble-text{font-size:.87rem;line-height:1.5;white-space:pre-wrap}
.msg-bubble-text a{color:inherit;text-decoration:underline;opacity:.9}
.msg-theirs .msg-bubble-text a{color:var(--accent,#6b4696)}

.msg-bubble-meta{display:flex;align-items:center;gap:4px;justify-content:flex-end;margin-top:4px}
.msg-bubble-time{font-size:.65rem;opacity:.7}
.msg-read-tick{font-size:.65rem;opacity:.8;color:#60d394}
.msg-theirs .msg-bubble-time{color:var(--text-muted,#8a7d9b)}

/* Input Area */
.msg-input-area{padding:12px 20px;border-top:1px solid var(--border,rgba(107,70,150,.08));background:var(--surface,rgba(255,255,255,.97))}
.msg-input-wrap{display:flex;align-items:flex-end;gap:10px;background:var(--card,rgba(255,255,255,.96));border:1px solid var(--border,rgba(107,70,150,.12));border-radius:14px;padding:6px 6px 6px 16px;transition:border-color .2s}
.msg-input-wrap:focus-within{border-color:var(--accent,#6b4696)}
.msg-input{flex:1;border:none;outline:none;background:transparent;font-size:.87rem;color:var(--text-primary,#2d1b4e);resize:none;max-height:120px;line-height:1.5;padding:6px 0;font-family:inherit}
.msg-input::placeholder{color:var(--text-muted,#8a7d9b);opacity:.6}
.msg-send-btn{width:38px;height:38px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent,#6b4696),#8b5cf6);color:#fff;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s,box-shadow .15s}
.msg-send-btn:hover{transform:scale(1.06);box-shadow:0 3px 12px rgba(107,70,150,.3)}
.msg-send-btn:active{transform:scale(.95)}

/* Loading */
.msg-loading{text-align:center;padding:30px;color:var(--text-muted,#8a7d9b);font-size:.85rem}

/* New Convo Modal */
.msg-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;animation:msgFadeIn .2s}
.msg-modal{background:var(--surface,#fff);border-radius:18px;width:100%;max-width:440px;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.2);display:flex;flex-direction:column}
.msg-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border,rgba(107,70,150,.08))}
.msg-modal-header h3{margin:0;font-size:1.05rem;font-weight:700;color:var(--text-primary,#2d1b4e)}
.msg-modal-close{width:32px;height:32px;border:none;border-radius:50%;background:rgba(107,70,150,.08);color:var(--text-primary,#2d1b4e);font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.msg-modal-body{flex:1;overflow-y:auto;padding:16px 20px}

/* Search User */
.msg-search-user-wrap{margin-bottom:14px}
.msg-search-user-input{width:100%;padding:12px 16px;border:1px solid var(--border,rgba(107,70,150,.12));border-radius:12px;font-size:.87rem;background:var(--card,rgba(255,255,255,.96));color:var(--text-primary,#2d1b4e);outline:none;box-sizing:border-box}
.msg-search-user-input:focus{border-color:var(--accent,#6b4696)}
.msg-user-results{max-height:400px;overflow-y:auto}
.msg-user-hint{text-align:center;padding:30px 10px;color:var(--text-muted,#8a7d9b);font-size:.84rem}
.msg-user-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;transition:background .15s}
.msg-user-item:hover{background:rgba(107,70,150,.06)}
.msg-user-avatar{width:42px;height:42px}
.msg-user-info{flex:1;min-width:0}
.msg-user-name{font-size:.88rem;font-weight:600;color:var(--text-primary,#2d1b4e)}
.msg-user-email{font-size:.76rem;color:var(--text-muted,#8a7d9b)}

/* Nav Badge */
.msg-nav-badge{background:var(--accent,#6b4696);color:#fff;font-size:.6rem;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:none;align-items:center;justify-content:center;padding:0 4px;position:absolute;top:-2px;right:-6px}

/* Animation */
@keyframes msgFadeIn{from{opacity:0}to{opacity:1}}

/* Mobile */
@media(max-width:820px){
    .msg-app{height:calc(100vh - 140px);border-radius:0;border:none;box-shadow:none}
    .msg-sidebar{width:100%;min-width:0;border-right:none}
    .msg-chat-area{display:none;position:absolute;inset:0;z-index:10}
    .msg-app.msg-chat-active .msg-sidebar{display:none}
    .msg-app.msg-chat-active .msg-chat-area{display:flex;position:relative}
    .msg-back-btn{display:flex}
    .msg-bubble-row{max-width:88%}
    .msg-bubble-row.no-avatar{padding-left:40px}
    .msg-messages-wrap{padding:12px 14px}
    .msg-input-area{padding:10px 14px}
    .msg-chat-header{padding:12px 14px}
}

/* Dark theme support */
[data-theme="dark-blue"] .msg-mine{background:linear-gradient(135deg,#5b9bd5,#3d7ab5)}
[data-theme="dark-blue"] .msg-theirs{background:rgba(16,28,50,.92);border-color:rgba(91,155,213,.12)}
[data-theme="dark-blue"] .msg-modal{background:#0f1b30}