/* League chat - the panel Chat in the sidebar opens; see
   app/helpers/league_chat_helpers.php and assets/js/league-chat.js. The m-site
   Chat tab is this panel standing as the page; mobile.css places it there.

   It stands against the sidebar's right edge for the full height of the window.
   On a screen 1280px or wider the page makes way for it: the score strip, the
   page and everything measured from the content's edge move right by its width
   (--chat-push, in main.css). Narrower, it covers them. It sits one layer under
   the sidebar (40), so it slides out from behind it when it opens and back
   behind it to close. Its width is --chat-panel-width, one number for the panel
   and for the room made for it. */
.chatPanel {
    background: var(--c-s1);
    bottom: var(--db-edge-gap);
    box-shadow: 10px 0 30px rgba(17, 31, 51, .22);
    box-sizing: border-box;
    color: var(--c1);
    display: flex;
    flex-direction: column;
    font-family: var(--ff1);
    left: calc(var(--db-edge-gap) + var(--sb-width) + var(--db-sidebar-gap));
    position: fixed;
    top: var(--db-edge-gap);
    transform: translateX(-100%);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), width 200ms ease;
    width: min(var(--chat-panel-width), calc(100vw - var(--sb-width) - 24px));
    z-index: 38;
}

.chatPanel[hidden] {
    display: none;
}

.chatPanel.is-open {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .chatPanel {
        transition: none;
    }
}

/* --- Header: "Chat", the forum's season, and close ------------------------ */
.chatPanelHeader {
    align-items: center;
    background: var(--c1);
    color: var(--c-s1);
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 12px 10px 12px 16px;
}

.chatPanelTitleGroup {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.chatPanelTitle {
    font-family: var(--ff1);
    font-size: var(--fs-big2);
    font-weight: var(--fw3);
    line-height: 1.2;
    margin: 0;
}

.chatPanelHeaderButton {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--r2);
    color: rgba(255, 255, 255, .7);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--fs-body);
    height: 32px;
    justify-content: center;
    width: 32px;
}

/* Pin, beside the close: its glyph over a word, so the control says what it is
   without being pressed. Taller than the round header buttons and so sized to
   its contents rather than to their square. */
.chatPanelPinButton {
    flex-direction: column;
    gap: 1px;
    height: auto;
    line-height: 1;
    padding: 4px 6px;
    width: auto;
}

.chatPanelHeaderButtonLabel {
    font-family: var(--ff1);
    font-size: var(--fs-small3);
    letter-spacing: var(--ls1);
    line-height: 1;
}

/* Pinned: the pin is driven home - filled in, in the site's blue, and tilted
   upright against the glyph's resting lean. */
.chatPanelPinButton[aria-pressed="true"] {
    background: rgba(255, 255, 255, .12);
    color: var(--c2);
}

.chatPanelPinButton[aria-pressed="true"] > i {
    transform: rotate(-45deg);
}

.chatPanelPinButton > i {
    transition: transform 120ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .chatPanelPinButton > i {
        transition: none;
    }
}

.chatPanelHeaderButton:hover,
.chatPanelHeaderButton:focus-visible,
.chatPanelHeaderButton[aria-expanded="true"] {
    background: rgba(255, 255, 255, .1);
    color: var(--c-s1);
}

/* The League Discussion tab is for longer posts and for a list of topics, each
   with its title and a line about it, so the panel widens there and reads less
   like a column of text - --chat-panel-width is redefined for it in main.css,
   so the room the page makes widens with it. */

/* Beside the page, a click on the page no longer closes the panel, so Pin -
   which only ever decided that - has nothing to do. Narrower screens, where the
   panel covers the page, keep it. */
@media (min-width: 1280px) {
    .chatPanelPinButton {
        display: none;
    }
}

/* The season the League Discussion tab holds, beside "Chat" on that tab. */
.chatPanelSeason {
    color: rgba(255, 255, 255, .6);
    font-size: var(--fs-small1);
    padding: 4px 7px;
    white-space: nowrap;
}

.chatPanelSeason[hidden] {
    display: none;
}

/* --- The two tabs ---------------------------------------------------------
   Weekly and League Discussion, under the header on its dark ground, each with
   a count of what is unread in it. The tab on show is underlined in the site's
   blue. */
.chatTabs {
    background: var(--c1);
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 0 10px;
}

.chatTabButton {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    gap: 6px;
    padding: 6px 6px 8px;
    transition: color 120ms linear, border-color 120ms linear;
}

.chatTabButton:hover,
.chatTabButton:focus-visible {
    color: var(--c-s1);
    outline: none;
}

.chatTabButton.is-active {
    border-bottom-color: var(--c2);
    color: var(--c-s1);
    font-weight: var(--fw2);
}

.chatTabWeek {
    white-space: nowrap;
}

/* The weekly tab opens the list of weeks, so it carries a caret that turns over
   while the list is open. The gap before it is the tab's own. */
.chatTabWeekCaret {
    font-size: var(--fs-small3);
    margin-left: -2px;
    transition: transform 160ms ease;
}

.chatTabButton[aria-expanded="true"] .chatTabWeekCaret {
    transform: rotate(180deg);
}

.chatTabCount {
    background: var(--c-red);
    border-radius: 999px;
    color: var(--c-s1);
    font-size: var(--fs-small3);
    font-weight: var(--fw3);
    line-height: 1.5;
    min-width: 18px;
    padding: 0 5px;
    text-align: center;
}

.chatTabCount[hidden] {
    display: none;
}

/* --- The weeks ------------------------------------------------------------
   A list under the tabs of every week so far, newest first, each with how many
   messages it holds, opened from the weekly tab. Choosing an earlier one shows
   that week read-only. league-chat.js sets its top to the bottom of the tab
   row as it opens; the value here only stands in until then. */
.chatWeeksMenu {
    background: var(--c-s1);
    border-bottom: 1px solid rgba(23, 33, 54, .12);
    box-shadow: 0 10px 22px rgba(17, 31, 51, .14);
    display: flex;
    flex-direction: column;
    left: 0;
    max-height: 50%;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: 56px;
    z-index: 3;
}

.chatWeeksMenu[hidden] {
    display: none;
}

.chatWeekOption {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--r2);
    color: var(--c1);
    cursor: pointer;
    display: flex;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    gap: 10px;
    justify-content: space-between;
    padding: 9px 10px;
    text-align: left;
}

.chatWeekOption:hover,
.chatWeekOption:focus-visible {
    background: var(--c-s2);
}

.chatWeekOption.is-selected {
    font-weight: var(--fw2);
}

.chatWeekOptionCount {
    color: var(--c-text-muted);
    font-size: var(--fs-small3);
    white-space: nowrap;
}

/* --- An earlier week, read-only ------------------------------------------ */
.chatReadOnlyBanner {
    align-items: center;
    background: var(--c-s2);
    border-bottom: 1px solid rgba(23, 33, 54, .1);
    display: flex;
    flex: 0 0 auto;
    font-size: var(--fs-small1);
    gap: 10px;
    justify-content: space-between;
    padding: 9px 16px;
}

.chatReadOnlyBanner[hidden] {
    display: none;
}

.chatReadOnlyText {
    color: var(--c-text-muted);
}

.chatBackButton {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    color: var(--c1);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

/* --- The stream ----------------------------------------------------------- */
.chatStream {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 16px;
}

.chatEmpty,
.chatLoading {
    color: var(--c-text-muted);
    font-size: var(--fs-small1);
    margin: auto 0;
    padding: 24px 12px;
    text-align: center;
}

/* A day's first message is headed by the day, on a hairline. */
.chatDay {
    align-items: center;
    color: var(--c-text-muted);
    display: flex;
    font-size: var(--fs-small3);
    gap: 10px;
    margin: 14px 0 6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.chatDay:first-child {
    margin-top: 0;
}

.chatDay::before,
.chatDay::after {
    background: rgba(23, 33, 54, .12);
    content: "";
    flex: 1 1 auto;
    height: 1px;
}

/* A message: the author's avatar beside their name, the time, and the message.
   A run of messages from one person within a few minutes reads as one - site.js
   marks the follow-ons .chatMessage--continued, which keep the avatar's column
   but drop the avatar and the name. */
.chatMessage {
    column-gap: 10px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    margin-top: 12px;
}

.chatMessage--continued {
    margin-top: 3px;
}

.chatMessage--continued .chatAvatar,
.chatMessage--continued .chatMessageMeta {
    display: none;
}

.chatMessage--continued .chatMessageMain {
    grid-column: 2;
}

.chatAvatar {
    align-items: center;
    background: oklch(var(--avatar-lightness) var(--avatar-chroma) var(--avatar-hue, 0));
    border-radius: 50%;
    color: var(--c-s1);
    display: flex;
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    height: 32px;
    justify-content: center;
    overflow: hidden;
    width: 32px;
}

.chatAvatar img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.chatMessageMain {
    min-width: 0;
}

.chatMessageMeta {
    align-items: baseline;
    display: flex;
    gap: 8px;
    line-height: 1.2;
    margin-bottom: 2px;
}

.chatAuthor {
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatTime {
    color: var(--c-text-muted);
    flex: 0 0 auto;
    font-size: var(--fs-small3);
}

.chatBody {
    font-size: var(--fs-body);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* Each line of a message is a paragraph (pcf_league_chat_body_html()), set
   apart from the one before it by a modest gap. */
.chatParagraph {
    margin: 0;
}

.chatParagraph + .chatParagraph {
    margin-top: 0.45em;
}

.chatMention {
    background: rgba(30, 144, 255, .12);
    border-radius: 3px;
    color: var(--c2);
    font-weight: var(--fw2);
    padding: 0 2px;
}

.chatImages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.chatImage {
    display: block;
    line-height: 0;
}

.chatImage img {
    border-radius: var(--r2);
    height: auto;
    max-height: 200px;
    max-width: 100%;
    object-fit: cover;
    width: auto;
}

/* Newer messages arrived while you were scrolled up reading older ones. */
.chatNewMessagesButton {
    appearance: none;
    -webkit-appearance: none;
    align-self: center;
    background: var(--c1);
    border: 0;
    border-radius: 999px;
    bottom: 84px;
    box-shadow: 0 6px 16px rgba(17, 31, 51, .25);
    color: var(--c-s1);
    cursor: pointer;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    left: 50%;
    padding: 7px 14px;
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
}

.chatNewMessagesButton[hidden] {
    display: none;
}

/* --- Composer ------------------------------------------------------------- */
/* --- The league discussion -------------------------------------------------
   The tab's own column: a bar - Topics with New Topic, or the way back to the
   list - over the list of topics, a topic's posts, or the guide to starting
   one. */
.chatDiscussion {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.chatDiscussion[hidden],
.chatStream[hidden] {
    display: none;
}

.chatDiscussionBar {
    align-items: center;
    border-bottom: 1px solid rgba(23, 33, 54, .1);
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: space-between;
    min-height: 44px;
    padding: 6px 12px 6px 16px;
}

.chatDiscussionBar[hidden] {
    display: none;
}

.chatDiscussionHeading {
    color: var(--c-text-muted);
    font-size: var(--fs-small3);
    font-weight: var(--fw2);
    letter-spacing: var(--ls1);
    text-transform: uppercase;
}

.chatDiscussionAction,
.chatDiscussionBack {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--r2);
    color: var(--c1);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    gap: 6px;
    padding: 6px 8px;
}

.chatDiscussionAction {
    font-weight: var(--fw2);
}

.chatDiscussionBack {
    margin-left: -8px;
}

.chatDiscussionAction:hover,
.chatDiscussionAction:focus-visible,
.chatDiscussionBack:hover,
.chatDiscussionBack:focus-visible {
    background: var(--c-s2);
    outline: none;
}

.chatDiscussionBody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chatDiscussionBody > .chatEmpty,
.chatDiscussionBody > .chatLoading,
.chatDiscussionGuide {
    padding: 24px 20px;
}

.chatDiscussionGuide {
    color: var(--c-text-muted);
    font-size: var(--fs-small1);
    line-height: 1.5;
    margin: 0;
}

/* A topic in the list: its title over who started it and how many replies it
   has, with when it was last posted to - and, if anything in it is unread, how
   much - at the right. The whole row opens it. */
.chatTopicList {
    display: flex;
    flex-direction: column;
}

.chatTopicRow {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(23, 33, 54, .08);
    color: var(--c1);
    cursor: pointer;
    display: flex;
    font-family: var(--ff1);
    gap: 12px;
    padding: 11px 16px;
    text-align: left;
    width: 100%;
}

.chatTopicRow:hover,
.chatTopicRow:focus-visible {
    background: var(--c-s2);
    outline: none;
}

.chatTopicRowMain {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.chatTopicTitle {
    font-size: var(--fs-body);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chatTopicRow--unread .chatTopicTitle {
    font-weight: var(--fw2);
}

.chatTopicMeta,
.chatTopicLast {
    color: var(--c-text-muted);
    font-size: var(--fs-small3);
    white-space: nowrap;
}

.chatTopicMeta {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chatTopicSide {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
}

.chatTopicUnread {
    background: var(--c2);
    border-radius: 999px;
    color: var(--c-s1);
    font-size: var(--fs-small3);
    font-weight: var(--fw3);
    line-height: 1.5;
    min-width: 18px;
    padding: 0 5px;
    text-align: center;
}

/* An open topic: its title and who started it, then the posts, each with its
   author, the day and time, and a rule between one post and the next - every
   post stands on its own, not run together the way the weekly stream groups a
   burst of messages. */
.chatTopicHeader {
    border-bottom: 1px solid rgba(23, 33, 54, .1);
    padding: 14px 16px 12px;
}

.chatTopicHeading {
    font-family: var(--ff1);
    font-size: var(--fs-big1);
    font-weight: var(--fw3);
    line-height: 1.3;
    margin: 0;
    overflow-wrap: anywhere;
}

.chatTopicByline {
    color: var(--c-text-muted);
    font-size: var(--fs-small3);
    margin: 3px 0 0;
}

.chatTopicPosts {
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
}

.chatTopicPosts > .chatMessage {
    border-bottom: 1px solid rgba(23, 33, 54, .08);
    margin-top: 0;
    padding: 12px 0;
}

.chatTopicPosts > .chatMessage:last-child {
    border-bottom: 0;
}

/* The new topic's title, over the message box, only while one is being
   written. */
.chatTopicTitleInput {
    background: var(--c-s2);
    border: 1px solid rgba(23, 33, 54, .14);
    border-radius: var(--r3);
    box-sizing: border-box;
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-weight: var(--fw2);
    margin-bottom: 8px;
    padding: 8px 12px;
    width: 100%;
}

.chatTopicTitleInput:focus {
    border-color: var(--c2);
    outline: none;
}

.chatTopicTitleInput[hidden] {
    display: none;
}

/* A discussion post is longer than a chat message, so its box starts taller. */
.chatPanel.is-discussion .chatInput {
    min-height: 64px;
}

.chatComposer {
    border-top: 1px solid rgba(23, 33, 54, .12);
    flex: 0 0 auto;
    padding: 10px 12px 12px;
    position: relative;
}

.chatComposer[hidden] {
    display: none;
}

.chatComposerRow {
    align-items: flex-end;
    display: flex;
    gap: 6px;
}

.chatInput {
    background: var(--c-s2);
    border: 1px solid rgba(23, 33, 54, .14);
    border-radius: var(--r3);
    box-sizing: border-box;
    color: var(--c1);
    flex: 1 1 auto;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    line-height: 1.35;
    max-height: 140px;
    min-height: 38px;
    min-width: 0;
    padding: 8px 12px;
    resize: none;
}

.chatInput:focus {
    border-color: var(--c2);
    outline: none;
}

.chatComposerButton {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--r2);
    color: var(--c-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--fs-big1);
    height: 38px;
    justify-content: center;
    width: 36px;
}

.chatComposerButton:hover,
.chatComposerButton:focus-visible {
    color: var(--c1);
}

.chatSendButton {
    color: var(--c2);
}

.chatComposerButton:disabled {
    cursor: default;
    opacity: .4;
}

/* Images waiting to go with the message, each with a button to take it off. */
.chatAttachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.chatAttachments[hidden] {
    display: none;
}

.chatAttachment {
    border-radius: var(--r2);
    height: 56px;
    overflow: hidden;
    position: relative;
    width: 56px;
}

.chatAttachment img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.chatAttachment.is-uploading img {
    opacity: .4;
}

.chatAttachmentRemove {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    background: rgba(17, 31, 51, .75);
    border: 0;
    border-radius: 50%;
    color: var(--c-s1);
    cursor: pointer;
    display: flex;
    font-size: 10px;
    height: 18px;
    justify-content: center;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 18px;
}

/* The @ list: the league's members and entries matching what follows the @,
   opening above the message box. */
.chatMentionMenu {
    background: var(--c-s1);
    border: 1px solid rgba(23, 33, 54, .14);
    border-radius: var(--r3);
    bottom: calc(100% - 4px);
    box-shadow: 0 -8px 22px rgba(17, 31, 51, .16);
    left: 12px;
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    position: absolute;
    right: 12px;
    z-index: 3;
}

.chatMentionMenu[hidden] {
    display: none;
}

.chatMentionOption {
    align-items: center;
    border-radius: var(--r2);
    cursor: pointer;
    display: flex;
    font-size: var(--fs-small1);
    gap: 8px;
    padding: 7px 9px;
}

.chatMentionOption.is-active {
    background: var(--c-s2);
}

.chatMentionOption i {
    color: var(--c-text-muted);
    width: 14px;
}

.chatComposerError {
    color: var(--c-red);
    font-size: var(--fs-small3);
    margin-top: 6px;
}

.chatComposerError[hidden] {
    display: none;
}