/* ── Hub chat room (deferred, below the fold) ───────────────────────── */
.hub-chat { max-width: 760px; margin: 0 auto; padding: 0 1rem 2rem; }

.hub-chat-thread {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    height: 58vh;
    min-height: 320px;
    overflow-y: auto;
    padding: .75rem .25rem;
    border: 1px solid #e0e7ef;
    border-radius: 14px;
    background: #fff;
}

.hub-chat-msg { display: flex; gap: .7rem; padding: .4rem .75rem; border-radius: 10px; }
.hub-chat-msg:hover { background: #f6f9fd; }

.hub-chat-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: #143259; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .72rem; overflow: hidden;
}
.hub-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.hub-chat-body { flex: 1; min-width: 0; }
.hub-chat-meta { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .1rem; }
.hub-chat-author { font-size: .82rem; font-weight: 700; color: #143259; }
.hub-chat-msg-mine .hub-chat-author { color: #3071F2; }
.hub-chat-time { font-size: .68rem; color: #8a9bb0; }
.hub-chat-text {
    font-size: .9rem; line-height: 1.45; color: #2e3d51;
    white-space: pre-wrap; overflow-wrap: anywhere;
}

.hub-chat-delete {
    flex-shrink: 0; align-self: flex-start;
    background: none; border: none; padding: .2rem .35rem;
    color: #b0bccb; font-size: .8rem; line-height: 1;
    opacity: 0; transition: opacity .15s ease;
}
.hub-chat-msg:hover .hub-chat-delete, .hub-chat-delete:focus { opacity: 1; }
.hub-chat-delete:hover { color: #c0392b; }

.hub-chat-empty { margin: auto; text-align: center; color: #8a9bb0; font-size: .88rem; padding: 2rem 1rem; }
.hub-chat-empty i { font-size: 2.5rem; color: #89C2D9; display: block; margin-bottom: .75rem; }

.hub-chat-load-older { text-align: center; padding: .25rem 0 .5rem; }

.hub-chat-composer { display: flex; gap: .5rem; margin-top: .85rem; align-items: flex-start; }
.hub-chat-composer textarea {
    flex: 1; resize: none; min-height: 44px; max-height: 140px;
    border: 1px solid #e0e7ef; border-radius: 10px;
    padding: .6rem .8rem; font-size: .9rem; font-family: inherit;
}
.hub-chat-composer textarea:focus { outline: none; border-color: #3071F2; }
.hub-chat-composer .btn { min-height: 44px; flex-shrink: 0; }

.hub-chat-signin {
    margin-top: .85rem; padding: 1rem;
    border: 1px dashed #e0e7ef; border-radius: 12px;
    text-align: center; font-size: .88rem; color: #5a6a7e;
}
.hub-chat-signin .btn { margin-top: .6rem; min-height: 44px; display: inline-flex; align-items: center; }

.hub-chat-error { margin-top: .6rem; }

@media (max-width: 575.98px) {
    .hub-chat-thread { height: 62vh; }
    .hub-chat-avatar { width: 30px; height: 30px; font-size: .65rem; }
    .hub-chat-delete { opacity: 1; }
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
html.dark-mode .hub-chat-thread { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .hub-chat-msg:hover { background: #1a0000 !important; }
html.dark-mode .hub-chat-avatar { background: #1a0000 !important; color: #d0d0d0 !important; }
html.dark-mode .hub-chat-author { color: #f0e0e0 !important; }
html.dark-mode .hub-chat-msg-mine .hub-chat-author { color: #cc0000 !important; }
html.dark-mode .hub-chat-time { color: #666 !important; }
html.dark-mode .hub-chat-text { color: #d0d0d0 !important; }
html.dark-mode .hub-chat-delete { color: #666 !important; }
html.dark-mode .hub-chat-delete:hover { color: #ff4444 !important; }
html.dark-mode .hub-chat-empty { color: #888 !important; }
html.dark-mode .hub-chat-empty i { color: #cc0000 !important; }
html.dark-mode .hub-chat-composer textarea {
    background: #0d0000 !important; border-color: #4a0000 !important; color: #d0d0d0 !important;
}
html.dark-mode .hub-chat-signin { border-color: #4a0000 !important; color: #888 !important; }