/* In-game 1:1 chat overlay (#490) */

/* The chat is a sheet, not a content-sized card: it takes the height the
   backdrop offers, the message list absorbs whatever is left over, and the
   input row therefore always ends up at the very bottom — no empty area
   underneath it (#541). */

/* The backdrop measures in `dvh` — see `.overlay-backdrop` in overlay.css. That
   matters most here, because the chat is the one overlay that fills its backdrop
   instead of sitting in the middle of it, so any surplus height goes straight
   into the input row leaving the screen (#541). */

/* `.card` is only here for specificity: chat.css is loaded before overlay.css,
   so a single class would lose to `.overlay` on max-height and overflow. */
.card.chat-overlay-card {
    flex: 1 1 auto;
    /* No cap on a phone: the sheet fills the backdrop exactly, so there is no
       free space for the auto margins to centre it with and nothing can end up
       past the bottom edge. */
    max-height: none;
    display: flex;
    flex-direction: column;
    /* The body scrolls internally, so the card itself must not. */
    overflow: hidden;
}

/* On a desktop screen a full-height column would be absurdly tall. */
@media (min-width: 768px) {
    .card.chat-overlay-card {
        max-height: 760px;
    }
}

.chat-overlay-card .card-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-overlay {
    display: flex;
    flex-direction: column;
    width: min(92vw, 480px);
    max-width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: -1rem;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    /* Without this a flex item refuses to shrink below its content height. */
    min-height: 0;
    overflow-y: auto;
    padding: 1rem 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
}

.chat-message {
    display: flex;
}

.chat-message--mine {
    justify-content: flex-end;
}

.chat-message--theirs {
    justify-content: flex-start;
}

.chat-bubble {
    position: relative;
    max-width: 78%;
    padding: 8px 12px;
    border-radius: 14px;
    background: #2a2d31;
    color: #e9ecef;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    word-break: break-word;
}

.chat-message--mine .chat-bubble {
    background: var(--bs-info-bg-subtle, #d1ecf1);
    color: #05323b;
    /* A fully rounded corner would leave a gap next to the tail below. */
    border-bottom-right-radius: 4px;
}

/* Little tail at the bottom corner of every bubble — bottom right for own
   messages, bottom left for the partner's. `background: inherit` takes the
   bubble's own colour, so the tail never drifts from it. */
.chat-bubble::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 10px;
    height: 12px;
    background: inherit;
}

.chat-message--mine .chat-bubble::after {
    right: -8px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.chat-message--theirs .chat-bubble {
    border-bottom-left-radius: 4px;
}

.chat-message--theirs .chat-bubble::after {
    left: -8px;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.chat-message-image {
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    display: block;
    cursor: pointer;
}

/* Full-screen lightbox for tapping a chat image (mirrors the forum/wiki overlay). */
.chat-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: pointer;
}

.chat-image-overlay img {
    max-width: 92vw;
    max-height: 88vh;
    max-height: 88dvh;
    object-fit: contain;
    border-radius: 6px;
}

.chat-message-text + .chat-message-image,
.chat-message-image + .chat-message-text {
    margin-top: 6px;
}

/* --- read receipts --- */

/* One tick as soon as the server stored the message, two overlapping ticks
   once the partner opened the conversation. Only own bubbles carry them.
   Font Awesome 4 has no fa-check-double, so the second tick is a second
   fa-check pulled onto the first. */
.chat-ticks {
    display: inline-block;
    margin-right: 3px;
    white-space: nowrap;
    font-size: 0.65rem;
    line-height: 1;
    opacity: 0.5;
}

/* Inside a bubble the receipt sits on its own line under the message, right
   aligned; in the chat-list preview it stays inline in front of the text. */
.chat-bubble .chat-ticks {
    display: block;
    margin: 2px 0 0;
    text-align: right;
}

.chat-ticks--read {
    opacity: 1;
    color: var(--bs-info-text-emphasis, #055160);
}

.chat-ticks i + i {
    margin-left: -4px;
}

/* The message field is one line tall at rest and grows to exactly three lines
   while it has focus, so a longer message stays readable without the sheet
   having to guess at the content height. Heights are spelled out from
   Bootstrap's form-control box (line-height 1.5 + 0.375rem padding top and
   bottom + 1px border each side) so "three lines" is exact rather than
   approximate — `rows` cannot be animated. */
.chat-text-input {
    resize: none;
    line-height: 1.5;
    height: calc(1.5em + 0.75rem + 2px);
    transition: height 0.18s ease;
}

.chat-input-row--typing .chat-text-input {
    height: calc(4.5em + 0.75rem + 2px);
}

/* The conversation selector lives in the overlay card header (next to "Chat"
   and the close button). It must never wrap that row onto a second line, so it
   shrinks and ellipsises instead. */
.chat-conversation-select {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

/* "Chat" itself never gives up width — only the selector next to it shrinks. */
.chat-overlay-card .overlay-header__title {
    flex: 0 0 auto;
}

.chat-image-preview {
    margin-top: 6px;
}

.chat-image-preview img {
    max-height: 80px;
    border-radius: 6px;
}


/* --- voice messages (#541) --- */
.chat-message-audio {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-message-audio audio {
    height: 32px;
    max-width: 220px;
}

.chat-audio-duration {
    font-size: 0.8rem;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.chat-recording {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.chat-recording__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bs-danger, #dc3545);
    animation: chat-recording-pulse 1s ease-in-out infinite;
}

.chat-recording__time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.chat-recording__send {
    margin-left: auto;
}

@keyframes chat-recording-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.25;
    }
}

/* While the text field has focus the attachment buttons fold away, so the
   message field gets the full width of the row (#541). Width and padding are
   animated rather than toggling `display`, otherwise the row jumps. */
.chat-attach-btn {
    flex: 0 0 auto;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.18s ease, padding 0.18s ease, opacity 0.18s ease, margin 0.18s ease;
    max-width: 4rem;
}

.chat-input-row--typing .chat-attach-btn {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    opacity: 0;
    /* Cancels the flex gap the collapsed button would still occupy. */
    margin-left: -0.5rem;
    pointer-events: none;
}