/*
 *  Live Chat module - chat box styles.
 *  Made by CruelWinter. License: MIT.
 *
 *  Colours are taken from the surrounding theme (currentColor and translucent greys), so the box
 *  sits correctly in light and dark templates without per-theme rules.
 */
.livechat {
    --lc-line: rgba(127, 127, 127, .22);
    --lc-soft: rgba(127, 127, 127, .10);
    --lc-muted: rgba(127, 127, 127, 1);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    position: relative;
}
.livechat .lc-tabs { margin: 0; }
.livechat .lc-tabs button { font: inherit; cursor: pointer; background: transparent; border: 0; }
.livechat .lc-tabs .nav-link { color: inherit; }
.livechat .lc-log {
    height: 28rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--lc-line);
    border-radius: .5rem;
    padding: .25rem 0;
}
.livechat.lc-compact .lc-log { height: 18rem; }
.livechat .lc-empty {
    margin: auto;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--lc-muted);
}
.livechat .lc-msg {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .4rem .75rem;
}
.livechat .lc-msg:hover { background: var(--lc-soft); }
.livechat .lc-avatar {
    width: 32px;
    height: 32px;
    border-radius: .25rem;
    flex: none;
    image-rendering: pixelated;
}
.livechat.lc-compact .lc-avatar { width: 24px; height: 24px; }
.livechat .lc-activity {
    align-items: baseline;
    gap: .5rem;
    font-size: .85em;
    font-style: italic;
    color: var(--lc-muted);
    padding-left: calc(.75rem + 32px + .6rem);
}
.livechat.lc-compact .lc-activity { padding-left: calc(.75rem + 24px + .6rem); }
.livechat .lc-activity-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.livechat .lc-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: .9em;
    background: rgba(127, 127, 127, .25);
}
.livechat .lc-body { flex: 1; min-width: 0; }
.livechat .lc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    line-height: 1.3;
}
.livechat .lc-name { font-weight: 600; text-decoration: none; }
.livechat .lc-name:hover { text-decoration: underline; }
.livechat .lc-badge { font-size: .75em; }
.livechat .lc-badge .badge, .livechat .lc-badge .label { vertical-align: middle; }
.livechat .lc-source {
    font-size: .7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .05rem .4rem;
    border-radius: .25rem;
    background: rgba(76, 175, 80, .18);
    color: #4caf50;
}
.livechat .lc-discord-tag { background: rgba(88, 101, 242, .22); color: #8c95ff; }
.livechat .lc-guest-tag { background: rgba(127, 127, 127, .18); color: inherit; opacity: .8; }
.livechat .lc-guest-form { display: flex; gap: .5rem; }
.livechat .lc-guest-input { flex: 1; min-width: 0; }
.livechat .lc-guest-current { margin: 0; }
.livechat .lc-time, .livechat .lc-edited { font-size: .75em; color: var(--lc-muted); }
.livechat .lc-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.livechat a.lc-link, .livechat a.lc-link:hover { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.livechat .lc-prefix { font-weight: 600; white-space: nowrap; }
.livechat .lc-reply { font-size: .8em; color: var(--lc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.livechat .lc-reply::before { content: "\21AA  "; }
.livechat .lc-reply-name { font-weight: 600; }
.livechat .lc-preview-link { display: inline-block; margin-top: .3rem; }
.livechat .lc-preview { display: block; max-width: min(100%, 320px); max-height: 220px; border-radius: .3rem; }
.livechat .lc-online {
    padding: .35rem .75rem;
    font-size: .8em;
    color: var(--lc-muted);
    border-bottom: 1px solid var(--lc-soft);
}
.livechat .lc-online-label { font-weight: 600; cursor: pointer; }
.livechat .lc-online-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .3rem .75rem;
    margin: .45rem 0 .2rem;
    padding: 0;
    list-style: none;
    max-height: 9.5rem;
    overflow-y: auto;
}
.livechat .lc-online-player { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.livechat .lc-online-head { width: 16px; height: 16px; flex: none; border-radius: 2px; image-rendering: pixelated; }
.livechat .lc-online-name { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.livechat .lc-actions {
    display: flex;
    gap: .25rem;
    align-items: center;
    opacity: 0;
    transition: opacity .12s;
}
.livechat .lc-msg:hover .lc-actions,
.livechat .lc-msg:focus-within .lc-actions { opacity: 1; }
@media (hover: none) { .livechat .lc-actions { opacity: 1; } }
.livechat .lc-action {
    font: inherit;
    font-size: .75em;
    color: inherit;
    background: transparent;
    border: 1px solid var(--lc-line);
    border-radius: .25rem;
    padding: .1rem .45rem;
    cursor: pointer;
}
.livechat .lc-action:hover { background: var(--lc-soft); }
.livechat .lc-action.lc-confirm { border-color: #c0392b; color: #e74c3c; }
.livechat .lc-mute { display: inline-flex; gap: .25rem; }
.livechat .lc-mute-length { font-size: .75em; color: inherit; background: transparent; border: 1px solid var(--lc-line); border-radius: .25rem; }
.livechat .lc-mute-length option { color: #222; }
.livechat .lc-edit { display: flex; gap: .3rem; margin-top: .2rem; }
.livechat .lc-edit-input { flex: 1; min-width: 0; font: inherit; color: inherit; background: transparent; border: 1px solid var(--lc-line); border-radius: .25rem; padding: .15rem .4rem; }
.livechat .lc-jump {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4.5rem;
    font-size: .8em;
    border-radius: 999px;
    padding: .25rem .8rem;
    border: 1px solid var(--lc-line);
    background: var(--lc-soft);
    backdrop-filter: blur(6px);
    color: inherit;
    cursor: pointer;
}
.livechat .lc-form { display: flex; gap: .5rem; align-items: center; }
.livechat .lc-input { flex: 1; min-width: 0; }
.livechat .lc-counter { font-size: .75em; color: var(--lc-muted); font-variant-numeric: tabular-nums; min-width: 2.5em; text-align: right; }
.livechat .lc-counter-low { color: #e67e22; }
.livechat .lc-notice, .livechat .lc-error { font-size: .875em; margin: 0; }
.livechat .lc-error { color: #e74c3c; }
.livechat .lc-signin { margin: 0; color: var(--lc-muted); }
@media (prefers-reduced-motion: reduce) { .livechat .lc-actions { transition: none; } }