/*
 * The assistants' shared chat UI (@web/components/Chat).
 *
 * Real CSS rather than Box props because none of this is expressible as
 * props: the composer needs :focus-within, ::placeholder and
 * :placeholder-shown, the mention overlay has to match the textarea's box
 * and text metrics exactly or it drifts, and the dark theme switches a set
 * of custom properties rather than individual rules.
 *
 * The values are Operator's, which was the more developed of the two
 * assistants. The help assistant adopts them.
 */
.chat-transcript,
.chat-composer-wrap {
    --chat-bg: white;
    --chat-user-bg: #e5edf8;
    --chat-fg: #1c2127;
    --chat-border: rgba(17, 20, 24, 0.12);
    --chat-subtle: #f6f7f9;
    --chat-danger: #cd4246;

    position: relative;
    width: 100%;
}

.bp5-dark .chat-transcript,
.bp5-dark .chat-composer-wrap {
    --chat-bg: #1c2127;
    --chat-user-bg: #2d3a4d;
    --chat-fg: #f6f7f9;
    --chat-border: rgba(255, 255, 255, 0.14);
    --chat-subtle: #252a31;
    --chat-danger: #fa999c;
}

.chat-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--chat-border);
    border-radius: 14px;
    background: var(--chat-bg);
}

.chat-composer .bp5-input {
    flex: 1;
    min-height: 24px;
    max-height: 240px;
    padding: 4px 2px;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: inherit;
    font-size: 14px;
    resize: none;
    line-height: 1.5;
    overflow-y: auto;
}

/* Wraps the input so picked tokens can be drawn behind it. */
.chat-input {
    position: relative;
    display: flex;
    flex: 1;
    min-width: 0;
}

/* Must match the textarea's box and text metrics exactly, or it drifts. */
.chat-input-highlight {
    position: absolute;
    inset: 0;
    padding: 4px 2px;
    overflow: hidden;
    color: var(--chat-fg);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    pointer-events: none;
}

.chat-input--rich .bp5-input {
    position: relative;
    color: transparent;
    caret-color: var(--chat-fg);
}

/* An empty input stays one line; the placeholder truncates, not wraps. */
.chat-composer .bp5-input:placeholder-shown {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-composer .bp5-input::placeholder {
    text-overflow: ellipsis;
}

/* The pill carries the focus ring, so the field inside it does not. */
.chat-composer .bp5-input:focus {
    box-shadow: none;
}

.chat-composer:focus-within {
    border-color: #2d72d2;
}

.chat-composer .bp5-button.chat-stop {
    flex: none;
    border: 1px solid var(--chat-border);
    background: var(--chat-subtle);
    box-shadow: none;
    color: var(--chat-fg);
}

.chat-composer .bp5-button.chat-stop .bp5-icon {
    color: var(--chat-danger);
}

/*
 * Turns.
 *
 * Only the person's own words are tinted. An assistant's reply is the page,
 * not a speech bubble: it can be long, it can carry markdown, a table or a
 * form, and boxing that makes it read like a chat toy rather than an answer.
 */

.chat-transcript {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chat-message--user {
    align-self: flex-end;
    max-width: 80%;
    padding: 10px 14px;
    /* Square on the sending corner, which is what points it at the sender. */
    border-radius: 16px 16px 4px 16px;
    background: var(--chat-user-bg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.chat-message--assistant {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.chat-message--assistant .markdown-container > *:first-child {
    margin-top: 0;
}

/* A narrow panel has less to give away to the gutter. */
.chat-transcript--narrow .chat-message--user {
    max-width: 90%;
}

.chat-message-footer {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    font-size: 12px;
}