/* ============================================================
   SITE MESSAGES: LIST, BUBBLES, META, AUTHOR LABELS
   ============================================================ */

/* ------------------------------------------------------------
   Message list container
   ------------------------------------------------------------ */

.message-list,
.messages-list {
    width: 100%;
}

/* The outer #messages container layout and scrolling are in
   site.layout.css / responsive.css; here we only style items. */


/* ------------------------------------------------------------
   Author name + timestamps + unsafe links
   ------------------------------------------------------------ */

/* Optional “speaker” name before the bubble */
.author {
    font-weight: 500;
    color: #556b82;
    margin-right: 10px;
}

/* Extra label for non-current-user messages inside bubble */
.author-label {
    color: var(--color-soft-orange); /* soft orange accent */
    font-weight: 600;
    font-size: 0.92em;
    margin-bottom: 3px;
    margin-left: 3px;
    letter-spacing: 0.02em;
}

/* The HH:mm time at the right side of bubble meta line */
.timestamp {
    font-size: 0.85em;
    color: var(--color-text-muted);
}

/* Mark unsafe / suspect links in the message body */
.unsafe-link {
    color: #c00;
    font-style: italic;
}


/* ------------------------------------------------------------
   Message bubbles (content)
   ------------------------------------------------------------ */

/* You keep .message-row in markup:
   <div class="message-row align-right">...</div>
   The alignment is mostly driven by bubble margins below. */

/* Message bubbles: shrink to content on both sides */
.message-row {
    display: flex;
    padding: 4px 16px;
}

    .message-row.align-left {
        justify-content: flex-start;
    }

    .message-row.align-right {
        justify-content: flex-end;
    }

    /* Critical override: fluent-card used as message bubble */
    .message-row > fluent-card.message-bubble {
        flex: 0 0 auto !important; /* don't grow to fill the row */
        width: auto !important; /* no full-width stretching */
        max-width: 72%;
        box-sizing: border-box;
    }

/* RIGHT side: current user */
.bubble-user {
    background: var(--color-header-gray);
    border-color: var(--color-soft-blue);
}

/* LEFT side: other participants */
.bubble-other {
    background: #ffffff;
    border-color: #e2e2e2;
}

/* Core message "card" */
.message-bubble {
    max-width: 72%;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 12px;
    border: 1px solid #e2e2e2;
    box-shadow: var(--shadow);
    box-sizing: border-box;

    /* IMPORTANT: flex sizing – shrink to content, don't stretch */
    flex: 0 0 auto;
}

    /* Author / "From: ..." label (stronger, readable) */
    .message-bubble .author-label {
        font-size: 0.9rem; /* was 0.8rem */
        font-weight: 700; /* stronger */
        color: var(--color-black-soft); /* darker instead of violet */
        opacity: 0.9;
    }

    /* Main text */
    .message-bubble .message-body {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-black-soft);
        line-height: 1.4;
    }

    /* Meta line (time, Details) */
    .message-bubble .bubble-meta {
        font-size: 0.75rem;
        color: var(--color-text-muted);
    }

    /* Messages coming from subscribed streams */
    .message-bubble.bubble-foreign .message-header {
        padding-bottom: 4px;
        border-bottom: 1px solid var(--color-border-subtle);
        margin-bottom: 6px;
    }

    .message-bubble.bubble-foreign .author-label {
        color: var(--color-soft-blue); /* "From:" stands out */
        font-weight: 800;
    }

    /* Header row inside message card: author + timestamp */
    .message-bubble .message-header {
        margin-bottom: 4px;
        font-size: 0.78rem;
    }

    /* Timestamp in header */
    .message-bubble .timestamp {
        color: var(--color-text-muted);
    }

    .message-bubble .timestamp,
    .message-bubble .message-details-link {
        font-size: 13px;
    }

    /* Footer row (Details link) */
    .message-bubble .message-footer {
        font-size: 0.78rem;
    }


/* Fluent "Details" link: subtle, no big button chrome */
.message-details-link {
    text-decoration: none;
}



/* Header row inside message card: left label + right timestamp */
.message-bubble .message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

/* Left label should not push timestamp off-screen */
.message-bubble .author-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-black-soft);
    opacity: 0.9;
    /* prevent long titles from breaking layout */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    /* If label is empty (user messages), remove it from layout */
    .message-bubble .author-label.is-empty {
        display: none;
    }

/* Foreign stream emphasis */
.message-bubble.bubble-foreign .author-label {
    color: var(--color-soft-blue);
    font-weight: 800;
}

.message-bubble.bubble-foreign .message-header {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--color-border-subtle);
    margin-bottom: 6px;
}

/* Timestamp stays compact and aligned right */
.message-bubble .timestamp {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--color-text-muted);
}