/* Chat page - every rule here replaces what used to be an inline Style= attribute
   (see project memory: this file was flagged for that cleanup). Purely visual; the
   SignalR connection/message-send logic in Chat.razor's @code block is untouched -
   this M3 pass is CSS-values-only, same discipline as the original inline-style cleanup. */

.chat-panel {
    height: 65vh;
    min-height: 420px;
    display: flex;
    overflow: hidden;
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--m3-shape-lg);
    box-shadow: var(--sa-shadow);
}

.chat-conversation-list {
    width: 320px;
    border-right: 1px solid var(--sa-line);
    overflow-y: auto;
    flex-shrink: 0;
    background: transparent;
}

.chat-conversation-list__preview {
    max-width: 180px;
    display: block;
}

.chat-thread-pane {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.chat-back {
    display: none;
    width: 40px;
    height: 40px;
    flex: none;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: var(--sa-surface-2);
    color: var(--sa-ink);
    cursor: pointer;
}

.chat-thread-pane__empty {
    flex-grow: 1;
}

.chat-thread-header {
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.chat-thread-header__image {
    width: 56px;
    height: 56px;
    border-radius: var(--m3-shape-md);
    flex-shrink: 0;
}

.chat-thread-header__image--placeholder {
    background: var(--mud-palette-background-grey);
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-bubble-row {
    justify-content: flex-start;
}

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

.chat-bubble-row {
    margin-bottom: 10px;
}

/* The previous fix here (a plain border + var(--mud-palette-surface) background) still
   didn't work - checked live and .chat-panel's own background computes to the EXACT SAME
   rgb() value as --mud-palette-surface, so a received bubble was launched with zero
   contrast against the panel behind it; the border alone (--mud-palette-lines-default, a
   ~12%-opacity hairline meant for subtle dividers, not message separation) was nowhere
   near enough on its own. --m3-surface-tint-2 is a real, visible step off the surface color
   (a 6% primary-color mix, already used for exactly this "distinguish from the surface
   it's on" job elsewhere in this app, e.g. admin-tables.css's table header band) rather
   than reusing the surface color itself. */
.chat-bubble {
    max-width: 70%;
    /* --m3-surface-tint-2 (a 6% primary-color mix, the system-wide subtle-surface token)
       was tried first and was still too close to call a fix - this complaint came up
       twice. A dedicated, deliberately stronger 18% mix here (chat bubbles are the one
       place in the app whose entire job is "be visually distinct from the background",
       unlike a table header band's more subtle needs) is worth a one-off value rather than
       reusing the shared token. Mixed toward SECONDARY, not primary - .chat-bubble--mine
       below already owns the primary tint (--m3-primary-container), so a received bubble
       tinted toward the same hue would read as "barely different from mine" instead of
       "clearly different from the empty panel behind it". Two distinct hues (secondary vs
       primary) keeps both distinctions - mine-vs-theirs, and message-vs-empty-panel -
       working at the same time instead of trading one off against the other. */
    background: color-mix(in srgb, var(--mud-palette-surface) 82%, var(--mud-palette-secondary) 18%);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--m3-shape-lg);
    box-shadow: var(--m3-elevation-1);
}

.chat-bubble--mine {
    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
}

.chat-bubble__time {
    opacity: 0.75;
}

.chat-composer {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Phones and small tablets: one pane at a time (the list, or the open conversation). */
@media (max-width: 800px) {
    .chat-panel {
        height: calc(100dvh - var(--sa-header-h) - var(--sa-tabbar-h) - 120px);
        min-height: 380px;
    }

    .chat-conversation-list {
        width: 100%;
        border-right: 0;
    }

    .chat-conversation-list__preview {
        max-width: 60vw;
    }

    .chat-panel .chat-thread-pane {
        display: none;
    }

    .chat-panel--thread .chat-conversation-list {
        display: none;
    }

    .chat-panel--thread .chat-thread-pane {
        display: flex;
        width: 100%;
    }

    .chat-back {
        display: grid;
    }

    .chat-thread-header {
        flex-wrap: wrap;
    }

    .chat-bubble {
        max-width: 85%;
    }
}