/*
 * Help-chat — backend list view styling.
 *
 * Renders each tl_help_chat_message row as a chat transcript bubble
 * via HelpChatMessageLabelListener. Visitor turns sit on the left
 * (cool blue), AI assistant turns on the right (warm green), and
 * human-operator replies use a warm orange so it's instantly clear
 * which turns came from a real person vs. the model. Header line
 * shows role + timestamp + optional feedback flag; the message body
 * sits below in normal reading width.
 */

.stratum-help-chat-msg {
    display: block;
    padding: 10px 14px;
    margin: 0 0 6px;
    border-radius: 8px;
    background: var(--panel-bg, #fff);
    border-left: 4px solid var(--border, #d4d4d4);
    line-height: 1.45;
    max-width: 72ch;
}

.stratum-help-chat-msg--visitor {
    border-left-color: #2e6ebf;
    background: #f3f7fc;
    margin-right: auto;
}

.stratum-help-chat-msg--assistant {
    border-left-color: #16a34a;
    background: #f1faf3;
    margin-left: auto;
}

.stratum-help-chat-msg--operator {
    border-left-color: #f47c00;
    background: #fff4e6;
    margin-left: auto;
    margin-right: 0;
}

.stratum-help-chat-msg--system,
.stratum-help-chat-msg--tool,
.stratum-help-chat-msg--unknown {
    border-left-color: #888;
    background: #fafafa;
    font-style: italic;
    opacity: 0.85;
}

html[data-color-scheme="dark"] .stratum-help-chat-msg--visitor {
    background: #1c2c47;
}

html[data-color-scheme="dark"] .stratum-help-chat-msg--assistant {
    background: #16321f;
}

html[data-color-scheme="dark"] .stratum-help-chat-msg--operator {
    background: #3a210f;
}

html[data-color-scheme="dark"] .stratum-help-chat-msg--system,
html[data-color-scheme="dark"] .stratum-help-chat-msg--tool,
html[data-color-scheme="dark"] .stratum-help-chat-msg--unknown {
    background: #232323;
}

.stratum-help-chat-msg__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--gray, #6b7280);
}

.stratum-help-chat-role {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text, #111827);
}

.stratum-help-chat-msg--visitor .stratum-help-chat-role {
    color: #2e6ebf;
}

.stratum-help-chat-msg--assistant .stratum-help-chat-role {
    color: #16a34a;
}

.stratum-help-chat-msg--operator .stratum-help-chat-role {
    color: #f47c00;
}

.stratum-help-chat-time {
    font-variant-numeric: tabular-nums;
}

.stratum-help-chat-feedback {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
}

.stratum-help-chat-feedback.feedback-helpful {
    background: #d6f3df;
    color: #15803d;
}

.stratum-help-chat-feedback.feedback-not-helpful {
    background: #fde2e2;
    color: #b91c1c;
}

.stratum-help-chat-msg__body {
    color: var(--text, #111827);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.stratum-help-chat-empty {
    color: var(--gray, #888);
}