/* ============================================================
   chat-message.css — Streamplace OBS overlay chat component
   ============================================================ */

/* Google Font — Nunito: round, friendly, legible on stream */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");

/* ------------------------------------------------------------------ */
/* Root wrapper                                                         */
/* ------------------------------------------------------------------ */
.cm-root {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    font-family: "Nunito", sans-serif;
    animation: cm-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    opacity: 1;
}

.cm-root.cm-fading-out {
    opacity: 0;
    transition: opacity 1s ease-out;
}

@keyframes cm-slide-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------------ */
/* Left column: avatar + pronouns pill                                 */
/* ------------------------------------------------------------------ */
.cm-left-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    /* Negative margin-bottom so pronouns pill overlaps the bottom
       of the avatar slightly */
    gap: 0;
    position: relative;
    width: 48px;
}

/* Avatar */
.cm-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    /* Subtle ring so the avatar floats cleanly over any stream BG */
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Pronouns pill — overlaps the avatar's bottom edge */
.cm-pronouns-pill {
    display: inline-block;
    margin-top: -8px; /* overlap avatar */
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.65em;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    line-height: 1.6;
    /* color and background-color are set inline */
}

/* ------------------------------------------------------------------ */
/* Right column: header row + bubble                                   */
/* ------------------------------------------------------------------ */
.cm-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* Header row: service icon · name chip · badges                       */
/* ------------------------------------------------------------------ */
.cm-header-row {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Float the header slightly below the bubble's top edge so the
       name chip overlaps it — we achieve this with a small positive
       margin-bottom that gets consumed by the bubble's negative
       margin-top. */
    margin-bottom: -1px;
    /* Sit above the bubble in z-order */
    position: relative;
    z-index: 1;
    padding-left: 14px; /* indent to clear the bubble tail */
}

/* Streamplace service icon */
.cm-service-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    position: relative;
    z-index: 1;
}

/* Streamer avatar icon — same size, sits just behind the service icon */
.cm-streamer-icon {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    margin-left: -6px;
    position: relative;
    z-index: 0;
}

/* Name chip */
.cm-name-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.6;
    /* color and background are set inline */
}

/* Badge icons */
.cm-badge-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* ------------------------------------------------------------------ */
/* Speech bubble                                                        */
/* ------------------------------------------------------------------ */
.cm-bubble {
    position: relative;
    border-radius: 12px;
    padding: 8px 12px 8px 16px;
    word-break: break-word;
    overflow-wrap: break-word;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.2);
    /* color and background are set inline */
    /* Slight overlap with the header row chips */
    margin-top: 0;
    display: inline-block;
    max-width: 100%;
}

/* Triangle tail — points left toward the avatar */
.cm-bubble-tail {
    position: absolute;
    left: -9px;
    top: 14px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right-width: 10px;
    border-right-style: solid;
    /* border-right-color is set inline to match msgBg */
}

/* ------------------------------------------------------------------ */
/* Reply indicator                                                      */
/* ------------------------------------------------------------------ */
.cm-reply-indicator {
    display: inline-block;
    font-size: 0.85em;
    margin-right: 5px;
    opacity: 0.6;
    vertical-align: middle;
    /* rotated slightly so it reads as "reply" rather than "undo" */
    transform: scaleX(-1);
    display: inline-block;
}

/* ------------------------------------------------------------------ */
/* Message text                                                         */
/* ------------------------------------------------------------------ */
.cm-bubble-text {
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1.45;
    /* color is set inline via parent */
}