.roleBadge {
    // Color Variables
    --roleBadge-color-user-background: #dbeafe;
    --roleBadge-color-user-text: #1d4ed8;
    --roleBadge-color-user-border: #bfdbfe;
    --roleBadge-color-assistant-background: #dcfce7;
    --roleBadge-color-assistant-text: #15803d;
    --roleBadge-color-assistant-border: #bbf7d0;
    --roleBadge-color-system-background: #f3e8ff;
    --roleBadge-color-system-text: #7e22ce;
    --roleBadge-color-system-border: #e9d5ff;
    --roleBadge-color-tool-background: #ffedd5;
    --roleBadge-color-tool-text: #c2410c;
    --roleBadge-color-tool-border: #fed7aa;
    --roleBadge-color-type-background: #f3f4f6;
    --roleBadge-color-type-text: #4b5563;
    --roleBadge-color-type-border: #e5e7eb;

    display: flex;
    align-items: center;
    gap: 0.5rem;

    &__label {
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 500;
        border: 1px solid;

        &--user {
            background-color: var(--roleBadge-color-user-background);
            color: var(--roleBadge-color-user-text);
            border-color: var(--roleBadge-color-user-border);
        }

        &--assistant {
            background-color: var(--roleBadge-color-assistant-background);
            color: var(--roleBadge-color-assistant-text);
            border-color: var(--roleBadge-color-assistant-border);
        }

        &--system {
            background-color: var(--roleBadge-color-system-background);
            color: var(--roleBadge-color-system-text);
            border-color: var(--roleBadge-color-system-border);
        }

        &--tool {
            background-color: var(--roleBadge-color-tool-background);
            color: var(--roleBadge-color-tool-text);
            border-color: var(--roleBadge-color-tool-border);
        }
    }

    &__type {
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 500;
        background-color: var(--roleBadge-color-type-background);
        color: var(--roleBadge-color-type-text);
        border: 1px solid var(--roleBadge-color-type-border);
    }
}
