/* ============================================
   CHAT BUBBLES — shared by /chat and the dashboard mini chat

   Extracted from chat.css so the mini chat can draw a message with the same
   rules the page uses, instead of its own `.mcht_msg` box. The --cht-*
   aliases are repeated here because this file is loaded on pages that do
   not load chat.css; the values are the same, so loading both is harmless.
   ============================================ */
:root {
    --cht-bg-hover: var(--chat-row-hover);
    --cht-border: var(--chat-hairline);
    --cht-text-primary: var(--text-primary);
    --cht-text-secondary: var(--text-secondary);
    --cht-text-muted: var(--text-tertiary);
    --cht-accent: var(--chat-accent);
}

/* ============================================
   BUBBLES — one system for DMs, groups and channels

   Values taken from the "Anatomy" artboard of the design canvas. The thread
   previously drew two idioms at once: own messages as right-aligned blue
   bubbles, everyone else's as Discord-style cozy rows with a 40px avatar and
   a name header.
   ============================================ */

.cht_msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 0 16px;
    /* Runs sit 2px apart; a new run gets room to read as a new utterance. */
    margin-top: 2px;
}
.cht_msg.starts { margin-top: 12px; }
.cht_msg.own { flex-direction: row-reverse; }

/* The gutter keeps its width even when empty, or every message in a run
   would sit at a different indent. */
.cht_msg_gutter {
    width: 32px;
    flex-shrink: 0;
}
.cht_msg.own .cht_msg_gutter { display: none; }

.cht_msg_col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: min(62%, 560px);
}
.cht_msg.own .cht_msg_col { align-items: flex-end; }

.cht_avatar {
    width: 32px; height: 32px;
    border-radius: 999px;
    object-fit: cover;
    display: flex; align-items: center; justify-content: center;
    color: var(--chat-on-accent);
    font-size: 13px; font-weight: 700;
}

.cht_msg_who {
    margin: 0 0 2px 12px;
    font-size: 12px; font-weight: 600;
    color: var(--cht-text-secondary);
}

.cht_msg_forwarded {
    display: flex; align-items: center; gap: 4px;
    margin: 0 0 2px 12px;
    font-size: 11px; font-style: italic;
    color: var(--cht-text-muted);
}

.cht_bubble {
    position: relative;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 14px;
    /* D6: weight 400 on web. The phone runs a heavier face; at web rendering
       weights the same value reads as bold. */
    font-weight: 400;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.cht_msg.other .cht_bubble {
    background: var(--chat-bubble-other);
    color: var(--chat-bubble-other-text);
}
.cht_msg.own .cht_bubble {
    background: var(--chat-bubble-own);
    color: var(--chat-bubble-own-text);
}
/* The tail marks the END of a run, so five messages read as one utterance. */
.cht_msg.other .cht_bubble.tail { border-bottom-left-radius: 4px; }
.cht_msg.own .cht_bubble.tail { border-bottom-right-radius: 4px; }

/* In light mode an "other" bubble is white on a near-white canvas, so it
   needs an edge to sit on. */
.cht_msg.other .cht_bubble { border: 1px solid transparent; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .cht_msg.other .cht_bubble { border-color: var(--chat-hairline); }
}
:root[data-theme="light"] .cht_msg.other .cht_bubble,
html.theme-light .cht_msg.other .cht_bubble { border-color: var(--chat-hairline); }

/* Meta floats bottom-right INSIDE the bubble, so the last line of text wraps
   around it rather than the time taking a line of its own. */
.cht_msg_meta {
    float: right;
    margin: 8px -2px -2px 10px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px; font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    opacity: .75;
}
.cht_meta_glyph { font-size: 11px; }
.cht_meta_edited { font-style: italic; }

.cht_msg_deleted {
    font-style: italic;
    opacity: .75;
}
/* A deleted message keeps its slot, its alignment and its time — the mockup
   is explicit about that. It just loses its content. */
.cht_bubble.deleted { background: transparent; border: 1px dashed var(--chat-hairline); }
.cht_msg.own .cht_bubble.deleted { color: var(--cht-text-secondary); }

/* Ticks. Read is mint, never the brand blue — brand blue on the blue own
   bubble is unreadable, which is the whole reason --chat-read is not the
   accent. */
.cht_msg_tick {
    width: 14px; height: 12px;
    background: currentColor;
    -webkit-mask: var(--tick-mask) center / contain no-repeat;
    mask: var(--tick-mask) center / contain no-repeat;
    --tick-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.cht_msg_tick.delivered,
.cht_msg_tick.read {
    width: 18px;
    --tick-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3Cpath fill='%23000' d='M17 16.2 12.8 12l-1.4 1.4L17 19 29 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.cht_msg_tick.read { color: var(--chat-read-on-own); opacity: 1; }
.cht_msg_tick.sending { opacity: .5; }
.cht_msg_tick.failed {
    color: var(--red);
    --tick-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 7h2v7h-2zM11 16h2v2h-2z'/%3E%3C/svg%3E");
}

.cht_msg.pending .cht_bubble { opacity: .75; }
.cht_msg.failed .cht_bubble { border: 1px solid var(--red); }
.cht_msg_retry {
    align-self: flex-end;
    margin-top: 2px;
    border: 0; background: transparent;
    color: var(--red);
    font: inherit; font-size: 11px;
    cursor: pointer;
}

/* Reply quote, inside the bubble above the text. */
.cht_msg_quote {
    border-left: 2.5px solid var(--chat-quote-rule);
    padding: 4px 8px;
    margin: 0 0 6px;
    border-radius: 6px;
    background: rgba(127, 127, 127, .12);
    font-size: 13px;
    cursor: pointer;
}
.cht_msg_quote b {
    display: block;
    margin-bottom: 1px;
    font-size: 12px; font-weight: 700;
    color: var(--chat-quote-rule);
}
.cht_msg_quote span {
    display: block;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* On the own bubble the rule and the name take the bubble's own text colour;
   the accent on the accent is invisible. */
.cht_msg.own .cht_msg_quote { border-left-color: rgba(255, 255, 255, .9); }
.cht_msg.own .cht_msg_quote b { color: var(--chat-bubble-own-text); }

/* Reactions sit under the bubble, aligned with it. */
.cht_msg_reactions {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin-top: 4px;
}
.cht_msg_reaction {
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--chat-bubble-other);
    border: 1px solid var(--chat-hairline);
    color: var(--cht-text-primary);
    font: inherit; font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
}
.cht_msg_reaction.reacted {
    background: color-mix(in oklab, var(--chat-accent) 22%, transparent);
    border-color: var(--chat-accent);
}
.cht_reaction_add {
    height: 24px; width: 28px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--chat-hairline);
    color: var(--cht-text-muted);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease;
}
.cht_msg:hover .cht_reaction_add,
.cht_reaction_add:focus-visible { opacity: 1; }

/* The unread divider: a rule with a label, inserted at the first unread. */
.cht_unread_divider {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 16px 4px;
    color: var(--chat-unread);
    font-size: 11px; font-weight: 600;
}
.cht_unread_divider::before,
.cht_unread_divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--chat-unread);
    opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
    .cht_reaction_add { transition: none; }
}