/* Granville Tea Chat — mobile-first */

:root {
    --chat-topbar-h: 52px;
    --gt-green: #198754;
}

html, body {
    height: 100%;
}

body {
    background: #f6f7f6;
}

.chat-topbar {
    height: var(--chat-topbar-h);
}

/* ---- Conversation list ---- */
.chat-index {
    background: #fff;
    min-height: calc(100dvh - var(--chat-topbar-h));
}

.chat-list-item {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.chat-list-item.active {
    background: var(--gt-green);
    border-color: var(--gt-green);
}

.chat-list-name {
    font-weight: 600;
}

.chat-list-snippet {
    font-size: .85rem;
    color: #6c757d;
    max-width: 85%;
}

.chat-list-item.active .chat-list-snippet {
    color: rgba(255, 255, 255, .8);
}

.chat-badge {
    min-width: 1.6em;
}

/* ---- Conversation page: full-height flex column, sticky composer ---- */
.chat-shell {
    display: flex;
    height: calc(100dvh - var(--chat-topbar-h));
    overflow: hidden;
}

.chat-sidebar {
    width: 300px;
    flex-shrink: 0;
    background: #fff;
}

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

.chat-header {
    height: 48px;
    flex-shrink: 0;
    background: #fff;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: .75rem .75rem 0;
    -webkit-overflow-scrolling: touch;
}

.chat-composer {
    flex-shrink: 0;
    background: #fff;
    position: relative;
    padding-bottom: env(safe-area-inset-bottom);
}

#composer-input {
    resize: none;
    max-height: 7.5rem;
}

.chat-send-btn {
    width: 44px;
    height: 38px;
    flex-shrink: 0;
}

/* ---- Message bubbles ---- */
.msg-row {
    margin-bottom: .25rem;
    display: flex;
}

.msg-row.mine {
    justify-content: flex-end;
}

.msg-bubble {
    max-width: 82%;
    padding: .45rem .7rem;
    border-radius: 1rem;
    background: #fff;
    border: 1px solid #e4e6e4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.msg-row.mine .msg-bubble {
    background: #d9f0e3;
    border-color: #c4e5d3;
}

.msg-meta {
    font-size: .72rem;
    color: #8a9089;
    margin: .1rem .4rem .35rem;
}

.msg-row.mine + .msg-meta {
    text-align: right;
}

.msg-sender {
    font-size: .78rem;
    font-weight: 600;
    color: #45695a;
    margin: .35rem .4rem .1rem;
}

.msg-deleted {
    font-style: italic;
    color: #a0a5a0;
}

.msg-mention {
    background: #fff3cd;
    border-radius: .25rem;
    padding: 0 .15rem;
    font-weight: 600;
}

.msg-bubble a {
    color: #0d6efd;
}

.day-divider {
    text-align: center;
    font-size: .75rem;
    color: #8a9089;
    margin: .75rem 0 .5rem;
}

.msg-delete-btn {
    border: none;
    background: none;
    color: #b0b5b0;
    font-size: .8rem;
    padding: 0 .3rem;
    align-self: center;
    visibility: hidden;
}

.msg-row:hover .msg-delete-btn,
.msg-row:active .msg-delete-btn {
    visibility: visible;
}

/* ---- Mention autocomplete ---- */
.mention-popup {
    position: absolute;
    bottom: 100%;
    left: .5rem;
    right: .5rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
    max-height: 40vh;
    overflow-y: auto;
    z-index: 100;
}

.mention-popup button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    padding: .55rem .8rem;
}

.mention-popup button:hover,
.mention-popup button.hover {
    background: #e9f5ee;
}

/* Load-older button */
.load-older {
    display: block;
    margin: 0 auto .5rem;
}