/* The Support chat page's message log + composer - a simpler, standalone bubble treatment
   from the dealer-to-dealer Chat page's, since this is a different feature (AI account
   support, not a negotiation thread) and shouldn't visually read as the same conversation
   type. Built on the M3 token layer (tokens.css) like every other page in this app. */

.support-chat-panel {
    display: flex;
    flex-direction: column;
    height: min(70vh, 640px);
    border-radius: var(--m3-shape-lg);
    box-shadow: var(--m3-shadow-card);
    overflow: hidden;
}

.support-chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-chat-empty {
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.7;
    max-width: 360px;
}

.support-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: var(--m3-shape-md);
    white-space: pre-wrap;
    word-break: break-word;
}

.support-chat-bubble--user {
    align-self: flex-end;
    background: var(--m3-primary);
    color: var(--m3-on-primary);
    border-bottom-right-radius: var(--m3-shape-xs);
}

.support-chat-bubble--assistant {
    align-self: flex-start;
    background: var(--m3-tertiary-container);
    color: var(--m3-on-tertiary-container);
    border-bottom-left-radius: var(--m3-shape-xs);
}

.support-chat-bubble--typing {
    display: flex;
    align-items: center;
    padding: 12px 16px;
}

.support-chat-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--m3-primary-container);
}

.support-chat-input {
    flex: 1 1 auto;
}