.messages-offcanvas{--bs-offcanvas-bg:rgba(17,22,39,.96);--bs-offcanvas-color:var(--text-primary);backdrop-filter:blur(18px);border-left:1px solid rgba(99,102,241,.18);box-shadow:-18px 0 45px rgba(0,0,0,.35); --bs-offcanvas-zindex: 1075}
.messages-offcanvas .offcanvas-header{padding:1rem 1rem .85rem;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,rgba(99,102,241,.16) 0%,rgba(236,72,153,.14) 100%)}
.messages-offcanvas .offcanvas-title{font-weight:800}
#conversationList{overflow:auto;padding-right:.15rem}
#messageContainer{display:none;min-height:0;height:100%;flex-direction:column}
#messageContainer.is-active{display:flex}
#pMessage{flex:1 1 auto;min-height:0;overflow-y:auto;padding:.25rem .1rem .25rem 0}
#messageActionContainer{margin-top:.75rem;padding-top:.75rem;border-top:1px solid rgba(255,255,255,.06)}


.messages-empty{text-align:center;padding:2rem 1rem;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);border-radius:18px}
.messages-empty-icon{width:54px;height:54px;display:flex;align-items:center;justify-content:center;margin:0 auto .9rem;border-radius:16px;background:rgba(99,102,241,.14);color:#c7d2fe;font-size:1.2rem}

/* =========================================================
   Conversation list item
========================================================= */
.msg-conversation-row{margin-bottom:.75rem;position:relative}
.msg-conversation-item{width:100%;text-align:left;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);padding:.95rem 1rem;border-radius:16px;color:var(--text-primary);transition:all .2s ease;}
.msg-conversation-item:hover{;border-color:rgba(99,102,241,.35);background:rgba(99,102,241,.08)}
.msg-conversation-main{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}
.msg-conversation-user{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1}
.msg-conversation-usertext{display:flex;flex-direction:column;min-width:0;flex:1}
.msg-conversation-avatar{width:38px;height:38px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(99,102,241,.22),rgba(236,72,153,.18));color:#fff;flex-shrink:0}
.msg-conversation-name{font-weight:700;display:block;margin-bottom:.2rem}
.msg-conversation-preview{display:block;font-size:.84rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-self-prefix{color:#c7d2fe;font-weight:600}
.msg-conversation-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.msg-conversation-date{font-size:.78rem;color:var(--text-muted);padding:.2rem .5rem;border-radius:999px;background:rgba(255,255,255,.06)}
.msg-conversation-unread{font-size:.75rem;font-weight:800;color:#fda4af;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.22);padding:.2rem .5rem;border-radius:999px}

/* Dropdown: a gomb és menü a conversation-item fölé emelkedik */
.msg-conv-actions{position:relative;z-index:10}
.msg-conv-dropdown .dropdown-menu{z-index:1055}
.msg-conv-menu-btn{opacity:.55;transition:opacity .15s}
.msg-conv-menu-btn:hover,.msg-conv-menu-btn:focus,.msg-conv-menu-btn[aria-expanded="true"]{opacity:1}

/* =========================================================
   Date separator
========================================================= */
.msg-date-separator{text-align:center;margin:.45rem 0 .8rem}
.msg-date-separator span{display:inline-block;font-size:.75rem;color:var(--text-muted);padding:.24rem .65rem;border-radius:999px;background:rgba(255,255,255,.05)}

/* =========================================================
   Message rows & bubbles
========================================================= */
.msg-row{display:flex;flex-direction:column;margin-bottom:.9rem}
.msg-row-self{align-items:flex-end}
.msg-row-other{align-items:flex-start}
.msg-bubble{max-width:78%;padding:.8rem .95rem;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.16);word-break:break-word}
.msg-bubble-self{background:linear-gradient(135deg,#6366f1 0%,#7c3aed 100%);color:#fff;border-bottom-right-radius:8px}
.msg-bubble-other{background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.07);color:var(--text-primary);border-bottom-left-radius:8px}
.msg-bubble-deleted{background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.15);color:var(--text-muted);font-style:italic}
.msg-meta{display:flex;align-items:center;gap:.55rem;margin-top:.32rem;padding:0 .2rem}
.msg-time{color:var(--text-muted)}
.msg-status{font-size:.82rem;color:var(--text-muted)}
.msg-status-read{color:#93c5fd}
.msg-edited{font-size:.78rem;color:var(--text-muted)}
.msg-actions{display:flex;align-items:center;gap:.35rem}
.msg-action-link{color:var(--text-muted);text-decoration:none;opacity:0;transition:opacity .18s ease}
.msg-row:hover .msg-action-link{opacity:1}
.msg-action-link:hover{color:#c7d2fe}

/* =========================================================
   Reply preview (input area)
========================================================= */
.msg-reply-preview{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.65rem;padding:.75rem .85rem;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.msg-reply-preview-inner{min-width:0;flex:1}
.msg-reply-preview-label{font-size:.72rem;font-weight:800;color:#c7d2fe;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.18rem}
.msg-reply-preview-text{font-size:.88rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Reply block inside bubble */
.msg-reply-block{display:flex;gap:.55rem;margin-bottom:.55rem;padding:.45rem .55rem;border-radius:12px;background:rgba(255,255,255,.06);cursor:pointer}
.msg-reply-line{width:3px;border-radius:999px;background:rgba(255,255,255,.45);flex-shrink:0}
.msg-reply-content{min-width:0}
.msg-reply-label{font-size:.7rem;font-weight:700;opacity:.85;text-transform:uppercase;letter-spacing:.04em}
.msg-reply-text{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}

/* =========================================================
   Textarea & buttons
========================================================= */
.messages-offcanvas textarea.form-control{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);color:var(--text-primary);border-radius:14px;min-height:52px;max-height:160px;resize:none}
.messages-offcanvas textarea.form-control::placeholder{color:var(--text-muted)}
.messages-offcanvas .btn-message-primary{background:var(--accent-gradient);border:none;color:#fff;border-radius:12px;padding:.6rem 1rem;font-weight:700}
.messages-offcanvas .btn-message-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--text-secondary);border-radius:12px}

/* =========================================================
   Skeleton loader
========================================================= */
.msg-skeleton{height:18px;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05));background-size:200% 100%;animation:msgSkeleton 1.2s infinite;margin-bottom:.8rem}
@keyframes msgSkeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* =========================================================
   New message chip (floating)
========================================================= */
#newMsgChip{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;z-index:20;border:none;border-radius:999px;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.35);display:none}

/* =========================================================
   Voice record button pulse
========================================================= */
#recordBtn.recording{animation:msgPulseRec 1s infinite}
@keyframes msgPulseRec{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6)}70%{box-shadow:0 0 0 12px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}

/* =========================================================
   Image message
========================================================= */
.msg-img{max-width:220px;border-radius:10px;cursor:pointer;display:block}

/* =========================================================
   Scrollbar
========================================================= */
#pMessage::-webkit-scrollbar{width:5px}
#pMessage::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}

/* =========================================================
   Peer header
========================================================= */
.msg-peer-header{display:flex;align-items:center;gap:.7rem;padding:.7rem .85rem;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin-bottom:.6rem}
.msg-peer-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center}
.msg-peer-name{font-weight:600;font-size:.9rem}
.msg-peer-sub{font-size:.72rem;color:rgba(255,255,255,.55)}

/* =========================================================
   Load older / more buttons
========================================================= */
.msg-load-more,.msg-load-more:hover{text-align:center;font-size:.72rem;margin:.5rem 0;cursor:pointer;color:#9fb8ff}
.msg-load-more:hover{text-decoration:underline}

/* =========================================================
   Animations
========================================================= */
.msg-appear{animation:fadeInUp .25s ease}
.msg-new{animation:pulse .6s ease}

/* =========================================================
   Responsive
========================================================= */
@media(max-width:576px){.messages-offcanvas{width:100%!important}.msg-bubble{max-width:88%}}

/* =========================================================
   Scroll chip (ugrás az aljára / új üzenet jelző)
========================================================= */
#msgScrollChip {
	display: none;
	text-align: center;
	margin: .35rem 0 .25rem;
}

#msgScrollChip button,
#msgScrollChip {
	background: linear-gradient(135deg, rgba(99,102,241,.85), rgba(124,58,237,.85));
	border: none;
	border-radius: 999px;
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
	padding: .3rem .85rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.3);
	transition: opacity .18s, transform .18s;
	white-space: nowrap;
}

#msgScrollChip:hover {
	opacity: .9;
	transform: translateY(-1px);
}

/* Online státusz dot a peer headerben */
.msg-peer-status {
	font-size: .65rem;
	vertical-align: middle;
}

/* Scrollbar a pMessage-n */
#pMessage::-webkit-scrollbar { width: 5px; }
#pMessage::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 4px; }
/* =========================================================
   Compose panel
========================================================= */
#openComposeBtn { padding: .3rem .6rem; font-size: .85rem; }
#openComposeBtn:hover,
#openComposeBtn.active { color: #c7d2fe !important; background: rgba(99,102,241,.2) !important; border-color: rgba(99,102,241,.4) !important; }
#composeSearch::placeholder { color: rgba(255,255,255,.3) !important; }
#composeSearch:focus {
    background: rgba(255,255,255,.09) !important;
    border-color: rgba(99,102,241,.5) !important;
    box-shadow: 0 0 0 2px rgba(99,102,241,.18) !important;
    color: #fff !important;
}
.compose-suggest-row:last-child { border-bottom: none !important; }