/* Styles for Pages/Chat.aspx (the live chat room) only - see Documentation/Chat.md. Loaded after
   CSS/site.css, so it builds on the same Bootstrap theme/dark-mode variables the rest of the
   public site uses rather than defining its own palette. Bump this file's ?v= in Chat.aspx when
   you change it, same rule site.css/admin.css follow. */

.chat-message-list-wrapper {
    position: relative;
}

.chat-message-list {
    height: 420px;
    overflow-y: auto;
    background-color: var(--bs-tertiary-bg);
}

/* Floats over the list (a sibling, not a child, of #chatMessageList - see Chat.aspx) rather than
   scrolling with it, shown only while the visitor has scrolled away from the bottom and a new
   message has arrived below where they're reading - see chatAppendMessage/chatIsScrolledNearBottom. */
.chat-new-messages-btn {
    position: absolute;
    left: 50%;
    bottom: .75rem;
    transform: translateX(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    z-index: 2;
}

.chat-message-row {
    padding: .35rem .25rem;
}

.chat-message-row + .chat-message-row,
.chat-message-row + .chat-event-row,
.chat-event-row + .chat-message-row {
    border-top: 1px solid var(--bs-border-color);
}

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

.chat-guest-badge {
    font-size: .65rem;
    vertical-align: middle;
}

.chat-message-body {
    white-space: pre-wrap;
    word-break: break-word;
}

/* An emoji-only message (no other text) renders at 2x size, same as text-plus-emoji stays normal
   size - the same "emoji-only messages get bigger" behavior Microsoft Teams/most chat apps use.
   em, not a fixed rem/px, so it scales relative to .chat-message-body's own normal size rather
   than a hardcoded value that could drift out of sync with it. */
.chat-message-body-emoji-only {
    font-size: 2em;
    line-height: 1.3;
}

.chat-event-row {
    padding: .25rem;
    font-style: italic;
}

/* A plain, borderless round swatch button - deliberately not Bootstrap's own .btn-* coloring,
   which would fight with each swatch's own background-color set inline per color. */
.chat-color-swatch {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
}

.chat-color-swatch-selected {
    border-color: var(--bs-body-color);
}

/* The default/first swatch, for the "auto" sentinel (see chatBuildColorSwatches/chatAppendMessage
   in Chat.aspx) - var(--bs-body-color), same token .chat-message-name-auto uses, so the swatch
   itself is already a white circle in dark mode / black circle in light mode: no separate visual
   language needed, the swatch just looks like what picking it will actually do. */
.chat-color-swatch-auto {
    background-color: var(--bs-body-color);
}

/* The actual per-viewer resolution for a message posted with the "auto" color - var(--bs-body-color)
   is the same Bootstrap theme token the rest of the site's text already uses, so this re-resolves
   live if the VIEWER's own theme changes, unlike a fixed color baked in at send time. */
.chat-message-name-auto {
    color: var(--bs-body-color);
}

.chat-emoji-btn {
    font-size: 1.1rem;
    line-height: 1;
}