/* assets/css/chat.css — layout for /chat/
   Assumes Bootstrap 5. Tune --chat-chrome-h to your header height. */

:root {
    --chat-chrome-h: 150px;
    --chat-h:        calc(100vh - var(--chat-chrome-h));
    --chat-sidebar-w: 340px;
    --chat-border:   #dee2e6;
    --chat-bubble:   #f1f3f5;
    --chat-bubble-own: #d9e7ff;
}

.hide { display: none !important; }
.min-w-0 { min-width: 0; }

.chatroom-container {
    display: flex;
    align-items: stretch;
    height: var(--chat-h);
    min-height: 480px;
    background: #fff;
    border: 1px solid var(--chat-border);
    border-radius: .5rem;
    overflow: hidden;
}

/* ---------- sidebar ---------- */

.chat-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--chat-sidebar-w);
    width: var(--chat-sidebar-w);
    min-width: 0;
    border-right: 1px solid var(--chat-border);
    background: #f8f9fa;
}

.chat-sidebar-head { flex: 0 0 auto; }

/* flex:1 + min-height:0 is what lets this scroll instead of
   pushing the sidebar past its container */
.chat-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 .25rem;
}

.chat-filters, .chat-listing-tabs { display: flex; flex-wrap: wrap; gap: .25rem; }
.chat-filters .btn, .chat-listing-tabs .btn { font-size: .75rem; padding: .15rem .5rem; }

.chatroom {
    padding: .5rem;
    border-radius: .375rem;
    cursor: pointer;
    transition: background-color .12s ease;
}
.chatroom:hover { background-color: #eef1f5; }
.chatroom.active-chatroom { background-color: #e7f1ff !important; }

.chatroom .photo { display: flex; align-items: center; }
.chatroom .photo img {
    width: 36px; height: 36px; border-radius: 50%;
    object-fit: cover; border: 2px solid #f8f9fa;
}
.chatroom .photo img + img { margin-left: -.6rem; }

.chatroom .group-name { display: block; }
.chatroom .desc { min-width: 0; }
.chatroom .btn-unread { font-size: .6875rem; min-width: 1.25rem; text-align: center; }

/* ---------- main pane ---------- */

.chat-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.chat-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.chat-thread-head {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--chat-border);
    background: #f8f9fa;
}

#members-block .profile-container {
    display: flex; align-items: center; justify-content: flex-end;
    gap: .25rem; list-style: none; margin: 0; padding: 0;
}
#members-block .profile img {
    width: 28px; height: 28px; border-radius: 50%;
    object-fit: cover; cursor: pointer; border: 2px solid #fff;
}
#members-block .profile + .profile { margin-left: -.5rem; }

.message-content {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.inner-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: .75rem;
}

li.message {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .375rem 0;
}
li.message .profile { flex: 0 0 40px; cursor: pointer; }
li.message .profile img {
    width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
}
li.message .content { flex: 1 1 auto; min-width: 0; }
li.message .comment {
    display: inline-block; max-width: 100%;
    margin-top: .125rem; padding: .5rem .75rem;
    background: var(--chat-bubble);
    border-radius: 1rem; border-top-left-radius: .25rem;
}
li.message .message-text { overflow-wrap: anywhere; }
li.message .message-text img { max-width: 100%; height: auto; border-radius: .375rem; }
li.message .message-text p:last-child { margin-bottom: 0; }

li.message.own { flex-direction: row-reverse; }
li.message.own .content { text-align: right; }
li.message.own .comment {
    background: var(--chat-bubble-own);
    border-top-left-radius: 1rem; border-top-right-radius: .25rem;
    text-align: left;
}

.highlight { background: #fff3cd; border-radius: .125rem; }

/* ---------- composer ---------- */

.control-panel {
    flex: 0 0 auto;
    border-top: 1px solid var(--chat-border);
    background: #fff;
}
.control-panel #editor {
    min-height: 64px; max-height: 200px;
    overflow-y: auto; padding: .5rem .75rem; outline: none;
}
.control-panel #editor:empty:before {
    content: attr(placeholder); color: #6c757d; pointer-events: none;
}

/* ---------- profile panel ---------- */

#profilePanel {
    position: fixed; top: 0; right: 0; z-index: 1045;
    width: 340px; max-width: 90vw; height: 100vh;
    background: #fff; border-left: 1px solid var(--chat-border);
    box-shadow: -8px 0 24px rgba(0,0,0,.08);
    overflow-y: auto;
    transition: transform .22s ease, visibility .22s;
}
.profile-panel-hidden  { transform: translateX(100%); visibility: hidden; }
.profile-panel-visible { transform: translateX(0);    visibility: visible; }

/* ---------- responsive ---------- */

@media (max-width: 991.98px) { :root { --chat-sidebar-w: 280px; } }

@media (max-width: 767.98px) {
    :root { --chat-chrome-h: 100px; }

    .chatroom-container { flex-direction: column; height: auto; border-radius: 0; }
    .chat-sidebar {
        flex: 0 0 auto; width: 100%; max-height: 40vh;
        border-right: 0; border-bottom: 1px solid var(--chat-border);
    }
    .chat-main { height: var(--chat-h); min-height: 360px; }
    #profilePanel { width: 100%; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .chatroom, #profilePanel { transition: none; }
}
#editor .toolbar,
.tm-editor .toolbar {
    user-select: none;
    -webkit-user-select: none;
}
.via-actor .via-avatar img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    vertical-align: middle;
    object-fit: cover;
}