/* Spec 204: the messages page and the conversation view (also in the club page's side panel). Square pieces,
   as the rest of the tabletop look; own messages stand on the right. */

.msg-page .game-card-btn,
.club-chat-panel .game-card-btn {
    width: auto;
    margin: 0;
    padding: 0.55rem 1rem;
}

.msg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

/* Below 1024 px the list and the conversation take turns. */
.msg-page.is-thread .msg-list-card,
.msg-page.is-list .msg-main {
    display: none;
}

@media (min-width: 1024px) {
    .msg-layout {
        grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
        align-items: start;
    }

    .msg-page.is-thread .msg-list-card,
    .msg-page.is-list .msg-main {
        display: block;
    }

    .msg-back {
        display: none;
    }
}

.msg-conversations {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msg-item {
    display: grid;
    gap: 2px;
    padding: 10px 8px;
    border-top: 1px solid var(--tt-line);
    color: var(--tt-ink);
    text-decoration: none;
    min-width: 0;
}

.msg-conversations li:last-child .msg-item {
    border-bottom: 1px solid var(--tt-line);
}

.msg-item:hover {
    box-shadow: inset 0 0 0 1px var(--ui-accent);
}

.msg-item.is-active {
    background: var(--ui-accent-soft);
    box-shadow: inset 0 0 0 2px var(--ui-accent);
}

.msg-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.msg-item-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.msg-item.is-unread .msg-item-title {
    font-weight: 800;
}

.msg-item-time {
    flex: 0 0 auto;
    color: var(--tt-muted);
    font-size: 0.82rem;
}

.msg-item-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tt-muted);
    font-size: 0.9rem;
}

.msg-unread-mark,
.club-chat-unread {
    margin-right: 6px;
    padding: 0 5px;
    background: var(--tt-accent);
    color: var(--tt-on-accent);
    font-size: 0.72rem;
    font-weight: 700;
}

.club-chat-unread {
    margin: 0 0 0 6px;
}

.msg-empty,
.msg-pick,
.msg-missing {
    margin: 0;
    color: var(--tt-muted);
}

.msg-back {
    margin-bottom: 10px;
}

/* The conversation. */
.msg-thread {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.msg-thread-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
}

.msg-thread-head h3 {
    margin: 0;
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.msg-block {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.85rem;
}

.msg-list {
    display: grid;
    align-content: start;
    gap: 8px;
    /* Spec 257 rule 1: a fixed most, scrolling inside; dvh so a phone's address bar does not push the box down. */
    max-height: min(60vh, 560px);
    max-height: min(60dvh, 560px);
    overflow-y: auto;
    padding: 4px 2px;
    min-width: 0;
}

.msg-thread.is-compact .msg-list {
    max-height: none;
    min-height: 0;
}

/* The owner's rule (messages.js fit): the conversation ends at the screen's bottom, the box and Send last in it, the
   messages scrolling inside whatever the page around it is. */
.msg-thread.is-fitted {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.msg-thread.is-fitted > * {
    flex: 0 0 auto;
}

.msg-thread.is-fitted > .msg-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.msg-earlier {
    justify-self: center;
}

.msg-day {
    margin: 8px 0 0;
    color: var(--tt-muted);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.msg {
    justify-self: start;
    max-width: min(86%, 560px);
    padding: 7px 10px;
    border: 1px solid var(--tt-line);
    background: var(--tt-field);
    min-width: 0;
}

.msg.is-own {
    justify-self: end;
    border-color: var(--tt-accent);
    background: var(--tt-accent-soft);
}

.msg-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0 0 2px;
    color: var(--tt-muted);
    font-size: 0.78rem;
}

.msg-sender {
    color: var(--tt-ink);
    font-weight: 700;
}

/* Spec 224: the sender's photo or initials, a small token next to the name. */
.msg-sender-token {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-self: center;
    border-width: 1px;
    font-size: 0.6rem;
}

/* Spec 212: a quiet button - no frame until hover, never underlined. */
.msg-delete {
    min-height: 24px;
    padding: 2px 6px;
    border: 1px solid transparent;
    background: none;
    color: var(--tt-muted);
    font: inherit;
    cursor: pointer;
}

.msg-delete:hover {
    color: var(--tt-danger);
    border-color: var(--tt-danger);
}

.msg-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Spec 279 rule 11: a reservation notice's way to its meeting, on its own line under the text (the button family's
   margin: 0 would set it against the text). */
.msg-list .msg-link {
    display: inline-flex;
    width: auto;
    margin: 10px 0 2px;
}

.msg-compose {
    position: relative;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    scroll-margin-bottom: 16px;
}

/* Spec 257 rule 3: from 769 px the BGG badge floats at the bottom; the page ends and the composer stops clear of it. */
@media (min-width: 769px) {
    .msg-page {
        padding-bottom: 72px;
    }

    .msg-page .msg-compose {
        scroll-margin-bottom: 72px;
    }
}

/* Spec 257 rules 4-5: the count from 800 characters; past the limit the danger colour and why. */
.msg-count {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 10px;
    margin: 0;
    color: var(--tt-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.msg-count.is-over {
    color: var(--tt-danger);
    font-weight: 700;
}

/* Spec 257 rules 7-8: the emoji button, a square secondary piece, and its panel above the composer. */
.msg-compose .msg-emoji-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    padding: 0;
}

.msg-emoji-btn svg {
    display: block;
}

/* Spec 257 rule 7: on the narrowest phones the box takes the whole row; the emoji button and Send go under it.
   Spec 315 rule 9: the input rule carries the form, or the later base .msg-input rule wins. */
@media (max-width: 400px) {
    .msg-compose {
        flex-wrap: wrap;
    }

    .msg-compose .msg-input {
        flex-basis: 100%;
    }

    .msg-compose .msg-send {
        margin-left: auto;
    }
}

.msg-emoji-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: transparent;
}

.msg-emoji-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 31;
    display: grid;
    /* A group of 8 in one row, or two rows of 4 on a narrow phone - never 7 and a lone one. */
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 2px;
    width: min(340px, 100%);
    max-height: min(280px, 45vh);
    overflow-y: auto;
    padding: 8px;
    background: var(--tt-surface);
    border: 1px solid var(--tt-line);
    box-shadow: 0 4px 0 var(--tt-edge);
    color: var(--tt-ink);
}

@media (max-width: 420px) {
    .msg-emoji-panel {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.msg-emoji-panel[hidden] {
    display: none;
}

.msg-emoji-panel:focus {
    outline: none;
}

.msg-emoji-group {
    grid-column: 1 / -1;
    margin: 4px 2px 0;
    color: var(--tt-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.msg-emoji-group:first-child {
    margin-top: 0;
}

.msg-emoji-pick {
    display: grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.msg-emoji-pick:hover {
    border-color: var(--ui-accent);
}

/* Spec 315 rule 9: from a zero base, so the box gives way to the buttons instead of pushing Send to a row of its own. */
.msg-input {
    flex: 1 1 0;
    min-width: 0;
    resize: vertical;
}

.msg-send {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 16px;
    white-space: nowrap;
}

.msg-closed {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.msg-closed p {
    margin: 0;
}

.msg-keep {
    margin: 0;
    color: var(--tt-muted);
    font-size: 0.8rem;
}

/* The club page's chat: a side panel on wide screens, a sheet on phones. */
.club-chat-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: flex;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.45);
}

.club-chat-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    width: min(440px, 100%);
    height: 100%;
    padding: 14px 16px;
    background: var(--tt-surface);
    border-left: 1px solid var(--tt-line);
    overflow: hidden;
}

.club-chat-panel .msg-thread {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto;
    min-height: 0;
    height: 100%;
}

.club-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.club-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.club-person-write {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .club-chat-backdrop {
        align-items: flex-end;
    }

    .club-chat-panel {
        width: 100%;
        height: 88vh;
        border-left: 0;
        border-top: 1px solid var(--tt-line);
    }
}

/* Spec 222: the people of a conversation - one row each, the role mark and the remove button at the end; then the
   confirmation and the people to add. */
.msg-thread-head .msg-people {
    margin-left: auto;
}

/* Every row as tall as the tallest, so a row without "Remove" (the viewer's own) does not sit lower. */
.conversation-people-list {
    display: grid;
    grid-auto-rows: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
}

.conversation-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--tt-line);
}

.conversation-person-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.conversation-people .game-card-btn {
    width: auto;
    margin: 0;
    padding: 0.45rem 0.9rem;
}

.conversation-people-confirm,
.conversation-people-add {
    margin-top: 14px;
    padding: 12px;
    background: var(--tt-field);
    border: 1px solid var(--tt-line);
}

.conversation-people-confirm p {
    margin: 0 0 10px;
}

.conversation-people-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.conversation-people-add h4 {
    margin: 0 0 6px;
}

.conversation-people-add-btn {
    margin-top: 10px !important;
}

/* Spec 226: "New conversation" on top of the list, and its dialog of friends and groups, one button per row. */
.msg-page .msg-new {
    display: block;
    width: 100%;
    margin-bottom: 12px;
}

.new-conversation-search {
    width: 100%;
    margin-bottom: 10px;
}

.new-conversation-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.new-conversation-pick {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 6px;
    border: 0;
    border-top: 1px solid var(--tt-line);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.new-conversation-list form {
    margin: 0;
}

.new-conversation-pick:hover,
.new-conversation-pick:focus-visible {
    background: var(--tt-field);
}

.new-conversation-missing p {
    margin: 0 0 10px;
}

.new-conversation .game-card-btn {
    width: auto;
    margin: 0;
}

/* Spec 259 rule 18: a club chat in the list carries the club's logo before its name. */
.msg-item-logo {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    object-fit: cover;
    align-self: center;
    border: 1px solid var(--tt-line);
}

/* Spec 264 rule 1: the picture button, the emoji button's twin; its file input is clipped but keeps the focus. */
.msg-compose .msg-pic-btn {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.msg-pic-btn svg {
    display: block;
}

.msg-pic-input:focus-visible + .msg-pic-btn {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

.msg-pic-input:disabled + .msg-pic-btn {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Spec 264 rule 2: the pictures waiting for Send, small squares with a remove button in the corner. */
.msg-pic-previews {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding-top: 10px;
}

.msg-pic-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msg-pic-preview {
    position: relative;
    width: 64px;
    height: 64px;
    border: 1px solid var(--tt-line);
    background: var(--tt-field);
}

.msg-pic-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-pic-remove {
    position: absolute;
    top: -10px;
    right: -10px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--tt-line);
    background: var(--tt-surface);
    color: var(--tt-ink);
    cursor: pointer;
}

.msg-pic-remove:hover {
    border-color: var(--tt-danger);
    color: var(--tt-danger);
}

.msg-pic-busy {
    margin: 0;
}

/* Spec 264 rule 15: thumbnails in the bubble - one at its own ratio, several as squares in two columns. */
.msg-pics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 120px));
    gap: 4px;
    margin: 2px 0 4px;
}

.msg-pics.is-single {
    grid-template-columns: minmax(0, 240px);
}

.msg-pic {
    display: block;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--tt-line);
    background: var(--tt-surface);
    cursor: zoom-in;
}

.msg-pic img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}

.msg-pics.is-single .msg-pic img {
    aspect-ratio: auto;
    max-height: 320px;
    object-fit: contain;
}

/* Spec 264 rule 16: the viewer - the picture as large as the screen allows. */
.msg-viewer.planner-modal {
    width: min(960px, calc(100vw - 32px));
    max-width: none;
}

.msg-viewer-body {
    display: grid;
    place-items: center;
}

.msg-viewer-img {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    max-height: 70dvh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.msg-viewer-nav {
    justify-content: space-between;
}